@redocly/theme/src/components/Switch/variables.ts

Shared UI components lib

import { css } from 'styled-components';

export const switcher = css`
    --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
    --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
    --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
    --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
    --switch-bg-color-disabled-selected: var(--color-warm-grey-3); // @presenter Color

    --switch-border-color: transparent; // @presenter Color
    --switch-border-color-hover: transparent; // @presenter Color
    --switch-border-color-pressed: transparent; // @presenter Color
    --switch-border-color-disabled: transparent; // @presenter Color
    --switch-border-color-selected: transparent; // @presenter Color
    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
    --switch-border-width: var(--border-width); // @presenter Border

    --switch-width: 32px; // @presenter Width
    --switch-height: 18px; // @presenter Height
    --switch-padding: calc((var(--spacing-xxs) / 2) - var(--switch-border-width)); // @presenter Padding
    --switch-bg-transition: background-color 0.3s; // @presenter Transition
    
    // Knob

    --switch-knob-bg-color: var(--color-white); // @presenter Color
    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
    --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color

    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
    --switch-knob-height: 14px; // @presenter Height
    --switch-knob-width: 14px; // @presenter Width
    --switch-knob-transition: transform 0.3s; // @presenter Transition
`;