More color fixes

opencast · May 29, 2024 · 07f0385 · 07f0385
1 parent 9ccf240
commit 07f0385
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/src/button.tsx b/src/button.tsx
@@ -44,7 +44,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
 /**
  * Returns css for different types of buttons.
- * Comes in the kinds "normal", "danger" and "happy".
  */
 const css = (
   config: AppkitConfig,
@@ -67,18 +66,18 @@ const css = (
       "&:hover, &:focus-visible": {
         border: `1px solid ${config.colors.danger5}`,
         backgroundColor: config.colors.danger4,
-        color: config.colors.danger0BwInverted,  // danger0BwInverted
+        color: config.colors.danger4BwInverted,
       },
     }),
 
     "call-to-action": () => ({
-      border: `1px solid ${config.colors.happy5}`,
-      color: config.colors.happy4BwInverted, // happy0BwInverted
-      backgroundColor: config.colors.happy4,
+      border: `1px solid ${config.colors.happy7}`,
+      color: config.colors.happy6BwInverted,
+      backgroundColor: config.colors.happy6,
       "&:hover, &:focus-visible": {
-        border: `1px solid ${config.colors.happy6}`,
-        backgroundColor: config.colors.happy5,
-        color: config.colors.happy5BwInverted,  // happy1BwInverted
+        border: `1px solid ${config.colors.happy8}`,
+        backgroundColor: config.colors.happy7,
+        color: config.colors.happy7BwInverted,
       },
     }),
   });

diff --git a/src/colors.css b/src/colors.css
@@ -14,16 +14,22 @@ html[data-color-scheme="light"], html:not([data-color-scheme]) {
   --color-neutral90: #181818;
 
   --color-danger0: #feedeb;
-  --color-danger0-bw-inverted: #fff;
+  --color-danger0-bw-inverted: #000;
   --color-danger1: #ffd2cd;
-  --color-danger1-bw-inverted: #fff;
+  --color-danger1-bw-inverted: #000;
   --color-danger2: #feaba1;
+  --color-danger2-bw-inverted: #000;
   --color-danger4: #c22a2c;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #880e11;
+  --color-danger5-bw-inverted: #fff;
 
   --color-accent9: #044a81;
+  --color-accent9-bw-inverted: #fff;
   --color-accent8: #215D99;
+  --color-accent8-bw-inverted: #fff;
   --color-accent7: #3073B8;
+  --color-accent7-bw-inverted: #fff;
   --color-accent6: #3E8AD8;
   --color-accent6-bw-inverted: #000;
   --color-accent5: #4DA1F7;
@@ -55,12 +61,18 @@ html[data-color-scheme="dark"] {
   --color-danger1: #462522;
   --color-danger1-bw-inverted: #fff;
   --color-danger2: #712f2a;
+  --color-danger2-bw-inverted: #fff;
   --color-danger4: #e0584d;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #fb7c67;
+  --color-danger5-bw-inverted: #000;
 
   --color-accent9: #85ace3;
+  --color-accent9-bw-inverted: #000;
   --color-accent8: #7da4db;
+  --color-accent8-bw-inverted: #000;
   --color-accent7: #588ccd;
+  --color-accent7-bw-inverted: #000;
   --color-accent6: #1f72ba;
   --color-accent6-bw-inverted: #fff;
   --color-accent5: #1c619e;
@@ -88,15 +100,20 @@ html[data-color-scheme="light-high-contrast"] {
   --color-neutral90: #000;
 
   --color-danger0: #fff;
-  --color-danger0-bw-inverted: #fff;
+  --color-danger0-bw-inverted: #000;
   --color-danger1: #fff;
-  --color-danger1-bw-inverted: #fff;
+  --color-danger1-bw-inverted: #000;
   --color-danger2: #a50613;
+  --color-danger2-bw-inverted: #fff;
   --color-danger4: #a50613;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #a50613;
+  --color-danger5-bw-inverted: #fff;
 
   --color-accent8: #000099;
+  --color-accent8-bw-inverted: #fff;
   --color-accent7: #000099;
+  --color-accent7-bw-inverted: #fff;
   --color-accent6: #000099;
   --color-accent6-bw-inverted: #fff;
   --color-accent5: #000099;
@@ -124,15 +141,20 @@ html[data-color-scheme="dark-high-contrast"] {
   --color-neutral90: #fff;
 
   --color-danger0: #000;
-  --color-danger0-bw-iInverted: #fff;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #000;
   --color-danger1-bw-inverted: #fff;
   --color-danger2: #eb1722;
+  --color-danger2-bw-inverted: #fff;
   --color-danger4: #eb1722;
+  --color-danger4-bw-inverted: #fff;
   --color-danger5: #eb1722;
+  --color-danger5-bw-inverted: #fff;
 
   --color-accent8: #a6ffea;
+  --color-accent8-bw-inverted: #000;
   --color-accent7: #a6ffea;
+  --color-accent7-bw-inverted: #000;
   --color-accent6: #a6ffea;
   --color-accent6-bw-inverted: #000;
   --color-accent5: #a6ffea;

diff --git a/src/config.tsx b/src/config.tsx
@@ -32,8 +32,11 @@ export type ColorConfig = {
   danger1: string,
   danger1BwInverted: string,
   danger2: string,
+  danger2BwInverted: string,
   danger4: string,
+  danger4BwInverted: string,
   danger5: string,
+  danger5BwInverted: string,
 
   happy4: string;
   happy4BwInverted: string;
@@ -42,10 +45,14 @@ export type ColorConfig = {
   happy6: string;
   happy6BwInverted: string;
   happy7: string;
+  happy7BwInverted: string;
   happy8: string;
+  happy8BwInverted: string;
 
   accent8: string;
+  accent8BwInverted: string;
   accent7: string;
+  accent7BwInverted: string;
   accent6: string;
   accent6BwInverted: string;
   accent5: string;
@@ -77,8 +84,11 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     danger1: "var(--color-danger1)",
     danger1BwInverted: "var(--color-danger1-bw-inverted)",
     danger2: "var(--color-danger2)",
+    danger2BwInverted: "var(--color-danger1-bw-inverted)",
     danger4: "var(--color-danger4)",
+    danger4BwInverted: "var(--color-danger1-bw-inverted)",
     danger5: "var(--color-danger5)",
+    danger5BwInverted: "var(--color-danger1-bw-inverted)",
 
     happy4: "var(--color-accent4)",
     happy4BwInverted: "var(--color-accent4-bw-inverted)",
@@ -87,10 +97,14 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     happy6: "var(--color-accent6)",
     happy6BwInverted: "var(--color-accent6-bw-inverted)",
     happy7: "var(--color-accent7)",
+    happy7BwInverted: "var(--color-accent6-bw-inverted)",
     happy8: "var(--color-accent8)",
+    happy8BwInverted: "var(--color-accent6-bw-inverted)",
 
     accent8: "var(--color-accent8)",
+    accent8BwInverted: "var(--color-accent6-bw-inverted)",
     accent7: "var(--color-accent7)",
+    accent7BwInverted: "var(--color-accent6-bw-inverted)",
     accent6: "var(--color-accent6)",
     accent6BwInverted: "var(--color-accent6-bw-inverted)",
     accent5: "var(--color-accent5)",