Skip to content

Commit 76718dd

Browse files
castastrophecastastrophe
committed
feat(tokens): new static colors
1 parent 364a9e1 commit 76718dd

File tree

3 files changed

+274
-12
lines changed

3 files changed

+274
-12
lines changed

‎.changeset/tasty-planes-design.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
"@spectrum-css/tokens": minor
3+
---
4+
5+
Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) [13.14.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.14.0) -> [13.15.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.15.0).
6+
7+
### Newly added
8+
9+
| Token name | Token value |
10+
| --------------------------------------------------- | --------------------------------------------------------------- |
11+
| `--spectrum-static-fuchsia-400` | `rgb(247, 181, 255)` |
12+
| `--spectrum-static-fuchsia-600` | `rgb(236, 105, 255)` |
13+
| `--spectrum-static-fuchsia-800` | `rgb(200, 68, 220)` |
14+
| `--spectrum-static-indigo-400` | `rgb(192, 201, 255)` |
15+
| `--spectrum-static-indigo-600` | `rgb(145, 151, 254)` |
16+
| `--spectrum-static-indigo-800` | `rgb(122, 106, 253)` |
17+
| `--spectrum-static-magenta-400` | `rgb(255, 185, 208)` |
18+
| `--spectrum-static-magenta-600` | `rgb(255, 112, 159)` |
19+
| `--spectrum-static-magenta-800` | `rgb(240, 45, 110)` |
20+
| `--spectrum-static-red-400` | `rgb(255, 188, 180)` |
21+
| `--spectrum-static-red-600` | `rgb(255, 118, 101)` |
22+
| `--spectrum-static-red-800` | `rgb(240, 56, 35)` |
23+
| `--spectrum-static-cyan-400` | `rgb(138, 213, 255)` |
24+
| `--spectrum-static-cyan-600` | `rgb(48, 167, 254)` |
25+
| `--spectrum-static-cyan-800` | `rgb(18, 134, 205)` |
26+
| `--spectrum-static-chartreuse-400` | `rgb(182, 219, 0)` |
27+
| `--spectrum-static-chartreuse-600` | `rgb(143, 172, 0)` |
28+
| `--spectrum-static-chartreuse-800` | `rgb(114, 137, 0)` |
29+
| `--spectrum-static-green-400` | `rgb(107, 227, 162)` |
30+
| `--spectrum-static-green-600` | `rgb(107, 227, 162)` |
31+
| `--spectrum-static-green-800` | `rgb(7, 147, 85)` |
32+
| `--spectrum-static-orange-400` | `rgb(255, 193, 94)` |
33+
| `--spectrum-static-orange-600` | `rgb(252, 125, 0)` |
34+
| `--spectrum-static-orange-800` | `rgb(212, 91, 0)` |
35+
| `--spectrum-static-purple-400` | `rgb(221, 193, 246)` |
36+
| `--spectrum-static-purple-600` | `rgb(191, 138, 238)` |
37+
| `--spectrum-static-purple-800` | `rgb(166, 92, 231)` |
38+
| `--spectrum-static-turquoise-400` | `rgb(111, 221, 228)` |
39+
| `--spectrum-static-turquoise-600` | `rgb(15, 177, 192)` |
40+
| `--spectrum-static-turquoise-800` | `rgb(10, 141, 153)` |
41+
| `--spectrum-gradient-stop-1-avatar` | `0` |
42+
| `--spectrum-gradient-stop-2-avatar` | `0.6666` |
43+
| `--spectrum-gradient-stop-3-avatar` | `1` |
44+
| `--spectrum-drop-shadow-ambient-color` | `rgba(0, 0, 0, 0.08)` (light)<br/>`rgba(0, 0, 0, 0.24)` (dark) |
45+
| `--spectrum-drop-shadow-transition-color` | `rgba(0, 0, 0, 0.04)` (light)<br/>`rgba(0, 0, 0, 0.12)` (dark) |
46+
| `--spectrum-drop-shadow-emphasized-key-color` | `rgba(0, 0, 0, 0.08)` (light)</br/>`rgba(0, 0, 0, 0.24)` (dark) |
47+
| `--spectrum-drop-shadow-emphasized-hover-key-color` | `rgba(0, 0, 0, 0.12)` (light)</br/>`rgba(0, 0, 0, 0.36)` (dark) |
48+
| `--spectrum-drop-shadow-elevated-key-color` | `rgba(0, 0, 0, 0.12)` (light)</br/>`rgba(0, 0, 0, 0.36)` (dark) |
49+
| `--spectrum-drop-shadow-dragged-key-color` | `rgba(0, 0, 0, 0.16)` (light)</br/>`rgba(0, 0, 0, 0.48)` (dark) |

‎tokens/dist/json/tokens.json

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6837,6 +6837,18 @@
68376837
"value": "12px"
68386838
}
68396839
},
6840+
"drop-shadow-ambient-color": {
6841+
"prop": "--spectrum-drop-shadow-ambient-color",
6842+
"light": {
6843+
"value": "rgba(0, 0, 0, 0.08)"
6844+
},
6845+
"dark": {
6846+
"value": "rgba(0, 0, 0, 0.24)"
6847+
},
6848+
"wireframe": {
6849+
"value": "rgba(0, 0, 0, 0.08)"
6850+
}
6851+
},
68406852
"drop-shadow-blur": {
68416853
"prop": "--spectrum-drop-shadow-blur",
68426854
"ref": "var(--spectrum-drop-shadow-blur-100)",
@@ -6903,6 +6915,9 @@
69036915
"value": "rgba(0, 0, 0, 0.2)"
69046916
}
69056917
},
6918+
"drop-shadow-dragged": {
6919+
"prop": "--spectrum-drop-shadow-dragged"
6920+
},
69066921
"drop-shadow-dragged-blur": {
69076922
"prop": "--spectrum-drop-shadow-dragged-blur",
69086923
"ref": "var(--spectrum-drop-shadow-blur-300)",
@@ -6921,6 +6936,18 @@
69216936
"value": "rgba(0, 0, 0, 0.2)"
69226937
}
69236938
},
6939+
"drop-shadow-dragged-key-color": {
6940+
"prop": "--spectrum-drop-shadow-dragged-key-color",
6941+
"light": {
6942+
"value": "rgba(0, 0, 0, 0.16)"
6943+
},
6944+
"dark": {
6945+
"value": "rgba(0, 0, 0, 0.48)"
6946+
},
6947+
"wireframe": {
6948+
"value": "rgba(0, 0, 0, 0.16)"
6949+
}
6950+
},
69246951
"drop-shadow-dragged-x": {
69256952
"prop": "--spectrum-drop-shadow-dragged-x",
69266953
"ref": "var(--spectrum-drop-shadow-x-300)",
@@ -6931,6 +6958,9 @@
69316958
"ref": "var(--spectrum-drop-shadow-y-300)",
69326959
"value": "6px"
69336960
},
6961+
"drop-shadow-elevated": {
6962+
"prop": "--spectrum-drop-shadow-elevated"
6963+
},
69346964
"drop-shadow-elevated-blur": {
69356965
"prop": "--spectrum-drop-shadow-elevated-blur",
69366966
"ref": "var(--spectrum-drop-shadow-blur-200)",
@@ -6949,6 +6979,18 @@
69496979
"value": "rgba(0, 0, 0, 0.16)"
69506980
}
69516981
},
6982+
"drop-shadow-elevated-key-color": {
6983+
"prop": "--spectrum-drop-shadow-elevated-key-color",
6984+
"light": {
6985+
"value": "rgba(0, 0, 0, 0.12)"
6986+
},
6987+
"dark": {
6988+
"value": "rgba(0, 0, 0, 0.36)"
6989+
},
6990+
"wireframe": {
6991+
"value": "rgba(0, 0, 0, 0.12)"
6992+
}
6993+
},
69526994
"drop-shadow-elevated-x": {
69536995
"prop": "--spectrum-drop-shadow-elevated-x",
69546996
"ref": "var(--spectrum-drop-shadow-x-200)",
@@ -6959,6 +7001,9 @@
69597001
"ref": "var(--spectrum-drop-shadow-y-200)",
69607002
"value": "2px"
69617003
},
7004+
"drop-shadow-emphasized": {
7005+
"prop": "--spectrum-drop-shadow-emphasized"
7006+
},
69627007
"drop-shadow-emphasized-default-blur": {
69637008
"prop": "--spectrum-drop-shadow-emphasized-default-blur",
69647009
"ref": "var(--spectrum-drop-shadow-blur-100)",
@@ -6987,6 +7032,9 @@
69877032
"ref": "var(--spectrum-drop-shadow-y-100)",
69887033
"value": "1px"
69897034
},
7035+
"drop-shadow-emphasized-hover": {
7036+
"prop": "--spectrum-drop-shadow-emphasized-hover"
7037+
},
69907038
"drop-shadow-emphasized-hover-blur": {
69917039
"prop": "--spectrum-drop-shadow-emphasized-hover-blur",
69927040
"ref": "var(--spectrum-drop-shadow-blur-200)",
@@ -7005,6 +7053,18 @@
70057053
"value": "rgba(0, 0, 0, 0.16)"
70067054
}
70077055
},
7056+
"drop-shadow-emphasized-hover-key-color": {
7057+
"prop": "--spectrum-drop-shadow-emphasized-hover-key-color",
7058+
"light": {
7059+
"value": "rgba(0, 0, 0, 0.12)"
7060+
},
7061+
"dark": {
7062+
"value": "rgba(0, 0, 0, 0.36)"
7063+
},
7064+
"wireframe": {
7065+
"value": "rgba(0, 0, 0, 0.12)"
7066+
}
7067+
},
70087068
"drop-shadow-emphasized-hover-x": {
70097069
"prop": "--spectrum-drop-shadow-emphasized-hover-x",
70107070
"ref": "var(--spectrum-drop-shadow-x-200)",
@@ -7015,6 +7075,30 @@
70157075
"ref": "var(--spectrum-drop-shadow-y-200)",
70167076
"value": "2px"
70177077
},
7078+
"drop-shadow-emphasized-key-color": {
7079+
"prop": "--spectrum-drop-shadow-emphasized-key-color",
7080+
"light": {
7081+
"value": "rgba(0, 0, 0, 0.08)"
7082+
},
7083+
"dark": {
7084+
"value": "rgba(0, 0, 0, 0.24)"
7085+
},
7086+
"wireframe": {
7087+
"value": "rgba(0, 0, 0, 0.08)"
7088+
}
7089+
},
7090+
"drop-shadow-transition-color": {
7091+
"prop": "--spectrum-drop-shadow-transition-color",
7092+
"light": {
7093+
"value": "rgba(0, 0, 0, 0.04)"
7094+
},
7095+
"dark": {
7096+
"value": "rgba(0, 0, 0, 0.12)"
7097+
},
7098+
"wireframe": {
7099+
"value": "rgba(0, 0, 0, 0.04)"
7100+
}
7101+
},
70187102
"drop-shadow-x": {
70197103
"prop": "--spectrum-drop-shadow-x",
70207104
"ref": "var(--spectrum-drop-shadow-x-100)",
@@ -8285,6 +8369,10 @@
82858369
"value": "rgb(93, 127, 201)"
82868370
}
82878371
},
8372+
"gradient-stop-1-avatar": {
8373+
"prop": "--spectrum-gradient-stop-1-avatar",
8374+
"value": "0"
8375+
},
82888376
"gradient-stop-1-genai": {
82898377
"prop": "--spectrum-gradient-stop-1-genai",
82908378
"value": "0"
@@ -8293,6 +8381,10 @@
82938381
"prop": "--spectrum-gradient-stop-1-premium",
82948382
"value": "0"
82958383
},
8384+
"gradient-stop-2-avatar": {
8385+
"prop": "--spectrum-gradient-stop-2-avatar",
8386+
"value": "0.6666"
8387+
},
82968388
"gradient-stop-2-genai": {
82978389
"prop": "--spectrum-gradient-stop-2-genai",
82988390
"value": "0.3333"
@@ -8301,6 +8393,10 @@
83018393
"prop": "--spectrum-gradient-stop-2-premium",
83028394
"value": "0.6666"
83038395
},
8396+
"gradient-stop-3-avatar": {
8397+
"prop": "--spectrum-gradient-stop-3-avatar",
8398+
"value": "1"
8399+
},
83048400
"gradient-stop-3-genai": {
83058401
"prop": "--spectrum-gradient-stop-3-genai",
83068402
"value": "1"
@@ -16406,18 +16502,78 @@
1640616502
"prop": "--spectrum-static-blue-900",
1640716503
"value": "rgb(59, 99, 251)"
1640816504
},
16505+
"static-chartreuse-400": {
16506+
"prop": "--spectrum-static-chartreuse-400",
16507+
"value": "rgb(182, 219, 0)"
16508+
},
16509+
"static-chartreuse-600": {
16510+
"prop": "--spectrum-static-chartreuse-600",
16511+
"value": "rgb(143, 172, 0)"
16512+
},
16513+
"static-chartreuse-800": {
16514+
"prop": "--spectrum-static-chartreuse-800",
16515+
"value": "rgb(114, 137, 0)"
16516+
},
16517+
"static-cyan-400": {
16518+
"prop": "--spectrum-static-cyan-400",
16519+
"value": "rgb(138, 213, 255)"
16520+
},
16521+
"static-cyan-600": {
16522+
"prop": "--spectrum-static-cyan-600",
16523+
"value": "rgb(48, 167, 254)"
16524+
},
16525+
"static-cyan-800": {
16526+
"prop": "--spectrum-static-cyan-800",
16527+
"value": "rgb(18, 134, 205)"
16528+
},
1640916529
"static-fuchsia-1000": {
1641016530
"prop": "--spectrum-static-fuchsia-1000",
1641116531
"value": "rgb(156, 40, 175)"
1641216532
},
16533+
"static-fuchsia-400": {
16534+
"prop": "--spectrum-static-fuchsia-400",
16535+
"value": "rgb(247, 181, 255)"
16536+
},
16537+
"static-fuchsia-600": {
16538+
"prop": "--spectrum-static-fuchsia-600",
16539+
"value": "rgb(236, 105, 255)"
16540+
},
16541+
"static-fuchsia-800": {
16542+
"prop": "--spectrum-static-fuchsia-800",
16543+
"value": "rgb(200, 68, 220)"
16544+
},
1641316545
"static-fuchsia-900": {
1641416546
"prop": "--spectrum-static-fuchsia-900",
1641516547
"value": "rgb(181, 57, 200)"
1641616548
},
16549+
"static-green-400": {
16550+
"prop": "--spectrum-static-green-400",
16551+
"value": "rgb(107, 227, 162)"
16552+
},
16553+
"static-green-600": {
16554+
"prop": "--spectrum-static-green-600",
16555+
"value": "rgb(18, 184, 103)"
16556+
},
16557+
"static-green-800": {
16558+
"prop": "--spectrum-static-green-800",
16559+
"value": "rgb(7, 147, 85)"
16560+
},
1641716561
"static-indigo-1000": {
1641816562
"prop": "--spectrum-static-indigo-1000",
1641916563
"value": "rgb(99, 56, 238)"
1642016564
},
16565+
"static-indigo-400": {
16566+
"prop": "--spectrum-static-indigo-400",
16567+
"value": "rgb(192, 201, 255)"
16568+
},
16569+
"static-indigo-600": {
16570+
"prop": "--spectrum-static-indigo-600",
16571+
"value": "rgb(145, 151, 254)"
16572+
},
16573+
"static-indigo-800": {
16574+
"prop": "--spectrum-static-indigo-800",
16575+
"value": "rgb(122, 106, 253)"
16576+
},
1642116577
"static-indigo-900": {
1642216578
"prop": "--spectrum-static-indigo-900",
1642316579
"value": "rgb(113, 85, 250)"
@@ -16426,18 +16582,78 @@
1642616582
"prop": "--spectrum-static-magenta-1000",
1642716583
"value": "rgb(186, 22, 80)"
1642816584
},
16585+
"static-magenta-400": {
16586+
"prop": "--spectrum-static-magenta-400",
16587+
"value": "rgb(255, 185, 208)"
16588+
},
16589+
"static-magenta-600": {
16590+
"prop": "--spectrum-static-magenta-600",
16591+
"value": "rgb(255, 112, 159)"
16592+
},
16593+
"static-magenta-800": {
16594+
"prop": "--spectrum-static-magenta-800",
16595+
"value": "rgb(240, 45, 110)"
16596+
},
1642916597
"static-magenta-900": {
1643016598
"prop": "--spectrum-static-magenta-900",
1643116599
"value": "rgb(217, 35, 97)"
1643216600
},
16601+
"static-orange-400": {
16602+
"prop": "--spectrum-static-orange-400",
16603+
"value": "rgb(255, 193, 94)"
16604+
},
16605+
"static-orange-600": {
16606+
"prop": "--spectrum-static-orange-600",
16607+
"value": "rgb(252, 125, 0)"
16608+
},
16609+
"static-orange-800": {
16610+
"prop": "--spectrum-static-orange-800",
16611+
"value": "rgb(212, 91, 0)"
16612+
},
16613+
"static-purple-400": {
16614+
"prop": "--spectrum-static-purple-400",
16615+
"value": "rgb(221, 193, 246)"
16616+
},
16617+
"static-purple-600": {
16618+
"prop": "--spectrum-static-purple-600",
16619+
"value": "rgb(191, 138, 238)"
16620+
},
16621+
"static-purple-800": {
16622+
"prop": "--spectrum-static-purple-800",
16623+
"value": "rgb(166, 92, 231)"
16624+
},
1643316625
"static-red-1000": {
1643416626
"prop": "--spectrum-static-red-1000",
1643516627
"value": "rgb(183, 40, 24)"
1643616628
},
16629+
"static-red-400": {
16630+
"prop": "--spectrum-static-red-400",
16631+
"value": "rgb(255, 188, 180)"
16632+
},
16633+
"static-red-600": {
16634+
"prop": "--spectrum-static-red-600",
16635+
"value": "rgb(255, 118, 101)"
16636+
},
16637+
"static-red-800": {
16638+
"prop": "--spectrum-static-red-800",
16639+
"value": "rgb(240, 56, 35)"
16640+
},
1643716641
"static-red-900": {
1643816642
"prop": "--spectrum-static-red-900",
1643916643
"value": "rgb(215, 50, 32)"
1644016644
},
16645+
"static-turquoise-400": {
16646+
"prop": "--spectrum-static-turquoise-400",
16647+
"value": "rgb(111, 221, 228)"
16648+
},
16649+
"static-turquoise-600": {
16650+
"prop": "--spectrum-static-turquoise-600",
16651+
"value": "rgb(15, 177, 192)"
16652+
},
16653+
"static-turquoise-800": {
16654+
"prop": "--spectrum-static-turquoise-800",
16655+
"value": "rgb(10, 141, 153)"
16656+
},
1644116657
"static-white-focus-indicator-color": {
1644216658
"prop": "--spectrum-static-white-focus-indicator-color",
1644316659
"ref": "var(--spectrum-white)",

0 commit comments

Comments
 (0)