@reshape-biotech/design-system 2.7.41 → 2.7.43

package/base.css

@@ -0,0 +1 @@
+@import './dist/base.css';

package/dist/app.css

@@ -1,122 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss";
+@config "./tailwind.preset.js";
+@plugin "@tailwindcss/typography";
 
-@layer base {
-  @font-face {
-    font-family: 'Geist Mono';
-    font-style: normal;
-    font-weight: 400;
-    src: url('/fonts/GeistMono-VariableFont_wght.ttf') format('ttf');
-  }
-  @font-face {
-    font-family: 'af Another Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: 'af Another Sans';
-    font-style: normal;
-    font-weight: 500;
-    src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: 'af Another Sans';
-    font-style: normal;
-    font-weight: 600;
-    src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
-  }
-
-  body {
-    background-color: theme('backgroundColor.surface');
-    color: theme('textColor.primary');
-    font-family: 'af Another Sans', sans-serif;
-    font-style: normal;
-    font-feature-settings: 'ss01' on;
-    font-variant-numeric: lining-nums tabular-nums;
-    font-weight: 400;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: 0.01em;
-  }
-
-  a {
-    color: theme('textColor.accent');
-    font-style: normal;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  h1 {
-    /* text-7xl */
-    font-size: 4.5rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 4.5rem;
-    letter-spacing: -0.025em;
-  }
-
-  h2 {
-    /* text-5xl */
-    font-size: 3rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 3rem;
-    letter-spacing: -0.025em;
-  }
-
-  h3 {
-    /* text-2xl */
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 1.75rem;
-    letter-spacing: -0.025em;
-  }
-
-  h4 {
-    /* text-xl */
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    font-style: normal;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-  }
-
-  h5 {
-    /* text-base */
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-style: normal;
-    font-weight: 600;
-    letter-spacing: 0;
-  }
-
-  h6 {
-    /* text-sm */
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-style: normal;
-    font-weight: 600;
-    letter-spacing: 0;
-  }
-}
-
-@layer components {
-  html:has(.drawer-auto-gutter .drawer-toggle:checked) {
-    scrollbar-gutter: auto;
-  }
-
-  /* Global focus styles using brand colors */
-  *:focus-visible {
-    outline: 2px solid theme('borderColor.hover');
-    outline-offset: 1px;
-    border-radius: theme('borderRadius.lg');
-  }
-}
+@import './safelist.css';
+@import './base.css';

package/dist/base.css

@@ -0,0 +1,111 @@
+@layer base {
+  @font-face {
+    font-family: 'Geist Mono';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('/fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/afAnotherSans-Regular.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/afAnotherSans-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'af Another Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/afAnotherSans-SemiBold.woff2') format('woff2');
+  }
+
+  body {
+    background-color: #FFFFFF;
+    color: #12192a;
+    font-family: 'af Another Sans', sans-serif;
+    font-style: normal;
+    font-feature-settings: 'ss01' on;
+    font-variant-numeric: lining-nums tabular-nums;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.01em;
+  }
+
+  a {
+    color: #4741c1;
+    font-style: normal;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 4.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 4.5rem;
+    letter-spacing: -0.025em;
+  }
+
+  h2 {
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 3rem;
+    letter-spacing: -0.025em;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.75rem;
+    letter-spacing: -0.025em;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  h5 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+
+  h6 {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+}
+
+@layer components {
+  html:has(.drawer-auto-gutter .drawer-toggle:checked) {
+    scrollbar-gutter: auto;
+  }
+
+  *:focus-visible {
+    outline: 2px solid #5750ee80;
+    outline-offset: 1px;
+    border-radius: var(--radius-lg);
+  }
+}

package/dist/components/banner/Banner.svelte

@@ -56,11 +56,8 @@
 {/if}
 
 <style>
+  @reference "../../app.css";
   .content :global(a) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-    text-decoration-line: underline
-}
+    @apply text-sm text-primary underline;
+  }
 </style>

package/dist/components/button/Button.svelte

@@ -81,344 +81,50 @@
 </button>
 
 <style>
+  @reference "../../app.css";
   .button {
-
-    display: inline-flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    gap: 0.5rem;
-
-    overflow: hidden;
-
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
-
-    text-wrap: nowrap;
-
-    border-radius: 0.5rem;
-
-    border-width: 1px;
-
-    border-color: transparent;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500;
-
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 150ms
-}
-
-.button:disabled {
-
-    cursor: not-allowed
-}
+    @apply inline-flex items-center justify-center gap-2 truncate text-nowrap rounded-lg border border-transparent text-sm font-medium transition-colors disabled:cursor-not-allowed;
+  }
 
   .rounded {
-
-    border-radius: 9999px !important
-}
+    @apply rounded-full!;
+  }
 
   /* Size variants */
   .btn-size-xs {
-
-    height: 1.75rem;
-
-    border-radius: 0.375rem;
-
-    padding-left: 0.5rem;
-
-    padding-right: 0.5rem
-}
+    @apply h-7 rounded-md px-2;
+  }
   .btn-size-sm {
-
-    height: 2rem;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem
-}
+    @apply h-8 px-3;
+  }
   .btn-size-md {
-
-    height: 2.5rem;
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
-}
+    @apply h-10 px-4;
+  }
   .btn-size-lg {
-
-    height: 3rem;
-
-    border-radius: 0.75rem;
-
-    padding-left: 1.25rem;
-
-    padding-right: 1.25rem
-}
-  @media (min-width: 1280px) {
-
-    .btn-size-lg {
-
-        font-size: 1rem;
-
-        line-height: 1.5rem
-    }
-}
+    @apply h-12 rounded-xl px-5 xl:text-base;
+  }
 
   /* Button variants */
   .btn-primary {
-
-    border-color: #12192A1A;
-
-    --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));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-  .btn-primary:hover {
-
-    --tw-bg-opacity: 1;
-
-    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
-}
+    @apply border-input bg-accent-inverse text-primary-inverse shadow-input hover:bg-accent-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+  }
 
   .btn-secondary {
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-
-  .btn-secondary:hover {
-
-    background-color: #12192A1A
-}
-
-  .btn-secondary:active {
-
-    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
-}
+    @apply bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+  }
   .btn-transparent {
-
-    background-color: transparent;
-
-    color: inherit
-}
-  .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
-}
+    @apply bg-transparent text-inherit hover:bg-neutral disabled:bg-transparent disabled:text-tertiary disabled:hover:bg-transparent;
+  }
   .btn-danger {
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-  .btn-danger:hover {
-
-    --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
-}
+    @apply border-input bg-danger-inverse text-primary-inverse shadow-input hover:bg-danger-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+  }
   .btn-outline {
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-  .btn-outline:hover {
-
-    border-color: #12192A1A;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-  .btn-outline:disabled {
-
-    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))
-}
+    @apply border-input bg-surface text-primary shadow-input hover:border-input hover:bg-neutral hover:text-primary disabled:border-static disabled:bg-surface disabled:text-tertiary disabled:shadow-none disabled:hover:bg-surface disabled:hover:border-static;
+  }
   .btn-secondary-inverse {
-
-    background-color: #FFFFFF0D;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-secondary-inverse:hover {
-
-    background-color: #FFFFFF26
-}
-  .btn-secondary-inverse:active {
-
-    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
-}
+    @apply bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse disabled:border-transparent disabled:bg-neutral-inverse disabled:text-tertiary disabled:hover:bg-neutral-inverse;
+  }
   .btn-transparent-inverse {
-
-    background-color: transparent;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-transparent-inverse:hover {
-
-    background-color: #FFFFFF0D
-}
-  .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
-}
+    @apply bg-transparent text-primary-inverse hover:bg-neutral-inverse active:bg-neutral-inverse disabled:bg-transparent disabled:text-tertiary disabled:hover:bg-transparent;
+  }
 </style>

package/dist/components/card/CardWrapper.svelte

@@ -34,7 +34,7 @@
   {/if}
   <div
     class={twMerge(
-      'flex w-full flex-col !overflow-hidden [&>*]:w-full',
+      'flex w-full flex-col overflow-hidden! [&>*]:w-full',
       variant === 'default' && 'gap-1 [&>*]:rounded-xl',
       variant === 'compact' && 'gap-0.5 [&>*]:rounded-[10px]'
     )}
@@ -49,32 +49,16 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   .wrapper {
-
-    display: flex;
-
-    flex-direction: column;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
-}
+    @apply flex flex-col bg-base;
+  }
 
   .wrapper.default {
-
-    gap: 0.25rem;
-
-    border-radius: 1rem;
-
-    padding: 0.25rem
-}
+    @apply gap-1 rounded-2xl p-1;
+  }
 
   .wrapper.compact {
-
-    gap: 0.125rem;
-
-    border-radius: 0.75rem;
-
-    padding: 0.125rem
-}
+    @apply gap-0.5 rounded-xl p-0.5;
+  }
 </style>

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -17,21 +17,14 @@
 </Collapsible.Trigger>
 
 <style>
-  :global([data-state='open']) :global(.icon) {
-
-    --tw-rotate: 180deg;
-
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
+  @reference "../../../app.css";
+  :global([data-state='open']) {
+    :global(.icon) {
+      @apply rotate-180;
+    }
+  }
 
   .container {
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: space-between;
-
-    gap: 0.5rem
-}
+    @apply flex items-center justify-between gap-2;
+  }
 </style>

package/dist/components/combobox/Combobox.stories.svelte

@@ -4,7 +4,7 @@
   import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
   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 { Root as ComboboxRootForMeta } from './index';
   import * as Combobox from './index';
   import IconButton from '../icon-button/IconButton.svelte';