@spectrum-web-components/styles 1.1.0-beta.9 → 1.1.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 (72) hide show
  1. package/package.json +19 -23
  2. package/src/body-overrides.css +1 -1
  3. package/src/body-overrides.css.dev.js.map +1 -1
  4. package/src/body-overrides.css.js.map +1 -1
  5. package/src/code-overrides.css +1 -1
  6. package/src/code-overrides.css.dev.js.map +1 -1
  7. package/src/code-overrides.css.js.map +1 -1
  8. package/src/detail-overrides.css +1 -1
  9. package/src/detail-overrides.css.dev.js.map +1 -1
  10. package/src/detail-overrides.css.js.map +1 -1
  11. package/src/heading-overrides.css +1 -1
  12. package/src/heading-overrides.css.dev.js.map +1 -1
  13. package/src/heading-overrides.css.js.map +1 -1
  14. package/src/lang-overrides.css.dev.js.map +1 -1
  15. package/src/lang-overrides.css.js.map +1 -1
  16. package/src/spectrum-base.css.dev.js.map +1 -1
  17. package/src/spectrum-base.css.js.map +1 -1
  18. package/src/spectrum-body.css.dev.js.map +1 -1
  19. package/src/spectrum-body.css.js.map +1 -1
  20. package/src/spectrum-code.css.dev.js.map +1 -1
  21. package/src/spectrum-code.css.js.map +1 -1
  22. package/src/spectrum-detail.css.dev.js.map +1 -1
  23. package/src/spectrum-detail.css.js.map +1 -1
  24. package/src/spectrum-heading.css.dev.js.map +1 -1
  25. package/src/spectrum-heading.css.js.map +1 -1
  26. package/src/spectrum-lang.css.dev.js.map +1 -1
  27. package/src/spectrum-lang.css.js.map +1 -1
  28. package/src/spectrum-typography.css.dev.js.map +1 -1
  29. package/src/spectrum-typography.css.js.map +1 -1
  30. package/tokens/express/custom-dark-vars.css +1 -0
  31. package/tokens/express/custom-darkest-vars.css +1 -0
  32. package/tokens/express/custom-large-vars.css +1 -0
  33. package/tokens/express/custom-light-vars.css +1 -0
  34. package/tokens/express/custom-medium-vars.css +1 -0
  35. package/tokens/express/custom-vars.css +1 -0
  36. package/tokens/express/dark-vars.css +0 -1
  37. package/tokens/express/darkest-vars.css +0 -1
  38. package/tokens/express/global-vars.css +0 -7235
  39. package/tokens/express/index.css +213 -0
  40. package/tokens/express/large-vars.css +0 -3
  41. package/tokens/express/light-vars.css +0 -1
  42. package/tokens/express/medium-vars.css +0 -3
  43. package/tokens/express/system-theme-bridge.css +6904 -0
  44. package/tokens/global-vars.css +2 -2
  45. package/tokens/index.css +2266 -1248
  46. package/tokens/spectrum/custom-dark-vars.css +1 -0
  47. package/tokens/spectrum/custom-darkest-vars.css +1 -0
  48. package/tokens/spectrum/custom-large-vars.css +1 -0
  49. package/tokens/spectrum/custom-light-vars.css +1 -0
  50. package/tokens/spectrum/custom-medium-vars.css +1 -0
  51. package/tokens/spectrum/custom-vars.css +1 -0
  52. package/tokens/spectrum/dark-vars.css +13 -10
  53. package/tokens/spectrum/darkest-vars.css +13 -10
  54. package/tokens/spectrum/global-vars.css +24 -7258
  55. package/tokens/spectrum/index.css +708 -0
  56. package/tokens/spectrum/large-vars.css +1 -20
  57. package/tokens/spectrum/light-vars.css +14 -11
  58. package/tokens/spectrum/medium-vars.css +1 -19
  59. package/tokens/spectrum/system-theme-bridge.css +6910 -0
  60. package/tokens-v2/dark-vars.css +0 -10
  61. package/tokens-v2/global-vars.css +16 -24
  62. package/tokens-v2/index.css +16 -88
  63. package/tokens-v2/large-vars.css +0 -20
  64. package/tokens-v2/light-vars.css +0 -10
  65. package/tokens-v2/medium-vars.css +0 -20
  66. package/tokens-v2/spectrum/custom-dark-vars.css +1 -0
  67. package/tokens-v2/spectrum/custom-darkest-vars.css +1 -0
  68. package/tokens-v2/spectrum/custom-large-vars.css +1 -0
  69. package/tokens-v2/spectrum/custom-light-vars.css +1 -0
  70. package/tokens-v2/spectrum/custom-medium-vars.css +1 -0
  71. package/tokens-v2/spectrum/custom-vars.css +1 -0
  72. package/tokens-v2/{spectrum/global-vars.css → system-theme-bridge.css} +348 -672
package/tokens/spectrum/large-vars.css CHANGED
@@ -50,30 +50,24 @@
50
50
  --spectrum-drop-shadow-blur: 6px;
51
51
  --spectrum-slider-tick-mark-height: 13px;
52
52
  --spectrum-slider-ramp-track-height: 20px;
53
-
54
53
  --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0';
55
54
  --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';
56
55
  --spectrum-colorwheel-colorarea-container-size: 182px;
57
-
58
56
  --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
59
-
57
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
60
58
  --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
61
59
  --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
62
60
  --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
63
61
  --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
64
-
65
62
  --spectrum-menu-item-checkmark-height-small: 12px;
66
63
  --spectrum-menu-item-checkmark-height-medium: 14px;
67
64
  --spectrum-menu-item-checkmark-height-large: 16px;
68
65
  --spectrum-menu-item-checkmark-height-extra-large: 16px;
69
-
70
66
  --spectrum-menu-item-checkmark-width-small: 12px;
71
67
  --spectrum-menu-item-checkmark-width-medium: 14px;
72
68
  --spectrum-menu-item-checkmark-width-large: 16px;
73
69
  --spectrum-menu-item-checkmark-width-extra-large: 16px;
74
-
75
70
  --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
76
-
77
71
  --spectrum-button-top-to-text-small: 6px;
78
72
  --spectrum-button-bottom-to-text-small: 5px;
79
73
  --spectrum-button-top-to-text-medium: 9px;
@@ -82,47 +76,39 @@
82
76
  --spectrum-button-bottom-to-text-large: 13px;
83
77
  --spectrum-button-top-to-text-extra-large: 16px;
84
78
  --spectrum-button-bottom-to-text-extra-large: 17px;
85
-
86
79
  --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
87
80
  --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
88
81
  --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
89
82
  --spectrum-alert-banner-text-to-button-vertical: var(
90
83
  --spectrum-spacing-200
91
84
  );
92
-
93
85
  --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
94
86
  --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
95
-
96
87
  --spectrum-coach-indicator-gap: 8px;
97
88
  --spectrum-coach-indicator-ring-diameter: 20px;
98
89
  --spectrum-coach-indicator-quiet-ring-diameter: 10px;
99
-
100
90
  --spectrum-coachmark-buttongroup-display: none;
101
91
  --spectrum-coachmark-buttongroup-mobile-display: flex;
102
92
  --spectrum-coachmark-menu-display: none;
103
93
  --spectrum-coachmark-menu-mobile-display: inline-flex;
104
-
105
94
  --spectrum-well-padding: 20px;
106
95
  --spectrum-well-margin-top: 5px;
107
96
  --spectrum-well-min-width: 300px;
108
97
  --spectrum-well-border-radius: 5px;
109
98
  --spectrum-workflow-icon-size-xxl: 40px;
110
99
  --spectrum-workflow-icon-size-xxs: 15px;
111
-
112
100
  --spectrum-treeview-item-indentation-medium: 20px;
113
101
  --spectrum-treeview-item-indentation-small: 15px;
114
102
  --spectrum-treeview-item-indentation-large: 25px;
115
103
  --spectrum-treeview-item-indentation-extra-large: 30px;
116
104
  --spectrum-treeview-indicator-inset-block-start: 6px;
117
105
  --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
118
-
119
106
  --spectrum-dialog-confirm-entry-animation-distance: 25px;
120
107
  --spectrum-dialog-confirm-hero-height: 160px;
121
108
  --spectrum-dialog-confirm-border-radius: 5px;
122
109
  --spectrum-dialog-confirm-title-text-size: 19px;
123
110
  --spectrum-dialog-confirm-description-text-size: 15px;
124
111
  --spectrum-dialog-confirm-padding-grid: 24px;
125
-
126
112
  --spectrum-datepicker-initial-width: 160px;
127
113
  --spectrum-datepicker-generic-padding: 15px;
128
114
  --spectrum-datepicker-dash-line-height: 30px;
@@ -132,10 +118,8 @@
132
118
  --spectrum-datepicker-invalid-icon-to-button: 10px;
133
119
  --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
134
120
  --spectrum-datepicker-input-datetime-width: 30px;
135
-
136
121
  --spectrum-pagination-textfield-width: 60px;
137
122
  --spectrum-pagination-item-inline-spacing: 6px;
138
-
139
123
  --spectrum-dial-border-radius: 20px;
140
124
  --spectrum-dial-handle-position: 10px;
141
125
  --spectrum-dial-handle-block-margin: 20px;
@@ -143,7 +127,6 @@
143
127
  --spectrum-dial-controls-margin: 10px;
144
128
  --spectrum-dial-label-gap-y: 6px;
145
129
  --spectrum-dial-label-container-top-to-text: 5px;
146
-
147
130
  --spectrum-assetcard-focus-ring-border-radius: 9px;
148
131
  --spectrum-assetcard-selectionindicator-margin: 15px;
149
132
  --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
@@ -151,9 +134,7 @@
151
134
  --spectrum-heading-size-xxs
152
135
  );
153
136
  --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
154
-
155
137
  --spectrum-tooltip-animation-distance: 5px;
156
-
157
138
  --spectrum-ui-icon-medium-display: none;
158
139
  --spectrum-ui-icon-large-display: block;
159
140
  }
package/tokens/spectrum/light-vars.css CHANGED
@@ -17,7 +17,6 @@
17
17
  );
18
18
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
19
19
  --spectrum-dropindicator-color: var(--spectrum-blue-800);
20
-
21
20
  --spectrum-calendar-day-background-color-selected: rgba(
22
21
  var(--spectrum-blue-900-rgb),
23
22
  0.1
@@ -46,19 +45,15 @@
46
45
  0.06
47
46
  );
48
47
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
49
-
48
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
50
49
  --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
51
-
52
50
  --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
53
51
  --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
54
52
  --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
55
-
56
- --spectrum-well-border-color: var(--spectrum-black-rgb);
57
-
53
+ --spectrum-well-border-color: var(--spectrum-black);
58
54
  --spectrum-steplist-current-marker-color-key-focus: var(
59
55
  --spectrum-blue-800
60
56
  );
61
-
62
57
  --spectrum-treeview-item-background-color-quiet-selected: rgba(
63
58
  var(--spectrum-gray-900-rgb),
64
59
  0.06
@@ -67,21 +62,18 @@
67
62
  var(--spectrum-blue-900-rgb),
68
63
  0.1
69
64
  );
70
-
71
65
  --spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
72
66
  --spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
73
67
  --spectrum-logic-button-and-background-color-hover: var(
74
68
  --spectrum-blue-1100
75
69
  );
76
70
  --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
77
-
78
71
  --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
79
72
  --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
80
73
  --spectrum-logic-button-or-background-color-hover: var(
81
74
  --spectrum-magenta-1100
82
75
  );
83
76
  --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
84
-
85
77
  --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
86
78
  --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
87
79
  --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
@@ -89,7 +81,6 @@
89
81
  --spectrum-blue-900
90
82
  );
91
83
  --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
92
-
93
84
  --spectrum-assetlist-item-background-color-selected-hover: rgba(
94
85
  var(--spectrum-blue-900-rgb),
95
86
  0.2
@@ -99,4 +90,16 @@
99
90
  0.1
100
91
  );
101
92
  --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
93
+ --spectrum-swatch-border-color-rgb: 0, 0, 0;
94
+ --spectrum-swatch-border-color-opacity: 0.51;
95
+ --spectrum-swatch-border-color: rgba(
96
+ var(--spectrum-swatch-border-color-rgb),
97
+ var(--spectrum-swatch-border-color-opacity)
98
+ );
99
+ --spectrum-swatch-border-color-light-rgb: 0, 0, 0;
100
+ --spectrum-swatch-border-color-light-opacity: 0.2;
101
+ --spectrum-swatch-border-color-light: rgba(
102
+ var(--spectrum-swatch-border-color-light-rgb),
103
+ var(--spectrum-swatch-border-color-light-opacity)
104
+ );
102
105
  }
package/tokens/spectrum/medium-vars.css CHANGED
@@ -50,30 +50,24 @@
50
50
  --spectrum-drop-shadow-blur: 4px;
51
51
  --spectrum-slider-tick-mark-height: 10px;
52
52
  --spectrum-slider-ramp-track-height: 16px;
53
-
54
53
  --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0';
55
54
  --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';
56
55
  --spectrum-colorwheel-colorarea-container-size: 144px;
57
-
58
56
  --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
59
-
57
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
60
58
  --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
61
59
  --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
62
60
  --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
63
61
  --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
64
-
65
62
  --spectrum-menu-item-checkmark-height-small: 10px;
66
63
  --spectrum-menu-item-checkmark-height-medium: 10px;
67
64
  --spectrum-menu-item-checkmark-height-large: 12px;
68
65
  --spectrum-menu-item-checkmark-height-extra-large: 14px;
69
-
70
66
  --spectrum-menu-item-checkmark-width-small: 10px;
71
67
  --spectrum-menu-item-checkmark-width-medium: 10px;
72
68
  --spectrum-menu-item-checkmark-width-large: 12px;
73
69
  --spectrum-menu-item-checkmark-width-extra-large: 14px;
74
-
75
70
  --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
76
-
77
71
  --spectrum-button-top-to-text-small: 5px;
78
72
  --spectrum-button-bottom-to-text-small: 4px;
79
73
  --spectrum-button-top-to-text-medium: 7px;
@@ -82,21 +76,17 @@
82
76
  --spectrum-button-bottom-to-text-large: 10px;
83
77
  --spectrum-button-top-to-text-extra-large: 13px;
84
78
  --spectrum-button-bottom-to-text-extra-large: 13px;
85
-
86
79
  --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
87
80
  --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
88
81
  --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
89
82
  --spectrum-alert-banner-text-to-button-vertical: var(
90
83
  --spectrum-spacing-100
91
84
  );
92
-
93
85
  --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
94
86
  --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
95
-
96
87
  --spectrum-coach-indicator-gap: 6px;
97
88
  --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
98
89
  --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
99
-
100
90
  --spectrum-coachmark-buttongroup-display: flex;
101
91
  --spectrum-coachmark-buttongroup-mobile-display: none;
102
92
  --spectrum-coachmark-menu-display: inline-flex;
@@ -107,7 +97,6 @@
107
97
  --spectrum-well-border-radius: var(--spectrum-spacing-75);
108
98
  --spectrum-workflow-icon-size-xxl: 32px;
109
99
  --spectrum-workflow-icon-size-xxs: 12px;
110
-
111
100
  --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
112
101
  --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
113
102
  --spectrum-treeview-item-indentation-large: 20px;
@@ -116,14 +105,12 @@
116
105
  );
117
106
  --spectrum-treeview-indicator-inset-block-start: 5px;
118
107
  --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
119
-
120
108
  --spectrum-dialog-confirm-entry-animation-distance: 20px;
121
109
  --spectrum-dialog-confirm-hero-height: 128px;
122
110
  --spectrum-dialog-confirm-border-radius: 4px;
123
111
  --spectrum-dialog-confirm-title-text-size: 18px;
124
112
  --spectrum-dialog-confirm-description-text-size: 14px;
125
113
  --spectrum-dialog-confirm-padding-grid: 40px;
126
-
127
114
  --spectrum-datepicker-initial-width: 128px;
128
115
  --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
129
116
  --spectrum-datepicker-dash-line-height: 24px;
@@ -133,10 +120,8 @@
133
120
  --spectrum-datepicker-invalid-icon-to-button: 8px;
134
121
  --spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
135
122
  --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
136
-
137
123
  --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
138
124
  --spectrum-pagination-item-inline-spacing: 5px;
139
-
140
125
  --spectrum-dial-border-radius: 16px;
141
126
  --spectrum-dial-handle-position: 8px;
142
127
  --spectrum-dial-handle-block-margin: 16px;
@@ -144,7 +129,6 @@
144
129
  --spectrum-dial-controls-margin: 8px;
145
130
  --spectrum-dial-label-gap-y: 5px;
146
131
  --spectrum-dial-label-container-top-to-text: 4px;
147
-
148
132
  --spectrum-assetcard-focus-ring-border-radius: 8px;
149
133
  --spectrum-assetcard-selectionindicator-margin: 12px;
150
134
  --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
@@ -152,9 +136,7 @@
152
136
  --spectrum-heading-size-xs
153
137
  );
154
138
  --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
155
-
156
139
  --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
157
-
158
140
  --spectrum-ui-icon-medium-display: block;
159
141
  --spectrum-ui-icon-large-display: none;
160
142
  }