@carbon/element-styles 0.3.15 → 0.3.16-rc.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 (79) hide show
  1. package/README.md +21 -0
  2. package/css/prebuilt/editorial.css +1 -1
  3. package/css/prebuilt/expressive.css +1 -1
  4. package/css/prebuilt/productive.css +1 -1
  5. package/package.json +2 -2
  6. package/scss/_config.scss +9 -0
  7. package/scss/elements/_heading/index.scss +7 -4
  8. package/scss/elements/_input/index.scss +50 -47
  9. package/scss/elements/_labelled-input/index.scss +44 -41
  10. package/scss/elements/_layer/index.scss +17 -14
  11. package/scss/elements/abbreviation/index.scss +7 -4
  12. package/scss/elements/address/index.scss +7 -4
  13. package/scss/elements/anchor/index.scss +33 -30
  14. package/scss/elements/block-quotation/index.scss +30 -27
  15. package/scss/elements/body/index.scss +7 -4
  16. package/scss/elements/bold-text/index.scss +5 -2
  17. package/scss/elements/button/index.scss +183 -180
  18. package/scss/elements/checkbox/index.scss +40 -37
  19. package/scss/elements/code/index.scss +9 -6
  20. package/scss/elements/color-input/index.scss +70 -67
  21. package/scss/elements/combo-box/index.scss +35 -32
  22. package/scss/elements/date-input/index.scss +24 -21
  23. package/scss/elements/date-time-input/index.scss +24 -21
  24. package/scss/elements/deleted-text/index.scss +8 -5
  25. package/scss/elements/description-list/index.scss +17 -14
  26. package/scss/elements/details/index.scss +53 -48
  27. package/scss/elements/dialog/index.scss +173 -170
  28. package/scss/elements/email-input/index.scss +16 -13
  29. package/scss/elements/fieldset/index.scss +15 -12
  30. package/scss/elements/file-input/index.scss +53 -50
  31. package/scss/elements/footer/index.scss +9 -6
  32. package/scss/elements/header-navigation/index.scss +101 -98
  33. package/scss/elements/heading-level-1/index.scss +6 -3
  34. package/scss/elements/heading-level-2/index.scss +6 -3
  35. package/scss/elements/heading-level-3/index.scss +6 -3
  36. package/scss/elements/heading-level-4/index.scss +6 -3
  37. package/scss/elements/heading-level-5/index.scss +6 -3
  38. package/scss/elements/heading-level-6/index.scss +6 -3
  39. package/scss/elements/horizontal-rule/index.scss +12 -9
  40. package/scss/elements/image/index.scss +6 -2
  41. package/scss/elements/inline-loading/index.scss +34 -31
  42. package/scss/elements/inline-quotation/index.scss +6 -3
  43. package/scss/elements/inserted-text/index.scss +9 -6
  44. package/scss/elements/italic-text/index.scss +5 -2
  45. package/scss/elements/keyboard-input/index.scss +9 -6
  46. package/scss/elements/label/index.scss +22 -19
  47. package/scss/elements/main/index.scss +7 -4
  48. package/scss/elements/marked-text/index.scss +7 -4
  49. package/scss/elements/menu/index.scss +71 -64
  50. package/scss/elements/meter/index.scss +45 -42
  51. package/scss/elements/number-input/index.scss +16 -12
  52. package/scss/elements/ordered-list/index.scss +25 -22
  53. package/scss/elements/paragraph/index.scss +8 -5
  54. package/scss/elements/password-input/index.scss +17 -13
  55. package/scss/elements/popover/index.scss +75 -72
  56. package/scss/elements/preformatted/index.scss +18 -15
  57. package/scss/elements/progress-bar/index.scss +71 -68
  58. package/scss/elements/radio-button/index.scss +35 -32
  59. package/scss/elements/range-input/index.scss +42 -39
  60. package/scss/elements/search-input/index.scss +21 -18
  61. package/scss/elements/select/index.scss +36 -33
  62. package/scss/elements/side-navigation/index.scss +141 -137
  63. package/scss/elements/small-text/index.scss +7 -4
  64. package/scss/elements/table/index.scss +93 -90
  65. package/scss/elements/tabs/index.scss +155 -152
  66. package/scss/elements/telephone-number-input/index.scss +16 -13
  67. package/scss/elements/text-area/index.scss +21 -18
  68. package/scss/elements/text-input/index.scss +16 -13
  69. package/scss/elements/tile/index.scss +49 -45
  70. package/scss/elements/time-input/index.scss +24 -21
  71. package/scss/elements/toggle/index.scss +71 -68
  72. package/scss/elements/tooltip/index.scss +16 -13
  73. package/scss/elements/tree-view/index.scss +86 -82
  74. package/scss/elements/unordered-list/index.scss +21 -18
  75. package/scss/elements/url-input/index.scss +16 -13
  76. package/scss/prebuilt/editorial/_elements.scss +37 -33
  77. package/scss/prebuilt/expressive/_elements.scss +75 -71
  78. package/scss/prebuilt/productive/_elements.scss +71 -67
  79. package/scss/utilities/_cascade-layer.scss +33 -0
package/scss/prebuilt/expressive/_elements.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
+ @use "../../utilities/cascade-layer";
9
+
8
10
  @use "../../elements/abbreviation";
9
11
  @use "../../elements/address";
10
12
  @use "../../elements/anchor";
@@ -70,75 +72,77 @@
70
72
  @use "../../elements/url-input";
71
73
 
72
74
  @mixin styles {
73
- @include abbreviation.styles;
74
- @include address.styles;
75
- @include anchor.styles;
76
- @include block-quotation.styles;
77
- @include body.styles;
78
- @include bold-text.styles;
79
- @include button.styles;
80
- @include button.styles(
81
- (
82
- selector: 'button[type="submit"]',
83
- kind: "primary",
84
- )
85
- );
86
- @include checkbox.styles;
87
- @include code.styles;
88
- @include color-input.styles;
89
- @include combo-box.styles;
90
- @include date-input.styles;
91
- @include date-time-input.styles;
92
- @include deleted-text.styles;
93
- @include description-list.styles;
94
- @include details.styles;
95
- @include dialog.styles;
96
- @include email-input.styles;
97
- @include fieldset.styles;
98
- @include file-input.styles;
99
- @include footer.styles;
100
- @include header-navigation.styles;
101
- @include heading-level-1.styles;
102
- @include heading-level-2.styles;
103
- @include heading-level-3.styles;
104
- @include heading-level-4.styles;
105
- @include heading-level-5.styles;
106
- @include heading-level-6.styles;
107
- @include horizontal-rule.styles;
108
- @include image.styles;
109
- @include inline-loading.styles;
110
- @include inline-quotation.styles;
111
- @include inserted-text.styles;
112
- @include italic-text.styles;
113
- @include keyboard-input.styles;
114
- @include label.styles;
115
- @include main.styles;
116
- @include marked-text.styles;
117
- @include number-input.styles;
118
- @include ordered-list.styles;
119
- @include paragraph.styles;
120
- @include password-input.styles;
121
- @include popover.styles;
122
- @include preformatted.styles;
123
- @include progress-bar.styles;
124
- @include radio-button.styles;
125
- @include range-input.styles;
126
- @include search-input.styles;
127
- @include select.styles;
128
- @include side-navigation.styles;
129
- @include small-text.styles;
130
- @include table.styles(
131
- (
132
- kind: "structured-list",
133
- )
134
- );
135
- @include telephone-number-input.styles;
136
- @include text-area.styles;
137
- @include text-input.styles;
138
- @include tile.styles;
139
- @include time-input.styles;
140
- @include toggle.styles;
141
- @include tooltip.styles;
142
- @include unordered-list.styles;
143
- @include url-input.styles;
75
+ @include cascade-layer.wrap {
76
+ @include abbreviation.styles;
77
+ @include address.styles;
78
+ @include anchor.styles;
79
+ @include block-quotation.styles;
80
+ @include body.styles;
81
+ @include bold-text.styles;
82
+ @include button.styles;
83
+ @include button.styles(
84
+ (
85
+ selector: 'button[type="submit"]',
86
+ kind: "primary",
87
+ )
88
+ );
89
+ @include checkbox.styles;
90
+ @include code.styles;
91
+ @include color-input.styles;
92
+ @include combo-box.styles;
93
+ @include date-input.styles;
94
+ @include date-time-input.styles;
95
+ @include deleted-text.styles;
96
+ @include description-list.styles;
97
+ @include details.styles;
98
+ @include dialog.styles;
99
+ @include email-input.styles;
100
+ @include fieldset.styles;
101
+ @include file-input.styles;
102
+ @include footer.styles;
103
+ @include header-navigation.styles;
104
+ @include heading-level-1.styles;
105
+ @include heading-level-2.styles;
106
+ @include heading-level-3.styles;
107
+ @include heading-level-4.styles;
108
+ @include heading-level-5.styles;
109
+ @include heading-level-6.styles;
110
+ @include horizontal-rule.styles;
111
+ @include image.styles;
112
+ @include inline-loading.styles;
113
+ @include inline-quotation.styles;
114
+ @include inserted-text.styles;
115
+ @include italic-text.styles;
116
+ @include keyboard-input.styles;
117
+ @include label.styles;
118
+ @include main.styles;
119
+ @include marked-text.styles;
120
+ @include number-input.styles;
121
+ @include ordered-list.styles;
122
+ @include paragraph.styles;
123
+ @include password-input.styles;
124
+ @include popover.styles;
125
+ @include preformatted.styles;
126
+ @include progress-bar.styles;
127
+ @include radio-button.styles;
128
+ @include range-input.styles;
129
+ @include search-input.styles;
130
+ @include select.styles;
131
+ @include side-navigation.styles;
132
+ @include small-text.styles;
133
+ @include table.styles(
134
+ (
135
+ kind: "structured-list",
136
+ )
137
+ );
138
+ @include telephone-number-input.styles;
139
+ @include text-area.styles;
140
+ @include text-input.styles;
141
+ @include tile.styles;
142
+ @include time-input.styles;
143
+ @include toggle.styles;
144
+ @include tooltip.styles;
145
+ @include unordered-list.styles;
146
+ @include url-input.styles;
147
+ }
144
148
  }
package/scss/prebuilt/productive/_elements.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
+ @use "../../utilities/cascade-layer";
9
+
8
10
  @use "../../elements/abbreviation";
9
11
  @use "../../elements/address";
10
12
  @use "../../elements/anchor";
@@ -70,71 +72,73 @@
70
72
  @use "../../elements/url-input";
71
73
 
72
74
  @mixin styles {
73
- @include abbreviation.styles;
74
- @include address.styles;
75
- @include anchor.styles;
76
- @include block-quotation.styles;
77
- @include body.styles;
78
- @include bold-text.styles;
79
- @include button.styles;
80
- @include button.styles(
81
- (
82
- selector: 'button[type="submit"]',
83
- kind: "primary",
84
- )
85
- );
86
- @include checkbox.styles;
87
- @include code.styles;
88
- @include color-input.styles;
89
- @include combo-box.styles;
90
- @include date-input.styles;
91
- @include date-time-input.styles;
92
- @include deleted-text.styles;
93
- @include description-list.styles;
94
- @include details.styles;
95
- @include dialog.styles;
96
- @include email-input.styles;
97
- @include fieldset.styles;
98
- @include file-input.styles;
99
- @include footer.styles;
100
- @include header-navigation.styles;
101
- @include heading-level-1.styles;
102
- @include heading-level-2.styles;
103
- @include heading-level-3.styles;
104
- @include heading-level-4.styles;
105
- @include heading-level-5.styles;
106
- @include heading-level-6.styles;
107
- @include horizontal-rule.styles;
108
- @include image.styles;
109
- @include inline-loading.styles;
110
- @include inline-quotation.styles;
111
- @include inserted-text.styles;
112
- @include italic-text.styles;
113
- @include keyboard-input.styles;
114
- @include label.styles;
115
- @include main.styles;
116
- @include marked-text.styles;
117
- @include number-input.styles;
118
- @include ordered-list.styles;
119
- @include paragraph.styles;
120
- @include password-input.styles;
121
- @include popover.styles;
122
- @include preformatted.styles;
123
- @include progress-bar.styles;
124
- @include radio-button.styles;
125
- @include range-input.styles;
126
- @include search-input.styles;
127
- @include select.styles;
128
- @include side-navigation.styles;
129
- @include small-text.styles;
130
- @include table.styles;
131
- @include telephone-number-input.styles;
132
- @include text-area.styles;
133
- @include text-input.styles;
134
- @include tile.styles;
135
- @include time-input.styles;
136
- @include toggle.styles;
137
- @include tooltip.styles;
138
- @include unordered-list.styles;
139
- @include url-input.styles;
75
+ @include cascade-layer.wrap {
76
+ @include abbreviation.styles;
77
+ @include address.styles;
78
+ @include anchor.styles;
79
+ @include block-quotation.styles;
80
+ @include body.styles;
81
+ @include bold-text.styles;
82
+ @include button.styles;
83
+ @include button.styles(
84
+ (
85
+ selector: 'button[type="submit"]',
86
+ kind: "primary",
87
+ )
88
+ );
89
+ @include checkbox.styles;
90
+ @include code.styles;
91
+ @include color-input.styles;
92
+ @include combo-box.styles;
93
+ @include date-input.styles;
94
+ @include date-time-input.styles;
95
+ @include deleted-text.styles;
96
+ @include description-list.styles;
97
+ @include details.styles;
98
+ @include dialog.styles;
99
+ @include email-input.styles;
100
+ @include fieldset.styles;
101
+ @include file-input.styles;
102
+ @include footer.styles;
103
+ @include header-navigation.styles;
104
+ @include heading-level-1.styles;
105
+ @include heading-level-2.styles;
106
+ @include heading-level-3.styles;
107
+ @include heading-level-4.styles;
108
+ @include heading-level-5.styles;
109
+ @include heading-level-6.styles;
110
+ @include horizontal-rule.styles;
111
+ @include image.styles;
112
+ @include inline-loading.styles;
113
+ @include inline-quotation.styles;
114
+ @include inserted-text.styles;
115
+ @include italic-text.styles;
116
+ @include keyboard-input.styles;
117
+ @include label.styles;
118
+ @include main.styles;
119
+ @include marked-text.styles;
120
+ @include number-input.styles;
121
+ @include ordered-list.styles;
122
+ @include paragraph.styles;
123
+ @include password-input.styles;
124
+ @include popover.styles;
125
+ @include preformatted.styles;
126
+ @include progress-bar.styles;
127
+ @include radio-button.styles;
128
+ @include range-input.styles;
129
+ @include search-input.styles;
130
+ @include select.styles;
131
+ @include side-navigation.styles;
132
+ @include small-text.styles;
133
+ @include table.styles;
134
+ @include telephone-number-input.styles;
135
+ @include text-area.styles;
136
+ @include text-input.styles;
137
+ @include tile.styles;
138
+ @include time-input.styles;
139
+ @include toggle.styles;
140
+ @include tooltip.styles;
141
+ @include unordered-list.styles;
142
+ @include url-input.styles;
143
+ }
140
144
  }
package/scss/utilities/_cascade-layer.scss ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Copyright IBM Corp. 2026
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ @use "../config";
9
+
10
+ /// Internal state flag: true while the `wrap` mixin body is executing,
11
+ /// preventing nested calls from emitting a redundant `@layer` block.
12
+ /// @group cascade-layer
13
+ /// @access private
14
+ $is-inside-cascade-layer: false !default;
15
+
16
+ /// Wraps `@content` in a `@layer` when called at the top level.
17
+ /// When called from within another `wrap` invocation (i.e.
18
+ /// `$is-inside-cascade-layer` is already `true`), the content is
19
+ /// emitted directly without an extra layer.
20
+ /// @group cascade-layer
21
+ @mixin wrap {
22
+ @if $is-inside-cascade-layer {
23
+ @content;
24
+ } @else {
25
+ $is-inside-cascade-layer: true !global;
26
+
27
+ @layer #{config.$cascade-layer-name} {
28
+ @content;
29
+ }
30
+
31
+ $is-inside-cascade-layer: false !global;
32
+ }
33
+ }