@classic-homes/theme-tokens 0.1.51 → 0.1.53

package/dist/contrast.d.mts

@@ -0,0 +1,118 @@
+/**
+ * Color Contrast Utilities
+ *
+ * Utilities for calculating and validating color contrast ratios
+ * for WCAG 2.1 compliance.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
+ */
+/**
+ * Calculates the relative luminance of a color.
+ *
+ * @param hex - Hex color string (e.g., '#ffffff' or '#fff')
+ * @returns Relative luminance value between 0 (black) and 1 (white)
+ *
+ * @see https://www.w3.org/WAI/GL/wiki/Relative_luminance
+ */
+declare function getLuminance(hex: string): number;
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @returns Contrast ratio (1:1 to 21:1)
+ *
+ * @example
+ * ```ts
+ * getContrastRatio('#000000', '#ffffff'); // 21
+ * getContrastRatio('#ffffff', '#ffffff'); // 1
+ * ```
+ */
+declare function getContrastRatio(foreground: string, background: string): number;
+/**
+ * WCAG conformance levels for contrast
+ */
+type WCAGLevel = 'AA' | 'AAA';
+/**
+ * Text size categories for contrast requirements
+ */
+type TextSize = 'normal' | 'large';
+/**
+ * Checks if a color combination meets WCAG contrast requirements.
+ *
+ * WCAG 2.1 contrast requirements:
+ * - Level AA: 4.5:1 for normal text, 3:1 for large text
+ * - Level AAA: 7:1 for normal text, 4.5:1 for large text
+ *
+ * Large text is defined as 18pt (24px) or 14pt (18.66px) bold and larger.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @param level - WCAG conformance level ('AA' or 'AAA')
+ * @param size - Text size category ('normal' or 'large')
+ * @returns True if the contrast meets the requirement
+ *
+ * @example
+ * ```ts
+ * meetsWCAGContrast('#000000', '#ffffff', 'AA', 'normal'); // true (21:1 >= 4.5:1)
+ * meetsWCAGContrast('#666666', '#ffffff', 'AAA', 'normal'); // false (5.74:1 < 7:1)
+ * ```
+ */
+declare function meetsWCAGContrast(foreground: string, background: string, level?: WCAGLevel, size?: TextSize): boolean;
+/**
+ * Result of contrast validation with details
+ */
+interface ContrastValidation {
+    /** Contrast ratio */
+    ratio: number;
+    /** Formatted ratio string (e.g., "4.5:1") */
+    ratioString: string;
+    /** Passes AA level for normal text */
+    passesAANormal: boolean;
+    /** Passes AA level for large text */
+    passesAALarge: boolean;
+    /** Passes AAA level for normal text */
+    passesAAANormal: boolean;
+    /** Passes AAA level for large text */
+    passesAAALarge: boolean;
+}
+/**
+ * Validates a color combination and returns detailed contrast information.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @returns Detailed contrast validation results
+ */
+declare function validateContrast(foreground: string, background: string): ContrastValidation;
+/**
+ * Gets an accessible text color (black or white) for a given background.
+ *
+ * Uses luminance threshold to determine which color provides better contrast.
+ *
+ * @param background - Background color as hex
+ * @returns '#000000' for light backgrounds, '#ffffff' for dark backgrounds
+ *
+ * @example
+ * ```ts
+ * getContrastTextColor('#ffffff'); // '#000000'
+ * getContrastTextColor('#000000'); // '#ffffff'
+ * getContrastTextColor('#3ba4a7'); // '#ffffff' (teal background)
+ * ```
+ */
+declare function getContrastTextColor(background: string): '#000000' | '#ffffff';
+/**
+ * Suggests the minimum lightness adjustment needed to meet contrast requirements.
+ *
+ * @param foreground - Current foreground color as hex
+ * @param background - Background color as hex
+ * @param level - Target WCAG level
+ * @param size - Text size category
+ * @returns Suggested adjustment or null if already passing
+ */
+declare function suggestContrastAdjustment(foreground: string, background: string, level?: WCAGLevel, size?: TextSize): {
+    adjustLighter: boolean;
+    minimumRatio: number;
+} | null;
+
+export { type ContrastValidation, type TextSize, type WCAGLevel, getContrastRatio, getContrastTextColor, getLuminance, meetsWCAGContrast, suggestContrastAdjustment, validateContrast };

package/dist/contrast.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Color Contrast Utilities
+ *
+ * Utilities for calculating and validating color contrast ratios
+ * for WCAG 2.1 compliance.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
+ */
+/**
+ * Calculates the relative luminance of a color.
+ *
+ * @param hex - Hex color string (e.g., '#ffffff' or '#fff')
+ * @returns Relative luminance value between 0 (black) and 1 (white)
+ *
+ * @see https://www.w3.org/WAI/GL/wiki/Relative_luminance
+ */
+declare function getLuminance(hex: string): number;
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @returns Contrast ratio (1:1 to 21:1)
+ *
+ * @example
+ * ```ts
+ * getContrastRatio('#000000', '#ffffff'); // 21
+ * getContrastRatio('#ffffff', '#ffffff'); // 1
+ * ```
+ */
+declare function getContrastRatio(foreground: string, background: string): number;
+/**
+ * WCAG conformance levels for contrast
+ */
+type WCAGLevel = 'AA' | 'AAA';
+/**
+ * Text size categories for contrast requirements
+ */
+type TextSize = 'normal' | 'large';
+/**
+ * Checks if a color combination meets WCAG contrast requirements.
+ *
+ * WCAG 2.1 contrast requirements:
+ * - Level AA: 4.5:1 for normal text, 3:1 for large text
+ * - Level AAA: 7:1 for normal text, 4.5:1 for large text
+ *
+ * Large text is defined as 18pt (24px) or 14pt (18.66px) bold and larger.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @param level - WCAG conformance level ('AA' or 'AAA')
+ * @param size - Text size category ('normal' or 'large')
+ * @returns True if the contrast meets the requirement
+ *
+ * @example
+ * ```ts
+ * meetsWCAGContrast('#000000', '#ffffff', 'AA', 'normal'); // true (21:1 >= 4.5:1)
+ * meetsWCAGContrast('#666666', '#ffffff', 'AAA', 'normal'); // false (5.74:1 < 7:1)
+ * ```
+ */
+declare function meetsWCAGContrast(foreground: string, background: string, level?: WCAGLevel, size?: TextSize): boolean;
+/**
+ * Result of contrast validation with details
+ */
+interface ContrastValidation {
+    /** Contrast ratio */
+    ratio: number;
+    /** Formatted ratio string (e.g., "4.5:1") */
+    ratioString: string;
+    /** Passes AA level for normal text */
+    passesAANormal: boolean;
+    /** Passes AA level for large text */
+    passesAALarge: boolean;
+    /** Passes AAA level for normal text */
+    passesAAANormal: boolean;
+    /** Passes AAA level for large text */
+    passesAAALarge: boolean;
+}
+/**
+ * Validates a color combination and returns detailed contrast information.
+ *
+ * @param foreground - Foreground/text color as hex
+ * @param background - Background color as hex
+ * @returns Detailed contrast validation results
+ */
+declare function validateContrast(foreground: string, background: string): ContrastValidation;
+/**
+ * Gets an accessible text color (black or white) for a given background.
+ *
+ * Uses luminance threshold to determine which color provides better contrast.
+ *
+ * @param background - Background color as hex
+ * @returns '#000000' for light backgrounds, '#ffffff' for dark backgrounds
+ *
+ * @example
+ * ```ts
+ * getContrastTextColor('#ffffff'); // '#000000'
+ * getContrastTextColor('#000000'); // '#ffffff'
+ * getContrastTextColor('#3ba4a7'); // '#ffffff' (teal background)
+ * ```
+ */
+declare function getContrastTextColor(background: string): '#000000' | '#ffffff';
+/**
+ * Suggests the minimum lightness adjustment needed to meet contrast requirements.
+ *
+ * @param foreground - Current foreground color as hex
+ * @param background - Background color as hex
+ * @param level - Target WCAG level
+ * @param size - Text size category
+ * @returns Suggested adjustment or null if already passing
+ */
+declare function suggestContrastAdjustment(foreground: string, background: string, level?: WCAGLevel, size?: TextSize): {
+    adjustLighter: boolean;
+    minimumRatio: number;
+} | null;
+
+export { type ContrastValidation, type TextSize, type WCAGLevel, getContrastRatio, getContrastTextColor, getLuminance, meetsWCAGContrast, suggestContrastAdjustment, validateContrast };

package/dist/contrast.js

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/contrast.ts
+var contrast_exports = {};
+__export(contrast_exports, {
+  getContrastRatio: () => getContrastRatio,
+  getContrastTextColor: () => getContrastTextColor,
+  getLuminance: () => getLuminance,
+  meetsWCAGContrast: () => meetsWCAGContrast,
+  suggestContrastAdjustment: () => suggestContrastAdjustment,
+  validateContrast: () => validateContrast
+});
+module.exports = __toCommonJS(contrast_exports);
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    return {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    };
+  }
+  const shortResult = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex);
+  if (shortResult) {
+    return {
+      r: parseInt(shortResult[1] + shortResult[1], 16),
+      g: parseInt(shortResult[2] + shortResult[2], 16),
+      b: parseInt(shortResult[3] + shortResult[3], 16)
+    };
+  }
+  return null;
+}
+function getLuminance(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  const { r, g, b } = rgb;
+  const rsrgb = r / 255;
+  const gsrgb = g / 255;
+  const bsrgb = b / 255;
+  const rLinear = rsrgb <= 0.03928 ? rsrgb / 12.92 : Math.pow((rsrgb + 0.055) / 1.055, 2.4);
+  const gLinear = gsrgb <= 0.03928 ? gsrgb / 12.92 : Math.pow((gsrgb + 0.055) / 1.055, 2.4);
+  const bLinear = bsrgb <= 0.03928 ? bsrgb / 12.92 : Math.pow((bsrgb + 0.055) / 1.055, 2.4);
+  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
+}
+function getContrastRatio(foreground, background) {
+  const l1 = getLuminance(foreground);
+  const l2 = getLuminance(background);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function meetsWCAGContrast(foreground, background, level = "AA", size = "normal") {
+  const ratio = getContrastRatio(foreground, background);
+  const requirements = {
+    AA: { normal: 4.5, large: 3 },
+    AAA: { normal: 7, large: 4.5 }
+  };
+  return ratio >= requirements[level][size];
+}
+function validateContrast(foreground, background) {
+  const ratio = getContrastRatio(foreground, background);
+  return {
+    ratio,
+    ratioString: `${ratio.toFixed(2)}:1`,
+    passesAANormal: ratio >= 4.5,
+    passesAALarge: ratio >= 3,
+    passesAAANormal: ratio >= 7,
+    passesAAALarge: ratio >= 4.5
+  };
+}
+function getContrastTextColor(background) {
+  const luminance = getLuminance(background);
+  return luminance > 0.179 ? "#000000" : "#ffffff";
+}
+function suggestContrastAdjustment(foreground, background, level = "AA", size = "normal") {
+  if (meetsWCAGContrast(foreground, background, level, size)) {
+    return null;
+  }
+  const requirements = {
+    AA: { normal: 4.5, large: 3 },
+    AAA: { normal: 7, large: 4.5 }
+  };
+  const fgLuminance = getLuminance(foreground);
+  const bgLuminance = getLuminance(background);
+  return {
+    adjustLighter: fgLuminance < bgLuminance,
+    minimumRatio: requirements[level][size]
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getContrastRatio,
+  getContrastTextColor,
+  getLuminance,
+  meetsWCAGContrast,
+  suggestContrastAdjustment,
+  validateContrast
+});

package/dist/contrast.mjs

@@ -0,0 +1,87 @@
+// src/contrast.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    return {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    };
+  }
+  const shortResult = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex);
+  if (shortResult) {
+    return {
+      r: parseInt(shortResult[1] + shortResult[1], 16),
+      g: parseInt(shortResult[2] + shortResult[2], 16),
+      b: parseInt(shortResult[3] + shortResult[3], 16)
+    };
+  }
+  return null;
+}
+function getLuminance(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  const { r, g, b } = rgb;
+  const rsrgb = r / 255;
+  const gsrgb = g / 255;
+  const bsrgb = b / 255;
+  const rLinear = rsrgb <= 0.03928 ? rsrgb / 12.92 : Math.pow((rsrgb + 0.055) / 1.055, 2.4);
+  const gLinear = gsrgb <= 0.03928 ? gsrgb / 12.92 : Math.pow((gsrgb + 0.055) / 1.055, 2.4);
+  const bLinear = bsrgb <= 0.03928 ? bsrgb / 12.92 : Math.pow((bsrgb + 0.055) / 1.055, 2.4);
+  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
+}
+function getContrastRatio(foreground, background) {
+  const l1 = getLuminance(foreground);
+  const l2 = getLuminance(background);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function meetsWCAGContrast(foreground, background, level = "AA", size = "normal") {
+  const ratio = getContrastRatio(foreground, background);
+  const requirements = {
+    AA: { normal: 4.5, large: 3 },
+    AAA: { normal: 7, large: 4.5 }
+  };
+  return ratio >= requirements[level][size];
+}
+function validateContrast(foreground, background) {
+  const ratio = getContrastRatio(foreground, background);
+  return {
+    ratio,
+    ratioString: `${ratio.toFixed(2)}:1`,
+    passesAANormal: ratio >= 4.5,
+    passesAALarge: ratio >= 3,
+    passesAAANormal: ratio >= 7,
+    passesAAALarge: ratio >= 4.5
+  };
+}
+function getContrastTextColor(background) {
+  const luminance = getLuminance(background);
+  return luminance > 0.179 ? "#000000" : "#ffffff";
+}
+function suggestContrastAdjustment(foreground, background, level = "AA", size = "normal") {
+  if (meetsWCAGContrast(foreground, background, level, size)) {
+    return null;
+  }
+  const requirements = {
+    AA: { normal: 4.5, large: 3 },
+    AAA: { normal: 7, large: 4.5 }
+  };
+  const fgLuminance = getLuminance(foreground);
+  const bgLuminance = getLuminance(background);
+  return {
+    adjustLighter: fgLuminance < bgLuminance,
+    minimumRatio: requirements[level][size]
+  };
+}
+export {
+  getContrastRatio,
+  getContrastTextColor,
+  getLuminance,
+  meetsWCAGContrast,
+  suggestContrastAdjustment,
+  validateContrast
+};

package/dist/index.d.mts

@@ -218,7 +218,7 @@ declare const brandColors: {
  */
 declare const statusColors: {
     readonly success: "#10b981";
-    readonly warning: "#f59e0b";
+    readonly warning: "#d97706";
     readonly error: "#ef4444";
     readonly info: "#3b82f6";
 };
@@ -263,7 +263,7 @@ declare const semanticColors: {
         readonly ring: "#a91c22";
         readonly success: "#10b981";
         readonly successForeground: "#ffffff";
-        readonly warning: "#f59e0b";
+        readonly warning: "#d97706";
         readonly warningForeground: "#ffffff";
         readonly info: "#3b82f6";
         readonly infoForeground: "#ffffff";
@@ -496,6 +496,60 @@ declare const transition: {
         readonly linear: "linear";
     };
 };
+/**
+ * Focus Ring Tokens
+ *
+ * Consistent focus indicator styling for accessibility.
+ * These values ensure visible focus states that meet WCAG 2.1 requirements.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
+ */
+declare const focusRing: {
+    /** Width of the focus ring outline */
+    readonly width: "2px";
+    /** Offset between the element and the focus ring */
+    readonly offset: "2px";
+    /** Outline style */
+    readonly style: "solid";
+};
+/**
+ * Animation Duration Tokens
+ *
+ * Includes reduced motion variants that should be used when
+ * the user has enabled `prefers-reduced-motion: reduce`.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
+ *
+ * @example CSS usage with media query
+ * ```css
+ * .animated-element {
+ *   transition-duration: var(--animation-duration-base);
+ * }
+ *
+ * @media (prefers-reduced-motion: reduce) {
+ *   .animated-element {
+ *     transition-duration: var(--animation-duration-reduced-base);
+ *   }
+ * }
+ * ```
+ */
+declare const animation: {
+    /** Standard animation durations */
+    readonly duration: {
+        /** Fast animations like hover states */
+        readonly fast: "150ms";
+        /** Base duration for most UI animations */
+        readonly base: "200ms";
+        /** Slower animations for larger movements */
+        readonly slow: "300ms";
+    };
+    /** Reduced motion durations (instant or near-instant) */
+    readonly reducedMotion: {
+        readonly fast: "0ms";
+        readonly base: "0ms";
+        readonly slow: "0ms";
+    };
+};
 declare const tokens: {
     readonly colors: {
         readonly white: "#ffffff";
@@ -702,7 +756,7 @@ declare const tokens: {
     };
     readonly statusColors: {
         readonly success: "#10b981";
-        readonly warning: "#f59e0b";
+        readonly warning: "#d97706";
         readonly error: "#ef4444";
         readonly info: "#3b82f6";
     };
@@ -739,7 +793,7 @@ declare const tokens: {
             readonly ring: "#a91c22";
             readonly success: "#10b981";
             readonly successForeground: "#ffffff";
-            readonly warning: "#f59e0b";
+            readonly warning: "#d97706";
             readonly warningForeground: "#ffffff";
             readonly info: "#3b82f6";
             readonly infoForeground: "#ffffff";
@@ -964,6 +1018,31 @@ declare const tokens: {
             readonly linear: "linear";
         };
     };
+    readonly focusRing: {
+        /** Width of the focus ring outline */
+        readonly width: "2px";
+        /** Offset between the element and the focus ring */
+        readonly offset: "2px";
+        /** Outline style */
+        readonly style: "solid";
+    };
+    readonly animation: {
+        /** Standard animation durations */
+        readonly duration: {
+            /** Fast animations like hover states */
+            readonly fast: "150ms";
+            /** Base duration for most UI animations */
+            readonly base: "200ms";
+            /** Slower animations for larger movements */
+            readonly slow: "300ms";
+        };
+        /** Reduced motion durations (instant or near-instant) */
+        readonly reducedMotion: {
+            readonly fast: "0ms";
+            readonly base: "0ms";
+            readonly slow: "0ms";
+        };
+    };
 };
 
-export { borderRadius, boxShadow, brandColors, breakpoints, colors, tokens as default, fontFamily, fontSize, fontWeight, layoutColors, semanticColors, spacing, statusColors, tokens, transition, zIndex };
+export { animation, borderRadius, boxShadow, brandColors, breakpoints, colors, tokens as default, focusRing, fontFamily, fontSize, fontWeight, layoutColors, semanticColors, spacing, statusColors, tokens, transition, zIndex };

package/dist/index.d.ts

@@ -218,7 +218,7 @@ declare const brandColors: {
  */
 declare const statusColors: {
     readonly success: "#10b981";
-    readonly warning: "#f59e0b";
+    readonly warning: "#d97706";
     readonly error: "#ef4444";
     readonly info: "#3b82f6";
 };
@@ -263,7 +263,7 @@ declare const semanticColors: {
         readonly ring: "#a91c22";
         readonly success: "#10b981";
         readonly successForeground: "#ffffff";
-        readonly warning: "#f59e0b";
+        readonly warning: "#d97706";
         readonly warningForeground: "#ffffff";
         readonly info: "#3b82f6";
         readonly infoForeground: "#ffffff";
@@ -496,6 +496,60 @@ declare const transition: {
         readonly linear: "linear";
     };
 };
+/**
+ * Focus Ring Tokens
+ *
+ * Consistent focus indicator styling for accessibility.
+ * These values ensure visible focus states that meet WCAG 2.1 requirements.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
+ */
+declare const focusRing: {
+    /** Width of the focus ring outline */
+    readonly width: "2px";
+    /** Offset between the element and the focus ring */
+    readonly offset: "2px";
+    /** Outline style */
+    readonly style: "solid";
+};
+/**
+ * Animation Duration Tokens
+ *
+ * Includes reduced motion variants that should be used when
+ * the user has enabled `prefers-reduced-motion: reduce`.
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html
+ *
+ * @example CSS usage with media query
+ * ```css
+ * .animated-element {
+ *   transition-duration: var(--animation-duration-base);
+ * }
+ *
+ * @media (prefers-reduced-motion: reduce) {
+ *   .animated-element {
+ *     transition-duration: var(--animation-duration-reduced-base);
+ *   }
+ * }
+ * ```
+ */
+declare const animation: {
+    /** Standard animation durations */
+    readonly duration: {
+        /** Fast animations like hover states */
+        readonly fast: "150ms";
+        /** Base duration for most UI animations */
+        readonly base: "200ms";
+        /** Slower animations for larger movements */
+        readonly slow: "300ms";
+    };
+    /** Reduced motion durations (instant or near-instant) */
+    readonly reducedMotion: {
+        readonly fast: "0ms";
+        readonly base: "0ms";
+        readonly slow: "0ms";
+    };
+};
 declare const tokens: {
     readonly colors: {
         readonly white: "#ffffff";
@@ -702,7 +756,7 @@ declare const tokens: {
     };
     readonly statusColors: {
         readonly success: "#10b981";
-        readonly warning: "#f59e0b";
+        readonly warning: "#d97706";
         readonly error: "#ef4444";
         readonly info: "#3b82f6";
     };
@@ -739,7 +793,7 @@ declare const tokens: {
             readonly ring: "#a91c22";
             readonly success: "#10b981";
             readonly successForeground: "#ffffff";
-            readonly warning: "#f59e0b";
+            readonly warning: "#d97706";
             readonly warningForeground: "#ffffff";
             readonly info: "#3b82f6";
             readonly infoForeground: "#ffffff";
@@ -964,6 +1018,31 @@ declare const tokens: {
             readonly linear: "linear";
         };
     };
+    readonly focusRing: {
+        /** Width of the focus ring outline */
+        readonly width: "2px";
+        /** Offset between the element and the focus ring */
+        readonly offset: "2px";
+        /** Outline style */
+        readonly style: "solid";
+    };
+    readonly animation: {
+        /** Standard animation durations */
+        readonly duration: {
+            /** Fast animations like hover states */
+            readonly fast: "150ms";
+            /** Base duration for most UI animations */
+            readonly base: "200ms";
+            /** Slower animations for larger movements */
+            readonly slow: "300ms";
+        };
+        /** Reduced motion durations (instant or near-instant) */
+        readonly reducedMotion: {
+            readonly fast: "0ms";
+            readonly base: "0ms";
+            readonly slow: "0ms";
+        };
+    };
 };
 
-export { borderRadius, boxShadow, brandColors, breakpoints, colors, tokens as default, fontFamily, fontSize, fontWeight, layoutColors, semanticColors, spacing, statusColors, tokens, transition, zIndex };
+export { animation, borderRadius, boxShadow, brandColors, breakpoints, colors, tokens as default, focusRing, fontFamily, fontSize, fontWeight, layoutColors, semanticColors, spacing, statusColors, tokens, transition, zIndex };

package/dist/index.js

@@ -20,12 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  animation: () => animation,
   borderRadius: () => borderRadius,
   boxShadow: () => boxShadow,
   brandColors: () => brandColors,
   breakpoints: () => breakpoints,
   colors: () => colors,
   default: () => index_default,
+  focusRing: () => focusRing,
   fontFamily: () => fontFamily,
   fontSize: () => fontSize,
   fontWeight: () => fontWeight,
@@ -296,8 +298,8 @@ var brandColors = {
 var statusColors = {
   success: "#10b981",
   // Green - positive actions
-  warning: "#f59e0b",
-  // Amber - warnings/cautions
+  warning: "#d97706",
+  // Amber - warnings/cautions (4.5:1 contrast ratio for WCAG AA)
   error: "#ef4444",
   // Red - errors/destructive
   info: "#3b82f6"
@@ -666,6 +668,31 @@ var transition = {
     linear: "linear"
   }
 };
+var focusRing = {
+  /** Width of the focus ring outline */
+  width: "2px",
+  /** Offset between the element and the focus ring */
+  offset: "2px",
+  /** Outline style */
+  style: "solid"
+};
+var animation = {
+  /** Standard animation durations */
+  duration: {
+    /** Fast animations like hover states */
+    fast: "150ms",
+    /** Base duration for most UI animations */
+    base: "200ms",
+    /** Slower animations for larger movements */
+    slow: "300ms"
+  },
+  /** Reduced motion durations (instant or near-instant) */
+  reducedMotion: {
+    fast: "0ms",
+    base: "0ms",
+    slow: "0ms"
+  }
+};
 var tokens = {
   colors,
   brandColors,
@@ -680,16 +707,20 @@ var tokens = {
   boxShadow,
   zIndex,
   breakpoints,
-  transition
+  transition,
+  focusRing,
+  animation
 };
 var index_default = tokens;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  animation,
   borderRadius,
   boxShadow,
   brandColors,
   breakpoints,
   colors,
+  focusRing,
   fontFamily,
   fontSize,
   fontWeight,

package/dist/index.mjs

@@ -257,8 +257,8 @@ var brandColors = {
 var statusColors = {
   success: "#10b981",
   // Green - positive actions
-  warning: "#f59e0b",
-  // Amber - warnings/cautions
+  warning: "#d97706",
+  // Amber - warnings/cautions (4.5:1 contrast ratio for WCAG AA)
   error: "#ef4444",
   // Red - errors/destructive
   info: "#3b82f6"
@@ -627,6 +627,31 @@ var transition = {
     linear: "linear"
   }
 };
+var focusRing = {
+  /** Width of the focus ring outline */
+  width: "2px",
+  /** Offset between the element and the focus ring */
+  offset: "2px",
+  /** Outline style */
+  style: "solid"
+};
+var animation = {
+  /** Standard animation durations */
+  duration: {
+    /** Fast animations like hover states */
+    fast: "150ms",
+    /** Base duration for most UI animations */
+    base: "200ms",
+    /** Slower animations for larger movements */
+    slow: "300ms"
+  },
+  /** Reduced motion durations (instant or near-instant) */
+  reducedMotion: {
+    fast: "0ms",
+    base: "0ms",
+    slow: "0ms"
+  }
+};
 var tokens = {
   colors,
   brandColors,
@@ -641,16 +666,20 @@ var tokens = {
   boxShadow,
   zIndex,
   breakpoints,
-  transition
+  transition,
+  focusRing,
+  animation
 };
 var index_default = tokens;
 export {
+  animation,
   borderRadius,
   boxShadow,
   brandColors,
   breakpoints,
   colors,
   index_default as default,
+  focusRing,
   fontFamily,
   fontSize,
   fontWeight,

package/dist/tokens.css

@@ -44,7 +44,7 @@
     /* Status Colors */
     --success: 160 84% 39%;
     --success-foreground: 0 0% 100%;
-    --warning: 38 92% 50%;
+    --warning: 32 95% 44%;
     --warning-foreground: 0 0% 100%;
     --info: 217 91% 60%;
     --info-foreground: 0 0% 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-tokens",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Design tokens for the Classic theme system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,6 +11,11 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./contrast": {
+      "types": "./dist/contrast.d.ts",
+      "import": "./dist/contrast.mjs",
+      "require": "./dist/contrast.js"
+    },
     "./css": "./dist/tokens.css"
   },
   "sideEffects": [
@@ -20,8 +25,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts && node scripts/generate-css.js",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "build": "tsup src/index.ts src/contrast.ts --format esm,cjs --dts && node scripts/generate-css.js",
+    "dev": "tsup src/index.ts src/contrast.ts --format esm,cjs --dts --watch",
     "clean": "rm -rf dist"
   },
   "keywords": [