@carbon/styles 1.100.0 → 1.101.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 (15) hide show
  1. package/css/styles.css +55 -2
  2. package/css/styles.min.css +1 -1
  3. package/package.json +9 -9
  4. package/scss/__tests__/theme-test.js +1 -0
  5. package/scss/_reset.scss +4 -0
  6. package/scss/_theme.scss +2 -0
  7. package/scss/_zone.scss +5 -1
  8. package/scss/components/button/_button.scss +7 -0
  9. package/scss/components/data-table/sort/_data-table-sort.scss +2 -2
  10. package/scss/components/modal/_modal.scss +2 -2
  11. package/scss/components/popover/_popover.scss +97 -0
  12. package/scss/components/progress-indicator/_progress-indicator.scss +10 -6
  13. package/scss/components/ui-shell/header/_header.scss +3 -3
  14. package/scss/components/ui-shell/switcher/_switcher.scss +1 -1
  15. package/scss/utilities/_tooltip.scss +4 -4
package/css/styles.css CHANGED
@@ -97,6 +97,10 @@ textarea {
97
97
  font-family: inherit;
98
98
  }
99
99
 
100
+ :root {
101
+ color-scheme: var(--cds-color-scheme, light);
102
+ }
103
+
100
104
  /* HTML5 display-role reset for older browsers */
101
105
  article,
102
106
  aside,
@@ -2849,6 +2853,8 @@ em {
2849
2853
  --cds-chat-prompt-border-start: #f4f4f4;
2850
2854
  --cds-chat-prompt-text: #161616;
2851
2855
  --cds-chat-shell-background: #ffffff;
2856
+ --cds-color-scheme: light;
2857
+ color-scheme: var(--cds-color-scheme, light);
2852
2858
  --cds-field-01: #f4f4f4;
2853
2859
  --cds-field-02: #ffffff;
2854
2860
  --cds-field-03: #f4f4f4;
@@ -3178,6 +3184,8 @@ em {
3178
3184
  --cds-chat-prompt-border-start: #f4f4f4;
3179
3185
  --cds-chat-prompt-text: #161616;
3180
3186
  --cds-chat-shell-background: #ffffff;
3187
+ --cds-color-scheme: light;
3188
+ color-scheme: var(--cds-color-scheme, light);
3181
3189
  --cds-field-01: #ffffff;
3182
3190
  --cds-field-02: #f4f4f4;
3183
3191
  --cds-field-03: #ffffff;
@@ -3507,6 +3515,8 @@ em {
3507
3515
  --cds-chat-prompt-border-start: #262626;
3508
3516
  --cds-chat-prompt-text: #f4f4f4;
3509
3517
  --cds-chat-shell-background: #262626;
3518
+ --cds-color-scheme: dark;
3519
+ color-scheme: var(--cds-color-scheme, dark);
3510
3520
  --cds-field-01: #393939;
3511
3521
  --cds-field-02: #525252;
3512
3522
  --cds-field-03: #6f6f6f;
@@ -3835,6 +3845,8 @@ em {
3835
3845
  --cds-chat-prompt-border-start: #262626;
3836
3846
  --cds-chat-prompt-text: #f4f4f4;
3837
3847
  --cds-chat-shell-background: #262626;
3848
+ --cds-color-scheme: dark;
3849
+ color-scheme: var(--cds-color-scheme, dark);
3838
3850
  --cds-field-01: #262626;
3839
3851
  --cds-field-02: #393939;
3840
3852
  --cds-field-03: #525252;
@@ -4640,6 +4652,40 @@ li.cds--accordion__item--disabled:last-of-type {
4640
4652
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
4641
4653
  }
4642
4654
 
4655
+ .cds--popover--bottom:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4656
+ .cds--popover--bottom-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4657
+ .cds--popover--bottom-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4658
+ inset-block-end: -0.25rem;
4659
+ }
4660
+
4661
+ .cds--popover--top:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4662
+ .cds--popover--top-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4663
+ .cds--popover--top-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4664
+ inset-block-start: -0.25rem;
4665
+ }
4666
+
4667
+ .cds--popover--top-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4668
+ .cds--popover--bottom-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4669
+ inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem) - 1rem);
4670
+ }
4671
+
4672
+ .cds--popover--top-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4673
+ .cds--popover--bottom-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4674
+ inset-inline-end: calc(50% - var(--cds-popover-offset, 0rem) - 1rem);
4675
+ }
4676
+
4677
+ .cds--popover--right:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4678
+ .cds--popover--right-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4679
+ .cds--popover--right-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4680
+ inset-inline-start: calc(100% + 0.25rem);
4681
+ }
4682
+
4683
+ .cds--popover--left:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4684
+ .cds--popover--left-start:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content,
4685
+ .cds--popover--left-end:not(.cds--popover--caret):not(.cds--popover--auto-align):not(.cds--popover--tab-tip) > .cds--popover > .cds--popover-content {
4686
+ inset-inline-end: calc(100% + 0.25rem);
4687
+ }
4688
+
4643
4689
  [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4644
4690
  transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
4645
4691
  }
@@ -5587,6 +5633,10 @@ li.cds--accordion__item--disabled:last-of-type {
5587
5633
  .cds--btn--icon-only .cds--btn__icon {
5588
5634
  position: static;
5589
5635
  }
5636
+ .cds--btn--icon-only.cds--btn--ghost:focus {
5637
+ background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
5638
+ box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
5639
+ }
5590
5640
  .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
5591
5641
  margin: 0;
5592
5642
  }
@@ -24154,6 +24204,7 @@ span.cds--pagination__text.cds--pagination__items-count {
24154
24204
  font-weight: var(--cds-body-compact-01-font-weight, 400);
24155
24205
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
24156
24206
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
24207
+ display: block;
24157
24208
  overflow: hidden;
24158
24209
  margin: 0.5rem 0 0 0;
24159
24210
  color: var(--cds-text-primary, #161616);
@@ -24179,13 +24230,14 @@ span.cds--pagination__text.cds--pagination__items-count {
24179
24230
  max-inline-size: 100%;
24180
24231
  }
24181
24232
 
24182
- .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
24233
+ .cds--progress-step-button:focus {
24183
24234
  outline: none;
24184
24235
  }
24185
- .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
24236
+ .cds--progress-step-button:focus-visible .cds--progress-label {
24186
24237
  color: var(--cds-focus, #0f62fe);
24187
24238
  outline: 0.0625rem solid var(--cds-focus, #0f62fe);
24188
24239
  }
24240
+
24189
24241
  .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
24190
24242
  box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
24191
24243
  color: var(--cds-text-primary, #161616);
@@ -24238,6 +24290,7 @@ span.cds--pagination__text.cds--pagination__items-count {
24238
24290
  line-height: var(--cds-label-01-line-height, 1.33333);
24239
24291
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
24240
24292
  position: absolute;
24293
+ display: block;
24241
24294
  color: var(--cds-text-secondary, #525252);
24242
24295
  inset-inline-start: 0;
24243
24296
  margin-block-start: 1.75rem;