@kine-design/core 0.0.1-beta.11 → 0.0.1-beta.12

package/compositions/theme/presets/compact.ts

@@ -0,0 +1,117 @@
+/**
+ * @description compact theme preset — denser layout with scaled-down spacing/font/radius
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import type { ThemeDefinition } from '../types';
+
+/**
+ * Compact theme inherits light colors but scales spacing/radius/font down by ~0.75.
+ * Shadow and motion stay unchanged.
+ */
+export const compactTheme: ThemeDefinition = {
+  id: 'compact',
+  name: 'Compact',
+  description: 'Denser layout — smaller spacing, font sizes, and radius (0.75x scale)',
+  tokens: {
+    color: {
+      'bg-primary': '#f5f5f5',
+      'bg-secondary': '#ebebeb',
+      'bg-tertiary': '#e0e0e0',
+      'bg-hover': '#d4d4d4',
+      'bg-inset': '#dcdcdc',
+      'neutral-1': '#f0f0f0',
+      'neutral-2': '#e5e5e5',
+      'neutral-3': '#d4d4d4',
+      'neutral-4': '#c0c0c0',
+      'neutral-5': '#a0a0a0',
+      'neutral-6': '#787878',
+      'accent-light': '#e8f5ef',
+      'accent-default': '#1ab873',
+      'accent-hover': '#1ec87d',
+      'accent-active': '#158f5a',
+      'accent-alt': '#168f5a',
+      'semantic-success': '#1ab873',
+      'semantic-success-hover': '#1ec87d',
+      'semantic-success-light': '#e8f5ef',
+      'semantic-warning': '#d4820a',
+      'semantic-warning-hover': '#e08f10',
+      'semantic-warning-light': '#fdf4e6',
+      'semantic-error': '#b03020',
+      'semantic-error-hover': '#c03828',
+      'semantic-error-light': '#fce8e6',
+      'semantic-info': '#4a6a9e',
+      'semantic-info-hover': '#3a558a',
+      'semantic-info-light': '#e8eef5',
+      'text-primary': '#1a1a1a',
+      'text-secondary': '#4a4f4c',
+      'text-muted': '#8a8a8a',
+      'text-inverse': '#ffffff',
+      'border-default': '#c8c9c3',
+      'border-subtle': '#e0e0dc',
+      'border-strong': '#1ab873',
+    },
+    interaction: {
+      'hover-intensity': '15%',
+      'active-intensity': '22%',
+      'focus-glow': '30%',
+      'focus-ring-width': '1px',
+      'focus-ring-offset': '1px',
+      'text-glow': '50%',
+      'transition-duration': '100ms',
+    },
+    spacing: {
+      '1': '1px',
+      '2': '3px',
+      '3': '4px',
+      '4': '6px',
+      '5': '8px',
+      '6': '9px',
+      '7': '10px',
+      '8': '12px',
+      '10': '15px',
+      '12': '18px',
+      '14': '21px',
+      '16': '24px',
+      '20': '30px',
+      '24': '36px',
+    },
+    radius: {
+      'xs': '1px',
+      'sm': '4px',
+      'md': '6px',
+      'lg': '9px',
+    },
+    font: {
+      'family-mono': "ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace",
+      'family-system': 'system-ui, -apple-system, sans-serif',
+      'size-xs': '7px',
+      'size-sm': '8px',
+      'size-md': '10px',
+      'size-lg': '11px',
+      'size-xl': '12px',
+      'size-2xl': '13px',
+      'size-3xl': '16px',
+      'size-4xl': '20px',
+      'weight-thin': '100',
+      'weight-regular': '400',
+      'weight-medium': '500',
+      'weight-semibold': '600',
+      'weight-bold': '700',
+    },
+    shadow: {
+      'glow-radius': '8px',
+      'sm': '0px 1px 2px rgba(0,0,0,0.05)',
+      'md': '0px 4px 8px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.04)',
+      'lg': '0px 4px 8px rgba(0,0,0,0.12), 0px 6px 12px rgba(16,24,40,0.12), 0px 1px 16px rgba(16,24,40,0.12)',
+    },
+    motion: {
+      'duration-fast': '200ms',
+      'duration-normal': '400ms',
+      'easing-default': 'ease-in-out',
+    },
+  },
+};

package/compositions/theme/presets/dark.ts

@@ -0,0 +1,113 @@
+/**
+ * @description dark theme preset — Phosphor sci-fi terminal palette
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import type { ThemeDefinition } from '../types';
+
+export const darkTheme: ThemeDefinition = {
+  id: 'dark',
+  name: 'Dark',
+  description: 'Dark mode — Phosphor terminal aesthetic, inverted colors',
+  tokens: {
+    color: {
+      'bg-primary': '#000000',
+      'bg-secondary': '#0a0a0a',
+      'bg-tertiary': '#141414',
+      'bg-hover': '#1a1a1a',
+      'bg-inset': '#1e1e1e',
+      'neutral-1': '#0f0f0f',
+      'neutral-2': '#1a1a1a',
+      'neutral-3': '#262626',
+      'neutral-4': '#333333',
+      'neutral-5': '#4a4a4a',
+      'neutral-6': '#666666',
+      'accent-light': '#0d2e1f',
+      'accent-default': '#2ad98d',
+      'accent-hover': '#3ae29a',
+      'accent-active': '#22b072',
+      'accent-alt': '#1fa86b',
+      'semantic-success': '#2ad98d',
+      'semantic-success-hover': '#3ae29a',
+      'semantic-success-light': '#0d2e1f',
+      'semantic-warning': '#fab03d',
+      'semantic-warning-hover': '#fabb55',
+      'semantic-warning-light': '#2e2210',
+      'semantic-error': '#cb523e',
+      'semantic-error-hover': '#de5f48',
+      'semantic-error-light': '#2e1210',
+      'semantic-info': '#8ba3c7',
+      'semantic-info-hover': '#5976ba',
+      'semantic-info-light': '#10182e',
+      'text-primary': '#e8e8e8',
+      'text-secondary': '#86908a',
+      'text-muted': '#555555',
+      'text-inverse': '#0a0a0a',
+      'border-default': '#31322c',
+      'border-subtle': '#252520',
+      'border-strong': '#2ad98d',
+    },
+    interaction: {
+      'hover-intensity': '18%',
+      'active-intensity': '28%',
+      'focus-glow': '35%',
+      'focus-ring-width': '2px',
+      'focus-ring-offset': '2px',
+      'text-glow': '55%',
+      'transition-duration': '150ms',
+    },
+    spacing: {
+      '1': '2px',
+      '2': '4px',
+      '3': '6px',
+      '4': '8px',
+      '5': '10px',
+      '6': '12px',
+      '7': '14px',
+      '8': '16px',
+      '10': '20px',
+      '12': '24px',
+      '14': '28px',
+      '16': '32px',
+      '20': '40px',
+      '24': '48px',
+    },
+    radius: {
+      'xs': '2px',
+      'sm': '6px',
+      'md': '8px',
+      'lg': '12px',
+    },
+    font: {
+      'family-mono': "ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace",
+      'family-system': 'system-ui, -apple-system, sans-serif',
+      'size-xs': '9px',
+      'size-sm': '10px',
+      'size-md': '12px',
+      'size-lg': '13px',
+      'size-xl': '14px',
+      'size-2xl': '16px',
+      'size-3xl': '20px',
+      'size-4xl': '24px',
+      'weight-thin': '100',
+      'weight-regular': '400',
+      'weight-medium': '500',
+      'weight-semibold': '600',
+      'weight-bold': '700',
+    },
+    shadow: {
+      'glow-radius': '8px',
+      'sm': '0px 1px 2px rgba(0,0,0,0.15)',
+      'md': '0px 4px 8px rgba(0,0,0,0.25), 0px 2px 4px rgba(0,0,0,0.15)',
+      'lg': '0px 4px 8px rgba(0,0,0,0.35), 0px 6px 12px rgba(0,0,0,0.25), 0px 1px 16px rgba(0,0,0,0.2)',
+    },
+    motion: {
+      'duration-fast': '200ms',
+      'duration-normal': '400ms',
+      'easing-default': 'ease-in-out',
+    },
+  },
+};

package/compositions/theme/presets/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @description built-in theme presets barrel export
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { lightTheme } from './light';
+export { darkTheme } from './dark';
+export { compactTheme } from './compact';

package/compositions/theme/presets/light.ts

@@ -0,0 +1,113 @@
+/**
+ * @description light theme preset — extracted from base.css :root values
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import type { ThemeDefinition } from '../types';
+
+export const lightTheme: ThemeDefinition = {
+  id: 'light',
+  name: 'Light',
+  description: 'Default light theme — neutral backgrounds, dark text, Phosphor accent',
+  tokens: {
+    color: {
+      'bg-primary': '#f5f5f5',
+      'bg-secondary': '#ebebeb',
+      'bg-tertiary': '#e0e0e0',
+      'bg-hover': '#d4d4d4',
+      'bg-inset': '#dcdcdc',
+      'neutral-1': '#f0f0f0',
+      'neutral-2': '#e5e5e5',
+      'neutral-3': '#d4d4d4',
+      'neutral-4': '#c0c0c0',
+      'neutral-5': '#a0a0a0',
+      'neutral-6': '#787878',
+      'accent-light': '#e8f5ef',
+      'accent-default': '#1ab873',
+      'accent-hover': '#1ec87d',
+      'accent-active': '#158f5a',
+      'accent-alt': '#168f5a',
+      'semantic-success': '#1ab873',
+      'semantic-success-hover': '#1ec87d',
+      'semantic-success-light': '#e8f5ef',
+      'semantic-warning': '#d4820a',
+      'semantic-warning-hover': '#e08f10',
+      'semantic-warning-light': '#fdf4e6',
+      'semantic-error': '#b03020',
+      'semantic-error-hover': '#c03828',
+      'semantic-error-light': '#fce8e6',
+      'semantic-info': '#4a6a9e',
+      'semantic-info-hover': '#3a558a',
+      'semantic-info-light': '#e8eef5',
+      'text-primary': '#1a1a1a',
+      'text-secondary': '#4a4f4c',
+      'text-muted': '#8a8a8a',
+      'text-inverse': '#ffffff',
+      'border-default': '#c8c9c3',
+      'border-subtle': '#e0e0dc',
+      'border-strong': '#1ab873',
+    },
+    interaction: {
+      'hover-intensity': '15%',
+      'active-intensity': '22%',
+      'focus-glow': '30%',
+      'focus-ring-width': '2px',
+      'focus-ring-offset': '2px',
+      'text-glow': '50%',
+      'transition-duration': '150ms',
+    },
+    spacing: {
+      '1': '2px',
+      '2': '4px',
+      '3': '6px',
+      '4': '8px',
+      '5': '10px',
+      '6': '12px',
+      '7': '14px',
+      '8': '16px',
+      '10': '20px',
+      '12': '24px',
+      '14': '28px',
+      '16': '32px',
+      '20': '40px',
+      '24': '48px',
+    },
+    radius: {
+      'xs': '2px',
+      'sm': '6px',
+      'md': '8px',
+      'lg': '12px',
+    },
+    font: {
+      'family-mono': "ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace",
+      'family-system': 'system-ui, -apple-system, sans-serif',
+      'size-xs': '9px',
+      'size-sm': '10px',
+      'size-md': '12px',
+      'size-lg': '13px',
+      'size-xl': '14px',
+      'size-2xl': '16px',
+      'size-3xl': '20px',
+      'size-4xl': '24px',
+      'weight-thin': '100',
+      'weight-regular': '400',
+      'weight-medium': '500',
+      'weight-semibold': '600',
+      'weight-bold': '700',
+    },
+    shadow: {
+      'glow-radius': '8px',
+      'sm': '0px 1px 2px rgba(0,0,0,0.05)',
+      'md': '0px 4px 8px rgba(0,0,0,0.08), 0px 2px 4px rgba(0,0,0,0.04)',
+      'lg': '0px 4px 8px rgba(0,0,0,0.12), 0px 6px 12px rgba(16,24,40,0.12), 0px 1px 16px rgba(16,24,40,0.12)',
+    },
+    motion: {
+      'duration-fast': '200ms',
+      'duration-normal': '400ms',
+      'easing-default': 'ease-in-out',
+    },
+  },
+};

package/compositions/theme/types.ts

@@ -0,0 +1,46 @@
+/**
+ * @description theme system type definitions
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/** Token category map: flat key-value pairs per category */
+export interface ThemeTokens {
+  /** e.g. 'bg-primary': '#f5f5f5', 'neutral-3': '#d4d4d4', 'accent-light': '#e8f5ef' */
+  color: Record<string, string>
+  /** e.g. '1': '2px', '2': '4px' */
+  spacing: Record<string, string>
+  /** e.g. 'xs': '2px', 'sm': '6px' */
+  radius: Record<string, string>
+  /** e.g. 'size-sm': '12px', 'family-system': 'system-ui, ...' */
+  font: Record<string, string>
+  /** e.g. 'sm': '0px 1px 2px ...', 'glow-radius': '8px' */
+  shadow: Record<string, string>
+  /** e.g. 'duration-fast': '200ms', 'easing-default': 'ease-in-out' */
+  motion: Record<string, string>
+  /** e.g. 'hover-intensity': '15%', 'transition-duration': '150ms' */
+  interaction: Record<string, string>
+}
+
+/** All supported token category names */
+export type ThemeTokenCategory = keyof ThemeTokens
+
+/** A registered theme definition */
+export interface ThemeDefinition {
+  id: string
+  name: string
+  description?: string
+  tokens: Partial<ThemeTokens>
+}
+
+/** User-level per-token overrides (sparse) */
+export type ThemeOverrides = Partial<ThemeTokens>
+
+/** Serialized state persisted to localStorage */
+export interface PersistedThemeState {
+  currentTheme: string
+  overrides: ThemeOverrides
+}

package/compositions/theme/useTheme.ts

@@ -0,0 +1,269 @@
+/**
+ * @description theme store — runtime design token engine with CSS variable injection
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import type {
+  ThemeDefinition,
+  ThemeTokenCategory,
+  ThemeOverrides,
+  PersistedThemeState,
+  ThemeTokens,
+} from './types';
+import { lightTheme, darkTheme, compactTheme } from './presets';
+
+const STORAGE_KEY = 'kine-theme';
+const TRANSITION_CLASS = 'kine-theme-transitioning';
+
+/**
+ * Detect OS-level dark mode preference.
+ * Returns 'dark' if the user prefers dark color scheme, 'light' otherwise.
+ */
+function detectColorScheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+/**
+ * Load persisted theme state from localStorage.
+ */
+function loadPersistedState(): PersistedThemeState | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw) as PersistedThemeState;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save theme state to localStorage.
+ */
+function persistState(state: PersistedThemeState): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // storage full or unavailable — silently ignore
+  }
+}
+
+/**
+ * Apply a flat map of CSS variables to document.documentElement.style.
+ * Variables follow the naming convention `--kine-{category}-{key}`.
+ */
+function applyCSSVariables(tokens: Partial<ThemeTokens>): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+
+  const categories = Object.keys(tokens) as ThemeTokenCategory[];
+  for (const category of categories) {
+    const entries = tokens[category];
+    if (!entries) continue;
+    for (const [key, value] of Object.entries(entries)) {
+      root.style.setProperty(`--kine-${category}-${key}`, value);
+    }
+  }
+}
+
+/**
+ * Add a brief transition to body so theme switch feels smooth.
+ */
+function enableTransition(): void {
+  if (typeof document === 'undefined') return;
+  const el = document.documentElement;
+  el.classList.add(TRANSITION_CLASS);
+
+  // inject the transition style once
+  let styleEl = document.getElementById('kine-theme-transition');
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = 'kine-theme-transition';
+    styleEl.textContent = `
+      .${TRANSITION_CLASS},
+      .${TRANSITION_CLASS} *,
+      .${TRANSITION_CLASS} *::before,
+      .${TRANSITION_CLASS} *::after {
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
+      }
+    `;
+    document.head.appendChild(styleEl);
+  }
+
+  // remove transition class after animation completes to avoid perf overhead
+  setTimeout(() => {
+    el.classList.remove(TRANSITION_CLASS);
+  }, 350);
+}
+
+/**
+ * Toggle the `dark` attribute on <html> to coordinate with base.css html[dark] selectors.
+ */
+function toggleDarkAttribute(isDark: boolean): void {
+  if (typeof document === 'undefined') return;
+  if (isDark) {
+    document.documentElement.setAttribute('dark', '');
+  } else {
+    document.documentElement.removeAttribute('dark');
+  }
+}
+
+/**
+ * Merge base theme tokens with user overrides (overrides win).
+ */
+function mergeTokens(base: Partial<ThemeTokens>, overrides: ThemeOverrides): Partial<ThemeTokens> {
+  const merged: Partial<ThemeTokens> = {};
+  const allCategories = new Set<ThemeTokenCategory>([
+    ...Object.keys(base) as ThemeTokenCategory[],
+    ...Object.keys(overrides) as ThemeTokenCategory[],
+  ]);
+
+  for (const cat of allCategories) {
+    merged[cat] = {
+      ...(base[cat] ?? {}),
+      ...(overrides[cat] ?? {}),
+    };
+  }
+  return merged;
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+export const useThemeStore = defineStore('kine-theme', () => {
+  // --- state ---
+  const themes = ref<Map<string, ThemeDefinition>>(new Map());
+  const currentThemeId = ref<string>('light');
+  const overrides = ref<ThemeOverrides>({});
+
+  // --- getters ---
+  const currentTheme = computed<ThemeDefinition | undefined>(
+    () => themes.value.get(currentThemeId.value),
+  );
+
+  const resolvedTokens = computed<Partial<ThemeTokens>>(() => {
+    const base = currentTheme.value?.tokens ?? {};
+    return mergeTokens(base, overrides.value);
+  });
+
+  const isDark = computed(() => currentThemeId.value === 'dark');
+
+  const themeList = computed<ThemeDefinition[]>(() => Array.from(themes.value.values()));
+
+  // --- actions ---
+
+  /**
+   * Register a theme preset. If a theme with the same id exists, it is replaced.
+   */
+  function registerTheme(definition: ThemeDefinition): void {
+    // use a new Map so Vue detects the change
+    const next = new Map(themes.value);
+    next.set(definition.id, definition);
+    themes.value = next;
+  }
+
+  /**
+   * Switch to a registered theme by id.
+   */
+  function setTheme(id: string): void {
+    if (!themes.value.has(id)) {
+      console.warn(`[kine-theme] theme "${id}" is not registered`);
+      return;
+    }
+    enableTransition();
+    currentThemeId.value = id;
+  }
+
+  /**
+   * Set a single token override (survives theme switches).
+   */
+  function setTokenOverride(category: ThemeTokenCategory, key: string, value: string): void {
+    const prev = overrides.value[category] ?? {};
+    overrides.value = {
+      ...overrides.value,
+      [category]: { ...prev, [key]: value },
+    };
+  }
+
+  /**
+   * Clear all user-level token overrides.
+   */
+  function resetOverrides(): void {
+    overrides.value = {};
+  }
+
+  /**
+   * Initialize the theme system: register built-in presets, restore persisted
+   * state (or detect OS preference), and apply CSS variables.
+   * Called automatically by KThemeProvider or can be called manually.
+   */
+  function init(): void {
+    // register built-in presets
+    registerTheme(lightTheme);
+    registerTheme(darkTheme);
+    registerTheme(compactTheme);
+
+    // restore persisted state
+    const persisted = loadPersistedState();
+    if (persisted && themes.value.has(persisted.currentTheme)) {
+      currentThemeId.value = persisted.currentTheme;
+      overrides.value = persisted.overrides ?? {};
+    } else {
+      // no saved preference — use OS color scheme
+      currentThemeId.value = detectColorScheme();
+    }
+
+    // apply immediately (no transition on first paint)
+    applyCurrentTheme();
+  }
+
+  /**
+   * Apply the resolved tokens as CSS variables and sync dark attribute.
+   */
+  function applyCurrentTheme(): void {
+    applyCSSVariables(resolvedTokens.value);
+    toggleDarkAttribute(isDark.value);
+  }
+
+  // --- persistence & side-effect watchers ---
+
+  watch(
+    [currentThemeId, overrides],
+    () => {
+      applyCurrentTheme();
+      persistState({
+        currentTheme: currentThemeId.value,
+        overrides: overrides.value,
+      });
+    },
+    { deep: true },
+  );
+
+  return {
+    // state
+    currentThemeId,
+    themes,
+    overrides,
+
+    // getters
+    currentTheme,
+    resolvedTokens,
+    isDark,
+    themeList,
+
+    // actions
+    registerTheme,
+    setTheme,
+    setTokenOverride,
+    resetOverrides,
+    init,
+  };
+});

package/compositions/toast/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @description toast composition 导出
+ * @author 阿怪
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useToast } from './useToast';
+export type { ToastType, ToastItem, ToastShowOptions, ToastPromiseOptions } from './useToast';