@invopop/popui 0.1.15 → 0.1.16

package/dist/BaseDropdown.svelte

@@ -10,6 +10,7 @@
     fullWidth = false,
     placement = 'bottom-end',
     matchParentWidth = false,
+    class: className = '',
     trigger,
     children,
     ...rest
@@ -49,10 +50,9 @@
   }
 </script>
 
-<div class="inline-flex" class:w-full={fullWidth} role="menu">
+<div class="flex {className}" class:w-full={fullWidth} role="menu">
   <button
-    class="cursor-pointer text-left"
-    class:w-full={fullWidth}
+    class="cursor-pointer text-left w-full min-w-0"
     use:floatingRef
     {...rest}
     onclick={handleClick}

package/dist/BaseTable.svelte

@@ -241,7 +241,7 @@
   }}
 />
 
-<div class="h-full w-full font-sans border rounded-md border-border overflow-auto">
+<div class="h-full w-full font-sans rounded-md overflow-auto">
   <Table class="hidden md:table" {...rest}>
     <colgroup>
       {#if selectable}
@@ -261,7 +261,6 @@
           <TableHead class="bg-white sticky top-0 z-10 p-0 h-9">
             {#if !hideSelectAll}
               <BaseTableCheckbox
-                hidden={!selectedRows.length}
                 {indeterminate}
                 checked={allChecked}
                 onChecked={() => {
@@ -293,13 +292,12 @@
             <th
               scope="colgroup"
               colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-white text-left text-sm font-medium text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
+              class="bg-white text-left text-base font-normal text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
             >
               <span
-                class:border-t={i > 0}
-                class:pl-12={selectable}
-                class:pl-3={!selectable}
-                class="flex items-center space-x-1 box-border border-b border-border h-8"
+                class:pl-13={selectable}
+                class:pl-6={!selectable}
+                class="flex items-center space-x-1 box-border border-b border-border h-9"
               >
                 <span>{group.label}</span>
                 {#if !hideCounter}

package/dist/BaseTableActions.svelte

@@ -5,6 +5,7 @@
   import DrawerContext from './DrawerContext.svelte'
   import { Options } from '@invopop/ui-icons'
   import clsx from 'clsx'
+  import BaseButton from './BaseButton.svelte'
 
   let { actions, onclick }: BaseTableActionsProps = $props()
 
@@ -34,10 +35,7 @@
 </script>
 
 {#snippet trigger()}
-  <div class="relative group flex justify-center items-center rounded p-1 cursor-pointer">
-    <span class="{overlayClasses} absolute inset-0 rounded"></span>
-    <Icon src={Options} class="w-4 text-neutral-500" />
-  </div>
+  <BaseButton variant="ghost" aria-label="Row actions" icon={Options} />
 {/snippet}
 
 <BaseDropdown bind:isOpen bind:this={actionDropdown} {trigger}>

package/dist/BaseTableCellContent.svelte

@@ -18,10 +18,10 @@
 </script>
 
 <div class="flex flex-col">
-  <span class="md:hidden text-sm text-neutral-60 font-normal">
+  <span class="md:hidden text-sm font-normal">
     {field.headerLabel}
   </span>
-  <span class="flex items-center" class:justify-end={field.rightAlign}>
+  <span class="flex items-center gap-2" class:justify-end={field.rightAlign}>
     {#if field.isCountry && data}
       <span class="flex items-center space-x-1">
         <BaseFlag country={String(data)} width={16} />
@@ -34,9 +34,7 @@
       <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
     {/if}
     {#if badge}
-      <span class:ml-2={!!data}>
-        <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
-      </span>
+      <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
     {/if}
     {#if status}
       <span class:ml-2={!!data}>

package/dist/BaseTableCheckbox.svelte

@@ -20,16 +20,14 @@
   role="checkbox"
   aria-checked={checked}
   bind:this={checkboxButton}
-  class="absolute inset-0 h-full w-full flex items-center justify-center outline-none group cursor-default"
+  class="h-full w-full flex items-center justify-center outline-none group cursor-default"
   onclick={handleClick}
 >
-  <div class:invisible={hidden} class="group-hover:visible">
-    <InputCheckbox
-      {checked}
-      {indeterminate}
-      onchange={(changed) => {
-        onChecked?.(changed)
-      }}
-    />
-  </div>
+  <InputCheckbox
+    {checked}
+    {indeterminate}
+    onchange={(changed) => {
+      onChecked?.(changed)
+    }}
+  />
 </button>

package/dist/BaseTableHeaderContent.svelte

@@ -29,7 +29,7 @@
   {#if field.sortable}
     {#snippet trigger()}
       <span
-        class="{headerStyles} w-full p-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+        class="{headerStyles} w-full px-3 py-2.5 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
       >
         <span class="w-full" class:text-right={field.rightAlign}>{field.headerLabel}</span>
         {#if sortBy === field.slug}
@@ -59,7 +59,7 @@
     </BaseDropdown>
   {:else}
     <div
-      class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+      class="{headerStyles} px-3 py-2.5 text-left text-base font-normal tracking-normal whitespace-nowrap"
     >
       <div class="h-5">{field.headerLabel}</div>
     </div>

package/dist/BaseTableRow.svelte

@@ -87,19 +87,21 @@
 >
   {#if selectable}
     <TableCell>
-      <BaseTableCheckbox
-        bind:checkboxButton
-        {checked}
-        hidden={selectedRows.length === 0}
-        {onChecked}
-      />
+      <BaseTableCheckbox bind:checkboxButton {checked} {onChecked} />
     </TableCell>
   {/if}
   {#each fields as field, i (i)}
+    {@const extraPaddingLeft = i === 0 && !selectable}
+    {@const extraPaddingRight = i === fields.length - 1 && !actions.length}
     <TableCell
-      class="{i === 0 && !selectable ? 'pl-6' : 'pl-3'}  {i === fields.length - 1 && !actions.length
-        ? 'pr-6'
-        : 'pr-3'}"
+      class={clsx({
+        'font-medium': i === 0,
+        'pl-6': extraPaddingLeft,
+        'pl-3': !extraPaddingLeft,
+        'pr-6': extraPaddingRight,
+        'pr-3': !extraPaddingRight,
+        'py-2': field.copy
+      })}
     >
       <BaseTableCellContent
         {field}
@@ -112,7 +114,7 @@
     </TableCell>
   {/each}
   {#if actions.length}
-    <TableCell>
+    <TableCell class="py-2">
       <BaseTableActions
         bind:this={actionsDropdown}
         {actions}

package/dist/ButtonFile.svelte

@@ -34,7 +34,7 @@
 
 <button
   class={cn(
-    'flex items-center gap-3 px-2 py-1.5 rounded-[10px] w-full hover:bg-background-default-secondary',
+    'flex items-center gap-3 px-2 py-1.5 rounded-[10px] w-full hover:bg-background-default-secondary cursor-pointer',
     disabled && 'opacity-30 pointer-events-none',
     className
   )}

package/dist/ButtonUuidCopy.svelte

@@ -28,9 +28,10 @@
 
 <BaseButton
   {disabled}
-  size="lg"
+  size="sm"
   icon={Duplicate}
   iconPosition="right"
+  variant="ghost"
   onclick={async () => {
     await navigator.clipboard.writeText(uuid)
     oncopied?.(uuid)

package/dist/CardCheckbox.svelte

@@ -31,7 +31,7 @@
   <div class={containerStyles}>
     <div class="flex grow items-start gap-1 min-w-0">
       {#if icon}
-        <Icon src={icon} class="size-5 text-icon shrink-0" />
+        <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" />
       {/if}
       <div class="flex flex-col gap-1 min-w-0">
         <span class="text-base font-medium text-foreground">

package/dist/CardRelation.svelte

@@ -10,13 +10,13 @@
   <button class="flex items-center gap-3 px-3 py-2 w-full cursor-pointer" {onclick}>
     <div class="flex grow items-center gap-1.5 min-w-0">
       {#if icon}
-        <Icon src={icon} class="size-4 text-foreground shrink-0" />
+        <Icon src={icon} class="size-4 text-icon shrink-0" />
       {/if}
       <span class="text-base font-medium text-foreground whitespace-nowrap">
         {title}
       </span>
     </div>
-    <Icon src={ChevronRight} class="size-3 text-foreground shrink-0" />
+    <Icon src={ChevronRight} class="size-3 text-icon shrink-0" />
   </button>
   <div class="flex flex-col gap-2 px-3 pb-3 pt-2">
     {#each items as item}

package/dist/DatePicker.svelte

@@ -120,7 +120,7 @@
     start: undefined,
     end: undefined
   })
-  let isOpen = $state(false)
+  let isOpen = $state(true)
   let styles = $derived(
     clsx({
       'border-border-selected-bold shadow-active': isOpen,
@@ -188,7 +188,7 @@
       onclick={() => {
         isOpen = !isOpen
       }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-md text-foreground placeholder-foreground text-base cursor-pointer"
+      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
     >
       {selectedLabel}
     </button>
@@ -209,21 +209,21 @@
       <div
         class:left-0={position === 'left'}
         class:right-0={position === 'right'}
-        class="bg-white inline-flex flex-col shadow-md rounded-lg absolute right-0 top-2 z-40"
+        class="bg-white inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
         use:clickOutside
         onclick_outside={() => {
           if (!isOpen) return
           cancel()
         }}
       >
-        <div class="flex border-b border-border min-h-[300px] rounded-lg shadow-calendar">
+        <div class="flex border-b border-border min-h-[300px] shadow-calendar">
           <div class="flex flex-col space-y-2 items-start p-3 border-r border-border">
             {#each periods as period}
               <button
                 onclick={period.action}
                 class="{selectedPeriod === period.slug
-                  ? 'selected-period text-foreground-accent bg-foreground-accent/10'
-                  : 'text-foreground-default-secondary'} whitespace-nowrap text-base px-2 py-1 tracking-normal rounded cursor-pointer"
+                  ? 'selected-period text-foreground-selected bg-background-selected font-medium'
+                  : 'text-foreground-default-secondary'} whitespace-nowrap text-base px-2 py-1 tracking-normal rounded-md cursor-pointer"
               >
                 {period.label}
               </button>
@@ -232,8 +232,10 @@
           <RangeCalendar bind:value numberOfMonths={2} />
         </div>
         <div class="p-3 flex justify-end items-center space-x-3">
-          <BaseButton variant="secondary" onclick={cancel}>Cancel</BaseButton>
-          <BaseButton variant="primary" onclick={confirm} disabled={!value.end}>Confirm</BaseButton>
+          <BaseButton variant="secondary" size="lg" onclick={cancel}>Cancel</BaseButton>
+          <BaseButton variant="primary" size="lg" onclick={confirm} disabled={!value.end}
+            >Confirm</BaseButton
+          >
         </div>
       </div>
     </Transition>

package/dist/DrawerContext.svelte

@@ -68,8 +68,18 @@
   }
 </script>
 
+{#snippet drawerItem(item: DrawerOption)}
+  {#if item.separator}
+    <DrawerContextSeparator />
+  {:else}
+    <div class:px-1={!item.groupBy}>
+      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
+    </div>
+  {/if}
+{/snippet}
+
 <div
-  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white overflow-hidden flex flex-col"
+  class="{widthClass} border border-border rounded-2xl shadow-lg bg-white overflow-hidden flex flex-col py-1 max-h-[400px] overflow-y-auto"
 >
   {@render children?.()}
 
@@ -77,9 +87,9 @@
     {#each groups as group, index}
       {@const groupItems = groupedItems.get(group.slug) || []}
       {@const isLastGroup = index === groups!.length - 1}
-      <div class="flex-shrink-0 {!isLastGroup ? 'border-b border-border' : ''}">
+      <div class="flex-shrink-0 px-1">
         <button
-          class="cursor-pointer flex items-center justify-between h-9 pl-3 pr-2.5 py-2.5 text-sm font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip"
+          class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip"
           onclick={() => toggleGroup(group.slug)}
         >
           <div class="flex items-center gap-1.5">
@@ -111,32 +121,23 @@
             {:else}
               <div class="max-h-[400px] overflow-y-auto">
                 {#each groupItems as item}
-                  {#if item.separator}
-                    <DrawerContextSeparator />
-                  {:else}
-                    <div class="px-1">
-                      <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
-                    </div>
-                  {/if}
+                  {@render drawerItem(item)}
                 {/each}
               </div>
             {/if}
           </div>
         {/if}
       </div>
+      {#if !isLastGroup}
+        <DrawerContextSeparator />
+      {/if}
     {/each}
   {/if}
 
   {#if ungroupedItems.length}
-    <div class="flex-shrink-0 max-h-[400px] overflow-y-auto">
+    <div class="flex-shrink-0">
       {#each ungroupedItems as item}
-        {#if item.separator}
-          <DrawerContextSeparator />
-        {:else}
-          <div class="px-1">
-            <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
-          </div>
-        {/if}
+        {@render drawerItem(item)}
       {/each}
     </div>
   {/if}

package/dist/DrawerContextItem.svelte

@@ -21,9 +21,7 @@
 
   let styles = $derived(
     clsx(
-      'py-1.5 space-x-1.5',
-      { 'pl-1.5': !item.icon },
-      { 'pl-2': item.icon },
+      'px-2 py-1.5 space-x-1.5',
       { 'bg-background-selected': item.selected && !multiple },
       {
         'group-hover:bg-background-default-secondary':
@@ -57,11 +55,11 @@
 
 <button
   bind:this={el}
-  class="cursor-pointer w-full py-0.5 disabled:opacity-30 group"
+  class="cursor-pointer w-full disabled:opacity-30 group"
   disabled={item.disabled}
   onclick={handleClick}
 >
-  <div class="{styles} rounded pr-2 flex items-center justify-start w-full">
+  <div class="{styles} rounded-md pr-2 flex items-center justify-start w-full">
     {#if item.icon}
       <Icon
         src={item.icon}

package/dist/DrawerContextSeparator.svelte

@@ -1 +1 @@
-<li class="bg-border h-px w-full"></li>
+<li class="bg-border h-px w-full my-1"></li>

package/dist/DropdownSelect.svelte

@@ -44,7 +44,7 @@
     (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-neutral-500'
   )
   let selectedLabel = $derived(
-    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more...' : ''}` ||
+    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more and more and more and more and more and more' : ''}` ||
       placeholder
   )
 
@@ -75,23 +75,31 @@
   }
 </script>
 
-<BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
+{#snippet label()}
+  <span
+    class="flex-1 text-base truncate {selectedItems.length
+      ? 'text-foreground'
+      : 'text-foreground-default-secondary'}"
+  >
+    {selectedLabel}
+  </span>
+{/snippet}
+
+<BaseDropdown
+  bind:isOpen
+  placement="bottom-start"
+  {fullWidth}
+  bind:this={selectDropdown}
+  class={fullWidth ? '' : widthClass}
+>
   {#snippet trigger()}
     <div
-      class="{styles} dropdown-select flex items-center rounded-lg py-1.5 px-2 bg-background whitespace-nowrap {fullWidth
-        ? 'w-full'
-        : widthClass}"
+      class="{styles} dropdown-select flex items-center rounded-lg py-1.5 pl-2 pr-[28px] bg-background overflow-hidden w-full h-8"
     >
       {#if selectedColor}
         <div class="flex items-center gap-1 flex-1 min-w-0">
           <TagStatus dot status={selectedColor} />
-          <span
-            class="flex-1 text-sm truncate {selectedItems.length
-              ? 'text-foreground'
-              : 'text-foreground-default-secondary'}"
-          >
-            {selectedLabel}
-          </span>
+          {@render label()}
         </div>
       {:else if selectedIcon || resolvedIcon}
         <div class="flex items-center gap-1 flex-1 min-w-0">
@@ -100,22 +108,10 @@
           {:else if resolvedIcon}
             <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
           {/if}
-          <span
-            class="flex-1 text-sm truncate {selectedItems.length
-              ? 'text-foreground'
-              : 'text-foreground-default-secondary'}"
-          >
-            {selectedLabel}
-          </span>
+          {@render label()}
         </div>
       {:else}
-        <span
-          class="flex-1 text-sm truncate {selectedItems.length
-            ? 'text-foreground'
-            : 'text-foreground-default-secondary'}"
-        >
-          {selectedLabel}
-        </span>
+        {@render label()}
       {/if}
     </div>
   {/snippet}

package/dist/EmptyState.svelte

@@ -14,7 +14,7 @@
   }: EmptyStateProps = $props()
 </script>
 
-<div class="flex flex-col items-center justify-center gap-4">
+<div class="flex flex-col items-center justify-center">
   {#if icon}
     <div class="relative h-[120px] w-[352px] max-w-sm flex items-center justify-center">
       {@render icon()}
@@ -35,6 +35,8 @@
     <p class="text-foreground-default-secondary text-base">{description}</p>
   </div>
   {#if children}
-    {@render children()}
+    <div class="mt-4">
+      {@render children()}
+    </div>
   {/if}
 </div>

package/dist/FeedIconStatus.svelte

@@ -24,7 +24,7 @@
 
 {#if iconStatus}
   <div title={status}>
-    <Icon src={iconStatus} class="h-4 w-4 shrink-0" />
+    <Icon src={iconStatus} class="h-4 w-4 shrink-0 text-icon" />
   </div>
 {:else}
   <div class="w-4 h-4 shrink-0 bg-neutral-200 rounded-full"></div>

package/dist/FeedItemDetail.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from 'clsx'
   import type { FeedItemDetailProps } from './types.ts'
   import FeedIconStatus from './FeedIconStatus.svelte'
   import UuidCopy from './UuidCopy.svelte'
@@ -20,10 +21,16 @@
   }: FeedItemDetailProps = $props()
 
   let open = $state(false)
+  let styles = $derived(
+    clsx('pl-3 flex items-center space-x-1.5', {
+      'pr-3 py-2.5': !cancelable,
+      'py-2 pr-2': cancelable
+    })
+  )
 </script>
 
 <div class="w-full rounded-lg border border-border">
-  <div class="px-3 py-2.5 flex items-center space-x-1.5">
+  <div class={styles}>
     {#if status}
       <FeedIconStatus {status} />
     {/if}

package/dist/InputRadio.svelte

@@ -33,7 +33,7 @@
     {name}
     {checked}
     {disabled}
-    class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-foreground-selected cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed disabled:border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border"
+    class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border"
     {...rest}
     onchange={updateInput}
   />

package/dist/InputSearch.svelte

@@ -67,7 +67,7 @@
     bind:this={input}
     bind:value
     type="search"
-    class="flex items-center gap-1 h-8 w-full px-2 py-1.5 pl-7 rounded-lg border bg-background-default-default text-base text-foreground-default-default placeholder:text-foreground-default-tertiary outline-none caret-workspace-accent focus:ring-0 border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active"
+    class="flex items-center gap-1 h-8 w-full px-2 py-1.5 pl-7 rounded-lg border bg-background-default-default text-base text-foreground-default-default placeholder:text-foreground-default-tertiary outline-none caret-foreground-accent focus:ring-0 border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active"
     style:padding-right={shortcut ? `${shortcutKeys.length * 20 + 12}px` : undefined}
     {placeholder}
     {...rest}

package/dist/InputText.svelte

@@ -32,7 +32,7 @@
 
   let inputStyles = $derived(
     clsx(
-      'h-8 w-full rounded-lg border px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px]',
+      'h-8 w-full rounded-lg border px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px] caret-foreground-accent',
       'placeholder:text-foreground-default-tertiary',
       'outline-none focus:ring-0',
       {
@@ -40,7 +40,7 @@
           disabled
       },
       {
-        'text-foreground-critical border-border-critical-bold': errorText
+        'text-foreground-critical border-border-critical-bold caret-foreground-critical': errorText
       },
       {
         'text-foreground border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':

package/dist/InputTextarea.svelte

@@ -18,12 +18,12 @@
 
   let inputStyles = $derived(
     clsx(
-      'w-full rounded-lg border px-2 py-1.5 text-base tracking-tight bg-background backdrop-blur-[2px] placeholder:text-foreground-default-tertiary outline-none focus:ring-0',
+      'w-full rounded-lg border px-2 py-1.5 text-base tracking-tight bg-background backdrop-blur-[2px] placeholder:text-foreground-default-tertiary outline-none focus:ring-0 caret-foreground-accent',
       {
         'pointer-events-none bg-background-default-secondary border-border': disabled
       },
       {
-        'text-foreground-critical border-border-critical-bold': errorText
+        'text-foreground-critical border-border-critical-bold caret-foreground-critical': errorText
       },
       {
         'text-foreground border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':

package/dist/MenuItem.svelte

@@ -36,15 +36,16 @@
   let leaveHoverTimeout: ReturnType<typeof setTimeout> | null = null
   let itemStyles = $derived(
     clsx(
-      { 'text-white font-medium': !isFolderItem },
-      { 'text-white-40': isFolderItem && !active },
-      { 'bg-white-10': active },
-      { 'border border-transparent hover:border-white-5 group p-2': collapsedSidebar },
+      { 'text-foreground-inverse font-medium': !isFolderItem },
+      { 'text-foreground-inverse-secondary': isFolderItem && !active },
+      {
+        'border border-transparent hover:bg-background-selected-inverse group p-2': collapsedSidebar
+      },
       { 'w-full px-2 py-1.5': !collapsedSidebar },
       {
-        'bg-white-10 border-white-5 text-white': active
+        'bg-background-selected-inverse text-white': active
       },
-      { 'hover:bg-white-5 focus:bg-white-10': !active }
+      { 'hover:bg-background-selected-inverse': !active }
     )
   )
   let iconStyles = $derived(clsx({ 'group-hover:text-white': collapsedSidebar }))
@@ -106,9 +107,9 @@
     onmouseleave={handleBlur}
     onclick={handleClick}
     title={label}
-    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
+    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg h-8"
   >
-    <span class="flex items-center space-x-2">
+    <span class="flex items-center space-x-1.5">
       {#if resolvedIcon}
         <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-white-70" />
       {/if}

package/dist/MenuItemCollapsible.svelte

@@ -17,16 +17,16 @@
     clsx(
       { 'p-1': collapsed },
       { 'space-x-2 w-full p-[7px]': !collapsed },
-      { 'border-white-30 bg-white-10': active },
-      { 'border-transparent hover:bg-white-5': !active },
-      { 'font-semibold': bold }
+      { 'bg-selected-inverse': active },
+      { 'hover:bg-background-selected-inverse': !active },
+      { 'font-medium': bold }
     )
   )
 </script>
 
 <span
   {title}
-  class="{styles} text-white text-base flex items-center justify-between border rounded"
+  class="{styles} text-foreground-inverse text-base flex items-center justify-between rounded-lg h-8"
 >
   <span class:space-x-2={!collapsed} class="flex items-center">
     {@render children?.()}

package/dist/Notification.svelte

@@ -24,13 +24,16 @@
   })
 
   let containerStyles = $derived(
-    clsx('flex items-center gap-1.5 px-3 py-2 rounded-xl', {
-      'bg-background border border-border': type === 'neutral',
+    clsx('flex items-center gap-1.5 pl-3 rounded-xl', {
+      'py-1.5': children,
+      'py-2': !children,
+      'bg-background border border-border shadow-sm': type === 'neutral',
       'bg-background-info': type === 'info',
       'bg-background-success': type === 'success',
       'bg-background-warning': type === 'warning',
       'bg-background-critical': type === 'error',
-      'min-h-9 rounded-[10px] pl-3 pr-1.5 py-1.5': !description
+      'pr-3': description,
+      'min-h-9 rounded-[10px] pl-3 py-1.5 pr-1.5': !description
     })
   )
 
@@ -45,7 +48,8 @@
   )
 
   let iconStyles = $derived(
-    clsx('size-4 mt-0.5', {
+    clsx('size-4', {
+      'mt-0.5': description,
       'text-icon': type === 'neutral',
       'text-icon-info': type === 'info',
       'text-icon-success': type === 'success',
@@ -56,7 +60,7 @@
 </script>
 
 <div class={containerStyles}>
-  <div class="flex items-start self-stretch">
+  <div class:items-start={description} class:items-center={!description} class="flex self-stretch">
     <div class="relative size-4 shrink-0">
       {#if icon}
         <Icon src={icon} class={iconStyles} />

package/dist/ProfileAvatar.svelte

@@ -15,14 +15,16 @@
 
   let containerStyles = $derived(
     clsx(
-      'border overflow-clip relative flex items-center justify-center',
+      'overflow-clip relative flex items-center justify-center after:content-[""] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit]',
       { 'size-4 rounded': variant === 'xs' },
       { 'size-5 rounded-md': variant === 'sm' },
       { 'size-7 rounded-md': variant === 'md' },
       { 'size-8 rounded-lg': variant === 'lg' },
       { 'size-10 rounded-lg': variant === 'xl' },
-      { 'bg-background-default-default border-border-default-default': !dark },
-      { 'border-border-inverse-default': dark }
+      {
+        'bg-background after:shadow-avatar': !dark
+      },
+      { 'border-border-inverse after:shadow-avatar-inverse': dark }
     )
   )
 

package/dist/ShortcutWrapper.svelte

@@ -8,9 +8,9 @@
     clsx('inline-flex items-center justify-center border', {
       'size-4 rounded': size === 'sm',
       'size-5 rounded-md': size === 'md',
-      'bg-background-default-secondary border-border-default-secondary shadow-[0px_1px_0px_rgba(0,0,0,0.06)] text-foreground-default-secondary':
+      'bg-background-default-secondary border-border-default-secondary shadow-[0px_1px_0px_#DFE0E6] text-foreground-default-secondary':
         theme === 'light',
-      'bg-background-inverse-secondary border-border-inverse-secondary shadow-[0px_1px_0px_rgba(255,255,255,0.25)] text-foreground-inverse-secondary':
+      'bg-background-inverse-secondary border-border-inverse-secondary shadow-[0px_1px_0px_rgba(255,255,255,0.20)] text-foreground-inverse-secondary':
         theme === 'navigation'
     })
   )

package/dist/StepIconList.svelte

@@ -9,13 +9,17 @@
   let restIcons = $derived(icons.slice(maxItems, icons.length))
 </script>
 
+{#snippet separator()}
+  <div class="hidden sm:block h-px w-3 bg-border shrink-0"></div>
+{/snippet}
+
 <TooltipProvider>
   <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
     {#each mainIcons as icon, i (i)}
       <Tooltip>
         <TooltipTrigger class="shrink-0">
           <div
-            class="p-1.5 border rounded-md border-border flex items-center space-x-1 bg-background text-icon"
+            class="p-1.5 rounded-md border border-border flex items-center space-x-1 bg-background text-icon"
           >
             <img src={icon.url} alt={icon.name} class="size-4" />
           </div>
@@ -24,11 +28,11 @@
       </Tooltip>
 
       {#if i < mainIcons.length - 1}
-        <div class="hidden sm:block h-px w-3 border border-border mx-px shrink-0"></div>
+        {@render separator()}
       {/if}
     {/each}
     {#if restIcons.length}
-      <div class="hidden sm:block h-px w-3 border border-border mx-px shrink-0"></div>
+      {@render separator()}
       <Tooltip>
         <TooltipTrigger class="shrink-0">
           <div class="flex items-center justify-center text-icon font-medium text-base size-7">

package/dist/TagStatus.svelte

@@ -5,24 +5,27 @@
   let { label = '', status = 'grey', dot = false }: TagStatusProps = $props()
 
   let tagStyles = $derived(
-    clsx('rounded inline-flex items-center text-xs font-medium gap-1 box-border leading-4 py-0.5', {
-      'bg-background-status-paid text-foreground-status-paid': status === 'green',
-      'bg-background-status-processing text-foreground-status-processing': status === 'yellow',
-      'bg-background-status-error text-foreground-status-error': status === 'red',
-      'bg-background-status-draft text-foreground-status-draft': status === 'orange',
-      'bg-background-status-sent text-foreground-status-sent': status === 'blue',
-      'bg-background-status-registered text-foreground-status-registered': status === 'purple',
-      'bg-background-status-completed text-foreground-status-completed': status === 'teal',
-      'bg-background-status-received text-foreground-status-received': status === 'steelBlue',
-      'bg-background-status-rejected text-foreground-status-rejected': status === 'crimson',
-      'bg-sherwood-alpha-10 text-sherwood-60': status === 'olive',
-      'bg-background-status-void text-foreground-default-secondary': status === 'grey',
-      'border border-dashed border-border-default-secondary text-foreground-default-secondary':
-        status === 'empty',
-      'px-1.5': dot,
-      'p-1!': dot && !label,
-      'px-1': !dot
-    })
+    clsx(
+      'rounded inline-flex items-center text-xs font-medium gap-1 box-border leading-4 py-0.5 h-5',
+      {
+        'bg-background-status-paid text-foreground-status-paid': status === 'green',
+        'bg-background-status-processing text-foreground-status-processing': status === 'yellow',
+        'bg-background-status-error text-foreground-status-error': status === 'red',
+        'bg-background-status-draft text-foreground-status-draft': status === 'orange',
+        'bg-background-status-sent text-foreground-status-sent': status === 'blue',
+        'bg-background-status-registered text-foreground-status-registered': status === 'purple',
+        'bg-background-status-completed text-foreground-status-completed': status === 'teal',
+        'bg-background-status-received text-foreground-status-received': status === 'steelBlue',
+        'bg-background-status-rejected text-foreground-status-rejected': status === 'crimson',
+        'bg-sherwood-alpha-10 text-sherwood-60': status === 'olive',
+        'bg-background-status-void text-foreground-default-secondary': status === 'grey',
+        'border border-dashed border-border-default-secondary text-foreground-default-secondary':
+          status === 'empty',
+        'px-1.5': dot,
+        'p-1!': dot && !label,
+        'px-1': !dot
+      }
+    )
   )
 
   let dotStyles = $derived(

package/dist/button/button.svelte

@@ -5,27 +5,27 @@
   import type { IconSource } from '@steeze-ui/svelte-icon'
 
   export const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden',
+    base: 'inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer',
     variants: {
       variant: {
         primary:
-          'bg-background-accent text-foreground-inverse border border-border-accent shadow-button-default hover:bg-background-accent-hover active:bg-background-accent-press active:shadow-button-pressed [&_svg]:text-icon-inverse',
+          'bg-background-accent text-foreground-inverse border border-border shadow-button-primary hover:bg-background-accent-hover active:bg-background-accent-hover active:shadow-button-pressed [&_svg]:text-icon-inverse',
         danger:
           'bg-background-default-tertiary text-foreground-critical border border-border shadow-button-default hover:bg-background-critical-bold hover:text-foreground-inverse hover:border-background-critical-bold active:bg-background-critical-bold active:text-foreground-inverse active:border-background-critical-bold active:shadow-[0px_4px_4px_-1px_inset_rgba(11,11,16,0.16)] [&_svg]:text-icon-critical hover:[&_svg]:text-icon-inverse active:[&_svg]:text-icon-inverse',
         outline:
-          'bg-background text-foreground border border-border shadow-button-default hover:border-border-default-secondary-hover active:bg-background-default-secondary active:shadow-button-pressed [&_svg]:text-icon',
+          'bg-background text-foreground border border-border-default-secondary shadow-button-default hover:border-border-default-secondary-hover active:shadow-button-pressed [&_svg]:text-icon',
         ghost:
-          'bg-transparent text-foreground hover:bg-background-default-secondary active:bg-background-default-tertiary [&_svg]:text-icon',
+          'bg-transparent text-foreground hover:shadow-button-default active:shadow-button-pressed hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover [&_svg]:text-icon',
         secondary:
-          'bg-background-default-tertiary text-foreground border border-border shadow-button-default hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-press active:shadow-button-pressed [&_svg]:text-icon',
+          'bg-background-default-tertiary text-foreground shadow-button-default hover:bg-background-default-tertiary-hover active:bg-background-default-tertiary-hover active:shadow-button-pressed [&_svg]:text-icon',
         default:
           'bg-background text-foreground border border-border shadow-button-default hover:bg-background-default-secondary active:bg-background-default-tertiary active:shadow-button-pressed [&_svg]:text-icon',
-        dark: 'bg-transparent text-foreground-inverse border border-border-inverse hover:bg-background-inverse-secondary active:bg-background-inverse-tertiary [&_svg]:text-icon-inverse'
+        dark: 'bg-transparent text-foreground-inverse border border-border-inverse-secondary hover:bg-background-selected-inverse active:bg-background-inverse-tertiary active:shadow-button-dark-pressed [&_svg]:text-icon-inverse'
       },
       size: {
-        sm: 'h-6',
-        md: 'h-7',
-        lg: 'h-8'
+        sm: 'h-6 rounded-sm',
+        md: 'h-7 rounded-md',
+        lg: 'h-8 rounded-lg'
       },
       iconOnly: {
         true: '',
@@ -105,11 +105,26 @@
         variant: 'dark',
         iconOnly: true,
         class: '[&_svg]:!text-icon-inverse-bold'
+      },
+      {
+        size: 'sm',
+        iconOnly: true,
+        class: 'w-6'
+      },
+      {
+        size: 'md',
+        iconOnly: true,
+        class: 'w-7'
+      },
+      {
+        size: 'lg',
+        iconOnly: true,
+        class: 'w-8'
       }
     ],
     defaultVariants: {
       variant: 'primary',
-      size: 'lg',
+      size: 'md',
       iconOnly: false,
       hasIcon: false
     }

package/dist/button/button.svelte.d.ts

@@ -25,7 +25,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden", {
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", {
     variant: {
         primary: string;
         danger: string;
@@ -71,7 +71,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden", unknown, unknown, undefined>>;
+}, undefined, "inline-flex items-center justify-center font-medium text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-workspace-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 relative overflow-hidden box-border cursor-pointer", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
 export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/index.d.ts

@@ -67,7 +67,7 @@ import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import UuidCopy from './UuidCopy.svelte';
-import { resolveIcon } from './helpers.js';
-import { getCountryName } from './helpers.js';
-import { getStatusType } from './helpers.js';
+import { resolveIcon } from './helpers.ts';
+import { getCountryName } from './helpers.ts';
+import { getStatusType } from './helpers.ts';
 export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -64,7 +64,7 @@ import TitleSection from './TitleSection.svelte'
 import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 import UuidCopy from './UuidCopy.svelte'
-import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
+import { resolveIcon, getCountryName, getStatusType } from './helpers.ts'
 
 export {
   AlertDialog,

package/dist/range-calendar/range-calendar-day.svelte

@@ -13,7 +13,7 @@
   bind:ref
   class={cn(
     buttonVariants({ variant: 'ghost' }),
-    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-[4px]',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg',
     // today
     '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
     // range Start

package/dist/sonner/sonner.svelte

@@ -14,28 +14,26 @@
     unstyled: true,
     classes: {
       toast:
-        'group toast bg-neutral-800 border-0 rounded-lg text-white flex gap-2 items-start py-2 px-3 w-[336px]',
-      title: 'font-medium text-sm leading-5 tracking-tight text-white',
-      description: 'font-normal text-sm leading-5 tracking-tight text-white/70',
+        'group toast bg-background-default-negative border-0 rounded-lg text-foreground-inverse flex gap-2 items-start pl-3 pr-2 py-2 w-[336px] [&>[data-content]]:flex-1',
+      title: 'font-medium text-base text-foreground-inverse',
+      description: 'font-normal text-base text-foreground-inverse-secondary',
       actionButton:
-        'bg-white/10 rounded px-2 py-1 text-xs font-medium text-white leading-4 hover:bg-white/15 transition-colors',
-      cancelButton:
-        'bg-white/10 rounded px-2 py-1 text-xs font-medium text-white leading-4 hover:bg-white/15 transition-colors',
+        'bg-background-selected-inverse rounded px-2 py-1 text-xs font-medium text-foreground-inverse hover:bg-background-selected-inverse-hover transition-colors',
       closeButton: 'hidden'
     }
   }}
   {...restProps}
 >
   {#snippet successIcon()}
-    <Icon src={Success} class="w-4 h-4 text-positive-500" />
+    <Icon src={Success} class="size-4 mt-0.5" />
   {/snippet}
 
   {#snippet errorIcon()}
-    <Icon src={Failure} class="w-4 h-4 text-danger-500" />
+    <Icon src={Failure} class="size-4 mt-0.5" />
   {/snippet}
 
   {#snippet infoIcon()}
-    <Icon src={Info} class="w-4 h-4 text-white" />
+    <Icon src={Info} class="size-4 mt-0.5 text-icon-inverse" />
   {/snippet}
 </Sonner>
 

package/dist/table/table-cell.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-3 pl-3 pr-3 align-middle text-foreground-default-secondary font-normal text-base [&:has([role=checkbox])]:pr-2 [&:has([role=menu])]:pl-1 relative z-1',
+    'py-3 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1',
     className
   )}
   onclick={bubble('click')}

package/dist/table/table-head.svelte

@@ -12,7 +12,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-neutral-60 text-base font-normal p-3 text-left align-middle [&:has([role=checkbox])]:pr-0',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:pr-0 px-3',
     className
   )}
 >

package/dist/table/table-row.svelte

@@ -18,7 +18,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'data-[state=selected]:bg-neutral-5 data-[state=checked]:bg-workspace-accent-50 transition-colors',
+    'data-[state=selected]:bg-neutral-5 data-[state=checked]:bg-workspace-accent-50 transition-colors border-b border-border h-10',
     className
   )}
   {oncontextmenu}

package/dist/tabs/tabs-list.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
   import { Tabs as TabsPrimitive } from 'bits-ui'
   import { cn } from '../utils.js'
-  let { ref = $bindable(null), class: className, children }: TabsPrimitive.ListProps = $props()
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant
+  }: TabsPrimitive.ListProps & { variant?: 'md' | 'lg' } = $props()
 </script>
 
 <TabsPrimitive.List
   bind:ref
   data-slot="tabs-list"
   class={cn(
-    'bg-background-default-secondary border border-border text-base text-foreground inline-flex h-7 items-center justify-center rounded-md p-0.5 w-full',
+    'bg-background-default-tertiary text-base text-foreground inline-flex items-center justify-center p-0.5 w-full',
+    variant === 'lg' ? 'rounded-lg h-8' : 'rounded-md h-7',
     className
   )}
 >

package/dist/tabs/tabs-list.svelte.d.ts

@@ -1,4 +1,7 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: 'md' | 'lg';
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/tabs/tabs-trigger.svelte

@@ -5,8 +5,9 @@
     ref = $bindable(null),
     class: className,
     children,
-    value
-  }: TabsPrimitive.TriggerProps = $props()
+    value,
+    variant
+  }: TabsPrimitive.TriggerProps & { variant?: 'md' | 'lg' } = $props()
 </script>
 
 <TabsPrimitive.Trigger
@@ -14,7 +15,8 @@
   {value}
   data-slot="tabs-trigger"
   class={cn(
-    'data-[state=active]:bg-white inline-flex items-center justify-center whitespace-nowrap rounded px-3 py-0.5 text-base font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm w-full cursor-pointer',
+    'data-[state=active]:bg-white inline-flex items-center justify-center whitespace-nowrap px-3 py-0.5 text-base font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm w-full cursor-pointer h-full',
+    variant === 'lg' ? 'rounded-md' : 'rounded',
     className
   )}
 >

package/dist/tabs/tabs-trigger.svelte.d.ts

@@ -1,4 +1,7 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type $$ComponentProps = TabsPrimitive.TriggerProps & {
+    variant?: 'md' | 'lg';
+};
+declare const TabsTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;
 export default TabsTrigger;

package/dist/tailwind.theme.css

@@ -95,6 +95,14 @@
   --color-white-80: rgba(255, 255, 255, 0.8);
   --color-white-90: rgba(255, 255, 255, 0.9);
 
+  /* DEFAULT: 'var(--workspace-accent-color, #169958)',
+          50: 'color-mix(in lab, transparent 95%, var(--workspace-accent-color, #169958))',
+          100: 'color-mix(in lab, transparent 90%, var(--workspace-accent-color, #169958))',
+          200: 'color-mix(in lab, transparent 80%, var(--workspace-accent-color, #169958))',
+          500: 'var(--workspace-accent-color, #169958)',
+          600: 'color-mix(in lab, black 16%, var(--workspace-accent-color, #169958))',
+          700: 'color-mix(in lab, black 32%, var(--workspace-accent-color, #169958))' */
+
   /* Green */
   --color-green-10: #f5faf8;
   --color-green-20: #cce7dc;
@@ -366,7 +374,7 @@
      SEMANTIC COLORS
      ============================================ */
 
-  /* Accen */
+  /* Accent */
   --color-accent-40: var(--color-green-40);
   --color-accent-50: var(--color-green-50);
   --color-accent-60: var(--color-green-60);
@@ -771,10 +779,14 @@
   --shadow-sm:  0 2px 20px 0 rgba(10, 10, 10, 0.04);
   --shadow-lg:  0 8px 30px 0 rgba(10, 10, 10, 0.12);
   --shadow-xl:  0 8px 28px -6px rgba(10, 10, 10, 0.12), 0 18px 88px -4px rgba(10, 10, 10, 0.14);
-  --shadow-active: 0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--workspace-accent-color, var(--color-positive-50)));
+  --shadow-active: 0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--color-background-accent-default, var(--color-positive-50)));
   --shadow-warning: 0px 0px 0px 2px rgba(215, 135, 0, 0.12);
   --shadow-button-default: 0 2px 6px -1px rgba(11, 11, 16, 0.04), 0 -2px 4px 0 rgba(11, 11, 16, 0.04) inset;
-  --shadow-button-pressed: 0 4px 4px -1px rgba(11, 11, 16, 0.16) inset;
+  --shadow-button-primary: 0 -4px 4px 0 rgba(11, 11, 16, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 4px -1px rgba(11, 11, 16, 0.08);
+  --shadow-button-pressed: 0 2px 6px 0 rgba(11, 11, 16, 0.16) inset, 0 -2px 5px -2px rgba(255, 255, 255, 0.25) inset;
+  --shadow-button-dark-pressed: 0 4px 4px -1px rgba(11, 11, 16, 0.16) inset;
+  --shadow-avatar: 0 0 0 1px rgba(5, 5, 36, 0.06) inset;
+  --shadow-avatar-inverse: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
 
   /* Letter Spacing (tracking) */
   --tracking-tightest: -0.29px; /* -1.2% (text-2xl) */
@@ -854,7 +866,7 @@
 
     /* Background */
     --color-background-default-default: var(--color-neutral-100);
-    --color-background-default-secondary: var(--color-neutral-white-alpha-10);
+    --color-background-default-secondary: var(--color-neutral-white-alpha-5);
     --color-background-default-tertiary: var(--color-neutral-white-alpha-10);
     --color-background-default-tertiary-hover: var(--color-neutral-white-alpha-20);
     --color-background-default-tertiary-press: var(--color-neutral-white-alpha-30);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",