bref-ui 0.0.2 → 0.0.4

package/dist/base/icon/icon.svelte

@@ -8,11 +8,20 @@
 		filled = false,
 		size = 'medium',
 		color = 'foreground',
+		ariaLabel,
+		contrastMode,
 		...rest
 	}: IconProps & SvelteHTMLElements['span'] = $props();
 </script>
 
-<span {...rest} class:filled class={`${size} ${color}`} aria-hidden="true">
+<span
+	{...rest}
+	class:filled
+	class={`${size} ${color}`}
+	class:contrastMode
+	aria-label={ariaLabel}
+	aria-hidden={ariaLabel ? 'false' : 'true'}
+>
 	{name}
 </span>
 
@@ -54,25 +63,55 @@
 	.foreground {
 		color: var(--color-foreground);
 	}
+	.foreground.contrastMode {
+		color: var(--color-foreground-contrast);
+	}
 	.primary {
-		color: var(--color-primary-base);
+		color: var(--color-primary);
+	}
+	.primary.contrastMode {
+		color: var(--color-primary-contrast);
 	}
+
 	.secondary {
-		color: var(--color-secondary-base);
+		color: var(--color-secondary);
+	}
+	.secondary.contrastMode {
+		color: var(--color-secondary-contrast);
 	}
+
 	.success {
-		color: var(--color-success-base);
+		color: var(--color-success);
+	}
+	.success.contrastMode {
+		color: var(--color-success-contrast);
 	}
+
 	.warning {
-		color: var(--color-warning-base);
+		color: var(--color-warning);
 	}
+	.warning.contrastMode {
+		color: var(--color-warning-contrast);
+	}
+
 	.danger {
-		color: var(--color-danger-base);
+		color: var(--color-danger);
 	}
+	.danger.contrastMode {
+		color: var(--color-danger-contrast);
+	}
+
 	.background {
 		color: var(--color-background);
 	}
+	.background.contrastMode {
+		color: var(--color-background-contrast);
+	}
+
 	.info {
-		color: var(--color-info-base);
+		color: var(--color-info);
+	}
+	.info.contrastMode {
+		color: var(--color-info-contrast);
 	}
 </style>

package/dist/base/icon/types.d.ts

@@ -5,4 +5,6 @@ export interface IconProps {
     filled?: boolean;
     size?: Size;
     color?: Color;
+    ariaLabel?: string;
+    contrastMode?: boolean;
 }

package/dist/base/theme/color-tokens.d.ts

@@ -1,14 +1,13 @@
-import type { ColorTokenProps, ThemeMode, ThemeProps } from './types.ts';
+import type { ColorTokenProps, ThemeProps } from './types.ts';
 /**
- * Generates a complete set of color tokens based on a base color and theme mode.
- * Produces consistent, accessible color variations for UI components including
- * soft backgrounds, hover states, active states, muted variants, and contrast colors.
+ * Generates a minimal set of color tokens based on a base color.
+ * Produces soft, saturated, and contrast variants. Hover/active states are
+ * left to components using CSS color-mix() for context-aware state derivation.
  *
  * @param color - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns An object containing all color token variations
+ * @returns An object containing soft, saturated, and contrast color tokens
  */
-declare const generateColorTokens: (color: string, mode: ThemeMode) => ColorTokenProps;
+declare const generateColorTokens: (color: string) => ColorTokenProps;
 /**
  * Sets a CSS custom property on the document root element.
  * Automatically prefixes the key with '--' if not already present.
@@ -19,20 +18,19 @@ declare const generateColorTokens: (color: string, mode: ThemeMode) => ColorToke
 declare const setCSSProperty: (key: string, value: string) => void;
 /**
  * Generates and applies a complete set of color tokens as CSS custom properties.
- * Each token is set as `--color-{mode}-{colorKey}-{variant}` on the document root.
+ * Each token is set as `--color-{colorKey}` and `--color-{colorKey}-{variant}` on the document root.
  *
  * @param colorKey - The semantic name for the color (e.g., 'primary', 'success')
  * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
  */
-declare const setColorTokens: (colorKey: string, baseColor: string, mode: ThemeMode) => void;
+declare const setColorTokens: (colorKey: string, baseColor: string) => void;
 /**
- * Applies all color tokens for a specific theme mode as CSS custom properties.
- * Sets palette colors, surface colors, and border color for the given mode.
+ * Applies all theme tokens as CSS custom properties.
+ * Palette colors are set without mode prefix (consistent across themes).
+ * Surface colors (background/foreground) are set with mode prefix for light/dark switching.
  *
  * @param theme - The theme configuration object containing palette and surface colors
- * @param mode - The theme mode ('light' or 'dark') to apply
  */
-declare const setThemeMode: (userTheme: ThemeProps, mode: ThemeMode) => void;
-export { generateColorTokens, setCSSProperty, setThemeMode };
+declare const setThemeTokens: (theme: ThemeProps) => void;
+export { generateColorTokens, setCSSProperty, setThemeTokens };
 export default setColorTokens;

package/dist/base/theme/color-tokens.js

@@ -1,86 +1,42 @@
 import { colord } from 'colord';
 /**
  * Generates a soft background color from the base color.
- * In light mode, produces a much lighter shade (like a 100-200 on a color scale)
- * suitable as a background when using the base color as foreground.
- * In dark mode, produces a darker, desaturated version for the same effect.
+ * Produces a lighter, slightly desaturated shade suitable as a
+ * background when using the base color as foreground.
  *
  * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
  * @returns A hex color string representing the soft background color
  */
-const generateSoftColor = (baseColor, mode) => mode === 'light'
-    ? colord(baseColor).lighten(0.35).desaturate(0.1).toHex()
-    : colord(baseColor).darken(0.35).desaturate(0.2).toHex();
+const generateSoftColor = (baseColor) => colord(baseColor).lighten(0.25).desaturate(0.1).toHex();
 /**
- * Returns the base color unchanged.
- * This function serves as a passthrough to maintain consistency
- * in the color token generation API.
+ * Generates a saturated (darker) version of the base color.
+ * Produces a deeper, more intense shade suitable for emphasis or contrast.
  *
  * @param baseColor - The base color in any valid CSS color format
- * @param _mode - The current theme mode (unused, kept for API consistency)
- * @returns The base color as a hex string
+ * @returns A hex color string representing the saturated color
  */
-const generateBaseColor = (baseColor, _mode) => colord(baseColor).toHex();
-/**
- * Generates a hover state color from the base color.
- * In light mode, produces a slightly darker shade to indicate interactivity.
- * In dark mode, produces a slightly lighter shade for the same visual feedback.
- *
- * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns A hex color string for the hover state
- */
-const generateHoverColor = (baseColor, mode) => mode === 'light' ? colord(baseColor).darken(0.1).toHex() : colord(baseColor).lighten(0.1).toHex();
-/**
- * Generates an active/pressed state color from the base color.
- * In light mode, produces a more pronounced darker shade than hover.
- * In dark mode, produces a more pronounced lighter shade than hover.
- * Used to indicate active state on click or tap interactions.
- *
- * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns A hex color string for the active state
- */
-const generateActiveColor = (baseColor, mode) => mode === 'light' ? colord(baseColor).darken(0.2).toHex() : colord(baseColor).lighten(0.2).toHex();
-/**
- * Generates a muted/desaturated version of the base color.
- * Useful for disabled states, placeholder elements, or less prominent UI elements.
- * Also slightly adjusts lightness based on theme mode for better visual balance.
- *
- * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns A hex color string representing the muted color
- */
-const generateMutedColor = (baseColor, mode) => mode === 'light'
-    ? colord(baseColor).desaturate(0.4).lighten(0.15).toHex()
-    : colord(baseColor).desaturate(0.4).darken(0.15).toHex();
+const generateSaturatedColor = (baseColor) => colord(baseColor).darken(0.15).saturate(0.1).toHex();
 /**
  * Generates a contrast color for text or icons placed on top of the base color.
  * Returns either black or white depending on the base color's perceived brightness,
  * ensuring readability and accessibility (WCAG compliance).
  *
  * @param baseColor - The base color in any valid CSS color format
- * @param _mode - The current theme mode (unused, contrast is based on color luminance)
  * @returns '#ffffff' for dark base colors, '#000000' for light base colors
  */
-const generateContrastColor = (baseColor, _mode) => colord(baseColor).isDark() ? '#ffffff' : '#000000';
+const generateContrastColor = (baseColor) => colord(baseColor).isDark() ? '#ffffff' : '#000000';
 /**
- * Generates a complete set of color tokens based on a base color and theme mode.
- * Produces consistent, accessible color variations for UI components including
- * soft backgrounds, hover states, active states, muted variants, and contrast colors.
+ * Generates a minimal set of color tokens based on a base color.
+ * Produces soft, saturated, and contrast variants. Hover/active states are
+ * left to components using CSS color-mix() for context-aware state derivation.
  *
  * @param color - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns An object containing all color token variations
+ * @returns An object containing soft, saturated, and contrast color tokens
  */
-const generateColorTokens = (color, mode) => ({
-    soft: generateSoftColor(color, mode),
-    base: generateBaseColor(color, mode),
-    hover: generateHoverColor(color, mode),
-    active: generateActiveColor(color, mode),
-    muted: generateMutedColor(color, mode),
-    contrast: generateContrastColor(color, mode)
+const generateColorTokens = (color) => ({
+    soft: generateSoftColor(color),
+    saturated: generateSaturatedColor(color),
+    contrast: generateContrastColor(color)
 });
 /**
  * Sets a CSS custom property on the document root element.
@@ -95,54 +51,55 @@ const setCSSProperty = (key, value) => {
 };
 /**
  * Generates and applies a complete set of color tokens as CSS custom properties.
- * Each token is set as `--color-{mode}-{colorKey}-{variant}` on the document root.
+ * Each token is set as `--color-{colorKey}` and `--color-{colorKey}-{variant}` on the document root.
  *
  * @param colorKey - The semantic name for the color (e.g., 'primary', 'success')
  * @param baseColor - The base color in any valid CSS color format
- * @param mode - The current theme mode ('light' or 'dark')
  */
-const setColorTokens = (colorKey, baseColor, mode) => {
-    const tokens = generateColorTokens(baseColor, mode);
+const setColorTokens = (colorKey, baseColor) => {
+    const tokens = generateColorTokens(baseColor);
+    setCSSProperty(`--color-${colorKey}`, baseColor);
     Object.entries(tokens).forEach(([variant, value]) => {
-        setCSSProperty(`--color-${mode}-${colorKey}-${variant}`, value);
+        setCSSProperty(`--color-${colorKey}-${variant}`, value);
     });
 };
 /**
- * Flips the background and foreground colors of the theme for dark mode.
- * In dark mode, the background becomes the foreground and vice versa.
- * This ensures appropriate contrast and readability in dark themes.
+ * Generates and applies surface color tokens with mode prefix for light/dark switching.
+ * Each token is set as `--color-{mode}-{surfaceKey}-{variant}` on the document root.
  *
- * @param theme - The theme configuration object containing surface colors
- * @param mode - The current theme mode ('light' or 'dark')
- * @returns A new ThemeProps object with flipped background and foreground if in dark mode
+ * @param surfaceKey - The semantic name for the surface (e.g., 'background', 'foreground')
+ * @param baseColor - The base color in any valid CSS color format
+ * @param mode - The theme mode ('light' or 'dark')
  */
-const flipThemeBackgroundAndForeground = (theme, mode) => {
-    const flippedTheme = structuredClone(theme);
-    if (mode === 'dark') {
-        const darkBackground = theme.surfaceHex.background;
-        const lightForeground = theme.surfaceHex.foreground;
-        flippedTheme.surfaceHex.background = lightForeground;
-        flippedTheme.surfaceHex.foreground = darkBackground;
-    }
-    return flippedTheme;
+const setSurfaceTokens = (surfaceKey, baseColor, mode) => {
+    const tokens = generateColorTokens(baseColor);
+    setCSSProperty(`--color-${mode}-${surfaceKey}`, baseColor);
+    Object.entries(tokens).forEach(([variant, value]) => {
+        setCSSProperty(`--color-${mode}-${surfaceKey}-${variant}`, value);
+    });
 };
 /**
- * Applies all color tokens for a specific theme mode as CSS custom properties.
- * Sets palette colors, surface colors, and border color for the given mode.
+ * Applies all theme tokens as CSS custom properties.
+ * Palette colors are set without mode prefix (consistent across themes).
+ * Surface colors (background/foreground) are set with mode prefix for light/dark switching.
  *
  * @param theme - The theme configuration object containing palette and surface colors
- * @param mode - The theme mode ('light' or 'dark') to apply
  */
-const setThemeMode = (userTheme, mode) => {
-    const theme = flipThemeBackgroundAndForeground(userTheme, mode);
+const setThemeTokens = (theme) => {
+    // Palette colors: same across light/dark modes
     Object.entries(theme.paletteHex).forEach(([color, value]) => {
-        setCSSProperty(`--color-${mode}-${color}`, value);
-        setColorTokens(color, value, mode);
+        setColorTokens(color, value);
     });
+    // Surface colors: different for light/dark modes
+    // Light mode uses colors as-is
     Object.entries(theme.surfaceHex).forEach(([surface, value]) => {
-        setCSSProperty(`--color-${mode}-${surface}`, value);
+        setSurfaceTokens(surface, value, 'light');
     });
-    setCSSProperty(`--color-${mode}-border`, theme.border.colorHex);
+    // Dark mode flips background and foreground
+    setSurfaceTokens('background', theme.surfaceHex.foreground, 'dark');
+    setSurfaceTokens('foreground', theme.surfaceHex.background, 'dark');
+    // Border color
+    setCSSProperty('--color-border', theme.border.colorHex);
 };
-export { generateColorTokens, setCSSProperty, setThemeMode };
+export { generateColorTokens, setCSSProperty, setThemeTokens };
 export default setColorTokens;

package/dist/base/theme/theme.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setCSSProperty, setThemeMode } from './color-tokens.js';
+	import { setCSSProperty, setThemeTokens } from './color-tokens.js';
 	import { initializeThemeMode } from './mode.js';
 	import { DEFAULT_THEME, type ThemeProps } from './types.js';
 
@@ -23,8 +23,7 @@
 	};
 
 	$effect.pre(() => {
-		setThemeMode(theme, 'light');
-		setThemeMode(theme, 'dark');
+		setThemeTokens(theme);
 
 		setCSSProperty(`--border-width`, `${theme.border.widthPx}px`);
 		setCSSProperty(`--border-radius`, `${theme.border.radiusRem}rem`);
@@ -38,51 +37,15 @@
 	:global(:root),
 	:global(:root[data-theme='light']) {
 		color-scheme: light;
-		--color-primary: var(--color-light-primary);
-		--color-primary-soft: var(--color-light-primary-soft);
-		--color-primary-base: var(--color-light-primary-base);
-		--color-primary-hover: var(--color-light-primary-hover);
-		--color-primary-active: var(--color-light-primary-active);
-		--color-primary-muted: var(--color-light-primary-muted);
-		--color-primary-contrast: var(--color-light-primary-contrast);
-		--color-secondary: var(--color-light-secondary);
-		--color-secondary-soft: var(--color-light-secondary-soft);
-		--color-secondary-base: var(--color-light-secondary-base);
-		--color-secondary-hover: var(--color-light-secondary-hover);
-		--color-secondary-active: var(--color-light-secondary-active);
-		--color-secondary-muted: var(--color-light-secondary-muted);
-		--color-secondary-contrast: var(--color-light-secondary-contrast);
-		--color-success: var(--color-light-success);
-		--color-success-soft: var(--color-light-success-soft);
-		--color-success-base: var(--color-light-success-base);
-		--color-success-hover: var(--color-light-success-hover);
-		--color-success-active: var(--color-light-success-active);
-		--color-success-muted: var(--color-light-success-muted);
-		--color-success-contrast: var(--color-light-success-contrast);
-		--color-warning: var(--color-light-warning);
-		--color-warning-soft: var(--color-light-warning-soft);
-		--color-warning-base: var(--color-light-warning-base);
-		--color-warning-hover: var(--color-light-warning-hover);
-		--color-warning-active: var(--color-light-warning-active);
-		--color-warning-muted: var(--color-light-warning-muted);
-		--color-warning-contrast: var(--color-light-warning-contrast);
-		--color-danger: var(--color-light-danger);
-		--color-danger-soft: var(--color-light-danger-soft);
-		--color-danger-base: var(--color-light-danger-base);
-		--color-danger-hover: var(--color-light-danger-hover);
-		--color-danger-active: var(--color-light-danger-active);
-		--color-danger-muted: var(--color-light-danger-muted);
-		--color-danger-contrast: var(--color-light-danger-contrast);
-		--color-info: var(--color-light-info);
-		--color-info-soft: var(--color-light-info-soft);
-		--color-info-base: var(--color-light-info-base);
-		--color-info-hover: var(--color-light-info-hover);
-		--color-info-active: var(--color-light-info-active);
-		--color-info-muted: var(--color-light-info-muted);
-		--color-info-contrast: var(--color-light-info-contrast);
-		--color-border: var(--color-light-border);
+		--hover-mix: var(--color-foreground);
 		--color-background: var(--color-light-background);
+		--color-background-soft: var(--color-light-background-soft);
+		--color-background-saturated: var(--color-light-background-saturated);
+		--color-background-contrast: var(--color-light-background-contrast);
 		--color-foreground: var(--color-light-foreground);
+		--color-foreground-soft: var(--color-light-foreground-soft);
+		--color-foreground-saturated: var(--color-light-foreground-saturated);
+		--color-foreground-contrast: var(--color-light-foreground-contrast);
 	}
 
 	:global(*) {
@@ -100,101 +63,29 @@
 
 	:global(:root[data-theme='dark']) {
 		color-scheme: dark;
-		--color-primary: var(--color-dark-primary);
-		--color-primary-soft: var(--color-dark-primary-soft);
-		--color-primary-base: var(--color-dark-primary-base);
-		--color-primary-hover: var(--color-dark-primary-hover);
-		--color-primary-active: var(--color-dark-primary-active);
-		--color-primary-muted: var(--color-dark-primary-muted);
-		--color-primary-contrast: var(--color-dark-primary-contrast);
-		--color-secondary: var(--color-dark-secondary);
-		--color-secondary-soft: var(--color-dark-secondary-soft);
-		--color-secondary-base: var(--color-dark-secondary-base);
-		--color-secondary-hover: var(--color-dark-secondary-hover);
-		--color-secondary-active: var(--color-dark-secondary-active);
-		--color-secondary-muted: var(--color-dark-secondary-muted);
-		--color-secondary-contrast: var(--color-dark-secondary-contrast);
-		--color-success: var(--color-dark-success);
-		--color-success-soft: var(--color-dark-success-soft);
-		--color-success-base: var(--color-dark-success-base);
-		--color-success-hover: var(--color-dark-success-hover);
-		--color-success-active: var(--color-dark-success-active);
-		--color-success-muted: var(--color-dark-success-muted);
-		--color-success-contrast: var(--color-dark-success-contrast);
-		--color-warning: var(--color-dark-warning);
-		--color-warning-soft: var(--color-dark-warning-soft);
-		--color-warning-base: var(--color-dark-warning-base);
-		--color-warning-hover: var(--color-dark-warning-hover);
-		--color-warning-active: var(--color-dark-warning-active);
-		--color-warning-muted: var(--color-dark-warning-muted);
-		--color-warning-contrast: var(--color-dark-warning-contrast);
-		--color-danger: var(--color-dark-danger);
-		--color-danger-soft: var(--color-dark-danger-soft);
-		--color-danger-base: var(--color-dark-danger-base);
-		--color-danger-hover: var(--color-dark-danger-hover);
-		--color-danger-active: var(--color-dark-danger-active);
-		--color-danger-muted: var(--color-dark-danger-muted);
-		--color-danger-contrast: var(--color-dark-danger-contrast);
-		--color-info: var(--color-dark-info);
-		--color-info-soft: var(--color-dark-info-soft);
-		--color-info-base: var(--color-dark-info-base);
-		--color-info-hover: var(--color-dark-info-hover);
-		--color-info-active: var(--color-dark-info-active);
-		--color-info-muted: var(--color-dark-info-muted);
-		--color-info-contrast: var(--color-dark-info-contrast);
-		--color-border: var(--color-dark-border);
+		--hover-mix: var(--color-foreground);
 		--color-background: var(--color-dark-background);
+		--color-background-soft: var(--color-dark-background-soft);
+		--color-background-saturated: var(--color-dark-background-saturated);
+		--color-background-contrast: var(--color-dark-background-contrast);
 		--color-foreground: var(--color-dark-foreground);
+		--color-foreground-soft: var(--color-dark-foreground-soft);
+		--color-foreground-saturated: var(--color-dark-foreground-saturated);
+		--color-foreground-contrast: var(--color-dark-foreground-contrast);
 	}
 
 	@media (prefers-color-scheme: dark) {
 		:global(:root:not([data-theme='light'])) {
 			color-scheme: dark;
-			--color-primary: var(--color-dark-primary);
-			--color-primary-soft: var(--color-dark-primary-soft);
-			--color-primary-base: var(--color-dark-primary-base);
-			--color-primary-hover: var(--color-dark-primary-hover);
-			--color-primary-active: var(--color-dark-primary-active);
-			--color-primary-muted: var(--color-dark-primary-muted);
-			--color-primary-contrast: var(--color-dark-primary-contrast);
-			--color-secondary: var(--color-dark-secondary);
-			--color-secondary-soft: var(--color-dark-secondary-soft);
-			--color-secondary-base: var(--color-dark-secondary-base);
-			--color-secondary-hover: var(--color-dark-secondary-hover);
-			--color-secondary-active: var(--color-dark-secondary-active);
-			--color-secondary-muted: var(--color-dark-secondary-muted);
-			--color-secondary-contrast: var(--color-dark-secondary-contrast);
-			--color-success: var(--color-dark-success);
-			--color-success-soft: var(--color-dark-success-soft);
-			--color-success-base: var(--color-dark-success-base);
-			--color-success-hover: var(--color-dark-success-hover);
-			--color-success-active: var(--color-dark-success-active);
-			--color-success-muted: var(--color-dark-success-muted);
-			--color-success-contrast: var(--color-dark-success-contrast);
-			--color-warning: var(--color-dark-warning);
-			--color-warning-soft: var(--color-dark-warning-soft);
-			--color-warning-base: var(--color-dark-warning-base);
-			--color-warning-hover: var(--color-dark-warning-hover);
-			--color-warning-active: var(--color-dark-warning-active);
-			--color-warning-muted: var(--color-dark-warning-muted);
-			--color-warning-contrast: var(--color-dark-warning-contrast);
-			--color-danger: var(--color-dark-danger);
-			--color-danger-soft: var(--color-dark-danger-soft);
-			--color-danger-base: var(--color-dark-danger-base);
-			--color-danger-hover: var(--color-dark-danger-hover);
-			--color-danger-active: var(--color-dark-danger-active);
-			--color-danger-muted: var(--color-dark-danger-muted);
-			--color-danger-contrast: var(--color-dark-danger-contrast);
-			--color-info: var(--color-dark-info);
-			--color-info-soft: var(--color-dark-info-soft);
-			--color-info-base: var(--color-dark-info-base);
-			--color-info-hover: var(--color-dark-info-hover);
-			--color-info-active: var(--color-dark-info-active);
-			--color-info-muted: var(--color-dark-info-muted);
-			--color-info-contrast: var(--color-dark-info-contrast);
-			--color-border: var(--color-dark-border);
+			--hover-mix: var(--color-foreground);
 			--color-background: var(--color-dark-background);
+			--color-background-soft: var(--color-dark-background-soft);
+			--color-background-saturated: var(--color-dark-background-saturated);
+			--color-background-contrast: var(--color-dark-background-contrast);
 			--color-foreground: var(--color-dark-foreground);
+			--color-foreground-soft: var(--color-dark-foreground-soft);
+			--color-foreground-saturated: var(--color-dark-foreground-saturated);
+			--color-foreground-contrast: var(--color-dark-foreground-contrast);
 		}
 	}
 </style>

package/dist/base/theme/types.d.ts

@@ -21,10 +21,7 @@ export interface ThemeProps {
 }
 export interface ColorTokenProps {
     soft: string;
-    base: string;
-    hover: string;
-    active: string;
-    muted: string;
+    saturated: string;
     contrast: string;
 }
 export declare const DEFAULT_THEME: ThemeProps;

package/dist/internal/demo-button.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Button from '../base/button/button.svelte';
+	import DemoSection from './demo-section.svelte';
+	import DemoCodeSnippet from './demo-code-snippet.svelte';
+</script>
+
+<DemoSection
+	title="Buttons"
+	id="buttons"
+	description="Buttons with customizable size, color, variant, and optional icons."
+>
+	<h3>Variants</h3>
+	<div>
+		<Button label="Filled" variant="filled" onClick={() => {}} />
+		<Button label="Soft" variant="soft" onClick={() => {}} />
+		<Button label="Ghost" variant="ghost" onClick={() => {}} />
+	</div>
+	<h3>Colors</h3>
+	<div>
+		<Button label="Primary" color="primary" onClick={() => {}} />
+		<Button label="Secondary" color="secondary" onClick={() => {}} />
+		<Button label="Success" color="success" onClick={() => {}} />
+		<Button label="Warning" color="warning" onClick={() => {}} />
+		<Button label="Danger" color="danger" onClick={() => {}} />
+		<Button label="Info" color="info" onClick={() => {}} />
+	</div>
+	<h3>Sizes</h3>
+	<div>
+		<Button label="X-Small" size="x-small" onClick={() => {}} />
+		<Button label="Small" size="small" onClick={() => {}} />
+		<Button label="Medium" size="medium" onClick={() => {}} />
+		<Button label="Large" size="large" onClick={() => {}} />
+		<Button label="X-Large" size="x-large" onClick={() => {}} />
+	</div>
+	<h3>With Icons</h3>
+	<div>
+		<Button label="Add" icon={{ name: 'add' }} onClick={() => {}} />
+		<Button label="Favorite" icon={{ name: 'favorite', filled: true }} color="danger" onClick={() => {}} />
+		<Button label="Settings" icon={{ name: 'settings' }} variant="soft" onClick={() => {}} />
+		<Button label="Delete" icon={{ name: 'delete' }} variant="ghost" color="danger" onClick={() => {}} />
+	</div>
+	<h3>Wide</h3>
+	<div class="wide-container">
+		<Button label="Full Width Button" wide onClick={() => {}} />
+		<Button label="Full Width Soft" wide variant="soft" color="secondary" onClick={() => {}} />
+	</div>
+	<h3>Disabled</h3>
+	<div>
+		<Button label="Disabled" disabled onClick={() => {}} />
+		<Button label="Disabled Soft" disabled variant="soft" onClick={() => {}} />
+		<Button label="Disabled Ghost" disabled variant="ghost" onClick={() => {}} />
+	</div>
+	<h3>Usage Example</h3>
+	<DemoCodeSnippet
+		snippet={`<Button
+  label="Submit"
+  icon={{ name: 'check', filled: true }}
+  color="success"
+  variant="filled"
+  size="large"
+  onClick={() => handleSubmit()}
+/>`}
+	/>
+</DemoSection>
+
+<style>
+	div {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+
+	.wide-container {
+		flex-direction: column;
+		width: 100%;
+		max-width: 300px;
+	}
+</style>

package/dist/internal/demo-button.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DemoButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DemoButton = InstanceType<typeof DemoButton>;
+export default DemoButton;