Add size prop, migrate to DesignTokens

components/src/DesignTokens/DesignTokens.svelte

@@ -19,6 +19,7 @@
 		'--br-large: 8px',
 		'--br-small: 4px',
 		'--ratio: 1.15',
+		'--input-height: 2.5rem',
 		'--swr-sans: "SWR-VAR-Sans", sans-serif',
 		'--swr-text: "SWR-VAR-Text", sans-serif',
 		'--fs-small-3: calc(var(--fs-small-2) / var(--ratio))',

components/src/Switcher/Switcher.stories.svelte

@@ -0,0 +1,55 @@
+<script context="module">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Switcher from './Switcher.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import {
+		userEvent,
+		within,
+		expect,
+	} from '@storybook/test';
+
+  const { Story } = defineMeta({
+    title: 'Input Components/Switcher',
+    argTypes: {
+      size: {control: "text"}
+    },
+    tags: ['autodocs'],
+  })
+
+</script>
+
+<Story name="Two Options">
+	<DesignTokens>
+    <Switcher
+      options={["Option A", "Option B"]}
+      groupName="two-options"
+      value="Option A"
+      size="default"
+      label="Label"
+    />
+	</DesignTokens>
+</Story>
+
+<Story name="Four Options" play={async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement)
+  await step("Clicking selects the expected option", async () => {
+    const optionA = canvas.getByLabelText("Apples")
+    const optionB = canvas.getByLabelText("Bananas")
+    await userEvent.click(optionA)
+    expect(optionA).toBeChecked()
+    expect(optionB).not.toBeChecked()
+    await userEvent.click(optionB)
+    expect(optionB).toBeChecked()
+    expect(optionA).not.toBeChecked()
+  })
+  }}>
+	<DesignTokens>
+    <Switcher
+    options={["Apples", "Oranges", "Bananas", "Peaches"]}
+    groupName="four-options"
+    value="Oranges"
+    label="Label"
+    size="small"
+  />
+	</DesignTokens>
+</Story>

components/src/Switcher/Switcher.svelte

@@ -7,6 +7,9 @@
 	// Machine-readable name for the form field. Should be unique to other fields in the form.
 	export let groupName: string = '';
 
+	// Type size
+	export let size: string = 'default';
+
 	// The currently selected option
 	export let value: string = options[0];
 
@@ -23,7 +26,7 @@ Radio-like form component to choose exactly one of a given set of options.
 @component
 -->
 
-<fieldset class="container">
+<fieldset class="container" class:small={size === "small"}>
 	<legend>{label}</legend>
 	<ul>
 		{#each options as o (o)}
@@ -44,21 +47,21 @@ Radio-like form component to choose exactly one of a given set of options.
 </fieldset>
 
 <style lang="scss">
-	@import '../styles/base.scss';
-
 	fieldset {
 		border: 0;
+		font-family: var(--swr-sans);
 	}
 
 	legend {
-		@extend %form-label;
+		font-size: var(--fs-small-2);
+		margin-bottom: .25em;
 	}
 
 	ul {
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		border-radius: $border-radius-input;
+		border-radius: var(--br-small);
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
@@ -80,10 +83,13 @@ Radio-like form component to choose exactly one of a given set of options.
 		position: absolute;
 		left: -999px;
 	}
+	.small label {
+		font-size: var(--fs-small-1)
+	}
 	label {
-		@extend %copy;
+		font-size: var(--fs-base);
+		height: 2.5em;
 		line-height: 1;
-		height: $input-height;
 		cursor: pointer;
 		margin: 0;
 		flex-basis: 0;
@@ -93,7 +99,7 @@ Radio-like form component to choose exactly one of a given set of options.
 		justify-content: center;
 		color: currentColor;
 		position: relative;
-		transition: $transition-fast;
+		transition: var(--fast);
 		text-underline-offset: 0.1em;
 		border-right: 1px solid currentColor;
 		&:hover,
@@ -106,7 +112,7 @@ Radio-like form component to choose exactly one of a given set of options.
 			width: 1em;
 			height: auto;
 			opacity: 0;
-			transition: $transition-fast;
+			transition: var(--fast);
 			display: block;
 		}
 		.is-selected & {