@reshape-biotech/design-system 2.7.35 → 2.7.37

package/dist/app.css

@@ -59,7 +59,7 @@
     font-style: normal;
     font-weight: 600;
     line-height: 4.5rem;
-    letter-spacing: -0.1em;
+    letter-spacing: -0.025em;
   }
 
   h2 {
@@ -68,7 +68,7 @@
     font-style: normal;
     font-weight: 600;
     line-height: 3rem;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.025em;
   }
 
   h3 {

package/dist/components/activity/Activity.svelte

@@ -3,6 +3,7 @@
   import ActivityIcon from './ActivityIcon.svelte';
   import type { ActivityIconType } from './ActivityIcon.svelte';
   import { DateTime } from 'luxon';
+  import { twMerge } from 'tailwind-merge';
 
   type Activity = {
     activity_type?: string;
@@ -54,13 +55,14 @@
   let { class: className = '', activity }: Props = $props();
 </script>
 
-<div class={`group flex items-stretch gap-3 ${className}`}>
+<div class={twMerge('group flex items-stretch gap-3', className)}>
   <div class="flex min-h-12 flex-col items-center gap-1.5">
     <div class="bg-neutral w-0.5 grow group-first:invisible"></div>
     <div
-      class="text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 {ACTIVITY_BACKGROUND[
-        activity.icon
-      ]}"
+      class={twMerge(
+        'text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5',
+        ACTIVITY_BACKGROUND[activity.icon]
+      )}
     >
       <ActivityIcon icon={activity.icon} />
     </div>

package/dist/components/button/Button.stories.svelte

@@ -21,6 +21,7 @@
     'transparent',
     'outline',
     'secondary-inverse',
+    'transparent-inverse',
   ];
   const sizes = ['xs', 'sm', 'md', 'lg'];
 </script>
@@ -28,15 +29,21 @@
 <Story name="Variants" asChild>
   <div class="flex flex-col gap-4">
     {#each variants as variant}
-      {#if variant === 'secondary-inverse'}
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
         <div class="bg-base-inverse p-4 text-primary-inverse">
           <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant}>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded>Button</Button>
+          </div>
         </div>
       {:else}
         <div>
           <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant}>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded>Button</Button>
+          </div>
         </div>
       {/if}
     {/each}
@@ -57,10 +64,23 @@
 <Story name="Disabled" asChild>
   <div class="flex flex-col gap-4">
     {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} disabled>Button</Button>
-      </div>
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="bg-base-inverse p-4 text-primary-inverse">
+          <p>{variant}</p>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant} disabled>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
+          </div>
+        </div>
+      {:else}
+        <div>
+          <p>{variant}</p>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant} disabled>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
+          </div>
+        </div>
+      {/if}
     {/each}
   </div>
 </Story>

package/dist/components/button/Button.svelte

@@ -12,6 +12,7 @@
 </script>
 
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Spinner from '../spinner/Spinner.svelte';
   import type { Snippet } from 'svelte';
 
@@ -66,7 +67,7 @@
   {id}
   {tabindex}
   class:cursor-wait={loading}
-  class="button {variantClass} {sizeClass} {className}"
+  class={twMerge('button', variantClass, sizeClass, className)}
   data-testid={dataTestId}
   class:rounded
   class:disabled
@@ -119,35 +120,14 @@
 
 .button:disabled {
 
-    border-color: transparent;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-.button:hover:disabled {
-
-    cursor: not-allowed;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+    cursor: not-allowed
 }
 
   .rounded {
 
-    border-radius: 9999px
+    border-radius: 9999px !important
 }
 
-  .disabled:hover {
-
-    background-color: #12192a0A !important
-}
   /* Size variants */
   .btn-size-xs {
 
@@ -220,6 +200,20 @@
 
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
+  .btn-primary:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-primary:hover:disabled {
+
+    background-color: #12192a0A
+}
 
   .btn-secondary {
 
@@ -239,6 +233,22 @@
 
     background-color: #12192a0A
 }
+
+  .btn-secondary:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+  .btn-secondary:hover:disabled {
+
+    background-color: #12192a0A
+}
   .btn-transparent {
 
     background-color: transparent;
@@ -248,6 +258,18 @@
   .btn-transparent:hover {
 
     background-color: #12192a0A
+}
+  .btn-transparent:disabled {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-transparent:hover:disabled {
+
+    background-color: transparent
 }
   .btn-danger {
 
@@ -272,6 +294,20 @@
     --tw-bg-opacity: 1;
 
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+  .btn-danger:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-danger:hover:disabled {
+
+    background-color: #12192a0A
 }
   .btn-outline {
 
@@ -303,7 +339,29 @@
 }
   .btn-outline:disabled {
 
-    border-style: none
+    border-color: #12192a14;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 0 #0000;
+
+    --tw-shadow-colored: 0 0 #0000;
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+  .btn-outline:hover:disabled {
+
+    border-color: #12192a14;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
 }
   .btn-secondary-inverse {
 
@@ -321,6 +379,20 @@
 
     background-color: #FFFFFF0D
 }
+  .btn-secondary-inverse:disabled {
+
+    border-color: transparent;
+
+    background-color: #FFFFFF0D;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-secondary-inverse:hover:disabled {
+
+    background-color: #FFFFFF0D
+}
   .btn-transparent-inverse {
 
     background-color: transparent;
@@ -336,5 +408,17 @@
   .btn-transparent-inverse:active {
 
     background-color: #FFFFFF0D
+}
+  .btn-transparent-inverse:disabled {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-transparent-inverse:hover:disabled {
+
+    background-color: transparent
 }
 </style>

package/dist/components/card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,19 +20,20 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-[10px] border border-static bg-surface shadow-container {additionalClasses}"
+  class={twMerge(
+    'overflow-hidden rounded-[10px] border border-static bg-surface shadow-container',
+    additionalClasses
+  )}
 >
   {#if Header}
     <header
-      class="flex min-h-12 items-center px-4"
-      class:border-b={headerBorder}
-      class:border-static={headerBorder}
+      class={twMerge('flex min-h-12 items-center px-4', headerBorder && 'border-b border-static')}
     >
       {@render Header()}
     </header>
   {/if}
   {#if children}
-    <div class={`p-${padding}`}>
+    <div class={twMerge(`p-${padding}`)}>
       {@render children()}
     </div>
   {/if}

package/dist/components/card/CardWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     Header?: Snippet;
@@ -19,28 +20,24 @@
   }: Props = $props();
 </script>
 
-<div class={['wrapper', variant, additionalClasses]}>
+<div class={twMerge('wrapper', variant, additionalClasses)}>
   {#if Header}
     <header
-      class={[
+      class={twMerge(
         'flex w-full items-center justify-between',
-        {
-          'min-h-10 px-4': variant === 'default',
-          'min-h-8 px-3': variant === 'compact',
-        },
-      ]}
+        variant === 'default' && 'min-h-10 px-4',
+        variant === 'compact' && 'min-h-8 px-3'
+      )}
     >
       {@render Header()}
     </header>
   {/if}
   <div
-    class={[
+    class={twMerge(
       'flex w-full flex-col !overflow-hidden [&>*]:w-full',
-      {
-        'gap-1 [&>*]:rounded-xl': variant === 'default',
-        'gap-0.5 [&>*]:rounded-[10px]': variant === 'compact',
-      },
-    ]}
+      variant === 'default' && 'gap-1 [&>*]:rounded-xl',
+      variant === 'compact' && 'gap-0.5 [&>*]:rounded-[10px]'
+    )}
   >
     {@render children()}
   </div>

package/dist/components/checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import Check from 'phosphor-svelte/lib/Check';
   import Minus from 'phosphor-svelte/lib/Minus';
   import { Icon } from '../icons/index.js';
@@ -6,13 +7,13 @@
 
   export type CheckboxProps = CheckboxRootProps;
 
-  let { checked = $bindable(false), onCheckedChange, name, ...props }: CheckboxProps = $props();
+  let { checked = $bindable(false), onCheckedChange, name, class: className, ...props }: CheckboxProps = $props();
 </script>
 
 <Checkbox.Root bind:checked {onCheckedChange} {...props}>
   {#snippet children({ checked, indeterminate })}
     <div
-      class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
+      class={twMerge('flex items-center justify-center rounded border border-static', checked && 'bg-dark-accent-inverse-hover', className)}
     >
       {#if checked}
         <Icon class="text-primary-inverse" icon={Check} />