@w5-ui/svelte 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@w5-ui/assets": "^0.2.1",
-    "@w5-ui/tokens": "^0.7.0"
+    "@w5-ui/tokens": "^0.8.0"
   },
   "devDependencies": {
     "svelte": "^5.56.4",

package/src/lib/components/Badge.svelte

@@ -33,7 +33,7 @@
     // Status-warning is yellow in both motifs; near-black text stays
     // legible against it. `text-neutral-10` resolves to `#0a0a0b`.
     warn: 'bg-status-warning text-neutral-10',
-    info: 'bg-brand-05 text-white',
+    info: 'bg-primary-fill text-primary-fill-fg',
     success: 'bg-status-success text-white',
     neutral: 'bg-status-neutral text-white',
   };

package/src/lib/components/Button.svelte

@@ -47,7 +47,7 @@
   //   ghost:   transparent surface with motif-aware text/border + hover.
   //   danger:  semantic status-danger text + faded border.
   const VARIANT: Record<NonNullable<Props['variant']>, string> = {
-    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-transparent',
+    primary: 'bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-transparent',
     ghost:
       'bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1',
     danger: 'bg-transparent text-status-danger border-status-danger/30',

package/src/lib/components/DatePicker.svelte

@@ -135,7 +135,7 @@
     if (outside) cls += ' text-text-4';
     else cls += ' text-text-2';
     if (isToday && !isSelected) cls += ' ring-1 ring-inset ring-brand-05';
-    if (isSelected) cls += ' bg-brand-05 text-white hover:bg-brand-06';
+    if (isSelected) cls += ' bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover';
     return cls;
   }
 </script>

package/src/lib/components/DateRangePicker.svelte

@@ -137,7 +137,7 @@
     if (outside) cls += ' text-text-4';
     else cls += ' text-text-2';
     if (isTodayDay && !start && !end) cls += ' ring-1 ring-inset ring-brand-05';
-    if (start || end) cls += ' bg-brand-05 text-white hover:bg-brand-06';
+    if (start || end) cls += ' bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover';
     else if (inRange) cls += ' bg-brand-05/20 text-text-1';
     return cls;
   }

package/src/lib/components/NotificationPanel.svelte

@@ -114,7 +114,7 @@
       <h2 id={titleId} class="m-0 flex items-center gap-2 text-15 font-semibold text-text-1">
         Notifications
         {#if unread > 0}
-          <span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-brand-05 px-1.5 text-11 font-bold text-white tabular-nums" aria-label={`${unread} unread`}>{unread}</span>
+          <span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary-fill px-1.5 text-11 font-bold text-primary-fill-fg tabular-nums" aria-label={`${unread} unread`}>{unread}</span>
         {/if}
       </h2>
       <div class="flex items-center gap-1.5">

package/src/lib/components/Pagination.svelte

@@ -29,7 +29,7 @@
 
   const BTN_BASE =
     'inline-flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 text-13 font-medium leading-none text-text-3 transition-[background-color,color,border-color] duration-100 hover:bg-row-hover hover:text-text-1 hover:border-border-2 disabled:cursor-not-allowed disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05';
-  const BTN_ACTIVE = 'bg-brand-05 text-white border-brand-05 hover:bg-brand-06 hover:border-brand-06';
+  const BTN_ACTIVE = 'bg-primary-fill text-primary-fill-fg border-primary-fill hover:bg-primary-fill-hover hover:border-primary-fill-hover';
 </script>
 
 {#if totalPages > 1}

package/src/lib/components/Sidebar.svelte

@@ -60,7 +60,7 @@
             {/if}
             {#if it.pill !== undefined}
               <span
-                class="ml-auto rounded-full bg-brand-05 px-1.5 py-px text-[10px] font-semibold text-white"
+                class="ml-auto rounded-full bg-primary-fill px-1.5 py-px text-[10px] font-semibold text-primary-fill-fg"
               >{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>
             {/if}
           </button>

package/src/lib/components/SkipLink.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <a
-  class="absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-brand-05 px-3 py-2 text-13 font-semibold text-white no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
+  class="absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-primary-fill px-3 py-2 text-13 font-semibold text-primary-fill-fg no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
     {className}"
   {href}
 >

package/src/lib/components/SplitButton.svelte

@@ -77,7 +77,7 @@
 
   // Pre-composed variant chrome so Tailwind's static scanner sees the literals.
   const VARIANT: Record<NonNullable<Props['variant']>, string> = {
-    primary: 'bg-brand-05 text-white hover:bg-brand-06 border-brand-05',
+    primary: 'bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-primary-fill',
     ghost: 'bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1',
     danger: 'bg-transparent text-status-danger border-status-danger/30',
   };

package/src/lib/components/Stepper.svelte

@@ -20,7 +20,7 @@
   //   - label: colour + weight
   //   - connector line (::before via Tailwind arbitrary): bg colour
   const NUM: Record<'active' | 'done' | 'upcoming', string> = {
-    active: 'border-brand-05 bg-brand-05 text-white',
+    active: 'border-primary-fill bg-primary-fill text-primary-fill-fg',
     done: 'border-brand-05 bg-brand-05/[0.18] text-status-info',
     upcoming: 'border-bg-3 bg-bg-1 text-text-4',
   };