@cyberskill/design 2.2.0 → 2.3.0

package/tokens/tokens.js

@@ -1,18 +1,18 @@
-// CyberSkill design tokens — generated from tokens/*.css (v2.2.0). Do not edit by hand.
+// CyberSkill design tokens — generated from tokens/*.css (v2.3.0). Do not edit by hand.
 export const tokens = {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md).",
     "declarationGraph": {
       "path": "declarations.json",
       "schemaVersion": 1,
-      "sha256": "214545d0ae1878832e701e3bf4811e39fe4a119f1158c6f3b9d0779201deb18f",
-      "declarations": 1077,
+      "sha256": "7d502e7e02118db2ff6485e9cea94eca05a3f3ff64c92bddef93d876c3000bd1",
+      "declarations": 1080,
       "publicDeclarations": 397,
       "publicNames": 216,
-      "privateDeclarations": 680
+      "privateDeclarations": 683
     }
   },
   "root": {

package/tokens/tokens.json

@@ -1,17 +1,17 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md).",
     "declarationGraph": {
       "path": "declarations.json",
       "schemaVersion": 1,
-      "sha256": "214545d0ae1878832e701e3bf4811e39fe4a119f1158c6f3b9d0779201deb18f",
-      "declarations": 1077,
+      "sha256": "7d502e7e02118db2ff6485e9cea94eca05a3f3ff64c92bddef93d876c3000bd1",
+      "declarations": 1080,
       "publicDeclarations": 397,
       "publicNames": 216,
-      "privateDeclarations": 680
+      "privateDeclarations": 683
     }
   },
   "root": {

package/tokens/typography.css

@@ -65,9 +65,8 @@
   --cs-letter-spacing-normal: 0;
   --cs-letter-spacing-caps: 0.08em; /* uppercase eyebrows / table headers */
 
-  /* Heading treatment (Expression-overridable — the TYPE half of the treatment axis,
-   * v3 Batch 0). Expressions retune these so headings read Swiss / editorial / luxe /
-   * brutalist, not just via radius+shadow. Base = today's values (extrabold, tight). */
+  /* Heading treatment — semantic heading family, weight, and tracking roles
+   * consumed by .cs-display and .cs-h1…h4 in base/typography.css. */
   --cs-heading-family: var(--cs-font-family-ui);
   --cs-heading-weight-strong: var(--cs-font-weight-extrabold); /* display · h1 */
   --cs-heading-weight: var(--cs-font-weight-bold);             /* h2 · h3 */

package/tokens/variables.css

@@ -1178,6 +1178,9 @@
 /* Source: base/shell.css */
 /* Source: base/glass.css */
 :root {
+  --_cs-border-subtle: var(--_cs-light, color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 18%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 82%, transparent));
+  --_cs-border-strong: var(--_cs-light, color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e)))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 65%, var(--cs-color-text-primary, #f5ead9)));
+  --_cs-surface-scrim: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 48%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-surface-page, #1a1108) 72%, transparent));
   --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
   --cs-glass-whisper-border: transparent;
   --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);

package/ui_kits/website/site.css

@@ -43,7 +43,7 @@ html, body { overflow-x: clip; }
 .hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--cs-space-8); align-items: center; padding-block: 84px 96px; }
 .hero-in > * { min-width: 0; }
 .hero .eyebrow { color: var(--cs-color-brand-ochre); }
-.hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
+.hero h1 { font-size: clamp(var(--cs-font-size-3xl, 40px), 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
 .hero .vn { font-size: 20px; font-weight: 600; opacity: .9; margin-bottom: 18px; }
 .hero .lead { font-size: 18px; line-height: 1.55; max-width: min(620px, var(--cs-prose-measure, 45rem)); opacity: .95; }
 .wish { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; flex-wrap: wrap; }
@@ -68,7 +68,7 @@ html, body { overflow-x: clip; }
 /* section shell */
 .sec { padding: 88px 0; }
 .sec-alt { background: var(--cs-color-surface-raised); }
-.sec h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
+.sec h2 { font-size: clamp(var(--cs-font-size-xl, 28px), 4vw, var(--cs-font-size-3xl, 40px)); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
 .sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: min(620px, var(--cs-prose-measure, 45rem)); margin: 0 0 40px; }
 
 /* services */