@spectrum-web-components/styles 0.20.0 → 0.20.1

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 (34) hide show
  1. package/README.md +15 -15
  2. package/core-global.css +3 -3263
  3. package/express/core-global.css +3 -3283
  4. package/express/spectrum-core-global.css +3297 -0
  5. package/express/spectrum-scale-large.css +0 -6
  6. package/express/spectrum-scale-medium.css +0 -6
  7. package/fonts.css +2 -34
  8. package/package.json +4 -4
  9. package/spectrum-core-global.css +3277 -0
  10. package/spectrum-scale-large.css +0 -6
  11. package/spectrum-scale-medium.css +0 -6
  12. package/src/spectrum-base.css +1 -0
  13. package/src/spectrum-body.css +25 -0
  14. package/src/spectrum-code.css +18 -0
  15. package/src/spectrum-detail.css +33 -0
  16. package/src/spectrum-heading.css +46 -0
  17. package/src/spectrum-lang.css +121 -0
  18. package/src/spectrum-typography.css +14 -0
  19. package/tokens/express/custom-large-vars.css +2 -3
  20. package/tokens/express/custom-medium-vars.css +2 -3
  21. package/tokens/express/custom-vars.css +2 -3
  22. package/tokens/express/global-vars.css +6 -4
  23. package/tokens/express/large-vars.css +24 -0
  24. package/tokens/express/medium-vars.css +24 -0
  25. package/tokens/global-vars.css +39 -7
  26. package/tokens/large-vars.css +71 -6
  27. package/tokens/light-vars.css +2 -2
  28. package/tokens/medium-vars.css +71 -6
  29. package/tokens/spectrum/custom-large-vars.css +6 -7
  30. package/tokens/spectrum/custom-medium-vars.css +6 -7
  31. package/tokens/spectrum/custom-vars.css +23 -28
  32. package/tokens/spectrum/global-vars.css +6 -4
  33. package/tokens/spectrum/large-vars.css +24 -0
  34. package/tokens/spectrum/medium-vars.css +24 -0
package/tokens/spectrum/custom-vars.css CHANGED
@@ -11,38 +11,33 @@ governing permissions and limitations under the License.
11
11
  */
12
12
 
13
13
  /* This file contains overrides and additions to core tokens */
14
- :host,
15
- :root {
16
- --system: spectrum;
14
+ :host, :root {
15
+ --system: spectrum;
17
16
  }
18
17
 
19
- :host,
20
- :root {
21
- --spectrum-animation-duration-100: 130ms;
22
- --spectrum-animation-duration-200: 160ms;
18
+ :host, :root {
19
+ --spectrum-animation-duration-100: 130ms;
20
+ --spectrum-animation-duration-200: 160ms;
23
21
 
24
- --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,
25
- BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
26
- 'Lucida Grande', sans-serif;
27
- --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia,
28
- serif;
29
- --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
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;
30
25
 
31
- --spectrum-line-height-large: 1.7;
32
- --spectrum-line-height-medium: 1.5;
33
- --spectrum-line-height-small: 1.3;
26
+ --spectrum-line-height-large: 1.7;
27
+ --spectrum-line-height-medium: 1.5;
28
+ --spectrum-line-height-small: 1.3;
34
29
 
35
- --spectrum-font-weight-thin: 100;
36
- --spectrum-font-weight-ultra-light: 200;
37
- --spectrum-font-weight-light: 300;
38
- --spectrum-font-weight-regular: 400;
39
- --spectrum-font-weight-medium: 500;
40
- --spectrum-font-weight-semi-bold: 600;
41
- --spectrum-font-weight-bold: 700;
42
- --spectrum-font-weight-extra-bold: 800;
43
- --spectrum-font-weight-black: 900;
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;
44
39
 
45
- /* static white / black background color for docs containers */
46
- --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
47
- --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
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);
48
43
  }
package/tokens/spectrum/global-vars.css CHANGED
@@ -29,6 +29,8 @@ governing permissions and limitations under the License.
29
29
  --spectrum-heading: var(--spectrum-font-bold-default);
30
30
  --spectrum-heading-emphasized: var(--spectrum-font-bold-italic-default);
31
31
  --spectrum-cjk-heading: var(--spectrum-font-extra-bold-cjk);
32
+ --spectrum-slider-track-thickness: 2px;
33
+ --spectrum-slider-handle-gap: 4px;
32
34
  --spectrum-border-width-100: 1px;
33
35
  }
34
36
  :host,
@@ -174,8 +176,8 @@ governing permissions and limitations under the License.
174
176
  --system-spectrum-actionbutton-staticblack-content-color-focus: var(
175
177
  --spectrum-black
176
178
  );
177
- --system-spectrum-actionbutton-staticblack-focus-ring-color: var(
178
- --spectrum-static-black-focus-ring-color
179
+ --system-spectrum-actionbutton-staticblack-focus-indicator-color: var(
180
+ --spectrum-static-black-focus-indicator-color
179
181
  );
180
182
  --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent;
181
183
  --system-spectrum-actionbutton-staticblack-border-color-disabled: var(
@@ -246,8 +248,8 @@ governing permissions and limitations under the License.
246
248
  --system-spectrum-actionbutton-staticwhite-content-color-focus: var(
247
249
  --spectrum-white
248
250
  );
249
- --system-spectrum-actionbutton-staticwhite-focus-ring-color: var(
250
- --spectrum-static-white-focus-ring-color
251
+ --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var(
252
+ --spectrum-static-white-focus-indicator-color
251
253
  );
252
254
  --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent;
253
255
  --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(
package/tokens/spectrum/large-vars.css CHANGED
@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
40
40
  --spectrum-switch-top-to-control-medium: 11px;
41
41
  --spectrum-switch-top-to-control-large: 15px;
42
42
  --spectrum-switch-top-to-control-extra-large: 19px;
43
+ --spectrum-slider-control-height-small: 18px;
44
+ --spectrum-slider-control-height-medium: 20px;
45
+ --spectrum-slider-control-height-large: 22px;
46
+ --spectrum-slider-control-height-extra-large: 26px;
47
+ --spectrum-slider-handle-size-small: 18px;
48
+ --spectrum-slider-handle-size-medium: 20px;
49
+ --spectrum-slider-handle-size-large: 22px;
50
+ --spectrum-slider-handle-size-extra-large: 26px;
51
+ --spectrum-slider-handle-border-width-down-small: 7px;
52
+ --spectrum-slider-handle-border-width-down-medium: 8px;
53
+ --spectrum-slider-handle-border-width-down-large: 9px;
54
+ --spectrum-slider-handle-border-width-down-extra-large: 11px;
55
+ --spectrum-slider-bottom-to-handle-small: 6px;
56
+ --spectrum-slider-bottom-to-handle-medium: 10px;
57
+ --spectrum-slider-bottom-to-handle-large: 14px;
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;
43
67
  --spectrum-corner-radius-75: 2px;
44
68
  --spectrum-corner-radius-100: 5px;
45
69
  --spectrum-corner-radius-200: 10px;
package/tokens/spectrum/medium-vars.css CHANGED
@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
40
40
  --spectrum-switch-top-to-control-medium: 9px;
41
41
  --spectrum-switch-top-to-control-large: 12px;
42
42
  --spectrum-switch-top-to-control-extra-large: 15px;
43
+ --spectrum-slider-control-height-small: 14px;
44
+ --spectrum-slider-control-height-medium: 16px;
45
+ --spectrum-slider-control-height-large: 18px;
46
+ --spectrum-slider-control-height-extra-large: 20px;
47
+ --spectrum-slider-handle-size-small: 14px;
48
+ --spectrum-slider-handle-size-medium: 16px;
49
+ --spectrum-slider-handle-size-large: 18px;
50
+ --spectrum-slider-handle-size-extra-large: 20px;
51
+ --spectrum-slider-handle-border-width-down-small: 5px;
52
+ --spectrum-slider-handle-border-width-down-medium: 6px;
53
+ --spectrum-slider-handle-border-width-down-large: 7px;
54
+ --spectrum-slider-handle-border-width-down-extra-large: 8px;
55
+ --spectrum-slider-bottom-to-handle-small: 5px;
56
+ --spectrum-slider-bottom-to-handle-medium: 8px;
57
+ --spectrum-slider-bottom-to-handle-large: 11px;
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;
43
67
  --spectrum-corner-radius-75: 2px;
44
68
  --spectrum-corner-radius-100: 4px;
45
69
  --spectrum-corner-radius-200: 8px;