@grundtone/core 2.0.0

package/README.md

@@ -0,0 +1,78 @@
+# @grundtone/core
+
+Core package for the Grundtone design system. This package contains the fundamental building blocks,
+types, and utilities that form the foundation of the design system.
+
+## Installation
+
+```bash
+pnpm add @grundtone/core
+```
+
+## Usage
+
+```typescript
+import { DEFAULT_THEME, type ThemeConfig } from '@grundtone/core';
+
+// Use the default theme
+const theme: ThemeConfig = DEFAULT_THEME;
+```
+
+## Exports
+
+### Types
+
+- `ComponentProps` - Base interface for component props
+- `ThemeConfig` - Theme configuration interface
+- `Size` - Common size variants ('sm' | 'md' | 'lg')
+- `Variant` - Common component variants ('primary' | 'secondary' | 'tertiary')
+
+### Constants
+
+- `DEFAULT_THEME` - Default theme configuration
+
+## Development
+
+1. Install dependencies:
+
+```bash
+pnpm install
+```
+
+2. Start development server:
+
+```bash
+pnpm dev
+```
+
+3. Build package:
+
+```bash
+pnpm build
+```
+
+4. Run tests:
+
+```bash
+pnpm test
+```
+
+## Contributing
+
+Please refer to the main project README for contribution guidelines.
+
+## TypeScript-konfiguration
+
+Denne pakke bruger en specifik `tsconfig.json`, som udvider rodens `tsconfig.build.json`.
+Konfigurationen sikrer at kildekoden i `src/` og types i `types/` bliver korrekt transpileret og at
+types genereres i `dist/types`.
+
+- outDir: `dist`
+- rootDir: `src`
+- Types genereres automatisk ved build
+
+Byg pakken med:
+
+```sh
+pnpm build
+```

package/dist/index.d.mts

@@ -0,0 +1,305 @@
+import { InjectionKey, Ref } from 'vue';
+
+interface ComponentProps {
+    class?: string;
+    style?: string | Record<string, string>;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'primary' | 'secondary' | 'tertiary';
+
+type ThemeMode = 'light' | 'dark' | 'auto';
+interface ThemeColors {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    onPrimary: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    success: string;
+    successLight: string;
+    successDark: string;
+    warning: string;
+    warningLight: string;
+    warningDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    info: string;
+    infoLight: string;
+    infoDark: string;
+    background: string;
+    backgroundAlt: string;
+    surface: string;
+    surfaceAlt: string;
+    surfaceRaised: string;
+    surfaceOverlay: string;
+    modalBackdrop: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    textInverse: string;
+    textPlaceholder: string;
+    textDisabled: string;
+    borderLight: string;
+    borderMedium: string;
+    borderStrong: string;
+    borderInverse: string;
+    focus: string;
+    focusRing: string;
+    neutral: string;
+}
+interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+}
+interface ThemeTypography {
+    fontFamily: {
+        base: string;
+        heading: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    fontWeight: {
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+    };
+    lineHeight: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+    };
+}
+interface ThemeShadows {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    none: string;
+}
+interface ShadowLayer {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
+    opacity: number;
+    inset?: boolean;
+}
+interface ThemeRadius {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+}
+interface ThemeTransitions {
+    duration: {
+        fast: string;
+        base: string;
+        slow: string;
+    };
+    timing: {
+        ease: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+        linear: string;
+    };
+}
+interface ThemeZIndex {
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+    toast: number;
+}
+interface Theme {
+    mode: ThemeMode;
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    shadows: ThemeShadows;
+    shadowDefinitions: Record<string, ShadowLayer[]>;
+    radius: ThemeRadius;
+    transitions: ThemeTransitions;
+    zIndex: ThemeZIndex;
+}
+interface ThemeProviderContext {
+    theme: Readonly<Ref<Theme>>;
+    mode: Readonly<Ref<ThemeMode>>;
+    isDark: Readonly<Ref<boolean>>;
+    isLight: Readonly<Ref<boolean>>;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+    applyTheme: () => void;
+}
+declare const THEME_INJECTION_KEY: InjectionKey<ThemeProviderContext>;
+type ThemeConfig = Partial<Theme> | {
+    light?: Partial<Theme>;
+    dark?: Partial<Theme>;
+};
+interface ThemeProviderProps {
+    mode?: ThemeMode;
+    theme?: ThemeConfig;
+    enableTransitions?: boolean;
+    persistMode?: boolean;
+    storageKey?: string;
+}
+
+type ColorPreset = Theme['colors'];
+declare const SEMANTIC_COLOR_KEYS: readonly ["primary", "primaryLight", "primaryDark", "onPrimary", "secondary", "secondaryLight", "secondaryDark", "success", "successLight", "successDark", "warning", "warningLight", "warningDark", "error", "errorLight", "errorDark", "info", "infoLight", "infoDark", "background", "backgroundAlt", "surface", "surfaceAlt", "surfaceRaised", "surfaceOverlay", "modalBackdrop", "text", "textSecondary", "textTertiary", "textInverse", "textPlaceholder", "textDisabled", "borderLight", "borderMedium", "borderStrong", "borderInverse", "focus", "focusRing", "neutral"];
+declare const defaultColorPreset: ColorPreset;
+declare const defaultColorPresetDark: ColorPreset;
+declare const defaultSpacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly '4xl': "6rem";
+};
+declare const defaultTypography: {
+    readonly fontFamily: {
+        readonly base: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+        readonly heading: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+        readonly mono: "'IBM Plex Mono', 'Courier New', monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeight: {
+        readonly thin: 100;
+        readonly light: 300;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+    };
+    readonly lineHeight: {
+        readonly none: 1;
+        readonly tight: 1.25;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+};
+declare const defaultShadowDefinitions: Record<string, ShadowLayer[]>;
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+declare function shadowLayersToCSS(layers: ShadowLayer[]): string;
+declare const defaultShadows: ThemeShadows;
+declare const defaultRadius: {
+    readonly none: "0";
+    readonly xs: "0.125rem";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly '3xl': "1.5rem";
+    readonly full: "9999px";
+};
+declare const defaultTransitions: {
+    readonly duration: {
+        readonly fast: "150ms";
+        readonly base: "300ms";
+        readonly slow: "500ms";
+    };
+    readonly timing: {
+        readonly ease: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly linear: "linear";
+    };
+};
+declare const defaultZIndex: {
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly fixed: 1030;
+    readonly modalBackdrop: 1040;
+    readonly modal: 1050;
+    readonly popover: 1060;
+    readonly tooltip: 1070;
+    readonly toast: 1080;
+};
+declare function createTheme(overrides: {
+    light?: Partial<ColorPreset>;
+    dark?: Partial<ColorPreset>;
+}): {
+    light: Theme;
+    dark: Theme;
+};
+declare const defaultTheme: Theme;
+
+interface LogoVariants {
+    primary: string;
+    favicon32: string;
+    favicon16: string;
+    appleTouchIcon: string;
+    pwa192: string;
+    pwa512: string;
+}
+interface BrandingConfig {
+    name: string;
+    tagline: string;
+    logos: LogoVariants;
+}
+declare const LOGO_VARIANT_SIZES: Record<keyof LogoVariants, {
+    width: number;
+    height: number;
+}>;
+declare const defaultBranding: BrandingConfig;
+declare function createBranding(overrides?: Partial<BrandingConfig>): BrandingConfig;
+
+export { type BrandingConfig, type ColorPreset, type ComponentProps, LOGO_VARIANT_SIZES, type LogoVariants, SEMANTIC_COLOR_KEYS, type ShadowLayer, type Size, THEME_INJECTION_KEY, type Theme, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeProviderContext, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, type ThemeSpacing, type ThemeTransitions, type ThemeTypography, type ThemeZIndex, type Variant, createBranding, createTheme, defaultBranding, defaultColorPreset, defaultColorPresetDark, defaultRadius, defaultShadowDefinitions, defaultShadows, defaultSpacing, defaultTheme, defaultTransitions, defaultTypography, defaultZIndex, hexToRgb, shadowLayersToCSS };

package/dist/index.d.ts

@@ -0,0 +1,305 @@
+import { InjectionKey, Ref } from 'vue';
+
+interface ComponentProps {
+    class?: string;
+    style?: string | Record<string, string>;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'primary' | 'secondary' | 'tertiary';
+
+type ThemeMode = 'light' | 'dark' | 'auto';
+interface ThemeColors {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    onPrimary: string;
+    secondary: string;
+    secondaryLight: string;
+    secondaryDark: string;
+    success: string;
+    successLight: string;
+    successDark: string;
+    warning: string;
+    warningLight: string;
+    warningDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    info: string;
+    infoLight: string;
+    infoDark: string;
+    background: string;
+    backgroundAlt: string;
+    surface: string;
+    surfaceAlt: string;
+    surfaceRaised: string;
+    surfaceOverlay: string;
+    modalBackdrop: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    textInverse: string;
+    textPlaceholder: string;
+    textDisabled: string;
+    borderLight: string;
+    borderMedium: string;
+    borderStrong: string;
+    borderInverse: string;
+    focus: string;
+    focusRing: string;
+    neutral: string;
+}
+interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+}
+interface ThemeTypography {
+    fontFamily: {
+        base: string;
+        heading: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    fontWeight: {
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+    };
+    lineHeight: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+    };
+}
+interface ThemeShadows {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    none: string;
+}
+interface ShadowLayer {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
+    opacity: number;
+    inset?: boolean;
+}
+interface ThemeRadius {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+}
+interface ThemeTransitions {
+    duration: {
+        fast: string;
+        base: string;
+        slow: string;
+    };
+    timing: {
+        ease: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+        linear: string;
+    };
+}
+interface ThemeZIndex {
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+    toast: number;
+}
+interface Theme {
+    mode: ThemeMode;
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    shadows: ThemeShadows;
+    shadowDefinitions: Record<string, ShadowLayer[]>;
+    radius: ThemeRadius;
+    transitions: ThemeTransitions;
+    zIndex: ThemeZIndex;
+}
+interface ThemeProviderContext {
+    theme: Readonly<Ref<Theme>>;
+    mode: Readonly<Ref<ThemeMode>>;
+    isDark: Readonly<Ref<boolean>>;
+    isLight: Readonly<Ref<boolean>>;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+    applyTheme: () => void;
+}
+declare const THEME_INJECTION_KEY: InjectionKey<ThemeProviderContext>;
+type ThemeConfig = Partial<Theme> | {
+    light?: Partial<Theme>;
+    dark?: Partial<Theme>;
+};
+interface ThemeProviderProps {
+    mode?: ThemeMode;
+    theme?: ThemeConfig;
+    enableTransitions?: boolean;
+    persistMode?: boolean;
+    storageKey?: string;
+}
+
+type ColorPreset = Theme['colors'];
+declare const SEMANTIC_COLOR_KEYS: readonly ["primary", "primaryLight", "primaryDark", "onPrimary", "secondary", "secondaryLight", "secondaryDark", "success", "successLight", "successDark", "warning", "warningLight", "warningDark", "error", "errorLight", "errorDark", "info", "infoLight", "infoDark", "background", "backgroundAlt", "surface", "surfaceAlt", "surfaceRaised", "surfaceOverlay", "modalBackdrop", "text", "textSecondary", "textTertiary", "textInverse", "textPlaceholder", "textDisabled", "borderLight", "borderMedium", "borderStrong", "borderInverse", "focus", "focusRing", "neutral"];
+declare const defaultColorPreset: ColorPreset;
+declare const defaultColorPresetDark: ColorPreset;
+declare const defaultSpacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly '4xl': "6rem";
+};
+declare const defaultTypography: {
+    readonly fontFamily: {
+        readonly base: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+        readonly heading: "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+        readonly mono: "'IBM Plex Mono', 'Courier New', monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeight: {
+        readonly thin: 100;
+        readonly light: 300;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+    };
+    readonly lineHeight: {
+        readonly none: 1;
+        readonly tight: 1.25;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+};
+declare const defaultShadowDefinitions: Record<string, ShadowLayer[]>;
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+declare function shadowLayersToCSS(layers: ShadowLayer[]): string;
+declare const defaultShadows: ThemeShadows;
+declare const defaultRadius: {
+    readonly none: "0";
+    readonly xs: "0.125rem";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly '3xl': "1.5rem";
+    readonly full: "9999px";
+};
+declare const defaultTransitions: {
+    readonly duration: {
+        readonly fast: "150ms";
+        readonly base: "300ms";
+        readonly slow: "500ms";
+    };
+    readonly timing: {
+        readonly ease: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly linear: "linear";
+    };
+};
+declare const defaultZIndex: {
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly fixed: 1030;
+    readonly modalBackdrop: 1040;
+    readonly modal: 1050;
+    readonly popover: 1060;
+    readonly tooltip: 1070;
+    readonly toast: 1080;
+};
+declare function createTheme(overrides: {
+    light?: Partial<ColorPreset>;
+    dark?: Partial<ColorPreset>;
+}): {
+    light: Theme;
+    dark: Theme;
+};
+declare const defaultTheme: Theme;
+
+interface LogoVariants {
+    primary: string;
+    favicon32: string;
+    favicon16: string;
+    appleTouchIcon: string;
+    pwa192: string;
+    pwa512: string;
+}
+interface BrandingConfig {
+    name: string;
+    tagline: string;
+    logos: LogoVariants;
+}
+declare const LOGO_VARIANT_SIZES: Record<keyof LogoVariants, {
+    width: number;
+    height: number;
+}>;
+declare const defaultBranding: BrandingConfig;
+declare function createBranding(overrides?: Partial<BrandingConfig>): BrandingConfig;
+
+export { type BrandingConfig, type ColorPreset, type ComponentProps, LOGO_VARIANT_SIZES, type LogoVariants, SEMANTIC_COLOR_KEYS, type ShadowLayer, type Size, THEME_INJECTION_KEY, type Theme, type ThemeColors, type ThemeConfig, type ThemeMode, type ThemeProviderContext, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, type ThemeSpacing, type ThemeTransitions, type ThemeTypography, type ThemeZIndex, type Variant, createBranding, createTheme, defaultBranding, defaultColorPreset, defaultColorPresetDark, defaultRadius, defaultShadowDefinitions, defaultShadows, defaultSpacing, defaultTheme, defaultTransitions, defaultTypography, defaultZIndex, hexToRgb, shadowLayersToCSS };