feat(flow-item): add component tokens #8598

Esri · Jan 13, 2024 · 14c9e37 · 14c9e37
1 parent dd270bb
commit 14c9e37
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git 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
@@ -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
@@ -297,3 +297,15 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
   html`<calcite-flow-item style="--calcite-flow-item-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-flow-item
   >`;
+
+const themeStyles = `
+  --calcite-flow-item-color: blue;
+  --calcite-flow-item-background-color: red;
+`;
+
+export const themed_TestOnly = (): string =>
+  html`<calcite-flow-item style="${themeStyles}" heading="Example" collapsible closable description="description">
+    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.
+  </calcite-flow-item>`;