Skip to content

Commit

Permalink
feat(style): update material 3 colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliMD
AliMD committed Jul 17, 2023
1 parent cb2b7de commit 7d8d755
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 78 deletions.
62 changes: 38 additions & 24 deletions ui/style/lib/colors.css
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
@layer base {
:root {
--sys-color-primary: var(--ref-palette-primary40);
--sys-color-on-primary: var(--ref-palette-primary100);
--sys-color-primary-container: var(--ref-palette-primary90);
--sys-color-on-primary: var(--ref-palette-primary100);
--sys-color-on-primary-container: var(--ref-palette-primary10);
--sys-color-inverse-primary: var(--ref-palette-primary80);

--sys-color-secondary: var(--ref-palette-secondary40);
--sys-color-on-secondary: var(--ref-palette-secondary100);
--sys-color-secondary-container: var(--ref-palette-secondary90);
--sys-color-on-secondary: var(--ref-palette-secondary100);
--sys-color-on-secondary-container: var(--ref-palette-secondary10);

--sys-color-tertiary: var(--ref-palette-tertiary40);
--sys-color-on-tertiary: var(--ref-palette-tertiary100);
--sys-color-tertiary-container: var(--ref-palette-tertiary90);
--sys-color-on-tertiary: var(--ref-palette-tertiary100);
--sys-color-on-tertiary-container: var(--ref-palette-tertiary10);

--sys-color-background: var(--ref-palette-neutral99);
--sys-color-on-background: var(--ref-palette-neutral10);
--sys-color-background: var(--ref-palette-neutral98);
--sys-color-surface: var(--ref-palette-neutral98);
--sys-color-surface-bright: var(--ref-palette-neutral98);
--sys-color-surface-dim: var(--ref-palette-neutral90); /* 87! */
--sys-color-surface-container-lowest: var(--ref-palette-neutral100);
--sys-color-surface-container-low: var(--ref-palette-neutral98); /* 86! */
--sys-color-surface-container: var(--ref-palette-neutral95); /* 94! */
--sys-color-surface-container-high: var(--ref-palette-neutral90); /* 92! */
--sys-color-surface-container-highest: var(--ref-palette-neutral90);
--sys-color-surface-variant: var(--ref-palette-neutral-variant90);
--sys-color-inverse-surface: var(--ref-palette-neutral20);

--sys-color-surface: var(--ref-palette-neutral99);
--sys-color-on-background: var(--ref-palette-neutral10);
--sys-color-on-surface: var(--ref-palette-neutral10);

--sys-color-surface-variant: var(--ref-palette-neutral-variant90);
--sys-color-on-surface-variant: var(--ref-palette-neutral-variant30);
--sys-color-inverse-on-surface: var(--ref-palette-neutral95);

--sys-color-outline: var(--ref-palette-neutral-variant50);
--sys-color-outline-variant: var(--ref-palette-neutral-variant80);
Expand All @@ -32,40 +41,45 @@
--sys-color-on-error: var(--ref-palette-error100);
--sys-color-on-error-container: var(--ref-palette-error10);

--sys-color-inverse-primary: var(--ref-palette-primary80);
--sys-color-inverse-surface: var(--ref-palette-neutral20);
--sys-color-inverse-on-surface: var(--ref-palette-neutral95);

--sys-color-surface-tint: var(--sys-color-primary-hsl);
--sys-color-shadow: var(--ref-palette-neutral0);
--sys-color-scrim: var(--ref-palette-neutral0);
}

@media (prefers-color-scheme: dark) {
:root {
--sys-color-primary: var(--ref-palette-primary80);
--sys-color-on-primary: var(--ref-palette-primary20);
--sys-color-primary: var(--ref-palette-primary60);
--sys-color-primary-container: var(--ref-palette-primary30);
--sys-color-on-primary: var(--ref-palette-primary20);
--sys-color-on-primary-container: var(--ref-palette-primary90);
--sys-color-inverse-primary: var(--ref-palette-primary40);

--sys-color-secondary: var(--ref-palette-secondary80);
--sys-color-on-secondary: var(--ref-palette-secondary20);
--sys-color-secondary-container: var(--ref-palette-secondary30);
--sys-color-on-secondary: var(--ref-palette-secondary20);
--sys-color-on-secondary-container: var(--ref-palette-secondary90);

--sys-color-tertiary: var(--ref-palette-tertiary80);
--sys-color-on-tertiary: var(--ref-palette-tertiary20);
--sys-color-tertiary-container: var(--ref-palette-tertiary30);
--sys-color-on-tertiary: var(--ref-palette-tertiary20);
--sys-color-on-tertiary-container: var(--ref-palette-tertiary90);

--sys-color-background: var(--ref-palette-neutral10);
--sys-color-on-background: var(--ref-palette-neutral90);
--sys-color-background: var(--ref-palette-neutral10); /* 6! */
--sys-color-surface: var(--ref-palette-neutral10); /* 6! */
--sys-color-surface-bright: var(--ref-palette-neutral24);
--sys-color-surface-dim: var(--ref-palette-neutral10); /* 6! */
--sys-color-surface-container-lowest: var(--ref-palette-neutral0); /* 4! */
--sys-color-surface-container-low: var(--ref-palette-neutral10);
--sys-color-surface-container: var(--ref-palette-neutral10); /* 12! */
--sys-color-surface-container-high: var(--ref-palette-neutral20); /* 17! */
--sys-color-surface-container-highest: var(--ref-palette-neutral20); /* 22! */
--sys-color-surface-variant: var(--ref-palette-neutral-variant30);
--sys-color-inverse-surface: var(--ref-palette-neutral90);

--sys-color-surface: var(--ref-palette-neutral10);
--sys-color-on-background: var(--ref-palette-neutral90);
--sys-color-on-surface: var(--ref-palette-neutral90);

--sys-color-surface-variant: var(--ref-palette-neutral-variant30);
--sys-color-on-surface-variant: var(--ref-palette-neutral-variant80);
--sys-color-inverse-on-surface: var(--ref-palette-neutral20);

--sys-color-outline: var(--ref-palette-neutral-variant60);
--sys-color-outline-variant: var(--ref-palette-neutral-variant30);
Expand All @@ -75,9 +89,9 @@
--sys-color-on-error: var(--ref-palette-error20);
--sys-color-on-error-container: var(--ref-palette-error90);

--sys-color-inverse-primary: var(--ref-palette-primary40);
--sys-color-inverse-surface: var(--ref-palette-neutral90);
--sys-color-inverse-on-surface: var(--ref-palette-neutral20);
--sys-color-surface-tint: var(--sys-color-primary-hsl);
--sys-color-shadow: var(--ref-palette-neutral0);
--sys-color-scrim: var(--ref-palette-neutral0);
}
}
}
124 changes: 70 additions & 54 deletions ui/style/lib/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,33 +127,37 @@ export const colorTheme: Config['theme'] = {
primaryLight: refColors.refPrimary[40],
primaryDark: refColors.refPrimary[80],

onPrimary: 'rgba(var(--sys-color-on-primary), <alpha-value>)',
onPrimaryLight: refColors.refPrimary[100],
onPrimaryDark: refColors.refPrimary[20],

primaryContainer: 'rgba(var(--sys-color-primary-container), <alpha-value>)',
primaryContainerLight: refColors.refPrimary[90],
primaryContainerDark: refColors.refPrimary[30],

onPrimary: 'rgba(var(--sys-color-on-primary), <alpha-value>)',
onPrimaryLight: refColors.refPrimary[100],
onPrimaryDark: refColors.refPrimary[20],

onPrimaryContainer: 'rgba(var(--sys-color-on-primary-container), <alpha-value>)',
onPrimaryContainerLight: refColors.refPrimary[10],
onPrimaryContainerDark: refColors.refPrimary[90],

inversePrimary: 'rgba(var(--sys-color-inverse-primary), <alpha-value>)',
inversePrimaryLight: refColors.refPrimary[80],
inversePrimaryDark: refColors.refPrimary[40],

/**
* Secondary colors
*/
secondary: 'rgba(var(--sys-color-secondary), <alpha-value>)',
secondaryLight: refColors.refSecondary[40],
secondaryDark: refColors.refSecondary[80],

onSecondary: 'rgba(var(--sys-color-on-secondary), <alpha-value>)',
onSecondaryLight: refColors.refSecondary[100],
onSecondaryDark: refColors.refSecondary[20],

secondaryContainer: 'rgba(var(--sys-color-secondary-container), <alpha-value>)',
secondaryContainerLight: refColors.refSecondary[90],
secondaryContainerDark: refColors.refSecondary[30],

onSecondary: 'rgba(var(--sys-color-on-secondary), <alpha-value>)',
onSecondaryLight: refColors.refSecondary[100],
onSecondaryDark: refColors.refSecondary[20],

onSecondaryContainer: 'rgba(var(--sys-color-on-secondary-container), <alpha-value>)',
onSecondaryContainerLight: refColors.refSecondary[10],
onSecondaryContainerDark: refColors.refSecondary[90],
Expand All @@ -165,64 +169,91 @@ export const colorTheme: Config['theme'] = {
tertiaryLight: refColors.refTertiary[40],
tertiaryDark: refColors.refTertiary[80],

onTertiary: 'rgba(var(--sys-color-on-tertiary), <alpha-value>)',
onTertiaryLight: refColors.refTertiary[100],
onTertiaryDark: refColors.refTertiary[20],

tertiaryContainer: 'rgba(var(--sys-color-tertiary-container), <alpha-value>)',
tertiaryContainerLight: refColors.refTertiary[90],
tertiaryContainerDark: refColors.refTertiary[30],

onTertiary: 'rgba(var(--sys-color-on-tertiary), <alpha-value>)',
onTertiaryLight: refColors.refTertiary[100],
onTertiaryDark: refColors.refTertiary[20],

onTertiaryContainer: 'rgba(var(--sys-color-on-tertiary-container), <alpha-value>)',
onTertiaryContainerLight: refColors.refTertiary[10],
onTertiaryContainerDark: refColors.refTertiary[90],

/**
* Background colors
* Surface colors
*/
background: 'rgba(var(--sys-color-background), <alpha-value>)',
backgroundLight: refColors.refNeutral[99],
backgroundLight: refColors.refNeutral[98],
backgroundDark: refColors.refNeutral[10],

onBackground: 'rgba(var(--sys-color-on-background), <alpha-value>)',
onBackgroundLight: refColors.refNeutral[10],
onBackgroundDark: refColors.refNeutral[90],

/**
* Surface colors
*/
surface: 'rgba(var(--sys-color-surface), <alpha-value>)',
surfaceLight: refColors.refNeutral[99],
surfaceLight: refColors.refNeutral[98],
surfaceDark: refColors.refNeutral[10],

onSurface: 'rgba(var(--sys-color-on-surface), <alpha-value>)',
onSurfaceLight: refColors.refNeutral[10],
onSurfaceDark: refColors.refNeutral[90],
surfaceDim: 'rgba(var(--sys-color-surface-dim), <alpha-value>)',
surfaceDimLight: refColors.refNeutral[90],
surfaceDimDark: refColors.refNeutral[10],

surfaceBright: 'rgba(var(--sys-color-surface-bright), <alpha-value>)',
surfaceBrightLight: refColors.refNeutral[98],
surfaceBrightDark: refColors.refNeutral[20],

surfaceContainerLowest: 'rgba(var(--sys-color-surface-container-lowest), <alpha-value>)',
surfaceContainerLowestLight: refColors.refNeutral[100],
surfaceContainerLowestDark: refColors.refNeutral[0],

surfaceContainerLow: 'rgba(var(--sys-color-surface-container-low), <alpha-value>)',
surfaceContainerLowLight: refColors.refNeutral[98],
surfaceContainerLowDark: refColors.refNeutral[10],

surfaceContainer: 'rgba(var(--sys-color-surface-container), <alpha-value>)',
surfaceContainerLight: refColors.refNeutral[95],
surfaceContainerDark: refColors.refNeutral[10],

surfaceContainerHigh: 'rgba(var(--sys-color-surface-container-high), <alpha-value>)',
surfaceContainerHighLight: refColors.refNeutral[90],
surfaceContainerHighDark: refColors.refNeutral[20],

surfaceContainerHighest: 'rgba(var(--sys-color-surface-container-highest), <alpha-value>)',
surfaceContainerHighestLight: refColors.refNeutral[90],
surfaceContainerHighestDark: refColors.refNeutral[20],

/**
* Surface variant colors
*/
surfaceVariant: 'rgba(var(--sys-color-surface-variant), <alpha-value>)',
surfaceVariantLight: refColors.refNeutral[90],
surfaceVariantDark: refColors.refNeutral[30],

inverseSurface: 'rgba(var(--sys-color-inverse-surface), <alpha-value>)',
inverseSurfaceLight: refColors.refNeutral[20],
inverseSurfaceDark: refColors.refNeutral[90],

onBackground: 'rgba(var(--sys-color-on-background), <alpha-value>)',
onBackgroundLight: refColors.refNeutral[10],
onBackgroundDark: refColors.refNeutral[90],

onSurface: 'rgba(var(--sys-color-on-surface), <alpha-value>)',
onSurfaceLight: refColors.refNeutral[10],
onSurfaceDark: refColors.refNeutral[90],

onSurfaceVariant: 'rgba(var(--sys-color-on-surface-variant), <alpha-value>)',
onSurfaceVariantLight: refColors.refNeutral[30],
onSurfaceVariantDark: refColors.refNeutral[80],

inverseOnSurface: 'rgba(var(--sys-color-inverse-on-surface), <alpha-value>)',
inverseOnSurfaceLight: refColors.refNeutral[95],
inverseOnSurfaceDark: refColors.refNeutral[20],

/**
* Outline colors
*/
outline: 'rgba(var(--sys-color-outline), <alpha-value>)',
outlineLight: refColors.refNeutral[50],
outlineDark: refColors.refNeutral[60],
outlineLight: refColors.refNeutralVariant[50],
outlineDark: refColors.refNeutralVariant[60],

/**
* Outline variant colors
*/
outlineVariant: 'rgba(var(--sys-color-outline-variant), <alpha-value>)',
outlineVariantLight: refColors.refNeutral[80],
outlineVariantDark: refColors.refNeutral[30],
outlineVariantLight: refColors.refNeutralVariant[80],
outlineVariantDark: refColors.refNeutralVariant[30],

/**
* Error colors
Expand All @@ -231,33 +262,18 @@ export const colorTheme: Config['theme'] = {
errorLight: refColors.refError[40],
errorDark: refColors.refError[80],

onError: 'rgba(var(--sys-color-on-error), <alpha-value>)',
onErrorLight: refColors.refError[100],
onErrorDark: refColors.refError[20],

errorContainer: 'rgba(var(--sys-color-error-container), <alpha-value>)',
errorContainerLight: refColors.refError[90],
errorContainerDark: refColors.refError[30],

onError: 'rgba(var(--sys-color-on-error), <alpha-value>)',
onErrorLight: refColors.refError[100],
onErrorDark: refColors.refError[20],

onErrorContainer: 'rgba(var(--sys-color-on-error-container), <alpha-value>)',
onErrorContainerLight: refColors.refError[10],
onErrorContainerDark: refColors.refError[90],

/**
* Inverse colors
*/
inversePrimary: 'rgba(var(--sys-color-inverse-primary), <alpha-value>)',
inversePrimaryLight: refColors.refPrimary[80],
inversePrimaryDark: refColors.refPrimary[40],

inverseSurface: 'rgba(var(--sys-color-inverse-surface), <alpha-value>)',
inverseSurfaceLight: refColors.refNeutral[20],
inverseSurfaceDark: refColors.refNeutral[90],

inverseOnSurface: 'rgba(var(--sys-color-inverse-on-surface), <alpha-value>)',
inverseOnSurfaceLight: refColors.refNeutral[95],
inverseOnSurfaceDark: refColors.refNeutral[25],

/**
* Other colors
*/
Expand Down

0 comments on commit 7d8d755

Please sign in to comment.