@chai-ui/tokens 0.2.0 → 0.3.0

package/dist/css/tokens.css

@@ -7,6 +7,7 @@
   --chai-color-root-gray-50: #8b8b8b;
   --chai-color-root-gray-60: #9e9e9e;
   --chai-color-root-gray-75: #c2c2c2;
+  --chai-color-root-gray-80: #d9d9d9;
   --chai-color-root-gray-85: #e0e0e0;
   --chai-color-root-gray-90: #e9e9e9;
   --chai-color-root-gray-97: #f8f8f8;
@@ -54,6 +55,7 @@
   --chai-color-semantic-overlay-light: rgba(255, 255, 255, 0.5);
   --chai-color-semantic-scrim: rgba(0, 0, 0, 0.6);
   --chai-color-semantic-media-backdrop: #000000;
+  --chai-color-semantic-on-media-fade: #d9d9d9;
   --chai-color-semantic-region-1: #007c89;
   --chai-color-semantic-region-2: #a21caf;
   --chai-color-semantic-region-3: #b45309;
@@ -116,6 +118,7 @@
   --chai-motion-easing-growth: cubic-bezier(0.34, 1.2, 0.64, 1);
   --chai-shadow-menu: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
   --chai-gradient-ai: linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6);
+  --chai-gradient-media-fade: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000);
 }
 
 /* Material Design 3 roles, driven by Chai tokens (color.material in src/tokens.json). */

package/dist/figma/tokens.figma.json

@@ -30,6 +30,10 @@
           "value": "#c2c2c2",
           "type": "color"
         },
+        "gray-80": {
+          "value": "#d9d9d9",
+          "type": "color"
+        },
         "gray-85": {
           "value": "#e0e0e0",
           "type": "color"
@@ -237,7 +241,12 @@
         "media-backdrop": {
           "value": "#000000",
           "type": "color",
-          "description": "Letterboxing behind video"
+          "description": "Letterboxing behind video, and the strip below paginated media"
+        },
+        "on-media-fade": {
+          "value": "#d9d9d9",
+          "type": "color",
+          "description": "Text on the dark fade at the bottom of media: the result card's model label"
         },
         "region-1": {
           "value": "#007c89",
@@ -605,6 +614,11 @@
         "value": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)",
         "type": "other",
         "description": "The AI shimmer: text revealing after prompt optimization"
+      },
+      "media-fade": {
+        "value": "linear-gradient(180deg, rgba(0, 0, 0, 0), #000000)",
+        "type": "other",
+        "description": "Darkens the bottom of paginated media into the media-backdrop strip, so the model label and page dots read over any image"
       }
     }
   }

package/dist/js/index.js

@@ -9,6 +9,7 @@ export const tokens = {
       "gray-50": "#8b8b8b",
       "gray-60": "#9e9e9e",
       "gray-75": "#c2c2c2",
+      "gray-80": "#d9d9d9",
       "gray-85": "#e0e0e0",
       "gray-90": "#e9e9e9",
       "gray-97": "#f8f8f8",
@@ -58,6 +59,7 @@ export const tokens = {
       "overlay-light": "rgba(255, 255, 255, 0.5)",
       "scrim": "rgba(0, 0, 0, 0.6)",
       "media-backdrop": "#000000",
+      "on-media-fade": "#d9d9d9",
       "region-1": "#007c89",
       "region-2": "#a21caf",
       "region-3": "#b45309",
@@ -167,7 +169,8 @@ export const tokens = {
     "menu": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)"
   },
   "gradient": {
-    "ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)"
+    "ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)",
+    "media-fade": "linear-gradient(180deg, rgba(0, 0, 0, 0), #000000)"
   }
 };
 
@@ -180,6 +183,7 @@ export const flatTokens = {
   "color.root.gray-50": "#8b8b8b",
   "color.root.gray-60": "#9e9e9e",
   "color.root.gray-75": "#c2c2c2",
+  "color.root.gray-80": "#d9d9d9",
   "color.root.gray-85": "#e0e0e0",
   "color.root.gray-90": "#e9e9e9",
   "color.root.gray-97": "#f8f8f8",
@@ -227,6 +231,7 @@ export const flatTokens = {
   "color.semantic.overlay-light": "rgba(255, 255, 255, 0.5)",
   "color.semantic.scrim": "rgba(0, 0, 0, 0.6)",
   "color.semantic.media-backdrop": "#000000",
+  "color.semantic.on-media-fade": "#d9d9d9",
   "color.semantic.region-1": "#007c89",
   "color.semantic.region-2": "#a21caf",
   "color.semantic.region-3": "#b45309",
@@ -307,7 +312,8 @@ export const flatTokens = {
   "motion.easing.standard": "cubic-bezier(0.2, 0, 0, 1)",
   "motion.easing.growth": "cubic-bezier(0.34, 1.2, 0.64, 1)",
   "shadow.menu": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
-  "gradient.ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)"
+  "gradient.ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)",
+  "gradient.media-fade": "linear-gradient(180deg, rgba(0, 0, 0, 0), #000000)"
 };
 
 /** Alias tokens and what they point at, e.g. tokenRefs["color.material.primary"] === "color.semantic.accent" */
@@ -335,6 +341,7 @@ export const tokenRefs = {
   "color.semantic.control-text-muted": "color.root.gray-40",
   "color.semantic.on-overlay": "color.root.gray-100",
   "color.semantic.media-backdrop": "color.root.gray-0",
+  "color.semantic.on-media-fade": "color.root.gray-80",
   "color.semantic.region-1": "color.root.cyan-40",
   "color.semantic.region-2": "color.root.magenta-40",
   "color.semantic.region-3": "color.root.orange-40",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/tokens",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CHAI UI design tokens — single source of truth, built to CSS variables, TypeScript, and a Figma Tokens/Variables-plugin JSON.",
   "license": "MIT",
   "author": "kazarazat",