@reshape-biotech/design-system 2.7.42 → 2.7.43

package/dist/components/textarea/Textarea.svelte

@@ -92,7 +92,7 @@
       id={inputId}
       class="flex min-h-10 w-full items-center gap-1 rounded-lg border border-input bg-surface px-3 py-2 shadow-input transition-colors hover:border-hover focus:border-focus focus:outline-none {className ??
         ''}"
-      class:!border-error={error}
+      class:border-error!={error}
       class:has-text={value}
       class:has-placeholder={placeholder}
       {placeholder}

package/dist/components/toggle/Toggle.svelte

@@ -15,20 +15,16 @@
 </label>
 
 <style>
+  @reference "../../app.css";
   /* The switch - the box around the slider */
   .switch {
-    position: relative;
-    display: inline-block;
-    height: 1.25rem;
-    width: 2.25rem;
-}
+    @apply relative inline-block h-5 w-9;
+  }
 
   /* Hide default HTML checkbox */
   .switch input {
-    height: 0px;
-    width: 0px;
-    opacity: 0;
-}
+    @apply h-0 w-0 opacity-0;
+  }
 
   /* The slider */
   .slider {
@@ -38,37 +34,36 @@
     left: 0;
     right: 0;
     bottom: 0;
+    -webkit-transition: 0.1s;
     transition: 0.1s;
-    background-color: #12192A26;
+    @apply bg-neutral-darker;
   }
 
   .slider:before {
     content: '';
     left: 2px;
     bottom: 2px;
+    -webkit-transition: 0.1s;
     transition: 0.1s;
-    position: absolute;
-    height: 1rem;
-    width: 1rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    @apply absolute h-4 w-4 bg-surface;
   }
 
   input:checked + .slider {
-    --tw-bg-opacity: 1;
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
-}
+    @apply bg-accent-inverse;
+  }
 
   input:checked + .slider:before {
+    -webkit-transform: translateX(16px);
+    -ms-transform: translateX(16px);
     transform: translateX(16px);
   }
 
   /* Rounded sliders */
   .slider.round {
-    border-radius: 9999px;
-}
+    @apply rounded-full;
+  }
 
   .slider.round:before {
-    border-radius: 9999px;
-}
+    @apply rounded-full;
+  }
 </style>

package/dist/components/typography/Typography.stories.svelte

@@ -0,0 +1,143 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Typography',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Font Families">
+  <div class="flex flex-col gap-8">
+    <div>
+      <p class="text-xs text-tertiary mb-2">font-sans — af Another Sans (Regular 400)</p>
+      <p class="font-sans text-lg">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-2">font-sans — af Another Sans (Medium 500)</p>
+      <p class="font-sans font-medium text-lg">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-2">font-sans — af Another Sans (SemiBold 600)</p>
+      <p class="font-sans font-semibold text-lg">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-2">font-mono — Geist Mono</p>
+      <p class="font-mono text-lg">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-2">font-mono — Geist Mono (numbers)</p>
+      <p class="font-mono text-lg">0123456789 — 1,234,567.89 — 99.7%</p>
+    </div>
+  </div>
+</Story>
+
+<Story name="Headings">
+  <div class="flex flex-col gap-6">
+    <div>
+      <p class="text-xs text-tertiary mb-1">h1 — 4.5rem / 600</p>
+      <h1>Heading 1</h1>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">h2 — 3rem / 600</p>
+      <h2>Heading 2</h2>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">h3 — 1.5rem / 600</p>
+      <h3>Heading 3</h3>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">h4 — 1.25rem / 600</p>
+      <h4>Heading 4</h4>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">h5 — 1rem / 600</p>
+      <h5>Heading 5</h5>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">h6 — 0.875rem / 600</p>
+      <h6>Heading 6</h6>
+    </div>
+  </div>
+</Story>
+
+<Story name="Text Sizes">
+  <div class="flex flex-col gap-4">
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-xxs (10px)</p>
+      <p class="text-xxs">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-xs</p>
+      <p class="text-xs">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-sm</p>
+      <p class="text-sm">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-base (body default)</p>
+      <p class="text-base">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-lg</p>
+      <p class="text-lg">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-xl</p>
+      <p class="text-xl">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">text-2xl</p>
+      <p class="text-2xl">The quick brown fox jumps over the lazy dog</p>
+    </div>
+  </div>
+</Story>
+
+<Story name="Font Weights">
+  <div class="flex flex-col gap-4">
+    <div>
+      <p class="text-xs text-tertiary mb-1">font-normal (400)</p>
+      <p class="text-lg font-normal">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">font-medium (500)</p>
+      <p class="text-lg font-medium">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">font-semibold (600)</p>
+      <p class="text-lg font-semibold">The quick brown fox jumps over the lazy dog</p>
+    </div>
+    <div>
+      <p class="text-xs text-tertiary mb-1">font-bold (700)</p>
+      <p class="text-lg font-bold">The quick brown fox jumps over the lazy dog</p>
+    </div>
+  </div>
+</Story>
+
+<Story name="Mixed Usage">
+  <div class="flex flex-col gap-6">
+    <div>
+      <h3>Dashboard Overview</h3>
+      <p class="text-secondary mt-2">
+        Colony count results from the latest batch. Values shown in
+        <span class="font-mono bg-neutral rounded px-1 py-0.5">CFU/mL</span>
+        units.
+      </p>
+    </div>
+    <div class="flex gap-8">
+      <div>
+        <p class="text-xs text-tertiary">Total count</p>
+        <p class="font-mono text-2xl font-semibold">1,247,832</p>
+      </div>
+      <div>
+        <p class="text-xs text-tertiary">Average</p>
+        <p class="font-mono text-2xl font-semibold">312.4</p>
+      </div>
+      <div>
+        <p class="text-xs text-tertiary">Accuracy</p>
+        <p class="font-mono text-2xl font-semibold">99.7%</p>
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/components/typography/Typography.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Typography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Typography = InstanceType<typeof Typography>;
+export default Typography;

package/dist/safelist.css

@@ -0,0 +1,3 @@
+/* Design-system safelist: points TW4 scanner at dynamically-used classes */
+/* To add new classes, update tailwind-safelist.js — they're picked up automatically */
+@source "./tailwind-safelist";

package/dist/tailwind-safelist.js

@@ -107,7 +107,7 @@ export const textSizes = [
   'text-xxs',
   'text-xs',
   'text-sm',
-  'text-md',
+  'text-base',
   'text-lg',
   'text-xl',
   'text-2xl',
@@ -147,7 +147,7 @@ export const rounded = [
   'rounded',
   'rounded-full',
   'rounded-lg',
-  '!rounded-lg',
+  'rounded-lg!',
   'rounded-xl',
   'rounded-2xl',
   'rounded-md',
@@ -216,7 +216,7 @@ export const sizing = [
   'h-4',
   'h-5',
   'h-6',
-  '!h-6',
+  'h-6!',
   'h-7',
   'h-8',
   'h-10',
@@ -226,7 +226,7 @@ export const sizing = [
   'h-28',
   'h-screen',
   'h-full',
-  '!h-full',
+  'h-full!',
   'h-1.5',
   'w-0.5',
   'w-1.5',
@@ -234,7 +234,7 @@ export const sizing = [
   'w-4',
   'w-5',
   'w-6',
-  '!w-6',
+  'w-6!',
   'w-7',
   'w-8',
   'w-10',
@@ -264,12 +264,11 @@ export const misc = [
   'overflow-hidden',
   'overflow-x-auto',
   'duration-150',
-  'active:red',
   'active:bg-neutral',
   'active:bg-neutral-inverse',
   '[&>*]:flex-1',
   '[&>*]:flex-none',
-  '[&>*]:!rounded-md',
+  '[&>*]:rounded-md!',
   '[&>*]:rounded-xl',
   '[&>*>.control-button]:flex-col',
   'data-[highlighted]:bg-neutral',
@@ -281,7 +280,7 @@ export const misc = [
   '[&>svg]:w-5',
   '[&>svg]:h-5',
   'ring-1',
-  'ring-gray-950/10',
+  'ring-[#12192a1a]',
   'translate-y-[2px]',
   '-rotate-90',
   'transform',
@@ -333,7 +332,6 @@ export const disabledVariants = [
 export const activeVariants = [
   'active:bg-neutral',
   'active:bg-neutral-inverse',
-  'active:red',
   'active:scale-95',
   'active:transform',
 ];