@adobe/spectrum-tokens 13.0.0-beta.23 → 13.0.0-beta.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +136 -0
- package/dist/json/drover.json +54 -12
- package/dist/json/variables.json +403 -96
- package/package.json +1 -1
- package/src/color-aliases.json +59 -19
- package/src/color-component.json +8 -6
- package/src/layout-component.json +256 -58
- package/src/layout.json +116 -90
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,141 @@
|
|
|
1
1
|
# @adobe/spectrum-tokens
|
|
2
2
|
|
|
3
|
+
## 13.0.0-beta.25
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- e79ddd6: S2 Combo box, In-field button and In-field progress circle updates
|
|
8
|
+
|
|
9
|
+
## Motivation and context
|
|
10
|
+
|
|
11
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
12
|
+
|
|
13
|
+
## Token Diff
|
|
14
|
+
|
|
15
|
+
_Tokens added (15):_
|
|
16
|
+
|
|
17
|
+
- `combo-box-visual-to-field-button`
|
|
18
|
+
- `combo-box-visual-to-field-button-extra-large`
|
|
19
|
+
- `combo-box-visual-to-field-button-large`
|
|
20
|
+
- `combo-box-visual-to-field-button-medium`
|
|
21
|
+
- `combo-box-visual-to-field-button-quiet`
|
|
22
|
+
- `combo-box-visual-to-field-button-small`
|
|
23
|
+
- `in-field-button-edge-to-fill-extra-large`
|
|
24
|
+
- `in-field-button-edge-to-fill-large`
|
|
25
|
+
- `in-field-button-edge-to-fill-medium`
|
|
26
|
+
- `in-field-button-edge-to-fill-small`
|
|
27
|
+
- `in-field-progress-circle-edge-to-fill`
|
|
28
|
+
- `in-field-progress-circle-size-100`
|
|
29
|
+
- `in-field-progress-circle-size-200`
|
|
30
|
+
- `in-field-progress-circle-size-300`
|
|
31
|
+
- `in-field-progress-circle-size-75`
|
|
32
|
+
|
|
33
|
+
_Newly deprecated tokens (6):_
|
|
34
|
+
|
|
35
|
+
- `combo-box-quiet-minimum-width-multiplier`
|
|
36
|
+
- `combo-box-visual-to-field-button-small`
|
|
37
|
+
- `combo-box-visual-to-field-button-medium`
|
|
38
|
+
- `combo-box-visual-to-field-button-large`
|
|
39
|
+
- `combo-box-visual-to-field-button-extra-large`
|
|
40
|
+
- `in-field-button-edge-to-fill`
|
|
41
|
+
|
|
42
|
+
- e79ddd6: S2 Color loupe tokens update
|
|
43
|
+
|
|
44
|
+
## Design Motivation
|
|
45
|
+
|
|
46
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
47
|
+
|
|
48
|
+
## Token Diff
|
|
49
|
+
|
|
50
|
+
_Newly deprecated tokens (2):_
|
|
51
|
+
|
|
52
|
+
- `color-loupe-drop-shadow-blur`
|
|
53
|
+
- `color-loupe-drop-shadow-y`
|
|
54
|
+
|
|
55
|
+
## 13.0.0-beta.24
|
|
56
|
+
|
|
57
|
+
### Major Changes
|
|
58
|
+
|
|
59
|
+
- 1c8f7ab: Renamed previous drop shadow tokens from S1 and pointed them to the new `100` S2 drop shadow tokens
|
|
60
|
+
Added new drop shadow tokens, `100`, `200`, `emphasized-default`, `emphasized-hover`, `elevated`.
|
|
61
|
+
|
|
62
|
+
## Design Motivation
|
|
63
|
+
|
|
64
|
+
These tokens reflect the updates to drop tokens foundations in Spectrum 2, allowing more options and flexibility of usage in containers
|
|
65
|
+
|
|
66
|
+
## Token Diff
|
|
67
|
+
|
|
68
|
+
_Tokens added (24):_
|
|
69
|
+
|
|
70
|
+
- `drop-shadow-blur`
|
|
71
|
+
- `drop-shadow-blur-100`
|
|
72
|
+
- `drop-shadow-blur-200`
|
|
73
|
+
- `drop-shadow-color`
|
|
74
|
+
- `drop-shadow-color-100`
|
|
75
|
+
- `drop-shadow-color-200`
|
|
76
|
+
- `drop-shadow-elevated-blur`
|
|
77
|
+
- `drop-shadow-elevated-color`
|
|
78
|
+
- `drop-shadow-elevated-x`
|
|
79
|
+
- `drop-shadow-elevated-y`
|
|
80
|
+
- `drop-shadow-emphasized-default-blur`
|
|
81
|
+
- `drop-shadow-emphasized-default-color`
|
|
82
|
+
- `drop-shadow-emphasized-default-x`
|
|
83
|
+
- `drop-shadow-emphasized-default-y`
|
|
84
|
+
- `drop-shadow-emphasized-hover-blur`
|
|
85
|
+
- `drop-shadow-emphasized-hover-color`
|
|
86
|
+
- `drop-shadow-emphasized-hover-x`
|
|
87
|
+
- `drop-shadow-emphasized-hover-y`
|
|
88
|
+
- `drop-shadow-x`
|
|
89
|
+
- `drop-shadow-x-100`
|
|
90
|
+
- `drop-shadow-x-200`
|
|
91
|
+
- `drop-shadow-y`
|
|
92
|
+
- `drop-shadow-y-100`
|
|
93
|
+
- `drop-shadow-y-200`
|
|
94
|
+
|
|
95
|
+
_Tokens deleted (2):_
|
|
96
|
+
|
|
97
|
+
- `drop-shadow-blur`
|
|
98
|
+
- `drop-shadow-y`
|
|
99
|
+
|
|
100
|
+
_Token values updated (2):_
|
|
101
|
+
|
|
102
|
+
- `color-handle-drop-shadow-color`
|
|
103
|
+
- `drop-shadow-color`
|
|
104
|
+
|
|
105
|
+
### Minor Changes
|
|
106
|
+
|
|
107
|
+
- 3230aba: Updated and added S2 drop shadow tokens
|
|
108
|
+
|
|
109
|
+
## Design Motivation
|
|
110
|
+
|
|
111
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
112
|
+
|
|
113
|
+
## Token Diff
|
|
114
|
+
|
|
115
|
+
_Tokens added (7):_
|
|
116
|
+
|
|
117
|
+
- `field-default-width-extra-large`
|
|
118
|
+
- `field-default-width-large`
|
|
119
|
+
- `field-default-width-medium`
|
|
120
|
+
- `field-default-width-small`
|
|
121
|
+
- `tag-minimum-width-large`
|
|
122
|
+
- `tag-minimum-width-medium`
|
|
123
|
+
- `tag-minimum-width-small`
|
|
124
|
+
|
|
125
|
+
_Token values updated (4):_
|
|
126
|
+
|
|
127
|
+
- `field-top-to-progress-circle-extra-large`
|
|
128
|
+
- `field-top-to-progress-circle-large`
|
|
129
|
+
- `field-top-to-progress-circle-medium`
|
|
130
|
+
- `field-top-to-progress-circle-small`
|
|
131
|
+
|
|
132
|
+
_Newly Deprecated Tokens (4):_
|
|
133
|
+
|
|
134
|
+
- `field-width-extra-large`
|
|
135
|
+
- `field-width-large`
|
|
136
|
+
- `field-width-medium`
|
|
137
|
+
- `field-width-small`
|
|
138
|
+
|
|
3
139
|
## 13.0.0-beta.23
|
|
4
140
|
|
|
5
141
|
### Patch Changes
|
package/dist/json/drover.json
CHANGED
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
"coach-mark-pagination-color": "rgb(113, 113, 113)",
|
|
140
140
|
"code-color": "rgb(41, 41, 41)",
|
|
141
141
|
"color-area-border-color": "rgb(0, 0, 0)",
|
|
142
|
-
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.
|
|
142
|
+
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.12)",
|
|
143
143
|
"color-handle-inner-border-color": "rgb(0, 0, 0)",
|
|
144
144
|
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
145
145
|
"color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
@@ -174,7 +174,12 @@
|
|
|
174
174
|
"disabled-static-white-background-color": "rgba(255, 255, 255, 0.11)",
|
|
175
175
|
"disabled-static-white-border-color": "rgba(255, 255, 255, 0.17)",
|
|
176
176
|
"disabled-static-white-content-color": "rgba(255, 255, 255, 0.21)",
|
|
177
|
-
"drop-shadow-color": "rgba(0, 0, 0, 0.
|
|
177
|
+
"drop-shadow-color": "rgba(0, 0, 0, 0.12)",
|
|
178
|
+
"drop-shadow-color-100": "rgba(0, 0, 0, 0.12)",
|
|
179
|
+
"drop-shadow-color-200": "rgba(0, 0, 0, 0.16)",
|
|
180
|
+
"drop-shadow-elevated-color": "rgba(0, 0, 0, 0.16)",
|
|
181
|
+
"drop-shadow-emphasized-default-color": "rgba(0, 0, 0, 0.12)",
|
|
182
|
+
"drop-shadow-emphasized-hover-color": "rgba(0, 0, 0, 0.16)",
|
|
178
183
|
"drop-zone-background-color": "rgb(75, 117, 255)",
|
|
179
184
|
"floating-action-button-drop-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
180
185
|
"floating-action-button-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
@@ -705,7 +710,7 @@
|
|
|
705
710
|
"coach-mark-pagination-color": "rgb(138, 138, 138)",
|
|
706
711
|
"code-color": "rgb(219, 219, 219)",
|
|
707
712
|
"color-area-border-color": "rgb(255, 255, 255)",
|
|
708
|
-
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.
|
|
713
|
+
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.36)",
|
|
709
714
|
"color-handle-inner-border-color": "rgb(0, 0, 0)",
|
|
710
715
|
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
711
716
|
"color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
@@ -740,7 +745,12 @@
|
|
|
740
745
|
"disabled-static-white-background-color": "rgba(255, 255, 255, 0.11)",
|
|
741
746
|
"disabled-static-white-border-color": "rgba(255, 255, 255, 0.17)",
|
|
742
747
|
"disabled-static-white-content-color": "rgba(255, 255, 255, 0.21)",
|
|
743
|
-
"drop-shadow-color": "rgba(0, 0, 0, 0.
|
|
748
|
+
"drop-shadow-color": "rgba(0, 0, 0, 0.36)",
|
|
749
|
+
"drop-shadow-color-100": "rgba(0, 0, 0, 0.36)",
|
|
750
|
+
"drop-shadow-color-200": "rgba(0, 0, 0, 0.48)",
|
|
751
|
+
"drop-shadow-elevated-color": "rgba(0, 0, 0, 0.48)",
|
|
752
|
+
"drop-shadow-emphasized-default-color": "rgba(0, 0, 0, 0.36)",
|
|
753
|
+
"drop-shadow-emphasized-hover-color": "rgba(0, 0, 0, 0.48)",
|
|
744
754
|
"drop-zone-background-color": "rgb(86, 129, 255)",
|
|
745
755
|
"floating-action-button-drop-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
746
756
|
"floating-action-button-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
@@ -1389,11 +1399,12 @@
|
|
|
1389
1399
|
"color-wheel-minimum-width": "175px",
|
|
1390
1400
|
"color-wheel-width": "192px",
|
|
1391
1401
|
"combo-box-minimum-width-multiplier": "2.5",
|
|
1392
|
-
"combo-box-visual-to-field-button
|
|
1393
|
-
"combo-box-visual-to-field-button-large": "
|
|
1394
|
-
"combo-box-visual-to-field-button-
|
|
1402
|
+
"combo-box-visual-to-field-button": "0px",
|
|
1403
|
+
"combo-box-visual-to-field-button-extra-large": "0px",
|
|
1404
|
+
"combo-box-visual-to-field-button-large": "0px",
|
|
1405
|
+
"combo-box-visual-to-field-button-medium": "0px",
|
|
1395
1406
|
"combo-box-visual-to-field-button-quiet": "0px",
|
|
1396
|
-
"combo-box-visual-to-field-button-small": "
|
|
1407
|
+
"combo-box-visual-to-field-button-small": "0px",
|
|
1397
1408
|
"component-bottom-to-text-100": "9px",
|
|
1398
1409
|
"component-bottom-to-text-200": "11px",
|
|
1399
1410
|
"component-bottom-to-text-300": "14px",
|
|
@@ -1516,9 +1527,24 @@
|
|
|
1516
1527
|
"divider-thickness-medium": "2px",
|
|
1517
1528
|
"divider-thickness-small": "1px",
|
|
1518
1529
|
"divider-vertical-minimum-height": "200px",
|
|
1519
|
-
"drop-shadow-blur": "
|
|
1530
|
+
"drop-shadow-blur": "6px",
|
|
1531
|
+
"drop-shadow-blur-100": "6px",
|
|
1532
|
+
"drop-shadow-blur-200": "8px",
|
|
1533
|
+
"drop-shadow-elevated-blur": "8px",
|
|
1534
|
+
"drop-shadow-elevated-x": "0px",
|
|
1535
|
+
"drop-shadow-elevated-y": "2px",
|
|
1536
|
+
"drop-shadow-emphasized-default-blur": "6px",
|
|
1537
|
+
"drop-shadow-emphasized-default-x": "0px",
|
|
1538
|
+
"drop-shadow-emphasized-default-y": "1px",
|
|
1539
|
+
"drop-shadow-emphasized-hover-blur": "8px",
|
|
1540
|
+
"drop-shadow-emphasized-hover-x": "0px",
|
|
1541
|
+
"drop-shadow-emphasized-hover-y": "2px",
|
|
1520
1542
|
"drop-shadow-x": "0px",
|
|
1543
|
+
"drop-shadow-x-100": "0px",
|
|
1544
|
+
"drop-shadow-x-200": "0px",
|
|
1521
1545
|
"drop-shadow-y": "1px",
|
|
1546
|
+
"drop-shadow-y-100": "1px",
|
|
1547
|
+
"drop-shadow-y-200": "2px",
|
|
1522
1548
|
"drop-zone-background-color-opacity": "0.1",
|
|
1523
1549
|
"drop-zone-background-color-opacity-filled": "0.3",
|
|
1524
1550
|
"drop-zone-body-size": "14px",
|
|
@@ -1528,6 +1554,10 @@
|
|
|
1528
1554
|
"drop-zone-content-maximum-width": "380px",
|
|
1529
1555
|
"drop-zone-title-size": "22px",
|
|
1530
1556
|
"drop-zone-width": "428px",
|
|
1557
|
+
"field-default-width-extra-large": "240px",
|
|
1558
|
+
"field-default-width-large": "224px",
|
|
1559
|
+
"field-default-width-medium": "208px",
|
|
1560
|
+
"field-default-width-small": "192px",
|
|
1531
1561
|
"field-edge-to-alert-icon-extra-large": "18px",
|
|
1532
1562
|
"field-edge-to-alert-icon-large": "15px",
|
|
1533
1563
|
"field-edge-to-alert-icon-medium": "12px",
|
|
@@ -1582,9 +1612,9 @@
|
|
|
1582
1612
|
"field-top-to-disclosure-icon-200": "14px",
|
|
1583
1613
|
"field-top-to-disclosure-icon-300": "17px",
|
|
1584
1614
|
"field-top-to-disclosure-icon-75": "7px",
|
|
1585
|
-
"field-top-to-progress-circle-extra-large": "
|
|
1586
|
-
"field-top-to-progress-circle-large": "
|
|
1587
|
-
"field-top-to-progress-circle-medium": "
|
|
1615
|
+
"field-top-to-progress-circle-extra-large": "11px",
|
|
1616
|
+
"field-top-to-progress-circle-large": "9px",
|
|
1617
|
+
"field-top-to-progress-circle-medium": "6px",
|
|
1588
1618
|
"field-top-to-progress-circle-small": "4px",
|
|
1589
1619
|
"field-top-to-validation-icon-extra-large": "17px",
|
|
1590
1620
|
"field-top-to-validation-icon-large": "14px",
|
|
@@ -1648,6 +1678,10 @@
|
|
|
1648
1678
|
"in-field-button-edge-to-disclosure-icon-stacked-medium": "9px",
|
|
1649
1679
|
"in-field-button-edge-to-disclosure-icon-stacked-small": "7px",
|
|
1650
1680
|
"in-field-button-edge-to-fill": "0px",
|
|
1681
|
+
"in-field-button-edge-to-fill-extra-large": "8px",
|
|
1682
|
+
"in-field-button-edge-to-fill-large": "8px",
|
|
1683
|
+
"in-field-button-edge-to-fill-medium": "6px",
|
|
1684
|
+
"in-field-button-edge-to-fill-small": "4px",
|
|
1651
1685
|
"in-field-button-fill-stacked-inner-border-rounding": "0px",
|
|
1652
1686
|
"in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": "5px",
|
|
1653
1687
|
"in-field-button-inner-edge-to-disclosure-icon-stacked-large": "4px",
|
|
@@ -1662,6 +1696,11 @@
|
|
|
1662
1696
|
"in-field-button-width-stacked-large": "36px",
|
|
1663
1697
|
"in-field-button-width-stacked-medium": "28px",
|
|
1664
1698
|
"in-field-button-width-stacked-small": "20px",
|
|
1699
|
+
"in-field-progress-circle-edge-to-fill": "1px",
|
|
1700
|
+
"in-field-progress-circle-size-100": "20px",
|
|
1701
|
+
"in-field-progress-circle-size-200": "22px",
|
|
1702
|
+
"in-field-progress-circle-size-300": "26px",
|
|
1703
|
+
"in-field-progress-circle-size-75": "16px",
|
|
1665
1704
|
"in-line-alert-minimum-width": "240px",
|
|
1666
1705
|
"line-height-100": "1.3",
|
|
1667
1706
|
"line-height-200": "1.5",
|
|
@@ -1954,6 +1993,9 @@
|
|
|
1954
1993
|
"tag-label-to-clear-icon-large": "15px",
|
|
1955
1994
|
"tag-label-to-clear-icon-medium": "12px",
|
|
1956
1995
|
"tag-label-to-clear-icon-small": "8px",
|
|
1996
|
+
"tag-minimum-width-large": "33px",
|
|
1997
|
+
"tag-minimum-width-medium": "27px",
|
|
1998
|
+
"tag-minimum-width-small": "21px",
|
|
1957
1999
|
"tag-top-to-avatar-large": "9px",
|
|
1958
2000
|
"tag-top-to-avatar-medium": "6px",
|
|
1959
2001
|
"tag-top-to-avatar-small": "4px",
|