Skip to content

Commit

Permalink
feat(Theme): add dark mode support (#435)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgonzalezr
dgonzalezr committed Aug 18, 2023
1 parent 0c0a3f3 commit db2a98d
Show file tree
Hide file tree
Showing 52 changed files with 1,417 additions and 656 deletions.
166 changes: 87 additions & 79 deletions config/tailwind.declarative.colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,84 @@ export const DECLARATIVE_COLORS = {
primary: 'var(--bq-background--primary)',
secondary: 'var(--bq-background--secondary)',
tertiary: 'var(--bq-background--tertiary)',
alt: 'var(--bq-background--alt)',
inverse: 'var(--bq-background--inverse)',
brand: 'var(--bq-background--brand)',
overlay: 'var(--bq-background--overlay)',
},
data: {
black: 'var(--bq-data--black)',
blue: 'var(--bq-data--blue)',
corai: 'var(--bq-data--corai)',
cyan: 'var(--bq-data--cyan)',
green: 'var(--bq-data--green)',
grey: 'var(--bq-data--grey)',
indigo: 'var(--bq-data--indigo)',
lime: 'var(--bq-data--lime)',
magenta: 'var(--bq-data--magenta)',
orange: 'var(--bq-data--orange)',
purple: 'var(--bq-data--purple)',
red: 'var(--bq-data--red)',
sky: 'var(--bq-data--sky)',
teal: 'var(--bq-data--teal)',
yellow: 'var(--bq-data--yellow)',
},
focus: 'var(--bq-focus)',
icon: {
primary: 'var(--bq-icon--primary)',
'primary-hover': 'var(--bq-icon--primary-hover)',
'primary-active': 'var(--bq-icon--primary-active)',
'primary-disabled': 'var(--bq-icon--primary-disabled)',
secondary: 'var(--bq-icon--secondary)',
'secondary-hover': 'var(--bq-icon--secondary-hover)',
'secondary-active': 'var(--bq-icon--secondary-active)',
'secondary-disabled': 'var(--bq-icon--secondary-disabled)',
'secondary-inverse': 'var(--bq-icon--secondary-inverse)',
'secondary-inverse-disabled': 'var(--bq-icon--secondary-inverse-disabled)',
brand: 'var(--bq-icon--brand)',
'brand-hover': 'var(--bq-icon--brand-hover)',
'brand-active': 'var(--bq-icon--brand-active)',
'brand-disabled': 'var(--bq-icon--brand-disabled)',
info: 'var(--bq-icon--info)',
success: 'var(--bq-icon--success)',
warning: 'var(--bq-icon--warning)',
danger: 'var(--bq-icon--danger)',
},
stroke: {
primary: 'var(--bq-stroke--primary)',
'primary-hover': 'var(--bq-stroke--primary-hover)',
'primary-active': 'var(--bq-stroke--primary-active)',
'primary-disabled': 'var(--bq-stroke--primary-disabled)',
secondary: 'var(--bq-stroke--secondary)',
'secondary-hover': 'var(--bq-stroke--secondary-hover)',
'secondary-active': 'var(--bq-stroke--secondary-active)',
'secondary-disabled': 'var(--bq-stroke--secondary-disabled)',
tertiary: 'var(--bq-stroke--tertiary)',
'tertiary-hover': 'var(--bq-stroke--tertiary-hover)',
'tertiary-active': 'var(--bq-stroke--tertiary-active)',
'tertiary-disabled': 'var(--bq-stroke--tertiary-disabled)',
inverse: 'var(--bq-stroke--inverse)',
'inverse-hover': 'var(--bq-stroke--inverse-hover)',
'inverse-active': 'var(--bq-stroke--inverse-active)',
'inverse-disabled': 'var(--bq-stroke--inverse-disabled)',
brand: 'var(--bq-stroke--brand)',
'brand-hover': 'var(--bq-stroke--brand-hover)',
'brand-active': 'var(--bq-stroke--brand-active)',
'brand-disabled': 'var(--bq-stroke--brand-disabled)',
'brand-alt': 'var(--bq-stroke--brand-alt)',
'brand-focus': 'var(--bq-stroke--brand-focus)',
success: 'var(--bq-stroke--success)',
'success-hover': 'var(--bq-stroke--success-hover)',
'success-active': 'var(--bq-stroke--success-active)',
'success-disabled': 'var(--bq-stroke--success-disabled)',
warning: 'var(--bq-stroke--warning)',
'warning-hover': 'var(--bq-stroke--warning-hover)',
'warning-active': 'var(--bq-stroke--warning-active)',
'warning-disabled': 'var(--bq-stroke--warning-disabled)',
danger: 'var(--bq-stroke--danger)',
'danger-hover': 'var(--bq-stroke--danger-hover)',
'danger-active': 'var(--bq-stroke--danger-active)',
'danger-disabled': 'var(--bq-stroke--danger-disabled)',
},
text: {
/** Primary */
Expand All @@ -24,123 +100,55 @@ export const DECLARATIVE_COLORS = {
'secondary-inverse': 'var(--bq-text--secondary-inverse)',
/** Inverse */
inverse: 'var(--bq-text--inverse)',
'inverse-disabled': 'var(--bq-text--inverse-disabled)',
/** Brand */
brand: 'var(--bq-text--brand)',
'brand-hover': 'var(--bq-text--brand-hover)',
'brand-active': 'var(--bq-text--brand-active)',
'brand-disabled': 'var(--bq-text--brand-disabled)',
/** Feedback */
info: 'var(--bq-text--info)',
success: 'var(--bq-text--success)',
warning: 'var(--bq-text--warning)',
danger: 'var(--bq-text--danger)',
},
icon: {
/** Primary */
primary: 'var(--bq-icon--primary)',
'primary-hover': 'var(--bq-icon--primary-hover)',
'primary-active': 'var(--bq-icon--primary-active)',
'primary-disabled': 'var(--bq-icon--primary-disabled)',
/** Secondary */
secondary: 'var(--bq-icon--secondary)',
'secondary-hover': 'var(--bq-icon--secondary-hover)',
'secondary-active': 'var(--bq-icon--secondary-active)',
'secondary-disabled': 'var(--bq-icon--secondary-disabled)',
'secondary-inverse': 'var(--bq-icon--secondary-inverse)',
/** Brand */
brand: 'var(--bq-icon--brand)',
'brand-hover': 'var(--bq-icon--brand-hover)',
'brand-active': 'var(--bq-icon--brand-active)',
'brand-disabled': 'var(--bq-icon--brand-disabled)',
/** Feedback */
success: 'var(--bq-icon--success)',
warning: 'var(--bq-icon--warning)',
danger: 'var(--bq-icon--danger)',
},
ui: {
/** Primary */
primary: 'var(--bq-ui--primary)',
'primary-hover': 'var(--bq-ui--primary-hover)',
'primary-active': 'var(--bq-ui--primary-active)',
'primary-disabled': 'var(--bq-ui--primary-disabled)',
/** Secondary */
'primary-alt': 'var(--bq-ui--primary-alt)',
secondary: 'var(--bq-ui--secondary)',
'secondary-hover': 'var(--bq-ui--secondary-hover)',
'secondary-active': 'var(--bq-ui--secondary-active)',
'secondary-disabled': 'var(--bq-ui--secondary-disabled)',
'secondary-light': 'var(--bq-ui--secondary-light)',
/** Tiertary */
tiertary: 'var(--bq-ui--tiertary)',
'tiertary-hover': 'var(--bq-ui--tiertary-hover)',
'tiertary-active': 'var(--bq-ui--tiertary-active)',
'tiertary-disabled': 'var(--bq-ui--tiertary-disabled)',
/** Inverse */
tertiary: 'var(--bq-ui--tertiary)',
'tertiary-hover': 'var(--bq-ui--tertiary-hover)',
'tertiary-active': 'var(--bq-ui--tertiary-active)',
'tertiary-disabled': 'var(--bq-ui--tertiary-disabled)',
inverse: 'var(--bq-ui--inverse)',
'inverse-hover': 'var(--bq-ui--inverse-hover)',
'inverse-active': 'var(--bq-ui--inverse-active)',
'inverse-disabled': 'var(--bq-ui--inverse-disabled)',
/** Brand */
brand: 'var(--bq-ui--brand)',
'brand-hover': 'var(--bq-ui--brand-hover)',
'brand-active': 'var(--bq-ui--brand-active)',
'brand-disabled': 'var(--bq-ui--brand-disabled)',
'brand-light': 'var(--bq-ui--brand-light)',
/** Success */
'brand-alt': 'var(--bq-ui--brand-alt)',
success: 'var(--bq-ui--success)',
'success-hover': 'var(--bq-ui--success-hover)',
'success-active': 'var(--bq-ui--success-active)',
'success-disabled': 'var(--bq-ui--success-disabled)',
'success-light': 'var(--bq-ui--success-light)',
/** Warning */
'success-alt': 'var(--bq-ui--success-alt)',
warning: 'var(--bq-ui--warning)',
'warning-hover': 'var(--bq-ui--warning-hover)',
'warning-active': 'var(--bq-ui--warning-active)',
'warning-disabled': 'var(--bq-ui--warning-disabled)',
'warning-light': 'var(--bq-ui--warning-light)',
/** Danger */
'warning-alt': 'var(--bq-ui--warning-alt)',
danger: 'var(--bq-ui--danger)',
'danger-hover': 'var(--bq-ui--danger-hover)',
'danger-active': 'var(--bq-ui--danger-active)',
'danger-disabled': 'var(--bq-ui--danger-disabled)',
'danger-light': 'var(--bq-ui--danger-light)',
},
stroke: {
/** Primary */
primary: 'var(--bq-stroke--primary)',
'primary-hover': 'var(--bq-stroke--primary-hover)',
'primary-active': 'var(--bq-stroke--primary-active)',
'primary-disabled': 'var(--bq-stroke--primary-disabled)',
/** Secondary */
secondary: 'var(--bq-stroke--secondary)',
'secondary-hover': 'var(--bq-stroke--secondary-hover)',
'secondary-active': 'var(--bq-stroke--secondary-active)',
'secondary-disabled': 'var(--bq-stroke--secondary-disabled)',
'secondary-light': 'var(--bq-stroke--secondary-light)',
/** Tiertary */
tiertary: 'var(--bq-stroke--tiertary)',
'tiertary-hover': 'var(--bq-stroke--tiertary-hover)',
'tiertary-active': 'var(--bq-stroke--tiertary-active)',
'tiertary-disabled': 'var(--bq-stroke--tiertary-disabled)',
/** Inverse */
inverse: 'var(--bq-stroke--inverse)',
/** Brand */
brand: 'var(--bq-stroke--brand)',
'brand-hover': 'var(--bq-stroke--brand-hover)',
'brand-active': 'var(--bq-stroke--brand-active)',
'brand-disabled': 'var(--bq-stroke--brand-disabled)',
/** Success */
success: 'var(--bq-stroke--success)',
'success-hover': 'var(--bq-stroke--success-hover)',
'success-active': 'var(--bq-stroke--success-active)',
'success-disabled': 'var(--bq-stroke--success-disabled)',
/** Warning */
warning: 'var(--bq-stroke--warning)',
'warning-hover': 'var(--bq-stroke--warning-hover)',
'warning-active': 'var(--bq-stroke--warning-active)',
'warning-disabled': 'var(--bq-stroke--warning-disabled)',
/** Danger */
danger: 'var(--bq-stroke--danger)',
'danger-hover': 'var(--bq-stroke--danger-hover)',
'danger-active': 'var(--bq-stroke--danger-active)',
'danger-disabled': 'var(--bq-stroke--danger-disabled)',
'danger-alt': 'var(--bq-ui--danger-alt)',
},
};
14 changes: 14 additions & 0 deletions config/tailwind.primitve.colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ export const PRIMITIVE_COLORS = {
700: 'var(--bq-grey-700)',
800: 'var(--bq-grey-800)',
900: 'var(--bq-grey-900)',
950: 'var(--bq-grey-950)',
1000: 'var(--bq-grey-1000)',
},
indigo: {
100: 'var(--bq-indigo-100)',
Expand All @@ -87,6 +89,18 @@ export const PRIMITIVE_COLORS = {
900: 'var(--bq-indigo-900)',
1000: 'var(--bq-indigo-1000)',
},
iris: {
100: 'var(--bq-iris-100)',
200: 'var(--bq-iris-200)',
300: 'var(--bq-iris-300)',
400: 'var(--bq-iris-400)',
500: 'var(--bq-iris-500)',
600: 'var(--bq-iris-600)',
700: 'var(--bq-iris-700)',
800: 'var(--bq-iris-800)',
900: 'var(--bq-iris-900)',
1000: 'var(--bq-iris-1000)',
},
lime: {
100: 'var(--bq-lime-100)',
200: 'var(--bq-lime-200)',
Expand Down
Loading

0 comments on commit db2a98d

Please sign in to comment.