@carbon/ibmdotcom-styles 2.16.0-rc.0 → 2.16.0-rc.2

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.
@@ -6087,7 +6087,8 @@ screen and (prefers-contrast) {
6087
6087
  }
6088
6088
  .cds--content-layout ::slotted([data-autoid^=c4d--card]:not([slot])),
6089
6089
  .cds--content-layout ::slotted([data-autoid^=c4d--tabs-]:not([slot])),
6090
- .cds--content-layout ::slotted(c4d-content-group:not([slot])) {
6090
+ .cds--content-layout ::slotted(c4d-content-group:not([slot])),
6091
+ .cds--content-layout ::slotted(c4d-cta-block-item-row:not([slot])) {
6091
6092
  -webkit-margin-start: 0;
6092
6093
  margin-inline-start: 0
6093
6094
  }
@@ -6921,6 +6922,11 @@ screen and (prefers-contrast) {
6921
6922
  :host(c4d-callout-with-media) ::slotted([slot=media]) {
6922
6923
  margin: 0 0 2rem
6923
6924
  }
6925
+ :host(c4d-callout-with-media-image) .c4d--image__caption,
6926
+ :host(c4d-callout-with-media-video) ::slotted(c4d-video-player) {
6927
+ -webkit-margin-after: 0;
6928
+ margin-block-end: 0
6929
+ }
6924
6930
  :host(c4d-callout-with-media) ::slotted([slot=copy]),
6925
6931
  :host(c4d-callout-with-media) ::slotted([slot=heading]) {
6926
6932
  inline-size: auto;
@@ -6954,8 +6960,8 @@ screen and (prefers-contrast) {
6954
6960
  }
6955
6961
  .cds--callout-with-media .cds--callout__content .cds--content-block,
6956
6962
  :host(c4d-callout-with-media) .cds--callout__content {
6957
- -webkit-padding-after: 4rem;
6958
- padding-block-end: 4rem
6963
+ -webkit-padding-after: 2rem;
6964
+ padding-block-end: 2rem
6959
6965
  }
6960
6966
  .cds--callout-with-media .cds--callout__content .cds--content-block .cds--image__caption,
6961
6967
  :host(c4d-callout-with-media-image) .cds--image__caption {
@@ -10150,13 +10156,6 @@ screen and (prefers-contrast) {
10150
10156
  flex-direction: column;
10151
10157
  gap: 1rem
10152
10158
  }
10153
- :host(c4d-card) ::slotted(div),
10154
- :host(c4d-card-cta) ::slotted(div),
10155
- :host(c4d-card-group-item) ::slotted(div),
10156
- :host(c4d-card-in-card) ::slotted(div) {
10157
- -webkit-margin-start: -.25rem!important;
10158
- margin-inline-start: -.25rem!important
10159
- }
10160
10159
  :host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
10161
10160
  display: -webkit-box;
10162
10161
  display: -ms-flexbox;
@@ -12292,9 +12291,15 @@ screen and (prefers-contrast) {
12292
12291
  :host(c4d-card-group-item) .cds--card .cds--card__wrapper::before {
12293
12292
  content: revert
12294
12293
  }
12294
+ :host(c4d-card-group-item) .cds--card .cds--card__wrapper::after {
12295
+ display: block;
12296
+ aspect-ratio: 16/9;
12297
+ content: "";
12298
+ grid-area: 1/1/-1/-1
12299
+ }
12295
12300
  :host(c4d-card-group-item) .cds--card .cds--card__content {
12296
12301
  display: grid;
12297
- grid-row: span 10;
12302
+ grid-area: 1/1/-1/-1;
12298
12303
  grid-template-rows: subgrid;
12299
12304
  row-gap: 0
12300
12305
  }
@@ -13563,6 +13568,10 @@ screen and (prefers-contrast) {
13563
13568
  -ms-flex: 1 0 50%;
13564
13569
  flex: 1 0 50%
13565
13570
  }
13571
+ :host(c4d-feature-card) .cds--card__image-wrapper,
13572
+ :host(c4d-feature-cta) .cds--card__image-wrapper {
13573
+ aspect-ratio: 1/1
13574
+ }
13566
13575
  :host(c4d-feature-card) .cds--card__wrapper::after,
13567
13576
  :host(c4d-feature-card) .cds--card__wrapper::before,
13568
13577
  :host(c4d-feature-cta) .cds--card__wrapper::after,
@@ -13618,7 +13627,8 @@ screen and (prefers-contrast) {
13618
13627
  :host(c4d-feature-card) c4d-image,
13619
13628
  :host(c4d-feature-cta) ::slotted([slot=image]),
13620
13629
  :host(c4d-feature-cta) c4d-image {
13621
- z-index: 0
13630
+ z-index: 0;
13631
+ block-size: 100%
13622
13632
  }
13623
13633
  :host(c4d-feature-card) ::slotted([slot=image])::before,
13624
13634
  :host(c4d-feature-card) c4d-image::before,
@@ -13716,9 +13726,18 @@ screen and (prefers-contrast) {
13716
13726
  :host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
13717
13727
  color: var(--cds-icon-inverse,#fff)
13718
13728
  }
13729
+ :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer .c4d-ce--cta__icon,
13719
13730
  :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
13720
13731
  fill: var(--cds-link-inverse,#78a9ff)
13721
13732
  }
13733
+ :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover .c4d-ce--cta__icon,
13734
+ :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover ::slotted(svg[slot=icon]) {
13735
+ fill: var(--cds-link-inverse-hover,#a6c8ff)
13736
+ }
13737
+ :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active .c4d-ce--cta__icon,
13738
+ :host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active ::slotted(svg[slot=icon]) {
13739
+ fill: var(--cds-link-inverse-active,#f4f4f4)
13740
+ }
13722
13741
  :host(c4d-feature-card[size=large]) ::slotted(c4d-feature-card-footer) {
13723
13742
  display: -webkit-box;
13724
13743
  display: -ms-flexbox;
@@ -19867,7 +19886,7 @@ optgroup.cds--select-optgroup:disabled {
19867
19886
  border-block-start: 0
19868
19887
  }
19869
19888
  :host(c4d-footer-nav-item),
19870
- :host(c4d-legal-nav-cookie-preferences-placeholder) div,
19889
+ :host(c4d-legal-nav-cookie-preferences-placeholder),
19871
19890
  :host(c4d-legal-nav-item) {
19872
19891
  --cds-ai-aura-end: rgba(0, 0, 0, 0);
19873
19892
  --cds-ai-aura-hover-background: #333333;
@@ -20335,7 +20354,7 @@ optgroup.cds--select-optgroup:disabled {
20335
20354
  outline: 0
20336
20355
  }
20337
20356
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link,
20338
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link,
20357
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link,
20339
20358
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link {
20340
20359
  font-size: var(--cds-body-01-font-size,.875rem);
20341
20360
  font-weight: var(--cds-body-01-font-weight,400);
@@ -20344,31 +20363,34 @@ optgroup.cds--select-optgroup:disabled {
20344
20363
  }
20345
20364
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link,
20346
20365
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link:visited,
20347
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link,
20348
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link:visited,
20366
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link,
20367
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:visited,
20349
20368
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link,
20350
20369
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link:visited {
20351
20370
  color: var(--cds-text-secondary,#525252)
20352
20371
  }
20353
20372
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link:focus,
20354
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link:focus,
20373
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:focus,
20355
20374
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link:focus {
20356
20375
  outline-color: var(--cds-focus,#0f62fe);
20357
20376
  outline-offset: -1px
20358
20377
  }
20359
20378
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link:active,
20360
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link:active,
20379
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:active,
20361
20380
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link:active {
20362
20381
  color: var(--cds-text-on-color,#fff)
20363
20382
  }
20364
20383
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link:hover,
20365
20384
  :host(c4d-footer-nav-item) .cds--footer__link.cds--link:visited:hover,
20366
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link:hover,
20367
- :host(c4d-legal-nav-cookie-preferences-placeholder) div .cds--footer__link.cds--link:visited:hover,
20385
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:hover,
20386
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:visited:hover,
20368
20387
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link:hover,
20369
20388
  :host(c4d-legal-nav-item) .cds--footer__link.cds--link:visited:hover {
20370
20389
  color: var(--cds-text-primary,#161616)
20371
20390
  }
20391
+ :host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link {
20392
+ cursor: pointer
20393
+ }
20372
20394
  :host(c4d-legal-nav) .cds--legal-nav__list .cds--legal-nav__list-item .cds--link {
20373
20395
  color: var(--cds-text-secondary,#525252)
20374
20396
  }
@@ -20506,8 +20528,8 @@ optgroup.cds--select-optgroup:disabled {
20506
20528
  padding-inline: 2.5rem
20507
20529
  }
20508
20530
  }
20509
- :host(c4d-footer) .cds--adjunct-links__container--hidden,
20510
- :host(c4d-legal-nav) .cds--adjunct-links__container--hidden {
20531
+ :host(c4d-footer) .c4d--adjunct-links__container--hidden,
20532
+ :host(c4d-legal-nav) .c4d--adjunct-links__container--hidden {
20511
20533
  display: none
20512
20534
  }
20513
20535
  :host(c4d-footer-nav-group[open]) .cds--accordion__content {
@@ -27146,7 +27168,7 @@ screen and (prefers-contrast) {
27146
27168
  padding-block-start: .5rem
27147
27169
  }
27148
27170
  .cds--legal-nav__list-item,
27149
- :host(c4d-legal-nav-cookie-preferences-placeholder) div,
27171
+ :host(c4d-legal-nav-cookie-preferences-placeholder),
27150
27172
  :host(c4d-legal-nav-item) {
27151
27173
  padding: .5rem 0 0;
27152
27174
  -webkit-margin-end: 2rem;
@@ -27158,14 +27180,14 @@ screen and (prefers-contrast) {
27158
27180
  }
27159
27181
  @media (max-width:41.98rem) {
27160
27182
  .cds--legal-nav__list-item:first-child,
27161
- :host(c4d-legal-nav-cookie-preferences-placeholder) div:first-child,
27183
+ :host(c4d-legal-nav-cookie-preferences-placeholder):first-child,
27162
27184
  :host(c4d-legal-nav-item):first-child {
27163
27185
  -webkit-padding-before: 0;
27164
27186
  padding-block-start: 0
27165
27187
  }
27166
27188
  }
27167
27189
  .cds--legal-nav__list-item:last-child,
27168
- :host(c4d-legal-nav-cookie-preferences-placeholder) div:last-child,
27190
+ :host(c4d-legal-nav-cookie-preferences-placeholder):last-child,
27169
27191
  :host(c4d-legal-nav-item):last-child {
27170
27192
  -webkit-margin-end: 0;
27171
27193
  margin-inline-end: 0
@@ -38766,6 +38788,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
38766
38788
  }
38767
38789
  :host(c4d-leadspace) ::slotted([slot=navigation]) {
38768
38790
  z-index: 1;
38791
+ max-inline-size: 40rem;
38769
38792
  -webkit-padding-after: 1rem!important;
38770
38793
  padding-block-end: 1rem!important;
38771
38794
  padding-inline: 1rem!important
@@ -44642,13 +44665,33 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
44642
44665
  cds-hr {
44643
44666
  margin-inline: 2rem/-2
44644
44667
  }
44668
+ html {
44669
+ font-size: 100%
44670
+ }
44671
+ body {
44672
+ font-weight: 400;
44673
+ font-family: 'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;
44674
+ -moz-osx-font-smoothing: grayscale;
44675
+ -webkit-font-smoothing: antialiased;
44676
+ text-rendering: optimizeLegibility
44677
+ }
44678
+ code {
44679
+ font-family: 'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace
44680
+ }
44681
+ strong {
44682
+ font-weight: 600
44683
+ }
44645
44684
  .cds--nc {
44646
44685
  max-inline-size: 640px
44647
44686
  }
44648
44687
  .cds--nc .cds--checkbox-group,
44649
44688
  .cds--nc p {
44650
44689
  -webkit-margin-after: 1.5rem;
44651
- margin-block-end: 1.5rem
44690
+ margin-block-end: 1.5rem;
44691
+ font-size: var(--cds-legal-02-font-size,.875rem);
44692
+ font-weight: var(--cds-legal-02-font-weight,400);
44693
+ line-height: var(--cds-legal-02-line-height,1.28572);
44694
+ letter-spacing: var(--cds-legal-02-letter-spacing,.16px)
44652
44695
  }
44653
44696
  .cds--nc a {
44654
44697
  color: var(--cds-link-primary,#0f62fe)
@@ -48642,8 +48685,7 @@ cds-hr {
48642
48685
  }
48643
48686
  .cds--tableofcontents__content {
48644
48687
  -webkit-box-sizing: border-box;
48645
- box-sizing: border-box;
48646
- padding-block: 1rem 3rem
48688
+ box-sizing: border-box
48647
48689
  }
48648
48690
  .cds--tableofcontents {
48649
48691
  -webkit-margin-before: 2rem;