@swr-data-lab/components 1.9.1 → 1.11.0

package/src/Switcher/Switcher.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	interface SwitcherProps {
 		/**
 		 * Human-readable label
@@ -29,7 +31,7 @@
 </script>
 
 <fieldset class="container" class:small={size === 'small'}>
-	<legend>{label}</legend>
+	<FormLabel as="legend">{label}</FormLabel>
 	<ul>
 		{#each options as o (o)}
 			<li class:is-selected={o === value}>
@@ -50,12 +52,6 @@
 		font-family: var(--swr-sans);
 	}
 
-	legend {
-		font-size: var(--fs-small-2);
-		font-weight: 500;
-		margin-bottom: 0.35em;
-	}
-
 	ul {
 		width: 100%;
 		display: flex;
@@ -66,7 +62,7 @@
 		border: 1px solid currentColor;
 		border-radius: var(--br-small);
 
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			flex-flow: row;
 		}
 
@@ -106,7 +102,7 @@
 		text-underline-offset: 0.2em;
 		border-bottom: 1px solid currentColor;
 		height: 2.25em;
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
@@ -114,7 +110,7 @@
 			border-right: 1px solid currentColor;
 			border-bottom: 0;
 		}
-		@media (min-width: base.$break-tablet) {
+		@media (min-width: base.$bp-s) {
 			height: 2.5em;
 		}
 		&:hover,
@@ -123,9 +119,9 @@
 		}
 		.is-selected & {
 			background: rgb(247, 247, 247);
-			font-weight: 700;
+			font-weight: 600;
 			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$break-phone) {
+			@media (min-width: base.$bp-s) {
 				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
 			}
 		}

package/src/styles/base.scss

@@ -1,43 +1,18 @@
-$break-phone: 510px;
-$break-tablet: 992px;
-$break-desktop-small: 1200px;
-$break-desktop-large: 1400px;
-$break-desktop-xl: 1400px;
+// Copied 1:1 from swr.de
+$bp-xxs: 320px;
+$bp-xs: 375px;
+$bp-s: 425px;
+$bp-m: 768px;
+$bp-l: 1024px;
+$bp-xl: 1440px;
 
 // TODO drop everything below
 
-%caption {
-	font-family: var(--swr-sans);
-	font-size: 0.9rem;
-	line-height: 1;
-	letter-spacing: 0.0045em;
-}
-
-%caption-bold {
-	@extend %caption;
-	font-weight: 600;
-}
-
-%form-label {
-	@extend %caption;
-	display: block;
-	margin-bottom: 0.5em;
-}
-
-%copy {
+%form-input {
 	font-family: var(--swr-sans);
 	font-size: 1.1rem;
 	line-height: 1.45;
 	letter-spacing: 0.0045em;
-}
-
-%copy-bold {
-	@extend %copy;
-	font-weight: 600;
-}
-
-%form-input {
-	@extend %copy;
 	height: 2.5em;
 	width: 100%;
 	border: 1px solid currentColor;

package/vitest.workspace.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 import { defineWorkspace } from 'vitest/config';
 
-import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const dirname =
 	typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));