@oneli8/tokens 1.0.0-beta.2 → 1.0.0-beta.4

package/overrides.example.css

@@ -0,0 +1,53 @@
+/* OneLi8 override surface.
+   Copy what you need into your own stylesheet, after importing the tokens.
+   Nothing here is required. Every value below is already set by the system;
+   these are the supported places to change it. */
+
+:root {
+  /* ---- Type ------------------------------------------------------------
+     Two brand faces and one shared fallback. Replace a face and the fallback
+     still applies, because the fallback is referenced rather than inlined.
+     Drop the @oneli8/tokens/fonts.css import if you are supplying your own. */
+
+  /* --ol8-font-family-display: "Your Display Face", var(--ol8-font-family-fallback); */
+  /* --ol8-font-family-functional: "Your Text Face", var(--ol8-font-family-fallback); */
+  /* --ol8-font-family-fallback: ui-sans-serif, system-ui, sans-serif; */
+
+  /* ---- Colour ----------------------------------------------------------
+     data-ol8-primary switches between the three built families. For any other
+     hue, repoint the eleven primary steps here instead. 47 semantic roles read
+     this ramp, so buttons, links, focus, selection and the Gem material all
+     follow without touching a component.
+
+     Keep the tonal relationships: 030 lightest through 930 darkest, with 600
+     carrying the default action surface and 120 doing the same job in dark. */
+
+  /* --ol8-color-primary-030: #f6f2ff; */
+  /* --ol8-color-primary-060: #ece4ff; */
+  /* --ol8-color-primary-090: #d9c9ff; */
+  /* --ol8-color-primary-120: #c0a6ff; */
+  /* --ol8-color-primary-240: #a077f2; */
+  /* --ol8-color-primary-360: #8250d6; */
+  /* --ol8-color-primary-480: #6838b2; */
+  /* --ol8-color-primary-600: #542e8e; */
+  /* --ol8-color-primary-720: #452771; */
+  /* --ol8-color-primary-840: #38225b; */
+  /* --ol8-color-primary-930: #221238; */
+}
+
+/* Override at :root, not on a subtree.
+   A role such as --ol8-color-action-primary-default is declared as
+   var(--ol8-color-primary-600) on :root, so CSS substitutes it there and
+   descendants inherit an already resolved colour. Re-pointing the ramp deeper
+   in the tree changes the ramp but not the roles that read it.
+
+   Verified: overriding --ol8-color-primary-600 on :root repaints the primary
+   action surface. The same override on a wrapper element does nothing.
+
+   To theme one region, re-declare the roles you want on that region:
+
+   .marketing-section {
+     --ol8-color-action-primary-default: #0f766e;
+     --ol8-color-action-primary-hover: #115e59;
+   }
+*/

package/package.json

@@ -1,30 +1,70 @@
 {
   "name": "@oneli8/tokens",
-  "version": "1.0.0-beta.2",
-  "publishConfig": {"access":"public","tag":"beta"},
-  "repository": {"type":"git","url":"git+https://github.com/Akshay007ad/OneLi8-Design-System.git","directory":"packages/tokens"},
+  "version": "1.0.0-beta.4",
+  "description": "OneLi8 Design System \u2014 design tokens compiled from Figma. CSS custom properties and a flat JS object.",
+  "keywords": [
+    "design-tokens",
+    "css-variables",
+    "design-system",
+    "figma",
+    "oneli8"
+  ],
+  "homepage": "https://github.com/Akshay007ad/OneLi8-Design-System#readme",
+  "bugs": {
+    "url": "https://github.com/Akshay007ad/OneLi8-Design-System/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akshay007ad/OneLi8-Design-System.git",
+    "directory": "packages/tokens"
+  },
   "license": "Apache-2.0",
+  "author": "Akshay Dhore",
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./build/typescript/index.d.ts",
+      "import": "./build/typescript/index.js",
+      "default": "./build/typescript/index.js"
+    },
+    "./css": "./build/css/tokens.css",
+    "./fonts.css": "./fonts.css",
+    "./fonts/*": "./fonts/*",
+    "./overrides.example.css": "./overrides.example.css",
+    "./tailwind": "./build/tailwind/preset.mjs",
+    "./tailwind.css": "./build/tailwind/theme.css",
+    "./figma": "./build/figma/variables.json",
+    "./status": "./build/status/components.json",
+    "./source": "./src/semantic.json",
+    "./package.json": "./package.json",
+    "./ai-context.json": "./ai-context.json"
+  },
+  "types": "./build/typescript/index.d.ts",
+  "sideEffects": [
+    "./build/css/tokens.css",
+    "./fonts.css"
+  ],
   "files": [
     "build",
-    "schema",
-    "scripts",
     "src",
     "status",
+    "schema",
+    "scripts",
+    "fonts",
+    "fonts.css",
+    "overrides.example.css",
+    "ai-context.json",
+    "PRINCIPLES.md",
+    "AGENTS.md",
     "README.md",
     "LICENSE",
-    "NOTICE"
+    "NOTICE",
+    "FONTS-LICENSE.txt"
   ],
-  "scripts": {
-    "build": "node scripts/build.mjs --standalone",
-    "test": "node scripts/test.mjs --standalone"
+  "engines": {
+    "node": ">=20"
   },
-  "exports": {
-    ".": "./build/typescript/index.js",
-    "./css": "./build/css/tokens.css",
-    "./tailwind": "./build/tailwind/preset.mjs",
-    "./tailwind.css": "./build/tailwind/theme.css",
-    "./figma": "./build/figma/variables.json",
-    "./status": "./build/status/components.json"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/scripts/build.mjs

@@ -86,8 +86,33 @@ for(const axis of ["colorScheme","primaryFamily","typographyViewport"]){
   }
 }
 
-const kebab=value=>value.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/\./g,"-").toLowerCase();
-const cssName=tokenPath=>`--ol8-${kebab(tokenPath)}`;
+// Figma is the naming authority. Its variables run compound words together
+// (cutedge, innerwidth, actionprimary), so a camelCase source key must NOT be
+// split on the capital. Only the path separator becomes a hyphen. The authored
+// JSON keeps camelCase for readability; the emitted name matches Figma exactly.
+const kebab=value=>value.replace(/\./g,"-").toLowerCase();
+// Figma is the naming authority, and it says so explicitly: every variable
+// carries a codeSyntax.WEB field. src/figma-code-syntax.txt records that field
+// verbatim. Nothing here infers a name, because Figma is not internally regular
+// enough to infer from — it writes color-icon-button-quiet-hover-surface
+// hyphenated and component-iconbutton-box-compact joined.
+const CONTRACT=new Map(
+  fs.readFileSync(path.join(root,"src/figma-code-syntax.txt"),"utf8")
+    .split("\n").filter(l=>l && !l.startsWith("#"))
+    .map(l=>{const i=l.indexOf("|");return [l.slice(0,i), l.slice(i+1)];})
+);
+const uncontracted=new Set();
+const figmaVarName=tokenPath=>{
+  const contracted=CONTRACT.get(tokenPath);
+  if(contracted)return contracted.replace(/^--ol8-/,"");
+  uncontracted.add(tokenPath);
+  return kebab(tokenPath);
+};
+const cssName=tokenPath=>`--ol8-${figmaVarName(tokenPath)}`;
+// A composite role's sub key is a CSS property, not a Figma variable, so it
+// keeps the hyphen: font-weight, line-height, letter-spacing.
+const cssProperty=key=>key.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();
+const cssCompositeName=(tokenPath,key)=>`--ol8-${figmaVarName(tokenPath)}-${cssProperty(key)}`;
 const unitValue=value=>value&&typeof value==="object"&&typeof value.value==="number"&&value.unit?`${value.value}${value.unit}`:null;
 const hexRgb=value=>{
   const match=typeof value==="string"&&value.match(/^#([0-9a-f]{6})$/i);
@@ -110,6 +135,15 @@ const shadowValue=value=>{
 };
 const cssScalar=(value,token)=>{
   const unit=unitValue(value);if(unit)return unit;
+  // A bare family name is not usable CSS on its own. Quote anything with a
+  // space, and resolve brand faces through the shared fallback so a face that
+  // is missing, still loading, or deliberately replaced lands somewhere sane.
+  if(token?.$type==="fontFamily"){
+    const name=String(value);
+    const quoted=/[^A-Za-z0-9_-]/.test(name)?`"${name}"`:name;
+    return token?.$extensions?.["oneli8.role"]==="brand-face"
+      ?`${quoted}, var(--ol8-font-family-fallback)`:name;
+  }
   if(token?.$extensions?.["oneli8.unit"]==="em")return `${value}em`;
   if(token?.$type==="color"){const color=alphaColor(value);if(color)return color}
   if(token?.$type==="shadow"){const shadow=shadowValue(value);if(shadow!==null)return shadow}
@@ -126,8 +160,14 @@ const cssLinesFor=(tokenPath,token,{preserveColorReference=false}={})=>{
   const scalar=cssScalar(value,token);
   if(scalar!==null)return [`  ${cssName(tokenPath)}: ${scalar};`];
   if(value&&typeof value==="object")return Object.entries(value).flatMap(([key,item])=>{
-    const itemScalar=cssScalar(item,all[(String(token.$value?.[key]||"").match(referencePattern)||[])[1]]||token);
-    return itemScalar===null?[]:[`  ${cssName(`${tokenPath}.${key}`)}: ${itemScalar};`];
+    const rawReference=String(token.$value?.[key]||"").match(referencePattern);
+    // Keep the family as a reference rather than baking the resolved name.
+    // A composite role that inlines "AR One Sans" cannot follow a replaced
+    // brand face; one that points at the family token can.
+    if(preserveColorReference&&rawReference&&rawReference[1].startsWith("font.family."))
+      return [`  ${cssCompositeName(tokenPath,key)}: var(${cssName(rawReference[1])});`];
+    const itemScalar=cssScalar(item,all[(rawReference||[])[1]]||token);
+    return itemScalar===null?[]:[`  ${cssCompositeName(tokenPath,key)}: ${itemScalar};`];
   });
   return [];
 };
@@ -161,7 +201,11 @@ const duration=Object.fromEntries(Object.entries(byTier.primitive).filter(([p])=
 const easing=Object.fromEntries(Object.entries(byTier.primitive).filter(([p])=>p.startsWith("motion.easing.")).map(([p,t])=>[p.split(".").at(-1),cssScalar(resolveValue(t.$value),t)]));
 const boxShadow=Object.fromEntries(Object.keys(byTier.semantic).filter(p=>p.startsWith("elevation.surface.")).map(p=>[p.split(".").at(-1),`var(${cssName(p)})`]));
 const zIndex=Object.fromEntries(Object.entries(byTier.semantic).filter(([p])=>p.startsWith("layer.stack.")).map(([p,t])=>[p.split(".").at(-1),String(resolveValue(t.$value))]));
-const semanticColors=Object.fromEntries(Object.keys(byTier.semantic).filter(p=>p.startsWith("color.")&&!p.startsWith("color.primary.")).map(p=>[kebab(p.slice(6)),`var(${cssName(p)})`]));
+// A Tailwind utility is something a person types, so it stays readable and
+// hyphenated: bg-ol8-action-primary-default. The variable it points at follows
+// Figma. Readable surface, exact underlying name.
+const utilityName=path=>path.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/\./g,"-").toLowerCase();
+const semanticColors=Object.fromEntries(Object.keys(byTier.semantic).filter(p=>p.startsWith("color.")&&!p.startsWith("color.primary.")).map(p=>[utilityName(p.slice(6)),`var(${cssName(p)})`]));
 const tailwind={theme:{extend:{colors:{ol8:semanticColors},spacing:dimensionScale,borderRadius:radii,borderWidth,boxShadow,zIndex,fontFamily:{display:["Syne","system-ui","sans-serif"],functional:["AR One Sans","system-ui","sans-serif"]},fontWeight:{regular:"450",semibold:"600",bold:"690"},fontSize,transitionDuration:duration,transitionTimingFunction:easing}}};
 
 const title=value=>value.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/^./,char=>char.toUpperCase());
@@ -188,4 +232,15 @@ write("build/figma/variables.json",`${JSON.stringify(figma,null,2)}\n`);
 write("build/status/components.json",`${JSON.stringify({...status,$schema:"https://oneli8.org/schema/component-status.schema.json",generated:true},null,2)}\n`);
 write("build/manifest.json",`${JSON.stringify({generated:true,version:"1.0.0-beta.1",counts:{primitive:Object.keys(byTier.primitive).length,semantic:Object.keys(byTier.semantic).length,component:Object.keys(byTier.component).length,componentStatuses:status.components.length,figmaVariables:figma.collections.primitive.length+figma.collections.semantic.length+figma.collections.component.length,figmaTypographyStyles:figma.typographyStyles.length,figmaElevationStyles:figma.elevationStyles.length},outputs:["css/tokens.css","typescript/index.js","typescript/index.d.ts","tailwind/preset.mjs","tailwind/theme.css","figma/variables.json","status/components.json"]},null,2)}\n`);
 
+// Drift report, both directions. A token with no contract entry means the name
+// was invented here rather than agreed in Figma. A contract entry with no token
+// means Figma is ahead, which is a reference for what to build next.
+const contractPaths=new Set(CONTRACT.keys());
+const authoredPaths=new Set(Object.keys(all));
+const figmaAhead=[...contractPaths].filter(p=>!authoredPaths.has(p));
+if(uncontracted.size>0){
+  console.log(`\u26a0 ${uncontracted.size} token(s) have no Figma codeSyntax; their names are inferred, not agreed:`);
+  for(const p of [...uncontracted].sort().slice(0,10))console.log(`  \u00b7 ${p}`);
+}
+if(figmaAhead.length>0)console.log(`\u2139 Figma defines ${figmaAhead.length} variables this build does not emit yet (see src/figma-code-syntax.txt)`);
 console.log(`Built ${tokenPaths.length} Oneli8 tokens for CSS, TypeScript, Tailwind, and Figma.`);

package/scripts/test.mjs

@@ -53,9 +53,9 @@ ok(semantic.color.focus.inner.$value==="{color.primary.030}"&&semantic.color.foc
 ok(themes.colorScheme.dark.overrides["color.focus.inner"].$value==="{color.primary.930}"&&themes.colorScheme.dark.overrides["color.focus.outer"].$value==="{color.primary.030}","Dark Focus must reverse the active family's 930 shadow and 030 highlight");
 ok(semantic.color.icon.onGem.$value==="{color.neutral.030}"&&!themes.colorScheme.dark.overrides["color.icon.onGem"],"On Gem icon artwork must remain near-white across Light and Dark appearances");
 ok(css.includes('[data-ol8-color-scheme="dark"]')&&css.includes('[data-ol8-primary="orange"]')&&css.includes('[data-ol8-primary="green"]'),"CSS must emit independent scheme and Primary-family axes");
-ok(css.includes("--ol8-color-action-primary-default: var(--ol8-color-primary-600)")&&css.includes("--ol8-color-primary-600: var(--ol8-color-orange-600)"),"CSS color aliases must remain reference-preserving and composable");
-ok(tw.includes('"background-canvas": "var(--ol8-color-background-canvas)"')&&tw.includes('"action-primary-default": "var(--ol8-color-action-primary-default)"'),"Tailwind v3 must expose Semantic colors rather than raw palette meaning");
-ok(tw4.includes("--color-ol8-background-canvas: var(--ol8-color-background-canvas)")&&tw4.includes("--color-ol8-action-primary-default: var(--ol8-color-action-primary-default)"),"Tailwind v4 must expose Semantic color utilities");
+ok(css.includes("--ol8-color-actionprimary-default: var(--ol8-color-primary-600)")&&css.includes("--ol8-color-primary-600: var(--ol8-color-orange-600)"),"CSS color aliases must remain reference-preserving and composable");
+ok(tw.includes('"background-canvas": "var(--ol8-color-background-canvas)"')&&tw.includes('"action-primary-default": "var(--ol8-color-actionprimary-default)"'),"Tailwind v3 must expose Semantic colors rather than raw palette meaning");
+ok(tw4.includes("--color-ol8-background-canvas: var(--ol8-color-background-canvas)")&&tw4.includes("--color-ol8-action-primary-default: var(--ol8-color-actionprimary-default)"),"Tailwind v4 must expose Semantic color utilities");
 ok(figma.modes.colorScheme.dark.length>60&&figma.modes.primaryFamily.orange.length===11&&figma.modes.primaryFamily.green.length===11,"Figma data must preserve independent color modes");
 ok(semantic.elevation.surface.floating.$value.length===2&&semantic.elevation.surface.floating.$value[0].alpha===0.18,"Light Floating elevation must retain its approved two-shadow recipe");
 ok(themes.colorScheme.dark.overrides["elevation.surface.blocking"].$value[0].alpha===0.72,"Dark Blocking elevation must retain its 72% Cyan 840 cue");
@@ -67,7 +67,7 @@ ok(semantic.material.control.gem.primary.start.$value==="{color.primary.480}"&&t
 ok(semantic.material.control.gem.secondary.high.$value.alpha===0.22&&semantic.material.control.gem.rim.default.$value.alpha===0.24,"Gem Secondary transparency and inset rim must retain the approved quiet material recipe");
 ok(semantic.material.control.gem.primary.loadingStart.$value==="{color.primary.720}"&&semantic.material.control.gem.primary.loadingEnd.$value==="{color.primary.930}","Gem Loading must use a distinct shared deep tonal state");
 ok(semantic.material.control.gem.secondary.loadingHigh.$value.alpha===0.39&&semantic.material.control.gem.secondary.loadingLow.$value.alpha===0.24,"Gem Secondary Loading must remain transparent but visibly distinct");
-ok(css.includes("--ol8-material-gem-color-family-amethyst-environmental-face: color-mix(in srgb, var(--ol8-color-violet-930) 48%, transparent)"),"Gem CSS colors must preserve Primitive references and approved alpha");
+ok(css.includes("--ol8-material-gem-color-family-amethyst-environmentalface: color-mix(in srgb, var(--ol8-color-violet-930) 48%, transparent)"),"Gem CSS colors must preserve Primitive references and approved alpha");
 ok(tw.includes('"overlay": "var(--ol8-elevation-surface-overlay)"')&&tw.includes('"notification": "1200"'),"Tailwind v3 must expose Elevation and stacking roles");
 ok(tw4.includes("--shadow-ol8-blocking: var(--ol8-elevation-surface-blocking)")&&tw4.includes("--z-ol8-modal: 900"),"Tailwind v4 must expose Elevation and stacking roles");
 ok(figma.elevationStyles.length===5,"Figma data must emit five Elevation styles");
@@ -91,6 +91,6 @@ ok(component.component.choiceChip.terminal.$value==="{spacing.inline.standard}"&
 ok(component.component.choiceChip.inset.compact.$value.value===21&&component.component.choiceChip.inset.standard.$value==="{spacing.inset.comfortable}"&&component.component.choiceChip.inset.comfortable.$value.value===27,"Soft Hexagon insets must retain the approved 21px, 24px, and 27px progression");
 ok(component.component.suggestionRail.gap.$value==="{component.choiceChip.gap}"&&component.component.suggestionRail.fieldSeparation.$value==="{spacing.stack.tight}","Suggested Values rail must reuse Choice Chip and structural spacing roles");
 ok(component.component.tabBar.gap.$value==="{spacing.none}"&&component.component.tabBar.inlineInset.$value==="{spacing.inline.minimal}","Tab Bar spacing must map to canonical zero gap and 3px Inline protection");
-ok(manifest.counts.primitive===169&&manifest.counts.semantic===266&&manifest.counts.component===151&&manifest.counts.componentStatuses===10&&manifest.counts.figmaVariables===572&&manifest.counts.figmaElevationStyles===5,"Navigation spacing and contextual token output counts must remain deterministic");
+ok(manifest.counts.primitive===170&&manifest.counts.semantic===270&&manifest.counts.component===152&&manifest.counts.componentStatuses===10&&manifest.counts.figmaVariables===578&&manifest.counts.figmaElevationStyles===5,"Navigation spacing and contextual token output counts must remain deterministic");
 
 console.log(`PASS ${checks}/${checks} canonical token package checks.`);