@spectrum-web-components/styles 0.22.2 → 0.22.3-react.48

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.
Files changed (14) hide show
  1. package/package.json +8 -8
  2. package/tokens/dark-vars.css +38 -34
  3. package/tokens/darkest-vars.css +38 -34
  4. package/tokens/express/global-vars.css +24 -6
  5. package/tokens/express/large-vars.css +8 -8
  6. package/tokens/express/medium-vars.css +8 -8
  7. package/tokens/global-vars.css +550 -204
  8. package/tokens/large-vars.css +158 -107
  9. package/tokens/light-vars.css +38 -34
  10. package/tokens/medium-vars.css +156 -105
  11. package/tokens/spectrum/custom-vars.css +44 -23
  12. package/tokens/spectrum/global-vars.css +22 -6
  13. package/tokens/spectrum/large-vars.css +8 -16
  14. package/tokens/spectrum/medium-vars.css +8 -16
package/tokens/medium-vars.css CHANGED
@@ -12,64 +12,6 @@ governing permissions and limitations under the License.
12
12
 
13
13
  :host,
14
14
  :root {
15
- --spectrum-component-pill-edge-to-visual-75: 10px;
16
- --spectrum-component-pill-edge-to-visual-100: 14px;
17
- --spectrum-component-pill-edge-to-visual-200: 18px;
18
- --spectrum-component-pill-edge-to-visual-300: 21px;
19
- --spectrum-component-pill-edge-to-visual-only-75: 4px;
20
- --spectrum-component-pill-edge-to-visual-only-100: 7px;
21
- --spectrum-component-pill-edge-to-visual-only-200: 10px;
22
- --spectrum-component-pill-edge-to-visual-only-300: 13px;
23
- --spectrum-component-pill-edge-to-text-75: 12px;
24
- --spectrum-component-pill-edge-to-text-100: 16px;
25
- --spectrum-component-pill-edge-to-text-200: 20px;
26
- --spectrum-component-pill-edge-to-text-300: 24px;
27
- --spectrum-component-edge-to-visual-50: 6px;
28
- --spectrum-component-edge-to-visual-75: 7px;
29
- --spectrum-component-edge-to-visual-100: 10px;
30
- --spectrum-component-edge-to-visual-200: 13px;
31
- --spectrum-component-edge-to-visual-300: 15px;
32
- --spectrum-component-edge-to-visual-only-50: 3px;
33
- --spectrum-component-edge-to-visual-only-75: 4px;
34
- --spectrum-component-edge-to-visual-only-100: 7px;
35
- --spectrum-component-edge-to-visual-only-200: 10px;
36
- --spectrum-component-edge-to-visual-only-300: 13px;
37
- --spectrum-component-edge-to-text-50: 8px;
38
- --spectrum-component-edge-to-text-75: 9px;
39
- --spectrum-component-edge-to-text-100: 12px;
40
- --spectrum-component-edge-to-text-200: 15px;
41
- --spectrum-component-edge-to-text-300: 18px;
42
- --spectrum-component-height-50: 20px;
43
- --spectrum-component-height-75: 24px;
44
- --spectrum-component-height-100: 32px;
45
- --spectrum-component-height-200: 40px;
46
- --spectrum-component-height-300: 48px;
47
- --spectrum-component-top-to-workflow-icon-50: 3px;
48
- --spectrum-component-top-to-workflow-icon-75: 4px;
49
- --spectrum-component-top-to-workflow-icon-100: 7px;
50
- --spectrum-component-top-to-workflow-icon-200: 10px;
51
- --spectrum-component-top-to-workflow-icon-300: 13px;
52
- --spectrum-component-top-to-text-50: 3px;
53
- --spectrum-component-top-to-text-75: 4px;
54
- --spectrum-component-top-to-text-100: 6px;
55
- --spectrum-component-top-to-text-200: 9px;
56
- --spectrum-component-top-to-text-300: 12px;
57
- --spectrum-component-bottom-to-text-50: 3px;
58
- --spectrum-component-bottom-to-text-75: 5px;
59
- --spectrum-component-bottom-to-text-100: 9px;
60
- --spectrum-component-bottom-to-text-200: 11px;
61
- --spectrum-component-bottom-to-text-300: 14px;
62
- --spectrum-component-to-menu-small: 6px;
63
- --spectrum-component-to-menu-medium: 6px;
64
- --spectrum-component-to-menu-large: 7px;
65
- --spectrum-component-to-menu-extra-large: 8px;
66
- --spectrum-action-bar-height: 48px;
67
- --spectrum-action-bar-top-to-item-counter: 14px;
68
- --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
69
- --spectrum-action-button-edge-to-hold-icon-small: 3px;
70
- --spectrum-action-button-edge-to-hold-icon-medium: 4px;
71
- --spectrum-action-button-edge-to-hold-icon-large: 5px;
72
- --spectrum-action-button-edge-to-hold-icon-extra-large: 6px;
73
15
  --spectrum-field-label-text-to-asterisk-small: 4px;
74
16
  --spectrum-field-label-text-to-asterisk-medium: 4px;
75
17
  --spectrum-field-label-text-to-asterisk-large: 5px;
@@ -90,32 +32,6 @@ governing permissions and limitations under the License.
90
32
  --spectrum-help-text-top-to-workflow-icon-medium: 3px;
91
33
  --spectrum-help-text-top-to-workflow-icon-large: 6px;
92
34
  --spectrum-help-text-top-to-workflow-icon-extra-large: 9px;
93
- --spectrum-in-line-alert-minimum-width: 320px;
94
- --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
95
- --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
96
- --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
97
- --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
98
- --spectrum-menu-item-top-to-disclosure-icon-small: 7px;
99
- --spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
100
- --spectrum-menu-item-top-to-disclosure-icon-large: 14px;
101
- --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
102
- --spectrum-meter-default-width: 192px;
103
- --spectrum-meter-thickness-small: 4px;
104
- --spectrum-meter-thickness-medium: 6px;
105
- --spectrum-swatch-size-extra-small: 16px;
106
- --spectrum-swatch-size-small: 24px;
107
- --spectrum-swatch-size-medium: 32px;
108
- --spectrum-swatch-size-large: 40px;
109
- --spectrum-progress-bar-thickness-small: 4px;
110
- --spectrum-progress-bar-thickness-medium: 6px;
111
- --spectrum-progress-bar-thickness-large: 8px;
112
- --spectrum-progress-bar-thickness-extra-large: 10px;
113
- --spectrum-progress-circle-size-small: 16px;
114
- --spectrum-progress-circle-size-medium: 32px;
115
- --spectrum-progress-circle-size-large: 64px;
116
- --spectrum-progress-circle-thickness-small: 2px;
117
- --spectrum-progress-circle-thickness-medium: 3px;
118
- --spectrum-progress-circle-thickness-large: 4px;
119
35
  --spectrum-status-light-dot-size-small: 8px;
120
36
  --spectrum-status-light-dot-size-medium: 8px;
121
37
  --spectrum-status-light-dot-size-large: 10px;
@@ -124,19 +40,63 @@ governing permissions and limitations under the License.
124
40
  --spectrum-status-light-top-to-dot-medium: 12px;
125
41
  --spectrum-status-light-top-to-dot-large: 15px;
126
42
  --spectrum-status-light-top-to-dot-extra-large: 19px;
43
+ --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
44
+ --spectrum-action-button-edge-to-hold-icon-small: 3px;
45
+ --spectrum-action-button-edge-to-hold-icon-medium: 4px;
46
+ --spectrum-action-button-edge-to-hold-icon-large: 5px;
47
+ --spectrum-action-button-edge-to-hold-icon-extra-large: 6px;
48
+ --spectrum-tooltip-tip-width: 8px;
49
+ --spectrum-tooltip-tip-height: 4px;
50
+ --spectrum-tooltip-maximum-width: 160px;
51
+ --spectrum-progress-circle-size-small: 16px;
52
+ --spectrum-progress-circle-size-medium: 32px;
53
+ --spectrum-progress-circle-size-large: 64px;
54
+ --spectrum-progress-circle-thickness-small: 2px;
55
+ --spectrum-progress-circle-thickness-medium: 3px;
56
+ --spectrum-progress-circle-thickness-large: 4px;
127
57
  --spectrum-toast-height: 48px;
58
+ --spectrum-toast-maximum-width: 336px;
128
59
  --spectrum-toast-top-to-workflow-icon: 15px;
129
60
  --spectrum-toast-top-to-text: 14px;
130
61
  --spectrum-toast-bottom-to-text: 17px;
131
- --spectrum-tooltip-tip-width: 8px;
132
- --spectrum-tooltip-tip-height: 4px;
133
- --spectrum-tooltip-maximum-width: 160px;
62
+ --spectrum-action-bar-height: 48px;
63
+ --spectrum-action-bar-top-to-item-counter: 14px;
64
+ --spectrum-swatch-size-extra-small: 16px;
65
+ --spectrum-swatch-size-small: 24px;
66
+ --spectrum-swatch-size-medium: 32px;
67
+ --spectrum-swatch-size-large: 40px;
68
+ --spectrum-progress-bar-thickness-small: 4px;
69
+ --spectrum-progress-bar-thickness-medium: 6px;
70
+ --spectrum-progress-bar-thickness-large: 8px;
71
+ --spectrum-progress-bar-thickness-extra-large: 10px;
72
+ --spectrum-meter-default-width: 192px;
73
+ --spectrum-meter-thickness-small: 4px;
74
+ --spectrum-meter-thickness-large: 6px;
134
75
  --spectrum-tag-top-to-avatar-small: 4px;
135
76
  --spectrum-tag-top-to-avatar-medium: 6px;
136
77
  --spectrum-tag-top-to-avatar-large: 9px;
137
78
  --spectrum-tag-top-to-cross-icon-small: 8px;
138
79
  --spectrum-tag-top-to-cross-icon-medium: 12px;
139
80
  --spectrum-tag-top-to-cross-icon-large: 15px;
81
+ --spectrum-popover-top-to-content-area: 4px;
82
+ --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
83
+ --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
84
+ --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
85
+ --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
86
+ --spectrum-menu-item-top-to-disclosure-icon-small: 7px;
87
+ --spectrum-menu-item-top-to-disclosure-icon-medium: 11px;
88
+ --spectrum-menu-item-top-to-disclosure-icon-large: 14px;
89
+ --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px;
90
+ --spectrum-picker-visual-to-disclosure-icon-small: 7px;
91
+ --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
92
+ --spectrum-picker-visual-to-disclosure-icon-large: 9px;
93
+ --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
94
+ --spectrum-text-area-minimum-width: 112px;
95
+ --spectrum-text-area-minimum-height: 56px;
96
+ --spectrum-combo-box-visual-to-field-button-small: 7px;
97
+ --spectrum-combo-box-visual-to-field-button-medium: 8px;
98
+ --spectrum-combo-box-visual-to-field-button-large: 9px;
99
+ --spectrum-combo-box-visual-to-field-button-extra-large: 10px;
140
100
  --spectrum-thumbnail-size-50: 16px;
141
101
  --spectrum-thumbnail-size-75: 18px;
142
102
  --spectrum-thumbnail-size-100: 20px;
@@ -149,24 +109,44 @@ governing permissions and limitations under the License.
149
109
  --spectrum-thumbnail-size-800: 44px;
150
110
  --spectrum-thumbnail-size-900: 50px;
151
111
  --spectrum-thumbnail-size-1000: 56px;
152
- --spectrum-popover-top-to-content-area: 4px;
153
- --spectrum-text-area-minimum-width: 112px;
154
- --spectrum-text-area-minimum-height: 56px;
155
- --spectrum-font-size-50: 11px;
156
- --spectrum-font-size-75: 12px;
157
- --spectrum-font-size-100: 14px;
158
- --spectrum-font-size-200: 16px;
159
- --spectrum-font-size-300: 18px;
160
- --spectrum-font-size-400: 20px;
161
- --spectrum-font-size-500: 22px;
162
- --spectrum-font-size-600: 25px;
163
- --spectrum-font-size-700: 28px;
164
- --spectrum-font-size-800: 32px;
165
- --spectrum-font-size-900: 36px;
166
- --spectrum-font-size-1000: 40px;
167
- --spectrum-font-size-1100: 45px;
168
- --spectrum-font-size-1200: 50px;
169
- --spectrum-font-size-1300: 60px;
112
+ --spectrum-opacity-checkerboard-square-size: 8px;
113
+ --spectrum-breadcrumbs-height-multiline: 72px;
114
+ --spectrum-breadcrumbs-top-to-text: 13px;
115
+ --spectrum-breadcrumbs-top-to-text-compact: 11px;
116
+ --spectrum-breadcrumbs-top-to-text-multiline: 12px;
117
+ --spectrum-breadcrumbs-bottom-to-text: 15px;
118
+ --spectrum-breadcrumbs-bottom-to-text-compact: 12px;
119
+ --spectrum-breadcrumbs-bottom-to-text-multiline: 9px;
120
+ --spectrum-breadcrumbs-start-edge-to-text: 8px;
121
+ --spectrum-breadcrumbs-top-text-to-bottom-text: 9px;
122
+ --spectrum-breadcrumbs-top-to-separator-icon: 19px;
123
+ --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px;
124
+ --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px;
125
+ --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px;
126
+ --spectrum-breadcrumbs-top-to-truncated-menu: 8px;
127
+ --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px;
128
+ --spectrum-avatar-size-50: 16px;
129
+ --spectrum-avatar-size-75: 18px;
130
+ --spectrum-avatar-size-100: 20px;
131
+ --spectrum-avatar-size-200: 22px;
132
+ --spectrum-avatar-size-300: 26px;
133
+ --spectrum-avatar-size-400: 28px;
134
+ --spectrum-avatar-size-500: 32px;
135
+ --spectrum-avatar-size-600: 36px;
136
+ --spectrum-avatar-size-700: 40px;
137
+ --spectrum-alert-banner-minimum-height: 48px;
138
+ --spectrum-alert-banner-width: 832px;
139
+ --spectrum-alert-banner-to-top-workflow-icon: 15px;
140
+ --spectrum-alert-banner-to-top-text: 14px;
141
+ --spectrum-alert-banner-to-bottom-text: 17px;
142
+ --spectrum-rating-indicator-width: 18px;
143
+ --spectrum-rating-indicator-to-icon: 4px;
144
+ --spectrum-color-area-width: 192px;
145
+ --spectrum-color-area-minimum-width: 64px;
146
+ --spectrum-color-area-height: 192px;
147
+ --spectrum-color-area-minimum-height: 64px;
148
+ --spectrum-color-wheel-minimum-width: 192px;
149
+ --spectrum-color-slider-length: 192px;
170
150
  --spectrum-workflow-icon-size-50: 14px;
171
151
  --spectrum-workflow-icon-size-75: 16px;
172
152
  --spectrum-workflow-icon-size-100: 18px;
@@ -181,6 +161,57 @@ governing permissions and limitations under the License.
181
161
  --spectrum-text-to-control-100: 10px;
182
162
  --spectrum-text-to-control-200: 11px;
183
163
  --spectrum-text-to-control-300: 13px;
164
+ --spectrum-component-height-50: 20px;
165
+ --spectrum-component-height-75: 24px;
166
+ --spectrum-component-height-100: 32px;
167
+ --spectrum-component-height-200: 40px;
168
+ --spectrum-component-height-300: 48px;
169
+ --spectrum-component-pill-edge-to-visual-75: 10px;
170
+ --spectrum-component-pill-edge-to-visual-100: 14px;
171
+ --spectrum-component-pill-edge-to-visual-200: 18px;
172
+ --spectrum-component-pill-edge-to-visual-300: 21px;
173
+ --spectrum-component-pill-edge-to-visual-only-75: 4px;
174
+ --spectrum-component-pill-edge-to-visual-only-100: 7px;
175
+ --spectrum-component-pill-edge-to-visual-only-200: 10px;
176
+ --spectrum-component-pill-edge-to-visual-only-300: 13px;
177
+ --spectrum-component-pill-edge-to-text-75: 12px;
178
+ --spectrum-component-pill-edge-to-text-100: 16px;
179
+ --spectrum-component-pill-edge-to-text-200: 20px;
180
+ --spectrum-component-pill-edge-to-text-300: 24px;
181
+ --spectrum-component-edge-to-visual-50: 6px;
182
+ --spectrum-component-edge-to-visual-75: 7px;
183
+ --spectrum-component-edge-to-visual-100: 10px;
184
+ --spectrum-component-edge-to-visual-200: 13px;
185
+ --spectrum-component-edge-to-visual-300: 15px;
186
+ --spectrum-component-edge-to-visual-only-50: 3px;
187
+ --spectrum-component-edge-to-visual-only-75: 4px;
188
+ --spectrum-component-edge-to-visual-only-100: 7px;
189
+ --spectrum-component-edge-to-visual-only-200: 10px;
190
+ --spectrum-component-edge-to-visual-only-300: 13px;
191
+ --spectrum-component-edge-to-text-50: 8px;
192
+ --spectrum-component-edge-to-text-75: 9px;
193
+ --spectrum-component-edge-to-text-100: 12px;
194
+ --spectrum-component-edge-to-text-200: 15px;
195
+ --spectrum-component-edge-to-text-300: 18px;
196
+ --spectrum-component-top-to-workflow-icon-50: 3px;
197
+ --spectrum-component-top-to-workflow-icon-75: 4px;
198
+ --spectrum-component-top-to-workflow-icon-100: 7px;
199
+ --spectrum-component-top-to-workflow-icon-200: 10px;
200
+ --spectrum-component-top-to-workflow-icon-300: 13px;
201
+ --spectrum-component-top-to-text-50: 3px;
202
+ --spectrum-component-top-to-text-75: 4px;
203
+ --spectrum-component-top-to-text-100: 6px;
204
+ --spectrum-component-top-to-text-200: 9px;
205
+ --spectrum-component-top-to-text-300: 12px;
206
+ --spectrum-component-bottom-to-text-50: 3px;
207
+ --spectrum-component-bottom-to-text-75: 5px;
208
+ --spectrum-component-bottom-to-text-100: 9px;
209
+ --spectrum-component-bottom-to-text-200: 11px;
210
+ --spectrum-component-bottom-to-text-300: 14px;
211
+ --spectrum-component-to-menu-small: 6px;
212
+ --spectrum-component-to-menu-medium: 6px;
213
+ --spectrum-component-to-menu-large: 7px;
214
+ --spectrum-component-to-menu-extra-large: 8px;
184
215
  --spectrum-field-edge-to-disclosure-icon-75: 7px;
185
216
  --spectrum-field-edge-to-disclosure-icon-100: 11px;
186
217
  --spectrum-field-edge-to-disclosure-icon-200: 14px;
@@ -226,4 +257,24 @@ governing permissions and limitations under the License.
226
257
  --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px;
227
258
  --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px;
228
259
  --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px;
260
+ --spectrum-navigational-indicator-top-to-back-icon-small: 7px;
261
+ --spectrum-navigational-indicator-top-to-back-icon-medium: 11px;
262
+ --spectrum-navigational-indicator-top-to-back-icon-large: 14px;
263
+ --spectrum-navigational-indicator-top-to-back-icon-extra-large: 17px;
264
+ --spectrum-color-control-track-width: 24px;
265
+ --spectrum-font-size-50: 11px;
266
+ --spectrum-font-size-75: 12px;
267
+ --spectrum-font-size-100: 14px;
268
+ --spectrum-font-size-200: 16px;
269
+ --spectrum-font-size-300: 18px;
270
+ --spectrum-font-size-400: 20px;
271
+ --spectrum-font-size-500: 22px;
272
+ --spectrum-font-size-600: 25px;
273
+ --spectrum-font-size-700: 28px;
274
+ --spectrum-font-size-800: 32px;
275
+ --spectrum-font-size-900: 36px;
276
+ --spectrum-font-size-1000: 40px;
277
+ --spectrum-font-size-1100: 45px;
278
+ --spectrum-font-size-1200: 50px;
279
+ --spectrum-font-size-1300: 60px;
229
280
  }
package/tokens/spectrum/custom-vars.css CHANGED
@@ -11,33 +11,54 @@ governing permissions and limitations under the License.
11
11
  */
12
12
 
13
13
  /* This file contains overrides and additions to core tokens */
14
- :host, :root {
15
- --system: spectrum;
14
+ :host,
15
+ :root {
16
+ --system: spectrum;
16
17
  }
17
18
 
18
- :host, :root {
19
- --spectrum-animation-duration-100: 130ms;
20
- --spectrum-animation-duration-200: 160ms;
19
+ :host,
20
+ :root {
21
+ --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
22
+ --spectrum-animation-duration-0: 0ms;
23
+ --spectrum-animation-duration-100: 130ms;
24
+ --spectrum-animation-duration-200: 160ms;
25
+ --spectrum-animation-duration-300: 190ms;
26
+ --spectrum-animation-duration-400: 220ms;
27
+ --spectrum-animation-duration-500: 250ms;
28
+ --spectrum-animation-duration-600: 300ms;
29
+ --spectrum-animation-duration-700: 350ms;
30
+ --spectrum-animation-duration-800: 400ms;
31
+ --spectrum-animation-duration-900: 450ms;
32
+ --spectrum-animation-duration-1000: 500ms;
33
+ --spectrum-animation-duration-2000: 1000ms;
34
+ --spectrum-animation-duration-4000: 2000ms;
35
+ --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
36
+ --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
37
+ --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
38
+ --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
21
39
 
22
- --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
23
- --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
24
- --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
40
+ --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,
41
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
42
+ 'Lucida Grande', sans-serif;
43
+ --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia,
44
+ serif;
45
+ --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
25
46
 
26
- --spectrum-line-height-large: 1.7;
27
- --spectrum-line-height-medium: 1.5;
28
- --spectrum-line-height-small: 1.3;
47
+ --spectrum-line-height-large: 1.7;
48
+ --spectrum-line-height-medium: 1.5;
49
+ --spectrum-line-height-small: 1.3;
29
50
 
30
- --spectrum-font-weight-thin: 100;
31
- --spectrum-font-weight-ultra-light: 200;
32
- --spectrum-font-weight-light: 300;
33
- --spectrum-font-weight-regular: 400;
34
- --spectrum-font-weight-medium: 500;
35
- --spectrum-font-weight-semi-bold: 600;
36
- --spectrum-font-weight-bold: 700;
37
- --spectrum-font-weight-extra-bold: 800;
38
- --spectrum-font-weight-black: 900;
51
+ --spectrum-font-weight-thin: 100;
52
+ --spectrum-font-weight-ultra-light: 200;
53
+ --spectrum-font-weight-light: 300;
54
+ --spectrum-font-weight-regular: 400;
55
+ --spectrum-font-weight-medium: 500;
56
+ --spectrum-font-weight-semi-bold: 600;
57
+ --spectrum-font-weight-bold: 700;
58
+ --spectrum-font-weight-extra-bold: 800;
59
+ --spectrum-font-weight-black: 900;
39
60
 
40
- /* static white / black background color for docs containers */
41
- --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
42
- --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
61
+ /* static white / black background color for docs containers */
62
+ --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
63
+ --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
43
64
  }
package/tokens/spectrum/global-vars.css CHANGED
@@ -12,6 +12,19 @@ governing permissions and limitations under the License.
12
12
 
13
13
  :host,
14
14
  :root {
15
+ --spectrum-neutral-background-color-selected-default: var(
16
+ --spectrum-gray-700
17
+ );
18
+ --spectrum-neutral-background-color-selected-hover: var(
19
+ --spectrum-gray-800
20
+ );
21
+ --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
22
+ --spectrum-neutral-background-color-selected-key-focus: var(
23
+ --spectrum-gray-800
24
+ );
25
+ --spectrum-slider-track-thickness: 2px;
26
+ --spectrum-slider-handle-gap: 4px;
27
+ --spectrum-border-width-100: 1px;
15
28
  --spectrum-accent-color-100: var(--spectrum-blue-100);
16
29
  --spectrum-accent-color-200: var(--spectrum-blue-200);
17
30
  --spectrum-accent-color-300: var(--spectrum-blue-300);
@@ -26,12 +39,15 @@ governing permissions and limitations under the License.
26
39
  --spectrum-accent-color-1200: var(--spectrum-blue-1200);
27
40
  --spectrum-accent-color-1300: var(--spectrum-blue-1300);
28
41
  --spectrum-accent-color-1400: var(--spectrum-blue-1400);
29
- --spectrum-heading: var(--spectrum-font-bold-default);
30
- --spectrum-heading-emphasized: var(--spectrum-font-bold-italic-default);
31
- --spectrum-cjk-heading: var(--spectrum-font-extra-bold-cjk);
32
- --spectrum-slider-track-thickness: 2px;
33
- --spectrum-slider-handle-gap: 4px;
34
- --spectrum-border-width-100: 1px;
42
+ --spectrum-heading-sans-serif-font-weight: var(--spectrum-font-weight-bold);
43
+ --spectrum-heading-serif-font-weight: var(--spectrum-font-weight-bold);
44
+ --spectrum-heading-cjk-font-weight: var(--spectrum-font-weight-extra-bold);
45
+ --spectrum-heading-sans-serif-emphasized-font-weight: var(
46
+ --spectrum-font-weight-bold
47
+ );
48
+ --spectrum-heading-serif-emphasized-font-weight: var(
49
+ --spectrum-font-weight-bold
50
+ );
35
51
  }
36
52
  :host,
37
53
  :root {
package/tokens/spectrum/large-vars.css CHANGED
@@ -20,14 +20,6 @@ governing permissions and limitations under the License.
20
20
  --spectrum-checkbox-top-to-control-medium: 11px;
21
21
  --spectrum-checkbox-top-to-control-large: 15px;
22
22
  --spectrum-checkbox-top-to-control-extra-large: 19px;
23
- --spectrum-radio-button-control-size-small: 16px;
24
- --spectrum-radio-button-control-size-medium: 18px;
25
- --spectrum-radio-button-control-size-large: 20px;
26
- --spectrum-radio-button-control-size-extra-large: 22px;
27
- --spectrum-radio-button-top-to-control-small: 7px;
28
- --spectrum-radio-button-top-to-control-medium: 11px;
29
- --spectrum-radio-button-top-to-control-large: 15px;
30
- --spectrum-radio-button-top-to-control-extra-large: 19px;
31
23
  --spectrum-switch-control-width-small: 32px;
32
24
  --spectrum-switch-control-width-medium: 36px;
33
25
  --spectrum-switch-control-width-large: 41px;
@@ -40,6 +32,14 @@ governing permissions and limitations under the License.
40
32
  --spectrum-switch-top-to-control-medium: 11px;
41
33
  --spectrum-switch-top-to-control-large: 15px;
42
34
  --spectrum-switch-top-to-control-extra-large: 19px;
35
+ --spectrum-radio-button-control-size-small: 16px;
36
+ --spectrum-radio-button-control-size-medium: 18px;
37
+ --spectrum-radio-button-control-size-large: 20px;
38
+ --spectrum-radio-button-control-size-extra-large: 22px;
39
+ --spectrum-radio-button-top-to-control-small: 7px;
40
+ --spectrum-radio-button-top-to-control-medium: 11px;
41
+ --spectrum-radio-button-top-to-control-large: 15px;
42
+ --spectrum-radio-button-top-to-control-extra-large: 19px;
43
43
  --spectrum-slider-control-height-small: 18px;
44
44
  --spectrum-slider-control-height-medium: 20px;
45
45
  --spectrum-slider-control-height-large: 22px;
@@ -56,14 +56,6 @@ governing permissions and limitations under the License.
56
56
  --spectrum-slider-bottom-to-handle-medium: 10px;
57
57
  --spectrum-slider-bottom-to-handle-large: 14px;
58
58
  --spectrum-slider-bottom-to-handle-extra-large: 17px;
59
- --spectrum-picker-visual-to-disclosure-icon-small: 9px;
60
- --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
61
- --spectrum-picker-visual-to-disclosure-icon-large: 11px;
62
- --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
63
- --spectrum-combo-box-visual-to-field-button-small: 9px;
64
- --spectrum-combo-box-visual-to-field-button-medium: 10px;
65
- --spectrum-combo-box-visual-to-field-button-large: 11px;
66
- --spectrum-combo-box-visual-to-field-button-extra-large: 13px;
67
59
  --spectrum-corner-radius-75: 2px;
68
60
  --spectrum-corner-radius-100: 5px;
69
61
  --spectrum-corner-radius-200: 10px;
package/tokens/spectrum/medium-vars.css CHANGED
@@ -20,14 +20,6 @@ governing permissions and limitations under the License.
20
20
  --spectrum-checkbox-top-to-control-medium: 9px;
21
21
  --spectrum-checkbox-top-to-control-large: 12px;
22
22
  --spectrum-checkbox-top-to-control-extra-large: 15px;
23
- --spectrum-radio-button-control-size-small: 12px;
24
- --spectrum-radio-button-control-size-medium: 14px;
25
- --spectrum-radio-button-control-size-large: 16px;
26
- --spectrum-radio-button-control-size-extra-large: 18px;
27
- --spectrum-radio-button-top-to-control-small: 6px;
28
- --spectrum-radio-button-top-to-control-medium: 9px;
29
- --spectrum-radio-button-top-to-control-large: 12px;
30
- --spectrum-radio-button-top-to-control-extra-large: 15px;
31
23
  --spectrum-switch-control-width-small: 23px;
32
24
  --spectrum-switch-control-width-medium: 26px;
33
25
  --spectrum-switch-control-width-large: 29px;
@@ -40,6 +32,14 @@ governing permissions and limitations under the License.
40
32
  --spectrum-switch-top-to-control-medium: 9px;
41
33
  --spectrum-switch-top-to-control-large: 12px;
42
34
  --spectrum-switch-top-to-control-extra-large: 15px;
35
+ --spectrum-radio-button-control-size-small: 12px;
36
+ --spectrum-radio-button-control-size-medium: 14px;
37
+ --spectrum-radio-button-control-size-large: 16px;
38
+ --spectrum-radio-button-control-size-extra-large: 18px;
39
+ --spectrum-radio-button-top-to-control-small: 6px;
40
+ --spectrum-radio-button-top-to-control-medium: 9px;
41
+ --spectrum-radio-button-top-to-control-large: 12px;
42
+ --spectrum-radio-button-top-to-control-extra-large: 15px;
43
43
  --spectrum-slider-control-height-small: 14px;
44
44
  --spectrum-slider-control-height-medium: 16px;
45
45
  --spectrum-slider-control-height-large: 18px;
@@ -56,14 +56,6 @@ governing permissions and limitations under the License.
56
56
  --spectrum-slider-bottom-to-handle-medium: 8px;
57
57
  --spectrum-slider-bottom-to-handle-large: 11px;
58
58
  --spectrum-slider-bottom-to-handle-extra-large: 14px;
59
- --spectrum-picker-visual-to-disclosure-icon-small: 7px;
60
- --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
61
- --spectrum-picker-visual-to-disclosure-icon-large: 9px;
62
- --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
63
- --spectrum-combo-box-visual-to-field-button-small: 7px;
64
- --spectrum-combo-box-visual-to-field-button-medium: 8px;
65
- --spectrum-combo-box-visual-to-field-button-large: 9px;
66
- --spectrum-combo-box-visual-to-field-button-extra-large: 10px;
67
59
  --spectrum-corner-radius-75: 2px;
68
60
  --spectrum-corner-radius-100: 4px;
69
61
  --spectrum-corner-radius-200: 8px;