diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index 3c307d25026..b9f07cf0e2a 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -10,6 +10,7 @@ import { renders, slots, t9n, + themed, } from "../../tests/commonTests"; import { getFocusedElementProp } from "../../tests/utils"; import { DEBOUNCE } from "../../utils/resources"; @@ -532,4 +533,27 @@ describe("calcite-action-bar", () => { expect(await group.getProperty("layout")).toBe("vertical"); }); + + describe("theme", () => { + themed( + html` + + + + + + + + + `, + { + "--calcite-action-bar-expanded-max-width": { + targetProp: "maxInlineSize", + }, + "--calcite-action-bar-items-space": { + targetProp: "gap", + }, + }, + ); + }); }); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss index 9e8cec562c4..3ebe406552a 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.scss +++ b/packages/calcite-components/src/components/action-bar/action-bar.scss @@ -3,7 +3,8 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component. + * @prop --calcite-action-bar-expanded-max-width: Specifies the maximum width of the component when it's `layout` is `"vertical"`. + * @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component. */ :host { @@ -11,51 +12,44 @@ @apply pointer-events-auto inline-flex self-stretch; - --calcite-action-bar-expanded-max-width: auto; + + gap: var(--calcite-action-bar-items-space, 0); } :host([layout="vertical"]) { @apply flex-col; + + &:host([overflow-actions-disabled]) { + overflow-y: auto; + } + + &:host([expanded]) { + max-inline-size: var(--calcite-action-bar-expanded-max-width, auto); + } + .action-group--end { margin-block-start: auto; } + + ::slotted(calcite-action-group:not(:last-of-type)) { + border-block-end-width: var(--calcite-border-width-sm); + } } :host([layout="horizontal"]) { @apply flex-row; + + &:host([overflow-actions-disabled]) { + overflow-x: auto; + } + .action-group--end { @apply ms-auto; } -} -:host([layout="vertical"][overflow-actions-disabled]) { - overflow-y: auto; -} - -:host([layout="horizontal"][overflow-actions-disabled]) { - overflow-x: auto; -} - -:host([layout="vertical"][expanded]) { - max-inline-size: var(--calcite-action-bar-expanded-max-width); -} - -::slotted(calcite-action-group) { - border-block-end: 1px solid var(--calcite-color-border-3); -} - -:host([layout="horizontal"]) ::slotted(calcite-action-group) { - border-block-end: 0; - border-inline-end: 1px solid var(--calcite-color-border-3); -} - -:host([layout="horizontal"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) { - border-inline-end: 0; -} - -::slotted(calcite-action-group:last-child) { - border-block-end: 0; - border-inline-end: 0; + ::slotted(calcite-action-group:not(:last-of-type)) { + border-inline-end-width: var(--calcite-border-width-sm); + } } .action-group--end { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts index 968c00b2345..6faade8e356 100644 --- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts @@ -107,23 +107,6 @@ export const horizontalOverflow_TestOnly = (): string => html` `; -export const withDefinedWidths = (): string => html` - - - - - - - - - - -`; - export const darkModeRTL_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts index 92bc9f61cb9..288761da844 100755 --- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts +++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts @@ -1,5 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests"; +import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; const actionGroupHTML = ` @@ -72,4 +73,20 @@ describe("calcite-action-group", () => { describe("translation support", () => { t9n("calcite-action-group"); }); + + describe("theme", () => { + describe("border", () => { + themed( + html``, + { + "--calcite-action-group-border-color": { + selector: "calcite-action-group", + targetProp: "borderBlockEndColor", + }, + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss index 84457f2f916..53e584deddf 100755 --- a/packages/calcite-components/src/components/action-group/action-group.scss +++ b/packages/calcite-components/src/components/action-group/action-group.scss @@ -3,9 +3,12 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`. - * @prop --calcite-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`. - * @prop --calcite-action-group-padding: Sets the padding when the `layout` property is `"grid"`. + * @prop --calcite-action-background-color: Specifies the component's background color. + * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu. + * @prop --calcite-action-group-columns: Specifies the component's grid-template-columns when the `layout` property is `"grid"`. + * @prop --calcite-action-group-gap: Specifies the component's gap when the `layout` property is `"grid" and padding`. + * @prop --calcite-action-group-padding: [Deprecated] Use --calcite-action-group-gap. Specifies the component's padding. + * */ :host { @@ -15,9 +18,10 @@ flex-col p-0; - --calcite-action-group-columns: 3; - --calcite-action-group-gap: theme("gap.px"); - --calcite-action-group-padding: theme("padding.px"); + background-color: transparent; + border-color: var(--calcite-action-group-border-color, var(--calcite-color-border-3)); + border-style: solid; + border-width: 0; } .container { @@ -25,22 +29,22 @@ } :host([columns="1"]) { - --calcite-action-group-columns: 1; + --calcite-internal-action-group-columns: 1; } :host([columns="2"]) { - --calcite-action-group-columns: 2; + --calcite-internal-action-group-columns: 2; } :host([columns="3"]) { - --calcite-action-group-columns: 3; + --calcite-internal-action-group-columns: 3; } :host([columns="4"]) { - --calcite-action-group-columns: 4; + --calcite-internal-action-group-columns: 4; } :host([columns="5"]) { - --calcite-action-group-columns: 5; + --calcite-internal-action-group-columns: 5; } :host([columns="6"]) { - --calcite-action-group-columns: 6; + --calcite-internal-action-group-columns: 6; } :host(:first-child) { @@ -54,15 +58,18 @@ :host([layout="grid"]) { @apply grid; -} -:host([layout="grid"]) .container { - @apply bg-background - grid - place-content-stretch; - gap: var(--calcite-action-group-gap); - padding: var(--calcite-action-group-gap); - grid-template-columns: repeat(var(--calcite-action-group-columns), auto); + .container { + @apply grid + place-content-stretch; + background-color: transparent; + grid-template-columns: repeat( + var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)), + auto + ); + gap: var(--calcite-action-group-gap, 1px); + padding: var(--calcite-action-group-gap, 1px); + } } @include base-component(); diff --git a/packages/calcite-components/src/components/action-group/action-group.stories.ts b/packages/calcite-components/src/components/action-group/action-group.stories.ts index f1175c0e97e..77feaf77d6d 100644 --- a/packages/calcite-components/src/components/action-group/action-group.stories.ts +++ b/packages/calcite-components/src/components/action-group/action-group.stories.ts @@ -40,7 +40,7 @@ export const withoutDefinedGridGap_TestOnly = (): string => `; export const withDefinedGridGap_TestOnly = (): string => html` - + @@ -94,3 +94,26 @@ export const TurkishLocale_TestOnly = (): string => `; +html`
+ + + + + + + + + + + + + + + + + +
`; diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index f75fa5dacf4..5cee6e79b7d 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts @@ -9,6 +9,7 @@ import { reflects, renders, slots, + themed, } from "../../tests/commonTests"; import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources"; import { CSS, SLOTS, activeAttr } from "./resources"; @@ -526,4 +527,20 @@ describe("calcite-action-menu", () => { expect(clickSpy).toHaveReceivedEventTimes(1); }); }); + + describe("theme", () => { + themed( + html` + + + `, + { + "--calcite-action-menu-items-space": { + shadowSelector: `.${CSS.menu}`, + targetProp: "gap", + }, + }, + ); + }); }); diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss index b04468fa512..f92240105b8 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.scss +++ b/packages/calcite-components/src/components/action-menu/action-menu.scss @@ -1,17 +1,21 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-action-menu-items-space: Specifies the space between actions in the menu. + * + */ + :host { - @apply text-color-2 - text-1 + @apply text-1 box-border flex flex-col; } -::slotted(calcite-action-group) { - border-block-end: 1px solid var(--calcite-color-border-3); -} - -::slotted(calcite-action-group:last-child) { - border-block-end: 0; +::slotted(calcite-action-group:not(:last-of-type)) { + border-block-end-width: var(--calcite-border-width-sm); } .default-trigger { @@ -29,12 +33,14 @@ } .menu { - @apply flex-col + @apply flex + flex-col flex-nowrap outline-none overflow-y-auto overflow-x-hidden max-h-menu; + gap: var(--calcite-action-menu-items-space, 0); } @include base-component(); diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts index f8cd30eabcd..57a2968a2c7 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts @@ -9,6 +9,7 @@ import { renders, slots, t9n, + themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; @@ -347,4 +348,31 @@ describe("calcite-action-pad", () => { expect(await group.getProperty("layout")).toBe("vertical"); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-action-pad", { + "--calcite-action-pad-corner-radius": { + targetProp: "borderRadius", + }, + "--calcite-action-pad-items-space": { + shadowSelector: `.${CSS.container}`, + targetProp: "gap", + }, + }); + }); + describe("grid", () => { + themed( + html` + + `, + { + "--calcite-action-pad-expanded-max-width": { + shadowSelector: `.${CSS.container}`, + targetProp: "maxInlineSize", + }, + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss index e91eb0ec224..7e5a4946ea9 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.scss +++ b/packages/calcite-components/src/components/action-pad/action-pad.scss @@ -3,35 +3,36 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-pad-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component. + * @prop --calcite-action-pad-corner-radius: Specifies the component's border radius. + * @prop --calcite-action-pad-expanded-max-width: Specifies the component's maximum width when `expanded` and the `layout` is `"vertical"`. + * @prop --calcite-action-pad-items-space: Specifies the space between slotted components in the component. */ :host { @extend %component-host; - @apply animate-in block rounded-sm; - --calcite-action-pad-expanded-max-width: auto; + @apply animate-in block; + + border-radius: var(--calcite-action-pad-corner-radius, 0.125rem /* 2px */); background: transparent; } :host([expanded][layout="vertical"]) .container { - max-inline-size: var(--calcite-action-pad-expanded-max-width); + max-inline-size: var(--calcite-action-pad-expanded-max-width, auto); } -::slotted(calcite-action-group) { - @apply border-color-3 - border-0 - border-b - border-solid - pb-0 pt-0; +::slotted(calcite-action-group:not(:last-of-type)) { + @apply border-b; } .container { - @apply bg-background - shadow-2 + @apply shadow-2 inline-flex flex-col - overflow-y-auto - rounded; + overflow-y-auto; + + gap: var(--calcite-action-pad-items-space, 0); + border-radius: calc(var(--calcite-action-pad-corner-radius, 0.125rem) * 2) /* 4px */; + background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1)); } .action-group--bottom { @@ -44,16 +45,10 @@ .action-group--bottom { @apply p-0; } - ::slotted(calcite-action-group) { - @apply border-0 - p-0; + ::slotted(calcite-action-group:not(:last-of-type)) { border-inline-end-width: theme("borderWidth.DEFAULT"); } } } -::slotted(calcite-action-group:last-child) { - @apply border-b-0; -} - @include base-component(); diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts index 6224cfe3507..fb5968dace0 100644 --- a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts @@ -42,23 +42,6 @@ export const simple = (args: ActionPadStoryArgs): string => html` `; -export const withDefinedWidths = (): string => html` - - - - - - - - - - -`; - export const darkModeRTL_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index af5f544bd1a..2520e24855a 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -1,5 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, hidden, renders, slots, t9n, defaults } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders, slots, t9n, defaults, themed } from "../../tests/commonTests"; +import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; describe("calcite-action", () => { @@ -205,4 +206,84 @@ describe("calcite-action", () => { expect(liveRegion.getAttribute("role")).toBe("region"); expect(liveRegion.textContent).toBe("Indicator present"); }); + describe("themed", () => { + describe("default", () => { + themed(html`calcite-action`, { + "--calcite-action-background-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + }, + "--calcite-action-background-color-hover": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + state: "hover", + }, + "--calcite-action-background-color-pressed": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.button } }, + }, + }); + }); + describe("text", () => { + themed( + html``, + { + "--calcite-action-text-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "color", + }, + "--calcite-action-text-color-pressed": { + shadowSelector: `.${CSS.button}`, + targetProp: "color", + state: "hover", + }, + }, + ); + }); + describe("active", () => { + themed( + html``, + { + "--calcite-action-text-color-pressed": { + shadowSelector: `.${CSS.button}`, + targetProp: "color", + }, + }, + ); + }); + describe("indicator", () => { + themed( + html``, + { + "--calcite-action-indicator-color": [ + { + selector: ".one", + shadowSelector: `.${CSS.indicatorWithoutIcon}::after`, + targetProp: "backgroundColor", + }, + { + selector: ".two", + shadowSelector: `.${CSS.indicatorWithIcon}::after`, + targetProp: "backgroundColor", + }, + ], + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 21737c5aa01..37936f0d69b 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -3,15 +3,17 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator. + * @prop --calcite-action-indicator-color: Specifies the component's indicator color. + * @prop --calcite-action-background-color: Specifies the component's background color. + * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused. + * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active. + * @prop --calcite-action-text-color: Specifies the text color of the component. + * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered. */ :host { @extend %component-host; @apply flex bg-transparent; - --calcite-action-indicator-color: theme("colors.brand"); - --calcite-action-color-transparent-hover: var(--calcite-color-transparent-hover); - --calcite-action-color-transparent-press: var(--calcite-color-transparent-press); } @mixin action-indicator() { @@ -24,18 +26,13 @@ rounded-full; inset-block-end: calc(-0.275rem); inset-inline-end: calc(-0.275rem); - background-color: var(--calcite-action-indicator-color); + background-color: var(--calcite-action-indicator-color, theme("colors.brand")); } } -@include disabled(); - .button { - @apply bg-foreground-1 - fill-color-3 - focus-base + @apply focus-base text-n2h - text-color-3 relative m-0 flex @@ -47,45 +44,101 @@ font-medium font-sans; + background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1)); + color: var(--calcite-action-text-color, var(--calcite-color-text-3)); text-align: unset; flex: 1 0 auto; - &:hover { - @apply bg-foreground-2 text-color-1 fill-color-1; + + &:hover, + &:focus { + background-color: var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2)); + color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)); } &:focus { - @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset; + @apply focus-inset; } &:active { - @apply bg-foreground-3; + background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)); } +} - .icon-container { - @apply pointer-events-none - m-0 - flex - items-center - justify-center; - min-inline-size: theme("spacing.4"); - min-block-size: theme("spacing.6"); +.icon-container { + @apply pointer-events-none + m-0 + flex + items-center + justify-center; + min-inline-size: theme("spacing.4"); + min-block-size: theme("spacing.6"); +} + +.text-container { + @apply m-0 + w-0 + truncate + leading-6 + opacity-0 + transition-opacity + duration-150 + ease-in-out; + + transition-property: margin; + transition-property: inline-size; +} + +.text-container--visible { + @apply w-auto flex-auto opacity-100; +} + +:host([active]) { + .button { + &, + &:hover, + &:focus { + color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)); + background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)); + } + + &:active { + background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1)); + } + } +} + +:host([loading]) { + .button { + &:hover, + &:focus { + background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1)); + } } .text-container { - @apply m-0 - w-0 - truncate - leading-6 - opacity-0 - transition-opacity + @apply opacity-disabled; + } + + calcite-loader[inline] { + margin-inline-end: theme("spacing.0"); + } +} + +:host([appearance="transparent"]) { + .button { + @apply bg-transparent + transition-shadow duration-150 ease-in-out; - transition-property: margin; - transition-property: inline-size; - } - .text-container--visible { - @apply w-auto flex-auto opacity-100; + &:hover, + &:focus { + background-color: var(--calcite-color-transparent-hover); + } + + &:active { + background-color: var(--calcite-color-transparent-press); + } } } @@ -154,65 +207,6 @@ @apply w-full; } -:host([active]) .button, -:host([active]) .button:hover, -:host([active]) .button:focus, -:host([active][loading]) .button { - @apply text-color-1 fill-color-1 bg-foreground-3; -} - -:host([appearance="transparent"]) .button { - @apply bg-transparent - transition-shadow - duration-150 - ease-in-out; -} - -:host([active]) .button:active { - @apply bg-foreground-1; -} - -:host([appearance="transparent"][active]) .button, -:host([appearance="transparent"]) .button:hover, -:host([appearance="transparent"]) .button:focus { - background-color: var(--calcite-action-color-transparent-hover); -} - -:host([appearance="transparent"]) .button:active { - background-color: var(--calcite-action-color-transparent-press); -} - -:host([appearance="transparent"][disabled]) .button { - @apply bg-transparent; -} - -:host([loading][appearance="solid"]) .button, -:host([loading][appearance="solid"]) .button:hover, -:host([loading][appearance="solid"]) .button:focus { - @apply bg-foreground-1; - - .text-container { - @apply opacity-disabled; - } -} - -:host([loading]) calcite-loader[inline] { - @apply text-color-3; - margin-inline-end: theme("spacing.0"); -} - -:host([disabled]) .button, -:host([disabled]) .button:hover, -:host([disabled]) .button:focus { - @apply opacity-disabled bg-foreground-1 cursor-default; -} - -:host([disabled][active]) .button, -:host([disabled][active]) .button:hover, -:host([disabled][active]) .button:focus { - @apply opacity-disabled bg-foreground-3; -} - .indicator-with-icon { @include action-indicator(); } @@ -227,3 +221,18 @@ } @include base-component(); +@include disabled { + .button, + .button:hover, + .button:focus { + @apply opacity-disabled bg-foreground-1 cursor-default; + } + + &:host([active]) { + .button, + .button:hover, + .button:focus { + @apply opacity-disabled bg-foreground-3; + } + } +} diff --git a/packages/calcite-components/src/components/action/action.stories.ts b/packages/calcite-components/src/components/action/action.stories.ts index 527f6d303fe..141ac77e311 100644 --- a/packages/calcite-components/src/components/action/action.stories.ts +++ b/packages/calcite-components/src/components/action/action.stories.ts @@ -85,6 +85,17 @@ export const disabledAndTextOnly_TestOnly = (): string => html` text="Text" text-enabled > + `; diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 2aec13c66b8..d18490a576f 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -227,7 +227,7 @@ @apply bg-foreground-1 max-h-menu overflow-y-auto; - inline-size: var(--calcite-dropdown-width); + inline-size: var(--calcite-dropdown-width, 100%); } .list { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 61c486e2bf8..6c4cd630844 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -1,3 +1,15 @@ +import { setCSSVariables } from "../src/tests/utils/cssTokenValues"; +import { html } from "../support/formatting"; +import { + actionBar, + actionMenu, + actionPad, + actionTokens, + actionBarTokens, + actionMenuTokens, + actionPadTokens, + actionGroupTokens, +} from "./custom-theme/action"; import { accordion } from "./custom-theme/accordion"; import { buttons } from "./custom-theme/button"; import { card, cardTokens } from "./custom-theme/card"; @@ -44,22 +56,22 @@ function convertToParamCase(str) { return str.replace(/([A-Z])/g, "-$1").toLowerCase(); } -function addTokens(args) { - return Object.entries(args) - .map(([tokenName, tokenValue]) => - !!tokenValue && tokenValue !== "" ? `--${convertToParamCase(tokenName)}: ${tokenValue};` : null, - ) - .filter((token) => token) - .join(""); +function customTheme(args: Record, useTestValues = false) { + if (useTestValues) { + const tokensAsCSSVars = Object.keys(args).map((tokenName) => `--${convertToParamCase(tokenName)}`); + return setCSSVariables(tokensAsCSSVars, " "); + } else { + return Object.entries(args) + .map(([tokenName, tokenValue]) => + !!tokenValue && tokenValue !== "" ? `--${convertToParamCase(tokenName)}: ${tokenValue};` : null, + ) + .filter((token) => token) + .join(""); + } } -export default { - title: "Theming/Custom Theme", - args: { ...globalTokens, ...cardTokens }, -}; - -export const themingInteractive = (args: Record): string => { - return `
+const kitchenSink = (args: Record, useTestValues = false) => + html`
-
- ${accordion} - ${notices} - ${segmentedControl} - ${icon} -
-
-
- ${card} +
+ ${accordion} ${actionBar} ${notices} ${segmentedControl} +
+ ${actionPad} +
${actionMenu}
+ ${icon} +
-
- ${dropdown} - ${buttons} +
+
${card}
+
${dropdown} ${buttons}
+
${checkbox}
+ ${chips} ${pagination} ${slider}
-
- ${checkbox} -
- ${chips} - ${pagination} - ${slider} -
-
- ${datePicker} - ${tabs} - ${loader} - ${calciteSwitch} +
${datePicker} ${tabs} ${loader} ${calciteSwitch}
`; + +export default { + title: "Theming/Custom Theme", + args: { + ...globalTokens, + ...actionTokens, + ...actionBarTokens, + ...actionMenuTokens, + ...actionPadTokens, + ...actionGroupTokens, + ...cardTokens, + }, +}; + +export const themingInteractive = (args: Record): string => { + return kitchenSink(args); +}; + +export const theming_TestOnly = (): string => { + return kitchenSink( + { + ...actionTokens, + ...actionBarTokens, + ...actionMenuTokens, + ...actionPadTokens, + ...actionGroupTokens, + ...cardTokens, + }, + true, + ); }; diff --git a/packages/calcite-components/src/custom-theme/action.ts b/packages/calcite-components/src/custom-theme/action.ts new file mode 100644 index 00000000000..c7246227413 --- /dev/null +++ b/packages/calcite-components/src/custom-theme/action.ts @@ -0,0 +1,66 @@ +import { html } from "../../support/formatting"; + +export const actionTokens = { + calciteActionIndicatorColor: "", + calciteActionBackgroundColor: "", + calciteActionBackgroundColorHover: "", + calciteActionBackgroundColorPressed: "", + calciteActionTextColor: "", + calciteActionTextColorPressed: "", +}; + +export const actionBarTokens = { + calciteActionBarExpandedMaxWidth: "", + calciteActionBarItemsSpace: "", +}; + +export const actionBar = html` + + + + + + + + + + + + + +`; + +export const actionGroupTokens = { + calciteActionGroupBorderColor: "", + calciteActionGroupColumns: "", +}; + +export const actionMenuTokens = { calciteActionMenuItemsSpace: "" }; + +export const actionPadTokens = { + calciteActionPadCornerRadius: "", + calciteActionPadExpandedMaxWidth: "", + calciteActionPadItemsSpace: "", +}; + +export const actionMenu = html` + + + + + + + + +`; + +export const actionPad = html` + + + + + + + +`; diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts index 06850cacfeb..727c7f2ad28 100644 --- a/packages/calcite-components/src/demos/_assets/demo-theme.ts +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -15,10 +15,11 @@ export function getTokenValue(token: string): string { color$: "rgb(0, 191, 255)", hover$: "rgb(255, 105, 180)", pressed$: "rgb(44, 44, 44)", + selected$: "rgb(156, 89, 209)", shadow$: "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", - "z-index$": "42", - "(size|space)$": "42px", + "(z-index)$": "42", + "(columns|gap|height|offset|radius|size|space|width)": "42px", } as const; const match = Object.entries(tokenValueMap).find(([regexStr]) => { diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html index a3a3d6d26f3..968cbe9c5a7 100644 --- a/packages/calcite-components/src/demos/action.html +++ b/packages/calcite-components/src/demos/action.html @@ -780,6 +780,38 @@
+ +
+ + + + + + + + + + + + + + + + + + + +
+ diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts index 363577eb8f4..9e558a116cc 100644 --- a/packages/calcite-components/src/tests/commonTests/themed.ts +++ b/packages/calcite-components/src/tests/commonTests/themed.ts @@ -207,7 +207,7 @@ export type TestTarget = { /** * The expected value of the targetProp. */ - expectedValue: string; + expectedValue?: string; /** * The associated component token. diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts index 0be2d52eba8..9d37c8628fb 100644 --- a/packages/calcite-components/src/tests/utils/cssTokenValues.ts +++ b/packages/calcite-components/src/tests/utils/cssTokenValues.ts @@ -15,10 +15,11 @@ export function getTokenValue(token: string): string { color$: "rgb(0, 191, 255)", hover$: "rgb(255, 105, 180)", pressed$: "rgb(44, 44, 44)", + selected$: "rgb(156, 89, 209)", shadow$: "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", - "z-index$": "42", - "(size|space)$": "42px", + "(z-index)$": "42", + "(columns|gap|height|offset|radius|size|space|width)": "42px", } as const; const match = Object.entries(tokenValueMap).find(([regexStr]) => { @@ -36,12 +37,13 @@ export function getTokenValue(token: string): string { /** * * @param tokens - an array of CSS variables + * @param join * @returns a string of CSS variables with their new values. */ -export function setCSSVariables(tokens: string[]): string { +export function setCSSVariables(tokens: string[], join = "\n"): string { return tokens .map((token) => { return `${token}: ${getTokenValue(token)};`; }) - .join("\n"); + .join(join); }