@cyberskill/design 1.0.0

package/tokens/native/cs_tokens.dart

@@ -0,0 +1,253 @@
+// CyberSkill Design System — native design tokens.
+// GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
+// release v1.0.0 · source sha256 2de878e4f152f960…
+// conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
+// dark element packs: see $extensions.overrides.elementsDark
+// provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html
+
+import 'package:flutter/material.dart';
+
+class CSTokens {
+  CSTokens._();
+  static const Color colorBrandUmber = Color(0xFF45210E);
+  static const Color colorBrandOchre = Color(0xFFF4BA17);
+  static const Color colorSurfacePage = Color(0xFFFFFDF8);
+  static const Color colorSurfacePanel = Color(0xFFFFFFFF);
+  static const Color colorSurfaceRaised = Color(0xFFFBF4E9);
+  static const Color colorTextPrimary = Color(0xFF45210E);
+  static const Color colorTextInverse = Color(0xFFFFFFFF);
+  static const Color colorTextAccent = Color(0xFF6E3B0E);
+  static const Color colorTextMuted = Color(0xFF6E5A4C);
+  static const Color colorSemanticSuccess = Color(0xFF166534);
+  static const Color colorSemanticDanger = Color(0xFFB42318);
+  static const Color colorSemanticWarning = Color(0xFF92400E);
+  static const Color colorSemanticInfo = Color(0xFF1D4ED8);
+  static const Color colorAccentOchre = Color(0xFFF4BA17);
+  static const Color colorBorderDefault = Color(0xFFE7D9C6);
+  static const Color colorLink = Color(0xFF6E3B0E);
+  static const Color colorLinkHover = Color(0xFF45210E);
+  static const Color componentButtonPrimaryBg = Color(0xFF45210E);
+  static const Color componentButtonPrimaryFg = Color(0xFFFFFFFF);
+  static const double componentButtonGap = 8;
+  static const double componentButtonRadius = 8;
+  static const double componentButtonXsPaddingY = 4;
+  static const double componentButtonXsPaddingX = 10;
+  static const double componentButtonXsMinHeight = 28;
+  static const double componentButtonXsMinWidth = 28;
+  static const double componentButtonXsMinHeightCoarse = 36;
+  static const double componentButtonSmPaddingY = 8;
+  static const double componentButtonSmPaddingX = 14;
+  static const double componentButtonSmMinHeight = 36;
+  static const double componentButtonSmMinHeightCoarse = 40;
+  static const double componentButtonMdPaddingY = 12;
+  static const double componentButtonMdPaddingX = 20;
+  static const double componentButtonMdMinHeight = 44;
+  static const double componentButtonMdMinHeightCoarse = 44;
+  static const double componentButtonLgPaddingY = 16;
+  static const double componentButtonLgPaddingX = 28;
+  static const double componentButtonLgMinHeight = 52;
+  static const Color componentTextfieldBorderDefault = Color(0xFFBFA58F);
+  static const double componentTextfieldPaddingY = 10;
+  static const double componentTextfieldPaddingX = 12;
+  static const double componentTextfieldMinHeight = 44;
+  static const Color accent = Color(0xFFF4BA17);
+  static const Color accentStrong = Color(0xFFB98200);
+  static const Color accentBright = Color(0xFFF4BA17);
+  static const Color accentOn = Color(0xFF45210E);
+  static const Color accentTint = Color(0xFFFBF4E9);
+  static const Color accentInk = Color(0xFF45210E);
+  static const Color accentGlow = Color(0x80F4BA17);
+  static const Color accentGradA = Color(0xFFF4BA17);
+  static const Color accentGradB = Color(0xFFC77B4A);
+  static const double depthBg = 0;
+  static const double depthSection = 5;
+  static const double depthCard = 10;
+  static const double depthNav = 50;
+  static const double depthModal = 100;
+  static const double depthToast = 200;
+  static const double glassWhisperBlur = 8;
+  static const String glassWhisperSaturate = "110%";
+  static const String glassWhisperOpacity = "60%";
+  static const double glassLightBlur = 12;
+  static const String glassLightSaturate = "130%";
+  static const String glassLightOpacity = "70%";
+  static const double glassStandardBlur = 16;
+  static const String glassStandardSaturate = "150%";
+  static const String glassStandardOpacity = "80%";
+  static const double glassHeavyBlur = 24;
+  static const String glassHeavySaturate = "180%";
+  static const String glassHeavyOpacity = "90%";
+  static const String shadowXs = "0 1px 2px rgba(69, 33, 14, 0.06)";
+  static const String shadowSm = "0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06)";
+  static const String shadowMd = "0 12px 30px rgba(31, 19, 11, 0.18)";
+  static const String shadowLg = "0 20px 60px rgba(69, 33, 14, 0.18)";
+  static const String shadowXl = "0 24px 80px rgba(31, 19, 11, 0.26)";
+  static const double durationInstantMs = 80;
+  static const double durationFastMs = 120;
+  static const double durationBaseMs = 200;
+  static const double durationSlowMs = 320;
+  static const List<double> easeStandard = [0.2, 0, 0, 1];
+  static const List<double> easeEntrance = [0, 0, 0, 1];
+  static const List<double> easeExit = [0.4, 0, 1, 1];
+  static const List<double> easeEmphasized = [0.2, 0, 0, 1];
+  static const double space0 = 0;
+  static const double space1 = 4;
+  static const double space2 = 8;
+  static const double space3 = 12;
+  static const double space4 = 16;
+  static const double space5 = 20;
+  static const double space6 = 24;
+  static const double space8 = 32;
+  static const double space10 = 40;
+  static const double space12 = 48;
+  static const double space16 = 64;
+  static const double space20 = 80;
+  static const double space24 = 96;
+  static const double radiusSm = 4;
+  static const double radiusMd = 8;
+  static const double radiusLg = 14;
+  static const double radiusFull = 999;
+  static const double breakpointXs = 0;
+  static const double breakpointSm = 640;
+  static const double breakpointMd = 768;
+  static const double breakpointLg = 1024;
+  static const double breakpointXl = 1280;
+  static const double breakpoint2xl = 1536;
+  static const double containerMax = 1320;
+  static const String fontFamilyUi = "Be Vietnam Pro, ui-sans-serif, system-ui, sans-serif";
+  static const String fontFamilyMono = "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+  static const double fontWeightRegular = 400;
+  static const double fontWeightMedium = 500;
+  static const double fontWeightSemibold = 600;
+  static const double fontWeightBold = 700;
+  static const double fontWeightExtrabold = 800;
+  static const double fontLineHeightBody = 1.5;
+  static const double fontLineHeightHeading = 1.35;
+  static const double fontLineHeightTight = 1.15;
+  static const double fontSizeXs = 12;
+  static const double fontSizeSm = 14;
+  static const double fontSizeBase = 16;
+  static const double fontSizeMd = 18;
+  static const double fontSizeLg = 20;
+  static const double fontSizeXl = 24;
+  static const double fontSize2xl = 30;
+  static const double fontSize3xl = 36;
+  static const double fontSize4xl = 48;
+  static const double fontSize5xl = 60;
+  static const String textDisplay = "var(--cs-font-size-5xl)";
+  static const String textH1 = "var(--cs-font-size-3xl)";
+  static const String textH2 = "var(--cs-font-size-2xl)";
+  static const String textH3 = "var(--cs-font-size-xl)";
+  static const String textH4 = "var(--cs-font-size-lg)";
+  static const String textBodyLg = "var(--cs-font-size-md)";
+  static const String textBody = "var(--cs-font-size-base)";
+  static const String textSecondary = "var(--cs-font-size-sm)";
+  static const String textCaption = "var(--cs-font-size-xs)";
+  static const String textEyebrow = "var(--cs-font-size-xs)";
+  static const double letterSpacingTightEm = -0.01;
+  static const double letterSpacingNormal = 0;
+  static const double letterSpacingCapsEm = 0.08;
+  static const String headingFamily = "var(--cs-font-family-ui)";
+  static const String headingWeightStrong = "var(--cs-font-weight-extrabold)";
+  static const String headingWeight = "var(--cs-font-weight-bold)";
+  static const String headingTracking = "var(--cs-letter-spacing-tight)";
+  static const double iconSm = 16;
+  static const double iconMd = 20;
+  static const double iconLg = 24;
+
+  // dark-theme color overrides
+  static const Color colorSurfacePageDark = Color(0xFF1A1108);
+  static const Color colorSurfacePanelDark = Color(0xFF221710);
+  static const Color colorSurfaceRaisedDark = Color(0xFF2B1E14);
+  static const Color colorTextPrimaryDark = Color(0xFFF5EAD9);
+  static const Color colorTextInverseDark = Color(0xFF1A1108);
+  static const Color colorTextAccentDark = Color(0xFFF4BA17);
+  static const Color colorTextMutedDark = Color(0xFFC9B7A3);
+  static const Color colorSemanticSuccessDark = Color(0xFF4ADE80);
+  static const Color colorSemanticDangerDark = Color(0xFFF87171);
+  static const Color colorSemanticWarningDark = Color(0xFFFBBF24);
+  static const Color colorSemanticInfoDark = Color(0xFF7CB2FB);
+  static const Color colorBorderDefaultDark = Color(0xFF4A3A2C);
+  static const Color colorLinkDark = Color(0xFFF4BA17);
+  static const Color colorLinkHoverDark = Color(0xFFF5EAD9);
+  static const Color componentButtonPrimaryBgDark = Color(0xFFF4BA17);
+  static const Color componentButtonPrimaryFgDark = Color(0xFF1A1108);
+  static const Color componentTextfieldBorderDefaultDark = Color(0xFF5A4636);
+
+  // dark elemental accent packs (APCA-derived, v4.0.0)
+  static const Color accentBrightThoDark = Color(0xFFFEC42C);
+  static const Color accentStrongThoDark = Color(0xFF795507);
+  static const Color accentOnThoDark = Color(0xFFF5EAD9);
+  static const Color accentTintThoDark = Color(0xFF2F2203);
+  static const Color accentInkThoDark = Color(0xFFFEC849);
+  static const Color accentThoClayDark = Color(0xFFF3A372);
+  static const Color accentBrightThoClayDark = Color(0xFFF4C5A3);
+  static const Color accentStrongThoClayDark = Color(0xFF864927);
+  static const Color accentOnThoClayDark = Color(0xFFF5EAD9);
+  static const Color accentTintThoClayDark = Color(0xFF371C0B);
+  static const Color accentInkThoClayDark = Color(0xFFF7C8A6);
+  static const Color accentStrongThoSandDark = Color(0xFF725615);
+  static const Color accentOnThoSandDark = Color(0xFFF5EAD9);
+  static const Color accentTintThoSandDark = Color(0xFF2F2203);
+  static const Color accentInkThoSandDark = Color(0xFFEFDCB2);
+  static const Color accentHoaDark = Color(0xFFFB9E7A);
+  static const Color accentBrightHoaDark = Color(0xFFFEC099);
+  static const Color accentStrongHoaDark = Color(0xFF9F3405);
+  static const Color accentOnHoaDark = Color(0xFFF5EAD9);
+  static const Color accentTintHoaDark = Color(0xFF381B10);
+  static const Color accentInkHoaDark = Color(0xFFFEC5A1);
+  static const Color accentHoaLavaDark = Color(0xFFFE9982);
+  static const Color accentBrightHoaLavaDark = Color(0xFFFFBF9E);
+  static const Color accentOnHoaLavaDark = Color(0xFFF5EAD9);
+  static const Color accentTintHoaLavaDark = Color(0xFF391A13);
+  static const Color accentInkHoaLavaDark = Color(0xFFFFC4A5);
+  static const Color accentHoaPlasmaDark = Color(0xFFFD97A3);
+  static const Color accentBrightHoaPlasmaDark = Color(0xFFFDBECA);
+  static const Color accentStrongHoaPlasmaDark = Color(0xFFA91A43);
+  static const Color accentOnHoaPlasmaDark = Color(0xFFF5EAD9);
+  static const Color accentTintHoaPlasmaDark = Color(0xFF38191D);
+  static const Color accentInkHoaPlasmaDark = Color(0xFFFDC3CE);
+  static const Color accentThuyDark = Color(0xFF7FC0CE);
+  static const Color accentBrightThuyDark = Color(0xFFACD7E1);
+  static const Color accentOnThuyDark = Color(0xFFF5EAD9);
+  static const Color accentTintThuyDark = Color(0xFF042930);
+  static const Color accentInkThuyDark = Color(0xFFAFDAE4);
+  static const Color accentThuyOceanDark = Color(0xFF87B9DD);
+  static const Color accentBrightThuyOceanDark = Color(0xFFB2D6EA);
+  static const Color accentOnThuyOceanDark = Color(0xFFF5EAD9);
+  static const Color accentTintThuyOceanDark = Color(0xFF08273A);
+  static const Color accentInkThuyOceanDark = Color(0xFFB2D6EA);
+  static const Color accentStrongThuyMistDark = Color(0xFF3F5F65);
+  static const Color accentOnThuyMistDark = Color(0xFFF5EAD9);
+  static const Color accentTintThuyMistDark = Color(0xFF0F282C);
+  static const Color accentInkThuyMistDark = Color(0xFFC4DADD);
+  static const Color accentMocDark = Color(0xFF9BBE78);
+  static const Color accentBrightMocDark = Color(0xFFBFD88D);
+  static const Color accentStrongMocDark = Color(0xFF44622D);
+  static const Color accentOnMocDark = Color(0xFFF5EAD9);
+  static const Color accentTintMocDark = Color(0xFF1C290D);
+  static const Color accentInkMocDark = Color(0xFFC2DB90);
+  static const Color accentStrongMocBambooDark = Color(0xFF4C6421);
+  static const Color accentOnMocBambooDark = Color(0xFFF5EAD9);
+  static const Color accentTintMocBambooDark = Color(0xFF1F280A);
+  static const Color accentInkMocBambooDark = Color(0xFFC7D99E);
+  static const Color accentMocForestDark = Color(0xFF9EBE8D);
+  static const Color accentBrightMocForestDark = Color(0xFFBDD8A4);
+  static const Color accentOnMocForestDark = Color(0xFFF5EAD9);
+  static const Color accentTintMocForestDark = Color(0xFF19290F);
+  static const Color accentInkMocForestDark = Color(0xFFC0DBA7);
+  static const Color accentStrongKimDark = Color(0xFF675A4A);
+  static const Color accentOnKimDark = Color(0xFFF5EAD9);
+  static const Color accentTintKimDark = Color(0xFF2D220F);
+  static const Color accentInkKimDark = Color(0xFFDBCFB9);
+  static const Color accentKimSteelDark = Color(0xFFB2B6B6);
+  static const Color accentBrightKimSteelDark = Color(0xFFCCD0D0);
+  static const Color accentStrongKimSteelDark = Color(0xFF555B5D);
+  static const Color accentOnKimSteelDark = Color(0xFFF5EAD9);
+  static const Color accentTintKimSteelDark = Color(0xFF222525);
+  static const Color accentInkKimSteelDark = Color(0xFFCFD3D3);
+  static const Color accentKimTitaniumDark = Color(0xFFBFB3A5);
+  static const Color accentOnKimTitaniumDark = Color(0xFFF5EAD9);
+  static const Color accentTintKimTitaniumDark = Color(0xFF2B2217);
+  static const Color accentInkKimTitaniumDark = Color(0xFFD9CFC0);
+}

package/tokens/provenance.json

@@ -0,0 +1,52 @@
+{
+  "system": "CyberSkill Design System",
+  "release": "1.0.0",
+  "source": "tokens/tokens.dtcg.json",
+  "sourceSha256": "2de878e4f152f960447ee1065929cb410e724fff718e3f9b6adb7429af7b689d",
+  "dtcgStamp": {
+    "version": "1.0.0",
+    "generated": "2026-07-23"
+  },
+  "conversions": {
+    "remBasePx": 16,
+    "emSuffix": "Em (relative)",
+    "alphaToArgbByte": "round(a*255)",
+    "durationsUnit": "ms",
+    "densitySuffix": "Compact (fine-pointer only)",
+    "darkPackSuffix": "<Scope>Dark (APCA-derived)"
+  },
+  "counts": {
+    "baseTokens": 145,
+    "byType": {
+      "color": 29,
+      "dimension": 75,
+      "number": 25,
+      "shadow": 5,
+      "duration": 4,
+      "cubicBezier": 4,
+      "fontFamily": 3
+    },
+    "darkColorOverrides": 17,
+    "densityCompactOverrides": 0,
+    "darkPackConstants": 75,
+    "skipped": 0
+  },
+  "skipped": [],
+  "targets": [
+    {
+      "file": "tokens/native/CSTokens.swift",
+      "lang": "swift",
+      "sha256": "ad7b926b942f546d3f339a082cbf8c1288f16e050a7198dee751f5029d66d487"
+    },
+    {
+      "file": "tokens/native/CSTokens.kt",
+      "lang": "kotlin",
+      "sha256": "14294bfdd9f99b843c3bab633e71b3592ebf42313bff56fe38893387aeb3343c"
+    },
+    {
+      "file": "tokens/native/cs_tokens.dart",
+      "lang": "dart",
+      "sha256": "521a0c9e6f86fa663e6928596b1851e1f03f232c9863d94c5c0e834fd9361d4e"
+    }
+  ]
+}

package/tokens/spacing.css

@@ -0,0 +1,34 @@
+/* CyberSkill — spacing, radius, sizing tokens.
+ * 4px base grid. Section padding floor 64px, ceiling 96px. */
+:root {
+  --cs-space-0: 0px;
+  --cs-space-1: 4px;
+  --cs-space-2: 8px;
+  --cs-space-3: 12px;
+  --cs-space-4: 16px;
+  --cs-space-5: 20px;
+  --cs-space-6: 24px;
+  --cs-space-8: 32px;
+  --cs-space-10: 40px;
+  --cs-space-12: 48px;
+  --cs-space-16: 64px;   /* section padding floor */
+  --cs-space-20: 80px;
+  --cs-space-24: 96px;   /* section padding ceiling */
+
+  /* Radius */
+  --cs-radius-sm: 4px;
+  --cs-radius-md: 8px;   /* default */
+  --cs-radius-lg: 14px;  /* cards/panels in product surfaces */
+  --cs-radius-full: 999px;
+
+  /* Breakpoints (mobile-first) */
+  --cs-breakpoint-xs: 0px;
+  --cs-breakpoint-sm: 640px;
+  --cs-breakpoint-md: 768px;
+  --cs-breakpoint-lg: 1024px;
+  --cs-breakpoint-xl: 1280px;
+  --cs-breakpoint-2xl: 1536px;
+
+  /* Layout */
+  --cs-container-max: 1320px;
+}