@carbon/element-styles 0.2.3 → 0.2.4-rc.2

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 (17) hide show
  1. package/README.md +3 -3
  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 +1 -1
  6. package/scss/prebuilt/editorial/_elements.scss +70 -0
  7. package/scss/prebuilt/editorial/_layout.scss +14 -0
  8. package/scss/prebuilt/editorial/index.scss +34 -0
  9. package/scss/prebuilt/expressive/_elements.scss +131 -0
  10. package/scss/prebuilt/expressive/_layout.scss +14 -0
  11. package/scss/prebuilt/expressive/index.scss +34 -0
  12. package/scss/prebuilt/productive/_elements.scss +129 -0
  13. package/scss/prebuilt/productive/_layout.scss +14 -0
  14. package/scss/prebuilt/productive/index.scss +34 -0
  15. package/scss/prebuilt/editorial.scss +0 -96
  16. package/scss/prebuilt/expressive.scss +0 -155
  17. package/scss/prebuilt/productive.scss +0 -155
package/scss/prebuilt/expressive.scss DELETED
@@ -1,155 +0,0 @@
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 '@carbon/styles/scss/config' with (
9
- $use-akamai-cdn: true,
10
- );
11
- @use '@carbon/styles/scss/fonts';
12
-
13
- @use '@carbon/styles/scss/theme';
14
-
15
- @use '../utilities/carbon';
16
- @use '../layout';
17
-
18
- @use '../elements/abbreviation';
19
- @use '../elements/address';
20
- @use '../elements/anchor';
21
- @use '../elements/block-quotation';
22
- @use '../elements/body';
23
- @use '../elements/bold-text';
24
- @use '../elements/button';
25
- @use '../elements/checkbox';
26
- @use '../elements/code';
27
- @use '../elements/combo-box';
28
- @use '../elements/date-input';
29
- @use '../elements/date-time-input';
30
- @use '../elements/deleted-text';
31
- @use '../elements/description-list';
32
- @use '../elements/details';
33
- @use '../elements/dialog';
34
- @use '../elements/fieldset';
35
- @use '../elements/file-input';
36
- @use '../elements/footer';
37
- @use '../elements/header-navigation';
38
- @use '../elements/heading-level-1';
39
- @use '../elements/heading-level-2';
40
- @use '../elements/heading-level-3';
41
- @use '../elements/heading-level-4';
42
- @use '../elements/heading-level-5';
43
- @use '../elements/heading-level-6';
44
- @use '../elements/horizontal-rule';
45
- @use '../elements/image';
46
- @use '../elements/inline-loading';
47
- @use '../elements/inline-quotation';
48
- @use '../elements/inserted-text';
49
- @use '../elements/italic-text';
50
- @use '../elements/keyboard-input';
51
- @use '../elements/label';
52
- @use '../elements/main';
53
- @use '../elements/marked-text';
54
- @use '../elements/menu';
55
- @use '../elements/number-input';
56
- @use '../elements/ordered-list';
57
- @use '../elements/paragraph';
58
- @use '../elements/password-input';
59
- @use '../elements/popover';
60
- @use '../elements/preformatted';
61
- @use '../elements/progress-bar';
62
- @use '../elements/radio-button';
63
- @use '../elements/range-input';
64
- @use '../elements/search-input';
65
- @use '../elements/select';
66
- @use '../elements/side-navigation';
67
- @use '../elements/small-text';
68
- @use '../elements/table' with ($config: (kind: 'structured-list' ));
69
- @use '../elements/text-area';
70
- @use '../elements/text-input';
71
- @use '../elements/tile';
72
- @use '../elements/time-input';
73
- @use '../elements/toggle';
74
- @use '../elements/tooltip';
75
- @use '../elements/tree-view';
76
- @use '../elements/unordered-list';
77
-
78
- :root {
79
- @include carbon.emit-carbon-colors;
80
-
81
- @include carbon.emit-carbon-tokens('white');
82
- color-scheme: light;
83
-
84
- @media (prefers-color-scheme: dark) {
85
- @include carbon.emit-carbon-tokens('g100');
86
- color-scheme: dark;
87
- }
88
-
89
- @include layout.density('normal');
90
- @include layout.mode('expressive');
91
- @include layout.size('lg');
92
-
93
- background-color: theme.$background;
94
- }
95
-
96
- @include abbreviation.styles;
97
- @include address.styles;
98
- @include anchor.styles;
99
- @include block-quotation.styles;
100
- @include body.styles;
101
- @include bold-text.styles;
102
- @include button.styles;
103
- @include button.styles((
104
- selector: 'button[type="submit"]',
105
- kind: 'primary',
106
- ));
107
- @include checkbox.styles;
108
- @include code.styles;
109
- @include combo-box.styles;
110
- @include date-input.styles;
111
- @include date-time-input.styles;
112
- @include deleted-text.styles;
113
- @include description-list.styles;
114
- @include details.styles;
115
- @include dialog.styles;
116
- @include fieldset.styles;
117
- @include file-input.styles;
118
- @include footer.styles;
119
- @include header-navigation.styles;
120
- @include heading-level-1.styles;
121
- @include heading-level-2.styles;
122
- @include heading-level-3.styles;
123
- @include heading-level-4.styles;
124
- @include heading-level-5.styles;
125
- @include heading-level-6.styles;
126
- @include horizontal-rule.styles;
127
- @include image.styles;
128
- @include inline-loading.styles;
129
- @include inline-quotation.styles;
130
- @include inserted-text.styles;
131
- @include italic-text.styles;
132
- @include keyboard-input.styles;
133
- @include label.styles;
134
- @include main.styles;
135
- @include marked-text.styles;
136
- @include number-input.styles;
137
- @include ordered-list.styles;
138
- @include paragraph.styles;
139
- @include password-input.styles;
140
- @include popover.styles;
141
- @include preformatted.styles;
142
- @include radio-button.styles;
143
- @include range-input.styles;
144
- @include search-input.styles;
145
- @include select.styles;
146
- @include side-navigation.styles;
147
- @include small-text.styles;
148
- @include table.styles;
149
- @include text-area.styles;
150
- @include text-input.styles;
151
- @include tile.styles;
152
- @include time-input.styles;
153
- @include toggle.styles;
154
- @include tooltip.styles;
155
- @include unordered-list.styles;
package/scss/prebuilt/productive.scss DELETED
@@ -1,155 +0,0 @@
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 '@carbon/styles/scss/config' with (
9
- $use-akamai-cdn: true,
10
- );
11
- @use '@carbon/styles/scss/fonts';
12
-
13
- @use '@carbon/styles/scss/theme';
14
-
15
- @use '../utilities/carbon';
16
- @use '../layout';
17
-
18
- @use '../elements/abbreviation';
19
- @use '../elements/address';
20
- @use '../elements/anchor';
21
- @use '../elements/block-quotation';
22
- @use '../elements/body';
23
- @use '../elements/bold-text';
24
- @use '../elements/button';
25
- @use '../elements/checkbox';
26
- @use '../elements/code';
27
- @use '../elements/combo-box';
28
- @use '../elements/date-input';
29
- @use '../elements/date-time-input';
30
- @use '../elements/deleted-text';
31
- @use '../elements/description-list';
32
- @use '../elements/details';
33
- @use '../elements/dialog';
34
- @use '../elements/fieldset';
35
- @use '../elements/file-input';
36
- @use '../elements/footer';
37
- @use '../elements/header-navigation';
38
- @use '../elements/heading-level-1';
39
- @use '../elements/heading-level-2';
40
- @use '../elements/heading-level-3';
41
- @use '../elements/heading-level-4';
42
- @use '../elements/heading-level-5';
43
- @use '../elements/heading-level-6';
44
- @use '../elements/horizontal-rule';
45
- @use '../elements/image';
46
- @use '../elements/inline-loading';
47
- @use '../elements/inline-quotation';
48
- @use '../elements/inserted-text';
49
- @use '../elements/italic-text';
50
- @use '../elements/keyboard-input';
51
- @use '../elements/label';
52
- @use '../elements/main';
53
- @use '../elements/marked-text';
54
- @use '../elements/menu';
55
- @use '../elements/number-input';
56
- @use '../elements/ordered-list';
57
- @use '../elements/paragraph';
58
- @use '../elements/password-input';
59
- @use '../elements/popover';
60
- @use '../elements/preformatted';
61
- @use '../elements/progress-bar';
62
- @use '../elements/radio-button';
63
- @use '../elements/range-input';
64
- @use '../elements/search-input';
65
- @use '../elements/select';
66
- @use '../elements/side-navigation';
67
- @use '../elements/small-text';
68
- @use '../elements/table';
69
- @use '../elements/text-area';
70
- @use '../elements/text-input';
71
- @use '../elements/tile';
72
- @use '../elements/time-input';
73
- @use '../elements/toggle';
74
- @use '../elements/tooltip';
75
- @use '../elements/tree-view';
76
- @use '../elements/unordered-list';
77
-
78
- :root {
79
- @include carbon.emit-carbon-colors;
80
-
81
- @include carbon.emit-carbon-tokens('g10');
82
- color-scheme: light;
83
-
84
- @media (prefers-color-scheme: dark) {
85
- @include carbon.emit-carbon-tokens('g100');
86
- color-scheme: dark;
87
- }
88
-
89
- @include layout.density('normal');
90
- @include layout.mode('productive');
91
- @include layout.size('md');
92
-
93
- background-color: theme.$background;
94
- }
95
-
96
- @include abbreviation.styles;
97
- @include address.styles;
98
- @include anchor.styles;
99
- @include block-quotation.styles;
100
- @include body.styles;
101
- @include bold-text.styles;
102
- @include button.styles;
103
- @include button.styles((
104
- selector: 'button[type="submit"]',
105
- kind: 'primary',
106
- ));
107
- @include checkbox.styles;
108
- @include code.styles;
109
- @include combo-box.styles;
110
- @include date-input.styles;
111
- @include date-time-input.styles;
112
- @include deleted-text.styles;
113
- @include description-list.styles;
114
- @include details.styles;
115
- @include dialog.styles;
116
- @include fieldset.styles;
117
- @include file-input.styles;
118
- @include footer.styles;
119
- @include header-navigation.styles;
120
- @include heading-level-1.styles;
121
- @include heading-level-2.styles;
122
- @include heading-level-3.styles;
123
- @include heading-level-4.styles;
124
- @include heading-level-5.styles;
125
- @include heading-level-6.styles;
126
- @include horizontal-rule.styles;
127
- @include image.styles;
128
- @include inline-loading.styles;
129
- @include inline-quotation.styles;
130
- @include inserted-text.styles;
131
- @include italic-text.styles;
132
- @include keyboard-input.styles;
133
- @include label.styles;
134
- @include main.styles;
135
- @include marked-text.styles;
136
- @include number-input.styles;
137
- @include ordered-list.styles;
138
- @include paragraph.styles;
139
- @include password-input.styles;
140
- @include popover.styles;
141
- @include preformatted.styles;
142
- @include radio-button.styles;
143
- @include range-input.styles;
144
- @include search-input.styles;
145
- @include select.styles;
146
- @include side-navigation.styles;
147
- @include small-text.styles;
148
- @include table.styles;
149
- @include text-area.styles;
150
- @include text-input.styles;
151
- @include tile.styles;
152
- @include time-input.styles;
153
- @include toggle.styles;
154
- @include tooltip.styles;
155
- @include unordered-list.styles;