diff --git a/ui/style/lib/colors.css b/ui/style/lib/colors.css index 2eaa24999..09eb1c1ca 100644 --- a/ui/style/lib/colors.css +++ b/ui/style/lib/colors.css @@ -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); @@ -32,10 +41,6 @@ --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); @@ -43,29 +48,38 @@ @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); @@ -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); } } } diff --git a/ui/style/lib/colors.ts b/ui/style/lib/colors.ts index 665e46043..ebd3d2b2e 100644 --- a/ui/style/lib/colors.ts +++ b/ui/style/lib/colors.ts @@ -127,18 +127,22 @@ export const colorTheme: Config['theme'] = { primaryLight: refColors.refPrimary[40], primaryDark: refColors.refPrimary[80], - onPrimary: 'rgba(var(--sys-color-on-primary), )', - onPrimaryLight: refColors.refPrimary[100], - onPrimaryDark: refColors.refPrimary[20], - primaryContainer: 'rgba(var(--sys-color-primary-container), )', primaryContainerLight: refColors.refPrimary[90], primaryContainerDark: refColors.refPrimary[30], + onPrimary: 'rgba(var(--sys-color-on-primary), )', + onPrimaryLight: refColors.refPrimary[100], + onPrimaryDark: refColors.refPrimary[20], + onPrimaryContainer: 'rgba(var(--sys-color-on-primary-container), )', onPrimaryContainerLight: refColors.refPrimary[10], onPrimaryContainerDark: refColors.refPrimary[90], + inversePrimary: 'rgba(var(--sys-color-inverse-primary), )', + inversePrimaryLight: refColors.refPrimary[80], + inversePrimaryDark: refColors.refPrimary[40], + /** * Secondary colors */ @@ -146,14 +150,14 @@ export const colorTheme: Config['theme'] = { secondaryLight: refColors.refSecondary[40], secondaryDark: refColors.refSecondary[80], - onSecondary: 'rgba(var(--sys-color-on-secondary), )', - onSecondaryLight: refColors.refSecondary[100], - onSecondaryDark: refColors.refSecondary[20], - secondaryContainer: 'rgba(var(--sys-color-secondary-container), )', secondaryContainerLight: refColors.refSecondary[90], secondaryContainerDark: refColors.refSecondary[30], + onSecondary: 'rgba(var(--sys-color-on-secondary), )', + onSecondaryLight: refColors.refSecondary[100], + onSecondaryDark: refColors.refSecondary[20], + onSecondaryContainer: 'rgba(var(--sys-color-on-secondary-container), )', onSecondaryContainerLight: refColors.refSecondary[10], onSecondaryContainerDark: refColors.refSecondary[90], @@ -165,64 +169,91 @@ export const colorTheme: Config['theme'] = { tertiaryLight: refColors.refTertiary[40], tertiaryDark: refColors.refTertiary[80], - onTertiary: 'rgba(var(--sys-color-on-tertiary), )', - onTertiaryLight: refColors.refTertiary[100], - onTertiaryDark: refColors.refTertiary[20], - tertiaryContainer: 'rgba(var(--sys-color-tertiary-container), )', tertiaryContainerLight: refColors.refTertiary[90], tertiaryContainerDark: refColors.refTertiary[30], + onTertiary: 'rgba(var(--sys-color-on-tertiary), )', + onTertiaryLight: refColors.refTertiary[100], + onTertiaryDark: refColors.refTertiary[20], + onTertiaryContainer: 'rgba(var(--sys-color-on-tertiary-container), )', onTertiaryContainerLight: refColors.refTertiary[10], onTertiaryContainerDark: refColors.refTertiary[90], /** - * Background colors + * Surface colors */ background: 'rgba(var(--sys-color-background), )', - backgroundLight: refColors.refNeutral[99], + backgroundLight: refColors.refNeutral[98], backgroundDark: refColors.refNeutral[10], - onBackground: 'rgba(var(--sys-color-on-background), )', - onBackgroundLight: refColors.refNeutral[10], - onBackgroundDark: refColors.refNeutral[90], - - /** - * Surface colors - */ surface: 'rgba(var(--sys-color-surface), )', - surfaceLight: refColors.refNeutral[99], + surfaceLight: refColors.refNeutral[98], surfaceDark: refColors.refNeutral[10], - onSurface: 'rgba(var(--sys-color-on-surface), )', - onSurfaceLight: refColors.refNeutral[10], - onSurfaceDark: refColors.refNeutral[90], + surfaceDim: 'rgba(var(--sys-color-surface-dim), )', + surfaceDimLight: refColors.refNeutral[90], + surfaceDimDark: refColors.refNeutral[10], + + surfaceBright: 'rgba(var(--sys-color-surface-bright), )', + surfaceBrightLight: refColors.refNeutral[98], + surfaceBrightDark: refColors.refNeutral[20], + + surfaceContainerLowest: 'rgba(var(--sys-color-surface-container-lowest), )', + surfaceContainerLowestLight: refColors.refNeutral[100], + surfaceContainerLowestDark: refColors.refNeutral[0], + + surfaceContainerLow: 'rgba(var(--sys-color-surface-container-low), )', + surfaceContainerLowLight: refColors.refNeutral[98], + surfaceContainerLowDark: refColors.refNeutral[10], + + surfaceContainer: 'rgba(var(--sys-color-surface-container), )', + surfaceContainerLight: refColors.refNeutral[95], + surfaceContainerDark: refColors.refNeutral[10], + + surfaceContainerHigh: 'rgba(var(--sys-color-surface-container-high), )', + surfaceContainerHighLight: refColors.refNeutral[90], + surfaceContainerHighDark: refColors.refNeutral[20], + + surfaceContainerHighest: 'rgba(var(--sys-color-surface-container-highest), )', + surfaceContainerHighestLight: refColors.refNeutral[90], + surfaceContainerHighestDark: refColors.refNeutral[20], - /** - * Surface variant colors - */ surfaceVariant: 'rgba(var(--sys-color-surface-variant), )', surfaceVariantLight: refColors.refNeutral[90], surfaceVariantDark: refColors.refNeutral[30], + inverseSurface: 'rgba(var(--sys-color-inverse-surface), )', + inverseSurfaceLight: refColors.refNeutral[20], + inverseSurfaceDark: refColors.refNeutral[90], + + onBackground: 'rgba(var(--sys-color-on-background), )', + onBackgroundLight: refColors.refNeutral[10], + onBackgroundDark: refColors.refNeutral[90], + + onSurface: 'rgba(var(--sys-color-on-surface), )', + onSurfaceLight: refColors.refNeutral[10], + onSurfaceDark: refColors.refNeutral[90], + onSurfaceVariant: 'rgba(var(--sys-color-on-surface-variant), )', onSurfaceVariantLight: refColors.refNeutral[30], onSurfaceVariantDark: refColors.refNeutral[80], + inverseOnSurface: 'rgba(var(--sys-color-inverse-on-surface), )', + inverseOnSurfaceLight: refColors.refNeutral[95], + inverseOnSurfaceDark: refColors.refNeutral[20], + /** * Outline colors */ outline: 'rgba(var(--sys-color-outline), )', - 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), )', - outlineVariantLight: refColors.refNeutral[80], - outlineVariantDark: refColors.refNeutral[30], + outlineVariantLight: refColors.refNeutralVariant[80], + outlineVariantDark: refColors.refNeutralVariant[30], /** * Error colors @@ -231,33 +262,18 @@ export const colorTheme: Config['theme'] = { errorLight: refColors.refError[40], errorDark: refColors.refError[80], - onError: 'rgba(var(--sys-color-on-error), )', - onErrorLight: refColors.refError[100], - onErrorDark: refColors.refError[20], - errorContainer: 'rgba(var(--sys-color-error-container), )', errorContainerLight: refColors.refError[90], errorContainerDark: refColors.refError[30], + onError: 'rgba(var(--sys-color-on-error), )', + onErrorLight: refColors.refError[100], + onErrorDark: refColors.refError[20], + onErrorContainer: 'rgba(var(--sys-color-on-error-container), )', onErrorContainerLight: refColors.refError[10], onErrorContainerDark: refColors.refError[90], - /** - * Inverse colors - */ - inversePrimary: 'rgba(var(--sys-color-inverse-primary), )', - inversePrimaryLight: refColors.refPrimary[80], - inversePrimaryDark: refColors.refPrimary[40], - - inverseSurface: 'rgba(var(--sys-color-inverse-surface), )', - inverseSurfaceLight: refColors.refNeutral[20], - inverseSurfaceDark: refColors.refNeutral[90], - - inverseOnSurface: 'rgba(var(--sys-color-inverse-on-surface), )', - inverseOnSurfaceLight: refColors.refNeutral[95], - inverseOnSurfaceDark: refColors.refNeutral[25], - /** * Other colors */