@reshape-biotech/design-system 2.7.5 → 2.7.6

package/dist/components/banner/Banner.stories.svelte

@@ -46,7 +46,7 @@
 </Story>
 
 <Story name="No toggle" asChild>
-  <Banner type="progress" closable={false}>
+  <Banner type="info" closable={false}>
     {#snippet icon()}
       <Icon size={20} color="icon-blue" weight="bold">
         {#snippet children(props)}
@@ -117,7 +117,7 @@
 
     <div class="space-y-2">
       <h4>Progress</h4>
-      <Banner type="progress">
+      <Banner type="info">
         {#snippet icon()}
           <Icon size={20} color="icon-blue" weight="bold">
             {#snippet children(props)}
@@ -126,7 +126,7 @@
           </Icon>
         {/snippet}
         {#snippet content()}
-          This is a "progress" banner.
+          This is a "info" banner.
         {/snippet}
       </Banner>
     </div>

package/dist/components/banner/Banner.svelte

@@ -5,11 +5,12 @@
   import { Icon } from '../icons/';
 
   interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     show?: boolean;
     closable?: boolean;
     icon?: Snippet;
     content: Snippet;
+    compact?: boolean;
   }
 
   let {
@@ -18,22 +19,27 @@
     closable = true,
     icon,
     content,
+    compact = true,
   }: Props = $props();
 
   const color = {
     neutral: 'neutral',
     success: 'success',
-    progress: 'blue',
+    info: 'blue',
     warning: 'warning',
     error: 'danger',
   }[type];
 </script>
 
 {#if show}
-  <div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
-    <div class="inline-flex w-full items-center justify-start gap-3">
+  <div
+    class="bg-{color} flex min-h-12 w-full items-center justify-between p-2 {compact
+      ? 'rounded-xl'
+      : 'rounded-2xl'}"
+  >
+    <div class="inline-flex w-full items-center justify-start gap-2">
       {#if icon}
-        <div class="flex size-5 items-center justify-center text-icon-{color} ">
+        <div class="flex items-center justify-center px-1 text-icon-{color}">
           {@render icon?.()}
         </div>
       {/if}
@@ -42,7 +48,7 @@
       </div>
     </div>
     {#if closable}
-      <IconButton size="sm" onclick={() => (show = false)}>
+      <IconButton size="sm" onclick={() => (show = false)} variant="transparent" rounded={false}>
         <Icon color="icon-secondary" weight="bold" icon={X} />
       </IconButton>
     {/if}

package/dist/components/banner/Banner.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    type?: 'neutral' | 'success' | 'info' | 'warning' | 'error';
     show?: boolean;
     closable?: boolean;
     icon?: Snippet;
     content: Snippet;
+    compact?: boolean;
 }
 declare const Banner: import("svelte").Component<Props, {}, "show">;
 type Banner = ReturnType<typeof Banner>;

package/dist/components/button/Button.svelte

@@ -119,7 +119,7 @@
 
 .button:disabled {
 
-    border-style: none;
+    border-color: transparent;
 
     background-color: #12192a0A;
 
@@ -331,7 +331,7 @@
 }
   .btn-transparent-inverse:hover {
 
-    background-color: #FFFFFF26
+    background-color: #FFFFFF0D
 }
   .btn-transparent-inverse:active {
 

package/dist/components/card/Card.stories.svelte

@@ -108,7 +108,7 @@
 <Story name="Card nested in CardWrapper" args={{ class: 'w-96' }} asChild>
   <CardWrapper class="w-96" variant="compact">
     {#snippet Header()}
-      <h5>Overview</h5>
+      <h6>Overview</h6>
       <span class="text-sm text-success">Active</span>
     {/snippet}
     {#snippet children()}
@@ -124,7 +124,7 @@
       </Card>
     {/snippet}
     {#snippet Footer()}
-      <p class="py-2 text-xs text-secondary">Last updated 2 hours ago</p>
+      <p class="px-3 py-2 text-xs text-secondary">Last updated 2 hours ago</p>
     {/snippet}
   </CardWrapper>
 </Story>

package/dist/components/card/Card.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-lg border border-static bg-surface shadow-container {additionalClasses}"
+  class="overflow-hidden rounded-[10px] border border-static bg-surface shadow-container {additionalClasses}"
 >
   {#if Header}
     <header

package/dist/components/card/CardWrapper.svelte

@@ -45,7 +45,7 @@
     {@render children()}
   </div>
   {#if Footer}
-    <footer class="flex min-h-8 w-full items-center px-3">
+    <footer class="flex min-h-8 w-full items-center">
       {@render Footer()}
     </footer>
   {/if}
@@ -60,7 +60,7 @@
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
+    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
 }
 
   .wrapper.default {
@@ -80,19 +80,4 @@
 
     padding: 0.125rem
 }
-
-  .wrapper-footer {
-
-    display: flex;
-
-    min-height: 2rem;
-
-    width: 100%;
-
-    align-items: center;
-
-    padding-left: 1rem;
-
-    padding-right: 1rem
-}
 </style>

package/dist/components/input/Input.svelte

@@ -205,7 +205,7 @@ input::placeholder {
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
+    background-color: rgb(249 249 250 / var(--tw-bg-opacity, 1))
 }
 
   .transparent {

package/dist/components/legend/components/legend-root.svelte

@@ -9,9 +9,9 @@
   let { children, items }: Props = $props();
 </script>
 
-<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-base">
+<div class="inline-flex w-full flex-col items-center rounded-xl bg-base">
   <div
-    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-lg [&>*]:border [&>*]:border-static [&>*]:p-1"
+    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-[10px] [&>*]:border [&>*]:border-static [&>*]:p-1"
   >
     {@render children()}
   </div>

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

@@ -545,41 +545,41 @@
 </script>
 
 {#snippet UndoResetControls()}
-  <div class="flex items-center gap-1">
-    <IconButton
-      variant="transparent-inverse"
-      rounded={false}
-      onclick={undo}
-      disabled={marks.length === 0 || disabled}
-      aria-label="Undo last mark"
-    >
-      <Icon icon={ArrowUUpLeft} />
-    </IconButton>
-    <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"
-    >
-      Clear all
-    </Button>
-  </div>
+  {#if marks.length > 0}
+    <div class="flex items-center gap-2">
+      <IconButton
+        variant="transparent-inverse"
+        rounded={false}
+        onclick={undo}
+        disabled={marks.length === 0 || disabled}
+        aria-label="Undo last mark"
+      >
+        <Icon icon={ArrowUUpLeft} />
+      </IconButton>
+      <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"
+      >
+        Clear all
+      </Button>
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet TopLeftActions()}
   {#if activeMarkerName && !hideMarkers && !disabled}
-    <div
-      class="absolute left-2 top-2 z-20 flex w-full max-w-[calc(100%-1rem)] items-center justify-between rounded-lg border border-interactive-inverse bg-base-inverse px-3 py-2"
-    >
-      <div class="flex items-center gap-2">
+    <div class="flex h-10 items-center justify-between rounded-lg px-2 py-2">
+      <div class="flex items-center gap-3">
         <div
           class="flex !h-6 !w-6 shrink-0 items-center justify-center rounded-md"
           style="background-color: {resolvedActiveMarkerColor()}"
         >
-          <Icon size={16} color="primary-inverse" icon={CursorClick} />
+          <Icon color="primary-inverse" icon={CursorClick} />
         </div>
 
         <span class="text-sm text-primary-inverse">
@@ -594,7 +594,7 @@
 
 {#snippet ZoomControls()}
   <div
-    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-md border border-interactive-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+    class="absolute bottom-2 right-2 z-20 flex flex-col items-center gap-1 rounded-xl border border-static-inverse bg-base-inverse p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
   >
     <IconButton
       variant="transparent-inverse"
@@ -617,57 +617,59 @@
   </div>
 {/snippet}
 
-<div
-  bind:this={container}
-  class="group relative h-full w-full overflow-hidden rounded-lg border"
-  data-testid="manual-cfu-counter"
->
+<div class="flex h-full w-full flex-col gap-1 p-1" data-testid="manual-cfu-counter">
   {#if !hideMarkers && !disabled}
     {@render TopLeftActions()}
-    {@render ZoomControls()}
   {/if}
 
-  <!--
-		We need to use SVG for this interactive component.
-		The SVG element is treated as a canvas for clicking, panning, and zooming.
-		We add accessibility attributes to make it more accessible despite the interactive nature.
-	-->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <svg
-    bind:this={svgElement}
-    onclick={handleClick}
-    onmousedown={handleMouseDown}
-    onmousemove={handleMouseMove}
-    onmouseup={handleMouseUp}
-    onmouseleave={handleMouseLeave}
-    oncontextmenu={handleContextMenu}
-    onwheel={handleWheel}
-    class:cursor-grabbing={panningState === 'active'}
-    class:cursor-grab={!disabled && (panningState === 'ready' || (isShiftPressed && !panningState))}
-    class:cursor-not-allowed={disabled}
-    class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
-    class="h-full w-full"
-    role="application"
-    aria-label={disabled
-      ? 'CFU Counter (disabled)'
-      : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
-    tabindex="0"
-  >
-    <g bind:this={viewport} id="viewport" class="h-full w-full">
-      <image href={imageUrl} x="0" y="0" width="100%" />
-      <g
-        bind:this={dotsGroup}
-        id="dots"
-        class="pointer-events-none"
-        aria-hidden={hideMarkers}
-        class:hidden={hideMarkers}
-      />
-    </g>
-  </svg>
-
-  <!-- Debug info for marks count - useful for testing -->
-  <span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  <div bind:this={container} class="group relative flex-1 overflow-hidden rounded-xl bg-black">
+    {#if !hideMarkers && !disabled}
+      {@render ZoomControls()}
+    {/if}
+
+    <!--
+      We need to use SVG for this interactive component.
+      The SVG element is treated as a canvas for clicking, panning, and zooming.
+      We add accessibility attributes to make it more accessible despite the interactive nature.
+    -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <svg
+      bind:this={svgElement}
+      onclick={handleClick}
+      onmousedown={handleMouseDown}
+      onmousemove={handleMouseMove}
+      onmouseup={handleMouseUp}
+      onmouseleave={handleMouseLeave}
+      oncontextmenu={handleContextMenu}
+      onwheel={handleWheel}
+      class:cursor-grabbing={panningState === 'active'}
+      class:cursor-grab={!disabled &&
+        (panningState === 'ready' || (isShiftPressed && !panningState))}
+      class:cursor-not-allowed={disabled}
+      class:cursor-crosshair={!disabled && !panningState && !isShiftPressed}
+      class="h-full w-full focus:outline-none"
+      role="application"
+      aria-label={disabled
+        ? 'CFU Counter (disabled)'
+        : 'CFU Counter - Click to add markers, right click or shift+click to pan'}
+      tabindex="0"
+    >
+      <g bind:this={viewport} id="viewport" class="h-full w-full">
+        <image href={imageUrl} x="0" y="0" width="100%" />
+        <g
+          bind:this={dotsGroup}
+          id="dots"
+          class="pointer-events-none"
+          aria-hidden={hideMarkers}
+          class:hidden={hideMarkers}
+        />
+      </g>
+    </svg>
+
+    <!-- Debug info for marks count - useful for testing -->
+    <span class="sr-only" data-testid="marks-count">{marks.length}</span>
+  </div>
 </div>

package/dist/components/table/Table.svelte

@@ -31,7 +31,7 @@
   };
 </script>
 
-<div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
+<div class="w-full rounded-xl border border-static bg-surface px-5 py-2 shadow-container">
   <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
     {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
   </table>

package/dist/components/tag/Tag.svelte

@@ -35,9 +35,9 @@
   }: Props = $props();
 
   const sizes = {
-    xs: 'h-5 text-xs p-1',
-    sm: 'h-6 text-xs p-1.5',
-    md: 'h-7 text-sm p-2',
+    xs: 'h-5 text-xs p-1 rounded',
+    sm: 'h-6 text-xs p-1.5 rounded',
+    md: 'h-7 text-sm p-2 rounded-md',
   };
   let sizeClassName = $derived(sizes[size]);
 
@@ -115,7 +115,6 @@
     gap: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    border-radius: 0.25rem
+    white-space: nowrap
 }
 </style>

package/dist/components/tooltip/Tooltip.svelte

@@ -50,7 +50,7 @@
         {side}
         {align}
         sideOffset={8}
-        class={`${className} z-50 max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+        class={`${className} z-50 max-w-xs text-wrap rounded-md bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
       >
         {#if content}
           {@render content()}

package/dist/tokens/colors.js

@@ -1,6 +1,6 @@
 export const colors = {
     base: {
-        mist: '#fafafa',
+        mist: '#f9f9fa',
         snow: '#f6f7f7',
         white: {
             default: '#FFFFFF',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",