wix-style-react/dist/src/ToggleSwitch/ToggleSwitch.st.css

wix-style-react

:import {
  -st-from: "./ToggleSwitchCore/ToggleSwitchCore.st.css";
  -st-default: ToggleSwitch;
}

:import {
  -st-from: "./ToggleSwitchCore/ToggleSwitchCoreStyle.st.css";
  -st-default: ToggleSwitchStyle;
}

:import {
  -st-from: "./ToggleSwitchCore/ToggleSwitchCoreColor.st.css";
  -st-default: ToggleSwitchColor;
}

:import {
  -st-from: "./ToggleSwitchCore/ToggleSwitchCoreLayout.st.css";
  -st-default: ToggleSwitchLayout;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named:
    THEME-COLOR-10, THEME-COLOR-20, THEME-COLOR-30, THEME-COLOR-40,
    D50,
    F00,
    G10, G20, G30, G40,
    R10, R20, R30, R40,
    O05, O10, O30, O40,
    D80,
    D10-12, D10-42;
}

:import {
  -st-from: "../Foundation/stylable/shadows.st.css";
  -st-named: shadow10;
}

@st-import [
  --wds-toggle-switch-width-large,
  --wds-toggle-switch-knob-size-large,

  --wds-toggle-switch-width-medium,
  --wds-toggle-switch-knob-size-medium,

  --wds-toggle-switch-width-small,
  --wds-toggle-switch-knob-size-small,

  --wds-toggle-switch-fill-standard,
  --wds-toggle-switch-fill-standard-hover,
  --wds-toggle-switch-fill-standard-active,
  --wds-toggle-switch-fill-standard-active-hover,
  --wds-toggle-switch-fill-standard-disabled,

  --wds-toggle-switch-fill-success,
  --wds-toggle-switch-fill-success-hover,
  --wds-toggle-switch-fill-success-active,
  --wds-toggle-switch-fill-success-active-hover,
  --wds-toggle-switch-fill-success-disabled,

  --wds-toggle-switch-fill-error,
  --wds-toggle-switch-fill-error-hover,
  --wds-toggle-switch-fill-error-active,
  --wds-toggle-switch-fill-error-active-hover,
  --wds-toggle-switch-fill-error-disabled,

  --wds-toggle-switch-fill-urgent,
  --wds-toggle-switch-fill-urgent-hover,
  --wds-toggle-switch-fill-urgent-active,
  --wds-toggle-switch-fill-urgent-active-hover,
  --wds-toggle-switch-fill-urgent-disabled,

  --wds-toggle-switch-shadow
  ] from "@wix/design-system-tokens/all.st.css";

:vars {
  shadowNewBranding: 0 2px 1px 0 value(D10-42), 0 0 3px 0 value(D10-12);
}

.root {
  -st-extends: ToggleSwitch;
  -st-states:
    size(enum(small, medium, large)),
    skin(enum(standard, success, error, urgent)),
    newColorsBranding;
  -st-mixin: ToggleSwitchStyle;
}

.root:size(small) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth var(--wds-toggle-switch-width-small, 28px),
    rootHeight var(--wds-toggle-switch-knob-size-small, 14px),
    knobWidth var(--wds-toggle-switch-knob-size-small, 14px),
    knobHeight var(--wds-toggle-switch-knob-size-small, 14px)
  );
}

.root:size(medium) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth var(--wds-toggle-switch-width-medium, 34px),
    rootHeight var(--wds-toggle-switch-knob-size-medium, 18px),
    knobWidth var(--wds-toggle-switch-knob-size-medium, 18px),
    knobHeight var(--wds-toggle-switch-knob-size-medium, 18px)
  );
}

.root:size(large) {
  -st-mixin: ToggleSwitchLayout(
    rootWidth var(--wds-toggle-switch-width-large, 46px),
    rootHeight var(--wds-toggle-switch-knob-size-large, 22px),
    knobWidth var(--wds-toggle-switch-knob-size-large, 22px),
    knobHeight var(--wds-toggle-switch-knob-size-large, 22px)
  );
}

.root:skin(standard) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      var(--wds-toggle-switch-fill-standard, value(THEME-COLOR-40)),
    colorChecked        var(--wds-toggle-switch-fill-standard-active, value(THEME-COLOR-10)),
    colorUncheckedHover var(--wds-toggle-switch-fill-standard-hover, value(THEME-COLOR-30)),
    colorCheckedHover   var(--wds-toggle-switch-fill-standard-active-hover, value(THEME-COLOR-20)),
    colorDisabled       var(--wds-toggle-switch-fill-standard-disabled, value(D50))
  );
}

.root:skin(success) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      var(--wds-toggle-switch-fill-success, value(G40)),
    colorChecked        var(--wds-toggle-switch-fill-success-active, value(G10)),
    colorUncheckedHover var(--wds-toggle-switch-fill-success-hover, value(G30)),
    colorCheckedHover   var(--wds-toggle-switch-fill-success-active-hover, value(G20)),
    colorDisabled       var(--wds-toggle-switch-fill-success-disabled, value(D50))
  );
}

.root:skin(error) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      var(--wds-toggle-switch-fill-error, value(R40)),
    colorChecked        var(--wds-toggle-switch-fill-error-active, value(R10)),
    colorUncheckedHover var(--wds-toggle-switch-fill-error-hover, value(R30)),
    colorCheckedHover   var(--wds-toggle-switch-fill-error-active-hover, value(R20)),
    colorDisabled       var(--wds-toggle-switch-fill-error-disabled, value(D50))
  );
}

.root:skin(urgent) {
  -st-mixin: ToggleSwitchColor(
    colorUnchecked      var(--wds-toggle-switch-fill-urgent, value(O40)),
    colorChecked        var(--wds-toggle-switch-fill-urgent-active, value(O10)),
    colorUncheckedHover var(--wds-toggle-switch-fill-urgent-hover, value(O30)),
    colorCheckedHover   var(--wds-toggle-switch-fill-urgent-active-hover, value(O05)),
    colorDisabled       var(--wds-toggle-switch-fill-urgent-disabled, value(D50))
  );
}

.root:focus-visible::track {
  box-shadow: 0 0 0 3px value(F00);
}

.root::knob {
  box-shadow: var(--wds-toggle-switch-shadow, value(shadow10));
}

.root:newColorsBranding::knob {
  box-shadow: var(--wds-toggle-switch-shadow, value(shadowNewBranding));
}

/* st-namespace-reference="../../../src/ToggleSwitch/ToggleSwitch.st.css" */