@autumnsgrove/groveengine 0.3.2 → 0.4.0

package/dist/ui/tokens/colors.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Grove Design System - Color Tokens
+ *
+ * All color values for the Grove design system.
+ */
+export declare const grove: {
+    readonly 50: "#f0fdf4";
+    readonly 100: "#dcfce7";
+    readonly 200: "#bbf7d0";
+    readonly 300: "#86efac";
+    readonly 400: "#4ade80";
+    readonly 500: "#22c55e";
+    readonly 600: "#16a34a";
+    readonly 700: "#15803d";
+    readonly 800: "#166534";
+    readonly 900: "#14532d";
+    readonly 950: "#052e16";
+};
+export declare const cream: {
+    readonly DEFAULT: "#fefdfb";
+    readonly 50: "#fefdfb";
+    readonly 100: "#fdfcf8";
+    readonly 200: "#faf8f3";
+    readonly 300: "#f5f2ea";
+    readonly 400: "#ede9de";
+    readonly 500: "#e2ddd0";
+};
+export declare const bark: {
+    readonly DEFAULT: "#3d2914";
+    readonly 50: "#f9f6f3";
+    readonly 100: "#f0e9e1";
+    readonly 200: "#e0d2c2";
+    readonly 300: "#ccb59c";
+    readonly 400: "#b69575";
+    readonly 500: "#a57c5a";
+    readonly 600: "#8a6347";
+    readonly 700: "#6f4d39";
+    readonly 800: "#5a3f30";
+    readonly 900: "#3d2914";
+    readonly 950: "#2a1b0d";
+};
+export declare const semantic: {
+    readonly primary: {
+        readonly DEFAULT: "#16a34a";
+        readonly foreground: "#ffffff";
+        readonly hover: "#15803d";
+        readonly active: "#166534";
+    };
+    readonly secondary: {
+        readonly DEFAULT: "#e2ddd0";
+        readonly foreground: "#3d2914";
+        readonly hover: "#ede9de";
+        readonly active: "#f5f2ea";
+    };
+    readonly background: "#fefdfb";
+    readonly foreground: "#3d2914";
+    readonly muted: {
+        readonly DEFAULT: "#f5f2ea";
+        readonly foreground: "#6f4d39";
+    };
+    readonly accent: {
+        readonly DEFAULT: "#dcfce7";
+        readonly foreground: "#166534";
+    };
+    readonly border: "#faf8f3";
+    readonly input: "#faf8f3";
+    readonly ring: "#22c55e";
+};
+export declare const status: {
+    readonly success: {
+        readonly DEFAULT: "#22c55e";
+        readonly light: "#dcfce7";
+        readonly foreground: "#166534";
+    };
+    readonly warning: {
+        readonly DEFAULT: "#f59e0b";
+        readonly light: "#fef3c7";
+        readonly foreground: "#92400e";
+    };
+    readonly error: {
+        readonly DEFAULT: "#dc2626";
+        readonly light: "#fee2e2";
+        readonly foreground: "#991b1b";
+    };
+    readonly info: {
+        readonly DEFAULT: "#0ea5e9";
+        readonly light: "#e0f2fe";
+        readonly foreground: "#075985";
+    };
+};
+export declare const colors: {
+    readonly grove: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly cream: {
+        readonly DEFAULT: "#fefdfb";
+        readonly 50: "#fefdfb";
+        readonly 100: "#fdfcf8";
+        readonly 200: "#faf8f3";
+        readonly 300: "#f5f2ea";
+        readonly 400: "#ede9de";
+        readonly 500: "#e2ddd0";
+    };
+    readonly bark: {
+        readonly DEFAULT: "#3d2914";
+        readonly 50: "#f9f6f3";
+        readonly 100: "#f0e9e1";
+        readonly 200: "#e0d2c2";
+        readonly 300: "#ccb59c";
+        readonly 400: "#b69575";
+        readonly 500: "#a57c5a";
+        readonly 600: "#8a6347";
+        readonly 700: "#6f4d39";
+        readonly 800: "#5a3f30";
+        readonly 900: "#3d2914";
+        readonly 950: "#2a1b0d";
+    };
+    readonly semantic: {
+        readonly primary: {
+            readonly DEFAULT: "#16a34a";
+            readonly foreground: "#ffffff";
+            readonly hover: "#15803d";
+            readonly active: "#166534";
+        };
+        readonly secondary: {
+            readonly DEFAULT: "#e2ddd0";
+            readonly foreground: "#3d2914";
+            readonly hover: "#ede9de";
+            readonly active: "#f5f2ea";
+        };
+        readonly background: "#fefdfb";
+        readonly foreground: "#3d2914";
+        readonly muted: {
+            readonly DEFAULT: "#f5f2ea";
+            readonly foreground: "#6f4d39";
+        };
+        readonly accent: {
+            readonly DEFAULT: "#dcfce7";
+            readonly foreground: "#166534";
+        };
+        readonly border: "#faf8f3";
+        readonly input: "#faf8f3";
+        readonly ring: "#22c55e";
+    };
+    readonly status: {
+        readonly success: {
+            readonly DEFAULT: "#22c55e";
+            readonly light: "#dcfce7";
+            readonly foreground: "#166534";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#f59e0b";
+            readonly light: "#fef3c7";
+            readonly foreground: "#92400e";
+        };
+        readonly error: {
+            readonly DEFAULT: "#dc2626";
+            readonly light: "#fee2e2";
+            readonly foreground: "#991b1b";
+        };
+        readonly info: {
+            readonly DEFAULT: "#0ea5e9";
+            readonly light: "#e0f2fe";
+            readonly foreground: "#075985";
+        };
+    };
+};
+export type GroveColor = typeof grove;
+export type CreamColor = typeof cream;
+export type BarkColor = typeof bark;
+export type SemanticColor = typeof semantic;
+export type StatusColor = typeof status;
+export type Colors = typeof colors;

package/dist/ui/tokens/colors.js

@@ -0,0 +1,97 @@
+/**
+ * Grove Design System - Color Tokens
+ *
+ * All color values for the Grove design system.
+ */
+export const grove = {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a', // PRIMARY
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+    950: '#052e16',
+};
+export const cream = {
+    DEFAULT: '#fefdfb',
+    50: '#fefdfb',
+    100: '#fdfcf8',
+    200: '#faf8f3',
+    300: '#f5f2ea',
+    400: '#ede9de',
+    500: '#e2ddd0',
+};
+export const bark = {
+    DEFAULT: '#3d2914',
+    50: '#f9f6f3',
+    100: '#f0e9e1',
+    200: '#e0d2c2',
+    300: '#ccb59c',
+    400: '#b69575',
+    500: '#a57c5a',
+    600: '#8a6347',
+    700: '#6f4d39',
+    800: '#5a3f30',
+    900: '#3d2914', // PRIMARY
+    950: '#2a1b0d',
+};
+export const semantic = {
+    primary: {
+        DEFAULT: grove[600],
+        foreground: '#ffffff',
+        hover: grove[700],
+        active: grove[800],
+    },
+    secondary: {
+        DEFAULT: cream[500],
+        foreground: bark.DEFAULT,
+        hover: cream[400],
+        active: cream[300],
+    },
+    background: cream.DEFAULT,
+    foreground: bark.DEFAULT,
+    muted: {
+        DEFAULT: cream[300],
+        foreground: bark[700],
+    },
+    accent: {
+        DEFAULT: grove[100],
+        foreground: grove[800],
+    },
+    border: cream[200],
+    input: cream[200],
+    ring: grove[500],
+};
+export const status = {
+    success: {
+        DEFAULT: grove[500],
+        light: grove[100],
+        foreground: grove[800],
+    },
+    warning: {
+        DEFAULT: '#f59e0b',
+        light: '#fef3c7',
+        foreground: '#92400e',
+    },
+    error: {
+        DEFAULT: '#dc2626',
+        light: '#fee2e2',
+        foreground: '#991b1b',
+    },
+    info: {
+        DEFAULT: '#0ea5e9',
+        light: '#e0f2fe',
+        foreground: '#075985',
+    },
+};
+export const colors = {
+    grove,
+    cream,
+    bark,
+    semantic,
+    status,
+};

package/dist/ui/tokens/effects.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Grove Design System - Effect Tokens
+ *
+ * Borders, shadows, and visual effects.
+ */
+export declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly DEFAULT: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly grove: "0.75rem";
+    readonly 'grove-lg': "1rem";
+    readonly 'grove-xl': "1.5rem";
+    readonly full: "9999px";
+};
+export declare const borderWidth: {
+    readonly DEFAULT: "1px";
+    readonly '0': "0";
+    readonly '2': "2px";
+    readonly '4': "4px";
+};
+export declare const boxShadow: {
+    readonly 'grove-sm': "0 1px 2px 0 rgb(61 41 20 / 0.05)";
+    readonly grove: "0 2px 8px -2px rgb(61 41 20 / 0.08), 0 1px 2px -1px rgb(61 41 20 / 0.04)";
+    readonly 'grove-md': "0 4px 12px -4px rgb(61 41 20 / 0.1), 0 2px 4px -2px rgb(61 41 20 / 0.05)";
+    readonly 'grove-lg': "0 8px 24px -8px rgb(61 41 20 / 0.12), 0 4px 8px -4px rgb(61 41 20 / 0.06)";
+    readonly 'grove-xl': "0 16px 48px -16px rgb(61 41 20 / 0.15), 0 8px 16px -8px rgb(61 41 20 / 0.08)";
+    readonly 'grove-inner': "inset 0 1px 2px 0 rgb(61 41 20 / 0.05)";
+    readonly 'grove-glow': "0 0 0 3px rgb(22 163 74 / 0.15)";
+    readonly focus: "0 0 0 2px #fefdfb, 0 0 0 4px #22c55e";
+    readonly 'focus-error': "0 0 0 2px #fefdfb, 0 0 0 4px #dc2626";
+};
+export declare const blur: {
+    readonly grove: "8px";
+    readonly 'grove-lg': "16px";
+};
+export declare const opacity: {
+    readonly '0': "0";
+    readonly '5': "0.05";
+    readonly '10': "0.1";
+    readonly '20': "0.2";
+    readonly '25': "0.25";
+    readonly '30': "0.3";
+    readonly '40': "0.4";
+    readonly '50': "0.5";
+    readonly '60': "0.6";
+    readonly '70': "0.7";
+    readonly '75': "0.75";
+    readonly '80': "0.8";
+    readonly '90': "0.9";
+    readonly '95': "0.95";
+    readonly '100': "1";
+};
+export declare const effects: {
+    readonly borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.125rem";
+        readonly DEFAULT: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly grove: "0.75rem";
+        readonly 'grove-lg': "1rem";
+        readonly 'grove-xl': "1.5rem";
+        readonly full: "9999px";
+    };
+    readonly borderWidth: {
+        readonly DEFAULT: "1px";
+        readonly '0': "0";
+        readonly '2': "2px";
+        readonly '4': "4px";
+    };
+    readonly boxShadow: {
+        readonly 'grove-sm': "0 1px 2px 0 rgb(61 41 20 / 0.05)";
+        readonly grove: "0 2px 8px -2px rgb(61 41 20 / 0.08), 0 1px 2px -1px rgb(61 41 20 / 0.04)";
+        readonly 'grove-md': "0 4px 12px -4px rgb(61 41 20 / 0.1), 0 2px 4px -2px rgb(61 41 20 / 0.05)";
+        readonly 'grove-lg': "0 8px 24px -8px rgb(61 41 20 / 0.12), 0 4px 8px -4px rgb(61 41 20 / 0.06)";
+        readonly 'grove-xl': "0 16px 48px -16px rgb(61 41 20 / 0.15), 0 8px 16px -8px rgb(61 41 20 / 0.08)";
+        readonly 'grove-inner': "inset 0 1px 2px 0 rgb(61 41 20 / 0.05)";
+        readonly 'grove-glow': "0 0 0 3px rgb(22 163 74 / 0.15)";
+        readonly focus: "0 0 0 2px #fefdfb, 0 0 0 4px #22c55e";
+        readonly 'focus-error': "0 0 0 2px #fefdfb, 0 0 0 4px #dc2626";
+    };
+    readonly blur: {
+        readonly grove: "8px";
+        readonly 'grove-lg': "16px";
+    };
+    readonly opacity: {
+        readonly '0': "0";
+        readonly '5': "0.05";
+        readonly '10': "0.1";
+        readonly '20': "0.2";
+        readonly '25': "0.25";
+        readonly '30': "0.3";
+        readonly '40': "0.4";
+        readonly '50': "0.5";
+        readonly '60': "0.6";
+        readonly '70': "0.7";
+        readonly '75': "0.75";
+        readonly '80': "0.8";
+        readonly '90': "0.9";
+        readonly '95': "0.95";
+        readonly '100': "1";
+    };
+};
+export type BorderRadius = typeof borderRadius;
+export type BorderWidth = typeof borderWidth;
+export type BoxShadow = typeof boxShadow;
+export type Blur = typeof blur;
+export type Opacity = typeof opacity;
+export type Effects = typeof effects;

package/dist/ui/tokens/effects.js

@@ -0,0 +1,61 @@
+/**
+ * Grove Design System - Effect Tokens
+ *
+ * Borders, shadows, and visual effects.
+ */
+export const borderRadius = {
+    'none': '0',
+    'sm': '0.125rem', // 2px
+    'DEFAULT': '0.25rem', // 4px
+    'md': '0.375rem', // 6px
+    'lg': '0.5rem', // 8px
+    'grove': '0.75rem', // 12px - Primary Grove radius
+    'grove-lg': '1rem', // 16px
+    'grove-xl': '1.5rem', // 24px
+    'full': '9999px',
+};
+export const borderWidth = {
+    'DEFAULT': '1px',
+    '0': '0',
+    '2': '2px',
+    '4': '4px',
+};
+export const boxShadow = {
+    'grove-sm': '0 1px 2px 0 rgb(61 41 20 / 0.05)',
+    'grove': '0 2px 8px -2px rgb(61 41 20 / 0.08), 0 1px 2px -1px rgb(61 41 20 / 0.04)',
+    'grove-md': '0 4px 12px -4px rgb(61 41 20 / 0.1), 0 2px 4px -2px rgb(61 41 20 / 0.05)',
+    'grove-lg': '0 8px 24px -8px rgb(61 41 20 / 0.12), 0 4px 8px -4px rgb(61 41 20 / 0.06)',
+    'grove-xl': '0 16px 48px -16px rgb(61 41 20 / 0.15), 0 8px 16px -8px rgb(61 41 20 / 0.08)',
+    'grove-inner': 'inset 0 1px 2px 0 rgb(61 41 20 / 0.05)',
+    'grove-glow': '0 0 0 3px rgb(22 163 74 / 0.15)',
+    'focus': '0 0 0 2px #fefdfb, 0 0 0 4px #22c55e',
+    'focus-error': '0 0 0 2px #fefdfb, 0 0 0 4px #dc2626',
+};
+export const blur = {
+    'grove': '8px',
+    'grove-lg': '16px',
+};
+export const opacity = {
+    '0': '0',
+    '5': '0.05',
+    '10': '0.1',
+    '20': '0.2',
+    '25': '0.25',
+    '30': '0.3',
+    '40': '0.4',
+    '50': '0.5',
+    '60': '0.6',
+    '70': '0.7',
+    '75': '0.75',
+    '80': '0.8',
+    '90': '0.9',
+    '95': '0.95',
+    '100': '1',
+};
+export const effects = {
+    borderRadius,
+    borderWidth,
+    boxShadow,
+    blur,
+    opacity,
+};

package/dist/ui/tokens/index.d.ts

@@ -0,0 +1,6 @@
+export * from './colors.js';
+export * from './typography.js';
+export * from './spacing.js';
+export * from './effects.js';
+export * from './animation.js';
+export declare const TOKENS_VERSION = "0.2.0";

package/dist/ui/tokens/index.js

@@ -0,0 +1,19 @@
+// GroveUI - Design Tokens
+//
+// This module exports design tokens for the Grove Design System:
+// colors, typography, spacing, effects, animation
+//
+// Usage:
+//   import { colors, grove, bark, cream } from '@groveengine/ui/tokens';
+// Design tokens will be added here after extraction from GroveEngine
+// The tokens define the visual language of the Grove platform:
+// - Grove Green: Primary brand color (#16a34a)
+// - Bark Brown: Text and dark accents (#3d2914)
+// - Cream: Background and light surfaces (#fefdfb)
+// Design token exports
+export * from './colors.js';
+export * from './typography.js';
+export * from './spacing.js';
+export * from './effects.js';
+export * from './animation.js';
+export const TOKENS_VERSION = '0.2.0';

package/dist/ui/tokens/spacing.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Grove Design System - Spacing & Sizing Tokens
+ *
+ * Consistent spacing scale for margins, padding, and gaps.
+ */
+export declare const spacing: {
+    readonly '0': "0";
+    readonly px: "1px";
+    readonly '0.5': "0.125rem";
+    readonly '1': "0.25rem";
+    readonly '1.5': "0.375rem";
+    readonly '2': "0.5rem";
+    readonly '2.5': "0.625rem";
+    readonly '3': "0.75rem";
+    readonly '3.5': "0.875rem";
+    readonly '4': "1rem";
+    readonly '5': "1.25rem";
+    readonly '6': "1.5rem";
+    readonly '7': "1.75rem";
+    readonly '8': "2rem";
+    readonly '9': "2.25rem";
+    readonly '10': "2.5rem";
+    readonly '11': "2.75rem";
+    readonly '12': "3rem";
+    readonly '14': "3.5rem";
+    readonly '16': "4rem";
+    readonly '18': "4.5rem";
+    readonly '20': "5rem";
+    readonly '22': "5.5rem";
+    readonly '24': "6rem";
+    readonly '30': "7.5rem";
+};
+export declare const containerSizes: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+export declare const contentWidths: {
+    readonly prose: "65ch";
+    readonly 'prose-wide': "75ch";
+    readonly 'prose-narrow': "55ch";
+};
+export declare const sizing: {
+    readonly spacing: {
+        readonly '0': "0";
+        readonly px: "1px";
+        readonly '0.5': "0.125rem";
+        readonly '1': "0.25rem";
+        readonly '1.5': "0.375rem";
+        readonly '2': "0.5rem";
+        readonly '2.5': "0.625rem";
+        readonly '3': "0.75rem";
+        readonly '3.5': "0.875rem";
+        readonly '4': "1rem";
+        readonly '5': "1.25rem";
+        readonly '6': "1.5rem";
+        readonly '7': "1.75rem";
+        readonly '8': "2rem";
+        readonly '9': "2.25rem";
+        readonly '10': "2.5rem";
+        readonly '11': "2.75rem";
+        readonly '12': "3rem";
+        readonly '14': "3.5rem";
+        readonly '16': "4rem";
+        readonly '18': "4.5rem";
+        readonly '20': "5rem";
+        readonly '22': "5.5rem";
+        readonly '24': "6rem";
+        readonly '30': "7.5rem";
+    };
+    readonly containerSizes: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+    readonly contentWidths: {
+        readonly prose: "65ch";
+        readonly 'prose-wide': "75ch";
+        readonly 'prose-narrow': "55ch";
+    };
+};
+export type Spacing = typeof spacing;
+export type ContainerSizes = typeof containerSizes;
+export type ContentWidths = typeof contentWidths;
+export type Sizing = typeof sizing;

package/dist/ui/tokens/spacing.js

@@ -0,0 +1,49 @@
+/**
+ * Grove Design System - Spacing & Sizing Tokens
+ *
+ * Consistent spacing scale for margins, padding, and gaps.
+ */
+export const spacing = {
+    '0': '0',
+    'px': '1px',
+    '0.5': '0.125rem', // 2px
+    '1': '0.25rem', // 4px
+    '1.5': '0.375rem', // 6px
+    '2': '0.5rem', // 8px
+    '2.5': '0.625rem', // 10px
+    '3': '0.75rem', // 12px
+    '3.5': '0.875rem', // 14px
+    '4': '1rem', // 16px
+    '5': '1.25rem', // 20px
+    '6': '1.5rem', // 24px
+    '7': '1.75rem', // 28px
+    '8': '2rem', // 32px
+    '9': '2.25rem', // 36px
+    '10': '2.5rem', // 40px
+    '11': '2.75rem', // 44px
+    '12': '3rem', // 48px
+    '14': '3.5rem', // 56px
+    '16': '4rem', // 64px
+    '18': '4.5rem', // 72px
+    '20': '5rem', // 80px
+    '22': '5.5rem', // 88px
+    '24': '6rem', // 96px
+    '30': '7.5rem', // 120px
+};
+export const containerSizes = {
+    'sm': '640px',
+    'md': '768px',
+    'lg': '1024px',
+    'xl': '1280px',
+    '2xl': '1536px',
+};
+export const contentWidths = {
+    'prose': '65ch',
+    'prose-wide': '75ch',
+    'prose-narrow': '55ch',
+};
+export const sizing = {
+    spacing,
+    containerSizes,
+    contentWidths,
+};