mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-03 20:48:07 +00:00
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
This commit is contained in:
Shivam Mishra
@@ -46,8 +46,158 @@
|
|||||||
@apply hidden;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// scss-lint:disable PropertySortOrder
|
||||||
@layer base {
|
@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 {
|
:root {
|
||||||
--color-amber-25: 254 253 251;
|
--color-amber-25: 254 253 251;
|
||||||
--color-amber-50: 255 249 237;
|
--color-amber-50: 255 249 237;
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ const {
|
|||||||
violet,
|
violet,
|
||||||
violetDark,
|
violetDark,
|
||||||
} = require('@radix-ui/colors');
|
} = require('@radix-ui/colors');
|
||||||
|
|
||||||
export const colors = {
|
export const colors = {
|
||||||
woot: {
|
woot: {
|
||||||
25: blue.blue2,
|
25: blue.blue2,
|
||||||
@@ -282,4 +283,89 @@ export const colors = {
|
|||||||
800: 'rgb(var(--color-orange-800) / <alpha-value>)',
|
800: 'rgb(var(--color-orange-800) / <alpha-value>)',
|
||||||
900: 'rgb(var(--color-orange-900) / <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>)',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user