feat: Add support for new colors (#10287)

This PR adds new colors based on the new design targeted for v4. Some usage guidelines - All new colors are prefixed with `n` so to use solid, we use `bg-n-solid-1` - To use slate use `text-n-slate-12` it automatically toggles between radix `slate` and `slateDark` - The `weak` and `strong` colors are specifically used for borders
trungmq26 · Oct 15, 2024 · 3a0fd9b · 3a0fd9b
1 parent dec637a
commit 3a0fd9b
Show file tree

Hide file tree

Showing 2 changed files with 237 additions and 1 deletion.
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -46,8 +46,158 @@
   @apply hidden;
 }
 
+// scss-lint:disable PropertySortOrder
 @layer base {
-  // scss-lint:disable PropertySortOrder
+  /* NEXT COLORS START */
+  :root {
+    /* slate */
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --background-color: 248 248 248;
+    --solid-1: 255 255 255;
+    --solid-2: 252 252 252;
+    --solid-3: 255 255 255;
+    --solid-active: 250 251 251;
+    --white-alpha: 255 255 255 0.1;
+    --border-weak: 231 231 231;
+    --border-strong: 235 235 235;
+    --amber-solid: 252 232 193;
+    --blue-solid: 218 236 255;
+    --blue: 39 129 246;
+
+    /* alpha is added by default */
+    --alpha-1: 36, 38, 48, 0.06;
+    --alpha-2: 130, 134, 150, 0.12;
+    --alpha-3: 255, 255, 255, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+  }
+
+  body.dark {
+    /* slate */
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --background-color: 18 18 19;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 36 38 48;
+    --solid-active: 51 53 64;
+    --border-weak: 34 34 37;
+    --border-strong: 46 47 49;
+    --amber-solid: 42 37 30;
+    --blue-solid: 16 49 91;
+    --blue: 126 182 255;
+
+    /* alpha is added by default */
+    --alpha-1: 35, 37, 45, 0.8;
+    --alpha-2: 130, 134, 150, 0.15;
+    --alpha-3: 32, 33, 37, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+  /* NEXT COLORS END */
+
   :root {
     --color-amber-25: 254 253 251;
     --color-amber-50: 255 249 237;

diff --git a/theme/colors.js b/theme/colors.js
@@ -12,6 +12,7 @@ const {
   violet,
   violetDark,
 } = require('@radix-ui/colors');
+
 export const colors = {
   woot: {
     25: blue.blue2,
@@ -282,4 +283,89 @@ export const colors = {
     800: 'rgb(var(--color-orange-800) / <alpha-value>)',
     900: 'rgb(var(--color-orange-900) / <alpha-value>)',
   },
+  // next design system color
+  n: {
+    slate: {
+      1: 'rgb(var(--slate-1) / <alpha-value>)',
+      2: 'rgb(var(--slate-2) / <alpha-value>)',
+      3: 'rgb(var(--slate-3) / <alpha-value>)',
+      4: 'rgb(var(--slate-4) / <alpha-value>)',
+      5: 'rgb(var(--slate-5) / <alpha-value>)',
+      6: 'rgb(var(--slate-6) / <alpha-value>)',
+      7: 'rgb(var(--slate-7) / <alpha-value>)',
+      8: 'rgb(var(--slate-8) / <alpha-value>)',
+      9: 'rgb(var(--slate-9) / <alpha-value>)',
+      10: 'rgb(var(--slate-10) / <alpha-value>)',
+      11: 'rgb(var(--slate-11) / <alpha-value>)',
+      12: 'rgb(var(--slate-12) / <alpha-value>)',
+    },
+
+    ruby: {
+      1: 'rgb(var(--ruby-1) / <alpha-value>)',
+      2: 'rgb(var(--ruby-2) / <alpha-value>)',
+      3: 'rgb(var(--ruby-3) / <alpha-value>)',
+      4: 'rgb(var(--ruby-4) / <alpha-value>)',
+      5: 'rgb(var(--ruby-5) / <alpha-value>)',
+      6: 'rgb(var(--ruby-6) / <alpha-value>)',
+      7: 'rgb(var(--ruby-7) / <alpha-value>)',
+      8: 'rgb(var(--ruby-8) / <alpha-value>)',
+      9: 'rgb(var(--ruby-9) / <alpha-value>)',
+      10: 'rgb(var(--ruby-10) / <alpha-value>)',
+      11: 'rgb(var(--ruby-11) / <alpha-value>)',
+      12: 'rgb(var(--ruby-12) / <alpha-value>)',
+    },
+
+    amber: {
+      1: 'rgb(var(--amber-1) / <alpha-value>)',
+      2: 'rgb(var(--amber-2) / <alpha-value>)',
+      3: 'rgb(var(--amber-3) / <alpha-value>)',
+      4: 'rgb(var(--amber-4) / <alpha-value>)',
+      5: 'rgb(var(--amber-5) / <alpha-value>)',
+      6: 'rgb(var(--amber-6) / <alpha-value>)',
+      7: 'rgb(var(--amber-7) / <alpha-value>)',
+      8: 'rgb(var(--amber-8) / <alpha-value>)',
+      9: 'rgb(var(--amber-9) / <alpha-value>)',
+      10: 'rgb(var(--amber-10) / <alpha-value>)',
+      11: 'rgb(var(--amber-11) / <alpha-value>)',
+      12: 'rgb(var(--amber-12) / <alpha-value>)',
+    },
+
+    teal: {
+      1: 'rgb(var(--teal-1) / <alpha-value>)',
+      2: 'rgb(var(--teal-2) / <alpha-value>)',
+      3: 'rgb(var(--teal-3) / <alpha-value>)',
+      4: 'rgb(var(--teal-4) / <alpha-value>)',
+      5: 'rgb(var(--teal-5) / <alpha-value>)',
+      6: 'rgb(var(--teal-6) / <alpha-value>)',
+      7: 'rgb(var(--teal-7) / <alpha-value>)',
+      8: 'rgb(var(--teal-8) / <alpha-value>)',
+      9: 'rgb(var(--teal-9) / <alpha-value>)',
+      10: 'rgb(var(--teal-10) / <alpha-value>)',
+      11: 'rgb(var(--teal-11) / <alpha-value>)',
+      12: 'rgb(var(--teal-12) / <alpha-value>)',
+    },
+
+    black: '#000000',
+    brand: '#2781F6',
+    blue: 'rgb(var(--blue) / <alpha-value>)',
+    background: 'rgb(var(--background-color) / <alpha-value>)',
+    solid: {
+      1: 'rgb(var(--solid-1) / <alpha-value>)',
+      2: 'rgb(var(--solid-2) / <alpha-value>)',
+      3: 'rgb(var(--solid-3) / <alpha-value>)',
+      active: 'rgb(var(--solid-active) / <alpha-value>)',
+      amber: 'rgb(var(--solid-amber) / <alpha-value>)',
+      blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+    },
+    alpha: {
+      1: 'rgba(var(--alpha-1))',
+      2: 'rgba(var(--alpha-2))',
+      3: 'rgba(var(--alpha-3))',
+      black1: 'rgba(var(--alpha-black1))',
+      black2: 'rgba(var(--alpha-black2))',
+      white: 'rgba(var(--alpha-white))',
+    },
+    weak: 'rgb(var(--border-weak) / <alpha-value>)',
+    strong: 'rgb(var(--border-strong) / <alpha-value>)',
+  },
 };