@spectrum-web-components/styles 1.0.1 → 1.0.2

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 (9) hide show
  1. package/package.json +4 -5
  2. package/tokens/express/index.css +225 -0
  3. package/tokens/index.css +1859 -780
  4. package/tokens/spectrum/index.css +803 -0
  5. package/LICENSE +0 -201
  6. package/stories/styles.stories.js +0 -45
  7. package/stories/styles.stories.js.map +0 -7
  8. package/test/styles.test-vrt.js +0 -5
  9. package/test/styles.test-vrt.js.map +0 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -119,13 +119,13 @@
119
119
  "lit-html"
120
120
  ],
121
121
  "dependencies": {
122
- "@spectrum-web-components/base": "^1.0.1",
122
+ "@spectrum-web-components/base": "^1.0.2",
123
123
  "lit": "^2.5.0 || ^3.1.3"
124
124
  },
125
125
  "devDependencies": {
126
126
  "@spectrum-css/commons": "^11.0.0-s2-foundations.15",
127
127
  "@spectrum-css/expressvars": "^3.0.9",
128
- "@spectrum-css/tokens": "^@spectrum-css/tokens@14.3.1",
128
+ "@spectrum-css/tokens": "14.3.1",
129
129
  "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.27",
130
130
  "@spectrum-css/typography": "^7.0.0-s2-foundations.17",
131
131
  "@spectrum-css/vars": "^9.0.8"
@@ -134,6 +134,5 @@
134
134
  "sideEffects": [
135
135
  "./**/*.css"
136
136
  ],
137
- "style": "all-medium-lightest.css",
138
- "gitHead": "b359bc0242712be118c5e3e2cc05f88707d3eeb1"
137
+ "style": "all-medium-lightest.css"
139
138
  }
package/tokens/express/index.css ADDED
@@ -0,0 +1,225 @@
1
+ :host,
2
+ :root {
3
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
4
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
5
+
6
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
7
+ --spectrum-assetcard-border-color-selected-hover: var(
8
+ --spectrum-indigo-700
9
+ );
10
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
11
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
12
+ --spectrum-indigo-700
13
+ );
14
+ }
15
+
16
+ :host,
17
+ :root {
18
+ --spectrum-neutral-background-color-selected-default: var(
19
+ --spectrum-gray-800
20
+ );
21
+ --spectrum-neutral-background-color-selected-hover: var(
22
+ --spectrum-gray-900
23
+ );
24
+ --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
25
+ --spectrum-neutral-background-color-selected-key-focus: var(
26
+ --spectrum-gray-900
27
+ );
28
+ --spectrum-slider-track-thickness: 4px;
29
+ --spectrum-slider-handle-gap: 0px;
30
+ --spectrum-picker-border-width: 0;
31
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
32
+ --spectrum-in-field-button-edge-to-fill: 4px;
33
+ --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
34
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
35
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
36
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
37
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
38
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
39
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
40
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
41
+ --spectrum-border-width-100: 2px;
42
+ --spectrum-accent-color-100: var(--spectrum-indigo-100);
43
+ --spectrum-accent-color-200: var(--spectrum-indigo-200);
44
+ --spectrum-accent-color-300: var(--spectrum-indigo-300);
45
+ --spectrum-accent-color-400: var(--spectrum-indigo-400);
46
+ --spectrum-accent-color-500: var(--spectrum-indigo-500);
47
+ --spectrum-accent-color-600: var(--spectrum-indigo-600);
48
+ --spectrum-accent-color-700: var(--spectrum-indigo-700);
49
+ --spectrum-accent-color-800: var(--spectrum-indigo-800);
50
+ --spectrum-accent-color-900: var(--spectrum-indigo-900);
51
+ --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
52
+ --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
53
+ --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
54
+ --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
55
+ --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
56
+ --spectrum-heading-sans-serif-font-weight: var(
57
+ --spectrum-black-font-weight
58
+ );
59
+ --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
60
+ --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
61
+ --spectrum-heading-sans-serif-emphasized-font-weight: var(
62
+ --spectrum-black-font-weight
63
+ );
64
+ --spectrum-heading-serif-emphasized-font-weight: var(
65
+ --spectrum-black-font-weight
66
+ );
67
+ --system: express;
68
+ }
69
+
70
+ :host,
71
+ :root {
72
+ --spectrum-checkbox-control-size-small: 18px;
73
+ --spectrum-checkbox-control-size-medium: 20px;
74
+ --spectrum-checkbox-control-size-large: 22px;
75
+ --spectrum-checkbox-control-size-extra-large: 26px;
76
+ --spectrum-checkbox-top-to-control-small: 6px;
77
+ --spectrum-checkbox-top-to-control-medium: 10px;
78
+ --spectrum-checkbox-top-to-control-large: 14px;
79
+ --spectrum-checkbox-top-to-control-extra-large: 17px;
80
+ --spectrum-switch-control-width-small: 32px;
81
+ --spectrum-switch-control-width-medium: 36px;
82
+ --spectrum-switch-control-width-large: 41px;
83
+ --spectrum-switch-control-width-extra-large: 46px;
84
+ --spectrum-switch-control-height-small: 18px;
85
+ --spectrum-switch-control-height-medium: 20px;
86
+ --spectrum-switch-control-height-large: 22px;
87
+ --spectrum-switch-control-height-extra-large: 26px;
88
+ --spectrum-switch-top-to-control-small: 6px;
89
+ --spectrum-switch-top-to-control-medium: 10px;
90
+ --spectrum-switch-top-to-control-large: 14px;
91
+ --spectrum-switch-top-to-control-extra-large: 17px;
92
+ --spectrum-radio-button-control-size-small: 18px;
93
+ --spectrum-radio-button-control-size-medium: 20px;
94
+ --spectrum-radio-button-control-size-large: 22px;
95
+ --spectrum-radio-button-control-size-extra-large: 26px;
96
+ --spectrum-radio-button-top-to-control-small: 6px;
97
+ --spectrum-radio-button-top-to-control-medium: 10px;
98
+ --spectrum-radio-button-top-to-control-large: 14px;
99
+ --spectrum-radio-button-top-to-control-extra-large: 17px;
100
+ --spectrum-slider-control-height-small: 22px;
101
+ --spectrum-slider-control-height-medium: 24px;
102
+ --spectrum-slider-control-height-large: 28px;
103
+ --spectrum-slider-control-height-extra-large: 30px;
104
+ --spectrum-slider-handle-size-small: 22px;
105
+ --spectrum-slider-handle-size-medium: 24px;
106
+ --spectrum-slider-handle-size-large: 28px;
107
+ --spectrum-slider-handle-size-extra-large: 30px;
108
+ --spectrum-slider-handle-border-width-down-small: var(
109
+ --spectrum-border-width-200
110
+ );
111
+ --spectrum-slider-handle-border-width-down-medium: var(
112
+ --spectrum-border-width-200
113
+ );
114
+ --spectrum-slider-handle-border-width-down-large: var(
115
+ --spectrum-border-width-200
116
+ );
117
+ --spectrum-slider-handle-border-width-down-extra-large: var(
118
+ --spectrum-border-width-200
119
+ );
120
+ --spectrum-slider-bottom-to-handle-small: 4px;
121
+ --spectrum-slider-bottom-to-handle-medium: 8px;
122
+ --spectrum-slider-bottom-to-handle-large: 12px;
123
+ --spectrum-slider-bottom-to-handle-extra-large: 15px;
124
+ --spectrum-corner-radius-75: 4px;
125
+ --spectrum-corner-radius-100: 8px;
126
+ --spectrum-corner-radius-200: 16px;
127
+ --spectrum-drop-shadow-x: 0px;
128
+ --spectrum-drop-shadow-y: 4px;
129
+ --spectrum-drop-shadow-blur: 16px;
130
+ --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0';
131
+ --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0';
132
+
133
+ --spectrum-dialog-confirm-border-radius: 8px;
134
+
135
+ --spectrum-dial-border-radius: 15px;
136
+
137
+ --spectrum-assetcard-focus-ring-border-radius: 12px;
138
+ }
139
+
140
+ :host,
141
+ :root {
142
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
143
+ --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
144
+
145
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
146
+ --spectrum-assetcard-border-color-selected-hover: var(
147
+ --spectrum-indigo-900
148
+ );
149
+ --spectrum-assetcard-border-color-selected-down: var(
150
+ --spectrum-indigo-1000
151
+ );
152
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
153
+ --spectrum-indigo-900
154
+ );
155
+ }
156
+
157
+ :host,
158
+ :root {
159
+ --spectrum-checkbox-control-size-small: 14px;
160
+ --spectrum-checkbox-control-size-medium: 16px;
161
+ --spectrum-checkbox-control-size-large: 18px;
162
+ --spectrum-checkbox-control-size-extra-large: 20px;
163
+ --spectrum-checkbox-top-to-control-small: 5px;
164
+ --spectrum-checkbox-top-to-control-medium: 8px;
165
+ --spectrum-checkbox-top-to-control-large: 11px;
166
+ --spectrum-checkbox-top-to-control-extra-large: 14px;
167
+ --spectrum-switch-control-width-small: 25px;
168
+ --spectrum-switch-control-width-medium: 28px;
169
+ --spectrum-switch-control-width-large: 32px;
170
+ --spectrum-switch-control-width-extra-large: 35px;
171
+ --spectrum-switch-control-height-small: 14px;
172
+ --spectrum-switch-control-height-medium: 16px;
173
+ --spectrum-switch-control-height-large: 18px;
174
+ --spectrum-switch-control-height-extra-large: 20px;
175
+ --spectrum-switch-top-to-control-small: 5px;
176
+ --spectrum-switch-top-to-control-medium: 8px;
177
+ --spectrum-switch-top-to-control-large: 11px;
178
+ --spectrum-switch-top-to-control-extra-large: 14px;
179
+ --spectrum-radio-button-control-size-small: 14px;
180
+ --spectrum-radio-button-control-size-medium: 16px;
181
+ --spectrum-radio-button-control-size-large: 18px;
182
+ --spectrum-radio-button-control-size-extra-large: 20px;
183
+ --spectrum-radio-button-top-to-control-small: 5px;
184
+ --spectrum-radio-button-top-to-control-medium: 8px;
185
+ --spectrum-radio-button-top-to-control-large: 11px;
186
+ --spectrum-radio-button-top-to-control-extra-large: 14px;
187
+ --spectrum-slider-control-height-small: 18px;
188
+ --spectrum-slider-control-height-medium: 20px;
189
+ --spectrum-slider-control-height-large: 22px;
190
+ --spectrum-slider-control-height-extra-large: 24px;
191
+ --spectrum-slider-handle-size-small: 18px;
192
+ --spectrum-slider-handle-size-medium: 20px;
193
+ --spectrum-slider-handle-size-large: 22px;
194
+ --spectrum-slider-handle-size-extra-large: 24px;
195
+ --spectrum-slider-handle-border-width-down-small: var(
196
+ --spectrum-border-width-200
197
+ );
198
+ --spectrum-slider-handle-border-width-down-medium: var(
199
+ --spectrum-border-width-200
200
+ );
201
+ --spectrum-slider-handle-border-width-down-large: var(
202
+ --spectrum-border-width-200
203
+ );
204
+ --spectrum-slider-handle-border-width-down-extra-large: var(
205
+ --spectrum-border-width-200
206
+ );
207
+ --spectrum-slider-bottom-to-handle-small: 3px;
208
+ --spectrum-slider-bottom-to-handle-medium: 6px;
209
+ --spectrum-slider-bottom-to-handle-large: 9px;
210
+ --spectrum-slider-bottom-to-handle-extra-large: 12px;
211
+ --spectrum-corner-radius-75: 3px;
212
+ --spectrum-corner-radius-100: 6px;
213
+ --spectrum-corner-radius-200: 12px;
214
+ --spectrum-drop-shadow-x: 0px;
215
+ --spectrum-drop-shadow-y: 4px;
216
+ --spectrum-drop-shadow-blur: 16px;
217
+ --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0';
218
+ --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0';
219
+
220
+ --spectrum-dialog-confirm-border-radius: 6px;
221
+
222
+ --spectrum-dial-border-radius: 12px;
223
+
224
+ --spectrum-assetcard-focus-ring-border-radius: 10px;
225
+ }