Update happy and inverted colors

Based on the advice by @LukasKalbertodt
opencast · May 29, 2024 · d316d89 · d316d89
1 parent 0f22128
commit d316d89
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 41 deletions.
diff --git a/src/button.tsx b/src/button.tsx
@@ -24,7 +24,7 @@ export const ProtoButton = React.forwardRef<HTMLButtonElement, JSX.IntrinsicElem
 );
 
 /** The kind of buttons a "Button" can be. Used for styling */
-export type Kind = "normal" | "danger" | "happy";
+export type Kind = "normal" | "danger" | "call-to-action";
 
 type ButtonProps = JSX.IntrinsicElements["button"] & {
     kind?: Kind;
@@ -61,18 +61,18 @@ const css = (kind: Kind, extraCss: Interpolation<Theme> = {}): Interpolation<The
       "&:hover, &:focus-visible": {
         border: `1px solid ${config.colors.danger5}`,
         backgroundColor: config.colors.danger4,
-        color: config.colors.danger0,  // danger0BwInverted
+        color: config.colors.danger0BwInverted,  // danger0BwInverted
       },
     }),
 
-    "happy": () => ({
-      border: `1px solid ${config.colors.happy4}`,
-      color: config.colors.happy1, // happy0BwInverted
-      backgroundColor: config.colors.happy3,
+    "call-to-action": () => ({
+      border: `1px solid ${config.colors.happy5}`,
+      color: config.colors.happy4BwInverted, // happy0BwInverted
+      backgroundColor: config.colors.happy4,
       "&:hover, &:focus-visible": {
-        border: `1px solid ${config.colors.happy5}`,
-        backgroundColor: config.colors.happy4,
-        color: config.colors.happy0,  // happy1BwInverted
+        border: `1px solid ${config.colors.happy6}`,
+        backgroundColor: config.colors.happy5,
+        color: config.colors.happy5BwInverted,  // happy1BwInverted
       },
     }),
   });

diff --git a/src/colors.css b/src/colors.css
@@ -14,23 +14,22 @@ html[data-color-scheme="light"], html:not([data-color-scheme]) {
   --color-neutral90: #181818;
 
   --color-danger0: #feedeb;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #ffd2cd;
+  --color-danger1-bw-inverted: #fff;
   --color-danger2: #feaba1;
   --color-danger4: #c22a2c;
   --color-danger5: #880e11;
 
-  --color-happy0: #fff;
-  --color-happy1: #d0e3e7;
-  --color-happy3: #01758f;
-  --color-happy4: #015669;
-  --color-happy5: #013846;
-
   --color-accent9: #044a81;
   --color-accent8: #215D99;
   --color-accent7: #3073B8;
   --color-accent6: #3E8AD8;
+  --color-accent6-bw-inverted: #000;
   --color-accent5: #4DA1F7;
+  --color-accent5-bw-inverted: #000;
   --color-accent4: #71B4F9;
+  --color-accent4-bw-inverted: #000;
 
   --color-focus: #215D99;
   color-scheme: light;
@@ -52,23 +51,22 @@ html[data-color-scheme="dark"] {
   --color-neutral90: #c4c4c4;
 
   --color-danger0: #361314;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #462522;
+  --color-danger1-bw-inverted: #fff;
   --color-danger2: #712f2a;
   --color-danger4: #e0584d;
   --color-danger5: #fb7c67;
 
-  --color-happy0: #013846;
-  --color-happy1: #015669;
-  --color-happy3: #759ca4;
-  --color-happy4: #9bbdc4;
-  --color-happy5: #d0e3e7;
-
   --color-accent9: #85ace3;
   --color-accent8: #7da4db;
   --color-accent7: #588ccd;
   --color-accent6: #1f72ba;
+  --color-accent6-bw-inverted: #fff;
   --color-accent5: #1c619e;
+  --color-accent5-bw-inverted: #fff;
   --color-accent4: #195483;
+  --color-accent4-bw-inverted: #fff;
 
   --color-focus: #B8D9FC;
   color-scheme: dark;
@@ -90,22 +88,21 @@ html[data-color-scheme="light-high-contrast"] {
   --color-neutral90: #000;
 
   --color-danger0: #fff;
+  --color-danger0-bw-inverted: #fff;
   --color-danger1: #fff;
+  --color-danger1-bw-inverted: #fff;
   --color-danger2: #a50613;
   --color-danger4: #a50613;
   --color-danger5: #a50613;
 
-  --color-happy0: #fff;
-  --color-happy1: #fff;
-  --color-happy3: #013846;
-  --color-happy4: #013846;
-  --color-happy5: #013846;
-
   --color-accent8: #000099;
   --color-accent7: #000099;
   --color-accent6: #000099;
+  --color-accent6-bw-inverted: #fff;
   --color-accent5: #000099;
+  --color-accent5-bw-inverted: #fff;
   --color-accent4: #000099;
+  --color-accent4-bw-inverted: #fff;
 
   --color-focus: #000099;
   color-scheme: light;
@@ -127,22 +124,21 @@ html[data-color-scheme="dark-high-contrast"] {
   --color-neutral90: #fff;
 
   --color-danger0: #000;
+  --color-danger0-bw-iInverted: #fff;
   --color-danger1: #000;
+  --color-danger1-bw-inverted: #fff;
   --color-danger2: #eb1722;
   --color-danger4: #eb1722;
   --color-danger5: #eb1722;
 
-  --color-happy0: #000;
-  --color-happy1: #000;
-  --color-happy3: #d0e3e7;
-  --color-happy4: #d0e3e7;
-  --color-happy5: #d0e3e7;
-
   --color-accent8: #a6ffea;
   --color-accent7: #a6ffea;
   --color-accent6: #a6ffea;
+  --color-accent6-bw-inverted: #000;
   --color-accent5: #a6ffea;
+  --color-accent5-bw-inverted: #000;
   --color-accent4: #a6ffea;
+  --color-accent4-bw-inverted: #000;
 
   --color-focus: #a6ffea;
   color-scheme: dark;

diff --git a/src/config.tsx b/src/config.tsx
@@ -28,22 +28,30 @@ export type ColorConfig = {
   neutral90: string,
 
   danger0: string,
+  danger0BwInverted: string,
   danger1: string,
+  danger1BwInverted: string,
   danger2: string,
   danger4: string,
   danger5: string,
 
-  happy0: string;
-  happy1: string;
-  happy3: string;
   happy4: string;
+  happy4BwInverted: string;
   happy5: string;
+  happy5BwInverted: string;
+  happy6: string;
+  happy6BwInverted: string;
+  happy7: string;
+  happy8: string;
 
   accent8: string;
   accent7: string;
   accent6: string;
+  accent6BwInverted: string;
   accent5: string;
+  accent5BwInverted: string;
   accent4: string;
+  accent4BwInverted: string;
 
   focus: string;
 };
@@ -65,22 +73,30 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     neutral90: "var(--color-neutral90)",
 
     danger0: "var(--color-danger0)",
+    danger0BwInverted: "var(--color-danger0-bw-inverted)",
     danger1: "var(--color-danger1)",
+    danger1BwInverted: "var(--color-danger1-bw-inverted)",
     danger2: "var(--color-danger2)",
     danger4: "var(--color-danger4)",
     danger5: "var(--color-danger5)",
 
-    happy0: "var(--color-happy0)",
-    happy1: "var(--color-happy1)",
-    happy3: "var(--color-happy3)",
-    happy4: "var(--color-happy4)",
-    happy5: "var(--color-happy5)",
+    happy4: "var(--color-accent4)",
+    happy4BwInverted: "var(--color-accent4-bw-inverted)",
+    happy5: "var(--color-accent5)",
+    happy5BwInverted: "var(--color-accent5-bw-inverted)",
+    happy6: "var(--color-accent6)",
+    happy6BwInverted: "var(--color-accent6-bw-inverted)",
+    happy7: "var(--color-accent7)",
+    happy8: "var(--color-accent8)",
 
     accent8: "var(--color-accent8)",
     accent7: "var(--color-accent7)",
     accent6: "var(--color-accent6)",
+    accent6BwInverted: "var(--color-accent6-bw-inverted)",
     accent5: "var(--color-accent5)",
+    accent5BwInverted: "var(--color-accent5-bw-inverted)",
     accent4: "var(--color-accent4)",
+    accent4BwInverted: "var(--color-accent4-bw-inverted)",
 
     focus: "var(--color-accent8)",
   },