src/shared/ui/Button/Button.svelte

@@ -7,6 +7,7 @@ import { cn } from '$shared/lib';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type {
+    ButtonLayout,
     ButtonSize,
     ButtonVariant,
     IconPosition,
@@ -23,6 +24,14 @@ interface Props extends HTMLButtonAttributes {
      * @default 'md'
      */
     size?: ButtonSize;
+    /**
+     * Layout shape
+     * - `inline`: default — content-sized, centered.
+     * - `block-list-row`: full-width row with the content left-aligned and any
+     *   trailing icon pushed to the right (used for filter-group rows, etc).
+     * @default 'inline'
+     */
+    layout?: ButtonLayout;
     /**
      * Icon snippet
      */
@@ -56,6 +65,7 @@ interface Props extends HTMLButtonAttributes {
 let {
     variant = 'secondary',
     size = 'md',
+    layout = 'inline',
     icon,
     iconPosition = 'left',
     active = false,
@@ -76,10 +86,10 @@ const variantStyles: Record<ButtonVariant, string> = {
         'hover:bg-swiss-red/90',
         'active:bg-swiss-red/80',
         'border border-swiss-red',
-        'shadow-[0.125rem_0.125rem_0_0_rgba(0,0,0,0.1)]',
+        'shadow-stamp-rest',
-        'hover:shadow-[0.1875rem_0.1875rem_0_0_rgba(0,0,0,0.15)]',
+        'hover:shadow-stamp-hover',
-        'active:shadow-[0.0625rem_0.0625rem_0_0_rgba(0,0,0,0.08)]',
+        'active:shadow-stamp-pressed',
-        'active:translate-x-[0.0625rem] active:translate-y-[0.0625rem]',
+        'active:translate-x-px active:translate-y-px',
         'disabled:bg-neutral-300 dark:disabled:bg-neutral-700',
         'disabled:text-neutral-500 dark:disabled:text-neutral-500',
         'disabled:border-neutral-300 dark:disabled:border-neutral-700',
@@ -111,7 +121,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     ghost: cn(
         'bg-transparent',
-        'text-secondary',
+        'text-subtle',
         'border border-transparent',
         'hover:bg-transparent dark:hover:bg-transparent',
         'hover:text-brand dark:hover:text-brand',
@@ -120,8 +130,8 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:cursor-not-allowed',
     ),
     icon: cn(
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
-        'text-secondary',
+        'text-subtle',
         'border border-transparent',
         'hover:bg-paper dark:hover:bg-paper',
         'hover:text-brand',
@@ -174,12 +184,19 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
     icon: 'bg-paper dark:bg-paper text-brand border-subtle',
 };
 
+const layoutStyles: Record<ButtonLayout, string> = {
+    inline: '',
+    /* List-row buttons act as content labels rather than action buttons,
+       so they bump to `text-sm` regardless of the size prop's default. */
+    'block-list-row': 'w-full justify-between text-left text-sm',
+};
+
 const classes = $derived(cn(
     // Base
     'inline-flex items-center justify-center',
-    'font-primary font-bold tracking-tight uppercase',
+    'text-label-mono',
     'rounded-none',
-    'transition-all duration-200',
+    'transition-all duration-normal',
     'select-none',
     'outline-none',
     'cursor-pointer',
@@ -190,6 +207,8 @@ const classes = $derived(cn(
     variantStyles[variant],
     // Size (square when icon-only)
     isIconOnly ? iconSizeStyles[size] : sizeStyles[size],
+    // Layout
+    layoutStyles[layout],
     // Animate (CSS tap scale — excluded for primary which uses translate instead)
     animate && !disabled && variant !== 'primary' && 'active:scale-[0.97]',
     // Active override

src/shared/ui/Button/types.ts

@@ -1,3 +1,4 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' | 'icon';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonLayout = 'inline' | 'block-list-row';
 export type IconPosition = 'left' | 'right';