@invopop/popui 0.1.13 → 0.1.15

package/dist/FeedEvents.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
+  import SeparatorHorizontal from './SeparatorHorizontal.svelte'
   import TagStatus from './TagStatus.svelte'
   import type { FeedEventsProps } from './types.js'
 
   let { events = [] }: FeedEventsProps = $props()
 </script>
 
-<div class="border border-neutral-100 bg-neutral-50 rounded">
+<div class="border border-border bg-background-default-secondary rounded">
   {#each events as event, i (i)}
-    <div class:border-t={i > 0} class="border-neutral-100 py-2 px-3">
+    {#if i > 0}
+      <SeparatorHorizontal />
+    {/if}
+    <div class="py-2 px-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center space-x-2">
           <TagStatus status={event.status.type} label={event.status.label} />
           {#if event.code}
-            <p class="text-sm text-neutral-500 font-mono tracking-wide">
+            <p class="text-sm text-foreground-default-secondary font-mono">
               {event.code}
             </p>
           {/if}
         </div>
-        <p class="text-sm text-neutral-500 font-mono tracking-wide">
+        <p class="text-sm text-foreground-default-secondary font-mono">
           {event.date.toISOString()}
         </p>
       </div>
       {#if event.message}
-        <p class="text-neutral-800 text-sm pt-2 tracking-normal break-words">{event.message}</p>
+        <p class="text-foreground text-sm pt-2 break-words">{event.message}</p>
       {/if}
     </div>
   {/each}

package/dist/FeedIconEvent.svelte

@@ -7,6 +7,6 @@
 
 <div class="relative py-0.5 mt-2">
   {#if icon}
-    <Icon src={icon} theme={iconTheme} class="h-4 w-4 text-neutral-500" />
+    <Icon src={icon} theme={iconTheme} class="size-4 text-icon-default-bold" />
   {/if}
 </div>

package/dist/FeedItem.svelte

@@ -31,7 +31,7 @@
 
 <div id={`feed-item-${slug}`} class="relative text-left w-full min-w-[344px]">
   {#if hasNext && icon}
-    <span class="absolute bottom-[-20px] left-2 border-l border-neutral-100 w-px h-[58px]"></span>
+    <span class="absolute bottom-[-20px] left-2 border-l border-border w-px h-[58px]"></span>
   {/if}
   <div class="flex items-start justify-between space-x-2 py-3">
     <div class="relative">
@@ -39,17 +39,15 @@
         <FeedIconEvent {icon} />
       {/if}
     </div>
-    <div
-      class="flex-1 items-center justify-start pl-2.5 py-2 pr-2 rounded-lg border border-neutral-100"
-    >
+    <div class="flex-1 items-center justify-start pl-2.5 py-2 pr-2 rounded-lg">
       <div
-        class="text-base text-neutral-800 whitespace-nowrap tracking-normal font-medium flex items-center gap-1 {viewable
+        class="text-base text-foreground whitespace-nowrap tracking-normal font-medium flex items-center gap-1 {viewable
           ? 'max-w-[260px]'
           : 'max-w-[320px]'}"
       >
         {#if user}
           <div class="mr-0.5">
-            <ProfileAvatar small {...user} />
+            <ProfileAvatar variant="sm" {...user} />
           </div>
         {/if}
         <p class="truncate" {title}>{title}</p>
@@ -59,7 +57,9 @@
         {/if}
       </div>
       <p
-        class="mt-0.5 flex items-center space-x-2 text-sm text-neutral-500 whitespace-nowrap tabular-nums slashed-zero lining-nums tracking-normal"
+        class="mt-0.5 flex items-center space-x-2 text-sm text-foreground-default-secondary whitespace-nowrap tabular-nums slashed-zero lining-nums tracking-normal {user
+          ? 'ml-[26px]'
+          : ''}"
       >
         {#if date}
           <span>
@@ -78,7 +78,7 @@
   {#if viewable}
     <span class="absolute top-5 right-2">
       <BaseButton
-        small
+        size="sm"
         variant="secondary"
         onclick={() => {
           onView?.(slug)

package/dist/FeedItemDetail.svelte

@@ -5,6 +5,8 @@
   import FeedEvents from './FeedEvents.svelte'
   import { slide } from 'svelte/transition'
   import SeparatorHorizontal from './SeparatorHorizontal.svelte'
+  import BaseButton from './BaseButton.svelte'
+  import { Close } from '@invopop/ui-icons'
 
   let {
     status = undefined,
@@ -12,29 +14,45 @@
     uuid = '',
     events = [],
     idLabel = 'ID:',
-    onCopied
+    cancelable = false,
+    onCopied,
+    onCancel
   }: FeedItemDetailProps = $props()
 
   let open = $state(false)
 </script>
 
-<div class="w-full rounded-lg border border-neutral-100">
+<div class="w-full rounded-lg border border-border">
   <div class="px-3 py-2.5 flex items-center space-x-1.5">
     {#if status}
       <FeedIconStatus {status} />
     {/if}
-    <span class="flex-1 truncate font-medium text-neutral-800 text-base">{title}</span>
+    <span class="flex-1 truncate font-medium text-foreground text-base">{title}</span>
+    {#if cancelable}
+      <BaseButton
+        size="sm"
+        icon={Close}
+        variant="secondary"
+        onclick={() => {
+          onCancel?.()
+        }}
+      >
+        Cancel
+      </BaseButton>
+    {/if}
   </div>
   <SeparatorHorizontal />
   <div class="pl-3 py-1 pr-2.5 flex items-center space-x-0.5">
-    <span class="text-sm text-neutral-500 whitespace-nowrap">{idLabel}</span>
+    <span class="text-sm text-foreground-default-secondary whitespace-nowrap">{idLabel}</span>
     {#if uuid}
       <UuidCopy {uuid} full small {onCopied} />
     {/if}
   </div>
   {#if events.length}
     <SeparatorHorizontal />
-    <div class="px-3 py-2 text-sm text-neutral-500 flex items-center justify-between">
+    <div
+      class="px-3 py-2 text-sm text-foreground-default-secondary flex items-center justify-between"
+    >
       <span>Logs</span>
       <button
         class="cursor-pointer"

package/dist/GlobalSearch.svelte

@@ -10,10 +10,14 @@
 
   let { collapsed = false, onOpen }: GlobalSearchProps = $props()
 
-  let styles = $derived(
-    clsx({
-      'space-x-1 w-full': !collapsed
-    })
+  const styles = $derived(
+    clsx(
+      'cursor-pointer flex items-center border border-border-inverse-default rounded-lg backdrop-blur-[20px]',
+      {
+        'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse': !collapsed,
+        'p-1.5': collapsed
+      }
+    )
   )
 
   function onKeyDown(event: KeyboardEvent) {
@@ -38,15 +42,12 @@
   })
 </script>
 
-<button
-  class="cursor-pointer {styles} flex items-center border pl-1.5 py-1.5 pr-2 border-white-10 bg-neutral-800/10 rounded-md"
-  onclick={() => onOpen?.()}
->
-  <Icon src={Search} class="w-4 h-4 text-white-70" />
+<button class={styles} onclick={() => onOpen?.()}>
+  <Icon src={Search} class="size-4 text-foreground-inverse shrink-0" />
   {#if !collapsed}
-    <span class="text-white-40 text-sm flex-1 text-left tracking-normal">Search</span>
-    <ShortcutWrapper>
-      <Icon src={Slash} class="w-3 h-3 text-white-70" />
+    <span class="text-foreground-inverse-secondary text-base flex-1 text-left">Search</span>
+    <ShortcutWrapper theme="navigation">
+      <Icon src={Slash} class="size-3" />
     </ShortcutWrapper>
   {/if}
 </button>

package/dist/InputCheckbox.svelte

@@ -20,16 +20,13 @@
   }
 </script>
 
-<label
-  for={id}
-  class="inline-flex items-center space-x-2 cursor-pointer group text-base text-neutral-800"
->
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer text-base text-foreground">
   <input
     {id}
     type="checkbox"
     {checked}
     {indeterminate}
-    class="form-checkbox w-4 h-4 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 group-hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
+    class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0"
     {...rest}
     onchange={updateInput}
     {onclick}

package/dist/InputError.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Alert } from '@invopop/ui-icons'
   import type { InputErrorProps } from './types'
 
   let { errorText = '' }: InputErrorProps = $props()
 </script>
 
-<p class="mt-2 text-sm text-danger-500 flex items-center space-x-1">
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5ZM7.99999 9.35C7.66862 9.35 7.39999 9.08137 7.39999 8.75V4.75C7.39999 4.41863 7.66862 4.15 7.99999 4.15C8.33137 4.15 8.59999 4.41863 8.59999 4.75L8.59999 8.75C8.59999 9.08137 8.33136 9.35 7.99999 9.35ZM8.75 11C8.75 11.4142 8.41421 11.75 8 11.75C7.58579 11.75 7.25 11.4142 7.25 11C7.25 10.5858 7.58579 10.25 8 10.25C8.41421 10.25 8.75 10.5858 8.75 11Z"
-      fill="currentColor"
-    />
-  </svg>
+<p class="flex items-center gap-1 text-xs text-foreground-critical">
+  <Icon src={Alert} class="size-3 shrink-0" />
   <span>{errorText}</span>
 </p>

package/dist/InputLabel.svelte

@@ -4,4 +4,6 @@
   let { id = '', label = '', ...rest }: InputLabelProps = $props()
 </script>
 
-<label for={id} class="text-sm font-medium text-neutral-500 mb-2" {...rest}>{label}</label>
+<label for={id} class="text-sm font-medium text-foreground-default-secondary" {...rest}>
+  {label}
+</label>

package/dist/InputRadio.svelte

@@ -3,8 +3,10 @@
 
   let {
     checked = false,
+    disabled = false,
     id = Math.random().toString(36).slice(2, 7),
     name = '',
+    label,
     onchange,
     ...rest
   }: InputRadioProps = $props()
@@ -19,18 +21,31 @@
 
   function updateInput(event: Event) {
     const target = event.target as HTMLInputElement
-
     onchange?.(target.checked)
   }
 </script>
 
-<input
-  bind:this={el}
-  type="radio"
-  {id}
-  {name}
-  {checked}
-  class="form-radio h-5 w-5 border-neutral-200 text-workspace-accent focus:ring-0 focus:ring-offset-0 cursor-pointer"
-  {...rest}
-  onchange={updateInput}
-/>
+{#snippet radioInput()}
+  <input
+    bind:this={el}
+    type="radio"
+    {id}
+    {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"
+    {...rest}
+    onchange={updateInput}
+  />
+{/snippet}
+
+{#if label}
+  <label class="flex items-center gap-2 cursor-pointer">
+    {@render radioInput()}
+    <span class="text-base text-foreground whitespace-nowrap">
+      {label}
+    </span>
+  </label>
+{:else}
+  {@render radioInput()}
+{/if}

package/dist/InputSearch.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
   import { Search } from '@invopop/ui-icons'
+  import ShortcutWrapper from './ShortcutWrapper.svelte'
   import type { InputSearchProps } from './types.js'
 
   const debounce = (target: HTMLInputElement) => {
@@ -66,8 +67,8 @@
     bind:this={input}
     bind:value
     type="search"
-    class="py-[5px] pl-7 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 placeholder-neutral-500 text-base outline-none tracking-tight caret-workspace-accent focus:border-workspace-accent focus:shadow-active bg-white"
-    style:padding-right={`${shortcutKeys.length * 15 + 12}px`}
+    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"
+    style:padding-right={shortcut ? `${shortcutKeys.length * 20 + 12}px` : undefined}
     {placeholder}
     {...rest}
     oninput={handleInput}
@@ -75,15 +76,14 @@
     {onblur}
     {onclick}
   />
-  <Icon src={icon} class="absolute text-neutral-500 w-4 h-4 left-2" />
+  <Icon src={icon} class="absolute left-2 size-4 text-foreground-default-tertiary" />
 
   {#if shortcut}
-    <div class="absolute top-1 right-0 flex py-1.5 pr-1.5 space-x-1">
+    <div class="absolute right-2 flex items-center gap-1">
       {#each shortcutKeys as key}
-        <kbd
-          class="w-4 h-4 flex justify-center items-center rounded-md border border-neutral-200 bg-neutral-100 font-sans text-sm text-neutral-500 font-semibold"
-          >{key}</kbd
-        >
+        <ShortcutWrapper>
+          <span class="text-xs font-semibold">{key}</span>
+        </ShortcutWrapper>
       {/each}
     </div>
   {/if}

package/dist/InputSelect.svelte

@@ -29,43 +29,44 @@
 
   function handleChange(event: Event) {
     const target = (event as PointerEvent).target as HTMLSelectElement
-
     onchange?.(target.value)
   }
 </script>
 
-{#if label}
-  <InputLabel {id} {label} />
-{/if}
-<div class="relative">
-  <select
-    {id}
-    {name}
-    bind:value
-    {disabled}
-    class:pl-7={icon}
-    class:pl-2={!icon}
-    class="py-1.5 border border-neutral-200 hover:border-neutral-300 w-full rounded-md text-neutral-800 text-base pr-9 outline-none tracking-tight ui-select focus:border-workspace-accent focus:shadow-active"
-    {...rest}
-    onchange={handleChange}
-  >
-    <option value="" disabled={disablePlaceholder}>{placeholder}</option>
-    {#each options as option}
-      <option value={option.value}>{option.label}</option>
-    {/each}
-  </select>
-  {#if resolvedIcon}
-    <Icon
-      src={resolvedIcon}
-      theme={iconTheme}
-      class="h-4 w-4 absolute top-2 left-2 text-neutral-500"
-    />
+<div class="flex flex-col gap-2">
+  {#if label}
+    <InputLabel {id} {label} />
   {/if}
-</div>
+  <div class="relative">
+    <select
+      {id}
+      {name}
+      bind:value
+      {disabled}
+      class="h-8 w-full px-2 py-1.5 rounded-lg border bg-background text-base outline-none focus:ring-0 border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active text-foreground ui-select"
+      class:pl-7={resolvedIcon}
+      class:text-foreground-default-secondary={!value}
+      {...rest}
+      onchange={handleChange}
+    >
+      <option value="" disabled={disablePlaceholder}>{placeholder}</option>
+      {#each options as option}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+    {#if resolvedIcon}
+      <Icon
+        src={resolvedIcon}
+        theme={iconTheme}
+        class="absolute left-2 top-2 size-4 text-icon pointer-events-none"
+      />
+    {/if}
+  </div>
 
-{#if errorText}
-  <InputError {errorText} />
-{/if}
+  {#if errorText}
+    <InputError {errorText} />
+  {/if}
+</div>
 
 <style>
   .ui-select {

package/dist/InputText.svelte

@@ -32,13 +32,19 @@
 
   let inputStyles = $derived(
     clsx(
-      { 'pointer-events-none bg-neutral-50': disabled },
+      'h-8 w-full rounded-lg border px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px]',
+      'placeholder:text-foreground-default-tertiary',
+      'outline-none focus:ring-0',
       {
-        'text-danger-500 border-danger-400 outline-danger-400': errorText
+        'pointer-events-none bg-background-default-secondary border-border-default-default':
+          disabled
       },
       {
-        'border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active':
-          !errorText
+        'text-foreground-critical border-border-critical-bold': errorText
+      },
+      {
+        'text-foreground border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':
+          !errorText && !disabled
       }
     )
   )
@@ -59,23 +65,25 @@
   })
 </script>
 
-{#if label}
-  <InputLabel {id} {label} />
-{/if}
-<input
-  {id}
-  bind:this={inputEl}
-  bind:value
-  type="text"
-  class="{inputStyles} py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight bg-white"
-  {placeholder}
-  readonly={disabled}
-  {...rest}
-  oninput={handleInput}
-  {onfocus}
-  {onblur}
-  {onkeydown}
-/>
-{#if errorText}
-  <InputError {errorText} />
-{/if}
+<div class="flex flex-col gap-2">
+  {#if label}
+    <InputLabel {id} {label} />
+  {/if}
+  <input
+    {id}
+    bind:this={inputEl}
+    bind:value
+    type="text"
+    class={inputStyles}
+    {placeholder}
+    readonly={disabled}
+    {...rest}
+    oninput={handleInput}
+    {onfocus}
+    {onblur}
+    {onkeydown}
+  />
+  {#if errorText}
+    <InputError {errorText} />
+  {/if}
+</div>

package/dist/InputTextarea.svelte

@@ -18,13 +18,16 @@
 
   let inputStyles = $derived(
     clsx(
-      { 'pointer-events-none bg-neutral-50': disabled },
+      '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',
       {
-        'text-danger-500 border-danger-400 outline-danger-400': errorText
+        'pointer-events-none bg-background-default-secondary border-border': disabled
       },
       {
-        'border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active':
-          !errorText
+        'text-foreground-critical border-border-critical-bold': errorText
+      },
+      {
+        'text-foreground border-border hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':
+          !errorText && !disabled
       }
     )
   )
@@ -35,18 +38,21 @@
   }
 </script>
 
-<InputLabel {id} {label} />
-<textarea
-  {id}
-  {placeholder}
-  {value}
-  class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight bg-white"
-  {disabled}
-  {rows}
-  {...rest}
-  oninput={handleInput}
-></textarea>
-
-{#if errorText}
-  <InputError {errorText} />
-{/if}
+<div class="flex flex-col gap-2">
+  {#if label}
+    <InputLabel {id} {label} />
+  {/if}
+  <textarea
+    {id}
+    {placeholder}
+    {value}
+    class={inputStyles}
+    {disabled}
+    {rows}
+    {...rest}
+    oninput={handleInput}
+  ></textarea>
+  {#if errorText}
+    <InputError {errorText} />
+  {/if}
+</div>

package/dist/InputToggle.svelte

@@ -15,8 +15,24 @@
     $sw.checked = checked
   })
 
-  let togleStyles = $derived(
-    clsx({ 'bg-gray-200': !$sw.checked }, { 'bg-workspace-accent': $sw.checked })
+  let toggleStyles = $derived(
+    clsx(
+      'relative inline-flex h-5 w-[30px] shrink-0 cursor-pointer items-center rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0',
+      {
+        'bg-background-default-tertiary': !$sw.checked,
+        'bg-background-accent': $sw.checked
+      }
+    )
+  )
+
+  let circleStyles = $derived(
+    clsx(
+      'pointer-events-none inline-block size-4 transform rounded bg-icon-inverse-bold transition duration-200 ease-in-out',
+      {
+        'translate-x-[2px]': !$sw.checked,
+        'translate-x-[12px]': $sw.checked
+      }
+    )
   )
 
   function handleChange() {
@@ -25,22 +41,12 @@
   }
 </script>
 
-<label for={id} class="flex w-full items-center justify-between space-x-2">
-  {#if label}
-    <span class="text-base text-neutral-500">{label}</span>
-  {/if}
-  <button
-    {id}
-    class="{togleStyles} relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 focus:ring-offset-0"
-    use:sw.toggle
-    onclick={handleChange}
-  >
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer">
+  <button {id} class={toggleStyles} use:sw.toggle onclick={handleChange}>
     <span class="sr-only">Use setting</span>
-    <span
-      aria-hidden="true"
-      class="{$sw.checked
-        ? 'translate-x-3'
-        : 'translate-x-0'} pointer-events-none inline-block h-4 w-4 transform rounded bg-white shadow ring-0 transition duration-200 ease-in-out"
-    ></span>
+    <span aria-hidden="true" class={circleStyles}></span>
   </button>
+  {#if label}
+    <span class="text-base text-foreground">{label}</span>
+  {/if}
 </label>