@leodamours/ds-components 0.2.10 → 0.3.0

package/dist/styles/default.d.ts

@@ -1,5 +1,8 @@
 declare const defaultTheme: {
     colors: Record<string, string>;
+    zIndex: Record<string, string>;
+    duration: Record<string, string>;
+    easing: Record<string, string>;
     fontFamily: {
         sans: string;
         mono: string;

package/dist/styles/palette.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Automatic palette generation from base colors.
+ *
+ * Algorithm derived from designer-provided token formulas:
+ * given a base color in HSL, the lightness gap (100 - L) determines
+ * how far each variant shifts toward white, while darkening multiplies
+ * the base lightness downward. Hue and saturation are preserved.
+ */
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export declare function hexToHSL(hex: string): HSL;
+export declare function hslToHex(h: number, s: number, l: number): string;
+export interface SemanticPalette {
+    base: string;
+    hover: string;
+    active: string;
+    disabled: string;
+    soft: string;
+    'soft-hover': string;
+    'soft-active': string;
+    'on-solid': string;
+    'on-soft': string;
+    border: string;
+    'border-hover': string;
+    'border-strong': string;
+}
+/**
+ * Generate a full semantic palette from a single base hex color.
+ *
+ * The algorithm preserves hue and saturation, deriving all variants
+ * by shifting lightness using the gap between the base L and white.
+ */
+export declare function generatePalette(baseHex: string): SemanticPalette;
+/** The semantic color roles that accept a base hex for palette derivation. */
+declare const SEMANTIC_ROLES: readonly ["brand", "error", "success", "warning", "info", "processing", "neutral"];
+export type SemanticRole = (typeof SEMANTIC_ROLES)[number];
+export interface ThemeBases {
+    brand: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+    processing: string;
+    neutral: string;
+}
+/**
+ * Expand a set of base colors into a flat token map with all semantic variants.
+ *
+ * @example
+ * expandBases({ brand: '#8B5CF6', error: '#E11D48', ... })
+ * // => { brand: '#8B5CF6', 'brand-hover': '#7639D4', ... }
+ */
+export declare function expandBases(bases: ThemeBases): Record<string, string>;
+/**
+ * Generate a complete CSS theme from just base colors.
+ *
+ * Only requires one hex per semantic role. All hover, soft, border,
+ * and contrast variants are derived automatically.
+ *
+ * @example
+ * const css = generateFullTheme(
+ *   { brand: '#8B5CF6', error: '#E11D48', success: '#059669',
+ *     warning: '#EA580C', info: '#6366F1', processing: '#D946EF',
+ *     neutral: '#6B5F7D' },
+ *   '[data-theme="purple"]'
+ * )
+ * // Inject into a <style> tag
+ */
+export declare function generateFullTheme(bases: ThemeBases, selector?: string): string;
+export {};

package/dist/styles/tokens.d.ts

@@ -35,6 +35,9 @@ export declare const colorTokens: {
     readonly 'brand-soft-active': "#B7E6FD";
     readonly 'brand-on-solid': "#FFFFFF";
     readonly 'brand-on-soft': "#0EA5E9";
+    readonly 'brand-border': "#B7E6FD";
+    readonly 'brand-border-hover': "#7DD3FC";
+    readonly 'brand-border-strong': "#0369A1";
     readonly 'brand-secondary': "#6366F1";
     readonly neutral: "#64748B";
     readonly 'neutral-soft': "#F8FAFC";
@@ -77,6 +80,7 @@ export declare const colorTokens: {
     readonly 'warning-on-soft': "#92400E";
     readonly 'warning-border': "#F3E6A5";
     readonly 'warning-border-hover': "#E6D378";
+    readonly 'warning-border-strong': "#B45309";
     readonly info: "#3B82F6";
     readonly 'info-hover': "#2563EB";
     readonly 'info-active': "#1D4ED8";
@@ -87,6 +91,7 @@ export declare const colorTokens: {
     readonly 'info-on-soft': "#1E40AF";
     readonly 'info-border': "#C5D7F5";
     readonly 'info-border-hover': "#A8CCF2";
+    readonly 'info-border-strong': "#1D4ED8";
     readonly processing: "#06B6D4";
     readonly 'processing-hover': "#0891B2";
     readonly 'processing-active': "#0E7490";
@@ -97,10 +102,9 @@ export declare const colorTokens: {
     readonly 'processing-on-soft': "#155E75";
     readonly 'processing-border': "#B3F0FC";
     readonly 'processing-border-hover': "#7FE8F5";
-    readonly 'transcript-bg': "#FEFCE8";
-    readonly 'transcript-highlight': "#FEF3C7";
-    readonly 'transcript-speaker': "#EDE9FE";
-    readonly 'transcript-timestamp': "#F3F4F6";
+    readonly 'processing-border-strong': "#0E7490";
+    readonly overlay: "rgba(15, 23, 42, 0.15)";
+    readonly 'focus-ring': "#0EA5E9";
 };
 export declare const spacingTokens: {
     readonly 'space-1': "4px";
@@ -123,17 +127,57 @@ export declare const shadowTokens: {
     readonly 'shadow-sm': "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
     readonly 'shadow-md': "0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1)";
     readonly 'shadow-lg': "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly 'shadow-thumb': "0 1px 3px rgba(0, 0, 0, 0.15)";
+    readonly 'shadow-card': "0 4px 2px 0 rgba(69, 89, 114, 0.02), 0 6px 14px 0 rgba(69, 89, 114, 0.06)";
+    readonly 'shadow-elevated': "0px 2px 2px 0px rgba(69, 89, 114, 0.06), 0px 6px 6px 0px rgba(69, 89, 114, 0.04)";
+    readonly 'shadow-focus': "0 0 0 0.125rem rgba(14, 165, 233, 0.2)";
+};
+export declare const zIndexTokens: {
+    readonly 'z-sticky': "10";
+    readonly 'z-dropdown': "40";
+    readonly 'z-overlay': "50";
+    readonly 'z-modal': "50";
+    readonly 'z-toast': "60";
+    readonly 'z-tooltip': "70";
+};
+export declare const transitionTokens: {
+    readonly 'duration-fast': "150ms";
+    readonly 'duration-normal': "200ms";
+    readonly 'duration-slow': "300ms";
+    readonly 'ease-default': "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly 'ease-in': "cubic-bezier(0.4, 0, 1, 1)";
+    readonly 'ease-out': "cubic-bezier(0, 0, 0.2, 1)";
+    readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
 };
 export type ColorToken = keyof typeof colorTokens;
 export type SpacingToken = keyof typeof spacingTokens;
 export type RadiusToken = keyof typeof radiusTokens;
 export type ShadowToken = keyof typeof shadowTokens;
-export type ThemeOverride = Partial<Record<ColorToken | SpacingToken | RadiusToken | ShadowToken, string>>;
+export type ZIndexToken = keyof typeof zIndexTokens;
+export type TransitionToken = keyof typeof transitionTokens;
+export type ThemeOverride = Partial<Record<ColorToken | SpacingToken | RadiusToken | ShadowToken | ZIndexToken | TransitionToken, string>>;
 /** All tokens combined for iteration. */
 export declare const allTokens: {
+    readonly 'duration-fast': "150ms";
+    readonly 'duration-normal': "200ms";
+    readonly 'duration-slow': "300ms";
+    readonly 'ease-default': "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly 'ease-in': "cubic-bezier(0.4, 0, 1, 1)";
+    readonly 'ease-out': "cubic-bezier(0, 0, 0.2, 1)";
+    readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly 'z-sticky': "10";
+    readonly 'z-dropdown': "40";
+    readonly 'z-overlay': "50";
+    readonly 'z-modal': "50";
+    readonly 'z-toast': "60";
+    readonly 'z-tooltip': "70";
     readonly 'shadow-sm': "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
     readonly 'shadow-md': "0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1)";
     readonly 'shadow-lg': "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly 'shadow-thumb': "0 1px 3px rgba(0, 0, 0, 0.15)";
+    readonly 'shadow-card': "0 4px 2px 0 rgba(69, 89, 114, 0.02), 0 6px 14px 0 rgba(69, 89, 114, 0.06)";
+    readonly 'shadow-elevated': "0px 2px 2px 0px rgba(69, 89, 114, 0.06), 0px 6px 6px 0px rgba(69, 89, 114, 0.04)";
+    readonly 'shadow-focus': "0 0 0 0.125rem rgba(14, 165, 233, 0.2)";
     readonly 'radius-sm': "4px";
     readonly 'radius-md': "6px";
     readonly 'radius-lg': "8px";
@@ -179,6 +223,9 @@ export declare const allTokens: {
     readonly 'brand-soft-active': "#B7E6FD";
     readonly 'brand-on-solid': "#FFFFFF";
     readonly 'brand-on-soft': "#0EA5E9";
+    readonly 'brand-border': "#B7E6FD";
+    readonly 'brand-border-hover': "#7DD3FC";
+    readonly 'brand-border-strong': "#0369A1";
     readonly 'brand-secondary': "#6366F1";
     readonly neutral: "#64748B";
     readonly 'neutral-soft': "#F8FAFC";
@@ -221,6 +268,7 @@ export declare const allTokens: {
     readonly 'warning-on-soft': "#92400E";
     readonly 'warning-border': "#F3E6A5";
     readonly 'warning-border-hover': "#E6D378";
+    readonly 'warning-border-strong': "#B45309";
     readonly info: "#3B82F6";
     readonly 'info-hover': "#2563EB";
     readonly 'info-active': "#1D4ED8";
@@ -231,6 +279,7 @@ export declare const allTokens: {
     readonly 'info-on-soft': "#1E40AF";
     readonly 'info-border': "#C5D7F5";
     readonly 'info-border-hover': "#A8CCF2";
+    readonly 'info-border-strong': "#1D4ED8";
     readonly processing: "#06B6D4";
     readonly 'processing-hover': "#0891B2";
     readonly 'processing-active': "#0E7490";
@@ -241,10 +290,9 @@ export declare const allTokens: {
     readonly 'processing-on-soft': "#155E75";
     readonly 'processing-border': "#B3F0FC";
     readonly 'processing-border-hover': "#7FE8F5";
-    readonly 'transcript-bg': "#FEFCE8";
-    readonly 'transcript-highlight': "#FEF3C7";
-    readonly 'transcript-speaker': "#EDE9FE";
-    readonly 'transcript-timestamp': "#F3F4F6";
+    readonly 'processing-border-strong': "#0E7490";
+    readonly overlay: "rgba(15, 23, 42, 0.15)";
+    readonly 'focus-ring': "#0EA5E9";
 };
 /** Convert a token name to its CSS custom property name. */
 export declare function tokenToCssVar(token: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leodamours/ds-components",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",