@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.22.2",
3
+ "version": "0.22.3-react.48+e4fada004",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -105,19 +105,19 @@
105
105
  "lit-html"
106
106
  ],
107
107
  "dependencies": {
108
- "@spectrum-web-components/base": "^0.7.4"
108
+ "@spectrum-web-components/base": "^0.7.5-react.48+e4fada004"
109
109
  },
110
110
  "devDependencies": {
111
- "@spectrum-css/commons": "^3.0.6",
112
- "@spectrum-css/expressvars": "^2.0.0",
113
- "@spectrum-css/tokens": "^4.0.0",
114
- "@spectrum-css/typography": "^4.0.21",
115
- "@spectrum-css/vars": "^8.0.0"
111
+ "@spectrum-css/commons": "^4.0.2",
112
+ "@spectrum-css/expressvars": "^2.0.3",
113
+ "@spectrum-css/tokens": "^6.2.2",
114
+ "@spectrum-css/typography": "^4.0.23",
115
+ "@spectrum-css/vars": "^8.0.2"
116
116
  },
117
117
  "customElements": "custom-elements.json",
118
118
  "sideEffects": [
119
119
  "./**/*.css"
120
120
  ],
121
121
  "style": "all-medium-lightest.css",
122
- "gitHead": "6b88f4e9d596e410c2f9ed2272bc7d8d961eed1e"
122
+ "gitHead": "e4fada0040dcaf1e1267f2159f366ec708cb2d09"
123
123
  }
package/tokens/dark-vars.css CHANGED
@@ -13,22 +13,10 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.5;
16
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
- --spectrum-red-background-color-default: var(--spectrum-red-700);
18
- --spectrum-orange-background-color-default: var(--spectrum-orange-800);
19
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
20
- --spectrum-chartreuse-background-color-default: var(
21
- --spectrum-chartreuse-900
22
- );
23
- --spectrum-celery-background-color-default: var(--spectrum-celery-800);
24
- --spectrum-green-background-color-default: var(--spectrum-green-700);
25
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
26
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
27
- --spectrum-blue-background-color-default: var(--spectrum-blue-700);
28
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
29
- --spectrum-purple-background-color-default: var(--spectrum-purple-700);
30
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
31
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
16
+ --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
17
+ --spectrum-background-base-color: var(--spectrum-gray-50);
18
+ --spectrum-background-layer-1-color: var(--spectrum-gray-75);
19
+ --spectrum-background-layer-2-color: var(--spectrum-gray-100);
32
20
  --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
33
21
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
34
22
  --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
@@ -85,6 +73,25 @@ governing permissions and limitations under the License.
85
73
  --spectrum-positive-background-color-key-focus: var(
86
74
  --spectrum-positive-color-400
87
75
  );
76
+ --spectrum-notice-background-color-default: var(
77
+ --spectrum-notice-color-800
78
+ );
79
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
80
+ --spectrum-red-background-color-default: var(--spectrum-red-700);
81
+ --spectrum-orange-background-color-default: var(--spectrum-orange-800);
82
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
83
+ --spectrum-chartreuse-background-color-default: var(
84
+ --spectrum-chartreuse-900
85
+ );
86
+ --spectrum-celery-background-color-default: var(--spectrum-celery-800);
87
+ --spectrum-green-background-color-default: var(--spectrum-green-700);
88
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
89
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
90
+ --spectrum-blue-background-color-default: var(--spectrum-blue-700);
91
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
92
+ --spectrum-purple-background-color-default: var(--spectrum-purple-700);
93
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
94
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
88
95
  --spectrum-neutral-visual-color: var(--spectrum-gray-600);
89
96
  --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
90
97
  --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
@@ -105,10 +112,7 @@ governing permissions and limitations under the License.
105
112
  --spectrum-purple-visual-color: var(--spectrum-purple-900);
106
113
  --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
107
114
  --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
108
- --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
109
- --spectrum-background-base-color: var(--spectrum-gray-50);
110
- --spectrum-background-layer-1-color: var(--spectrum-gray-75);
111
- --spectrum-background-layer-2-color: var(--spectrum-gray-100);
115
+ --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
112
116
  --spectrum-gray-50: rgb(29, 29, 29);
113
117
  --spectrum-gray-75: rgb(38, 38, 38);
114
118
  --spectrum-gray-100: rgb(50, 50, 50);
@@ -120,6 +124,20 @@ governing permissions and limitations under the License.
120
124
  --spectrum-gray-700: rgb(209, 209, 209);
121
125
  --spectrum-gray-800: rgb(235, 235, 235);
122
126
  --spectrum-gray-900: rgb(255, 255, 255);
127
+ --spectrum-blue-100: rgb(0, 56, 119);
128
+ --spectrum-blue-200: rgb(0, 65, 138);
129
+ --spectrum-blue-300: rgb(0, 77, 163);
130
+ --spectrum-blue-400: rgb(0, 89, 194);
131
+ --spectrum-blue-500: rgb(3, 103, 224);
132
+ --spectrum-blue-600: rgb(19, 121, 243);
133
+ --spectrum-blue-700: rgb(52, 143, 244);
134
+ --spectrum-blue-800: rgb(84, 163, 246);
135
+ --spectrum-blue-900: rgb(114, 183, 249);
136
+ --spectrum-blue-1000: rgb(143, 202, 252);
137
+ --spectrum-blue-1100: rgb(174, 219, 254);
138
+ --spectrum-blue-1200: rgb(204, 233, 255);
139
+ --spectrum-blue-1300: rgb(232, 246, 255);
140
+ --spectrum-blue-1400: rgb(255, 255, 255);
123
141
  --spectrum-red-100: rgb(123, 0, 0);
124
142
  --spectrum-red-200: rgb(141, 0, 0);
125
143
  --spectrum-red-300: rgb(165, 0, 0);
@@ -232,20 +250,6 @@ governing permissions and limitations under the License.
232
250
  --spectrum-cyan-1200: rgb(167, 241, 255);
233
251
  --spectrum-cyan-1300: rgb(215, 250, 255);
234
252
  --spectrum-cyan-1400: rgb(255, 255, 255);
235
- --spectrum-blue-100: rgb(0, 56, 119);
236
- --spectrum-blue-200: rgb(0, 65, 138);
237
- --spectrum-blue-300: rgb(0, 77, 163);
238
- --spectrum-blue-400: rgb(0, 89, 194);
239
- --spectrum-blue-500: rgb(3, 103, 224);
240
- --spectrum-blue-600: rgb(19, 121, 243);
241
- --spectrum-blue-700: rgb(52, 143, 244);
242
- --spectrum-blue-800: rgb(84, 163, 246);
243
- --spectrum-blue-900: rgb(114, 183, 249);
244
- --spectrum-blue-1000: rgb(143, 202, 252);
245
- --spectrum-blue-1100: rgb(174, 219, 254);
246
- --spectrum-blue-1200: rgb(204, 233, 255);
247
- --spectrum-blue-1300: rgb(232, 246, 255);
248
- --spectrum-blue-1400: rgb(255, 255, 255);
249
253
  --spectrum-indigo-100: rgb(40, 44, 140);
250
254
  --spectrum-indigo-200: rgb(47, 52, 163);
251
255
  --spectrum-indigo-300: rgb(57, 63, 187);
package/tokens/darkest-vars.css CHANGED
@@ -13,22 +13,10 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.6;
16
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
- --spectrum-red-background-color-default: var(--spectrum-red-700);
18
- --spectrum-orange-background-color-default: var(--spectrum-orange-800);
19
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
20
- --spectrum-chartreuse-background-color-default: var(
21
- --spectrum-chartreuse-900
22
- );
23
- --spectrum-celery-background-color-default: var(--spectrum-celery-800);
24
- --spectrum-green-background-color-default: var(--spectrum-green-700);
25
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
26
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
27
- --spectrum-blue-background-color-default: var(--spectrum-blue-700);
28
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
29
- --spectrum-purple-background-color-default: var(--spectrum-purple-700);
30
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
31
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
16
+ --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.8);
17
+ --spectrum-background-base-color: var(--spectrum-gray-50);
18
+ --spectrum-background-layer-1-color: var(--spectrum-gray-75);
19
+ --spectrum-background-layer-2-color: var(--spectrum-gray-100);
32
20
  --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
33
21
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
34
22
  --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
@@ -85,6 +73,25 @@ governing permissions and limitations under the License.
85
73
  --spectrum-positive-background-color-key-focus: var(
86
74
  --spectrum-positive-color-500
87
75
  );
76
+ --spectrum-notice-background-color-default: var(
77
+ --spectrum-notice-color-800
78
+ );
79
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
80
+ --spectrum-red-background-color-default: var(--spectrum-red-700);
81
+ --spectrum-orange-background-color-default: var(--spectrum-orange-800);
82
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
83
+ --spectrum-chartreuse-background-color-default: var(
84
+ --spectrum-chartreuse-900
85
+ );
86
+ --spectrum-celery-background-color-default: var(--spectrum-celery-800);
87
+ --spectrum-green-background-color-default: var(--spectrum-green-700);
88
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
89
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
90
+ --spectrum-blue-background-color-default: var(--spectrum-blue-700);
91
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
92
+ --spectrum-purple-background-color-default: var(--spectrum-purple-700);
93
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
94
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
88
95
  --spectrum-neutral-visual-color: var(--spectrum-gray-600);
89
96
  --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
90
97
  --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
@@ -105,10 +112,7 @@ governing permissions and limitations under the License.
105
112
  --spectrum-purple-visual-color: var(--spectrum-purple-900);
106
113
  --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
107
114
  --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
108
- --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.8);
109
- --spectrum-background-base-color: var(--spectrum-gray-50);
110
- --spectrum-background-layer-1-color: var(--spectrum-gray-75);
111
- --spectrum-background-layer-2-color: var(--spectrum-gray-100);
115
+ --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800);
112
116
  --spectrum-gray-50: rgb(0, 0, 0);
113
117
  --spectrum-gray-75: rgb(14, 14, 14);
114
118
  --spectrum-gray-100: rgb(29, 29, 29);
@@ -120,6 +124,20 @@ governing permissions and limitations under the License.
120
124
  --spectrum-gray-700: rgb(208, 208, 208);
121
125
  --spectrum-gray-800: rgb(235, 235, 235);
122
126
  --spectrum-gray-900: rgb(255, 255, 255);
127
+ --spectrum-blue-100: rgb(0, 38, 81);
128
+ --spectrum-blue-200: rgb(0, 50, 106);
129
+ --spectrum-blue-300: rgb(0, 64, 135);
130
+ --spectrum-blue-400: rgb(0, 78, 166);
131
+ --spectrum-blue-500: rgb(0, 92, 200);
132
+ --spectrum-blue-600: rgb(6, 108, 231);
133
+ --spectrum-blue-700: rgb(29, 128, 245);
134
+ --spectrum-blue-800: rgb(64, 150, 243);
135
+ --spectrum-blue-900: rgb(94, 170, 247);
136
+ --spectrum-blue-1000: rgb(124, 189, 250);
137
+ --spectrum-blue-1100: rgb(152, 206, 253);
138
+ --spectrum-blue-1200: rgb(179, 222, 254);
139
+ --spectrum-blue-1300: rgb(206, 234, 255);
140
+ --spectrum-blue-1400: rgb(227, 243, 255);
123
141
  --spectrum-red-100: rgb(87, 0, 0);
124
142
  --spectrum-red-200: rgb(110, 0, 0);
125
143
  --spectrum-red-300: rgb(138, 0, 0);
@@ -232,20 +250,6 @@ governing permissions and limitations under the License.
232
250
  --spectrum-cyan-1200: rgb(134, 230, 250);
233
251
  --spectrum-cyan-1300: rgb(170, 242, 255);
234
252
  --spectrum-cyan-1400: rgb(206, 249, 255);
235
- --spectrum-blue-100: rgb(0, 38, 81);
236
- --spectrum-blue-200: rgb(0, 50, 106);
237
- --spectrum-blue-300: rgb(0, 64, 135);
238
- --spectrum-blue-400: rgb(0, 78, 166);
239
- --spectrum-blue-500: rgb(0, 92, 200);
240
- --spectrum-blue-600: rgb(6, 108, 231);
241
- --spectrum-blue-700: rgb(29, 128, 245);
242
- --spectrum-blue-800: rgb(64, 150, 243);
243
- --spectrum-blue-900: rgb(94, 170, 247);
244
- --spectrum-blue-1000: rgb(124, 189, 250);
245
- --spectrum-blue-1100: rgb(152, 206, 253);
246
- --spectrum-blue-1200: rgb(179, 222, 254);
247
- --spectrum-blue-1300: rgb(206, 234, 255);
248
- --spectrum-blue-1400: rgb(227, 243, 255);
249
253
  --spectrum-indigo-100: rgb(26, 29, 97);
250
254
  --spectrum-indigo-200: rgb(35, 39, 125);
251
255
  --spectrum-indigo-300: rgb(46, 50, 158);
package/tokens/express/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-800
17
+ );
18
+ --spectrum-neutral-background-color-selected-hover: var(
19
+ --spectrum-gray-900
20
+ );
21
+ --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
22
+ --spectrum-neutral-background-color-selected-key-focus: var(
23
+ --spectrum-gray-900
24
+ );
25
+ --spectrum-slider-track-thickness: 4px;
26
+ --spectrum-slider-handle-gap: 0px;
27
+ --spectrum-border-width-100: 2px;
15
28
  --spectrum-accent-color-100: var(--spectrum-indigo-100);
16
29
  --spectrum-accent-color-200: var(--spectrum-indigo-200);
17
30
  --spectrum-accent-color-300: var(--spectrum-indigo-300);
@@ -26,12 +39,17 @@ governing permissions and limitations under the License.
26
39
  --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
27
40
  --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
28
41
  --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
29
- --spectrum-heading: var(--spectrum-font-black-default);
30
- --spectrum-heading-emphasized: var(--spectrum-font-black-italic-default);
31
- --spectrum-cjk-heading: var(--spectrum-font-black-cjk);
32
- --spectrum-slider-track-thickness: 4px;
33
- --spectrum-slider-handle-gap: 0px;
34
- --spectrum-border-width-100: 2px;
42
+ --spectrum-heading-sans-serif-font-weight: var(
43
+ --spectrum-font-weight-black
44
+ );
45
+ --spectrum-heading-serif-font-weight: var(--spectrum-font-weight-black);
46
+ --spectrum-heading-cjk-font-weight: var(--spectrum-font-weight-black);
47
+ --spectrum-heading-sans-serif-emphasized-font-weight: var(
48
+ --spectrum-font-weight-black
49
+ );
50
+ --spectrum-heading-serif-emphasized-font-weight: var(
51
+ --spectrum-font-weight-black
52
+ );
35
53
  }
36
54
  :host,
37
55
  :root {
package/tokens/express/large-vars.css CHANGED
@@ -20,14 +20,6 @@ governing permissions and limitations under the License.
20
20
  --spectrum-checkbox-top-to-control-medium: 10px;
21
21
  --spectrum-checkbox-top-to-control-large: 14px;
22
22
  --spectrum-checkbox-top-to-control-extra-large: 17px;
23
- --spectrum-radio-button-control-size-small: 18px;
24
- --spectrum-radio-button-control-size-medium: 20px;
25
- --spectrum-radio-button-control-size-large: 22px;
26
- --spectrum-radio-button-control-size-extra-large: 26px;
27
- --spectrum-radio-button-top-to-control-small: 6px;
28
- --spectrum-radio-button-top-to-control-medium: 10px;
29
- --spectrum-radio-button-top-to-control-large: 14px;
30
- --spectrum-radio-button-top-to-control-extra-large: 17px;
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: 10px;
41
33
  --spectrum-switch-top-to-control-large: 14px;
42
34
  --spectrum-switch-top-to-control-extra-large: 17px;
35
+ --spectrum-radio-button-control-size-small: 18px;
36
+ --spectrum-radio-button-control-size-medium: 20px;
37
+ --spectrum-radio-button-control-size-large: 22px;
38
+ --spectrum-radio-button-control-size-extra-large: 26px;
39
+ --spectrum-radio-button-top-to-control-small: 6px;
40
+ --spectrum-radio-button-top-to-control-medium: 10px;
41
+ --spectrum-radio-button-top-to-control-large: 14px;
42
+ --spectrum-radio-button-top-to-control-extra-large: 17px;
43
43
  --spectrum-slider-control-height-small: 22px;
44
44
  --spectrum-slider-control-height-medium: 24px;
45
45
  --spectrum-slider-control-height-large: 28px;
package/tokens/express/medium-vars.css CHANGED
@@ -20,14 +20,6 @@ governing permissions and limitations under the License.
20
20
  --spectrum-checkbox-top-to-control-medium: 8px;
21
21
  --spectrum-checkbox-top-to-control-large: 11px;
22
22
  --spectrum-checkbox-top-to-control-extra-large: 14px;
23
- --spectrum-radio-button-control-size-small: 14px;
24
- --spectrum-radio-button-control-size-medium: 16px;
25
- --spectrum-radio-button-control-size-large: 18px;
26
- --spectrum-radio-button-control-size-extra-large: 20px;
27
- --spectrum-radio-button-top-to-control-small: 5px;
28
- --spectrum-radio-button-top-to-control-medium: 8px;
29
- --spectrum-radio-button-top-to-control-large: 11px;
30
- --spectrum-radio-button-top-to-control-extra-large: 14px;
31
23
  --spectrum-switch-control-width-small: 25px;
32
24
  --spectrum-switch-control-width-medium: 28px;
33
25
  --spectrum-switch-control-width-large: 32px;
@@ -40,6 +32,14 @@ governing permissions and limitations under the License.
40
32
  --spectrum-switch-top-to-control-medium: 8px;
41
33
  --spectrum-switch-top-to-control-large: 11px;
42
34
  --spectrum-switch-top-to-control-extra-large: 14px;
35
+ --spectrum-radio-button-control-size-small: 14px;
36
+ --spectrum-radio-button-control-size-medium: 16px;
37
+ --spectrum-radio-button-control-size-large: 18px;
38
+ --spectrum-radio-button-control-size-extra-large: 20px;
39
+ --spectrum-radio-button-top-to-control-small: 5px;
40
+ --spectrum-radio-button-top-to-control-medium: 8px;
41
+ --spectrum-radio-button-top-to-control-large: 11px;
42
+ --spectrum-radio-button-top-to-control-extra-large: 14px;
43
43
  --spectrum-slider-control-height-small: 18px;
44
44
  --spectrum-slider-control-height-medium: 20px;
45
45
  --spectrum-slider-control-height-large: 22px;