@carbon/themes 10.33.0 → 10.35.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 +110 -28
  2. package/index.scss +1 -0
  3. package/lib/index.js +160 -22
  4. package/package.json +7 -7
  5. package/scss/generated/_mixins.scss +157 -0
  6. package/scss/generated/_themes.scss +100 -2
  7. package/scss/generated/_tokens.scss +126 -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 +13 -2
  12. package/src/g100.js +11 -0
  13. package/src/g80.js +11 -0
  14. package/src/g90.js +11 -0
  15. package/src/tokens.js +4 -0
  16. package/src/v9.js +13 -1
  17. package/src/white.js +13 -2
  18. package/umd/index.js +160 -22
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;
@@ -233,8 +235,11 @@ export const skeletonElement = skeleton02;
233
235
  export {
234
236
  // Type
235
237
  caption01,
238
+ caption02,
236
239
  label01,
240
+ label02,
237
241
  helperText01,
242
+ helperText02,
238
243
  bodyShort01,
239
244
  bodyLong01,
240
245
  bodyShort02,
@@ -298,6 +303,12 @@ export {
298
303
  container03,
299
304
  container04,
300
305
  container05,
306
+ sizeXSmall,
307
+ sizeSmall,
308
+ sizeMedium,
309
+ sizeLarge,
310
+ sizeXLarge,
311
+ size2XLarge,
301
312
  // Icon sizes
302
313
  iconSize01,
303
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;
@@ -232,8 +234,11 @@ export const skeletonElement = skeleton02;
232
234
  export {
233
235
  // Type
234
236
  caption01,
237
+ caption02,
235
238
  label01,
239
+ label02,
236
240
  helperText01,
241
+ helperText02,
237
242
  bodyShort01,
238
243
  bodyLong01,
239
244
  bodyShort02,
@@ -297,6 +302,12 @@ export {
297
302
  container03,
298
303
  container04,
299
304
  container05,
305
+ sizeXSmall,
306
+ sizeSmall,
307
+ sizeMedium,
308
+ sizeLarge,
309
+ sizeXLarge,
310
+ size2XLarge,
300
311
  // Icon sizes
301
312
  iconSize01,
302
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;
@@ -236,8 +238,11 @@ export const skeleton02 = skeletonElement;
236
238
  export {
237
239
  // Type
238
240
  caption01,
241
+ caption02,
239
242
  label01,
243
+ label02,
240
244
  helperText01,
245
+ helperText02,
241
246
  bodyShort01,
242
247
  bodyLong01,
243
248
  bodyShort02,
@@ -301,6 +306,12 @@ export {
301
306
  container03,
302
307
  container04,
303
308
  container05,
309
+ sizeXSmall,
310
+ sizeSmall,
311
+ sizeMedium,
312
+ sizeLarge,
313
+ sizeXLarge,
314
+ size2XLarge,
304
315
  // Icon sizes
305
316
  iconSize01,
306
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;
@@ -234,8 +236,11 @@ export const skeletonElement = skeleton02;
234
236
  export {
235
237
  // Type
236
238
  caption01,
239
+ caption02,
237
240
  label01,
241
+ label02,
238
242
  helperText01,
243
+ helperText02,
239
244
  bodyShort01,
240
245
  bodyLong01,
241
246
  bodyShort02,
@@ -299,6 +304,12 @@ export {
299
304
  container03,
300
305
  container04,
301
306
  container05,
307
+ sizeXSmall,
308
+ sizeSmall,
309
+ sizeMedium,
310
+ sizeLarge,
311
+ sizeXLarge,
312
+ size2XLarge,
302
313
  // Icon sizes
303
314
  iconSize01,
304
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;
@@ -197,8 +200,11 @@ export const skeletonElement = skeleton02;
197
200
  export {
198
201
  // Type
199
202
  caption01,
203
+ caption02,
200
204
  label01,
205
+ label02,
201
206
  helperText01,
207
+ helperText02,
202
208
  bodyShort01,
203
209
  bodyLong01,
204
210
  bodyShort02,
@@ -262,6 +268,12 @@ export {
262
268
  container03,
263
269
  container04,
264
270
  container05,
271
+ sizeXSmall,
272
+ sizeSmall,
273
+ sizeMedium,
274
+ sizeLarge,
275
+ sizeXLarge,
276
+ size2XLarge,
265
277
  // Icon sizes
266
278
  iconSize01,
267
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;
@@ -233,8 +235,11 @@ export const skeletonElement = skeleton02;
233
235
  // Type
234
236
  export {
235
237
  caption01,
238
+ caption02,
236
239
  label01,
240
+ label02,
237
241
  helperText01,
242
+ helperText02,
238
243
  bodyShort01,
239
244
  bodyLong01,
240
245
  bodyShort02,
@@ -301,6 +306,12 @@ export {
301
306
  container03,
302
307
  container04,
303
308
  container05,
309
+ sizeXSmall,
310
+ sizeSmall,
311
+ sizeMedium,
312
+ sizeLarge,
313
+ sizeXLarge,
314
+ size2XLarge,
304
315
  // Icon sizes
305
316
  iconSize01,
306
317
  iconSize02,