@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-knob-bg-color: var(--color-white); // @presenter Color
    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
    --switch-width: 32px; // @presenter Width
    --switch-height: 18px; // @presenter Height
    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
    --switch-bg-transition: background-color 0.3s; // @presenter Transition
    --switch-knob-height: 14px; // @presenter Height
    --switch-knob-width: 14px; // @presenter Width
    --switch-knob-transition: transform 0.3s; // @presenter Transition
`;