diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.scss b/packages/web-components/src/components/cbp-badge/cbp-badge.scss index 43dd57e6..9c07e8cb 100644 --- a/packages/web-components/src/components/cbp-badge/cbp-badge.scss +++ b/packages/web-components/src/components/cbp-badge/cbp-badge.scss @@ -7,7 +7,7 @@ */ :root{ --cbp-badge-color: var(--cbp-color-text-lightest); - --cbp-badge-color-dark: var(--cbp-color-text-darkest); + --cbp-badge-color-dark: var(--cbp-color-info-darker); --cbp-badge-color-background: var(--cbp-color-info-base); --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter); } diff --git a/packages/web-components/src/components/cbp-card/cbp-card.scss b/packages/web-components/src/components/cbp-card/cbp-card.scss index d18651a6..a9048f85 100644 --- a/packages/web-components/src/components/cbp-card/cbp-card.scss +++ b/packages/web-components/src/components/cbp-card/cbp-card.scss @@ -81,6 +81,9 @@ cbp-card { font-weight: var(--cbp-font-weight-medium); font-size: var(--cbp-font-size-heading-lg); line-height: var(--cbp-line-height-sm); + } + + &[variant=decision] [slot=cbp-card-title] { margin-bottom: var(--cbp-space-2x); } @@ -161,7 +164,7 @@ cbp-card { } button, a { - padding-block: var(--cbp-space-3x); + padding-block: var(--cbp-space-2x); width: 100%; } } @@ -217,7 +220,7 @@ cbp-card { &[color=danger] { --cbp-banner-card-color: var(--cbp-color-danger-dark); --cbp-banner-card-color-body-background: var(--cbp-color-danger-lighter); - --cbp-banner-card-color-title: var(--cbp-color-text-darkest); + --cbp-banner-card-color-title: var(--cbp-color-text-lighter); --cbp-banner-card-color-dark: var(--cbp-color-danger-light); --cbp-banner-card-color-body-background-dark: var(--cbp-color-danger-darker); diff --git a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx index 4fbf2f30..c723d927 100644 --- a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx +++ b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx @@ -33,26 +33,46 @@ export default { }, }; -const renderActions = (layout, context, { btn1, btn2, btn3 }) => { +const renderActions = (layout, color, context, withIcon, { btn1, btn2, btn3 }) => { + + if (layout === 'double') { return `
${bodyText}
- ${renderActions(actionsLayout, context, actionsConfig)} + ${renderActions(actionsLayout, color,context, withIcon, actionsConfig)} `; }; diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.scss b/packages/web-components/src/components/cbp-chip/cbp-chip.scss index 56691146..cbae53a8 100644 --- a/packages/web-components/src/components/cbp-chip/cbp-chip.scss +++ b/packages/web-components/src/components/cbp-chip/cbp-chip.scss @@ -22,7 +22,7 @@ */ :root { --cbp-chip-color-text: var(--cbp-color-text-lightest); - --cbp-chip-color-text-dark: var(--cbp-color-text-darker); + --cbp-chip-color-text-dark: var(--cbp-color-text-darkest); --cbp-chip-color-text-hover: var(--cbp-color-text-lightest); --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest); --cbp-chip-color-text-focus: var(--cbp-color-text-lightest); @@ -40,7 +40,7 @@ --cbp-chip-icon-color-background-focus: transparent; --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark); --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark); - --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-focus-light); + --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-selected-light); --cbp-chip-icon-color-outline-focus: var(--cbp-color-white); --cbp-chip-icon-color-outline-focus-dark: transparent; @@ -76,6 +76,7 @@ cbp-chip { border-radius: var(--cbp-border-radius-pill); text-transform: uppercase; line-height: var(--cbp-space-7x); + font-size: var(--cbp-font-size-subhead); font-weight: var(--cbp-font-weight-medium); max-width: 100%; white-space: nowrap; @@ -129,6 +130,7 @@ cbp-chip { > .cbp-chip__label + cbp-icon { background-color: var(--cbp-chip-icon-color-background-focus); border-color: var(--cbp-color-white); + border: var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus); outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus); color: var(--cbp-color-text-lightest); outline-offset: -4px; diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx index 0a6eacb9..edcbe7f1 100644 --- a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx +++ b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx @@ -70,7 +70,7 @@ export class CbpChip {${content}