@carbon/element-styles 0.2.1 → 0.2.2-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 (10) hide show
  1. package/css/prebuilt/editorial.css +1 -1
  2. package/css/prebuilt/expressive.css +1 -1
  3. package/css/prebuilt/productive.css +1 -1
  4. package/package.json +1 -1
  5. package/scss/elements/body/index.scss +2 -0
  6. package/scss/elements/image/index.scss +25 -0
  7. package/scss/layout/_mode.scss +32 -32
  8. package/scss/prebuilt/editorial.scss +2 -0
  9. package/scss/prebuilt/expressive.scss +2 -0
  10. package/scss/prebuilt/productive.scss +2 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/element-styles",
3
3
  "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
4
- "version": "0.2.1",
4
+ "version": "0.2.2-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "sass": "index.scss",
package/scss/elements/body/index.scss CHANGED
@@ -25,6 +25,8 @@ $-default-config: (
25
25
  $props: map.deep-merge($-default-config, $config);
26
26
 
27
27
  #{map.get($props, 'selector')} {
28
+ @include layout.mode--body;
29
+ background-color: theme.$background;
28
30
  margin: 0;
29
31
  }
30
32
  }
package/scss/elements/image/index.scss ADDED
@@ -0,0 +1,25 @@
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 'sass:map';
9
+
10
+ $config: () !default;
11
+
12
+ $-default-config: (
13
+ selector: 'img, picture',
14
+ );
15
+
16
+ /// @group image
17
+ /// @param {Map} config [()]
18
+ /// @param {Selector} config.selector ['img, picture']
19
+ @mixin styles($config: $config) {
20
+ $props: map.deep-merge($-default-config, $config);
21
+
22
+ #{map.get($props, 'selector')} {
23
+ max-inline-size: 100%;
24
+ }
25
+ }
package/scss/layout/_mode.scss CHANGED
@@ -32,7 +32,7 @@ $-modes: (
32
32
  ),
33
33
  body-compact: (
34
34
  name: 'body-compact-01',
35
- style: map.merge(type.$body-01, (
35
+ style: map.merge(type.$body-compact-01, (
36
36
  font-family: type.font-family('sans'),
37
37
  )),
38
38
  ),
@@ -44,19 +44,19 @@ $-modes: (
44
44
  ),
45
45
  heading-compact: (
46
46
  name: 'heading-compact-01',
47
- style: map.merge(type.$heading-01, (
47
+ style: map.merge(type.$heading-compact-01, (
48
48
  font-family: type.font-family('sans'),
49
49
  )),
50
50
  ),
51
51
  label: (
52
52
  name: 'label-01',
53
- style: map.merge(type.$body-01, (
53
+ style: map.merge(type.$label-01, (
54
54
  font-family: type.font-family('sans'),
55
55
  )),
56
56
  ),
57
57
  helper-text: (
58
58
  name: 'helper-text-01',
59
- style: map.merge(type.$body-01, (
59
+ style: map.merge(type.$helper-text-01, (
60
60
  font-family: type.font-family('sans'),
61
61
  )),
62
62
  ),
@@ -73,41 +73,41 @@ $-modes: (
73
73
  )),
74
74
  ),
75
75
  heading-level-1: (
76
- name: 'heading-07',
77
- style: map.merge(type.$heading-07, (
78
- font-family: type.font-family('sans'),
79
- )),
80
- ),
81
- heading-level-2: (
82
76
  name: 'heading-06',
83
77
  style: map.merge(type.$heading-06, (
84
78
  font-family: type.font-family('sans'),
85
79
  )),
86
80
  ),
87
- heading-level-3: (
81
+ heading-level-2: (
88
82
  name: 'heading-05',
89
83
  style: map.merge(type.$heading-05, (
90
84
  font-family: type.font-family('sans'),
91
85
  )),
92
86
  ),
93
- heading-level-4: (
87
+ heading-level-3: (
94
88
  name: 'heading-04',
95
89
  style: map.merge(type.$heading-04, (
96
90
  font-family: type.font-family('sans'),
97
91
  )),
98
92
  ),
99
- heading-level-5: (
93
+ heading-level-4: (
100
94
  name: 'heading-03',
101
95
  style: map.merge(type.$heading-03, (
102
96
  font-family: type.font-family('sans'),
103
97
  )),
104
98
  ),
105
- heading-level-6: (
99
+ heading-level-5: (
106
100
  name: 'heading-02',
107
101
  style: map.merge(type.$heading-02, (
108
102
  font-family: type.font-family('sans'),
109
103
  )),
110
104
  ),
105
+ heading-level-6: (
106
+ name: 'heading-01',
107
+ style: map.merge(type.$heading-01, (
108
+ font-family: type.font-family('sans'),
109
+ )),
110
+ ),
111
111
  ),
112
112
  ),
113
113
  'expressive': (
@@ -120,37 +120,37 @@ $-modes: (
120
120
  type-styles: (
121
121
  body: (
122
122
  name: 'body-02',
123
- style: map.merge(type.$body-01, (
123
+ style: map.merge(type.$body-02, (
124
124
  font-family: type.font-family('sans'),
125
125
  )),
126
126
  ),
127
127
  body-compact: (
128
128
  name: 'body-compact-02',
129
- style: map.merge(type.$body-01, (
129
+ style: map.merge(type.$body-compact-02, (
130
130
  font-family: type.font-family('sans'),
131
131
  )),
132
132
  ),
133
133
  heading: (
134
134
  name: 'heading-02',
135
- style: map.merge(type.$heading-01, (
135
+ style: map.merge(type.$heading-02, (
136
136
  font-family: type.font-family('sans'),
137
137
  )),
138
138
  ),
139
139
  heading-compact: (
140
140
  name: 'heading-compact-02',
141
- style: map.merge(type.$heading-01, (
141
+ style: map.merge(type.$heading-compact-02, (
142
142
  font-family: type.font-family('sans'),
143
143
  )),
144
144
  ),
145
145
  label: (
146
146
  name: 'label-02',
147
- style: map.merge(type.$body-01, (
147
+ style: map.merge(type.$label-02, (
148
148
  font-family: type.font-family('sans'),
149
149
  )),
150
150
  ),
151
151
  helper-text: (
152
152
  name: 'helper-text-02',
153
- style: map.merge(type.$body-01, (
153
+ style: map.merge(type.$helper-text-02, (
154
154
  font-family: type.font-family('sans'),
155
155
  )),
156
156
  ),
@@ -161,42 +161,42 @@ $-modes: (
161
161
  )),
162
162
  ),
163
163
  quotation: (
164
- name: 'quotation',
165
- style: type.$quotation-01,
164
+ name: 'fluid-quotation-01',
165
+ style: type.$fluid-quotation-01,
166
166
  ),
167
167
  heading-level-1: (
168
- name: 'fluid-display-02',
169
- style: map.merge(type.$fluid-display-02, (
168
+ name: 'fluid-heading-06',
169
+ style: map.merge(type.$fluid-heading-06, (
170
170
  font-family: type.font-family('sans'),
171
171
  )),
172
172
  ),
173
173
  heading-level-2: (
174
- name: 'fluid-display-01',
175
- style: map.merge(type.$fluid-display-01, (
174
+ name: 'fluid-heading-05',
175
+ style: map.merge(type.$fluid-heading-05, (
176
176
  font-family: type.font-family('sans'),
177
177
  )),
178
178
  ),
179
179
  heading-level-3: (
180
- name: 'fluid-heading-05',
180
+ name: 'fluid-heading-04',
181
181
  style: map.merge(type.$fluid-heading-04, (
182
182
  font-family: type.font-family('sans'),
183
183
  )),
184
184
  ),
185
185
  heading-level-4: (
186
- name: 'fluid-heading-04',
186
+ name: 'fluid-heading-03',
187
187
  style: map.merge(type.$fluid-heading-03, (
188
188
  font-family: type.font-family('sans'),
189
189
  )),
190
190
  ),
191
191
  heading-level-5: (
192
- name: 'heading-03',
193
- style: map.merge(type.$heading-03, (
192
+ name: 'heading-02',
193
+ style: map.merge(type.$heading-02, (
194
194
  font-family: type.font-family('sans'),
195
195
  )),
196
196
  ),
197
197
  heading-level-6: (
198
- name: 'heading-02',
199
- style: map.merge(type.$heading-02, (
198
+ name: 'heading-01',
199
+ style: map.merge(type.$heading-01, (
200
200
  font-family: type.font-family('sans'),
201
201
  )),
202
202
  ),
package/scss/prebuilt/editorial.scss CHANGED
@@ -31,6 +31,7 @@
31
31
  @use '../elements/heading-level-5';
32
32
  @use '../elements/heading-level-6';
33
33
  @use '../elements/horizontal-rule';
34
+ @use '../elements/image';
34
35
  @use '../elements/inline-quotation';
35
36
  @use '../elements/inserted-text';
36
37
  @use '../elements/italic-text';
@@ -80,6 +81,7 @@
80
81
  @include heading-level-5.styles;
81
82
  @include heading-level-6.styles;
82
83
  @include horizontal-rule.styles;
84
+ @include image.styles;
83
85
  @include inline-quotation.styles;
84
86
  @include inserted-text.styles;
85
87
  @include italic-text.styles;
package/scss/prebuilt/expressive.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  @use '../elements/heading-level-5';
43
43
  @use '../elements/heading-level-6';
44
44
  @use '../elements/horizontal-rule';
45
+ @use '../elements/image';
45
46
  @use '../elements/inline-loading';
46
47
  @use '../elements/inline-quotation';
47
48
  @use '../elements/inserted-text';
@@ -123,6 +124,7 @@
123
124
  @include heading-level-5.styles;
124
125
  @include heading-level-6.styles;
125
126
  @include horizontal-rule.styles;
127
+ @include image.styles;
126
128
  @include inline-loading.styles;
127
129
  @include inline-quotation.styles;
128
130
  @include inserted-text.styles;
package/scss/prebuilt/productive.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  @use '../elements/heading-level-5';
43
43
  @use '../elements/heading-level-6';
44
44
  @use '../elements/horizontal-rule';
45
+ @use '../elements/image';
45
46
  @use '../elements/inline-loading';
46
47
  @use '../elements/inline-quotation';
47
48
  @use '../elements/inserted-text';
@@ -123,6 +124,7 @@
123
124
  @include heading-level-5.styles;
124
125
  @include heading-level-6.styles;
125
126
  @include horizontal-rule.styles;
127
+ @include image.styles;
126
128
  @include inline-loading.styles;
127
129
  @include inline-quotation.styles;
128
130
  @include inserted-text.styles;