@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/dist/static/render.d.ts

@@ -0,0 +1,12 @@
+import { ClassSpec } from './classes';
+export interface RenderSpec {
+    tag: string;
+    classSpec: ClassSpec;
+    extraAttrs?: Record<string, string>;
+    void?: boolean;
+    customColorVars?: {
+        base?: string;
+        text?: string;
+    };
+}
+export declare function render(spec: RenderSpec, props: Record<string, unknown>, children: string): string;

package/dist/static/specs.d.ts

@@ -0,0 +1,2 @@
+import { RenderSpec } from './render';
+export declare const SPECS: Record<string, RenderSpec>;

package/dist/static/types.d.ts

@@ -0,0 +1,43 @@
+export type SemanticKind = 'neutral' | 'primary' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+export type ColorKind = 'boulder' | 'neon-blue' | 'light-blue' | 'neon-orange' | 'neon-purple' | 'neon-green' | 'neon-mint' | 'neon-pink' | 'yellow' | 'red';
+export type ComponentKind = SemanticKind | ColorKind;
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ComponentVariant = 'solid' | 'outline' | 'subtle' | 'ghost' | 'link';
+export interface StaticCustomColors {
+    baseColor?: string;
+    textColor?: string;
+}
+export type HtmlString = string;
+export type AlertKind = ComponentKind;
+export type AvatarSize = ComponentSize;
+export type BreadcrumbsKind = ComponentKind;
+export type ButtonKind = ComponentKind;
+export type ButtonSize = ComponentSize;
+export type ButtonVariant = ComponentVariant;
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type CardKind = ComponentKind;
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'subtle';
+export type FieldLabelPosition = 'top' | 'left';
+export type GroupOrientation = 'horizontal' | 'vertical';
+export type NavBarKind = ComponentKind;
+export type PagePanelMode = 'auto' | 'persistent' | 'drawer';
+export type PaginationKind = ComponentKind;
+export type PanelKind = ComponentKind;
+export type PanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type PanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export type ProgressSize = ComponentSize;
+export type SidebarKind = ComponentKind;
+export type SidebarSide = 'left' | 'right';
+export type SpinnerSize = ComponentSize;
+export type SpinnerVariant = 'circular' | 'dots' | 'crosshair';
+export type TableKind = ComponentKind;
+export type TableVariant = 'default' | 'compact' | 'comfortable';
+export type TagVariant = 'solid' | 'outline' | 'subtle' | 'ghost';
+export type TagSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ToolbarKind = ComponentKind;
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export type ToolbarCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export type TooltipKind = ComponentKind;
+export type TooltipVariant = ComponentVariant;
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';

package/dist/tokens.css

@@ -528,6 +528,14 @@
  * Reference theme with gray neutral colors and blue primary.
  * This is the default, more subdued theme.
  */
+/**
+ * Theme shade-scale helper
+ *
+ * Shared map + mixin that each theme uses to emit Tailwind-style shade aliases
+ * (`--sk-primary-50`, `--sk-primary-200`, ..., `--sk-primary-950`) for the semantic kinds.
+ * The aliases point at foundation primitives (`--sk-color-<family>-05..95`) so they always
+ * follow the theme's chosen color family.
+ */
 [data-scheme=greyscale] {
   /* Neutral Kind */
   --sk-neutral-base: var(--sk-color-gray-50);
@@ -571,8 +579,101 @@
   --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
   --sk-info-text: oklch(1 0 0);
   --sk-info-text-contrast: var(--sk-color-gray-95);
+  /* Short aliases for the semantic kinds defined above. Must live inside the theme block so
+   * that `var(--sk-<kind>-base)` resolves on this element's cascade. */
+  --sk-neutral: var(--sk-neutral-base);
+  --sk-primary: var(--sk-primary-base);
+  --sk-accent: var(--sk-accent-base);
+  --sk-info: var(--sk-info-base);
+  --sk-success: var(--sk-success-base);
+  --sk-warning: var(--sk-warning-base);
+  --sk-danger: var(--sk-danger-base);
+  /* Tailwind-style shade scale (`--sk-primary-50`..`--sk-primary-950`, and so on). */
+  --sk-neutral-50: var(--sk-color-gray-05);
+  --sk-neutral-100: var(--sk-color-gray-10);
+  --sk-neutral-200: var(--sk-color-gray-20);
+  --sk-neutral-300: var(--sk-color-gray-30);
+  --sk-neutral-400: var(--sk-color-gray-40);
+  --sk-neutral-500: var(--sk-color-gray-50);
+  --sk-neutral-600: var(--sk-color-gray-60);
+  --sk-neutral-700: var(--sk-color-gray-70);
+  --sk-neutral-800: var(--sk-color-gray-80);
+  --sk-neutral-900: var(--sk-color-gray-90);
+  --sk-neutral-950: var(--sk-color-gray-95);
+  --sk-primary-50: var(--sk-color-blue-05);
+  --sk-primary-100: var(--sk-color-blue-10);
+  --sk-primary-200: var(--sk-color-blue-20);
+  --sk-primary-300: var(--sk-color-blue-30);
+  --sk-primary-400: var(--sk-color-blue-40);
+  --sk-primary-500: var(--sk-color-blue-50);
+  --sk-primary-600: var(--sk-color-blue-60);
+  --sk-primary-700: var(--sk-color-blue-70);
+  --sk-primary-800: var(--sk-color-blue-80);
+  --sk-primary-900: var(--sk-color-blue-90);
+  --sk-primary-950: var(--sk-color-blue-95);
+  --sk-accent-50: var(--sk-color-orange-05);
+  --sk-accent-100: var(--sk-color-orange-10);
+  --sk-accent-200: var(--sk-color-orange-20);
+  --sk-accent-300: var(--sk-color-orange-30);
+  --sk-accent-400: var(--sk-color-orange-40);
+  --sk-accent-500: var(--sk-color-orange-50);
+  --sk-accent-600: var(--sk-color-orange-60);
+  --sk-accent-700: var(--sk-color-orange-70);
+  --sk-accent-800: var(--sk-color-orange-80);
+  --sk-accent-900: var(--sk-color-orange-90);
+  --sk-accent-950: var(--sk-color-orange-95);
+  --sk-info-50: var(--sk-color-cyan-05);
+  --sk-info-100: var(--sk-color-cyan-10);
+  --sk-info-200: var(--sk-color-cyan-20);
+  --sk-info-300: var(--sk-color-cyan-30);
+  --sk-info-400: var(--sk-color-cyan-40);
+  --sk-info-500: var(--sk-color-cyan-50);
+  --sk-info-600: var(--sk-color-cyan-60);
+  --sk-info-700: var(--sk-color-cyan-70);
+  --sk-info-800: var(--sk-color-cyan-80);
+  --sk-info-900: var(--sk-color-cyan-90);
+  --sk-info-950: var(--sk-color-cyan-95);
+  --sk-success-50: var(--sk-color-green-05);
+  --sk-success-100: var(--sk-color-green-10);
+  --sk-success-200: var(--sk-color-green-20);
+  --sk-success-300: var(--sk-color-green-30);
+  --sk-success-400: var(--sk-color-green-40);
+  --sk-success-500: var(--sk-color-green-50);
+  --sk-success-600: var(--sk-color-green-60);
+  --sk-success-700: var(--sk-color-green-70);
+  --sk-success-800: var(--sk-color-green-80);
+  --sk-success-900: var(--sk-color-green-90);
+  --sk-success-950: var(--sk-color-green-95);
+  --sk-warning-50: var(--sk-color-yellow-05);
+  --sk-warning-100: var(--sk-color-yellow-10);
+  --sk-warning-200: var(--sk-color-yellow-20);
+  --sk-warning-300: var(--sk-color-yellow-30);
+  --sk-warning-400: var(--sk-color-yellow-40);
+  --sk-warning-500: var(--sk-color-yellow-50);
+  --sk-warning-600: var(--sk-color-yellow-60);
+  --sk-warning-700: var(--sk-color-yellow-70);
+  --sk-warning-800: var(--sk-color-yellow-80);
+  --sk-warning-900: var(--sk-color-yellow-90);
+  --sk-warning-950: var(--sk-color-yellow-95);
+  --sk-danger-50: var(--sk-color-red-05);
+  --sk-danger-100: var(--sk-color-red-10);
+  --sk-danger-200: var(--sk-color-red-20);
+  --sk-danger-300: var(--sk-color-red-30);
+  --sk-danger-400: var(--sk-color-red-40);
+  --sk-danger-500: var(--sk-color-red-50);
+  --sk-danger-600: var(--sk-color-red-60);
+  --sk-danger-700: var(--sk-color-red-70);
+  --sk-danger-800: var(--sk-color-red-80);
+  --sk-danger-900: var(--sk-color-red-90);
+  --sk-danger-950: var(--sk-color-red-95);
 }
 
+/**
+ * Greyscale Theme
+ *
+ * Reference theme with gray neutral colors and blue primary.
+ * This is the default, more subdued theme.
+ */
 /**
  * Colorful Theme
  *
@@ -622,6 +723,93 @@
   --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
   --sk-info-text: oklch(1 0 0);
   --sk-info-text-contrast: var(--sk-color-gray-95);
+  /* Short aliases for the semantic kinds defined above. Must live inside the theme block so
+   * that `var(--sk-<kind>-base)` resolves on this element's cascade. */
+  --sk-neutral: var(--sk-neutral-base);
+  --sk-primary: var(--sk-primary-base);
+  --sk-accent: var(--sk-accent-base);
+  --sk-info: var(--sk-info-base);
+  --sk-success: var(--sk-success-base);
+  --sk-warning: var(--sk-warning-base);
+  --sk-danger: var(--sk-danger-base);
+  /* Tailwind-style shade scale (`--sk-primary-50`..`--sk-primary-950`, and so on). */
+  --sk-neutral-50: var(--sk-color-blue-05);
+  --sk-neutral-100: var(--sk-color-blue-10);
+  --sk-neutral-200: var(--sk-color-blue-20);
+  --sk-neutral-300: var(--sk-color-blue-30);
+  --sk-neutral-400: var(--sk-color-blue-40);
+  --sk-neutral-500: var(--sk-color-blue-50);
+  --sk-neutral-600: var(--sk-color-blue-60);
+  --sk-neutral-700: var(--sk-color-blue-70);
+  --sk-neutral-800: var(--sk-color-blue-80);
+  --sk-neutral-900: var(--sk-color-blue-90);
+  --sk-neutral-950: var(--sk-color-blue-95);
+  --sk-primary-50: var(--sk-color-orange-05);
+  --sk-primary-100: var(--sk-color-orange-10);
+  --sk-primary-200: var(--sk-color-orange-20);
+  --sk-primary-300: var(--sk-color-orange-30);
+  --sk-primary-400: var(--sk-color-orange-40);
+  --sk-primary-500: var(--sk-color-orange-50);
+  --sk-primary-600: var(--sk-color-orange-60);
+  --sk-primary-700: var(--sk-color-orange-70);
+  --sk-primary-800: var(--sk-color-orange-80);
+  --sk-primary-900: var(--sk-color-orange-90);
+  --sk-primary-950: var(--sk-color-orange-95);
+  --sk-accent-50: var(--sk-color-blue-05);
+  --sk-accent-100: var(--sk-color-blue-10);
+  --sk-accent-200: var(--sk-color-blue-20);
+  --sk-accent-300: var(--sk-color-blue-30);
+  --sk-accent-400: var(--sk-color-blue-40);
+  --sk-accent-500: var(--sk-color-blue-50);
+  --sk-accent-600: var(--sk-color-blue-60);
+  --sk-accent-700: var(--sk-color-blue-70);
+  --sk-accent-800: var(--sk-color-blue-80);
+  --sk-accent-900: var(--sk-color-blue-90);
+  --sk-accent-950: var(--sk-color-blue-95);
+  --sk-info-50: var(--sk-color-cyan-05);
+  --sk-info-100: var(--sk-color-cyan-10);
+  --sk-info-200: var(--sk-color-cyan-20);
+  --sk-info-300: var(--sk-color-cyan-30);
+  --sk-info-400: var(--sk-color-cyan-40);
+  --sk-info-500: var(--sk-color-cyan-50);
+  --sk-info-600: var(--sk-color-cyan-60);
+  --sk-info-700: var(--sk-color-cyan-70);
+  --sk-info-800: var(--sk-color-cyan-80);
+  --sk-info-900: var(--sk-color-cyan-90);
+  --sk-info-950: var(--sk-color-cyan-95);
+  --sk-success-50: var(--sk-color-green-05);
+  --sk-success-100: var(--sk-color-green-10);
+  --sk-success-200: var(--sk-color-green-20);
+  --sk-success-300: var(--sk-color-green-30);
+  --sk-success-400: var(--sk-color-green-40);
+  --sk-success-500: var(--sk-color-green-50);
+  --sk-success-600: var(--sk-color-green-60);
+  --sk-success-700: var(--sk-color-green-70);
+  --sk-success-800: var(--sk-color-green-80);
+  --sk-success-900: var(--sk-color-green-90);
+  --sk-success-950: var(--sk-color-green-95);
+  --sk-warning-50: var(--sk-color-yellow-05);
+  --sk-warning-100: var(--sk-color-yellow-10);
+  --sk-warning-200: var(--sk-color-yellow-20);
+  --sk-warning-300: var(--sk-color-yellow-30);
+  --sk-warning-400: var(--sk-color-yellow-40);
+  --sk-warning-500: var(--sk-color-yellow-50);
+  --sk-warning-600: var(--sk-color-yellow-60);
+  --sk-warning-700: var(--sk-color-yellow-70);
+  --sk-warning-800: var(--sk-color-yellow-80);
+  --sk-warning-900: var(--sk-color-yellow-90);
+  --sk-warning-950: var(--sk-color-yellow-95);
+  --sk-danger-50: var(--sk-color-red-05);
+  --sk-danger-100: var(--sk-color-red-10);
+  --sk-danger-200: var(--sk-color-red-20);
+  --sk-danger-300: var(--sk-color-red-30);
+  --sk-danger-400: var(--sk-color-red-40);
+  --sk-danger-500: var(--sk-color-red-50);
+  --sk-danger-600: var(--sk-color-red-60);
+  --sk-danger-700: var(--sk-color-red-70);
+  --sk-danger-800: var(--sk-color-red-80);
+  --sk-danger-900: var(--sk-color-red-90);
+  --sk-danger-950: var(--sk-color-red-95);
 }
 
 /**
@@ -714,6 +902,140 @@
   --sk-red-active: color-mix(in oklch, var(--sk-red-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
   --sk-red-text: oklch(1 0 0);
   --sk-red-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Short Aliases
+   *
+   * Shorthand names so consumers can write `var(--sk-neon-pink)` directly
+   * instead of `var(--sk-neon-pink-base)`. Semantic kinds (primary, accent,
+   * etc.) are aliased inside each theme block so `var(--sk-<kind>-base)`
+   * resolves against the theme's actual values.
+   * =================================================================== */
+  --sk-boulder: var(--sk-boulder-base);
+  --sk-neon-blue: var(--sk-neon-blue-base);
+  --sk-light-blue: var(--sk-light-blue-base);
+  --sk-neon-orange: var(--sk-neon-orange-base);
+  --sk-neon-purple: var(--sk-neon-purple-base);
+  --sk-neon-green: var(--sk-neon-green-base);
+  --sk-neon-mint: var(--sk-neon-mint-base);
+  --sk-neon-pink: var(--sk-neon-pink-base);
+  --sk-yellow: var(--sk-yellow-base);
+  --sk-red: var(--sk-red-base);
+  /* ===================================================================
+   * Tailwind-style shade scale for color kinds
+   *
+   * `--sk-neon-pink-500` = palette 50 (= base); `--sk-neon-pink-200` is two steps lighter,
+   * `--sk-neon-pink-800` is much darker, etc. Full scale: 50, 100..900, 950.
+   * =================================================================== */
+  --sk-boulder-50: var(--sk-color-gray-05);
+  --sk-boulder-100: var(--sk-color-gray-10);
+  --sk-boulder-200: var(--sk-color-gray-20);
+  --sk-boulder-300: var(--sk-color-gray-30);
+  --sk-boulder-400: var(--sk-color-gray-40);
+  --sk-boulder-500: var(--sk-color-gray-50);
+  --sk-boulder-600: var(--sk-color-gray-60);
+  --sk-boulder-700: var(--sk-color-gray-70);
+  --sk-boulder-800: var(--sk-color-gray-80);
+  --sk-boulder-900: var(--sk-color-gray-90);
+  --sk-boulder-950: var(--sk-color-gray-95);
+  --sk-neon-blue-50: var(--sk-color-blue-05);
+  --sk-neon-blue-100: var(--sk-color-blue-10);
+  --sk-neon-blue-200: var(--sk-color-blue-20);
+  --sk-neon-blue-300: var(--sk-color-blue-30);
+  --sk-neon-blue-400: var(--sk-color-blue-40);
+  --sk-neon-blue-500: var(--sk-color-blue-50);
+  --sk-neon-blue-600: var(--sk-color-blue-60);
+  --sk-neon-blue-700: var(--sk-color-blue-70);
+  --sk-neon-blue-800: var(--sk-color-blue-80);
+  --sk-neon-blue-900: var(--sk-color-blue-90);
+  --sk-neon-blue-950: var(--sk-color-blue-95);
+  --sk-light-blue-50: var(--sk-color-cyan-05);
+  --sk-light-blue-100: var(--sk-color-cyan-10);
+  --sk-light-blue-200: var(--sk-color-cyan-20);
+  --sk-light-blue-300: var(--sk-color-cyan-30);
+  --sk-light-blue-400: var(--sk-color-cyan-40);
+  --sk-light-blue-500: var(--sk-color-cyan-50);
+  --sk-light-blue-600: var(--sk-color-cyan-60);
+  --sk-light-blue-700: var(--sk-color-cyan-70);
+  --sk-light-blue-800: var(--sk-color-cyan-80);
+  --sk-light-blue-900: var(--sk-color-cyan-90);
+  --sk-light-blue-950: var(--sk-color-cyan-95);
+  --sk-neon-orange-50: var(--sk-color-orange-05);
+  --sk-neon-orange-100: var(--sk-color-orange-10);
+  --sk-neon-orange-200: var(--sk-color-orange-20);
+  --sk-neon-orange-300: var(--sk-color-orange-30);
+  --sk-neon-orange-400: var(--sk-color-orange-40);
+  --sk-neon-orange-500: var(--sk-color-orange-50);
+  --sk-neon-orange-600: var(--sk-color-orange-60);
+  --sk-neon-orange-700: var(--sk-color-orange-70);
+  --sk-neon-orange-800: var(--sk-color-orange-80);
+  --sk-neon-orange-900: var(--sk-color-orange-90);
+  --sk-neon-orange-950: var(--sk-color-orange-95);
+  --sk-neon-purple-50: var(--sk-color-purple-05);
+  --sk-neon-purple-100: var(--sk-color-purple-10);
+  --sk-neon-purple-200: var(--sk-color-purple-20);
+  --sk-neon-purple-300: var(--sk-color-purple-30);
+  --sk-neon-purple-400: var(--sk-color-purple-40);
+  --sk-neon-purple-500: var(--sk-color-purple-50);
+  --sk-neon-purple-600: var(--sk-color-purple-60);
+  --sk-neon-purple-700: var(--sk-color-purple-70);
+  --sk-neon-purple-800: var(--sk-color-purple-80);
+  --sk-neon-purple-900: var(--sk-color-purple-90);
+  --sk-neon-purple-950: var(--sk-color-purple-95);
+  --sk-neon-green-50: var(--sk-color-green-05);
+  --sk-neon-green-100: var(--sk-color-green-10);
+  --sk-neon-green-200: var(--sk-color-green-20);
+  --sk-neon-green-300: var(--sk-color-green-30);
+  --sk-neon-green-400: var(--sk-color-green-40);
+  --sk-neon-green-500: var(--sk-color-green-50);
+  --sk-neon-green-600: var(--sk-color-green-60);
+  --sk-neon-green-700: var(--sk-color-green-70);
+  --sk-neon-green-800: var(--sk-color-green-80);
+  --sk-neon-green-900: var(--sk-color-green-90);
+  --sk-neon-green-950: var(--sk-color-green-95);
+  --sk-neon-mint-50: var(--sk-color-mint-05);
+  --sk-neon-mint-100: var(--sk-color-mint-10);
+  --sk-neon-mint-200: var(--sk-color-mint-20);
+  --sk-neon-mint-300: var(--sk-color-mint-30);
+  --sk-neon-mint-400: var(--sk-color-mint-40);
+  --sk-neon-mint-500: var(--sk-color-mint-50);
+  --sk-neon-mint-600: var(--sk-color-mint-60);
+  --sk-neon-mint-700: var(--sk-color-mint-70);
+  --sk-neon-mint-800: var(--sk-color-mint-80);
+  --sk-neon-mint-900: var(--sk-color-mint-90);
+  --sk-neon-mint-950: var(--sk-color-mint-95);
+  --sk-neon-pink-50: var(--sk-color-pink-05);
+  --sk-neon-pink-100: var(--sk-color-pink-10);
+  --sk-neon-pink-200: var(--sk-color-pink-20);
+  --sk-neon-pink-300: var(--sk-color-pink-30);
+  --sk-neon-pink-400: var(--sk-color-pink-40);
+  --sk-neon-pink-500: var(--sk-color-pink-50);
+  --sk-neon-pink-600: var(--sk-color-pink-60);
+  --sk-neon-pink-700: var(--sk-color-pink-70);
+  --sk-neon-pink-800: var(--sk-color-pink-80);
+  --sk-neon-pink-900: var(--sk-color-pink-90);
+  --sk-neon-pink-950: var(--sk-color-pink-95);
+  --sk-yellow-50: var(--sk-color-yellow-05);
+  --sk-yellow-100: var(--sk-color-yellow-10);
+  --sk-yellow-200: var(--sk-color-yellow-20);
+  --sk-yellow-300: var(--sk-color-yellow-30);
+  --sk-yellow-400: var(--sk-color-yellow-40);
+  --sk-yellow-500: var(--sk-color-yellow-50);
+  --sk-yellow-600: var(--sk-color-yellow-60);
+  --sk-yellow-700: var(--sk-color-yellow-70);
+  --sk-yellow-800: var(--sk-color-yellow-80);
+  --sk-yellow-900: var(--sk-color-yellow-90);
+  --sk-yellow-950: var(--sk-color-yellow-95);
+  --sk-red-50: var(--sk-color-red-05);
+  --sk-red-100: var(--sk-color-red-10);
+  --sk-red-200: var(--sk-color-red-20);
+  --sk-red-300: var(--sk-color-red-30);
+  --sk-red-400: var(--sk-color-red-40);
+  --sk-red-500: var(--sk-color-red-50);
+  --sk-red-600: var(--sk-color-red-60);
+  --sk-red-700: var(--sk-color-red-70);
+  --sk-red-800: var(--sk-color-red-80);
+  --sk-red-900: var(--sk-color-red-90);
+  --sk-red-950: var(--sk-color-red-95);
 }
 
 /**

package/dist/types/index.d.ts

@@ -0,0 +1,36 @@
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SemanticKind = 'neutral' | 'primary' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+export type ColorKind = 'boulder' | 'neon-blue' | 'light-blue' | 'neon-orange' | 'neon-purple' | 'neon-green' | 'neon-mint' | 'neon-pink' | 'yellow' | 'red';
+export type ComponentKind = SemanticKind | ColorKind;
+export type ComponentVariant = 'solid' | 'outline' | 'subtle' | 'ghost' | 'link';
+/**
+ * Custom color props interface for components.
+ * Allows overriding component colors with either a SleekSpace kind name or any CSS color value.
+ */
+export interface ComponentCustomColors {
+    /**
+     * Base color for the component. Accepts either:
+     * - A SleekSpace kind name: `"neutral"`, `"primary"`, `"accent"`, `"info"`, `"success"`,
+     *   `"warning"`, `"danger"`, `"neon-blue"`, `"light-blue"`, `"neon-orange"`,
+     *   `"neon-purple"`, `"neon-green"`, `"neon-mint"`, `"neon-pink"`, `"yellow"`, `"red"`,
+     *   `"boulder"` — resolves to the matching `--sk-<kind>-base` token.
+     * - Any CSS color value: hex (`"#8B5CF6"`), oklch (`"oklch(0.7 0.25 300)"`),
+     *   rgb/hsl (`"rgb(139, 92, 246)"`), a CSS variable (`"var(--my-color)"`), or a
+     *   named color (`"rebeccapurple"`).
+     *
+     * When provided, this overrides the color from the `kind` prop.
+     */
+    baseColor?: string;
+    /**
+     * Text/foreground color for the component. Accepts the same kind names and CSS color values
+     * as `baseColor`. If not provided, falls back to the theme's neutral text color for legibility
+     * on arbitrary custom backgrounds.
+     */
+    textColor?: string;
+    /**
+     * Border color for the component. Accepts the same kind names and CSS color values as
+     * `baseColor`. Only honoured by components that render a visible border (panels, cards,
+     * inputs, etc.); ignored elsewhere.
+     */
+    borderColor?: string;
+}

package/docs/guides/installation.md

@@ -48,13 +48,19 @@ This registers all SleekSpace CSS custom properties with Tailwind's `@theme` sys
 
 ## TypeScript Support
 
-For VS Code with Volar, add the global types to your `tsconfig.json`:
+For VS Code with Volar, wire up the global component type augmentation. The recommended approach is a one-line triple-slash reference in one of your own `.d.ts` files (for example `src/shims.d.ts` or `env.d.ts`):
+
+```typescript
+/// <reference types="@skewedaspect/sleekspace-ui/global" />
+```
+
+Alternatively, include the declaration file directly in your `tsconfig.json`:
 
 ```json
 {
   "include": [
     "src/**/*",
-    "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts"
+    "node_modules/@skewedaspect/sleekspace-ui/dist/global.d.ts"
   ]
 }
 ```

package/docs/guides/pure-css/_meta.yaml

@@ -0,0 +1,8 @@
+guide: pure-css
+title: Sleekspace Without Vue
+sections:
+  - index
+  - class-api
+  - custom-elements
+  - static-helpers
+  - limitations