@carbon/styles 1.100.0 → 1.101.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.
Files changed (14) hide show
  1. package/css/styles.css +50 -0
  2. package/css/styles.min.css +1 -1
  3. package/package.json +5 -5
  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/ui-shell/header/_header.scss +3 -3
  13. package/scss/components/ui-shell/switcher/_switcher.scss +1 -1
  14. 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
  }