feat(theme-utils): add surface container colors

adevinta · Mar 20, 2023 · 802f924 · 802f924
1 parent 1a59450
commit 802f924
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/utils/theme/src/defaultTheme.ts b/packages/utils/theme/src/defaultTheme.ts
@@ -123,6 +123,12 @@ export const defaultTheme: Theme = {
     surfaceHovered: '#F7FAFD',
     surfaceDisabled: '#F8F8F9',
     surfaceFocused: '#FFFFFF',
+    // Surface container
+    surfaceContainer: '#EBEBED',
+    onSurfaceContainer: '#4A4950',
+    surfaceContainerHovered: '#F7FAFD',
+    surfaceContainerDisabled: '#F8F8F9',
+    surfaceContainerFocused: '#FFFFFF',
     // Surface Inverse
     surfaceInverse: '#252428',
     onSurfaceInverse: '#FFFFFF',

diff --git a/packages/utils/theme/src/defaultThemeDark.ts b/packages/utils/theme/src/defaultThemeDark.ts
@@ -111,6 +111,12 @@ export const defaultThemeDark: Theme = createTheme({
     surfaceHovered: '#FFFFFF', // use with 8% opacity
     surfaceDisabled: '#F8F8F9',
     surfaceFocused: '#FFFFFF', // use with 8% opacity
+    // Surface container
+    surfaceContainer: '#000000',
+    onSurfaceContainer: '#FFFFFF',
+    surfaceContainerHovered: '#FFFFFF',
+    surfaceContainerDisabled: '#F8F8F9',
+    surfaceContainerFocused: '#FFFFFF',
     // Surface Inverse
     surfaceInverse: '#F8F8F9',
     onSurfaceInverse: '#000000',

diff --git a/packages/utils/theme/src/types.ts b/packages/utils/theme/src/types.ts
@@ -125,6 +125,11 @@ export interface Theme {
     surfaceHovered: string
     surfaceDisabled: string
     surfaceFocused: string
+    surfaceContainer: string
+    onSurfaceContainer: string
+    surfaceContainerHovered: string
+    surfaceContainerDisabled: string
+    surfaceContainerFocused: string
     // Surface Inverse
     surfaceInverse: string
     onSurfaceInverse: string