Skip to content

Commit

Permalink
feat(Theme): add Endava theme (#567)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgonzalezr
dgonzalezr committed Oct 11, 2023
1 parent 7c9ac7b commit 619df05
Show file tree
Hide file tree
Showing 43 changed files with 827 additions and 362 deletions.
2 changes: 1 addition & 1 deletion config/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export * from './tailwind.declarative.colors';
export * from './tailwind.primitve.colors';
export * from './tailwind.primitive.colors';
2 changes: 2 additions & 0 deletions config/tailwind.declarative.colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export const DECLARATIVE_COLORS = {
'secondary-disabled': 'var(--bq-icon--secondary-disabled)',
'secondary-inverse': 'var(--bq-icon--secondary-inverse)',
'secondary-inverse-disabled': 'var(--bq-icon--secondary-inverse-disabled)',
inverse: 'var(--bq-icon--inverse)',
'inverse-disabled': 'var(--bq-icon--inverse-disabled)',
brand: 'var(--bq-icon--brand)',
'brand-hover': 'var(--bq-icon--brand-hover)',
'brand-active': 'var(--bq-icon--brand-active)',
Expand Down
0 config/tailwind.primitve.colors.ts → config/tailwind.primitive.colors.ts
View file
File renamed without changes.
137 changes: 74 additions & 63 deletions config/theme/default/dark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ export const DefaultDarkTheme = {
/* -------------------------------------------------------------------------- */
'bq-background--primary': 'var(--bq-grey-1000)',
'bq-background--secondary': 'var(--bq-grey-950)',
'bq-background--tertiary': 'var(--bq-grey-900)',
'bq-background--alt': 'var(--bq-grey-800)',
'bq-background--tertiary': 'var(--bq-grey-800)',
'bq-background--alt': 'var(--bq-grey-700)',
'bq-background--inverse': 'var(--bq-grey-600)',
'bq-background--brand': 'var(--bq-iris-600)',
'bq-background--overlay': 'var(--bq-grey-900)',
'bq-background--overlay': 'var(--bq-grey-900)', // with opacity: 60%
/* -------------------------------------------------------------------------- */
/* Data colors */
/* -------------------------------------------------------------------------- */
'bq-data--black': 'var(--bq-grey-200)',
'bq-data--blue': 'var(--bq-blue-500)',
'bq-data--brand': 'var(--bq-iris-500)',
'bq-data--corai': 'var(--bq-corai-500)',
'bq-data--cyan': 'var(--bq-cyan-500)',
'bq-data--green': 'var(--bq-green-500)',
'bq-data--grey': 'var(--bq-grey-500)',
'bq-data--indigo': 'var(--bq-indigo-500)',
'bq-data--inverse': 'var(--bq-grey-200)',
'bq-data--lime': 'var(--bq-lime-500)',
'bq-data--magenta': 'var(--bq-magenta-500)',
'bq-data--orange': 'var(--bq-orange-500)',
Expand All @@ -37,23 +37,23 @@ export const DefaultDarkTheme = {
/** Primary */
'bq-icon--primary': 'var(--bq-grey-100)',
'bq-icon--primary-hover': 'var(--bq-grey-200)',
'bq-icon--primary-active': 'var(--bq-grey-300)',
'bq-icon--primary-disabled': 'var(--bq-grey-800)',
'bq-icon--primary-alt': 'var(--bq-grey-50)',
'bq-icon--primary-active': 'var(--bq-grey-50)',
'bq-icon--primary-disabled': 'var(--bq-grey-500)',
'bq-icon--primary-alt': 'var(--bq-neutral-white)',
'bq-icon--primary-alt-disabled': 'var(--bq-grey-200)',
/** Secondary */
'bq-icon--secondary': 'var(--bq-grey-600)',
'bq-icon--secondary': 'var(--bq-grey-400)',
'bq-icon--secondary-hover': 'var(--bq-grey-500)',
'bq-icon--secondary-active': 'var(--bq-grey-700)',
'bq-icon--secondary-disabled': 'var(--bq-grey-400)',
'bq-icon--secondary-active': 'var(--bq-grey-300)',
'bq-icon--secondary-disabled': 'var(--bq-grey-600)',
/** Inverse */
'bq-icon--inverse': 'var(--bq-grey-900)',
'bq-icon--inverse-disabled': 'var(--bq-grey-950)',
'bq-icon--inverse': 'var(--bq-grey-800)',
'bq-icon--inverse-disabled': 'var(--bq-grey-900)',
/** Brand */
'bq-icon--brand': 'var(--bq-iris-400)',
'bq-icon--brand-hover': 'var(--bq-iris-300)',
'bq-icon--brand-active': 'var(--bq-iris-500)',
'bq-icon--brand-disabled': 'var(--bq-iris-600)',
'bq-icon--brand-hover': 'var(--bq-iris-500)',
'bq-icon--brand-active': 'var(--bq-iris-600)',
'bq-icon--brand-disabled': 'var(--bq-iris-700)',
/** Feedback */
'bq-icon--info': 'var(--bq-blue-600)',
'bq-icon--success': 'var(--bq-teal-600)',
Expand All @@ -63,32 +63,32 @@ export const DefaultDarkTheme = {
/* Stroke colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-stroke--primary': 'var(--bq-grey-950)',
'bq-stroke--primary-hover': 'var(--bq-grey-900)',
'bq-stroke--primary-active': 'var(--bq-grey-800)',
'bq-stroke--primary': 'var(--bq-grey-900)',
'bq-stroke--primary-hover': 'var(--bq-grey-950)',
'bq-stroke--primary-active': 'var(--bq-grey-700)',
'bq-stroke--primary-disabled': 'var(--bq-grey-800)',
'bq-stroke--primary-alt': 'var(--bq-grey-1000)',
/** Secondary */
'bq-stroke--secondary': 'var(--bq-grey-900)',
'bq-stroke--secondary-hover': 'var(--bq-grey-800)',
'bq-stroke--secondary-active': 'var(--bq-grey-700)',
'bq-stroke--secondary': 'var(--bq-grey-700)',
'bq-stroke--secondary-hover': 'var(--bq-grey-600)',
'bq-stroke--secondary-active': 'var(--bq-grey-500)',
'bq-stroke--secondary-disabled': 'var(--bq-grey-800)',
/** Tertiary */
'bq-stroke--tertiary': 'var(--bq-grey-700)',
'bq-stroke--tertiary-hover': 'var(--bq-grey-600)',
'bq-stroke--tertiary-active': 'var(--bq-grey-5000)',
'bq-stroke--tertiary-disabled': 'var(--bq-grey-800)',
'bq-stroke--tertiary': 'var(--bq-grey-400)',
'bq-stroke--tertiary-hover': 'var(--bq-grey-500)',
'bq-stroke--tertiary-active': 'var(--bq-grey-600)',
'bq-stroke--tertiary-disabled': 'var(--bq-grey-700)',
/** Inverse */
'bq-stroke--inverse': 'var(--bq-grey-400)',
'bq-stroke--inverse-hover': 'var(--bq-grey-500)',
'bq-stroke--inverse-active': 'var(--bq-grey-600)',
'bq-stroke--inverse-disabled': 'var(--bq-grey-700)',
'bq-stroke--inverse': 'var(--bq-grey-950)',
'bq-stroke--inverse-hover': 'var(--bq-grey-900)',
'bq-stroke--inverse-active': 'var(--bq-grey-700)',
'bq-stroke--inverse-disabled': 'var(--bq-grey-800)',
/** Brand */
'bq-stroke--brand': 'var(--bq-iris-600)',
'bq-stroke--brand-hover': 'var(--bq-iris-700)',
'bq-stroke--brand-active': 'var(--bq-iris-500)',
'bq-stroke--brand-disabled': 'var(--bq-iris-800)',
'bq-stroke--brand-alt': 'var(--bq-iris-1000)',
'bq-stroke--brand': 'var(--bq-iris-500)',
'bq-stroke--brand-hover': 'var(--bq-iris-400)',
'bq-stroke--brand-active': 'var(--bq-iris-600)',
'bq-stroke--brand-disabled': 'var(--bq-iris-700)',
'bq-stroke--brand-alt': 'var(--bq-iris-900)',
/** Success */
'bq-stroke--success': 'var(--bq-teal-600)',
'bq-stroke--success-hover': 'var(--bq-teal-700)',
Expand All @@ -104,29 +104,34 @@ export const DefaultDarkTheme = {
'bq-stroke--danger-hover': 'var(--bq-red-700)',
'bq-stroke--danger-active': 'var(--bq-red-500)',
'bq-stroke--danger-disabled': 'var(--bq-red-800)',
/** Info */
'bq-stroke--info': 'var(--bq-blue-600)',
'bq-stroke--info-hover': 'var(--bq-blue-700)',
'bq-stroke--info-active': 'var(--bq-blue-500)',
'bq-stroke--info-disabled': 'var(--bq-blue-800)',
/* -------------------------------------------------------------------------- */
/* Text colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-text--primary': 'var(--bq-grey-100)',
'bq-text--primary-hover': 'var(--bq-grey-200)',
'bq-text--primary-active': 'var(--bq-grey-300)',
'bq-text--primary-disabled': 'var(--bq-grey-800)',
'bq-text--primary-alt': 'var(--bq-grey-50)',
'bq-text--primary-alt-disabled': 'var(--bq-grey-50)',
'bq-text--primary-active': 'var(--bq-grey-50)',
'bq-text--primary-disabled': 'var(--bq-grey-500)',
'bq-text--primary-alt': 'var(--bq-neutral-white)',
'bq-text--primary-alt-disabled': 'var(--bq-grey-200)',
/** Secondary */
'bq-text--secondary': 'var(--bq-grey-500)',
'bq-text--secondary-hover': 'var(--bq-grey-600)',
'bq-text--secondary-active': 'var(--bq-grey-700)',
'bq-text--secondary-disabled': 'var(--bq-grey-800)',
'bq-text--secondary': 'var(--bq-grey-400)',
'bq-text--secondary-hover': 'var(--bq-grey-500)',
'bq-text--secondary-active': 'var(--bq-grey-300)',
'bq-text--secondary-disabled': 'var(--bq-grey-600)',
/** Inverse */
'bq-text--inverse': 'var(--bq-grey-900)',
'bq-text--inverse-disabled': 'var(--bq-grey-950)',
'bq-text--inverse': 'var(--bq-grey-800)',
'bq-text--inverse-disabled': 'var(--bq-grey-900)',
/** Brand */
'bq-text--brand': 'var(--bq-iris-400)',
'bq-text--brand-hover': 'var(--bq-iris-300)',
'bq-text--brand-active': 'var(--bq-iris-500)',
'bq-text--brand-disabled': 'var(--bq-iris-600)',
'bq-text--brand-hover': 'var(--bq-iris-500)',
'bq-text--brand-active': 'var(--bq-iris-600)',
'bq-text--brand-disabled': 'var(--bq-iris-700)',
/** Feedback */
'bq-text--info': 'var(--bq-blue-600)',
'bq-text--success': 'var(--bq-teal-600)',
Expand All @@ -136,31 +141,31 @@ export const DefaultDarkTheme = {
/* UI colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-ui--primary': 'var(--bq-grey-950)',
'bq-ui--primary-hover': 'var(--bq-grey-900)',
'bq-ui--primary-active': 'var(--bq-grey-700)',
'bq-ui--primary-disabled': 'var(--bq-grey-800)',
'bq-ui--primary': 'var(--bq-grey-900)',
'bq-ui--primary-hover': 'var(--bq-grey-950)',
'bq-ui--primary-active': 'var(--bq-grey-800)',
'bq-ui--primary-disabled': 'var(--bq-grey-950)',
'bq-ui--primary-alt': 'var(--bq-grey-950)',
/** Secondary */
'bq-ui--secondary': 'var(--bq-grey-900)',
'bq-ui--secondary-hover': 'var(--bq-grey-800)',
'bq-ui--secondary-active': 'var(--bq-grey-700)',
'bq-ui--secondary-disabled': 'var(--bq-grey-800)',
'bq-ui--secondary': 'var(--bq-grey-800)',
'bq-ui--secondary-hover': 'var(--bq-grey-700)',
'bq-ui--secondary-active': 'var(--bq-grey-600)',
'bq-ui--secondary-disabled': 'var(--bq-grey-900)',
/** Tertiary */
'bq-ui--tertiary': 'var(--bq-grey-700)',
'bq-ui--tertiary-hover': 'var(--bq-grey-600)',
'bq-ui--tertiary-active': 'var(--bq-grey-500)',
'bq-ui--tertiary-disabled': 'var(--bq-grey-800)',
/** Inverse */
'bq-ui--inverse': 'var(--bq-grey-400)',
'bq-ui--inverse-hover': 'var(--bq-grey-500)',
'bq-ui--inverse-active': 'var(--bq-grey-600)',
'bq-ui--inverse-disabled': 'var(--bq-grey-700)',
'bq-ui--inverse': 'var(--bq-grey-100)',
'bq-ui--inverse-hover': 'var(--bq-grey-200)',
'bq-ui--inverse-active': 'var(--bq-grey-300)',
'bq-ui--inverse-disabled': 'var(--bq-grey-50)',
/** Brand */
'bq-ui--brand': 'var(--bq-iris-600)',
'bq-ui--brand-hover': 'var(--bq-iris-700)',
'bq-ui--brand-active': 'var(--bq-iris-500)',
'bq-ui--brand-disabled': 'var(--bq-iris-800)',
'bq-ui--brand-hover': 'var(--bq-iris-800)',
'bq-ui--brand-active': 'var(--bq-iris-700)',
'bq-ui--brand-disabled': 'var(--bq-iris-900)',
'bq-ui--brand-alt': 'var(--bq-iris-1000)',
/** Success */
'bq-ui--success': 'var(--bq-teal-600)',
Expand All @@ -180,4 +185,10 @@ export const DefaultDarkTheme = {
'bq-ui--danger-active': 'var(--bq-red-800)',
'bq-ui--danger-disabled': 'var(--bq-red-900)',
'bq-ui--danger-alt': 'var(--bq-red-1000)',
/** Info */
'bq-ui--info': 'var(--bq-blue-600)',
'bq-ui--info-hover': 'var(--bq-blue-700)',
'bq-ui--info-active': 'var(--bq-blue-800)',
'bq-ui--info-disabled': 'var(--bq-blue-900)',
'bq-ui--info-alt': 'var(--bq-blue-1000)',
};
67 changes: 39 additions & 28 deletions config/theme/default/light.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@ export const DefaultLightTheme = {
/* Background colors */
/* -------------------------------------------------------------------------- */
'bq-background--primary': 'var(--bq-neutral-white)',
'bq-background--secondary': 'var(--bq-grey-50)',
'bq-background--secondary': 'var(--bq-grey-100)',
'bq-background--tertiary': 'var(--bq-grey-200)',
'bq-background--alt': 'var(--bq-grey-600)',
'bq-background--alt': 'var(--bq-grey-300)',
'bq-background--inverse': 'var(--bq-grey-900)',
'bq-background--brand': 'var(--bq-iris-600)',
'bq-background--overlay': 'var(--bq-grey-900)',
'bq-background--overlay': 'var(--bq-grey-900)', // with opacity: 60%
/* -------------------------------------------------------------------------- */
/* Data colors */
/* -------------------------------------------------------------------------- */
'bq-data--black': 'var(--bq-grey-950)',
'bq-data--blue': 'var(--bq-blue-600)',
'bq-data--brand': 'var(--bq-iris-600)',
'bq-data--corai': 'var(--bq-corai-600)',
'bq-data--cyan': 'var(--bq-cyan-600)',
'bq-data--green': 'var(--bq-green-600)',
'bq-data--grey': 'var(--bq-grey-600)',
'bq-data--indigo': 'var(--bq-indigo-600)',
'bq-data--inverse': 'var(--bq-grey-950)',
'bq-data--lime': 'var(--bq-lime-600)',
'bq-data--magenta': 'var(--bq-magenta-500)',
'bq-data--magenta': 'var(--bq-magenta-600)',
'bq-data--orange': 'var(--bq-orange-600)',
'bq-data--purple': 'var(--bq-purple-600)',
'bq-data--red': 'var(--bq-red-600)',
Expand All @@ -35,20 +35,20 @@ export const DefaultLightTheme = {
/* Icons colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-icon--primary': 'var(--bq-grey-900)',
'bq-icon--primary-hover': 'var(--bq-grey-800)',
'bq-icon--primary-active': 'var(--bq-grey-1000)',
'bq-icon--primary-disabled': 'var(--bq-grey-400)',
'bq-icon--primary-alt': 'var(--bq-grey-50)',
'bq-icon--primary': 'var(--bq-grey-800)',
'bq-icon--primary-hover': 'var(--bq-grey-700)',
'bq-icon--primary-active': 'var(--bq-grey-900)',
'bq-icon--primary-disabled': 'var(--bq-grey-500)',
'bq-icon--primary-alt': 'var(--bq-neutral-white)',
'bq-icon--primary-alt-disabled': 'var(--bq-grey-200)',
/** Secondary */
'bq-icon--secondary': 'var(--bq-grey-600)',
'bq-icon--secondary-hover': 'var(--bq-grey-500)',
'bq-icon--secondary-active': 'var(--bq-grey-700)',
'bq-icon--secondary-disabled': 'var(--bq-grey-400)',
/** Inverse */
'bq-icon--inverse': 'var(--bq-neutral-white)',
'bq-icon--inverse-disabled': 'var(--bq-grey-50)',
'bq-icon--inverse': 'var(--bq-grey-50)',
'bq-icon--inverse-disabled': 'var(--bq-grey-100)',
/** Brand */
'bq-icon--brand': 'var(--bq-iris-600)',
'bq-icon--brand-hover': 'var(--bq-iris-500)',
Expand All @@ -72,7 +72,7 @@ export const DefaultLightTheme = {
'bq-stroke--secondary': 'var(--bq-grey-600)',
'bq-stroke--secondary-hover': 'var(--bq-grey-500)',
'bq-stroke--secondary-active': 'var(--bq-grey-700)',
'bq-stroke--secondary-disabled': 'var(--bq-grey-400)',
'bq-stroke--secondary-disabled': 'var(--bq-grey-300)',
/** Tertiary */
'bq-stroke--tertiary': 'var(--bq-grey-900)',
'bq-stroke--tertiary-hover': 'var(--bq-grey-800)',
Expand Down Expand Up @@ -104,14 +104,19 @@ export const DefaultLightTheme = {
'bq-stroke--danger-hover': 'var(--bq-red-500)',
'bq-stroke--danger-active': 'var(--bq-red-700)',
'bq-stroke--danger-disabled': 'var(--bq-red-400)',
/** Info */
'bq-stroke--info': 'var(--bq-blue-600)',
'bq-stroke--info-hover': 'var(--bq-blue-500)',
'bq-stroke--info-active': 'var(--bq-blue-700)',
'bq-stroke--info-disabled': 'var(--bq-blue-400)',
/* -------------------------------------------------------------------------- */
/* Text colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-text--primary': 'var(--bq-grey-900)',
'bq-text--primary-hover': 'var(--bq-grey-800)',
'bq-text--primary-active': 'var(--bq-grey-1000)',
'bq-text--primary-disabled': 'var(--bq-grey-400)',
'bq-text--primary': 'var(--bq-grey-800)',
'bq-text--primary-hover': 'var(--bq-grey-700)',
'bq-text--primary-active': 'var(--bq-grey-900)',
'bq-text--primary-disabled': 'var(--bq-grey-500)',
'bq-text--primary-alt': 'var(--bq-neutral-white)',
'bq-text--primary-alt-disabled': 'var(--bq-grey-200)',
/** Secondary */
Expand All @@ -129,28 +134,28 @@ export const DefaultLightTheme = {
'bq-text--brand-disabled': 'var(--bq-iris-400)',
/** Feedback */
'bq-text--info': 'var(--bq-blue-700)',
'bq-text--success': 'var(--bq-teal-800)',
'bq-text--success': 'var(--bq-teal-700)',
'bq-text--warning': 'var(--bq-gold-700)',
'bq-text--danger': 'var(--bq-red-700)',
/* -------------------------------------------------------------------------- */
/* UI colors */
/* -------------------------------------------------------------------------- */
/** Primary */
'bq-ui--primary': 'var(--bq-neutral-white)',
'bq-ui--primary-hover': 'var(--bq-grey-50)',
'bq-ui--primary-active': 'var(--bq-grey-200)',
'bq-ui--primary-disabled': 'var(--bq-grey-100)',
'bq-ui--primary-hover': 'var(--bq-grey-100)',
'bq-ui--primary-active': 'var(--bq-grey-300)',
'bq-ui--primary-disabled': 'var(--bq-grey-50)',
'bq-ui--primary-alt': 'var(--bq-grey-50)',
/** Secondary */
'bq-ui--secondary': 'var(--bq-grey-200)',
'bq-ui--secondary-hover': 'var(--bq-grey-100)',
'bq-ui--secondary-active': 'var(--bq-grey-300)',
'bq-ui--secondary-hover': 'var(--bq-grey-300)',
'bq-ui--secondary-active': 'var(--bq-grey-400)',
'bq-ui--secondary-disabled': 'var(--bq-grey-100)',
/** Tertiary */
'bq-ui--tertiary': 'var(--bq-grey-600)',
'bq-ui--tertiary-hover': 'var(--bq-grey-500)',
'bq-ui--tertiary-active': 'var(--bq-grey-700)',
'bq-ui--tertiary-disabled': 'var(--bq-grey-100)',
'bq-ui--tertiary': 'var(--bq-grey-500)',
'bq-ui--tertiary-hover': 'var(--bq-grey-400)',
'bq-ui--tertiary-active': 'var(--bq-grey-600)',
'bq-ui--tertiary-disabled': 'var(--bq-grey-300)',
/** Inverse */
'bq-ui--inverse': 'var(--bq-grey-900)',
'bq-ui--inverse-hover': 'var(--bq-grey-800)',
Expand Down Expand Up @@ -180,4 +185,10 @@ export const DefaultLightTheme = {
'bq-ui--danger-active': 'var(--bq-red-700)',
'bq-ui--danger-disabled': 'var(--bq-red-400)',
'bq-ui--danger-alt': 'var(--bq-red-100)',
/** Info */
'bq-ui--info': 'var(--bq-blue-600)',
'bq-ui--info-hover': 'var(--bq-blue-500)',
'bq-ui--info-active': 'var(--bq-blue-700)',
'bq-ui--info-disabled': 'var(--bq-blue-400)',
'bq-ui--info-alt': 'var(--bq-blue-100)',
};
Loading

0 comments on commit 619df05

Please sign in to comment.