LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add support for new colors (#10287)

Browse Source 
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
2024-10-15 09:43:51 +05:30
committed by GitHub
parent dec637ab8a
commit 3a0fd9b777
2 changed files with 237 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
theme/colors.js
View File

@@ -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>)',
},
};