@reshape-biotech/design-system 2.7.42 → 2.7.43

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

@@ -76,145 +76,67 @@
 {/if}
 
 <style>
+  @reference "../../app.css";
   button {
-    display: flex;
-    flex-shrink: 0;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    transition-duration: 150ms
-}
+    @apply flex shrink-0 cursor-pointer items-center justify-center rounded-lg duration-150;
+  }
   .rounded {
-    border-radius: 9999px !important
-}
+    @apply rounded-full!;
+  }
   .disabled {
-    cursor: not-allowed
-}
-  .disabled:disabled {
-    background-color: #12192a0A;
-    --tw-text-opacity: 1;
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
+    @apply cursor-not-allowed disabled:bg-neutral disabled:text-tertiary;
+  }
 
   .size-xs {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 0.375rem
-}
-
-  .size-xs :global(svg) {
-    width: 1rem;
-    height: 1rem
-}
+    @apply size-6 rounded-md;
+    :global(svg) {
+      @apply size-4;
+    }
+  }
   .size-sm {
-    width: 2rem;
-    height: 2rem
-}
-  .size-sm :global(svg) {
-    width: 1rem;
-    height: 1rem
-}
+    @apply size-8;
+    :global(svg) {
+      @apply size-4;
+    }
+  }
   .size-md {
-    width: 2.5rem;
-    height: 2.5rem
-}
-  .size-md :global(svg) {
-    width: 1rem;
-    height: 1rem
-}
+    @apply size-10;
+    :global(svg) {
+      @apply size-4;
+    }
+  }
 
   .size-lg {
-    width: 3rem;
-    height: 3rem
-}
-
-  .size-lg :global(svg) {
-    width: 1.25rem;
-    height: 1.25rem
-}
+    @apply size-12;
+    :global(svg) {
+      @apply size-5;
+    }
+  }
 
   .color-outline {
-    border-width: 1px;
-    border-color: #12192A1A;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-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)
-}
-
-  .color-outline:hover {
-    background-color: #12192a0A
-}
+    @apply border border-input bg-surface shadow-input hover:bg-neutral;
+  }
 
   .color-primary {
-    --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))
-}
-
-  .color-primary:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
-}
+    @apply bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover;
+  }
   .color-secondary {
-    background-color: #12192a0A;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-  .color-secondary:hover {
-    background-color: #12192A1A
-}
+    @apply bg-neutral text-icon-primary hover:bg-neutral-hover;
+  }
   .color-accent {
-    background-color: #5750ee1A;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .color-accent:hover {
-    background-color: #5750ee40
-}
+    @apply bg-accent text-icon-primary-inverse hover:bg-accent-hover;
+  }
   .color-transparent {
-    background-color: transparent;
-    --tw-text-opacity: 1;
-    color: rgb(89 94 106 / var(--tw-text-opacity, 1))
-}
-  .color-transparent:hover {
-    background-color: #12192a0A;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
+    @apply bg-transparent text-icon-secondary hover:bg-neutral hover:text-icon-primary;
+  }
   .color-danger {
-    --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))
-}
-  .color-danger:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
-}
+    @apply bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover;
+  }
   .color-secondary-inverse {
-    background-color: #FFFFFF0D;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .color-secondary-inverse:hover {
-    background-color: #FFFFFF26
-}
+    @apply bg-neutral-inverse text-icon-primary-inverse hover:bg-neutral-inverse-hover;
+  }
 
   .color-transparent-inverse {
-    background-color: transparent;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-
-  .color-transparent-inverse:hover {
-    background-color: #FFFFFF26
-}
-
-  .color-transparent-inverse:hover:disabled {
-    background-color: transparent
-}
+    @apply bg-transparent text-icon-primary-inverse hover:bg-neutral-inverse-hover disabled:hover:bg-transparent;
+  }
 </style>

package/dist/components/icons/AnalysisIcon.svelte

@@ -101,35 +101,18 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   .withBackground {
+    @apply flex items-center justify-center rounded-md;
 
-    display: flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.375rem
-}
-
-    .withBackground.size-sm {
-
-    height: 1.5rem;
-
-    width: 1.5rem
-}
-
-    .withBackground.size-md {
-
-    height: 2rem;
-
-    width: 2rem
-}
-
-    .withBackground.size-lg {
-
-    height: 2.5rem;
-
-    width: 2.5rem
-}
+    &.size-sm {
+      @apply h-6 w-6;
+    }
+    &.size-md {
+      @apply h-8 w-8;
+    }
+    &.size-lg {
+      @apply h-10 w-10;
+    }
+  }
 </style>

package/dist/components/icons/PrincipalIcon.svelte

@@ -82,35 +82,18 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   .withBackground {
+    @apply flex items-center justify-center rounded-md;
 
-    display: flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.375rem
-}
-
-    .withBackground.size-sm {
-
-    height: 1.5rem;
-
-    width: 1.5rem
-}
-
-    .withBackground.size-md {
-
-    height: 2rem;
-
-    width: 2rem
-}
-
-    .withBackground.size-lg {
-
-    height: 2.5rem;
-
-    width: 2.5rem
-}
+    &.size-sm {
+      @apply h-6 w-6;
+    }
+    &.size-md {
+      @apply h-8 w-8;
+    }
+    &.size-lg {
+      @apply h-10 w-10;
+    }
+  }
 </style>

package/dist/components/input/Input.svelte

@@ -93,7 +93,7 @@
   <div class="flex-1">
     <div
       class={twMerge('flex w-full items-center gap-1 transition-colors', `size-${size}`, className)}
-      class:!border-error={!valid}
+      class:border-error!={!valid}
       class:primary={variant === 'primary'}
       class:secondary={variant === 'secondary'}
       class:transparent={variant === 'transparent'}
@@ -140,164 +140,56 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   input {
-
-    width: 100%;
-
-    resize: none;
-
-    background-color: transparent;
-
-    padding: 0.25rem;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-input::-moz-placeholder {
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-input::placeholder {
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
+    @apply w-full resize-none bg-transparent p-1 outline-none placeholder:text-tertiary;
+  }
 
   div:not(:focus-within):hover {
-
-    border-color: #5750ee80
-}
+    @apply border-hover;
+  }
 
   div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
+    @apply border-focus;
+  }
 
   .primary {
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-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)
-}
+    @apply border border-input bg-surface shadow-input;
+  }
 
   .secondary {
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
-}
+    @apply border border-input bg-base;
+  }
 
   .transparent {
-
-    border-width: 1px;
-
-    border-color: transparent
-}
+    @apply border border-transparent;
+  }
 
   .borderless {
+    @apply border-none;
 
-    border-style: none
-}
-
-  .borderless input {
-
-    border-style: none;
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px;
-
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
-}
+    input {
+      @apply border-none outline-none ring-0;
+    }
+  }
 
   .size-xs {
-
-    height: 1.5rem;
-
-    border-radius: 0.375rem;
-
-    padding: 0.25rem;
-
-    font-size: 0.75rem;
-
-    line-height: 1rem
-}
+    @apply h-6 rounded-md p-1 text-xs;
+  }
 
   .size-sm {
-
-    height: 2rem;
-
-    border-radius: 0.375rem;
-
-    padding: 0.25rem
-}
+    @apply h-8 rounded-md p-1;
+  }
 
   .size-md {
-
-    height: 2.5rem;
-
-    border-radius: 0.5rem;
-
-    padding: 0.25rem
-}
+    @apply h-10 rounded-lg p-1;
+  }
 
   .size-lg {
-
-    height: 3rem;
-
-    border-radius: 0.5rem;
-
-    padding-left: 0.5rem;
-
-    padding-right: 0.5rem;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem;
-
-    font-size: 1rem;
-
-    line-height: 1.5rem
-}
+    @apply h-12 rounded-lg px-2 py-3 text-base;
+  }
 
   .size-dynamic {
-
-    height: auto;
-
-    border-radius: 0.5rem;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
-}
+    @apply h-auto rounded-lg px-3 py-2;
+  }
 </style>

package/dist/components/label/Label.stories.svelte

@@ -5,6 +5,7 @@
   const { Story } = defineMeta({
     title: 'Design System/Label',
     component: Label,
+    tags: ['autodocs'],
     argTypes: {
       text: { control: 'text' },
       forId: { control: 'text' },

package/dist/components/list/List.svelte

@@ -23,50 +23,24 @@
 </div>
 
 <style>
+  @reference "../../app.css";
   .listStyles {
+    @apply flex h-full flex-col items-start self-stretch rounded;
 
-    display: flex;
+    &.default {
+      @apply gap-4;
+    }
 
-    height: 100%;
+    &.compact {
+      @apply gap-0 bg-surface px-4;
 
-    flex-direction: column;
+      :global(> .item:not(:last-child)) {
+        @apply border-b border-solid border-static;
+      }
+    }
 
-    align-items: flex-start;
-
-    align-self: stretch;
-
-    border-radius: 0.25rem
-}
-
-    .listStyles.default {
-
-    gap: 1rem
-}
-
-    .listStyles.compact {
-
-    gap: 0px;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
-}
-
-    .listStyles.compact :global(> .item:not(:last-child)) {
-
-    border-bottom-width: 1px;
-
-    border-style: solid;
-
-    border-color: #12192a14
-}
-
-    .listStyles :global(.item) {
-
-    align-self: stretch
-}
+    :global(.item) {
+      @apply self-stretch;
+    }
+  }
 </style>

package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte

@@ -223,7 +223,7 @@
       circle.setAttribute('cy', String(markY));
       circle.setAttribute('r', String(adjustedMarkerSize));
       circle.setAttribute('fill', MARKER_COLOR);
-      circle.setAttribute('class', 'drop-shadow-sm');
+      circle.setAttribute('class', 'drop-shadow-xs');
       circle.setAttribute('opacity', '0.75');
       circle.setAttribute('stroke', MARKER_BORDER_COLOR);
       circle.setAttribute('stroke-width', String(1 / transform.scale));
@@ -491,14 +491,14 @@
       >
         <Icon icon={ArrowUUpLeft} />
       </IconButton>
-      <Divider vertical inverse class="!h-5" />
+      <Divider vertical inverse class="h-5!" />
       <Button
         variant="transparent-inverse"
         size="sm"
         onClick={reset}
         disabled={marks.length === 0 || disabled}
         accessibilityLabel="Reset all marks"
-        class="!text-primary-inverse"
+        class="text-primary-inverse!"
       >
         Clear all
       </Button>
@@ -531,7 +531,7 @@
   </div>
 {/snippet}
 
-<div bind:this={container} class="group relative h-full w-full overflow-hidden rounded-lg border">
+<div bind:this={container} class="group relative h-full w-full overflow-hidden rounded-lg border border-static">
   {#if !hideMarkers && !disabled}
     {@render TopLeftActions()}
     {@render ZoomControls()}

package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte

@@ -267,7 +267,7 @@
           circle.setAttribute('cy', String(markY));
           circle.setAttribute('r', String(adjustedMarkerSize));
           circle.setAttribute('fill', resolvedMarkColor);
-          circle.setAttribute('class', 'drop-shadow-sm');
+          circle.setAttribute('class', 'drop-shadow-xs');
           group.appendChild(circle);
 
           const text = document.createElementNS(svgns, 'text');
@@ -298,7 +298,7 @@
         circle.setAttribute('cy', String(markY));
         circle.setAttribute('r', String(adjustedMarkerSize));
         circle.setAttribute('fill', resolvedActiveMarkerColor());
-        circle.setAttribute('class', 'drop-shadow-sm');
+        circle.setAttribute('class', 'drop-shadow-xs');
         group.appendChild(circle);
 
         const text = document.createElementNS(svgns, 'text');
@@ -557,14 +557,14 @@
     >
       <Icon icon={ArrowUUpLeft} />
     </IconButton>
-    <Divider vertical inverse class="!h-4" />
+    <Divider vertical inverse class="h-4!" />
     <Button
       variant="transparent-inverse"
       size="sm"
       onClick={reset}
       disabled={marks.length === 0 || disabled}
       accessibilityLabel="Reset all marks"
-      class="!text-primary-inverse"
+      class="text-primary-inverse!"
     >
       Clear all
     </Button>

package/dist/components/nav/Nav.stories.svelte

@@ -10,7 +10,7 @@
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    title: 'Components/Nav',
+    title: 'Design System/Nav',
     parameters: {
       layout: 'fullscreen',
     },

package/dist/components/nav/Nav.svelte

@@ -111,33 +111,26 @@
 </div>
 
 <style>
-  .nav:hover .nav-toggle {
-      opacity: 1;
-      transition-property: opacity;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      transition-delay: 0s;
-}
+  @reference "../../app.css";
+  .nav {
+    &:hover .nav-toggle {
+      @apply opacity-100 transition-opacity delay-0;
+    }
+  }
 
-  .main-section-wrapper::after {
+  .main-section-wrapper {
+    &::after {
       content: '';
-      pointer-events: none;
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
-      z-index: 10;
-      height: 1.5rem;
-      background: linear-gradient(to bottom, transparent, #f9f9fa);
+      @apply absolute bottom-0 left-0 right-0 h-6 pointer-events-none z-10;
+      background: linear-gradient(to bottom, transparent, var(--color-bg-base, #f9f9fa));
     }
+  }
 
   .section {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-}
+    @apply flex flex-col gap-1;
+  }
 
   .collapsed {
-      width: 3.5rem;
-}
+    @apply w-14;
+  }
 </style>