[ui] use original var names for button color

uwu · Jan 17, 2025 · ac33bc5 · ac33bc5
1 parent 4b676ec
commit ac33bc5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/packages/shelter-ui/compat.css b/packages/shelter-ui/compat.css
@@ -7,7 +7,7 @@
   --brand-500: #5865f2;
   --brand-560: #4752c4;
   --brand-experiment: var(--brand-500);
-  --interactive-active: var(--white);
+  --interactive-active: var(--white-500);
   --interactive-normal: #b5bac1;
   --interactive-hover: #dbdee1;
   --font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -31,9 +31,11 @@
   --button-positive-background-hover: #1a6334;
   --button-secondary-background: var(--primary-500);
   --button-secondary-background-hover: #6d6f78;
+  --button-secondary-text: var(--white-500);
+  --button-filled-brand-text: var(--white-500);
   --primary-500: #4e5058;
   --primary-200: #e3e5e8;
-  --white: #ffffff;
+  --white-500: #ffffff;
   --black-500-hsl: 0 0% 0%;
   /* nice-to-haves */
   --font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

diff --git a/packages/shelter-ui/src/button.tsx b/packages/shelter-ui/src/button.tsx
@@ -25,12 +25,12 @@ type ButtonColor = [string, string, string];
 // and the only thing better than a brand coloured buttons is a brand_new coloured button!!! -- sink
 export const ButtonColors = {
   // COLOUR: [bg, fg, hover]
-  BRAND: ["var(--brand-500)", "var(--white)", "var(--brand-560)"],
-  RED: ["var(--button-danger-background)", "var(--white)", "var(--button-danger-background-hover)"],
-  GREEN: ["var(--button-positive-background)", "var(--white)", "var(--button-positive-background-hover)"],
+  BRAND: ["var(--brand-500)", "var(--button-filled-brand-text)", "var(--brand-560)"],
+  RED: ["var(--button-danger-background)", "var(--white-500)", "var(--button-danger-background-hover)"],
+  GREEN: ["var(--button-positive-background)", "var(--white-500)", "var(--button-positive-background-hover)"],
   SECONDARY: [
     "var(--button-secondary-background)",
-    "hsl(0,calc(var(--saturation-factor, 1)*0%),100%)",
+    "var(--button-secondary-text)",
     "var(--button-secondary-background-hover)",
   ],
   LINK: ["var(--text-link)", "hsl(0,calc(var(--saturation-factor, 1)*0%),100%)", ""],

diff --git a/packages/shelter-ui/src/slider.tsx.scss b/packages/shelter-ui/src/slider.tsx.scss
@@ -44,7 +44,7 @@
     height: 24px;
     border: 1px solid var(--primary-200);
     border-radius: 3px;
-    background-color: var(--white);
+    background-color: var(--white-500);
     box-shadow:
       0 3px 1px 0 hsl(var(--black-500-hsl) / 5%),
       0 2px 2px 0 hsl(var(--black-500-hsl) / .1),