@reshape-biotech/design-system 2.7.41 → 2.7.43

package/dist/components/combobox/components/combobox-add.svelte

@@ -15,24 +15,8 @@
 </button>
 
 <style>
+  @reference "../../../app.css";
   button {
-    display: flex;
-    min-height: 2.5rem;
-    width: 100%;
-    cursor: pointer;
-    align-items: center;
-    gap: 0.75rem;
-    border-radius: 0.375rem;
-    background-color: transparent;
-    padding: 0.25rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem
-}
-button:hover {
-    background-color: #12192a0A
-}
+    @apply flex min-h-10 p-1 w-full cursor-pointer items-center rounded-md px-3 py-2 gap-3 text-sm bg-transparent hover:bg-neutral;
+  }
 </style>

package/dist/components/combobox/components/combobox-content.svelte

@@ -68,69 +68,29 @@
 {/if}
 
 <style>
+  @reference "../../../app.css";
   :global([data-combobox-content]) {
-    z-index: 1;
-    width: 100%;
-    min-width: 8rem;
-    border-radius: 0.5rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
-    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    @apply z-[1] w-full rounded-lg bg-surface shadow-menu outline-none min-w-32;
     max-height: min(calc(var(--bits-combobox-content-available-height) - 40px), 800px);
-}
+  }
 
   :global([data-combobox-content].match-trigger-width) {
     width: var(--bits-combobox-anchor-width) !important;
   }
 
   :global([data-combobox-input]) {
-    min-height: 2.5rem;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: transparent;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-}
+    @apply w-full bg-transparent px-3 py-2 text-sm outline-none min-h-10 truncate;
+  }
 
   :global([data-combobox-item]) {
-    display: flex;
-    min-height: 2.5rem;
-    width: 100%;
-    cursor: pointer;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-    border-radius: 0.375rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
+    @apply flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md px-3 text-sm gap-3;
+  }
 
   :global([data-combobox-item][data-highlighted]) {
-    background-color: #12192a0A;
-}
+    @apply bg-neutral;
+  }
 
   :global([data-combobox-group-label]) {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 13px;
-    font-weight: 500;
-    --tw-text-opacity: 1;
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1));
-}
+    @apply px-3 py-2 text-label font-medium text-tertiary;
+  }
 </style>

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -2,7 +2,7 @@
   import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
   import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { userEvent, within } from '@storybook/test';
+  import { userEvent, within } from 'storybook/test';
   import { DateTime } from 'luxon';
   import DatePicker from './DatePicker.svelte';
   import * as Dropdown from '../dropdown/index';

package/dist/components/datepicker/DatePicker.svelte

@@ -167,178 +167,57 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   .calendar-container {
-
-    display: flex;
-
-    width: 312px
-}
+    @apply flex w-[312px];
+  }
 
   .calendar {
-
-    overflow: hidden;
-
-    border-radius: 0.5rem;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding: 1rem;
-
-    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
-
-    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
+    @apply overflow-hidden rounded-lg bg-surface p-4 shadow-menu;
+  }
 
   .month-year {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between
-}
+    @apply flex items-center justify-between;
+  }
 
   .calendar-body {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    overflow-x: auto;
-
-    padding-top: 22px
-}
+    @apply flex items-center justify-between overflow-x-auto pt-[22px];
+  }
 
   table {
-
-    margin: 0px;
-
-    width: 100%;
-
-    border-collapse: collapse;
-
-    --tw-border-spacing-x: 0px;
-
-    --tw-border-spacing-y: 0px;
-
-    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-
-    padding: 0px
-}
+    @apply m-0 w-full border-collapse border-spacing-0 p-0;
+  }
 
   table thead th p {
-
-    text-align: center;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem;
-
-    font-weight: 500;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
+    @apply text-center text-xs font-medium text-tertiary;
+  }
 
   tr {
-
-    height: 2.5rem;
-
-    border-style: none
-}
+    @apply h-10 border-none;
+  }
 
   table th,
   table td {
-
-    margin: 0px;
-
-    border-style: none;
-
-    padding: 0px
-}
+    @apply m-0 border-none p-0;
+  }
 
   .date-container {
-
-    position: relative
-}
+    @apply relative;
+  }
 
   .date {
-
-    display: flex;
-
-    height: 2.5rem;
-
-    width: 2.5rem;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.5rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    transition-duration: 150ms
-}
-
-  .date:hover {
-
-    background-color: #5750ee1A
-}
-
-  .date:focus {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
+    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-lg text-sm duration-150 hover:bg-accent focus:bg-accent-inverse focus:text-primary-inverse;
+  }
 
   .selected-date {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-
-  .selected-date:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
-}
+    @apply bg-accent-inverse text-primary-inverse hover:bg-accent-inverse;
+  }
 
   .current-date-indicator {
-
-    position: absolute;
-
-    left: 18px;
-
-    top: 2rem
-}
+    @apply absolute left-[18px] top-8;
+  }
 
   .date button {
-
-    border-style: none;
-
-    background-image: none
-}
+    @apply border-none bg-none;
+  }
 </style>

package/dist/components/drawer/Drawer.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Button from '../button/Button.svelte';
   import * as Drawer from './';
@@ -7,6 +7,7 @@
   const { Story } = defineMeta({
     title: 'Design System/Drawer',
     component: Root,
+    tags: ['autodocs'],
     parameters: {
       layout: 'fullscreen',
     },
@@ -119,16 +120,16 @@
           <p>This drawer includes a backdrop overlay.</p>
           <p>Clicking outside the drawer will close it.</p>
 
-          <div class="space-y-3 rounded-lg border border-gray-200 p-4">
+          <div class="space-y-3 rounded-lg border border-static p-4">
             <h3 class="font-semibold">Form Example</h3>
             <input
               type="text"
               placeholder="Enter your name"
-              class="w-full rounded border border-gray-300 p-2"
+              class="w-full rounded border border-input p-2"
             />
             <textarea
               placeholder="Add a comment..."
-              class="h-24 w-full rounded border border-gray-300 p-2"
+              class="h-24 w-full rounded border border-input p-2"
             ></textarea>
           </div>
         </div>
@@ -150,12 +151,12 @@
       <Button variant="primary">Open Wide Drawer</Button>
     </Drawer.Trigger>
 
-    <Drawer.Content {...defaultArgs} class="!w-[800px]" side="right">
+    <Drawer.Content {...defaultArgs} class="w-[800px]!" side="right">
       <div class="flex h-full flex-col p-5">
-        <Drawer.Title>Wide Drawer (600px)</Drawer.Title>
+        <Drawer.Title>Wide Drawer (800px)</Drawer.Title>
 
         <div class="mt-6 flex-1 space-y-4">
-          <p>This drawer has a custom width of 600px.</p>
+          <p>This drawer has a custom width of 800px.</p>
           <p>Perfect for forms, data tables, or detailed content.</p>
 
           <div class="grid grid-cols-2 gap-4">

package/dist/components/drawer/Drawer.stories.svelte.d.ts

@@ -1,19 +1,6 @@
-export default Drawer;
-type Drawer = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 import * as Drawer from './';
 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> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -25,3 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Drawer = InstanceType<typeof Drawer>;
+export default Drawer;

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { userEvent, within } from '@storybook/test';
+  import { userEvent, within } from 'storybook/test';
   import * as Dropdown from './index';
 
   const { Story } = defineMeta({

package/dist/components/dropdown/components/dropdown-field-trigger.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <DropdownMenu.Trigger
-  class="flex w-full cursor-pointer items-center gap-1 rounded-lg border-input bg-surface p-3 text-primary shadow-input focus-within:border-focus hover:border-hover disabled:bg-neutral disabled:text-tertiary {className}"
+  class="flex w-full cursor-pointer items-center gap-1 rounded-lg border border-input bg-surface p-3 text-primary shadow-input focus-within:border-focus hover:border-hover disabled:bg-neutral disabled:text-tertiary {className}"
   {...restProps}
 >
   {@render children()}

package/dist/components/dropdown/components/dropdown-item.svelte

@@ -28,8 +28,9 @@
 </DropdownMenu.Item>
 
 <style>
+  @reference "../../../app.css";
   :global([data-variant="secondary"] .dropdown-item:hover),
   :global([data-variant="secondary"] .dropdown-item:focus) {
-    background-color: #FFFFFF0D
-}
+    @apply bg-neutral-inverse;
+  }
 </style>

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte

@@ -33,8 +33,9 @@
 </DropdownMenu.SubTrigger>
 
 <style>
+  @reference "../../../app.css";
   :global([data-variant="secondary"] .dropdown-sub-trigger:hover),
   :global([data-variant="secondary"] .dropdown-sub-trigger:focus) {
-    background-color: #FFFFFF0D
-}
+    @apply bg-neutral-inverse;
+  }
 </style>

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import type { ECElementEvent } from '../../../echarts-config';
-  import { within, userEvent } from '@storybook/test';
+  import { within, userEvent } from 'storybook/test';
   import LineChart from './LineChart.svelte';
 
   const { Story } = defineMeta({

package/dist/components/graphs/matrix/Matrix.svelte

@@ -91,7 +91,7 @@
   {#if xAxisName && !hideAxisNames}
     <!-- 80px is the width of the yAxisName, 72px is the width of the yAxisName, 72px is the yLabels -->
     <div class="flex w-[calc(100%-72px-72px)] items-center self-end text-center">
-      <div class="mb-2 inline-block w-full border-b pb-3 text-sm font-normal text-secondary">
+      <div class="mb-2 inline-block w-full border-b border-static pb-3 text-sm font-normal text-secondary">
         {xAxisName}
       </div>
     </div>
@@ -99,7 +99,7 @@
 
   <div class="flex h-full flex-1 flex-row overflow-hidden">
     {#if yAxisName && !hideAxisNames}
-      <div class="mr-2 flex h-[calc(100%)] items-center self-end border-r">
+      <div class="mr-2 flex h-[calc(100%)] items-center self-end border-r border-static">
         <div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
           {yAxisName}
         </div>
@@ -122,7 +122,7 @@
           {#each displayData as row}
             {#each row as cell}
               <button
-                class="m-0.5 flex flex-col items-center justify-center rounded-lg border border p-1 text-center"
+                class="m-0.5 flex flex-col items-center justify-center rounded-lg border border-static p-1 text-center"
                 style="background-color: {cell.backgroundColor};"
                 onclick={() => handleCellClick(cell)}
                 onmouseover={() => handleCellHover(cell)}

package/dist/components/graphs/scatterplot/Scatterplot.svelte

@@ -351,7 +351,7 @@
   </Chart>
   {#if showLegend}
     <div
-      class="absolute left-14 top-6 flex h-auto rounded-lg border bg-surface transition-all duration-200"
+      class="absolute left-14 top-6 flex h-auto rounded-lg border border-static bg-surface transition-all duration-200"
     >
       <div class="ml-1 flex flex-col justify-center p-2">
         {#each displayedLegendItems as item}

package/dist/components/icon-button/IconButton.stories.svelte

@@ -12,39 +12,39 @@
 
 <Story name="Base" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="primary" />
-    <IconButton aria-label="Add" variant="secondary" />
-    <IconButton aria-label="Add" variant="danger" />
-    <IconButton aria-label="Add" variant="transparent" />
+    <IconButton aria-label="Add" variant="primary"><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary"><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="danger"><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="transparent"><Plus /></IconButton>
   </div>
 </Story>
 
 <Story name="Sizes" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="secondary" size="xs" />
-    <IconButton aria-label="Add" variant="secondary" size="sm" />
-    <IconButton aria-label="Add" variant="secondary" size="md" />
+    <IconButton aria-label="Add" variant="secondary" size="xs"><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary" size="sm"><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary" size="md"><Plus /></IconButton>
   </div>
 </Story>
 <Story name="Not rounded base" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="primary" rounded={false} />
-    <IconButton aria-label="Add" variant="secondary" rounded={false} />
-    <IconButton aria-label="Add" variant="danger" rounded={false} />
-    <IconButton aria-label="Add" variant="transparent" rounded={false} />
+    <IconButton aria-label="Add" variant="primary" rounded={false}><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary" rounded={false}><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="danger" rounded={false}><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="transparent" rounded={false}><Plus /></IconButton>
   </div>
 </Story>
 
 <Story name="Not rounded sizes" asChild>
   <div class="flex flex-col gap-2">
-    <IconButton aria-label="Add" variant="secondary" size="xs" rounded={false} />
-    <IconButton aria-label="Add" variant="secondary" size="sm" rounded={false} />
-    <IconButton aria-label="Add" variant="secondary" size="md" rounded={false} />
+    <IconButton aria-label="Add" variant="secondary" size="xs" rounded={false}><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary" size="sm" rounded={false}><Plus /></IconButton>
+    <IconButton aria-label="Add" variant="secondary" size="md" rounded={false}><Plus /></IconButton>
   </div>
 </Story>
 <Story name="Disabled" asChild>
-  <IconButton aria-label="Add" disabled />
+  <IconButton aria-label="Add" disabled><Plus /></IconButton>
 </Story>
 <Story name="Loading" asChild>
-  <IconButton aria-label="Add" loading />
+  <IconButton aria-label="Add" loading><Plus /></IconButton>
 </Story>