@carbon/themes 10.34.0-rc.0 → 10.36.0

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 (18) hide show
  1. package/es/index.js +68 -8
  2. package/index.scss +1 -0
  3. package/lib/index.js +102 -4
  4. package/package.json +7 -7
  5. package/scss/generated/_mixins.scss +205 -0
  6. package/scss/generated/_themes.scss +65 -2
  7. package/scss/generated/_tokens.scss +82 -2
  8. package/scss/modules/_tokens.scss +8 -0
  9. package/scss/modules/generated/_themes.scss +10 -2
  10. package/scss/modules/generated/_tokens.scss +227 -0
  11. package/src/g10.js +10 -2
  12. package/src/g100.js +8 -0
  13. package/src/g80.js +8 -0
  14. package/src/g90.js +8 -0
  15. package/src/tokens.js +4 -0
  16. package/src/v9.js +10 -1
  17. package/src/white.js +10 -2
  18. package/umd/index.js +102 -4
package/scss/modules/generated/_tokens.scss ADDED
@@ -0,0 +1,227 @@
1
+ // Code generated by @carbon/themes. DO NOT EDIT.
2
+ //
3
+ // Copyright IBM Corp. 2018, 2019
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ $interactive-01: var(--cds-interactive-01);
10
+ $interactive-02: var(--cds-interactive-02);
11
+ $interactive-03: var(--cds-interactive-03);
12
+ $interactive-04: var(--cds-interactive-04);
13
+ $ui-background: var(--cds-ui-background);
14
+ $ui-01: var(--cds-ui-01);
15
+ $ui-02: var(--cds-ui-02);
16
+ $ui-03: var(--cds-ui-03);
17
+ $ui-04: var(--cds-ui-04);
18
+ $ui-05: var(--cds-ui-05);
19
+ $text-01: var(--cds-text-01);
20
+ $text-02: var(--cds-text-02);
21
+ $text-03: var(--cds-text-03);
22
+ $text-04: var(--cds-text-04);
23
+ $text-05: var(--cds-text-05);
24
+ $text-error: var(--cds-text-error);
25
+ $icon-01: var(--cds-icon-01);
26
+ $icon-02: var(--cds-icon-02);
27
+ $icon-03: var(--cds-icon-03);
28
+ $link-01: var(--cds-link-01);
29
+ $link-02: var(--cds-link-02);
30
+ $inverse-link: var(--cds-inverse-link);
31
+ $field-01: var(--cds-field-01);
32
+ $field-02: var(--cds-field-02);
33
+ $inverse-01: var(--cds-inverse-01);
34
+ $inverse-02: var(--cds-inverse-02);
35
+ $support-01: var(--cds-support-01);
36
+ $support-02: var(--cds-support-02);
37
+ $support-03: var(--cds-support-03);
38
+ $support-04: var(--cds-support-04);
39
+ $inverse-support-01: var(--cds-inverse-support-01);
40
+ $inverse-support-02: var(--cds-inverse-support-02);
41
+ $inverse-support-03: var(--cds-inverse-support-03);
42
+ $inverse-support-04: var(--cds-inverse-support-04);
43
+ $overlay-01: var(--cds-overlay-01);
44
+ $danger-01: var(--cds-danger-01);
45
+ $danger-02: var(--cds-danger-02);
46
+ $focus: var(--cds-focus);
47
+ $inverse-focus-ui: var(--cds-inverse-focus-ui);
48
+ $hover-primary: var(--cds-hover-primary);
49
+ $active-primary: var(--cds-active-primary);
50
+ $hover-primary-text: var(--cds-hover-primary-text);
51
+ $hover-secondary: var(--cds-hover-secondary);
52
+ $active-secondary: var(--cds-active-secondary);
53
+ $hover-tertiary: var(--cds-hover-tertiary);
54
+ $active-tertiary: var(--cds-active-tertiary);
55
+ $hover-ui: var(--cds-hover-ui);
56
+ $hover-light-ui: var(--cds-hover-light-ui);
57
+ $hover-selected-ui: var(--cds-hover-selected-ui);
58
+ $active-ui: var(--cds-active-ui);
59
+ $active-light-ui: var(--cds-active-light-ui);
60
+ $selected-ui: var(--cds-selected-ui);
61
+ $selected-light-ui: var(--cds-selected-light-ui);
62
+ $inverse-hover-ui: var(--cds-inverse-hover-ui);
63
+ $hover-danger: var(--cds-hover-danger);
64
+ $active-danger: var(--cds-active-danger);
65
+ $hover-row: var(--cds-hover-row);
66
+ $visited-link: var(--cds-visited-link);
67
+ $disabled-01: var(--cds-disabled-01);
68
+ $disabled-02: var(--cds-disabled-02);
69
+ $disabled-03: var(--cds-disabled-03);
70
+ $highlight: var(--cds-highlight);
71
+ $decorative-01: var(--cds-decorative-01);
72
+ $button-separator: var(--cds-button-separator);
73
+ $skeleton-01: var(--cds-skeleton-01);
74
+ $skeleton-02: var(--cds-skeleton-02);
75
+ $background: var(--cds-background);
76
+ $layer: var(--cds-layer);
77
+ $layer-accent: var(--cds-layer-accent);
78
+ $layer-accent-hover: var(--cds-layer-accent-hover);
79
+ $layer-accent-active: var(--cds-layer-accent-active);
80
+ $field: var(--cds-field);
81
+ $background-inverse: var(--cds-background-inverse);
82
+ $background-brand: var(--cds-background-brand);
83
+ $interactive: var(--cds-interactive);
84
+ $border-subtle: var(--cds-border-subtle);
85
+ $border-strong: var(--cds-border-strong);
86
+ $border-inverse: var(--cds-border-inverse);
87
+ $border-interactive: var(--cds-border-interactive);
88
+ $text-primary: var(--cds-text-primary);
89
+ $text-secondary: var(--cds-text-secondary);
90
+ $text-placeholder: var(--cds-text-placeholder);
91
+ $text-helper: var(--cds-text-helper);
92
+ $text-on-color: var(--cds-text-on-color);
93
+ $text-inverse: var(--cds-text-inverse);
94
+ $link-primary: var(--cds-link-primary);
95
+ $link-secondary: var(--cds-link-secondary);
96
+ $link-visited: var(--cds-link-visited);
97
+ $link-inverse: var(--cds-link-inverse);
98
+ $icon-primary: var(--cds-icon-primary);
99
+ $icon-secondary: var(--cds-icon-secondary);
100
+ $icon-on-color: var(--cds-icon-on-color);
101
+ $icon-inverse: var(--cds-icon-inverse);
102
+ $support-error: var(--cds-support-error);
103
+ $support-success: var(--cds-support-success);
104
+ $support-warning: var(--cds-support-warning);
105
+ $support-info: var(--cds-support-info);
106
+ $support-error-inverse: var(--cds-support-error-inverse);
107
+ $support-success-inverse: var(--cds-support-success-inverse);
108
+ $support-warning-inverse: var(--cds-support-warning-inverse);
109
+ $support-info-inverse: var(--cds-support-info-inverse);
110
+ $overlay: var(--cds-overlay);
111
+ $toggle-off: var(--cds-toggle-off);
112
+ $button-primary: var(--cds-button-primary);
113
+ $button-secondary: var(--cds-button-secondary);
114
+ $button-tertiary: var(--cds-button-tertiary);
115
+ $button-danger-primary: var(--cds-button-danger-primary);
116
+ $button-danger-secondary: var(--cds-button-danger-secondary);
117
+ $background-active: var(--cds-background-active);
118
+ $layer-active: var(--cds-layer-active);
119
+ $button-danger-active: var(--cds-button-danger-active);
120
+ $button-primary-active: var(--cds-button-primary-active);
121
+ $button-secondary-active: var(--cds-button-secondary-active);
122
+ $button-tertiary-active: var(--cds-button-tertiary-active);
123
+ $focus-inset: var(--cds-focus-inset);
124
+ $focus-inverse: var(--cds-focus-inverse);
125
+ $background-hover: var(--cds-background-hover);
126
+ $layer-hover: var(--cds-layer-hover);
127
+ $field-hover: var(--cds-field-hover);
128
+ $background-inverse-hover: var(--cds-background-inverse-hover);
129
+ $link-primary-hover: var(--cds-link-primary-hover);
130
+ $button-danger-hover: var(--cds-button-danger-hover);
131
+ $button-primary-hover: var(--cds-button-primary-hover);
132
+ $button-secondary-hover: var(--cds-button-secondary-hover);
133
+ $button-tertiary-hover: var(--cds-button-tertiary-hover);
134
+ $background-selected: var(--cds-background-selected);
135
+ $background-selected-hover: var(--cds-background-selected-hover);
136
+ $layer-selected: var(--cds-layer-selected);
137
+ $layer-selected-hover: var(--cds-layer-selected-hover);
138
+ $layer-selected-inverse: var(--cds-layer-selected-inverse);
139
+ $border-subtle-selected: var(--cds-border-subtle-selected);
140
+ $layer-disabled: var(--cds-layer-disabled);
141
+ $field-disabled: var(--cds-field-disabled);
142
+ $border-disabled: var(--cds-border-disabled);
143
+ $text-disabled: var(--cds-text-disabled);
144
+ $button-disabled: var(--cds-button-disabled);
145
+ $icon-disabled: var(--cds-icon-disabled);
146
+ $text-on-color-disabled: var(--cds-text-on-color-disabled);
147
+ $icon-on-color-disabled: var(--cds-icon-on-color-disabled);
148
+ $layer-selected-disabled: var(--cds-layer-selected-disabled);
149
+ $skeleton-background: var(--cds-skeleton-background);
150
+ $skeleton-element: var(--cds-skeleton-element);
151
+ $brand-01: var(--cds-brand-01);
152
+ $brand-02: var(--cds-brand-02);
153
+ $brand-03: var(--cds-brand-03);
154
+ $active-01: var(--cds-active-01);
155
+ $hover-field: var(--cds-hover-field);
156
+ $danger: var(--cds-danger);
157
+ $caption-01: var(--cds-caption-01);
158
+ $caption-02: var(--cds-caption-02);
159
+ $label-01: var(--cds-label-01);
160
+ $label-02: var(--cds-label-02);
161
+ $helper-text-01: var(--cds-helper-text-01);
162
+ $helper-text-02: var(--cds-helper-text-02);
163
+ $body-short-01: var(--cds-body-short-01);
164
+ $body-long-01: var(--cds-body-long-01);
165
+ $body-short-02: var(--cds-body-short-02);
166
+ $body-long-02: var(--cds-body-long-02);
167
+ $code-01: var(--cds-code-01);
168
+ $code-02: var(--cds-code-02);
169
+ $heading-01: var(--cds-heading-01);
170
+ $productive-heading-01: var(--cds-productive-heading-01);
171
+ $heading-02: var(--cds-heading-02);
172
+ $productive-heading-02: var(--cds-productive-heading-02);
173
+ $productive-heading-03: var(--cds-productive-heading-03);
174
+ $productive-heading-04: var(--cds-productive-heading-04);
175
+ $productive-heading-05: var(--cds-productive-heading-05);
176
+ $productive-heading-06: var(--cds-productive-heading-06);
177
+ $productive-heading-07: var(--cds-productive-heading-07);
178
+ $expressive-heading-01: var(--cds-expressive-heading-01);
179
+ $expressive-heading-02: var(--cds-expressive-heading-02);
180
+ $expressive-heading-03: var(--cds-expressive-heading-03);
181
+ $expressive-heading-04: var(--cds-expressive-heading-04);
182
+ $expressive-heading-05: var(--cds-expressive-heading-05);
183
+ $expressive-heading-06: var(--cds-expressive-heading-06);
184
+ $expressive-paragraph-01: var(--cds-expressive-paragraph-01);
185
+ $quotation-01: var(--cds-quotation-01);
186
+ $quotation-02: var(--cds-quotation-02);
187
+ $display-01: var(--cds-display-01);
188
+ $display-02: var(--cds-display-02);
189
+ $display-03: var(--cds-display-03);
190
+ $display-04: var(--cds-display-04);
191
+ $spacing-01: var(--cds-spacing-01);
192
+ $spacing-02: var(--cds-spacing-02);
193
+ $spacing-03: var(--cds-spacing-03);
194
+ $spacing-04: var(--cds-spacing-04);
195
+ $spacing-05: var(--cds-spacing-05);
196
+ $spacing-06: var(--cds-spacing-06);
197
+ $spacing-07: var(--cds-spacing-07);
198
+ $spacing-08: var(--cds-spacing-08);
199
+ $spacing-09: var(--cds-spacing-09);
200
+ $spacing-10: var(--cds-spacing-10);
201
+ $spacing-11: var(--cds-spacing-11);
202
+ $spacing-12: var(--cds-spacing-12);
203
+ $spacing-13: var(--cds-spacing-13);
204
+ $fluid-spacing-01: var(--cds-fluid-spacing-01);
205
+ $fluid-spacing-02: var(--cds-fluid-spacing-02);
206
+ $fluid-spacing-03: var(--cds-fluid-spacing-03);
207
+ $fluid-spacing-04: var(--cds-fluid-spacing-04);
208
+ $layout-01: var(--cds-layout-01);
209
+ $layout-02: var(--cds-layout-02);
210
+ $layout-03: var(--cds-layout-03);
211
+ $layout-04: var(--cds-layout-04);
212
+ $layout-05: var(--cds-layout-05);
213
+ $layout-06: var(--cds-layout-06);
214
+ $layout-07: var(--cds-layout-07);
215
+ $container-01: var(--cds-container-01);
216
+ $container-02: var(--cds-container-02);
217
+ $container-03: var(--cds-container-03);
218
+ $container-04: var(--cds-container-04);
219
+ $container-05: var(--cds-container-05);
220
+ $size-xsmall: var(--cds-size-xsmall);
221
+ $size-small: var(--cds-size-small);
222
+ $size-medium: var(--cds-size-medium);
223
+ $size-large: var(--cds-size-large);
224
+ $size-xlarge: var(--cds-size-xlarge);
225
+ $size-2XLarge: var(--cds-size-2XLarge);
226
+ $icon-size-01: var(--cds-icon-size-01);
227
+ $icon-size-02: var(--cds-icon-size-02);
package/src/g10.js CHANGED
@@ -28,7 +28,7 @@ import {
28
28
  // Support
29
29
  blue50,
30
30
  green40,
31
- green50,
31
+ green60,
32
32
  yellow,
33
33
  red50,
34
34
  red60,
@@ -78,7 +78,7 @@ export const inverse01 = white;
78
78
  export const inverse02 = gray80;
79
79
 
80
80
  export const support01 = red60;
81
- export const support02 = green50;
81
+ export const support02 = green60;
82
82
  export const support03 = yellow;
83
83
  export const support04 = blue70;
84
84
 
@@ -142,6 +142,8 @@ export const skeleton02 = gray30;
142
142
  export const background = uiBackground;
143
143
  export const layer = ui01;
144
144
  export const layerAccent = ui03;
145
+ export const layerAccentActive = gray40;
146
+ export const layerAccentHover = adjustLightness(layerAccent, -6);
145
147
  export const field = field01;
146
148
  export const backgroundInverse = inverse02;
147
149
  export const backgroundBrand = interactive01;
@@ -301,6 +303,12 @@ export {
301
303
  container03,
302
304
  container04,
303
305
  container05,
306
+ sizeXSmall,
307
+ sizeSmall,
308
+ sizeMedium,
309
+ sizeLarge,
310
+ sizeXLarge,
311
+ size2XLarge,
304
312
  // Icon sizes
305
313
  iconSize01,
306
314
  iconSize02,
package/src/g100.js CHANGED
@@ -141,6 +141,8 @@ export const skeleton02 = gray70;
141
141
  export const background = uiBackground;
142
142
  export const layer = ui01;
143
143
  export const layerAccent = ui03;
144
+ export const layerAccentActive = gray60;
145
+ export const layerAccentHover = adjustLightness(layerAccent, +6);
144
146
  export const field = field01;
145
147
  export const backgroundInverse = inverse02;
146
148
  export const backgroundBrand = interactive01;
@@ -300,6 +302,12 @@ export {
300
302
  container03,
301
303
  container04,
302
304
  container05,
305
+ sizeXSmall,
306
+ sizeSmall,
307
+ sizeMedium,
308
+ sizeLarge,
309
+ sizeXLarge,
310
+ size2XLarge,
303
311
  // Icon sizes
304
312
  iconSize01,
305
313
  iconSize02,
package/src/g80.js CHANGED
@@ -47,6 +47,8 @@ import {
47
47
  export const background = gray80;
48
48
  export const layer = gray70;
49
49
  export const layerAccent = gray60;
50
+ export const layerAccentActive = gray70;
51
+ export const layerAccentHover = adjustLightness(layerAccent, -7);
50
52
  export const field = gray70;
51
53
  export const backgroundInverse = gray10;
52
54
  export const backgroundBrand = blue60;
@@ -304,6 +306,12 @@ export {
304
306
  container03,
305
307
  container04,
306
308
  container05,
309
+ sizeXSmall,
310
+ sizeSmall,
311
+ sizeMedium,
312
+ sizeLarge,
313
+ sizeXLarge,
314
+ size2XLarge,
307
315
  // Icon sizes
308
316
  iconSize01,
309
317
  iconSize02,
package/src/g90.js CHANGED
@@ -143,6 +143,8 @@ export const skeleton02 = gray70;
143
143
  export const background = uiBackground;
144
144
  export const layer = ui01;
145
145
  export const layerAccent = ui03;
146
+ export const layerAccentActive = gray50;
147
+ export const layerAccentHover = adjustLightness(layerAccent, +7);
146
148
  export const field = field01;
147
149
  export const backgroundInverse = inverse02;
148
150
  export const backgroundBrand = interactive01;
@@ -302,6 +304,12 @@ export {
302
304
  container03,
303
305
  container04,
304
306
  container05,
307
+ sizeXSmall,
308
+ sizeSmall,
309
+ sizeMedium,
310
+ sizeLarge,
311
+ sizeXLarge,
312
+ size2XLarge,
305
313
  // Icon sizes
306
314
  iconSize01,
307
315
  iconSize02,
package/src/tokens.js CHANGED
@@ -110,6 +110,8 @@ const colors = [
110
110
  'background',
111
111
  'layer',
112
112
  'layerAccent',
113
+ 'layerAccentHover',
114
+ 'layerAccentActive',
113
115
  'field',
114
116
  'backgroundInverse',
115
117
  'backgroundBrand',
@@ -304,6 +306,8 @@ export const unstable__meta = {
304
306
  'background',
305
307
  'layer',
306
308
  'layerAccent',
309
+ 'layerAccentHover',
310
+ 'layerAccentActive',
307
311
  'field',
308
312
  'backgroundInverse',
309
313
  'backgroundBrand',
package/src/v9.js CHANGED
@@ -5,7 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { white, red60 } from '@carbon/colors';
8
+ import { adjustLightness } from './tools';
9
+ import { white, red60, gray40 } from '@carbon/colors';
9
10
 
10
11
  export const interactive01 = '#3d70b2';
11
12
  export const interactive02 = '#4d5358';
@@ -106,6 +107,8 @@ export const skeleton02 = 'rgba(61, 112, 178, .1)';
106
107
  export const background = uiBackground;
107
108
  export const layer = ui01;
108
109
  export const layerAccent = ui03;
110
+ export const layerAccentActive = gray40;
111
+ export const layerAccentHover = adjustLightness(layerAccent, -6);
109
112
  export const field = field01;
110
113
  export const backgroundInverse = inverse02;
111
114
  export const backgroundBrand = interactive01;
@@ -265,6 +268,12 @@ export {
265
268
  container03,
266
269
  container04,
267
270
  container05,
271
+ sizeXSmall,
272
+ sizeSmall,
273
+ sizeMedium,
274
+ sizeLarge,
275
+ sizeXLarge,
276
+ size2XLarge,
268
277
  // Icon sizes
269
278
  iconSize01,
270
279
  iconSize02,
package/src/white.js CHANGED
@@ -28,7 +28,7 @@ import {
28
28
  // Support
29
29
  blue50,
30
30
  green40,
31
- green50,
31
+ green60,
32
32
  yellow,
33
33
  red50,
34
34
  red60,
@@ -78,7 +78,7 @@ export const inverse01 = white;
78
78
  export const inverse02 = gray80;
79
79
 
80
80
  export const support01 = red60;
81
- export const support02 = green50;
81
+ export const support02 = green60;
82
82
  export const support03 = yellow;
83
83
  export const support04 = blue70;
84
84
 
@@ -142,6 +142,8 @@ export const skeleton02 = gray30;
142
142
  export const background = uiBackground;
143
143
  export const layer = ui01;
144
144
  export const layerAccent = ui03;
145
+ export const layerAccentActive = gray40;
146
+ export const layerAccentHover = adjustLightness(layerAccent, -6);
145
147
  export const field = field01;
146
148
  export const backgroundInverse = inverse02;
147
149
  export const backgroundBrand = interactive01;
@@ -304,6 +306,12 @@ export {
304
306
  container03,
305
307
  container04,
306
308
  container05,
309
+ sizeXSmall,
310
+ sizeSmall,
311
+ sizeMedium,
312
+ sizeLarge,
313
+ sizeXLarge,
314
+ size2XLarge,
307
315
  // Icon sizes
308
316
  iconSize01,
309
317
  iconSize02,