@classic-homes/theme-tokens 0.1.48 → 0.1.50

package/dist/index.d.mts

@@ -77,6 +77,14 @@ declare const colors: {
         readonly 950: "#1c0d13";
         readonly foreground: "#ffffff";
     };
+    /**
+     * Core 4 - Sage (Muted green/gray)
+     *
+     * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+     * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+     * rather than as a background for text content. When using sage as a background,
+     * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+     */
     readonly sage: {
         readonly 50: "#f7f7f5";
         readonly 100: "#eaebe6";
@@ -561,6 +569,14 @@ declare const tokens: {
             readonly 950: "#1c0d13";
             readonly foreground: "#ffffff";
         };
+        /**
+         * Core 4 - Sage (Muted green/gray)
+         *
+         * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+         * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+         * rather than as a background for text content. When using sage as a background,
+         * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+         */
         readonly sage: {
             readonly 50: "#f7f7f5";
             readonly 100: "#eaebe6";

package/dist/index.d.ts

@@ -77,6 +77,14 @@ declare const colors: {
         readonly 950: "#1c0d13";
         readonly foreground: "#ffffff";
     };
+    /**
+     * Core 4 - Sage (Muted green/gray)
+     *
+     * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+     * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+     * rather than as a background for text content. When using sage as a background,
+     * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+     */
     readonly sage: {
         readonly 50: "#f7f7f5";
         readonly 100: "#eaebe6";
@@ -561,6 +569,14 @@ declare const tokens: {
             readonly 950: "#1c0d13";
             readonly foreground: "#ffffff";
         };
+        /**
+         * Core 4 - Sage (Muted green/gray)
+         *
+         * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+         * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+         * rather than as a background for text content. When using sage as a background,
+         * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+         */
         readonly sage: {
             readonly 50: "#f7f7f5";
             readonly 100: "#eaebe6";

package/dist/index.js

@@ -127,7 +127,14 @@ var colors = {
     foreground: "#ffffff"
     // White text/icons on plum backgrounds
   },
-  // Core 4 - Sage (Muted green/gray)
+  /**
+   * Core 4 - Sage (Muted green/gray)
+   *
+   * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+   * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+   * rather than as a background for text content. When using sage as a background,
+   * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+   */
   sage: {
     50: "#f7f7f5",
     100: "#eaebe6",
@@ -322,12 +329,12 @@ var semanticColors = {
     // Core 4 tint - subtle backgrounds
     secondaryForeground: colors.gray[600],
     secondaryHover: "#d4d6cc",
-    // Darker than #e8eae0
+    // Darker than sage[100] (#eaebe6)
     muted: colors.sage[100],
     mutedForeground: colors.gray[500],
     // Grey 2
     mutedHover: "#d4d6cc",
-    // Darker than #e8eae0
+    // Darker than sage[100] (#eaebe6)
     accent: colors.teal[500],
     // Core 1 - teal accent
     accentForeground: colors.white,
@@ -337,7 +344,7 @@ var semanticColors = {
     // Red 1 - errors/warnings
     destructiveForeground: colors.white,
     destructiveHover: "#d92626",
-    // Darker than #ef4444
+    // Darker than red[500] (#e02726)
     border: colors.black,
     // CAD/drafter aesthetic - hard black borders
     input: colors.black,
@@ -399,7 +406,7 @@ var semanticColors = {
     secondary: colors.sage[800],
     secondaryForeground: colors.gray[100],
     secondaryHover: "#5c6156",
-    // Lighter than #4d524a
+    // Lighter than sage[800] (#54574e)
     muted: colors.charcoal[700],
     mutedForeground: colors.gray[400],
     mutedHover: "#5c5c5c",

package/dist/index.mjs

@@ -88,7 +88,14 @@ var colors = {
     foreground: "#ffffff"
     // White text/icons on plum backgrounds
   },
-  // Core 4 - Sage (Muted green/gray)
+  /**
+   * Core 4 - Sage (Muted green/gray)
+   *
+   * NOTE: Sage intentionally omits the `foreground` property unlike other color palettes.
+   * As a muted/neutral color, sage is typically used for backgrounds and subtle accents
+   * rather than as a background for text content. When using sage as a background,
+   * use an appropriate contrast color from another palette (e.g., gray.600 for dark text).
+   */
   sage: {
     50: "#f7f7f5",
     100: "#eaebe6",
@@ -283,12 +290,12 @@ var semanticColors = {
     // Core 4 tint - subtle backgrounds
     secondaryForeground: colors.gray[600],
     secondaryHover: "#d4d6cc",
-    // Darker than #e8eae0
+    // Darker than sage[100] (#eaebe6)
     muted: colors.sage[100],
     mutedForeground: colors.gray[500],
     // Grey 2
     mutedHover: "#d4d6cc",
-    // Darker than #e8eae0
+    // Darker than sage[100] (#eaebe6)
     accent: colors.teal[500],
     // Core 1 - teal accent
     accentForeground: colors.white,
@@ -298,7 +305,7 @@ var semanticColors = {
     // Red 1 - errors/warnings
     destructiveForeground: colors.white,
     destructiveHover: "#d92626",
-    // Darker than #ef4444
+    // Darker than red[500] (#e02726)
     border: colors.black,
     // CAD/drafter aesthetic - hard black borders
     input: colors.black,
@@ -360,7 +367,7 @@ var semanticColors = {
     secondary: colors.sage[800],
     secondaryForeground: colors.gray[100],
     secondaryHover: "#5c6156",
-    // Lighter than #4d524a
+    // Lighter than sage[800] (#54574e)
     muted: colors.charcoal[700],
     mutedForeground: colors.gray[400],
     mutedHover: "#5c5c5c",

package/dist/tokens.css

@@ -89,7 +89,8 @@
     --color-collection-5: #306966;
     --color-collection-6: #292424;
 
-    /* ===== Legacy Aliases (deprecated, use standard names) ===== */
+    /* ===== Legacy Aliases (DEPRECATED - will be removed in next major version) ===== */
+    /* Migrate to standard variable names. See @classic-homes/theme-tokens docs. */
     --ch-color-primary: #a91c22;
     --ch-color-primary-rgb: 169, 28, 34;
     --ch-color-secondary: #3ba4a7;
@@ -164,7 +165,7 @@
     --sidebar-border: 218 11% 65%;
     --sidebar-ring: 0 91% 71%;
 
-    /* Legacy Aliases (dark) */
+    /* Legacy Aliases - dark (DEPRECATED - will be removed in next major version) */
     --ch-color-primary: #f87171;
     --ch-color-primary-rgb: 248, 113, 113;
     --ch-color-secondary: #67cccf;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-tokens",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "Design tokens for the Classic theme system",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -13,6 +13,9 @@
     },
     "./css": "./dist/tokens.css"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist"
   ],