@leodamours/ds-components 0.2.1 → 0.2.3

package/dist/styles/default.d.ts

@@ -0,0 +1,24 @@
+declare const defaultTheme: {
+    colors: Record<string, string>;
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string[];
+        sm: string[];
+        base: string[];
+        lg: string[];
+        xl: string[];
+        '2xl': string[];
+        '3xl': string[];
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+};
+export default defaultTheme;

package/dist/styles/presets.d.ts

@@ -0,0 +1,4 @@
+import { Preset } from 'unocss';
+
+declare const preset: Preset;
+export default preset;

package/dist/styles/tokens.d.ts

@@ -0,0 +1,262 @@
+/**
+ * Design token definitions — single source of truth for all color tokens.
+ * Each token maps to a CSS custom property: `--ds-{token}`.
+ */
+export declare const colorTokens: {
+    readonly bg: "#FFFFFF";
+    readonly 'bg-secondary': "#F8FAFC";
+    readonly 'bg-tertiary': "#F1F5F9";
+    readonly 'bg-inverse': "#0F172A";
+    readonly 'bg-inverse-secondary': "#1E293B";
+    readonly fg: "#0F172A";
+    readonly 'fg-secondary': "#64748B";
+    readonly 'fg-tertiary': "#94A3B8";
+    readonly 'fg-inverse': "#FFFFFF";
+    readonly 'fg-disabled': "#94A3B8";
+    readonly icon: "#64748B";
+    readonly 'icon-hover': "#0F172A";
+    readonly 'icon-active': "#0EA5E9";
+    readonly 'icon-inverse': "#FFFFFF";
+    readonly 'icon-disabled': "#CBD5E1";
+    readonly border: "#E2E8F0";
+    readonly 'border-light': "#F1F5F9";
+    readonly 'border-strong': "#CBD5E1";
+    readonly 'border-focus': "#0F172A";
+    readonly 'surface-hover': "#E2E8F0";
+    readonly 'surface-hover-light': "#F1F5F9";
+    readonly 'surface-active': "#B7E6FD";
+    readonly 'surface-disabled': "#FAFCFF";
+    readonly brand: "#0EA5E9";
+    readonly 'brand-hover': "#0284C7";
+    readonly 'brand-active': "#0369A1";
+    readonly 'brand-disabled': "#BAE6FD";
+    readonly 'brand-soft': "#F0F9FF";
+    readonly 'brand-soft-hover': "#E0F2FE";
+    readonly 'brand-soft-active': "#B7E6FD";
+    readonly 'brand-on-solid': "#FFFFFF";
+    readonly 'brand-on-soft': "#0EA5E9";
+    readonly 'brand-secondary': "#6366F1";
+    readonly neutral: "#64748B";
+    readonly 'neutral-soft': "#F8FAFC";
+    readonly 'neutral-soft-hover': "#F1F5F9";
+    readonly 'neutral-soft-active': "#E2E8F0";
+    readonly 'neutral-on-solid': "#FFFFFF";
+    readonly 'neutral-on-soft': "#0F172A";
+    readonly 'neutral-border': "#D1D5DB";
+    readonly 'neutral-border-hover': "#B5BCC9";
+    readonly 'neutral-border-strong': "#94A3B8";
+    readonly error: "#EF4444";
+    readonly 'error-hover': "#DC2626";
+    readonly 'error-active': "#B91C1C";
+    readonly 'error-soft': "#FEF2F2";
+    readonly 'error-soft-hover': "#FEE2E2";
+    readonly 'error-soft-active': "#FECACA";
+    readonly 'error-on-solid': "#FFFFFF";
+    readonly 'error-on-soft': "#EF4444";
+    readonly 'error-border': "#F8CDD1";
+    readonly 'error-border-hover': "#F5A6B3";
+    readonly 'error-border-strong': "#B91C1C";
+    readonly success: "#10B981";
+    readonly 'success-hover': "#0A8D63";
+    readonly 'success-active': "#047857";
+    readonly 'success-soft': "#ECFDF5";
+    readonly 'success-soft-hover': "#D1FAE5";
+    readonly 'success-soft-active': "#A7F3D0";
+    readonly 'success-on-solid': "#FFFFFF";
+    readonly 'success-on-soft': "#10B981";
+    readonly 'success-border': "#BEF3D0";
+    readonly 'success-border-hover': "#86EFAC";
+    readonly 'success-border-strong': "#0EA875";
+    readonly warning: "#F59E0B";
+    readonly 'warning-hover': "#D97706";
+    readonly 'warning-active': "#B45309";
+    readonly 'warning-soft': "#FFFBEB";
+    readonly 'warning-soft-hover': "#FEF3C7";
+    readonly 'warning-soft-active': "#FDE68A";
+    readonly 'warning-on-solid': "#FFFFFF";
+    readonly 'warning-on-soft': "#92400E";
+    readonly 'warning-border': "#F3E6A5";
+    readonly 'warning-border-hover': "#E6D378";
+    readonly info: "#3B82F6";
+    readonly 'info-hover': "#2563EB";
+    readonly 'info-active': "#1D4ED8";
+    readonly 'info-soft': "#EFF6FF";
+    readonly 'info-soft-hover': "#DBEAFE";
+    readonly 'info-soft-active': "#BFDBFE";
+    readonly 'info-on-solid': "#FFFFFF";
+    readonly 'info-on-soft': "#1E40AF";
+    readonly 'info-border': "#C5D7F5";
+    readonly 'info-border-hover': "#A8CCF2";
+    readonly processing: "#06B6D4";
+    readonly 'processing-hover': "#0891B2";
+    readonly 'processing-active': "#0E7490";
+    readonly 'processing-soft': "#ECFEFF";
+    readonly 'processing-soft-hover': "#CFFAFE";
+    readonly 'processing-soft-active': "#A5F3FC";
+    readonly 'processing-on-solid': "#FFFFFF";
+    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";
+};
+export declare const spacingTokens: {
+    readonly 'space-1': "4px";
+    readonly 'space-2': "8px";
+    readonly 'space-3': "12px";
+    readonly 'space-4': "16px";
+    readonly 'space-5': "24px";
+    readonly 'space-6': "32px";
+    readonly 'space-7': "48px";
+    readonly 'space-8': "64px";
+};
+export declare const radiusTokens: {
+    readonly 'radius-sm': "4px";
+    readonly 'radius-md': "6px";
+    readonly 'radius-lg': "8px";
+    readonly 'radius-xl': "12px";
+    readonly 'radius-full': "9999px";
+};
+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)";
+};
+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>>;
+/** All tokens combined for iteration. */
+export declare const allTokens: {
+    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 'radius-sm': "4px";
+    readonly 'radius-md': "6px";
+    readonly 'radius-lg': "8px";
+    readonly 'radius-xl': "12px";
+    readonly 'radius-full': "9999px";
+    readonly 'space-1': "4px";
+    readonly 'space-2': "8px";
+    readonly 'space-3': "12px";
+    readonly 'space-4': "16px";
+    readonly 'space-5': "24px";
+    readonly 'space-6': "32px";
+    readonly 'space-7': "48px";
+    readonly 'space-8': "64px";
+    readonly bg: "#FFFFFF";
+    readonly 'bg-secondary': "#F8FAFC";
+    readonly 'bg-tertiary': "#F1F5F9";
+    readonly 'bg-inverse': "#0F172A";
+    readonly 'bg-inverse-secondary': "#1E293B";
+    readonly fg: "#0F172A";
+    readonly 'fg-secondary': "#64748B";
+    readonly 'fg-tertiary': "#94A3B8";
+    readonly 'fg-inverse': "#FFFFFF";
+    readonly 'fg-disabled': "#94A3B8";
+    readonly icon: "#64748B";
+    readonly 'icon-hover': "#0F172A";
+    readonly 'icon-active': "#0EA5E9";
+    readonly 'icon-inverse': "#FFFFFF";
+    readonly 'icon-disabled': "#CBD5E1";
+    readonly border: "#E2E8F0";
+    readonly 'border-light': "#F1F5F9";
+    readonly 'border-strong': "#CBD5E1";
+    readonly 'border-focus': "#0F172A";
+    readonly 'surface-hover': "#E2E8F0";
+    readonly 'surface-hover-light': "#F1F5F9";
+    readonly 'surface-active': "#B7E6FD";
+    readonly 'surface-disabled': "#FAFCFF";
+    readonly brand: "#0EA5E9";
+    readonly 'brand-hover': "#0284C7";
+    readonly 'brand-active': "#0369A1";
+    readonly 'brand-disabled': "#BAE6FD";
+    readonly 'brand-soft': "#F0F9FF";
+    readonly 'brand-soft-hover': "#E0F2FE";
+    readonly 'brand-soft-active': "#B7E6FD";
+    readonly 'brand-on-solid': "#FFFFFF";
+    readonly 'brand-on-soft': "#0EA5E9";
+    readonly 'brand-secondary': "#6366F1";
+    readonly neutral: "#64748B";
+    readonly 'neutral-soft': "#F8FAFC";
+    readonly 'neutral-soft-hover': "#F1F5F9";
+    readonly 'neutral-soft-active': "#E2E8F0";
+    readonly 'neutral-on-solid': "#FFFFFF";
+    readonly 'neutral-on-soft': "#0F172A";
+    readonly 'neutral-border': "#D1D5DB";
+    readonly 'neutral-border-hover': "#B5BCC9";
+    readonly 'neutral-border-strong': "#94A3B8";
+    readonly error: "#EF4444";
+    readonly 'error-hover': "#DC2626";
+    readonly 'error-active': "#B91C1C";
+    readonly 'error-soft': "#FEF2F2";
+    readonly 'error-soft-hover': "#FEE2E2";
+    readonly 'error-soft-active': "#FECACA";
+    readonly 'error-on-solid': "#FFFFFF";
+    readonly 'error-on-soft': "#EF4444";
+    readonly 'error-border': "#F8CDD1";
+    readonly 'error-border-hover': "#F5A6B3";
+    readonly 'error-border-strong': "#B91C1C";
+    readonly success: "#10B981";
+    readonly 'success-hover': "#0A8D63";
+    readonly 'success-active': "#047857";
+    readonly 'success-soft': "#ECFDF5";
+    readonly 'success-soft-hover': "#D1FAE5";
+    readonly 'success-soft-active': "#A7F3D0";
+    readonly 'success-on-solid': "#FFFFFF";
+    readonly 'success-on-soft': "#10B981";
+    readonly 'success-border': "#BEF3D0";
+    readonly 'success-border-hover': "#86EFAC";
+    readonly 'success-border-strong': "#0EA875";
+    readonly warning: "#F59E0B";
+    readonly 'warning-hover': "#D97706";
+    readonly 'warning-active': "#B45309";
+    readonly 'warning-soft': "#FFFBEB";
+    readonly 'warning-soft-hover': "#FEF3C7";
+    readonly 'warning-soft-active': "#FDE68A";
+    readonly 'warning-on-solid': "#FFFFFF";
+    readonly 'warning-on-soft': "#92400E";
+    readonly 'warning-border': "#F3E6A5";
+    readonly 'warning-border-hover': "#E6D378";
+    readonly info: "#3B82F6";
+    readonly 'info-hover': "#2563EB";
+    readonly 'info-active': "#1D4ED8";
+    readonly 'info-soft': "#EFF6FF";
+    readonly 'info-soft-hover': "#DBEAFE";
+    readonly 'info-soft-active': "#BFDBFE";
+    readonly 'info-on-solid': "#FFFFFF";
+    readonly 'info-on-soft': "#1E40AF";
+    readonly 'info-border': "#C5D7F5";
+    readonly 'info-border-hover': "#A8CCF2";
+    readonly processing: "#06B6D4";
+    readonly 'processing-hover': "#0891B2";
+    readonly 'processing-active': "#0E7490";
+    readonly 'processing-soft': "#ECFEFF";
+    readonly 'processing-soft-hover': "#CFFAFE";
+    readonly 'processing-soft-active': "#A5F3FC";
+    readonly 'processing-on-solid': "#FFFFFF";
+    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";
+};
+/** Convert a token name to its CSS custom property name. */
+export declare function tokenToCssVar(token: string): string;
+/**
+ * Generate a CSS rule block that sets theme overrides on a given selector.
+ * Defaults to `:root` if no selector is provided.
+ *
+ * @example
+ * generateThemeCss({ brand: '#8B5CF6' })
+ * // => `:root {\n  --ds-brand: #8B5CF6;\n}`
+ *
+ * generateThemeCss({ brand: '#8B5CF6' }, '[data-theme="purple"]')
+ * // => `[data-theme="purple"] {\n  --ds-brand: #8B5CF6;\n}`
+ */
+export declare function generateThemeCss(overrides: ThemeOverride, selector?: string): string;

package/package.json

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