diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css index 0bb5c982b..8280ff159 100644 --- a/app/components/elements/Switch.module.css +++ b/app/components/elements/Switch.module.css @@ -3,7 +3,7 @@ height: var(--height); background: var(--color-bg); border: var(--border-style); - border-radius: calc(var(--radius-selector) * 2); + border-radius: calc(var(--radius-selector) * 2 * var(--radius-scale)); padding: 2px; display: inline-grid; justify-items: center; @@ -15,7 +15,7 @@ height: 100%; aspect-ratio: 1 / 1; background: var(--color-border); - border-radius: var(--radius-selector); + border-radius: calc(var(--radius-selector) * var(--radius-scale)); grid-row-start: 1; grid-column-start: 2; } @@ -23,6 +23,7 @@ .root { --height: var(--selector-size-sm); + --radius-scale: 1; cursor: pointer; display: grid; @@ -76,3 +77,10 @@ font-size: var(--font-2xs); } + +.large { + --height: var(--selector-size-lg); + --radius-scale: 1.5; + + font-size: var(--font-sm); +} diff --git a/app/components/elements/Switch.tsx b/app/components/elements/Switch.tsx index 283fab665..48c072f39 100644 --- a/app/components/elements/Switch.tsx +++ b/app/components/elements/Switch.tsx @@ -8,7 +8,7 @@ interface SendouSwitchProps { defaultSelected?: boolean; onChange?: (isSelected: boolean) => void; isDisabled?: boolean; - size?: "small"; + size?: "small" | "large"; "aria-label"?: string; "data-testid"?: string; children?: React.ReactNode; @@ -27,7 +27,10 @@ export function SendouSwitch({ }: SendouSwitchProps) { return (