diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index 7ca5c698b3c..3957b356883 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their | back-to-top | View changes [here](#backtotop) | | background-media | No API changes. | | button | This component is deprecated in v2 in favor for Carbon's core Button | +| callout-quote | View changes [here](#callout-quote) | | card | View changes [here] (#card) | | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item | | card-link | This component is deprecated in v2 in favor for card (link variant) component | @@ -35,11 +36,13 @@ For Carbon v11 migration guidance, see their | cta | View changes [here](#cta) | | cta-block | This component is deprecated in v2 in favor for content-section/block & content-item components | | cta-section | This component is deprecated in v2 in favor for content-section/block & content-item components | +| hr | View changes [here](#horizontal-rule) | | image | View changes [here](#image) | | image-with-caption | Replaced by `image` | | link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components | | logo-grid | This component is deprecated in v2 in favor for content-section/block & image-group components | | pictogram-item | This component is deprecated in v2 in favor for content-item (pictogram variation) componet | +| quote | No API changes. | | search-with-typeahead | No API changes. | | tabs-extended-media | This component is deprecated in v2 in favor for tabs-extended component | @@ -48,6 +51,11 @@ For Carbon v11 migration guidance, see their - +### Callout quote + +- New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'` +- New callout style tokens + ### Card - `` has `icon-placement` property has been removed @@ -62,6 +70,10 @@ All of the CTA-like features can now be used natively within Button, Card, Featu Each new component has a `cta-type` property that can change the icon and click functionality of the component. See the components' documentations for more information. +### Horizontal rule + +- New options for `contrast` property: `SUBTLE = 'subtle' (default)`, `STRONG = 'strong'` instead of `MEDIUM_CONTRAST = 'medium_contrast'`, `LOW_CONTRAST = 'low_contrast'`, `HIGH_CONTRAST = 'high_contrast'` + ### Image - New `lightbox-contrast` property \ No newline at end of file diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss index 36e5a410117..707f089f1a4 100644 --- a/packages/styles/scss/components/callout-quote/_callout-quote.scss +++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss @@ -11,36 +11,18 @@ @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; @use '../../globals/utils/hang' as *; -@use '../../internal/callout/callout'; -@use '../quote/quote'; +@use '../../globals/utils/flex-grid' as *; +@use '../../internal/callout/callout' as *; +@use '../quote/quote' as *; -@mixin callout-quote { - .#{$prefix}--callout-quote, - :host(#{$c4d-prefix}-callout-quote) { - .#{$prefix}--quote { - background-color: $background-inverse; - .#{$prefix}--link { - color: $link-inverse; - outline-color: $focus-inverse; - &:hover { - color: #a6c8ff; - } - } - } - } - - .#{$prefix}--callout-quote .#{$prefix}--callout__container { - padding-left: $spacing-05; - padding-right: $spacing-05; - - @include breakpoint(md) { - padding-left: 0; - padding-right: 0; - } - } +@include callout; +@include quote; +@mixin callout-quote { :host(#{$c4d-prefix}-callout-quote) { - @extend .#{$prefix}--callout__container; + @extend :host(#{$c4d-prefix}-callout); + @extend :host(#{$c4d-prefix}-callout-text); + @include make-row; @include breakpoint(md) { @include hang; @@ -53,4 +35,66 @@ outline: transparent; } } + + :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']); + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']); + } + + :host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']); + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']); + } + + :host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']); + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']); + } + :host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']); + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']); + } + + :host(#{$c4d-prefix}-callout-link-with-icon) { + @extend .#{$prefix}--link-with-icon; + + display: inline-block; + a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { + color: $link-primary; + outline-color: $focus-inverse; + + &:hover { + color: $link-primary-hover; + } + + &:active { + color: $link-primary; + } + } + } + + :host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) { + a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { + color: $link-inverse; + + &:hover { + // @carbon/styles has no hover color for $link-inverse. + color: $link-inverse; + } + + &:active { + color: $link-inverse; + } + } + } + + :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr { + margin: $spacing-05; + @include breakpoint(md) { + margin: $spacing-05 0; + } + @include breakpoint(lg) { + margin: $spacing-05 $spacing-03; + } + } } diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index c5ff5ce0632..9fd2d3a95e3 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -11,54 +11,120 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; -@use '../../internal/callout/callout'; +@use '../../internal/callout/callout' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; @use '../image'; @use '../content-block-simple/content-block-simple'; +@include callout; + @mixin callout-with-media { - :host(#{$c4d-prefix}-callout-with-media), - .#{$prefix}--callout-with-media { + :host(#{$c4d-prefix}-callout-with-media) { + @extend :host(#{$c4d-prefix}-callout); + display: block; - background-color: $background-inverse; - ::slotted([slot='heading']), - .#{$prefix}--content-block__heading { + ::slotted([slot='heading']) { margin-bottom: $spacing-07; } ::slotted([slot='copy']) { margin-bottom: $spacing-07; - color: $icon-inverse; } } + :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) { + @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']); + } + :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']), - .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading, :host(#{$c4d-prefix}-callout-with-media-copy) - ::slotted(#{$c4d-prefix}-content-block-paragraph), - .#{$prefix}--callout-with-media .#{$prefix}--content-item__copy p, + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @extend :host(#{$c4d-prefix}-callout-text); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) + ::slotted([slot='heading']), + :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='inverse']) + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) + ::slotted([slot='heading']), + :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='layer']) + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) + ::slotted([slot='heading']), + :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='purple']) + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']); + } + + :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) + ::slotted([slot='heading']), + :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='cyan']) + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']); + } + :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__caption, :host(#{$c4d-prefix}-callout-with-media-video) - ::slotted(#{$c4d-prefix}-video-player), - .#{$prefix}--callout-with-media .#{$prefix}--video-player__video-caption, - .#{$prefix}--callout-with-media .#{$prefix}--image__caption { - color: $icon-inverse; + ::slotted(#{$c4d-prefix}-video-player) { + @extend :host(#{$c4d-prefix}-callout-caption); + } + + :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse']) + .#{$prefix}--image__caption, + :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='inverse']) + ::slotted(#{$c4d-prefix}-video-player) { + @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']); + } + + :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='layer']) + .#{$prefix}--image__caption, + :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='layer']) + ::slotted(#{$c4d-prefix}-video-player) { + @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']); + } + + :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='purple']) + .#{$prefix}--image__caption, + :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='purple']) + ::slotted(#{$c4d-prefix}-video-player) { + @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']); + } + + :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='cyan']) + .#{$prefix}--image__caption, + :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan']) + ::slotted(#{$c4d-prefix}-video-player) { + @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']); } :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']), - .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading, - :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']), - .#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy { + :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']) { padding-right: $spacing-07; max-width: rem(640px); width: auto; } - .#{$prefix}--callout-with-media .#{$prefix}--callout__content { - padding-top: 0; - } :host(#{$c4d-prefix}-callout-with-media-video), .#{$prefix}--callout-with-media .#{$prefix}--callout__content diff --git a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss index f29de5639ae..e7b67fc3837 100644 --- a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss +++ b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss @@ -7,110 +7,58 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; @mixin horizontal-rule { - $low-contrast: $layer-accent-01; - $medium-contrast: $toggle-off; - $high-contrast: $border-inverse; + $subtle-contrast: $border-subtle-01; + $strong-contrast: $border-strong-01; $thin-weight: rem(1px); - :host(#{$c4d-prefix}-hr)[size='small'] { - @extend .#{$prefix}--hr--small; - } - :host(#{$c4d-prefix}-hr)[size='medium'] { - @extend .#{$prefix}--hr--medium; - } - :host(#{$c4d-prefix}-hr)[size='large'] { - @extend .#{$prefix}--hr--large; - } - :host(#{$c4d-prefix}-hr)[weight='thick'] { - @extend .#{$prefix}--hr--thick; - } - :host(#{$c4d-prefix}-hr)[type='dashed'] { - @extend .#{$prefix}--hr--dashed; - } - :host(#{$c4d-prefix}-hr)[contrast='low-contrast'] { - @extend .#{$prefix}--hr--low-contrast; - } - :host(#{$c4d-prefix}-hr)[contrast='high-contrast'] { - @extend .#{$prefix}--hr--high-contrast; - } - - :host(#{$c4d-prefix}-hr), - .#{$prefix}--hr { + :host(#{$c4d-prefix}-hr) { + display: block; margin: $spacing-05 0; border: none; height: $thin-weight; - background: $medium-contrast; - - &.#{$prefix}--hr--small { - max-width: carbon--mini-units(4); - } - - &.#{$prefix}--hr--medium { - max-width: carbon--mini-units(6); - } - - &.#{$prefix}--hr--large { - max-width: carbon--mini-units(8); - } - - &.#{$prefix}--hr--thick { - height: $spacing-01; - } - - &.#{$prefix}--hr--low-contrast { - background: $low-contrast; - } - - &.#{$prefix}--hr--high-contrast { - background: $high-contrast; - } + background: $strong-contrast; } - .#{$prefix}--hr--dashed { + :host( + #{$c4d-prefix}-hr[type='dashed']:not([size='small']):not( + [size='medium'] + ):not([size='large']) + ) { height: $thin-weight; background-color: transparent; background-size: $spacing-05 $thin-weight; background-repeat: repeat-x; background-image: linear-gradient( to right, - $medium-contrast 50%, + $strong-contrast 50%, transparent 50% ); + } - &.#{$prefix}--hr--low-contrast { - background-image: linear-gradient( - to right, - $low-contrast 50%, - transparent 50% - ); - } - - &.#{$prefix}--hr--high-contrast { - background-image: linear-gradient( - to right, - $high-contrast 50%, - transparent 50% - ); - } + :host(#{$c4d-prefix}-hr[size='small']) { + max-width: $spacing-07; + } + :host(#{$c4d-prefix}-hr[size='medium']) { + max-width: $spacing-09; + } + :host(#{$c4d-prefix}-hr[size='large']) { + max-width: $spacing-10; } - .#{$prefix}--hr--small, - .#{$prefix}--hr--medium, - .#{$prefix}--hr--large { - height: $thin-weight; - background: $medium-contrast; - background-image: none; + :host(#{$c4d-prefix}-hr[contrast='subtle']) { + background: $subtle-contrast; + } - &.#{$prefix}--hr--low-contrast { - background: $low-contrast; - } + :host(#{$c4d-prefix}-hr[contrast='strong']) { + background: $strong-contrast; + } - &.#{$prefix}--hr--high-contrast { - background: $high-contrast; - } + :host(#{$c4d-prefix}-hr[weight='thick']) { + height: $spacing-01; } } diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss index 263b641b3ba..e309b9175e2 100644 --- a/packages/styles/scss/components/quote/_quote.scss +++ b/packages/styles/scss/components/quote/_quote.scss @@ -17,7 +17,6 @@ @use '../../components/link-with-icon'; @mixin quote { - .#{$prefix}--quote, :host(#{$c4d-prefix}-quote) { background: $background; padding-bottom: $spacing-10; @@ -45,6 +44,7 @@ word-break: break-word; padding: 0 $spacing-07 $spacing-07 $spacing-07; + margin: 0; @include breakpoint(md) { padding-bottom: $spacing-09; @@ -68,7 +68,6 @@ position: absolute; // this value was chosen by visually stay the closest as possible from the quotation text in the md and above breakpoints left: 0.6rem; - color: $text-primary; } .#{$prefix}--quote__mark-corner-bracket { @@ -100,20 +99,23 @@ padding-bottom: $spacing-09; } - :host(#{$c4d-prefix}-quote-source-heading), - .#{$prefix}--quote__source-heading { + :host(#{$c4d-prefix}-quote-source-bottom-copy), + :host(#{$c4d-prefix}-quote-source-copy), + :host(#{$c4d-prefix}-quote-source-heading) { + display: block; + } + + :host(#{$c4d-prefix}-quote-source-heading) { padding-left: $spacing-05; @include type-style(heading-02, true); } - :host(#{$c4d-prefix}-quote-source-copy), - .#{$prefix}--quote__source-body { + :host(#{$c4d-prefix}-quote-source-copy) { padding-left: $spacing-05; @include type-style(body-02, true); } - :host(#{$c4d-prefix}-quote-source-bottom-copy), - .#{$prefix}--quote__source-optional-copy { + :host(#{$c4d-prefix}-quote-source-bottom-copy) { padding-left: $spacing-05; @include type-style(body-02, true); } @@ -185,4 +187,33 @@ @include make-col(10, 12); } } + + :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr { + margin: $spacing-05; + @include breakpoint(md) { + margin: $spacing-05 0; + } + @include breakpoint(lg) { + margin: $spacing-05 $spacing-03; + } + } + + :host(#{$c4d-prefix}-quote-link-with-icon) { + @extend .#{$prefix}--link-with-icon; + + display: inline-block; + } + + :host-context(#{$c4d-prefix}-quote[color-scheme='inverse']) + a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { + color: $link-inverse; + outline-color: $focus-inverse; + &:hover { + color: $link-inverse; + text-decoration: underline; + } + &:active { + color: $link-inverse; + } + } } diff --git a/packages/styles/scss/internal/callout/_callout.scss b/packages/styles/scss/internal/callout/_callout.scss index 8262d703a10..5e38f0ca42f 100644 --- a/packages/styles/scss/internal/callout/_callout.scss +++ b/packages/styles/scss/internal/callout/_callout.scss @@ -5,20 +5,73 @@ * LICENSE file in the root directory of this source tree. */ +@use 'sass:map'; +@use '@carbon/colors' as *; @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../../globals/utils/hang' as *; +@use './tokens' as *; @mixin callout { - .#{$prefix}--callout__container, :host(#{$c4d-prefix}-callout) { - background-color: $focus-inset; - @include make-row; + background-color: $background; } + + :host(#{$c4d-prefix}-callout[color-scheme='inverse']) { + background-color: $background-inverse; + } + + :host(#{$c4d-prefix}-callout[color-scheme='layer']) { + background-color: $layer-01; + } + + :host(#{$c4d-prefix}-callout[color-scheme='purple']) { + background-color: $callout-background-purple; + } + + :host(#{$c4d-prefix}-callout[color-scheme='cyan']) { + background-color: $callout-background-cyan; + } + + :host(#{$c4d-prefix}-callout-text), + :host(#{$c4d-prefix}-callout-text[color-scheme='layer']) { + color: $text-primary; + } + + :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']) { + color: $text-inverse; + } + + :host(#{$c4d-prefix}-callout-text[color-scheme='purple']) { + color: $callout-color-purple; + } + + :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']) { + color: $callout-color-cyan; + } + + :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']), + :host(#{$c4d-prefix}-callout-caption) { + color: $text-secondary; + } + + :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']) { + color: $text-inverse; + } + + :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']) { + color: $callout-caption-purple; + } + + :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']) { + color: $callout-caption-cyan; + } + .#{$prefix}--callout__column { @include make-col-ready; } @@ -40,20 +93,5 @@ @include make-col-offset(1, 12); @include make-col(10, 12); } - - .#{$prefix}--quote { - background-color: $layer-01; - } - - .#{$prefix}--quote__copy, - .#{$prefix}--quote__source-heading, - .#{$prefix}--quote__source-body, - .#{$prefix}--quote__source-optional-copy, - ::slotted(#{$c4d-prefix}-quote-source-bottom-copy), - ::slotted(#{$c4d-prefix}-quote-source-copy), - ::slotted(#{$c4d-prefix}-quote-source-heading), - .#{$prefix}--quote__mark { - color: $icon-inverse; - } } } diff --git a/packages/styles/scss/internal/callout/_index.scss b/packages/styles/scss/internal/callout/_index.scss index 436fc32727f..209dc529d53 100644 --- a/packages/styles/scss/internal/callout/_index.scss +++ b/packages/styles/scss/internal/callout/_index.scss @@ -6,6 +6,7 @@ // @forward 'callout'; + @use 'callout'; @include callout.callout; diff --git a/packages/styles/scss/internal/callout/_tokens.scss b/packages/styles/scss/internal/callout/_tokens.scss new file mode 100644 index 00000000000..26f93c73994 --- /dev/null +++ b/packages/styles/scss/internal/callout/_tokens.scss @@ -0,0 +1,182 @@ +// +// Copyright IBM Corp. 2020 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '@carbon/colors' as *; +@use '@carbon/styles/scss/themes'; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/component-tokens'; + +$callout-background-cyan: ( + fallback: $cyan-10, + values: ( + ( + theme: themes.$white, + value: $cyan-10, + ), + ( + theme: themes.$g10, + value: $cyan-10, + ), + ( + theme: themes.$g90, + value: $cyan-90, + ), + ( + theme: themes.$g100, + value: $cyan-90, + ), + ), +); + +$callout-color-cyan: ( + fallback: $cyan-90, + values: ( + ( + theme: themes.$white, + value: $cyan-90, + ), + ( + theme: themes.$g10, + value: $cyan-90, + ), + ( + theme: themes.$g90, + value: $cyan-10, + ), + ( + theme: themes.$g100, + value: $cyan-10, + ), + ), +); + +$callout-caption-cyan: ( + fallback: $cyan-70, + values: ( + ( + theme: themes.$white, + value: $cyan-70, + ), + ( + theme: themes.$g10, + value: $cyan-70, + ), + ( + theme: themes.$g90, + value: $cyan-30, + ), + ( + theme: themes.$g100, + value: $cyan-30, + ), + ), +); + +$callout-background-purple: ( + fallback: $purple-10, + values: ( + ( + theme: themes.$white, + value: $purple-10, + ), + ( + theme: themes.$g10, + value: $purple-10, + ), + ( + theme: themes.$g90, + value: $purple-90, + ), + ( + theme: themes.$g100, + value: $purple-90, + ), + ), +); + +$callout-color-purple: ( + fallback: $purple-90, + values: ( + ( + theme: themes.$white, + value: $purple-90, + ), + ( + theme: themes.$g10, + value: $purple-90, + ), + ( + theme: themes.$g90, + value: $purple-10, + ), + ( + theme: themes.$g100, + value: $purple-10, + ), + ), +); + +$callout-caption-purple: ( + fallback: $purple-70, + values: ( + ( + theme: themes.$white, + value: $purple-70, + ), + ( + theme: themes.$g10, + value: $purple-70, + ), + ( + theme: themes.$g90, + value: $purple-30, + ), + ( + theme: themes.$g100, + value: $purple-30, + ), + ), +); + +$callout-tokens: ( + callout-background-cyan: $callout-background-cyan, + callout-color-cyan: $callout-color-cyan, + callout-caption-cyan: $callout-caption-cyan, + callout-background-purple: $callout-background-purple, + callout-color-purple: $callout-color-purple, + callout-caption-purple: $callout-caption-purple, +); + +$callout-background-cyan: component-tokens.get-var( + $callout-background-cyan, + 'callout-background-cyan' +); + +$callout-color-cyan: component-tokens.get-var( + $callout-color-cyan, + 'callout-color-cyan' +); + +$callout-caption-cyan: component-tokens.get-var( + $callout-caption-cyan, + 'callout-caption-cyan' +); + +$callout-background-purple: component-tokens.get-var( + $callout-background-purple, + 'callout-background-purple' +); + +$callout-color-purple: component-tokens.get-var( + $callout-color-purple, + 'callout-color-purple' +); + +$callout-caption-purple: component-tokens.get-var( + $callout-caption-purple, + 'callout-caption-purple' +); diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss index e8d1f936969..5a99be42853 100644 --- a/packages/web-components/.storybook/container.scss +++ b/packages/web-components/.storybook/container.scss @@ -12,7 +12,11 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/grid'; + +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; + +@include add-component-tokens(callout-tokens.$callout-tokens); @include add-component-tokens(tag-tokens.$tag-tokens); // Emit the flex-grid styles diff --git a/packages/web-components/src/component-mixins/callout/callout.ts b/packages/web-components/src/component-mixins/callout/callout.ts index 0fc70f93ce6..5d29235f5b5 100644 --- a/packages/web-components/src/component-mixins/callout/callout.ts +++ b/packages/web-components/src/component-mixins/callout/callout.ts @@ -18,7 +18,7 @@ const { prefix } = settings; * @mixin c4d-callout */ const C4DCalloutMixin = >(base: T) => { - return class extends base { + abstract class CalloutMixin extends base { render() { return html`
@@ -32,7 +32,9 @@ const C4DCalloutMixin = >(base: T) => {
`; } - }; + } + + return CalloutMixin; }; export default C4DCalloutMixin; diff --git a/packages/web-components/src/component-mixins/callout/defs.ts b/packages/web-components/src/component-mixins/callout/defs.ts new file mode 100644 index 00000000000..a4591e15c8f --- /dev/null +++ b/packages/web-components/src/component-mixins/callout/defs.ts @@ -0,0 +1,37 @@ +/** + * @license + * + * Copyright IBM Corp. 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export enum COLOR_SCHEME { + /** + * Regular + */ + REGULAR = 'regular', + + /** + * Inverse + */ + INVERSE = 'inverse', + + /** + * Layer background + */ + LAYER = 'layer', + + /** + * Cyan background + */ + CYAN = 'cyan', + + /** + * Purple background + */ + PURPLE = 'purple', +} + +export default COLOR_SCHEME; diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx index e3efc2baf82..5933ea447ef 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx @@ -29,6 +29,15 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-quote/index.js'; +### SCSS + +Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following: + +```css +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; +@include add-component-tokens(callout-tokens.$callout-tokens); +``` + ### HTML ```html diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx index c34456e9ced..de1db401951 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx @@ -44,6 +44,15 @@ function App() { } ``` +### SCSS + +Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following: + +```css +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; +@include add-component-tokens(callout-tokens.$callout-tokens); +``` + ## Props diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx index e58f00387de..2edb5fe9034 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx +++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx @@ -19,9 +19,10 @@ import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-r import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy'; import textNullable from '../../../../.storybook/knob-text-nullable'; import { QUOTE_TYPES } from '../../quote/quote'; +import { COLOR_SCHEME } from '../../../component-mixins/callout/defs'; import readme from './README.stories.react.mdx'; -const types = { +const quoteTypes = { [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT, [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED, [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE, @@ -31,11 +32,19 @@ const types = { [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET, }; -export const Default = (args) => { - const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } = - args?.CalloutQuote ?? {}; +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, +}; + + +export const Default = args => { + const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy, colorScheme } = args?.CalloutQuote ?? {}; return ( - + {copy} {sourceHeading} {sourceCopy} @@ -51,22 +60,15 @@ Default.story = { parameters: { knobs: { CalloutQuote: () => ({ - copy: textNullable( - 'Quote (copy):', - 'Bringing together the technology and expertise for a new way to create' - ), - quoteMark: select('Quote Mark (markType):', types, types.doubleCurved), - sourceHeading: textNullable( - 'Source heading (source-heading slot)', - 'John Doe' - ), - sourceCopy: textNullable( - 'Source copy (source-copy slot)', - 'Senior Vice President' - ), - sourceBottomCopy: textNullable( - 'Source bottom copy (source-bottom-copy slot)', - 'IBM Cloud' + copy: textNullable('Quote (copy):', 'Bringing together the technology and expertise for a new way to create'), + quoteMark: select('Quote Mark (markType):', quoteTypes, quoteTypes.doubleCurved), + sourceHeading: textNullable('Source heading (source-heading slot)', 'John Doe'), + sourceCopy: textNullable('Source copy (source-copy slot)', 'Senior Vice President'), + sourceBottomCopy: textNullable('Source bottom copy (source-bottom-copy slot)', 'IBM Cloud'), + colorScheme: select( + 'Color scheme:', + colorSchemeTypes, + COLOR_SCHEME.REGULAR ), }), }, diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts index d50547d654d..6f1a84399de 100644 --- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts +++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts @@ -13,10 +13,11 @@ import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/ import { html } from 'lit'; import { select } from '@storybook/addon-knobs'; import { QUOTE_TYPES } from '../../quote/quote'; +import { COLOR_SCHEME } from '../../../component-mixins/callout/defs'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; -const types = { +const quoteTypes = { [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT, [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED, [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE, @@ -26,11 +27,25 @@ const types = { [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET, }; +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, +}; + export const Default = (args) => { - const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } = - args?.CalloutQuote ?? {}; + const { + copy, + quoteMark, + sourceHeading, + sourceCopy, + sourceBottomCopy, + colorScheme, + } = args?.CalloutQuote ?? {}; return html` - + ${copy} ${sourceHeading} ${sourceCopy} @@ -65,7 +80,11 @@ export default { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ' + 'ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.' ), - quoteMark: select('Quote Mark (markType):', types, types.doubleCurved), + quoteMark: select( + 'Quote Mark (markType):', + quoteTypes, + quoteTypes.doubleCurved + ), sourceHeading: textNullable( 'Source heading (source-heading slot)', 'Lorem ipsum dolor sit amet' @@ -78,6 +97,11 @@ export default { 'Source bottom copy (source-bottom-copy slot)', 'IBM Cloud' ), + colorScheme: select( + 'Color scheme:', + colorSchemeTypes, + COLOR_SCHEME.REGULAR + ), }), }, propsSet: { diff --git a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts index c2a70265a30..fc472b13113 100644 --- a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts +++ b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts @@ -11,6 +11,8 @@ import { css } from 'lit'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; import C4DLinkWithIcon from '../link-with-icon/link-with-icon'; +import { property } from 'lit/decorators.js'; +import { COLOR_SCHEME } from '../../component-mixins/callout/defs'; import styles from './callout-quote.scss'; const { stablePrefix: c4dPrefix } = settings; @@ -22,6 +24,12 @@ const { stablePrefix: c4dPrefix } = settings; */ @customElement(`${c4dPrefix}-callout-link-with-icon`) class C4DCalloutLinkWithIcon extends C4DLinkWithIcon { + /** + * The color-scheme type. + */ + @property({ reflect: true, attribute: 'color-scheme' }) + colorScheme = COLOR_SCHEME.REGULAR; + static get stableSelector() { return `${c4dPrefix}--callout-link-with-icon`; } diff --git a/packages/web-components/src/components/callout-quote/callout-quote.scss b/packages/web-components/src/components/callout-quote/callout-quote.scss index 2a7f3cf6fc4..1c2d6f41dd0 100644 --- a/packages/web-components/src/components/callout-quote/callout-quote.scss +++ b/packages/web-components/src/components/callout-quote/callout-quote.scss @@ -5,41 +5,5 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; @use '@carbon/ibmdotcom-styles/scss/components/callout-quote'; @use '@carbon/ibmdotcom-styles/scss/components/link-with-icon'; - -:host(#{$c4d-prefix}-callout-link-with-icon) { - @extend .#{$prefix}--link-with-icon; - - display: inline-block; - a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { - color: $link-inverse; - outline-color: $focus-inverse; - - &:hover { - // @carbon/styles has no hover color for $inverse-link. - // Solution is to use the same token and add underline - color: $link-inverse; - text-decoration: underline; - } - - &:active { - color: $link-inverse; - } - } -} - -:host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr { - margin: $spacing-05; - @include breakpoint(md) { - margin: $spacing-05 0; - } - @include breakpoint(lg) { - margin: $spacing-05 $spacing-03; - } -} diff --git a/packages/web-components/src/components/callout-quote/callout-quote.ts b/packages/web-components/src/components/callout-quote/callout-quote.ts index a7a41dd43c6..a745e59239a 100644 --- a/packages/web-components/src/components/callout-quote/callout-quote.ts +++ b/packages/web-components/src/components/callout-quote/callout-quote.ts @@ -7,21 +7,63 @@ * LICENSE file in the root directory of this source tree. */ +import { html } from 'lit'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import styles from './callout-quote.scss'; import C4DCalloutMixin from '../../component-mixins/callout/callout'; import C4DQuote from '../quote/quote'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; +import { property } from 'lit/decorators.js'; +import { COLOR_SCHEME } from '../../component-mixins/callout/defs'; +import C4DCalloutLinkWithIcon from './callout-link-with-icon'; -const { stablePrefix: c4dPrefix } = settings; +const { prefix, stablePrefix: c4dPrefix } = settings; /** - * Callout Data. + * Callout Quote. * - * @element c4d-callout-data + * @element c4d-callout-quote */ @customElement(`${c4dPrefix}-callout-quote`) class C4DCalloutQuote extends C4DCalloutMixin(C4DQuote) { + /** + * The color-scheme type. + */ + @property({ reflect: true, attribute: 'color-scheme' }) + colorScheme = COLOR_SCHEME.REGULAR; + + updated(changedProperties) { + super.updated(changedProperties); + const linkWithIcon = this.querySelector( + (this.constructor as typeof C4DCalloutQuote).selectorLinkWithIcon + ); + linkWithIcon + ? ((linkWithIcon as C4DCalloutLinkWithIcon).colorScheme = + this.colorScheme) + : ''; + } + + render() { + return html` +
+
+
+
+ ${this._renderQuote()}${this._renderSource()}${this._renderFooter()} +
+
+
+
+ `; + } + + /** + * A selector that will return the child link-with-icon. + */ + static get selectorLinkWithIcon() { + return `${c4dPrefix}-callout-link-with-icon`; + } + static get stableSelector() { return `${c4dPrefix}--callout-quote`; } diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx index 1cff978cc6c..bf239911384 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx @@ -41,6 +41,15 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callou +### SCSS + +Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following: + +```css +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; +@include add-component-tokens(callout-tokens.$callout-tokens); +``` + ### HTML ```html diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx index 7f0d2ca7781..089de3b6ecf 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx @@ -46,6 +46,15 @@ function App() { } ``` +### SCSS + +Callout quote has specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following: + +```css +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; +@include add-component-tokens(callout-tokens.$callout-tokens); +``` + ## Callout with Media (Video) ```javascript diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx index 4c5c4cbf6a1..dc08c622ecc 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx +++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx @@ -19,10 +19,20 @@ import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/compone import C4DCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image'; import C4DCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video'; import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; +import { COLOR_SCHEME } from '../../../component-mixins/callout/defs'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; import readme from './README.stories.react.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, +}; + + const image = ( { - const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {}; - const headingComponent = document.querySelector('cds-content-block-heading'); + const { copy, heading, mediaType, colorScheme } = args?.CalloutWithMedia ?? {}; + const headingComponent = document.querySelector('c4d-content-block-heading'); if (headingComponent) { headingComponent.shadowRoot!.textContent = heading; } return ( - + {heading} {copy} @@ -82,6 +92,11 @@ export default { Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, *consequat* libero. Here are some common categories:`, + colorScheme: select( + 'Color scheme:', + colorSchemeTypes, + COLOR_SCHEME.REGULAR + ), }), }, }, diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts index 06dc9acc151..4b976044e71 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts +++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts @@ -13,10 +13,19 @@ import '../callout-with-media-video'; import { html } from 'lit'; import { select } from '@storybook/addon-knobs'; import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; +import { COLOR_SCHEME } from '../../../component-mixins/callout/defs'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +const colorSchemeTypes = { + [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR, + [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE, + [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER, + [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE, + [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN, +}; + const image = html` { - const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {}; + const { copy, heading, mediaType, colorScheme } = + args?.CalloutWithMedia ?? {}; return html` - + ${heading} ${copy} ({ type: select('Type (type):', types, types.solid), size: select('Size (size):', sizes, sizes.fluid), - contrast: select( - 'Contrast (contrast):', - contrasts, - contrasts['medium-contrast'] - ), + contrast: select('Contrast (contrast):', contrasts, contrasts['strong']), weight: select('Weight (weight):', weights, weights.thin), }), }, @@ -68,7 +63,7 @@ Default.story = { HorizontalRule: { type: types.solid, size: sizes.fluid, - contrast: contrasts['medium-contrast'], + contrast: contrasts['strong'], weight: weights.thin, }, }, diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts index b23c351f594..26ed2a88a0f 100644 --- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts +++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts @@ -38,9 +38,8 @@ const sizes = { }; const contrasts = { - 'low-contrast': 'low-contrast', - 'medium-contrast': undefined, - 'high-contrast': 'high-contrast', + strong: 'strong', + subtle: 'subtle', }; const weights = { @@ -52,7 +51,7 @@ export default { title: 'Components/Horizontal rule', decorators: [ (story) => html` -
+

Horizontal Rule

@@ -72,7 +71,7 @@ export default { contrast: select( 'Contrast (contrast):', contrasts, - contrasts['medium-contrast'] + contrasts['strong'] ), weight: select('Weight (weight):', weights, weights.thin), }), @@ -82,7 +81,7 @@ export default { HorizontalRule: { type: types.solid, size: sizes.fluid, - contrast: contrasts['medium-contrast'], + contrast: contrasts['strong'], weight: weights.thin, }, }, diff --git a/packages/web-components/src/components/horizontal-rule/defs.ts b/packages/web-components/src/components/horizontal-rule/defs.ts index 2ce2b9d3455..ee197f989cd 100644 --- a/packages/web-components/src/components/horizontal-rule/defs.ts +++ b/packages/web-components/src/components/horizontal-rule/defs.ts @@ -52,19 +52,14 @@ export enum HR_SIZE { */ export enum HR_CONTRAST { /** - * medium-contrast of hr + * subtle contrast of hr */ - MEDIUM_CONTRAST = 'medium-contrast', + SUBTLE = 'subtle', /** - * low-contrast of hr + * strong default contrast of hr */ - LOW_CONTRAST = 'low-contrast', - - /** - * high-contrast of hr - */ - HIGH_CONTRAST = 'high-contrast', + STRONG = 'strong', } /** diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss index c135bca870d..e36fdd3ccb2 100644 --- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss +++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss @@ -5,9 +5,4 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; @use '@carbon/ibmdotcom-styles/scss/components/horizontal-rule'; - -:host(#{$c4d-prefix}-hr) { - display: block; -} diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts index 809ada80aa6..9d3092072e5 100644 --- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts +++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts @@ -41,10 +41,10 @@ class C4DHorizontalRule extends StableSelectorMixin(LitElement) { /** * Contrast of the HR - * (medium-contrast (default) | low-contrast | high-contrast) + * 'strong' (default) | subtle) */ @property({ attribute: 'contrast', reflect: true }) - contrast = HR_CONTRAST.MEDIUM_CONTRAST; + contrast = HR_CONTRAST.STRONG; /** * Weight of the HR diff --git a/packages/web-components/src/components/quote/quote.scss b/packages/web-components/src/components/quote/quote.scss index 0e1023ab189..6dc18fc078f 100644 --- a/packages/web-components/src/components/quote/quote.scss +++ b/packages/web-components/src/components/quote/quote.scss @@ -5,45 +5,5 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; @use '@carbon/ibmdotcom-styles/scss/components/quote'; @use '@carbon/ibmdotcom-styles/scss/components/link-with-icon'; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -:host(#{$c4d-prefix}-quote-source-bottom-copy), -:host(#{$c4d-prefix}-quote-source-copy), -:host(#{$c4d-prefix}-quote-source-heading) { - display: block; -} - -:host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr { - margin: $spacing-05; - @include breakpoint(md) { - margin: $spacing-05 0; - } - @include breakpoint(lg) { - margin: $spacing-05 $spacing-03; - } -} - -:host(#{$c4d-prefix}-quote-link-with-icon) { - @extend .#{$prefix}--link-with-icon; - - display: inline-block; -} - -:host-context(#{$c4d-prefix}-quote[color-scheme='inverse']) - a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { - color: $link-inverse; - outline-color: $focus-inverse; - &:hover { - color: $link-inverse; - text-decoration: underline; - } - &:active { - color: $link-inverse; - } -} diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts index 1c8920da240..f8683a5d36c 100644 --- a/packages/web-components/src/components/quote/quote.ts +++ b/packages/web-components/src/components/quote/quote.ts @@ -55,7 +55,7 @@ class C4DQuote extends StableSelectorMixin(LitElement) { * Defines if the inverse class is included */ @property({ reflect: true, attribute: 'color-scheme' }) - colorScheme = QUOTE_COLOR_SCHEMES.REGULAR; + colorScheme = ''; /** * `true` if there is source heading. diff --git a/packages/web-components/src/globals/scss/themes.scss b/packages/web-components/src/globals/scss/themes.scss index 3b834c12758..32e97bd02ff 100644 --- a/packages/web-components/src/globals/scss/themes.scss +++ b/packages/web-components/src/globals/scss/themes.scss @@ -4,27 +4,7 @@ // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. // - -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; @use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes' as *; - -:host(.#{$c4d-prefix}-theme-zone-white), -.#{$c4d-prefix}-theme-zone-white { - @include theme($white, true); -} - -:host(.#{$c4d-prefix}-theme-zone-g10), -.#{$c4d-prefix}-theme-zone-g10 { - @include theme($g10, true); -} - -:host(.#{$c4d-prefix}-theme-zone-g90), -.#{$c4d-prefix}-theme-zone-g90 { - @include theme($g90, true); -} +@use '@carbon/ibmdotcom-styles/scss/internal/callout/tokens' as callout-tokens; -:host(.#{$c4d-prefix}-theme-zone-g100), -.#{$c4d-prefix}-theme-zone-g100 { - @include theme($g100, true); -} +@include add-component-tokens(callout-tokens.$callout-tokens);