@carbon/styles 1.107.0 → 1.108.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.107.0",
4
+ "version": "1.108.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -45,8 +45,8 @@
45
45
  "@carbon/grid": "^11.56.0",
46
46
  "@carbon/layout": "^11.53.0",
47
47
  "@carbon/motion": "^11.46.0",
48
- "@carbon/themes": "^11.74.0",
49
- "@carbon/type": "^11.60.0",
48
+ "@carbon/themes": "^11.75.0-rc.0",
49
+ "@carbon/type": "^11.61.0-rc.0",
50
50
  "@ibm/plex": "6.4.1",
51
51
  "@ibm/plex-mono": "1.1.0",
52
52
  "@ibm/plex-sans": "1.1.0",
@@ -55,7 +55,7 @@
55
55
  "@ibm/plex-sans-hebrew": "1.1.0",
56
56
  "@ibm/plex-sans-thai": "1.1.0",
57
57
  "@ibm/plex-sans-thai-looped": "1.1.0",
58
- "@ibm/plex-serif": "1.1.0",
58
+ "@ibm/plex-serif": "2.0.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": "2d98f4ee9914fa44acba58f62599c3f5382acad0"
78
+ "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
79
79
  }
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2016, 2023
2
+ // Copyright IBM Corp. 2016, 2026
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.
@@ -16,6 +16,7 @@
16
16
  @use '../../../utilities/button-reset';
17
17
  @use '../../../utilities/convert';
18
18
  @use '../../../utilities/focus-outline' as *;
19
+ @use '../../../utilities/layout';
19
20
 
20
21
  /// Data table action styles
21
22
  /// @access public
@@ -25,19 +26,31 @@
25
26
  //TOOLBAR
26
27
  //-------------------------------------------------
27
28
  .#{$prefix}--table-toolbar {
29
+ @include layout.use('size', $default: 'lg', $min: 'xs', $max: 'lg');
30
+ @include layout.redefine-tokens(
31
+ (
32
+ size: (
33
+ height: (
34
+ md: convert.to-rem(48px),
35
+ xl: convert.to-rem(48px),
36
+ ),
37
+ ),
38
+ )
39
+ );
28
40
  // Need for batch actions
29
41
  position: relative;
30
42
  z-index: 1;
31
43
  display: flex;
32
44
  background-color: $layer;
45
+ block-size: layout.size('height');
33
46
  inline-size: 100%;
34
- min-block-size: $spacing-09;
47
+ min-block-size: layout.size('height');
35
48
  }
36
49
 
37
50
  .#{$prefix}--toolbar-content {
38
51
  display: flex;
39
52
  justify-content: flex-end;
40
- block-size: $spacing-09;
53
+ block-size: layout.size('height');
41
54
  inline-size: 100%;
42
55
  transform: translate3d(0, 0, 0);
43
56
  transition:
@@ -45,18 +58,6 @@
45
58
  clip-path $duration-fast-02 motion(standard, productive);
46
59
  }
47
60
 
48
- .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
49
- padding: 0 3rem;
50
- // For toolbar animation with (esp.) persistent search box
51
- background-color: transparent;
52
- block-size: 3rem;
53
- }
54
-
55
- .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
56
- block-size: 3rem;
57
- inline-size: 3rem;
58
- }
59
-
60
61
  //-------------------------------------------------
61
62
  //DEPRECATED v10/v9 search behavior
62
63
  //-------------------------------------------------
@@ -71,11 +72,6 @@
71
72
  //HIDDEN SEARCH - DEFAULT TOOLBAR
72
73
  //-------------------------------------------------
73
74
  .#{$prefix}--toolbar-search-container-expandable {
74
- position: relative;
75
- block-size: $spacing-09;
76
- box-shadow: none;
77
- cursor: pointer;
78
- inline-size: $spacing-09;
79
75
  transition:
80
76
  width $transition-expansion $standard-easing,
81
77
  background-color $duration-fast-02 motion(entrance, productive);
@@ -86,7 +82,7 @@
86
82
  }
87
83
 
88
84
  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
89
- inline-size: 3rem;
85
+ inline-size: layout.size('height');
90
86
  }
91
87
 
92
88
  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
@@ -111,69 +107,6 @@
111
107
  visibility: hidden;
112
108
  }
113
109
 
114
- .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
115
- .#{$prefix}--search-close {
116
- block-size: $spacing-09;
117
- inline-size: $spacing-09;
118
-
119
- &::before {
120
- background-color: $field-hover;
121
- block-size: calc(100% - #{convert.to-rem(4px)});
122
- inset-block-start: convert.to-rem(2px);
123
- }
124
- }
125
-
126
- .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
127
- .#{$prefix}--search-close:focus::before {
128
- background-color: $focus;
129
- }
130
-
131
- //-------------------------------------------------
132
- // Seach icon
133
- //-------------------------------------------------v
134
- // lg expandable icon spacing
135
- .#{$prefix}--table-toolbar
136
- .#{$prefix}--search--lg
137
- .#{$prefix}--search-magnifier-icon {
138
- inset-inline-start: 0;
139
- }
140
-
141
- // lg persistent icon spacing
142
- .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm)
143
- .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg
144
- .#{$prefix}--search-magnifier-icon {
145
- inset-inline-start: 1rem;
146
- }
147
-
148
- // sm expandable icon spacing
149
- .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
150
- .#{$prefix}--search--sm:not(
151
- .#{$prefix}--toolbar-search-container-active
152
- ):not(.#{$prefix}--toolbar-search-container-persistent)
153
- .#{$prefix}--search-magnifier-icon {
154
- inset-inline-start: 0;
155
- }
156
-
157
- .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
158
- .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active
159
- .#{$prefix}--search-magnifier-icon {
160
- inset-inline-start: 0.5rem;
161
- }
162
-
163
- // sm persistent icon spacing
164
- .#{$prefix}--table-toolbar
165
- .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm
166
- .#{$prefix}--search-magnifier-icon {
167
- inset-inline-start: 0.5rem;
168
- }
169
-
170
- .#{$prefix}--toolbar-search-container-expandable
171
- .#{$prefix}--search-magnifier-icon {
172
- padding: $spacing-05;
173
- block-size: $spacing-09;
174
- inline-size: $spacing-09;
175
- }
176
-
177
110
  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
178
111
  .#{$prefix}--search-magnifier-icon {
179
112
  background-color: $layer;
@@ -206,7 +139,7 @@
206
139
 
207
140
  .#{$prefix}--toolbar-search-container-active .#{$prefix}--label,
208
141
  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
209
- padding: 0 $spacing-09;
142
+ padding: 0 layout.size('height');
210
143
  cursor: text;
211
144
  }
212
145
 
@@ -248,10 +181,10 @@
248
181
  @include button-reset.reset;
249
182
 
250
183
  display: flex;
251
- padding: $spacing-05;
252
- block-size: $spacing-09;
184
+ padding: calc(layout.size('height') / 2);
185
+ block-size: layout.size('height');
253
186
  cursor: pointer;
254
- inline-size: $spacing-09;
187
+ inline-size: layout.size('height');
255
188
  transition: background $duration-fast-02 motion(entrance, productive);
256
189
  }
257
190
 
@@ -260,9 +193,9 @@
260
193
  @include button-reset.reset;
261
194
 
262
195
  display: flex;
263
- block-size: $spacing-09;
196
+ block-size: layout.size('height');
264
197
  cursor: pointer;
265
- inline-size: $spacing-09;
198
+ inline-size: layout.size('height');
266
199
  transition: background $duration-fast-02 motion(entrance, productive);
267
200
  }
268
201
 
@@ -327,7 +260,6 @@
327
260
  //-------------------------------------------------
328
261
  .#{$prefix}--toolbar-search-container-persistent {
329
262
  position: relative;
330
- block-size: $spacing-09;
331
263
  inline-size: 100%;
332
264
  opacity: 1;
333
265
  }
@@ -342,15 +274,8 @@
342
274
  position: initial;
343
275
  }
344
276
 
345
- .#{$prefix}--toolbar-search-container-persistent
346
- .#{$prefix}--search-magnifier-icon {
347
- inset-inline-start: $spacing-05;
348
- }
349
-
350
277
  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
351
- padding: 0 $spacing-09;
352
278
  border: none;
353
- block-size: $spacing-09;
354
279
  }
355
280
 
356
281
  .#{$prefix}--toolbar-search-container-persistent
@@ -370,15 +295,10 @@
370
295
  background-color: $field-hover;
371
296
  }
372
297
 
373
- .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
374
- block-size: $spacing-09;
375
- inline-size: $spacing-09;
376
- }
377
-
378
298
  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container,
379
299
  .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
380
300
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
381
- transform: translate3d(0, 48px, 0);
301
+ transform: translate3d(0, layout.size('height'), 0);
382
302
  transition:
383
303
  transform $duration-fast-02 motion(standard, productive),
384
304
  clip-path $duration-fast-02 motion(standard, productive);
@@ -398,7 +318,7 @@
398
318
  inset-inline: 0;
399
319
  opacity: 0;
400
320
  pointer-events: none;
401
- transform: translate3d(0, 48px, 0);
321
+ transform: translate3d(0, layout.size('height'), 0);
402
322
  transition:
403
323
  transform $duration-fast-02 motion(standard, productive),
404
324
  clip-path $duration-fast-02 motion(standard, productive),
@@ -523,145 +443,40 @@
523
443
  padding-inline-start: $spacing-03;
524
444
  }
525
445
 
526
- //-------------------------------------------------
527
- //SMALL TOOLBAR
528
- //-------------------------------------------------
529
-
530
- .#{$prefix}--table-toolbar--sm {
531
- block-size: convert.to-rem(32px);
532
- min-block-size: convert.to-rem(32px);
533
-
534
- .#{$prefix}--toolbar-search-container-expandable,
535
- .#{$prefix}--toolbar-search-container-persistent {
536
- block-size: convert.to-rem(32px);
537
- }
538
-
539
- .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
540
- .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
541
- block-size: convert.to-rem(32px);
542
- }
543
-
544
- .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
545
- .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
546
- block-size: convert.to-rem(32px);
547
- inline-size: convert.to-rem(32px);
548
- }
549
-
550
- .#{$prefix}--toolbar-search-container-expandable
551
- .#{$prefix}--search-magnifier-icon,
552
- .#{$prefix}--toolbar-search-container-persistent
553
- .#{$prefix}--search-magnifier-icon {
554
- padding: $spacing-03;
555
- block-size: convert.to-rem(32px);
556
- inline-size: convert.to-rem(32px);
557
- }
558
-
559
- .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent {
560
- inline-size: 100%;
561
- }
562
-
563
- //hidden
564
- .#{$prefix}--toolbar-search-container-expandable {
565
- inline-size: convert.to-rem(32px);
566
- }
567
-
568
- .#{$prefix}--toolbar-search-container-expandable
569
- .#{$prefix}--search
570
- .#{$prefix}--search-input {
571
- padding: 0 $spacing-09;
572
- }
573
-
574
- //active
575
- .#{$prefix}--toolbar-search-container-active {
576
- flex: auto;
577
- transition: flex 175ms $standard-easing;
578
- }
579
-
580
- .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
581
- visibility: inherit;
582
- }
583
-
584
- .#{$prefix}--toolbar-search-container-active
585
- .#{$prefix}--search-input:focus {
586
- @include focus-outline('outline');
587
-
588
- background-color: $field-hover;
589
- }
590
-
591
- .#{$prefix}--toolbar-search-container-active
592
- .#{$prefix}--search-input:active,
593
- .#{$prefix}--toolbar-search-container-active
594
- .#{$prefix}--search-input:not(:placeholder-shown) {
595
- background-color: $field-hover;
596
- }
597
-
598
- .#{$prefix}--toolbar-search-container-active
599
- .#{$prefix}--search-magnifier-icon:focus,
600
- .#{$prefix}--toolbar-search-container-active
601
- .#{$prefix}--search-magnifier-icon:active,
602
- .#{$prefix}--toolbar-search-container-active
603
- .#{$prefix}--search-magnifier-icon:hover {
604
- @include focus-outline('reset');
605
-
606
- background-color: transparent;
607
- }
608
-
609
- .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
610
- block-size: convert.to-rem(32px);
611
- inline-size: convert.to-rem(32px);
612
- //:after element is 2rem but w/o this trigger button is for some reason 28px
613
- min-inline-size: convert.to-rem(32px);
614
- }
615
-
616
- .#{$prefix}--toolbar-content {
617
- block-size: convert.to-rem(32px);
618
- }
619
-
620
- .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
621
- block-size: 2rem;
622
- inline-size: 2rem;
623
- }
624
- }
625
-
626
- .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
627
- background-color: transparent;
446
+ .#{$prefix}--table-toolbar .#{$prefix}--batch-actions {
447
+ block-size: layout.size('height');
628
448
  }
629
449
 
630
- //-------------------------------------------------
631
- // SMALL BATCH ACTIONS
632
- //-------------------------------------------------
633
-
634
- .#{$prefix}--table-toolbar--sm
450
+ .#{$prefix}--table-toolbar
635
451
  .#{$prefix}--batch-actions
636
452
  .#{$prefix}--action-list {
637
- block-size: convert.to-rem(32px);
453
+ block-size: layout.size('height');
638
454
  }
639
455
 
640
- .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
456
+ .#{$prefix}--table-toolbar .#{$prefix}--toolbar-action {
641
457
  padding: $spacing-03 0;
642
- block-size: convert.to-rem(32px);
643
- inline-size: convert.to-rem(32px);
458
+ block-size: layout.size('height');
459
+ inline-size: layout.size('height');
644
460
  }
645
461
 
646
- .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
647
- block-size: convert.to-rem(32px);
462
+ .#{$prefix}--table-toolbar .#{$prefix}--btn--primary {
463
+ block-size: layout.size('height');
648
464
  min-block-size: auto;
649
- padding-block: 0.375rem;
650
465
  }
651
466
 
652
- .#{$prefix}--table-toolbar--sm
467
+ .#{$prefix}--table-toolbar
653
468
  .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
654
- inset-block-start: convert.to-rem(8px);
469
+ // Vertically center the 1rem divider: row_height - divider_height gives
470
+ // the leftover space, and dividing by 2 puts half the space above and half below.
471
+ inset-block-start: calc((layout.size('height') - 1rem) / 2);
655
472
  }
656
473
 
657
- .#{$prefix}--table-toolbar--sm
658
- .#{$prefix}--toolbar-action
659
- ~ .#{$prefix}--btn {
474
+ .#{$prefix}--table-toolbar .#{$prefix}--toolbar-action ~ .#{$prefix}--btn {
660
475
  overflow: hidden;
661
- block-size: convert.to-rem(32px);
476
+ block-size: layout.size('height');
662
477
  }
663
478
 
664
- .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
665
- min-block-size: 2rem;
479
+ .#{$prefix}--table-toolbar .#{$prefix}--batch-summary {
480
+ min-block-size: layout.size('height');
666
481
  }
667
482
  }
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2016, 2025
2
+ // Copyright IBM Corp. 2016, 2026
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.
@@ -152,7 +152,7 @@
152
152
 
153
153
  // fluid form in modal
154
154
  .#{$prefix}--modal-content .#{$prefix}--form--fluid {
155
- margin-inline: -$spacing-05 - $spacing-05;
155
+ margin-inline: -$spacing-03 - $spacing-03;
156
156
  }
157
157
 
158
158
  // TODO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated