@carbon/styles 1.91.0-rc.0 → 1.92.0-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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/styles",
3
3
  "description": "Styles for the Carbon Design System",
4
- "version": "1.91.0-rc.0",
4
+ "version": "1.92.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -40,22 +40,22 @@
40
40
  }
41
41
  },
42
42
  "dependencies": {
43
- "@carbon/colors": "^11.41.0-rc.0",
44
- "@carbon/feature-flags": "^0.31.0-rc.0",
45
- "@carbon/grid": "^11.44.0-rc.0",
46
- "@carbon/layout": "^11.42.0-rc.0",
47
- "@carbon/motion": "^11.36.0-rc.0",
48
- "@carbon/themes": "^11.61.0-rc.0",
49
- "@carbon/type": "^11.48.0-rc.0",
43
+ "@carbon/colors": "^11.42.0-rc.0",
44
+ "@carbon/feature-flags": "^0.31.0",
45
+ "@carbon/grid": "^11.45.0-rc.0",
46
+ "@carbon/layout": "^11.43.0-rc.0",
47
+ "@carbon/motion": "^11.37.0-rc.0",
48
+ "@carbon/themes": "^11.62.0-rc.0",
49
+ "@carbon/type": "^11.49.0-rc.0",
50
50
  "@ibm/plex": "6.0.0-next.6",
51
51
  "@ibm/plex-mono": "1.1.0",
52
52
  "@ibm/plex-sans": "1.1.0",
53
53
  "@ibm/plex-sans-arabic": "1.1.0",
54
54
  "@ibm/plex-sans-devanagari": "1.1.0",
55
- "@ibm/plex-sans-hebrew": "0.0.3-alpha.0",
55
+ "@ibm/plex-sans-hebrew": "1.1.0",
56
56
  "@ibm/plex-sans-thai": "0.0.3-alpha.0",
57
57
  "@ibm/plex-sans-thai-looped": "1.1.0",
58
- "@ibm/plex-serif": "0.0.3-alpha.0",
58
+ "@ibm/plex-serif": "1.1.0",
59
59
  "@ibm/telemetry-js": "^1.5.0"
60
60
  },
61
61
  "devDependencies": {
@@ -75,5 +75,5 @@
75
75
  "scss/**/*.css",
76
76
  "css/**/*.css"
77
77
  ],
78
- "gitHead": "eae1402aa3c86b644feefc43bd3202915404e924"
78
+ "gitHead": "0d9497f77c917c567c8be19157e3da42d7a02c04"
79
79
  }
@@ -315,14 +315,14 @@
315
315
  //----------------------------------------------------------------------------
316
316
  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td,
317
317
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td {
318
- border-block-end: 1px solid $layer;
318
+ background-color: $layer-accent;
319
+ border-block-end: 1px solid $layer-accent;
320
+ border-block-start: 1px solid $layer-accent;
319
321
  }
320
322
 
321
323
  .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
322
324
  .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
323
- background-color: $layer-accent;
324
- border-block-end: 1px solid $layer-accent;
325
- border-block-start: 1px solid $layer-accent;
325
+ border-block-end: 1px solid $layer;
326
326
  }
327
327
 
328
328
  .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2016, 2023
2
+ // Copyright IBM Corp. 2016, 2025
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -292,6 +292,15 @@
292
292
  linear-gradient(to top, $layer 0, 2px, transparent 2px);
293
293
  }
294
294
 
295
+ .#{$prefix}--modal--slug
296
+ .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
297
+ .#{$prefix}--modal--decorator
298
+ .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
299
+ .#{$prefix}--modal-scroll-content.#{$prefix}--modal-scroll-content--no-fade,
300
+ .#{$prefix}--modal-scroll-content--no-fade {
301
+ mask-image: none;
302
+ }
303
+
295
304
  //removing mask image in case we have dropdown in modal
296
305
  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--autoalign) {
297
306
  mask-image: none;
@@ -36,10 +36,10 @@
36
36
  display: flex;
37
37
  align-items: center;
38
38
  justify-content: center;
39
- block-size: convert.to-rem(40px);
39
+ block-size: $spacing-08;
40
40
  cursor: pointer;
41
- inline-size: convert.to-rem(40px);
42
- min-block-size: convert.to-rem(40px);
41
+ inline-size: $spacing-08;
42
+ min-block-size: $spacing-08;
43
43
  transition:
44
44
  outline $duration-fast-02 motion(entrance, productive),
45
45
  background-color $duration-fast-02 motion(entrance, productive);
@@ -57,15 +57,21 @@
57
57
  margin-block-start: 0;
58
58
  }
59
59
 
60
+ .#{$prefix}--overflow-menu--xs {
61
+ block-size: $spacing-06;
62
+ inline-size: $spacing-06;
63
+ min-block-size: $spacing-06;
64
+ }
65
+
60
66
  .#{$prefix}--overflow-menu--sm {
61
- block-size: convert.to-rem(32px);
62
- inline-size: convert.to-rem(32px);
63
- min-block-size: convert.to-rem(32px);
67
+ block-size: $spacing-07;
68
+ inline-size: $spacing-07;
69
+ min-block-size: $spacing-07;
64
70
  }
65
71
 
66
72
  .#{$prefix}--overflow-menu--lg {
67
- block-size: convert.to-rem(48px);
68
- inline-size: convert.to-rem(48px);
73
+ block-size: $spacing-09;
74
+ inline-size: $spacing-09;
69
75
  }
70
76
 
71
77
  // Overwrite Icon Tooltip focus styles
@@ -93,9 +99,9 @@
93
99
  }
94
100
 
95
101
  .#{$prefix}--overflow-menu__icon {
96
- block-size: convert.to-rem(16px);
102
+ block-size: $spacing-05;
97
103
  fill: $icon-primary;
98
- inline-size: convert.to-rem(16px);
104
+ inline-size: $spacing-05;
99
105
  }
100
106
 
101
107
  .#{$prefix}--overflow-menu__wrapper {
@@ -112,8 +118,8 @@
112
118
  flex-direction: column;
113
119
  align-items: flex-start;
114
120
  background-color: $layer;
115
- inline-size: convert.to-rem(160px);
116
- inset-block-start: 32px;
121
+ inline-size: $spacing-13;
122
+ inset-block-start: $spacing-07;
117
123
  inset-inline-start: 0;
118
124
  list-style: none;
119
125
 
@@ -151,53 +157,65 @@
151
157
  .#{$prefix}--breadcrumb-menu-options
152
158
  )::after {
153
159
  block-size: convert.to-rem(3px);
154
- inline-size: convert.to-rem(40px);
160
+ inline-size: $spacing-08;
155
161
  inset-block-start: convert.to-rem(-3px);
156
162
  inset-inline-start: 0;
157
163
  }
158
164
 
159
165
  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after {
160
- block-size: convert.to-rem(8px);
161
- inline-size: convert.to-rem(40px);
162
- inset-block-end: convert.to-rem(-8px);
166
+ block-size: $spacing-03;
167
+ inline-size: $spacing-08;
168
+ inset-block-end: -$spacing-03;
163
169
  inset-inline-start: 0;
164
170
  }
165
171
 
166
172
  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after {
167
- block-size: convert.to-rem(40px);
173
+ block-size: $spacing-08;
168
174
  inline-size: convert.to-rem(6px);
169
175
  inset-block-start: 0;
170
176
  inset-inline-end: convert.to-rem(-6px);
171
177
  }
172
178
 
173
179
  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after {
174
- block-size: convert.to-rem(40px);
180
+ block-size: $spacing-08;
175
181
  inline-size: convert.to-rem(6px);
176
182
  inset-block-start: 0;
177
183
  inset-inline-start: convert.to-rem(-6px);
178
184
  }
179
185
 
186
+ .#{$prefix}--overflow-menu-options--xs.#{$prefix}--overflow-menu-options {
187
+ &[data-floating-menu-direction='bottom']::after,
188
+ &[data-floating-menu-direction='top']::after {
189
+ inline-size: $spacing-06;
190
+ }
191
+
192
+ &[data-floating-menu-direction='left']::after,
193
+ &[data-floating-menu-direction='right']::after {
194
+ block-size: $spacing-06;
195
+ }
196
+ }
197
+
180
198
  .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options {
181
199
  &[data-floating-menu-direction='bottom']::after,
182
200
  &[data-floating-menu-direction='top']::after {
183
- inline-size: convert.to-rem(32px);
201
+ inline-size: $spacing-07;
184
202
  }
185
203
 
186
204
  &[data-floating-menu-direction='left']::after,
187
205
  &[data-floating-menu-direction='right']::after {
188
- block-size: convert.to-rem(32px);
206
+ block-size: $spacing-07;
189
207
  }
190
208
  }
191
209
 
192
210
  .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
193
211
  &[data-floating-menu-direction='bottom']::after,
194
212
  &[data-floating-menu-direction='top']::after {
195
- inline-size: convert.to-rem(48px);
213
+ inline-size: $spacing-09;
196
214
  }
197
215
 
198
216
  &[data-floating-menu-direction='left']::after,
199
217
  &[data-floating-menu-direction='right']::after {
200
- block-size: convert.to-rem(48px);
218
+ block-size: $spacing-09;
201
219
  }
202
220
  }
203
221
 
@@ -226,19 +244,24 @@
226
244
  align-items: center;
227
245
  padding: 0;
228
246
  background-color: transparent;
229
- block-size: convert.to-rem(40px);
247
+ block-size: $spacing-08;
230
248
  inline-size: 100%;
231
249
  transition: background-color $duration-fast-02 motion(entrance, productive);
232
250
  }
233
251
 
252
+ .#{$prefix}--overflow-menu-options--xs
253
+ .#{$prefix}--overflow-menu-options__option {
254
+ block-size: $spacing-06;
255
+ }
256
+
234
257
  .#{$prefix}--overflow-menu-options--sm
235
258
  .#{$prefix}--overflow-menu-options__option {
236
- block-size: convert.to-rem(32px);
259
+ block-size: $spacing-07;
237
260
  }
238
261
 
239
262
  .#{$prefix}--overflow-menu-options--lg
240
263
  .#{$prefix}--overflow-menu-options__option {
241
- block-size: convert.to-rem(48px);
264
+ block-size: $spacing-09;
242
265
  }
243
266
 
244
267
  .#{$prefix}--overflow-menu--divider {