Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] JSON theme #4443

Draft
wants to merge 35 commits into
base: main
Choose a base branch
from
+11,596 −265
Draft

[WIP] JSON theme #4443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
846b09d
Some basic stuff
origami-z Nov 7, 2024
0e97aab
Split palette to multiple files
origami-z Nov 11, 2024
78e262a
Multi modes? not working
origami-z Nov 11, 2024
eb055ce
kebab case tokens.json
origami-z Nov 19, 2024
1905a77
Update with $modes working version for palette.accent.stronger.$modes
origami-z Nov 20, 2024
a0ba16d
Add script to combine multiple tokens files into a single $modes file
origami-z Nov 20, 2024
c17bb4a
Add accent + mode. How to remove accent from uncessary css?
origami-z Nov 20, 2024
8c5b2a7
Add todo
origami-z Nov 20, 2024
c9ce60b
refactor kebab, remove -default suffix
origami-z Nov 21, 2024
0d2a94c
Refactor transform to standalone file
origami-z Nov 21, 2024
554417e
Update readme instructions
origami-z Nov 21, 2024
366d364
Reduce number of css when blue/teal mode doesn't matter for palette
origami-z Nov 21, 2024
d15268e
Fix characteristics palette token
origami-z Nov 21, 2024
0c73fdc
Exclude figma only token in platform filtes filter
origami-z Nov 25, 2024
0017785
Add readme
origami-z Nov 25, 2024
6e5bc15
Refactor files to standalone file
origami-z Nov 25, 2024
f8cb876
Fix build after refactor
origami-z Nov 25, 2024
1707cc1
Adds characteristics files
origami-z Nov 25, 2024
02a8814
Move palette tokens into src folder
origami-z Nov 26, 2024
5595212
Fix script
origami-z Nov 26, 2024
c91e552
Add curve-next tokens
origami-z Nov 26, 2024
e5e36ed
Biome fix
origami-z Nov 26, 2024
805cc0a
Build into existing css palette/-next.css
origami-z Nov 29, 2024
90e5bc2
Reorder color.tokens, add background prefix to some colors
origami-z Nov 29, 2024
7e675a9
add alph.background prefix to some colors
origami-z Nov 29, 2024
e463c6e
Add foundation color/alpha next to prod css
origami-z Nov 29, 2024
732e3ae
Add slash to tooling/ts package.json
origami-z Nov 29, 2024
bd3ae6c
Use out of box `css/variables` format
origami-z Nov 29, 2024
5e28cb1
Add formatting to cssMultiModes
origami-z Nov 29, 2024
a7d2221
Add remaining header formatting
origami-z Nov 29, 2024
fb7b242
Adds more palette next css
origami-z Nov 29, 2024
c631040
Rename script name
origami-z Nov 29, 2024
85b2453
Fix salt-ds/value/px
origami-z Nov 29, 2024
49bbf8e
Update file header comment
origami-z Nov 29, 2024
4cc2d7f
Add auto-gen color-next.css
origami-z Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@
"react-dom": "^18.3.1",
"rifm": "^0.12.0",
"storybook": "^8.4.4",
"style-dictionary": "^4.1.4",
"style-dictionary-utils": "^4.0.0",
"stylelint": "^16.0.0",
"typescript": "4.6.4",
"vite": "^5.0.0",
Expand Down
1 change: 1 addition & 0 deletions packages/theme/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.log
132 changes: 78 additions & 54 deletions packages/theme/css/foundations/alpha-next.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,81 @@
/*
TODO: discuss whether this should be an actual file, or should inline these values.
con: If we offer these values, then it could misleading that we're offering all these values
/**
* Generated by `scripts/gen-css-json.mjs`
* Do not edit directly, this file was auto-generated.
*/

.salt-theme.salt-theme-next {
--salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
--salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
--salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
--salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
--salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
--salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
--salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
--salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
--salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
--salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
--salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
--salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
--salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
--salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
--salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
--salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
--salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
--salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
--salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
--salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
--salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
--salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
--salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
--salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
--salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
--salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
--salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
--salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
--salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
--salt-color-green-400-40a: rgba(var(--salt-color-green-400-rgb), 0.4);
--salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
--salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
--salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
--salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
--salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
--salt-color-red-400-40a: rgba(var(--salt-color-red-400-rgb), 0.4);
--salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
--salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
--salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
--salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
--salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
--salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
--salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
--salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
--salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
--salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
--salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
--salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
--salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
--salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
--salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
--salt-color-white-0a: rgba(255, 255, 255, 0);
--salt-color-white-5a: rgba(255, 255, 255, 0.05);
--salt-color-white-10a: rgba(255, 255, 255, 0.1);
--salt-color-white-15a: rgba(255, 255, 255, 0.15);
--salt-color-white-20a: rgba(255, 255, 255, 0.2);
--salt-color-white-25a: rgba(255, 255, 255, 0.25);
--salt-color-white-30a: rgba(255, 255, 255, 0.3);
--salt-color-white-35a: rgba(255, 255, 255, 0.35);
--salt-color-white-40a: rgba(255, 255, 255, 0.4);
--salt-color-white-45a: rgba(255, 255, 255, 0.45);
--salt-color-white-50a: rgba(255, 255, 255, 0.5);
--salt-color-white-55a: rgba(255, 255, 255, 0.55);
--salt-color-white-60a: rgba(255, 255, 255, 0.6);
--salt-color-white-65a: rgba(255, 255, 255, 0.65);
--salt-color-white-70a: rgba(255, 255, 255, 0.7);
--salt-color-white-75a: rgba(255, 255, 255, 0.75);
--salt-color-white-80a: rgba(255, 255, 255, 0.8);
--salt-color-black-0a: rgba(0, 0, 0, 0);
--salt-color-black-5a: rgba(0, 0, 0, 0.05);
--salt-color-black-10a: rgba(0, 0, 0, 0.1);
--salt-color-black-15a: rgba(0, 0, 0, 0.15);
--salt-color-black-20a: rgba(0, 0, 0, 0.2);
--salt-color-black-25a: rgba(0, 0, 0, 0.25);
--salt-color-black-30a: rgba(0, 0, 0, 0.3);
--salt-color-black-35a: rgba(0, 0, 0, 0.35);
--salt-color-black-40a: rgba(0, 0, 0, 0.4);
--salt-color-black-45a: rgba(0, 0, 0, 0.45);
--salt-color-black-50a: rgba(0, 0, 0, 0.5);
--salt-color-black-55a: rgba(0, 0, 0, 0.55);
--salt-color-black-60a: rgba(0, 0, 0, 0.6);
--salt-color-black-65a: rgba(0, 0, 0, 0.65);
--salt-color-black-70a: rgba(0, 0, 0, 0.7);
--salt-color-black-75a: rgba(0, 0, 0, 0.75);
--salt-color-black-80a: rgba(0, 0, 0, 0.8);
--salt-color-blue-200-40a: rgba(199, 222, 255, 0.4);
--salt-color-blue-300-40a: rgba(154, 189, 245, 0.4);
--salt-color-blue-400-40a: rgba(102, 156, 232, 0.4);
--salt-color-blue-500-40a: rgba(0, 120, 207, 0.4);
--salt-color-blue-500-0a: rgba(0, 120, 207, 0);
--salt-color-blue-600-40a: rgba(0, 94, 166, 0.4);
--salt-color-blue-700-40a: rgba(0, 69, 126, 0.4);
--salt-color-blue-800-40a: rgba(0, 45, 89, 0.4);
--salt-color-gray-300-40a: rgba(177, 181, 185, 0.4);
--salt-color-gray-400-10a: rgba(145, 149, 154, 0.1);
--salt-color-gray-400-40a: rgba(145, 149, 154, 0.4);
--salt-color-gray-500-0a: rgba(114, 119, 125, 0);
--salt-color-gray-500-10a: rgba(114, 119, 125, 0.1);
--salt-color-gray-500-40a: rgba(114, 119, 125, 0.4);
--salt-color-gray-600-10a: rgba(95, 100, 106, 0.1);
--salt-color-gray-600-40a: rgba(97, 102, 108, 0.4);
--salt-color-gray-700-40a: rgba(76, 81, 87, 0.4);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

??? Why gray 600 10a/40a not same RGB

--salt-color-orange-400-40a: rgba(232, 122, 56, 0.4);
--salt-color-orange-500-40a: rgba(199, 83, 0, 0.4);
--salt-color-orange-600-40a: rgba(163, 68, 0, 0.4);
--salt-color-red-400-40a: rgba(255, 93, 87, 0.4);
--salt-color-red-500-40a: rgba(229, 33, 53, 0.4);
--salt-color-red-600-40a: rgba(186, 23, 41, 0.4);
--salt-color-teal-200-40a: rgba(175, 224, 237, 0.4);
--salt-color-teal-300-40a: rgba(131, 192, 214, 0.4);
--salt-color-teal-400-40a: rgba(76, 161, 194, 0.4);
--salt-color-teal-500-40a: rgba(27, 127, 158, 0.4);
--salt-color-teal-500-0a: rgba(27, 127, 158, 0);
--salt-color-teal-600-40a: rgba(18, 100, 126, 0.4);
--salt-color-teal-700-40a: rgba(9, 74, 96, 0.4);
--salt-color-teal-800-40a: rgba(3, 49, 66, 0.4);
--salt-color-green-400-40a: rgba(83, 176, 135, 0.4);
--salt-color-green-500-40a: rgba(0, 135, 93, 0.4);
--salt-color-green-600-40a: rgba(0, 107, 72, 0.4);
--salt-color-background-snow-40a: rgba(255, 255, 255, 0.4);
--salt-color-background-marble-40a: rgba(242, 244, 246, 0.4);
--salt-color-background-limestone-40a: rgba(250, 248, 242, 0.4);
--salt-color-background-charcoal-40a: rgba(71, 76, 80, 0.4);
--salt-color-background-leather-40a: rgba(38, 41, 43, 0.4);
--salt-color-background-jet-40a: rgba(16, 24, 32, 0.4);
}
224 changes: 78 additions & 146 deletions packages/theme/css/foundations/color-next.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,80 @@
/**
* Generated by `scripts/gen-css-json.mjs`
* Do not edit directly, this file was auto-generated.
*/

.salt-theme.salt-theme-next {
--salt-color-white-rgb: 255, 255, 255;
--salt-color-gray-100-rgb: 245, 247, 248;
--salt-color-gray-200-rgb: 211, 213, 216;
--salt-color-gray-300-rgb: 177, 181, 185;
--salt-color-gray-400-rgb: 145, 149, 154;
--salt-color-gray-500-rgb: 114, 119, 125;
--salt-color-gray-600-rgb: 95, 100, 106;
--salt-color-gray-700-rgb: 76, 81, 87;
--salt-color-gray-800-rgb: 58, 63, 68;
--salt-color-gray-900-rgb: 41, 46, 51;
--salt-color-black-rgb: 0, 0, 0;
--salt-color-blue-100-rgb: 234, 246, 255;
--salt-color-blue-200-rgb: 199, 222, 255;
--salt-color-blue-300-rgb: 154, 189, 245;
--salt-color-blue-400-rgb: 102, 156, 232;
--salt-color-blue-500-rgb: 0, 120, 207;
--salt-color-blue-600-rgb: 0, 94, 166;
--salt-color-blue-700-rgb: 0, 69, 126;
--salt-color-blue-800-rgb: 0, 45, 89;
--salt-color-blue-900-rgb: 0, 23, 54;
--salt-color-green-100-rgb: 234, 245, 242;
--salt-color-green-200-rgb: 184, 229, 209;
--salt-color-green-300-rgb: 137, 204, 173;
--salt-color-green-400-rgb: 83, 176, 135;
--salt-color-green-500-rgb: 0, 135, 93;
--salt-color-green-600-rgb: 0, 107, 72;
--salt-color-green-700-rgb: 0, 86, 55;
--salt-color-green-800-rgb: 0, 63, 37;
--salt-color-green-900-rgb: 0, 41, 21;
--salt-color-teal-100-rgb: 219, 245, 247;
--salt-color-teal-200-rgb: 175, 224, 237;
--salt-color-teal-300-rgb: 131, 192, 214;
--salt-color-teal-400-rgb: 76, 161, 194;
--salt-color-teal-500-rgb: 27, 127, 158;
--salt-color-teal-600-rgb: 18, 100, 126;
--salt-color-teal-700-rgb: 9, 74, 96;
--salt-color-teal-800-rgb: 3, 49, 66;
--salt-color-teal-900-rgb: 0, 27, 41;
--salt-color-orange-100-rgb: 255, 236, 217;
--salt-color-orange-200-rgb: 255, 198, 161;
--salt-color-orange-300-rgb: 247, 160, 106;
--salt-color-orange-400-rgb: 232, 122, 56;
--salt-color-orange-500-rgb: 199, 83, 0;
--salt-color-orange-600-rgb: 163, 68, 0;
--salt-color-orange-700-rgb: 129, 54, 0;
--salt-color-orange-800-rgb: 97, 41, 0;
--salt-color-orange-900-rgb: 66, 32, 0;
--salt-color-red-100-rgb: 255, 236, 234;
--salt-color-red-200-rgb: 255, 193, 186;
--salt-color-red-300-rgb: 255, 147, 138;
--salt-color-red-400-rgb: 255, 93, 87;
--salt-color-red-500-rgb: 229, 33, 53;
--salt-color-red-600-rgb: 186, 23, 41;
--salt-color-red-700-rgb: 145, 13, 30;
--salt-color-red-800-rgb: 105, 4, 19;
--salt-color-red-900-rgb: 69, 0, 2;
--salt-color-purple-100-rgb: 246, 240, 250;
--salt-color-purple-200-rgb: 240, 214, 245;
--salt-color-purple-300-rgb: 218, 175, 224;
--salt-color-purple-400-rgb: 195, 136, 204;
--salt-color-purple-500-rgb: 162, 91, 173;
--salt-color-purple-600-rgb: 133, 67, 143;
--salt-color-purple-700-rgb: 104, 45, 113;
--salt-color-purple-800-rgb: 73, 21, 82;
--salt-color-purple-900-rgb: 51, 0, 59;
--salt-color-background-snow-rgb: 255, 255, 255;
--salt-color-background-marble-rgb: 245, 247, 248;
--salt-color-background-limestone-rgb: 250, 248, 242;
--salt-color-background-titanium-rgb: 226, 228, 229;
--salt-color-background-jet-rgb: 16, 24, 32;
--salt-color-background-granite-rgb: 26, 34, 41;
--salt-color-background-leather-rgb: 38, 41, 43;
--salt-color-logo-brown-rgb: 58, 34, 6;
--salt-color-white: rgb(var(--salt-color-white-rgb));
--salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
--salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
--salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
--salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb));
--salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb));
--salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb));
--salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
--salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
--salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
--salt-color-black: rgb(var(--salt-color-black-rgb));
--salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
--salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
--salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
--salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb));
--salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb));
--salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb));
--salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
--salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
--salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
--salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
--salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
--salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
--salt-color-green-400: rgb(var(--salt-color-green-400-rgb));
--salt-color-green-500: rgb(var(--salt-color-green-500-rgb));
--salt-color-green-600: rgb(var(--salt-color-green-600-rgb));
--salt-color-green-700: rgb(var(--salt-color-green-700-rgb));
--salt-color-green-800: rgb(var(--salt-color-green-800-rgb));
--salt-color-green-900: rgb(var(--salt-color-green-900-rgb));
--salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb));
--salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb));
--salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb));
--salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb));
--salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb));
--salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb));
--salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb));
--salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb));
--salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb));
--salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb));
--salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb));
--salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb));
--salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb));
--salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb));
--salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb));
--salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
--salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
--salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
--salt-color-red-100: rgb(var(--salt-color-red-100-rgb));
--salt-color-red-200: rgb(var(--salt-color-red-200-rgb));
--salt-color-red-300: rgb(var(--salt-color-red-300-rgb));
--salt-color-red-400: rgb(var(--salt-color-red-400-rgb));
--salt-color-red-500: rgb(var(--salt-color-red-500-rgb));
--salt-color-red-600: rgb(var(--salt-color-red-600-rgb));
--salt-color-red-700: rgb(var(--salt-color-red-700-rgb));
--salt-color-red-800: rgb(var(--salt-color-red-800-rgb));
--salt-color-red-900: rgb(var(--salt-color-red-900-rgb));
--salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb));
--salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb));
--salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb));
--salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb));
--salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb));
--salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb));
--salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb));
--salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb));
--salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb));
--salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
--salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
--salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
--salt-color-background-titanium: rgb(var(--salt-color-background-titanium-rgb));
--salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
--salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
--salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
--salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
--salt-color-white: rgb(255, 255, 255);
--salt-color-gray-100: rgb(245, 247, 248);
--salt-color-gray-200: rgb(211, 213, 216);
--salt-color-gray-300: rgb(177, 181, 185);
--salt-color-gray-400: rgb(145, 149, 154);
--salt-color-gray-500: rgb(114, 119, 125);
--salt-color-gray-600: rgb(95, 100, 106);
--salt-color-gray-700: rgb(76, 81, 87);
--salt-color-gray-800: rgb(58, 63, 68);
--salt-color-gray-900: rgb(41, 46, 51);
--salt-color-black: rgb(0, 0, 0);
--salt-color-blue-100: rgb(234, 246, 255);
--salt-color-blue-200: rgb(199, 222, 255);
--salt-color-blue-300: rgb(154, 189, 245);
--salt-color-blue-400: rgb(102, 156, 232);
--salt-color-blue-500: rgb(0, 120, 207);
--salt-color-blue-600: rgb(0, 94, 166);
--salt-color-blue-700: rgb(0, 69, 126);
--salt-color-blue-800: rgb(0, 45, 89);
--salt-color-blue-900: rgb(0, 23, 54);
--salt-color-green-100: rgb(234, 245, 242);
--salt-color-green-200: rgb(184, 229, 209);
--salt-color-green-300: rgb(137, 204, 173);
--salt-color-green-400: rgb(83, 176, 135);
--salt-color-green-500: rgb(0, 135, 93);
--salt-color-green-600: rgb(0, 107, 72);
--salt-color-green-700: rgb(0, 86, 55);
--salt-color-green-800: rgb(0, 63, 37);
--salt-color-green-900: rgb(0, 41, 21);
--salt-color-teal-100: rgb(219, 245, 247);
--salt-color-teal-200: rgb(175, 224, 237);
--salt-color-teal-300: rgb(131, 192, 214);
--salt-color-teal-400: rgb(76, 161, 194);
--salt-color-teal-500: rgb(27, 127, 158);
--salt-color-teal-600: rgb(18, 100, 126);
--salt-color-teal-700: rgb(9, 74, 96);
--salt-color-teal-800: rgb(3, 49, 66);
--salt-color-teal-900: rgb(0, 27, 41);
--salt-color-orange-100: rgb(255, 236, 217);
--salt-color-orange-200: rgb(255, 198, 161);
--salt-color-orange-300: rgb(247, 160, 106);
--salt-color-orange-400: rgb(232, 122, 56);
--salt-color-orange-500: rgb(199, 83, 0);
--salt-color-orange-600: rgb(163, 68, 0);
--salt-color-orange-700: rgb(129, 54, 0);
--salt-color-orange-800: rgb(97, 41, 0);
--salt-color-orange-900: rgb(66, 32, 0);
--salt-color-red-100: rgb(255, 236, 234);
--salt-color-red-200: rgb(255, 193, 186);
--salt-color-red-300: rgb(255, 147, 138);
--salt-color-red-400: rgb(255, 93, 87);
--salt-color-red-500: rgb(229, 33, 53);
--salt-color-red-600: rgb(186, 23, 41);
--salt-color-red-700: rgb(145, 13, 30);
--salt-color-red-800: rgb(105, 4, 19);
--salt-color-red-900: rgb(69, 0, 2);
--salt-color-purple-100: rgb(246, 240, 250);
--salt-color-purple-200: rgb(240, 214, 245);
--salt-color-purple-300: rgb(218, 175, 224);
--salt-color-purple-400: rgb(195, 136, 204);
--salt-color-purple-500: rgb(162, 91, 173);
--salt-color-purple-600: rgb(133, 67, 143);
--salt-color-purple-700: rgb(104, 45, 113);
--salt-color-purple-800: rgb(73, 21, 82);
--salt-color-purple-900: rgb(51, 0, 59);
--salt-color-background-snow: rgb(255, 255, 255);
--salt-color-background-marble: rgb(245, 247, 248);
--salt-color-background-limestone: rgb(250, 248, 242);
--salt-color-background-titanium: rgb(226, 228, 229);
--salt-color-background-charcoal: rgb(71, 76, 80);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Charcoal not in code

--salt-color-background-jet: rgb(16, 24, 32);
--salt-color-background-granite: rgb(26, 34, 41);
--salt-color-background-leather: rgb(38, 41, 43);
}
Loading
Loading