@cyberskill/design 1.1.1 → 1.3.8

package/tokens/provenance.json

@@ -1,10 +1,10 @@
 {
   "system": "CyberSkill Design System",
-  "release": "1.1.1",
+  "release": "1.3.8",
   "source": "tokens/tokens.dtcg.json",
-  "sourceSha256": "9386ad73cf23d4585fb5d372e872dd76f4df052eab3f78ae211c1060e8662318",
+  "sourceSha256": "5d7d5587bec9b99e720da1f1ceba6a6804ccc0547243ae47897b6e34cc0f03ce",
   "dtcgStamp": {
-    "version": "1.1.1",
+    "version": "1.3.8",
     "generated": "2026-07-23"
   },
   "conversions": {
@@ -16,19 +16,19 @@
     "darkPackSuffix": "<Scope>Dark (APCA-derived)"
   },
   "counts": {
-    "baseTokens": 146,
+    "baseTokens": 162,
     "byType": {
-      "color": 29,
-      "dimension": 75,
-      "number": 25,
+      "color": 38,
+      "dimension": 80,
+      "number": 27,
       "shadow": 5,
       "duration": 4,
       "cubicBezier": 4,
       "fontFamily": 4
     },
-    "darkColorOverrides": 17,
+    "darkColorOverrides": 21,
     "densityCompactOverrides": 0,
-    "darkPackConstants": 90,
+    "darkPackConstants": 105,
     "skipped": 0
   },
   "skipped": [],
@@ -36,17 +36,17 @@
     {
       "file": "tokens/native/CSTokens.swift",
       "lang": "swift",
-      "sha256": "2afd8e884a220a9220723301ae030bd146853fd2c793e4adfe61dc8b2097f931"
+      "sha256": "dcabf92440dc19358959f30db2b9899a43da78c57cc9c6ca81e18e506497119f"
     },
     {
       "file": "tokens/native/CSTokens.kt",
       "lang": "kotlin",
-      "sha256": "1d60bc32651a87afd6c12b2bf8737fec095f7107c369e89fb16b11368dd1c4a3"
+      "sha256": "9a2599519538b6aeaded59c09076244501e09b9b48100ea3caf570391d3cd5a3"
     },
     {
       "file": "tokens/native/cs_tokens.dart",
       "lang": "dart",
-      "sha256": "ea9b03e737c65921d9045424099beb63eb9a90f6149af54082925665f90543c8"
+      "sha256": "4b012288aee948f63a59bd056a53cc04a82ee97a754fdda5d7e176ca9cdef0d4"
     }
   ]
 }

package/tokens/spacing.css

@@ -21,8 +21,9 @@
   --cs-radius-lg: 14px;  /* cards/panels in product surfaces */
   --cs-radius-full: 999px;
 
-  /* Breakpoints (mobile-first) */
+  /* Breakpoints (mobile-first). `phone` is the justified 320-reflow stop (UX-003). */
   --cs-breakpoint-xs: 0px;
+  --cs-breakpoint-phone: 360px;
   --cs-breakpoint-sm: 640px;
   --cs-breakpoint-md: 768px;
   --cs-breakpoint-lg: 1024px;
@@ -31,4 +32,6 @@
 
   /* Layout */
   --cs-container-max: 1320px;
+  /* Readable prose measure (UX-024) — ~65–75ch for long-form kit/tool copy */
+  --cs-prose-measure: 45rem;
 }

package/tokens/tokens.dtcg.json

@@ -3,7 +3,7 @@
   "$extensions": {
     "com.cyberskill": {
       "system": "CyberSkill Design System",
-      "version": "1.1.1",
+      "version": "1.3.8",
       "generated": "2026-07-23",
       "source": "tokens/tokens.json",
       "note": "Scope overrides (dark/system theme · 15 element×variant packs) are carried under $extensions.overrides keyed by CSS selector — apply the matching selector on :root/ancestor to activate.",
@@ -31,7 +31,11 @@
             "--cs-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)",
             "--cs-shadow-md": "0 12px 30px rgba(0, 0, 0, 0.50)",
             "--cs-shadow-lg": "0 20px 60px rgba(0, 0, 0, 0.55)",
-            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)"
+            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)",
+            "--cs-color-semantic-success-fg": "#1a1108",
+            "--cs-color-semantic-danger-fg": "#1a1108",
+            "--cs-color-semantic-warning-fg": "#1a1108",
+            "--cs-color-semantic-info-fg": "#1a1108"
           },
           "system": {
             "--cs-color-surface-page": "#1a1108",
@@ -55,7 +59,11 @@
             "--cs-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)",
             "--cs-shadow-md": "0 12px 30px rgba(0, 0, 0, 0.50)",
             "--cs-shadow-lg": "0 20px 60px rgba(0, 0, 0, 0.55)",
-            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)"
+            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)",
+            "--cs-color-semantic-success-fg": "#1a1108",
+            "--cs-color-semantic-danger-fg": "#1a1108",
+            "--cs-color-semantic-warning-fg": "#1a1108",
+            "--cs-color-semantic-info-fg": "#1a1108"
           }
         },
         "elements": {
@@ -64,35 +72,38 @@
             "--cs-accent-strong": "#90825E",
             "--cs-accent-bright": "#F6EBCC",
             "--cs-accent-on": "#292414",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FBF7EA",
             "--cs-accent-ink": "#292414",
             "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
             "--cs-accent-grad-a": "#F8E9C0",
-            "--cs-accent-grad-b": "#FCAF91",
+            "--cs-accent-grad-b": "#F3B958",
             "--cs-color-text-accent": "#90825E",
-            "--cs-color-link": "#90825E"
+            "--cs-color-link": "#7B6D4A"
           },
           "tho": {
             "--cs-accent": "#F4BA17",
             "--cs-accent-strong": "#A47D17",
             "--cs-accent-bright": "#F4BA17",
             "--cs-accent-on": "#45210E",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FBF4E9",
             "--cs-accent-ink": "#45210E",
             "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
             "--cs-accent-grad-a": "#F4BA17",
-            "--cs-accent-grad-b": "#FCAF91"
+            "--cs-accent-grad-b": "#F3B958"
           },
           "tho.clay": {
             "--cs-accent": "#513801",
             "--cs-accent-strong": "#201300",
             "--cs-accent-bright": "#DEC7A2",
             "--cs-accent-on": "#2D220E",
+            "--cs-accent-on-strong": "#FFFFFF",
             "--cs-accent-tint": "#FFF6E7",
             "--cs-accent-ink": "#2D220E",
             "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
             "--cs-accent-grad-a": "#513801",
-            "--cs-accent-grad-b": "#FCAF91",
+            "--cs-accent-grad-b": "#F3B958",
             "--cs-color-text-accent": "#201300",
             "--cs-color-link": "#201300"
           },
@@ -101,32 +112,35 @@
             "--cs-accent-strong": "#967C75",
             "--cs-accent-bright": "#FCE6DF",
             "--cs-accent-on": "#2C211E",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FEF4F2",
             "--cs-accent-ink": "#2C211E",
             "--cs-accent-glow": "rgba(255, 225, 216, 0.48)",
             "--cs-accent-grad-a": "#FFE1D8",
             "--cs-accent-grad-b": "#F4BA17",
             "--cs-color-text-accent": "#967C75",
-            "--cs-color-link": "#967C75"
+            "--cs-color-link": "#846B64"
           },
           "hoa": {
             "--cs-accent": "#FCAF91",
             "--cs-accent-strong": "#B47054",
             "--cs-accent-bright": "#FED3C3",
             "--cs-accent-on": "#381B10",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FFF4F0",
             "--cs-accent-ink": "#381B10",
             "--cs-accent-glow": "rgba(252, 175, 145, 0.48)",
             "--cs-accent-grad-a": "#FCAF91",
             "--cs-accent-grad-b": "#F4BA17",
             "--cs-color-text-accent": "#B47054",
-            "--cs-color-link": "#B47054"
+            "--cs-color-link": "#A15E43"
           },
           "hoa.lava": {
             "--cs-accent": "#622B06",
             "--cs-accent-strong": "#280D00",
             "--cs-accent-bright": "#F1BEA4",
             "--cs-accent-on": "#361D0F",
+            "--cs-accent-on-strong": "#FFFFFF",
             "--cs-accent-tint": "#FFF4EF",
             "--cs-accent-ink": "#361D0F",
             "--cs-accent-glow": "rgba(98, 43, 6, 0.48)",
@@ -140,32 +154,35 @@
             "--cs-accent-strong": "#5A8A90",
             "--cs-accent-bright": "#CDF4F9",
             "--cs-accent-on": "#13282B",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#EBFAFC",
             "--cs-accent-ink": "#13282B",
             "--cs-accent-glow": "rgba(192, 245, 252, 0.48)",
             "--cs-accent-grad-a": "#C0F5FC",
             "--cs-accent-grad-b": "#A3D768",
             "--cs-color-text-accent": "#5A8A90",
-            "--cs-color-link": "#5A8A90"
+            "--cs-color-link": "#48787E"
           },
           "thuy": {
             "--cs-accent": "#2EDBF7",
             "--cs-accent-strong": "#108EA0",
             "--cs-accent-bright": "#99EEFF",
             "--cs-accent-on": "#012A30",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#E7FBFF",
             "--cs-accent-ink": "#012A30",
             "--cs-accent-glow": "rgba(46, 219, 247, 0.48)",
             "--cs-accent-grad-a": "#2EDBF7",
             "--cs-accent-grad-b": "#A3D768",
             "--cs-color-text-accent": "#108EA0",
-            "--cs-color-link": "#108EA0"
+            "--cs-color-link": "#027B8B"
           },
           "thuy.ocean": {
             "--cs-accent": "#004554",
             "--cs-accent-strong": "#011A21",
             "--cs-accent-bright": "#A8D3E0",
             "--cs-accent-on": "#10282F",
+            "--cs-accent-on-strong": "#FFFFFF",
             "--cs-accent-tint": "#EAFAFF",
             "--cs-accent-ink": "#10282F",
             "--cs-accent-glow": "rgba(0, 69, 84, 0.48)",
@@ -179,32 +196,35 @@
             "--cs-accent-strong": "#7C8965",
             "--cs-accent-bright": "#E5F1D2",
             "--cs-accent-on": "#212617",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#F4F9ED",
             "--cs-accent-ink": "#212617",
             "--cs-accent-glow": "rgba(225, 241, 200, 0.48)",
             "--cs-accent-grad-a": "#E1F1C8",
             "--cs-accent-grad-b": "#FCAF91",
             "--cs-color-text-accent": "#7C8965",
-            "--cs-color-link": "#7C8965"
+            "--cs-color-link": "#687451"
           },
           "moc": {
             "--cs-accent": "#A3D768",
             "--cs-accent-strong": "#629122",
             "--cs-accent-bright": "#C5ED9C",
             "--cs-accent-on": "#182A00",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#EFFCE3",
             "--cs-accent-ink": "#182A00",
             "--cs-accent-glow": "rgba(163, 215, 104, 0.48)",
             "--cs-accent-grad-a": "#A3D768",
             "--cs-accent-grad-b": "#FCAF91",
             "--cs-color-text-accent": "#629122",
-            "--cs-color-link": "#629122"
+            "--cs-color-link": "#517B13"
           },
           "moc.forest": {
             "--cs-accent": "#1A4A01",
             "--cs-accent-strong": "#051D00",
             "--cs-accent-bright": "#B0D8A3",
             "--cs-accent-on": "#162A0E",
+            "--cs-accent-on-strong": "#FFFFFF",
             "--cs-accent-tint": "#ECFDE7",
             "--cs-accent-ink": "#162A0E",
             "--cs-accent-glow": "rgba(26, 74, 1, 0.48)",
@@ -218,32 +238,35 @@
             "--cs-accent-strong": "#947F65",
             "--cs-accent-bright": "#FBE8D2",
             "--cs-accent-on": "#2B2217",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FDF5ED",
             "--cs-accent-ink": "#2B2217",
             "--cs-accent-glow": "rgba(254, 229, 199, 0.48)",
             "--cs-accent-grad-a": "#FEE5C7",
             "--cs-accent-grad-b": "#2EDBF7",
             "--cs-color-text-accent": "#947F65",
-            "--cs-color-link": "#947F65"
+            "--cs-color-link": "#826D54"
           },
           "kim": {
             "--cs-accent": "#F3B958",
             "--cs-accent-strong": "#AC780B",
             "--cs-accent-bright": "#FDD89F",
             "--cs-accent-on": "#312002",
+            "--cs-accent-on-strong": "#1A1108",
             "--cs-accent-tint": "#FFF5E7",
             "--cs-accent-ink": "#312002",
             "--cs-accent-glow": "rgba(243, 185, 88, 0.48)",
             "--cs-accent-grad-a": "#F3B958",
             "--cs-accent-grad-b": "#2EDBF7",
             "--cs-color-text-accent": "#AC780B",
-            "--cs-color-link": "#AC780B"
+            "--cs-color-link": "#966700"
           },
           "kim.steel": {
             "--cs-accent": "#503901",
             "--cs-accent-strong": "#1F1400",
             "--cs-accent-bright": "#DCC8A2",
             "--cs-accent-on": "#2D220E",
+            "--cs-accent-on-strong": "#FFFFFF",
             "--cs-accent-tint": "#FEF6E7",
             "--cs-accent-ink": "#2D220E",
             "--cs-accent-glow": "rgba(80, 57, 1, 0.48)",
@@ -259,6 +282,7 @@
             "--cs-accent-bright": "#F6EBCC",
             "--cs-accent-strong": "#665A37",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#332701",
             "--cs-accent-ink": "#F6EBCC"
           },
@@ -267,6 +291,7 @@
             "--cs-accent-bright": "#FEC42C",
             "--cs-accent-strong": "#73560B",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#352602",
             "--cs-accent-ink": "#FECD5E"
           },
@@ -275,6 +300,7 @@
             "--cs-accent-bright": "#E4CDA8",
             "--cs-accent-strong": "#1F1300",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#372502",
             "--cs-accent-ink": "#E7D0AB"
           },
@@ -283,6 +309,7 @@
             "--cs-accent-bright": "#FCE6DF",
             "--cs-accent-strong": "#6F5750",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#38231C",
             "--cs-accent-ink": "#FCE6DF"
           },
@@ -291,6 +318,7 @@
             "--cs-accent-bright": "#FED3C3",
             "--cs-accent-strong": "#8A4A30",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#411E0F",
             "--cs-accent-ink": "#FED3C3"
           },
@@ -299,6 +327,7 @@
             "--cs-accent-bright": "#F8C4AA",
             "--cs-accent-strong": "#280D00",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#401F0B",
             "--cs-accent-ink": "#FBC7AD"
           },
@@ -307,6 +336,7 @@
             "--cs-accent-bright": "#CDF4F9",
             "--cs-accent-strong": "#316167",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#022F34",
             "--cs-accent-ink": "#CDF4F9"
           },
@@ -315,6 +345,7 @@
             "--cs-accent-bright": "#99EEFF",
             "--cs-accent-strong": "#046270",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#032F36",
             "--cs-accent-ink": "#99EEFF"
           },
@@ -323,6 +354,7 @@
             "--cs-accent-bright": "#ABD6E3",
             "--cs-accent-strong": "#011A21",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#002F3A",
             "--cs-accent-ink": "#AED9E6"
           },
@@ -331,6 +363,7 @@
             "--cs-accent-bright": "#E5F1D2",
             "--cs-accent-strong": "#54603E",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#232D0B",
             "--cs-accent-ink": "#E5F1D2"
           },
@@ -339,6 +372,7 @@
             "--cs-accent-bright": "#C5ED9C",
             "--cs-accent-strong": "#416501",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#1F2E0B",
             "--cs-accent-ink": "#C5ED9C"
           },
@@ -347,6 +381,7 @@
             "--cs-accent-bright": "#B0D8A3",
             "--cs-accent-strong": "#061D00",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#193011",
             "--cs-accent-ink": "#B6DFA9"
           },
@@ -355,6 +390,7 @@
             "--cs-accent-bright": "#FBE8D2",
             "--cs-accent-strong": "#6B573E",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#37250B",
             "--cs-accent-ink": "#FBE8D2"
           },
@@ -363,6 +399,7 @@
             "--cs-accent-bright": "#FDD89F",
             "--cs-accent-strong": "#795303",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#382503",
             "--cs-accent-ink": "#FDD89F"
           },
@@ -371,6 +408,7 @@
             "--cs-accent-bright": "#DFCBA5",
             "--cs-accent-strong": "#1F1400",
             "--cs-accent-on": "#f5ead9",
+            "--cs-accent-on-strong": "#FFFDF8",
             "--cs-accent-tint": "#362602",
             "--cs-accent-ink": "#E6D1AB"
           }
@@ -447,6 +485,22 @@
     "--cs-color-link-hover": {
       "$value": "#45210E",
       "$type": "color"
+    },
+    "--cs-color-semantic-success-fg": {
+      "$type": "color",
+      "$value": "#FFFFFF"
+    },
+    "--cs-color-semantic-danger-fg": {
+      "$type": "color",
+      "$value": "#FFFFFF"
+    },
+    "--cs-color-semantic-warning-fg": {
+      "$type": "color",
+      "$value": "#FFFFFF"
+    },
+    "--cs-color-semantic-info-fg": {
+      "$type": "color",
+      "$value": "#FFFFFF"
     }
   },
   "component": {
@@ -546,6 +600,10 @@
     "--cs-component-textfield-minHeight": {
       "$value": "44px",
       "$type": "dimension"
+    },
+    "--cs-focus-ring": {
+      "$type": "dimension",
+      "$value": "3px"
     }
   },
   "accent": {
@@ -583,8 +641,12 @@
       "$type": "color"
     },
     "--cs-accent-grad-b": {
-      "$value": "#FCAF91",
+      "$value": "#F3B958",
       "$type": "color"
+    },
+    "--cs-accent-on-strong": {
+      "$type": "color",
+      "$value": "#1A1108"
     }
   },
   "depth": {
@@ -612,6 +674,14 @@
     "--cs-depth-toast": {
       "$value": "200",
       "$type": "number"
+    },
+    "--cs-depth-dropdown": {
+      "$value": "60",
+      "$type": "number"
+    },
+    "--cs-depth-overlay": {
+      "$value": "80",
+      "$type": "number"
     }
   },
   "glass": {
@@ -942,6 +1012,11 @@
       "$value": "0px",
       "$type": "dimension"
     },
+    "--cs-breakpoint-phone": {
+      "$value": "360px",
+      "$type": "dimension",
+      "$description": "Justified small-phone / 320-reflow stop (UX-003)."
+    },
     "--cs-breakpoint-sm": {
       "$value": "640px",
       "$type": "dimension"
@@ -967,6 +1042,11 @@
     "--cs-container-max": {
       "$value": "1320px",
       "$type": "dimension"
+    },
+    "--cs-prose-measure": {
+      "$value": "45rem",
+      "$type": "dimension",
+      "$description": "Readable prose measure for long-form kit/tool copy (UX-024). Web CSS may prefer ch; rem keeps native mirrors convertible."
     }
   },
   "font": {
@@ -1033,6 +1113,11 @@
       "$value": "1.15",
       "$type": "number"
     },
+    "--cs-font-size-2xs": {
+      "$type": "dimension",
+      "$value": "0.6875rem",
+      "$description": "Micro numerals (11px)"
+    },
     "--cs-font-size-xs": {
       "$value": "0.75rem",
       "$type": "dimension"
@@ -1156,6 +1241,16 @@
         }
       }
     },
+    "--cs-text-micro": {
+      "$value": "{font.--cs-font-size-2xs}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-2xs)"
+        }
+      }
+    },
     "--cs-text-caption": {
       "$value": "{font.--cs-font-size-xs}",
       "$type": "dimension",
@@ -1243,5 +1338,23 @@
       "$value": "24px",
       "$type": "dimension"
     }
+  },
+  "doc": {
+    "--cs-doc-ink": {
+      "$type": "color",
+      "$value": "#1A1614"
+    },
+    "--cs-doc-slate": {
+      "$type": "color",
+      "$value": "#3F4C55"
+    },
+    "--cs-doc-fill": {
+      "$type": "color",
+      "$value": "#FDE68A"
+    },
+    "--cs-doc-fill-ink": {
+      "$type": "color",
+      "$value": "#1A1614"
+    }
   }
 }