feat: add background highlight theme color

einride · May 30, 2023 · 1d13661 · 1d13661
1 parent d6989c8
commit 1d13661
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/honest-cheetahs-sit.md b/.changeset/honest-cheetahs-sit.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": minor
+---
+
+Add background highligh theme color.
diff --git a/packages/einride-ui/src/lib/theme/dark.ts b/packages/einride-ui/src/lib/theme/dark.ts
@@ -26,6 +26,7 @@ export const dark: ColorTheme = {
     accent1: color.blue[40],
     accent2: color.violet[40],
     accent3: color.yellow[40],
+    highlight: color.green[20],
     focus: `${color.black}B8`, // B8 is HEX for ~72% opacity
   },
   content: {

diff --git a/packages/einride-ui/src/lib/theme/light.ts b/packages/einride-ui/src/lib/theme/light.ts
@@ -26,6 +26,7 @@ export const light: ColorTheme = {
     accent1: color.blue[60],
     accent2: color.violet[60],
     accent3: color.yellow[60],
+    highlight: color.green[20],
     focus: `${color.black}66`, // 66 is HEX for ~40% opacity
   },
   content: {

diff --git a/packages/einride-ui/src/lib/theme/types.ts b/packages/einride-ui/src/lib/theme/types.ts
@@ -16,6 +16,7 @@ export const backgroundColors = [
   "accent1",
   "accent2",
   "accent3",
+  "highlight",
   "focus",
 ] as const
 export type BackgroundColor = (typeof backgroundColors)[number]