From c5d52b84c537107fc6250a946e26b19fe88f210e Mon Sep 17 00:00:00 2001 From: Ogun Babacan Date: Thu, 20 Apr 2023 10:12:05 +0300 Subject: [PATCH] feat(switch): implement off color variable on bl-switch (#527) --- src/components/switch/bl-switch.css | 6 +-- src/components/switch/bl-switch.stories.mdx | 51 ++++++++++++++++++++- src/components/switch/bl-switch.ts | 4 +- 3 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/components/switch/bl-switch.css b/src/components/switch/bl-switch.css index df53ed56..656f4b88 100644 --- a/src/components/switch/bl-switch.css +++ b/src/components/switch/bl-switch.css @@ -16,9 +16,9 @@ span { /* TODO: use predefined animation duration once it is ready */ --animation-duration: var(--bl-switch-animation-duration, 300ms); - --switch-color: var(--bl-switch-color, var(--bl-color-primary)); + --switch-color: var(--bl-switch-color-off, var(--bl-color-neutral-lighter)); - background-color: var(--bl-color-neutral-lighter); + background-color: var(--switch-color); border-radius: var(--bl-border-radius-pill); height: var(--track-height); transition-property: background-color; @@ -41,7 +41,7 @@ span { } :host([checked]) .switch { - background-color: var(--switch-color); + --switch-color: var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary))); } :host([checked]) .switch::before { diff --git a/src/components/switch/bl-switch.stories.mdx b/src/components/switch/bl-switch.stories.mdx index 37bb4889..bc984b17 100644 --- a/src/components/switch/bl-switch.stories.mdx +++ b/src/components/switch/bl-switch.stories.mdx @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs'; html` @@ -32,7 +34,18 @@ export const SwitchWithLabel = (args) => html` aria-label="${args.label}" > -` +`; + +export const SwitchStyled = args => html` + +${SwitchTemplate(args)} +`; # Switch @@ -93,6 +106,42 @@ Disabled state can be set via `disabled` attribute. A switch can be `disabled` a +## Customization + +To customize colors for the switch component, you can utilize CSS properties `--bl-switch-color-on` and `--bl-switch-color-off`. + +Please note that the usage of `--bl-switch-color` is deprecated and should be replaced with `--bl-switch-color-on`. + +We strongly advise against customizing switch with any colors other than success (indicating _on_) and danger (indicating _off_) colors. If you wish to use a different color scheme, we suggest you consider about your theming. You can refer to the [documentation on customizing the Baklava theme](/docs/documentation-customizing-baklava-theme--page#customizing-baklava-theme) for more information. + + + + {SwitchStyled.bind({})} + + + {SwitchStyled.bind({})} + + + ## Reference diff --git a/src/components/switch/bl-switch.ts b/src/components/switch/bl-switch.ts index 2ab66e11..c0fbdc60 100644 --- a/src/components/switch/bl-switch.ts +++ b/src/components/switch/bl-switch.ts @@ -10,7 +10,9 @@ export const blSwitchTag = 'bl-switch'; * @tag bl-switch * @summary Baklava Switch component * - * @cssproperty [--bl-switch-color=--bl-color-primary] Set the accent color + * @deprecated [--bl-switch-color=--bl-color-primary] Set the checked color. Renamed to --bl-switch-color-on. + * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color + * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle */ @customElement(blSwitchTag)