Add accent9 color

opencast · May 29, 2024 · 7430e75 · 7430e75
1 parent 2cadf8d
commit 7430e75
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/button.tsx b/src/button.tsx
@@ -71,13 +71,13 @@ const css = (
     }),
 
     "call-to-action": () => ({
-      border: `1px solid ${config.colors.happy7}`,
-      color: config.colors.happy6BwInverted,
-      backgroundColor: config.colors.happy6,
+      border: `1px solid ${config.colors.happy8}`,
+      color: config.colors.happy7BwInverted,
+      backgroundColor: config.colors.happy7,
       "&:hover, &:focus-visible": {
-        border: `1px solid ${config.colors.happy8}`,
-        backgroundColor: config.colors.happy7,
-        color: config.colors.happy7BwInverted,
+        border: `1px solid ${config.colors.happy9}`,
+        backgroundColor: config.colors.happy8,
+        color: config.colors.happy8BwInverted,
       },
     }),
   });

diff --git a/src/colors.css b/src/colors.css
@@ -110,6 +110,8 @@ html[data-color-scheme="light-high-contrast"] {
   --color-danger5: #a50613;
   --color-danger5-bw-inverted: #fff;
 
+  --color-accent9: #000099;
+  --color-accent9-bw-inverted: #fff;
   --color-accent8: #000099;
   --color-accent8-bw-inverted: #fff;
   --color-accent7: #000099;
@@ -151,6 +153,8 @@ html[data-color-scheme="dark-high-contrast"] {
   --color-danger5: #eb1722;
   --color-danger5-bw-inverted: #fff;
 
+  --color-accent9: #a6ffea;
+  --color-accent9-bw-inverted: #000;
   --color-accent8: #a6ffea;
   --color-accent8-bw-inverted: #000;
   --color-accent7: #a6ffea;

diff --git a/src/config.tsx b/src/config.tsx
@@ -48,7 +48,11 @@ export type ColorConfig = {
   happy7BwInverted: string;
   happy8: string;
   happy8BwInverted: string;
+  happy9: string;
+  happy9BwInverted: string;
 
+  accent9: string;
+  accent9BwInverted: string;
   accent8: string;
   accent8BwInverted: string;
   accent7: string;
@@ -100,7 +104,11 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     happy7BwInverted: "var(--color-accent7-bw-inverted)",
     happy8: "var(--color-accent8)",
     happy8BwInverted: "var(--color-accent8-bw-inverted)",
+    happy9: "var(--color-accent9)",
+    happy9BwInverted: "var(--color-accent9-bw-inverted)",
 
+    accent9: "var(--color-accent9)",
+    accent9BwInverted: "var(--color-accent9-bw-inverted)",
     accent8: "var(--color-accent8)",
     accent8BwInverted: "var(--color-accent8-bw-inverted)",
     accent7: "var(--color-accent7)",