Skip to content

Commit 7c26e3a

Browse files
pfultonpfulton
authored
feat: add s2 static colors (#5902)
* feat: add S2 static colors - Adds the Spectrum 2 static colors from Spectrum Tokens, manually.
1 parent 746dbee commit 7c26e3a

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

‎.changeset/wild-clowns-remain.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
'@spectrum-web-components/styles': minor
3+
---
4+
5+
Manually adds the s2 static color values from [Spectrum Tokens](https://github.com/adobe/spectrum-tokens/blob/04cf6eb95ece7f3320e0e2babd6a51db8edfc950/packages/tokens/src/color-palette.json#L6491)
6+
7+
### Added
8+
9+
- `--spectrum-static-blue-900-rgb: 59 99 251;`
10+
- `--spectrum-static-blue-900: rgb(var(--spectrum-static-blue-900-rgb));`
11+
- `--spectrum-static-blue-1000-rgb: 39 77 234;`
12+
- `--spectrum-static-blue-1000: rgb(var(--spectrum-static-blue-1000-rgb));`
13+
- `--spectrum-static-fuchsia-400-rgb: 247 181 255;`
14+
- `--spectrum-static-fuchsia-400: rgb(var(--spectrum-static-fuchsia-400-rgb));`
15+
- `--spectrum-static-fuchsia-600-rgb: 236 105 255;`
16+
- `--spectrum-static-fuchsia-600: rgb(var(--spectrum-static-fuchsia-600-rgb));`
17+
- `--spectrum-static-fuchsia-800-rgb: 200 68 220;`
18+
- `--spectrum-static-fuchsia-800: rgb(var(--spectrum-static-fuchsia-800-rgb));`
19+
- `--spectrum-static-fuchsia-900-rgb: 181 57 200;`
20+
- `--spectrum-static-fuchsia-900: rgb(var(--spectrum-static-fuchsia-900-rgb));`
21+
- `--spectrum-static-fuchsia-1000-rgb: 156 40 175;`
22+
- `--spectrum-static-fuchsia-1000: rgb(var(--spectrum-static-fuchsia-1000-rgb));`
23+
- `--spectrum-static-indigo-400-rgb: 192 201 255;`
24+
- `--spectrum-static-indigo-400: rgb(var(--spectrum-static-indigo-400-rgb));`
25+
- `--spectrum-static-indigo-600-rgb: 145 151 254;`
26+
- `--spectrum-static-indigo-600: rgb(var(--spectrum-static-indigo-600-rgb));`
27+
- `--spectrum-static-indigo-800-rgb: 122 106 253;`
28+
- `--spectrum-static-indigo-800: rgb(var(--spectrum-static-indigo-800-rgb));`
29+
- `--spectrum-static-indigo-900-rgb: 113 85 250;`
30+
- `--spectrum-static-indigo-900: rgb(var(--spectrum-static-indigo-900-rgb));`
31+
- `--spectrum-static-indigo-1000-rgb: 99 56 238;`
32+
- `--spectrum-static-indigo-1000: rgb(var(--spectrum-static-indigo-1000-rgb));`
33+
- `--spectrum-static-magenta-400-rgb: 255 185 208;`
34+
- `--spectrum-static-magenta-400: rgb(var(--spectrum-static-magenta-400-rgb));`
35+
- `--spectrum-static-magenta-600-rgb: 255 112 159;`
36+
- `--spectrum-static-magenta-600: rgb(var(--spectrum-static-magenta-600-rgb));`
37+
- `--spectrum-static-magenta-800-rgb: 240 45 110;`
38+
- `--spectrum-static-magenta-800: rgb(var(--spectrum-static-magenta-800-rgb));`
39+
- `--spectrum-static-magenta-900-rgb: 217 35 97;`
40+
- `--spectrum-static-magenta-900: rgb(var(--spectrum-static-magenta-900-rgb));`
41+
- `--spectrum-static-magenta-1000-rgb: 186 22 80;`
42+
- `--spectrum-static-magenta-1000: rgb(var(--spectrum-static-magenta-1000-rgb));`
43+
- `--spectrum-static-red-400-rgb: 255 188 180;`
44+
- `--spectrum-static-red-400: rgb(var(--spectrum-static-red-400-rgb));`
45+
- `--spectrum-static-red-600-rgb: 255 118 101;`
46+
- `--spectrum-static-red-600: rgb(var(--spectrum-static-red-600-rgb));`
47+
- `--spectrum-static-red-800-rgb: 240 56 35;`
48+
- `--spectrum-static-red-800: rgb(var(--spectrum-static-red-800-rgb));`
49+
- `--spectrum-static-red-900-rgb: 215 50 32;`
50+
- `--spectrum-static-red-900: rgb(var(--spectrum-static-red-900-rgb));`
51+
- `--spectrum-static-red-1000-rgb: 183 40 24;`
52+
- `--spectrum-static-red-1000: rgb(var(--spectrum-static-red-1000-rgb));`
53+
- `--spectrum-static-cyan-400-rgb: 138 213 255;`
54+
- `--spectrum-static-cyan-400: rgb(var(--spectrum-static-cyan-400-rgb));`
55+
- `--spectrum-static-cyan-600-rgb: 48 167 254;`
56+
- `--spectrum-static-cyan-600: rgb(var(--spectrum-static-cyan-600-rgb));`
57+
- `--spectrum-static-cyan-800-rgb: 18 134 205;`
58+
- `--spectrum-static-cyan-800: rgb(var(--spectrum-static-cyan-800-rgb));`
59+
- `--spectrum-static-chartreuse-400-rgb: 182 219 0;`
60+
- `--spectrum-static-chartreuse-400: rgb(var(--spectrum-static-chartreuse-400-rgb));`
61+
- `--spectrum-static-chartreuse-600-rgb: 143 172 0;`
62+
- `--spectrum-static-chartreuse-600: rgb(var(--spectrum-static-chartreuse-600-rgb));`
63+
- `--spectrum-static-chartreuse-800-rgb: 114 137 0;`
64+
- `--spectrum-static-chartreuse-800: rgb(var(--spectrum-static-chartreuse-800-rgb));`
65+
- `--spectrum-static-green-400-rgb: 107 227 162;`
66+
- `--spectrum-static-green-400: rgb(var(--spectrum-static-green-400-rgb));`
67+
- `--spectrum-static-green-600-rgb: 18 184 103;`
68+
- `--spectrum-static-green-600: rgb(var(--spectrum-static-green-600-rgb));`
69+
- `--spectrum-static-green-800-rgb: 7 147 85;`
70+
- `--spectrum-static-green-800: rgb(var(--spectrum-static-green-800-rgb));`
71+
- `--spectrum-static-orange-400-rgb: 255 193 94;`
72+
- `--spectrum-static-orange-400: rgb(var(--spectrum-static-orange-400-rgb));`
73+
- `--spectrum-static-orange-600-rgb: 252 125 0;`
74+
- `--spectrum-static-orange-600: rgb(var(--spectrum-static-orange-600-rgb));`
75+
- `--spectrum-static-orange-800-rgb: 212 91 0;`
76+
- `--spectrum-static-orange-800: rgb(var(--spectrum-static-orange-800-rgb));`
77+
- `--spectrum-static-purple-400-rgb: 221 193 246;`
78+
- `--spectrum-static-purple-400: rgb(var(--spectrum-static-purple-400-rgb));`
79+
- `--spectrum-static-purple-600-rgb: 191 138 238;`
80+
- `--spectrum-static-purple-600: rgb(var(--spectrum-static-purple-600-rgb));`
81+
- `--spectrum-static-purple-800-rgb: 166 92 231;`
82+
- `--spectrum-static-purple-800: rgb(var(--spectrum-static-purple-800-rgb));`
83+
- `--spectrum-static-turquoise-400-rgb: 111 221 228;`
84+
- `--spectrum-static-turquoise-400: rgb(var(--spectrum-static-turquoise-400-rgb));`
85+
- `--spectrum-static-turquoise-600-rgb: 15 177 192;`
86+
- `--spectrum-static-turquoise-600: rgb(var(--spectrum-static-turquoise-600-rgb));`
87+
- `--spectrum-static-turquoise-800-rgb: 10 141 153;`
88+
- `--spectrum-static-turquoise-800: rgb(var(--spectrum-static-turquoise-800-rgb));`

‎1st-gen/tools/styles/tokens-v2/global-vars.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -651,4 +651,84 @@
651651
--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
652652
--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
653653
--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
654+
--spectrum-static-blue-900-rgb: 59 99 251;
655+
--spectrum-static-blue-900: rgb(var(--spectrum-static-blue-900-rgb));
656+
--spectrum-static-blue-1000-rgb: 39 77 234;
657+
--spectrum-static-blue-1000: rgb(var(--spectrum-static-blue-1000-rgb));
658+
--spectrum-static-fuchsia-400-rgb: 247 181 255;
659+
--spectrum-static-fuchsia-400: rgb(var(--spectrum-static-fuchsia-400-rgb));
660+
--spectrum-static-fuchsia-600-rgb: 236 105 255;
661+
--spectrum-static-fuchsia-600: rgb(var(--spectrum-static-fuchsia-600-rgb));
662+
--spectrum-static-fuchsia-800-rgb: 200 68 220;
663+
--spectrum-static-fuchsia-800: rgb(var(--spectrum-static-fuchsia-800-rgb));
664+
--spectrum-static-fuchsia-900-rgb: 181 57 200;
665+
--spectrum-static-fuchsia-900: rgb(var(--spectrum-static-fuchsia-900-rgb));
666+
--spectrum-static-fuchsia-1000-rgb: 156 40 175;
667+
--spectrum-static-fuchsia-1000: rgb(var(--spectrum-static-fuchsia-1000-rgb));
668+
--spectrum-static-indigo-400-rgb: 192 201 255;
669+
--spectrum-static-indigo-400: rgb(var(--spectrum-static-indigo-400-rgb));
670+
--spectrum-static-indigo-600-rgb: 145 151 254;
671+
--spectrum-static-indigo-600: rgb(var(--spectrum-static-indigo-600-rgb));
672+
--spectrum-static-indigo-800-rgb: 122 106 253;
673+
--spectrum-static-indigo-800: rgb(var(--spectrum-static-indigo-800-rgb));
674+
--spectrum-static-indigo-900-rgb: 113 85 250;
675+
--spectrum-static-indigo-900: rgb(var(--spectrum-static-indigo-900-rgb));
676+
--spectrum-static-indigo-1000-rgb: 99 56 238;
677+
--spectrum-static-indigo-1000: rgb(var(--spectrum-static-indigo-1000-rgb));
678+
--spectrum-static-magenta-400-rgb: 255 185 208;
679+
--spectrum-static-magenta-400: rgb(var(--spectrum-static-magenta-400-rgb));
680+
--spectrum-static-magenta-600-rgb: 255 112 159;
681+
--spectrum-static-magenta-600: rgb(var(--spectrum-static-magenta-600-rgb));
682+
--spectrum-static-magenta-800-rgb: 240 45 110;
683+
--spectrum-static-magenta-800: rgb(var(--spectrum-static-magenta-800-rgb));
684+
--spectrum-static-magenta-900-rgb: 217 35 97;
685+
--spectrum-static-magenta-900: rgb(var(--spectrum-static-magenta-900-rgb));
686+
--spectrum-static-magenta-1000-rgb: 186 22 80;
687+
--spectrum-static-magenta-1000: rgb(var(--spectrum-static-magenta-1000-rgb));
688+
--spectrum-static-red-400-rgb: 255 188 180;
689+
--spectrum-static-red-400: rgb(var(--spectrum-static-red-400-rgb));
690+
--spectrum-static-red-600-rgb: 255 118 101;
691+
--spectrum-static-red-600: rgb(var(--spectrum-static-red-600-rgb));
692+
--spectrum-static-red-800-rgb: 240 56 35;
693+
--spectrum-static-red-800: rgb(var(--spectrum-static-red-800-rgb));
694+
--spectrum-static-red-900-rgb: 215 50 32;
695+
--spectrum-static-red-900: rgb(var(--spectrum-static-red-900-rgb));
696+
--spectrum-static-red-1000-rgb: 183 40 24;
697+
--spectrum-static-red-1000: rgb(var(--spectrum-static-red-1000-rgb));
698+
--spectrum-static-cyan-400-rgb: 138 213 255;
699+
--spectrum-static-cyan-400: rgb(var(--spectrum-static-cyan-400-rgb));
700+
--spectrum-static-cyan-600-rgb: 48 167 254;
701+
--spectrum-static-cyan-600: rgb(var(--spectrum-static-cyan-600-rgb));
702+
--spectrum-static-cyan-800-rgb: 18 134 205;
703+
--spectrum-static-cyan-800: rgb(var(--spectrum-static-cyan-800-rgb));
704+
--spectrum-static-chartreuse-400-rgb: 182 219 0;
705+
--spectrum-static-chartreuse-400: rgb(var(--spectrum-static-chartreuse-400-rgb));
706+
--spectrum-static-chartreuse-600-rgb: 143 172 0;
707+
--spectrum-static-chartreuse-600: rgb(var(--spectrum-static-chartreuse-600-rgb));
708+
--spectrum-static-chartreuse-800-rgb: 114 137 0;
709+
--spectrum-static-chartreuse-800: rgb(var(--spectrum-static-chartreuse-800-rgb));
710+
--spectrum-static-green-400-rgb: 107 227 162;
711+
--spectrum-static-green-400: rgb(var(--spectrum-static-green-400-rgb));
712+
--spectrum-static-green-600-rgb: 18 184 103;
713+
--spectrum-static-green-600: rgb(var(--spectrum-static-green-600-rgb));
714+
--spectrum-static-green-800-rgb: 7 147 85;
715+
--spectrum-static-green-800: rgb(var(--spectrum-static-green-800-rgb));
716+
--spectrum-static-orange-400-rgb: 255 193 94;
717+
--spectrum-static-orange-400: rgb(var(--spectrum-static-orange-400-rgb));
718+
--spectrum-static-orange-600-rgb: 252 125 0;
719+
--spectrum-static-orange-600: rgb(var(--spectrum-static-orange-600-rgb));
720+
--spectrum-static-orange-800-rgb: 212 91 0;
721+
--spectrum-static-orange-800: rgb(var(--spectrum-static-orange-800-rgb));
722+
--spectrum-static-purple-400-rgb: 221 193 246;
723+
--spectrum-static-purple-400: rgb(var(--spectrum-static-purple-400-rgb));
724+
--spectrum-static-purple-600-rgb: 191 138 238;
725+
--spectrum-static-purple-600: rgb(var(--spectrum-static-purple-600-rgb));
726+
--spectrum-static-purple-800-rgb: 166 92 231;
727+
--spectrum-static-purple-800: rgb(var(--spectrum-static-purple-800-rgb));
728+
--spectrum-static-turquoise-400-rgb: 111 221 228;
729+
--spectrum-static-turquoise-400: rgb(var(--spectrum-static-turquoise-400-rgb));
730+
--spectrum-static-turquoise-600-rgb: 15 177 192;
731+
--spectrum-static-turquoise-600: rgb(var(--spectrum-static-turquoise-600-rgb));
732+
--spectrum-static-turquoise-800-rgb: 10 141 153;
733+
--spectrum-static-turquoise-800: rgb(var(--spectrum-static-turquoise-800-rgb));
654734
}

0 commit comments

Comments
 (0)