From ac33bc5c2d980d1244dbbf7df2d0ce85a7f4b11d Mon Sep 17 00:00:00 2001
From: ioj4 <69911332+ioj4@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:42:30 +0100
Subject: [PATCH] [ui] use original var names for button color

---
 packages/shelter-ui/compat.css          | 6 ++++--
 packages/shelter-ui/src/button.tsx      | 8 ++++----
 packages/shelter-ui/src/slider.tsx.scss | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/shelter-ui/compat.css b/packages/shelter-ui/compat.css
index 36ff5fd..2e8608d 100644
--- 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
index dd162d8..b02d797 100644
--- 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
index 158e2ef..cced9fb 100644
--- 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),