From 14c9e373c4b401f39833ee321f5246e4cd36a029 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 12 Jan 2024 17:00:02 -0800 Subject: [PATCH] feat(flow-item): add component tokens #8598 --- .../src/assets/styles/_host.scss | 8 ++++++ .../src/components/flow-item/flow-item.scss | 26 ++++++++++++++----- .../components/flow-item/flow-item.stories.ts | 12 +++++++++ 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_host.scss b/packages/calcite-components/src/assets/styles/_host.scss index cde73f0c6ad..9072421d857 100644 --- a/packages/calcite-components/src/assets/styles/_host.scss +++ b/packages/calcite-components/src/assets/styles/_host.scss @@ -8,3 +8,11 @@ color: var(--calcite-color-text-2); font-size: var(--calcite-font-size--1); } + +@mixin base-host() { + /* Base ":host" styles for the component */ + box-sizing: border-box; + * { + box-sizing: border-box; + } +} diff --git a/packages/calcite-components/src/components/flow-item/flow-item.scss b/packages/calcite-components/src/components/flow-item/flow-item.scss index 63b7a02a4da..0bf0f1b4aa6 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.scss +++ b/packages/calcite-components/src/components/flow-item/flow-item.scss @@ -3,22 +3,36 @@ * * These properties can be overridden using the component's tag as selector. * + * @prop --calcite-flow-item-background-color: Specifies the background color of the component. + * @prop --calcite-flow-item-color: Specifies the color of the component. * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer. * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border. */ :host { - @extend %component-host; - @apply relative flex w-full flex-auto; + @include base-host(); + + --calcite-flow-item-background-color: var(--calcite-color-foreground-1); + --calcite-flow-item-color: var(--calcite-color-text-2); + --calcite-internal-flow-item-back-border-inline-end-width: var(--calcite-border-width-sm); + --calcite-internal-flow-item-back-border-color: var(--calcite-color-border-3); + + background-color: var(--calcite-flow-item-background-color); + color: var(--calcite-flow-item-color); + font-size: var(--calcite-font-size--1); + position: relative; + display: flex; + inline-size: 100%; + flex: 1 1 auto; } @include disabled(); .back-button { - @apply border-color-3 - border-0 - border-solid; - border-inline-end-width: theme("borderWidth.DEFAULT"); + border-color: var(--calcite-internal-flow-item-back-border-color); + border-width: 0px; + border-style: solid; + border-inline-end-width: var(--calcite-internal-flow-item-back-border-inline-end-width); } calcite-panel { diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts index a146e9fec59..73744265dc7 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts @@ -297,3 +297,15 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string => html`Slotted content!`; + +const themeStyles = ` + --calcite-flow-item-color: blue; + --calcite-flow-item-background-color: red; +`; + +export const themed_TestOnly = (): string => + html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec, + sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue est + malesuada quis. + `;