@carbon/elements 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 (14) hide show
  1. package/package.json +10 -10
  2. package/scss/colors/mixins.scss +875 -548
  3. package/scss/grid/vendor/@carbon/layout/generated/_size.scss +17 -0
  4. package/scss/layout/generated/_size.scss +17 -0
  5. package/scss/themes/generated/_mixins.scss +157 -0
  6. package/scss/themes/generated/_themes.scss +100 -2
  7. package/scss/themes/generated/_tokens.scss +126 -2
  8. package/scss/themes/modules/_tokens.scss +8 -0
  9. package/scss/themes/modules/generated/_themes.scss +10 -2
  10. package/scss/themes/modules/generated/_tokens.scss +227 -0
  11. package/scss/type/_inlined/_styles.scss +35 -1
  12. package/scss/type/_styles.scss +35 -1
  13. package/scss/type/vendor/@carbon/layout/generated/_size.scss +17 -0
  14. package/src/__tests__/__snapshots__/PublicAPI-test.js.snap +11 -0
package/scss/themes/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/scss/type/_inlined/_styles.scss CHANGED
@@ -19,6 +19,16 @@ $caption-01: (
19
19
  letter-spacing: 0.32px,
20
20
  ) !default;
21
21
 
22
+ /// @type Map
23
+ /// @access public
24
+ /// @group @carbon/type
25
+ $caption-02: (
26
+ font-size: carbon--type-scale(2),
27
+ font-weight: carbon--font-weight('regular'),
28
+ line-height: 1.29,
29
+ letter-spacing: 0.32px,
30
+ ) !default;
31
+
22
32
  /// @type Map
23
33
  /// @access public
24
34
  /// @group @carbon/type
@@ -29,6 +39,16 @@ $label-01: (
29
39
  letter-spacing: 0.32px,
30
40
  ) !default;
31
41
 
42
+ /// @type Map
43
+ /// @access public
44
+ /// @group @carbon/type
45
+ $label-02: (
46
+ font-size: carbon--type-scale(2),
47
+ font-weight: carbon--font-weight('regular'),
48
+ line-height: 1.29,
49
+ letter-spacing: 0.32px,
50
+ ) !default;
51
+
32
52
  /// @type Map
33
53
  /// @access public
34
54
  /// @group @carbon/type
@@ -38,6 +58,16 @@ $helper-text-01: (
38
58
  letter-spacing: 0.32px,
39
59
  ) !default;
40
60
 
61
+ /// @type Map
62
+ /// @access public
63
+ /// @group @carbon/type
64
+ $helper-text-02: (
65
+ font-size: carbon--type-scale(2),
66
+ font-weight: carbon--font-weight('regular'),
67
+ line-height: 1.29,
68
+ letter-spacing: 0.32px,
69
+ ) !default;
70
+
41
71
  /// @type Map
42
72
  /// @access public
43
73
  /// @group @carbon/type
@@ -488,8 +518,11 @@ $display-04: (
488
518
  /// @group @carbon/type
489
519
  $tokens: (
490
520
  caption-01: $caption-01,
521
+ caption-02: $caption-02,
491
522
  label-01: $label-01,
523
+ label-02: $label-02,
492
524
  helper-text-01: $helper-text-01,
525
+ helper-text-02: $helper-text-02,
493
526
  body-short-01: $body-short-01,
494
527
  body-short-02: $body-short-02,
495
528
  body-long-01: $body-long-01,
@@ -696,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
696
729
 
697
730
  // If $fluid is set to true and the token has breakpoints defined for fluid
698
731
  // styles, delegate to the fluid-type helper for the given token
732
+ // Otherwise remove token breakpoints
699
733
  @if $fluid == true and map-has-key($token, 'breakpoints') {
700
734
  @include fluid-type($token, $breakpoints);
701
735
  } @else {
702
736
  @if global-variable-exists('feature-flags') and
703
737
  map-get($feature-flags, 'enable-css-custom-properties')
704
738
  {
705
- @include custom-properties($name, $token);
739
+ @include custom-properties($name, map-remove($token, 'breakpoints'));
706
740
  } @else {
707
741
  // Otherwise, we just include all the property declarations directly on the
708
742
  // selector
package/scss/type/_styles.scss CHANGED
@@ -19,6 +19,16 @@ $caption-01: (
19
19
  letter-spacing: 0.32px,
20
20
  ) !default;
21
21
 
22
+ /// @type Map
23
+ /// @access public
24
+ /// @group @carbon/type
25
+ $caption-02: (
26
+ font-size: carbon--type-scale(2),
27
+ font-weight: carbon--font-weight('regular'),
28
+ line-height: 1.29,
29
+ letter-spacing: 0.32px,
30
+ ) !default;
31
+
22
32
  /// @type Map
23
33
  /// @access public
24
34
  /// @group @carbon/type
@@ -29,6 +39,16 @@ $label-01: (
29
39
  letter-spacing: 0.32px,
30
40
  ) !default;
31
41
 
42
+ /// @type Map
43
+ /// @access public
44
+ /// @group @carbon/type
45
+ $label-02: (
46
+ font-size: carbon--type-scale(2),
47
+ font-weight: carbon--font-weight('regular'),
48
+ line-height: 1.29,
49
+ letter-spacing: 0.32px,
50
+ ) !default;
51
+
32
52
  /// @type Map
33
53
  /// @access public
34
54
  /// @group @carbon/type
@@ -38,6 +58,16 @@ $helper-text-01: (
38
58
  letter-spacing: 0.32px,
39
59
  ) !default;
40
60
 
61
+ /// @type Map
62
+ /// @access public
63
+ /// @group @carbon/type
64
+ $helper-text-02: (
65
+ font-size: carbon--type-scale(2),
66
+ font-weight: carbon--font-weight('regular'),
67
+ line-height: 1.29,
68
+ letter-spacing: 0.32px,
69
+ ) !default;
70
+
41
71
  /// @type Map
42
72
  /// @access public
43
73
  /// @group @carbon/type
@@ -488,8 +518,11 @@ $display-04: (
488
518
  /// @group @carbon/type
489
519
  $tokens: (
490
520
  caption-01: $caption-01,
521
+ caption-02: $caption-02,
491
522
  label-01: $label-01,
523
+ label-02: $label-02,
492
524
  helper-text-01: $helper-text-01,
525
+ helper-text-02: $helper-text-02,
493
526
  body-short-01: $body-short-01,
494
527
  body-short-02: $body-short-02,
495
528
  body-long-01: $body-long-01,
@@ -696,13 +729,14 @@ $custom-property-prefix: 'cds' !default;
696
729
 
697
730
  // If $fluid is set to true and the token has breakpoints defined for fluid
698
731
  // styles, delegate to the fluid-type helper for the given token
732
+ // Otherwise remove token breakpoints
699
733
  @if $fluid == true and map-has-key($token, 'breakpoints') {
700
734
  @include fluid-type($token, $breakpoints);
701
735
  } @else {
702
736
  @if global-variable-exists('feature-flags') and
703
737
  map-get($feature-flags, 'enable-css-custom-properties')
704
738
  {
705
- @include custom-properties($name, $token);
739
+ @include custom-properties($name, map-remove($token, 'breakpoints'));
706
740
  } @else {
707
741
  // Otherwise, we just include all the property declarations directly on the
708
742
  // selector
package/scss/type/vendor/@carbon/layout/generated/_size.scss ADDED
@@ -0,0 +1,17 @@
1
+ // Code generated by @carbon/layout. 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
+ /// @type Number
10
+ /// @access public
11
+ /// @group @carbon/layout
12
+ $size-xs: 1.5rem;
13
+ $size-sm: 2rem;
14
+ $size-md: 2.5rem;
15
+ $size-lg: 3rem;
16
+ $size-xl: 4rem;
17
+ $size-2xl: 5rem;
package/src/__tests__/__snapshots__/PublicAPI-test.js.snap CHANGED
@@ -64,6 +64,7 @@ Array [
64
64
  "buttonTertiaryActive",
65
65
  "buttonTertiaryHover",
66
66
  "caption01",
67
+ "caption02",
67
68
  "code01",
68
69
  "code02",
69
70
  "colors",
@@ -166,6 +167,7 @@ Array [
166
167
  "heading01",
167
168
  "heading02",
168
169
  "helperText01",
170
+ "helperText02",
169
171
  "highlight",
170
172
  "hoverDanger",
171
173
  "hoverField",
@@ -204,8 +206,11 @@ Array [
204
206
  "inverseSupport03",
205
207
  "inverseSupport04",
206
208
  "label01",
209
+ "label02",
207
210
  "layer",
208
211
  "layerAccent",
212
+ "layerAccentActive",
213
+ "layerAccentHover",
209
214
  "layerActive",
210
215
  "layerDisabled",
211
216
  "layerHover",
@@ -289,6 +294,12 @@ Array [
289
294
  "scale",
290
295
  "selectedLightUI",
291
296
  "selectedUI",
297
+ "size2XLarge",
298
+ "sizeLarge",
299
+ "sizeMedium",
300
+ "sizeSmall",
301
+ "sizeXLarge",
302
+ "sizeXSmall",
292
303
  "skeleton01",
293
304
  "skeleton02",
294
305
  "skeletonBackground",