zilliz-design-system 1.1.1 → 1.2.0

package/README.md

@@ -13,7 +13,7 @@ skin awaiting design sign-off; the other three lines are empty shells.
 The public package is `zilliz-design-system`. Consumers must pin an exact version:
 
 ```bash
-pnpm add -E zilliz-design-system@1.0.1
+pnpm add -E zilliz-design-system@1.2.0
 ```
 
 Do not use `latest`, `^`, `~`, Git branches, or raw commits. Supported CSS imports include:
@@ -172,7 +172,7 @@ zilliz-design-system/
 │   │   ├── semantic.css              role names. The only layer components may reference
 │   │   ├── fonts.css                 Geist @font-face
 │   │   └── print.css                 CMYK / Pantone (empty — values must be set by a human)
-│   ├── tokens-studio/                W3C DTCG Dark-mode color + typography import package
+│   ├── tokens-studio/                W3C DTCG Dark/Light color + typography import package
 │   ├── assets/
 │   │   ├── fonts/                    Geist / Geist Mono woff2
 │   │   └── logos/                    312 logos from all four repos, sorted by what

package/foundations/tokens-studio/$metadata.json

@@ -3,6 +3,7 @@
     "primitives/color",
     "primitives/typography",
     "themes/dark",
+    "themes/light",
     "semantic/color",
     "semantic/typography"
   ]

package/foundations/tokens-studio/$themes.json

@@ -7,6 +7,20 @@
       "primitives/color": "source",
       "primitives/typography": "source",
       "themes/dark": "enabled",
+      "themes/light": "disabled",
+      "semantic/color": "enabled",
+      "semantic/typography": "enabled"
+    }
+  },
+  {
+    "id": "56f34777-65c3-4e64-a27e-89ad9a9ba65f",
+    "name": "Light",
+    "group": "Mode",
+    "selectedTokenSets": {
+      "primitives/color": "source",
+      "primitives/typography": "source",
+      "themes/dark": "disabled",
+      "themes/light": "enabled",
       "semantic/color": "enabled",
       "semantic/typography": "enabled"
     }

package/foundations/tokens-studio/primitives/color.json

@@ -101,6 +101,9 @@
     "palette": {
       "secondaryText": { "$value": "#b3b5c1", "$type": "color", "$description": "Current website dark secondary text; CSS: --ds-text-secondary" },
       "tertiaryText": { "$value": "#61626d", "$type": "color", "$description": "Current website dark tertiary text; CSS: --ds-text-tertiary" },
+      "lightSecondaryText": { "$value": "#514c48", "$type": "color", "$description": "Approved website light secondary text; CSS: --ds-text-secondary" },
+      "lightTertiaryText": { "$value": "#777169", "$type": "color", "$description": "Approved website light tertiary text; CSS: --ds-text-tertiary" },
+      "lightMutedText": { "$value": "#79726a", "$type": "color", "$description": "Approved website light muted text; CSS: --ds-text-muted" },
       "danger": { "$value": "#ec4e4e", "$type": "color", "$description": "CSS: --ds-danger" },
       "warning": { "$value": "#ffc300", "$type": "color", "$description": "CSS: --ds-warning" },
       "success": { "$value": "#4caf50", "$type": "color", "$description": "CSS: --ds-success" }

package/foundations/tokens-studio/themes/light.json

@@ -0,0 +1,42 @@
+{
+  "theme": {
+    "surface": {
+      "page": { "$value": "{color.warm.100}", "$type": "color" },
+      "raised": { "$value": "{color.warm.50}", "$type": "color" },
+      "overlay": { "$value": "{color.neutral.000}", "$type": "color" },
+      "sunken": { "$value": "{color.warm.200}", "$type": "color" },
+      "hover": { "$value": "{color.alpha.ink.06}", "$type": "color" },
+      "active": { "$value": "{color.warm.300}", "$type": "color" },
+      "tabGroup": { "$value": "{color.warm.200}", "$type": "color" }
+    },
+    "text": {
+      "primary": { "$value": "{color.ink.900}", "$type": "color" },
+      "secondary": { "$value": "{color.palette.lightSecondaryText}", "$type": "color" },
+      "tertiary": { "$value": "{color.palette.lightTertiaryText}", "$type": "color" },
+      "muted": { "$value": "{color.palette.lightMutedText}", "$type": "color" },
+      "faint": { "$value": "{color.ink.400}", "$type": "color" },
+      "inverse": { "$value": "{color.neutral.000}", "$type": "color" },
+      "code": { "$value": "{color.ink.600}", "$type": "color" }
+    },
+    "border": {
+      "subtle": { "$value": "{color.alpha.ink.10}", "$type": "color" },
+      "default": { "$value": "{color.warm.300}", "$type": "color" },
+      "strong": { "$value": "{color.warm.900}", "$type": "color" },
+      "hover": { "$value": "{color.ink.400}", "$type": "color" },
+      "focus": { "$value": "{color.blue.650}", "$type": "color" }
+    },
+    "accent": {
+      "default": { "$value": "{color.blue.650}", "$type": "color" },
+      "hover": { "$value": "{color.blue.800}", "$type": "color" },
+      "subtle": { "$value": "{color.blue.100}", "$type": "color" },
+      "onAccent": { "$value": "{color.neutral.000}", "$type": "color" },
+      "glow": { "$value": "#3f46ff33", "$type": "color", "$description": "Source rgba(63,70,255,.20); CSS: --ds-accent-glow" }
+    },
+    "status": {
+      "danger": { "$value": "{color.palette.danger}", "$type": "color" },
+      "warning": { "$value": "{color.palette.warning}", "$type": "color" },
+      "success": { "$value": "{color.palette.success}", "$type": "color" },
+      "info": { "$value": "{color.blue.400}", "$type": "color" }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zilliz-design-system",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Shared Zilliz design tokens, typography, assets, and product-line CSS skins.",
   "license": "MIT",
   "private": false,

package/website/zilliz/skin/light.css

@@ -5,7 +5,7 @@
  *
  * The page sits on a WARM, yellow-leaning white, not pure white. Reference: the
  * BYOC landing page. Values come from the L1 --z-warm-* / --z-ink-* / --z-blue-*
- * ramps; no new decisions were made here.
+ * ramps plus the approved light text palette.
  *
  * ⚠️ The 24 existing components reference --z-* (hard-bound to dark) and therefore
  *    DO NOT hold up under this skin. This file serves newly written components that
@@ -27,9 +27,9 @@
 
   /* ── Text: warm ink, never cold grey ──────────── */
   --ds-text-primary:    var(--z-ink-900);    /* #1c1917 headings, primary rows */
-  --ds-text-secondary:  var(--z-ink-700);    /* #44403c body copy */
-  --ds-text-tertiary:   var(--z-ink-600);    /* #57534e third-level supporting copy */
-  --ds-text-muted:      var(--z-ink-500);    /* #78716c descriptions */
+  --ds-text-secondary:  #514c48;             /* body copy — 8.05:1 on page */
+  --ds-text-tertiary:   #777169;             /* supporting copy — 4.59:1 on page */
+  --ds-text-muted:      #79726a;             /* descriptions — 4.50:1 on page */
   --ds-text-faint:      var(--z-ink-400);    /* #a8a29e disabled, legal, placeholder */
   --ds-text-inverse:    #ffffff;             /* sits on accent */
   --ds-text-code:       var(--z-ink-600);    /* #57534e monospace body */
@@ -52,8 +52,9 @@
 
 /* ── Contrast (against #faf9f6, measured) ─────────
  *   text-primary   16.6  ✓ AA
- *   text-secondary  9.8  ✓ AA
- *   text-muted      4.6  ✓ AA (only just — do not lighten further)
+ *   text-secondary  8.1  ✓ AA
+ *   text-tertiary   4.6  ✓ AA
+ *   text-muted      4.5  ✓ AA (only just — do not lighten further)
  *   text-faint      2.4  ✗ —— disabled states and pure decoration ONLY.
  *                          Use text-muted for legal copy and footnotes.
  *   accent as text  5.7  ✓ AA | white on accent 6.0 ✓ AA