feat(switch): implement off color variable on bl-switch (#527)

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 {

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';
 
 <Meta
@@ -18,6 +19,7 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
 
 export const SwitchTemplate = (args) => html`
 <bl-switch
+  class="${ifDefined(args.class)}"
   ?disabled=${args.disabled}
   ?checked=${args.checked}>
 </bl-switch>
@@ -32,7 +34,18 @@ export const SwitchWithLabel = (args) => html`
     aria-label="${args.label}"
   ></bl-switch>
 </div>
-`
+`;
+
+export const SwitchStyled = args => html`
+<style>
+  .${args.class} {
+    ${Object.entries(args.styles)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join('\n    ')}
+  }
+</style>
+${SwitchTemplate(args)}
+`;
 
 # Switch
 
@@ -93,6 +106,42 @@ Disabled state can be set via `disabled` attribute. A switch can be `disabled` a
   </Story>
 </Canvas>
 
+## 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.
+
+<Canvas>
+  <Story
+    name="Customizing Colors"
+    args={{
+      class: 'colored-switch-1',
+      styles: {
+        '--bl-switch-color-on': 'var(--bl-color-success)',
+        '--bl-switch-color-off': 'var(--bl-color-danger)',
+      },
+    }}
+  >
+    {SwitchStyled.bind({})}
+  </Story>
+  <Story
+    name="Customizing Colors Checked"
+    args={{
+      class: 'colored-switch-2',
+      styles: {
+        '--bl-switch-color-on': 'var(--bl-color-success)',
+        '--bl-switch-color-off': 'var(--bl-color-danger)',
+      },
+      checked: true,
+    }}
+  >
+    {SwitchStyled.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-switch" />

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)