@oneli8/tokens 1.0.0-beta.10

package/scripts/test.mjs

@@ -0,0 +1,136 @@
+import fs from "node:fs";
+import assert from "node:assert/strict";
+import {pathToFileURL,fileURLToPath} from "node:url";
+import path from "node:path";
+
+const root=path.resolve(path.dirname(fileURLToPath(import.meta.url)),"..");
+await import(pathToFileURL(path.join(root,"scripts/build.mjs")));
+const read=relative=>fs.readFileSync(path.join(root,relative),"utf8");
+const json=relative=>JSON.parse(read(relative));
+let checks=0;
+const ok=(condition,message)=>{assert(condition,message);checks++};
+const primitive=json("src/primitive.json");
+const semantic=json("src/semantic.json");
+const themes=json("src/themes.json");
+const component=json("src/component.json");
+const status=json("status/components.json");
+const builtStatus=json("build/status/components.json");
+const manifest=json("build/manifest.json");
+const css=read("build/css/tokens.css");
+const tw=read("build/tailwind/preset.mjs");
+const tw4=read("build/tailwind/theme.css");
+const figma=json("build/figma/variables.json");
+const indices=["030","060","090","120","240","360","480","600","720","840","930"];
+const families=["blue","cyan","green","yellow","orange","pink","violet","red","neutral"];
+
+ok(primitive.dimension.scale["108"].$value.value===108,"108px primitive must ship");
+ok(semantic.spacing.section.expansive.$value==="{dimension.scale.108}","Expansive section must reference 108px primitive");
+ok(semantic.size.target.minimum.$value==="{dimension.scale.048}","Minimum target must reference 48px");
+ok(Object.values(semantic.size.icon).map(token=>token.$value).join(",")==="{dimension.scale.009},{dimension.scale.012},{dimension.scale.018},{dimension.scale.024},{dimension.scale.030},{dimension.scale.036},{dimension.scale.048},{dimension.scale.060},{dimension.scale.072},{dimension.scale.096},{dimension.scale.108}","Icon Frame semantic scale must expose all eleven approved presentations");
+ok(semantic.shape.radius.full.$extensions["oneli8.exception"]==="categorical-full-radius","Full radius exception must be explicit");
+ok(semantic.border.width.standard.$extensions["oneli8.exception"]==="essential-optical-boundary","2px essential border exception must be explicit");
+ok(semantic.typography.body.medium.$value.fontWeight==="{font.weight.regular}","Body Medium must resolve through Regular 450");
+ok(primitive.motion.easing.standard.$value[0]===0.39,"Standard easing must retain 0.39 first control point");
+ok(primitive.motion.easing.exit.$value[0]===0.48,"Exit easing must retain 0.48 first control point");
+ok(semantic.material.gem.opacity.environmental.$value===0.48,"Gem Environmental tint floor must be encoded");
+ok(css.includes("--ol8-spacing-section-expansive: 108px"),"CSS must contain resolved Semantic spacing");
+ok(css.includes("--ol8-typography-body-medium-font-weight: 450"),"CSS must resolve typography composition");
+ok(css.includes('[data-ol8-type-mode="expanded"]'),"CSS must contain independent expanded typography mode");
+ok(tw.includes('"1": "3px"')&&tw.includes('"36": "108px"')&&tw.includes('"regular": "450"'),"Tailwind v3 preset must expose the familiar 3px-indexed scale and weights");
+ok(tw4.includes("@theme")&&tw4.includes("--spacing-1: 3px")&&tw4.includes("--spacing-36: 108px"),"Tailwind v4 theme bridge must expose the 3px-indexed scale");
+ok(figma.modeAxes.typographyViewport.join(",")==="compact,medium,expanded","Figma data must retain viewport modes");
+ok(figma.typographyStyles.length===9,"Figma data must emit exactly nine default typography styles");
+ok(manifest.outputs.length===7,"Build manifest must list all seven generated outputs");
+ok(manifest.counts.primitive>50&&manifest.counts.semantic>70,"Initial canonical slice must contain substantial approved coverage");
+ok(!/#(?:000|000000|fff|ffffff)(?![0-9a-f])/i.test([read("src/primitive.json"),read("src/semantic.json"),css].join("\n")),"Authored and generated tokens cannot contain pure black or pure white");
+ok(families.every(family=>indices.every(index=>primitive.color[family][index]?.$type==="color")),"Candidate 03 must contain nine complete eleven-step color families");
+ok(new Set(families.flatMap(family=>indices.map(index=>primitive.color[family][index].$value.toUpperCase()))).size===99,"Candidate 03 must retain 99 unique approved values");
+ok(primitive.color.blue["600"].$value==="#2C438B"&&primitive.color.neutral["930"].$value==="#151817"&&primitive.color.cyan["840"].$value==="#163F4B","Canonical color anchors must remain exact");
+ok(semantic.color.actionPrimary.default.$value==="{color.primary.600}"&&semantic.color.text.link.default.$value==="{color.primary.600}","Light Primary semantics must resolve through family aliases");
+ok(semantic.color.text.link.hover.$value==="{color.primary.720}"&&semantic.color.text.link.pressed.$value==="{color.primary.840}"&&semantic.color.text.link.visited.$value==="{color.violet.600}","Light Link states must resolve through qualified semantic aliases");
+ok(themes.colorScheme.dark.overrides["color.text.link.default"].$value==="{color.primary.120}"&&themes.colorScheme.dark.overrides["color.text.link.hover"].$value==="{color.primary.090}"&&themes.colorScheme.dark.overrides["color.text.link.pressed"].$value==="{color.primary.060}"&&themes.colorScheme.dark.overrides["color.text.link.visited"].$value==="{color.violet.120}","Dark Link states must retain the approved accessible family mapping");
+ok(semantic.color.focus.inner.$value==="{color.primary.030}"&&semantic.color.focus.outer.$value==="{color.primary.930}","Light Focus must use the active family's 030 highlight and 930 shadow");
+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-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");
+ok(Object.values(semantic.layer.stack).map(token=>token.$value).join(",")==="0,300,600,900,1200","Stacking tiers must retain the approved 300-step progression");
+ok(css.includes("--ol8-elevation-surface-overlay: 0px 12px 36px -6px rgb(22 63 75 / 0.24), 0px 6px 12px 0px rgb(22 63 75 / 0.18)"),"CSS must serialize approved multi-layer Elevation");
+// Light quiet environmental moved 0.48 -> 0.18. Light Gem is clear glass: the
+// face is the most transparent state it has, and legibility is carried by the
+// content halo (material.gem.color.quiet.contentGlow) rather than by
+// thickening the face. Dark stays 0.48, and the coloured families are
+// untouched — they are saturated accents, not clear glass.
+ok(semantic.material.gem.color.quiet.environmentalFace.$value.alpha===0.09&&semantic.material.gem.color.quiet.environmentalFace.$value.color==="{color.neutral.030}"&&themes.colorScheme.dark.overrides["material.gem.color.quiet.environmentalFace"].$value.color==="{color.neutral.930}"&&themes.colorScheme.dark.overrides["material.gem.color.quiet.environmentalFace"].$value.alpha===0.09&&semantic.material.gem.color.family.emerald.environmentalFace.$value.alpha===0.48&&semantic.material.gem.color.family.sapphire.stabilizedFace.$value.alpha===0.30,"Gem environmental and stabilized alpha values must remain approved");
+// Gem content is near-white in BOTH appearances, exactly as color.icon.onGem
+// and color.control.thumb already declare — "remains stable across Light and
+// Dark appearances". Gem sits over imagery of unknown brightness, so the ink
+// cannot follow the app's appearance; the dark halo carries contrast instead.
+// Asserting the absence of a dark override is the part that matters: adding
+// one would silently reintroduce mode-dependent ink.
+ok(semantic.material.gem.color.quiet.content.$value==="{color.neutral.030}"&&semantic.material.gem.color.quiet.contentGlow.$value.color==="{color.neutral.930}"&&semantic.material.gem.color.quiet.contentGlow.$value.alpha===0.78,"Quiet Gem ink must stay near-white with a dark halo in both appearances");
+ok(!("material.gem.color.quiet.content"in themes.colorScheme.dark.overrides)&&!("material.gem.color.quiet.contentGlow"in themes.colorScheme.dark.overrides)&&!("color.icon.onGem"in themes.colorScheme.dark.overrides),"Content on Gem must carry no dark override, matching color.icon.onGem");
+ok(semantic.material.gem.color.family.sapphire.innerHigh.$value.alpha===0.39,"Sapphire Thin-Cut highlight must retain its 39% cap");
+ok(semantic.material.control.gem.primary.start.$value==="{color.primary.480}"&&themes.colorScheme.dark.overrides["material.control.gem.primary.start"].$value==="{color.primary.600}","Gem controls must keep Light and Dark theme-aware leading stops");
+ok(semantic.material.control.gem.secondary.high.$value.alpha===0.09&&themes.colorScheme.dark.overrides["material.control.gem.secondary.high"].$value.alpha===0.22&&semantic.material.control.gem.rim.default.$value.alpha===0.24,"Gem Secondary glass must be 0.09 in Light and 0.22 in Dark, and the inset rim must not move with it");
+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.15&&semantic.material.control.gem.secondary.loadingLow.$value.alpha===0.12&&themes.colorScheme.dark.overrides["material.control.gem.secondary.loadingHigh"].$value.alpha===0.39,"Gem Secondary Loading must stay transparent but visibly distinct in both appearances");
+// The Light appearance face is two stacked near-white layers: the Control Gem
+// Secondary gradient over material.gem.color.quiet.stabilizedFace. Neither
+// number means anything alone, so the composite is what is pinned. 0.15 under
+// the 0.09 ladder composites to 0.2265, which is the presence of the approved
+// 0.18 environmental face; at the previous 0.27 and 0.22 it was 0.4306 and the
+// surface read as milk. See proof/gem-halo-contrast.html for the measurement
+// that showed this costs no text contrast.
+const gemFilledComposite=(q,g)=>q+g*(1-q);
+ok(Math.abs(gemFilledComposite(semantic.material.gem.color.quiet.stabilizedFace.$value.alpha,semantic.material.control.gem.secondary.high.$value.alpha)-0.2265)<1e-9,"The Light filled Gem face must composite to 0.2265, the approved clear-glass presence");
+// Every Secondary state sits one 0.03 step from the next, which is the 3-point
+// rhythm in alpha rather than in px.
+ok([["high","hoverHigh","loadingHigh"],["mid","hoverMid","loadingMid"],["low","hoverLow","loadingLow"]].every(([a,b,c])=>{const v=k=>semantic.material.control.gem.secondary[k].$value.alpha;return Math.abs(v(b)-v(a)-0.03)<1e-9&&Math.abs(v(c)-v(b)-0.03)<1e-9;}),"Gem Secondary must climb Default -> Hover -> Loading in single 0.03 steps on every stop");
+// The bezel is a different token family and the transparency fix must never
+// reach it: the rim inset shadows and the Inner Thin Cut / Cut Edge angular
+// stroke stops are what make a Gem recognisable as a Gem.
+ok(semantic.material.control.gem.rim.specular.$value.alpha===0.54&&semantic.material.gem.color.innerThinCut.high.$value.alpha===0.54&&semantic.material.gem.color.cutEdge.high.$value.alpha===0.72&&!Object.keys(themes.colorScheme.dark.overrides).some(k=>k.startsWith("material.control.gem.rim.")),"The Gem bezel families must hold their approved values and stay appearance-stable");
+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");
+ok(component.component.button.paddingInline.standard.$value.value===15&&component.component.button.gap.comfortable.$value.value===9,"Button component geometry must retain the approved 15px inset and 9px gap");
+ok(component.component.opticalStroke.$value.value===1.8&&component.component.opticalStroke.$extensions["oneli8.exception"]==="universal-optical-stroke","The universal canonical-source optical stroke must remain 1.8 units");
+ok(component.component.icon.stroke.$value==="{component.opticalStroke}","Icon Frame source must alias the universal optical stroke");
+ok(component.component.choice.opticalStroke.$value==="{component.opticalStroke}","Choice controls must alias the universal optical stroke");
+ok(component.component.checkbox.boundary.$value==="{component.choice.opticalStroke}"&&component.component.checkbox.mark.stroke.$value==="{component.choice.opticalStroke}"&&component.component.radio.boundary.$value==="{component.choice.opticalStroke}","Checkbox boundary, Checkbox mark, and Radio boundary must share the Choice optical stroke");
+ok(semantic.color.selection.surface.$value==="{color.primary.060}"&&themes.colorScheme.dark.overrides["color.selection.surface"].$value==="{color.primary.120}","Checkbox and Radio selected controls must share Selection Surface through the configurable Primary family");
+ok(component.component.radio.dot.compact.$value.value===9&&component.component.radio.dot.comfortable.$value.value===12,"Radio selected dots must retain the approved 9px and 12px geometry");
+ok(component.component.switch.travel.compact.$value==="{size.indicator.standard}"&&component.component.switch.travel.comfortable.$value==="{size.indicator.large}","Switch travel must resolve to approved 18px and 24px geometry");
+ok(semantic.color.control.thumb.$value==="{color.neutral.030}","Switch thumb must remain near-white across Light and Dark appearances");
+ok(component.component.selectionPopup.maximumBlock.standard.$value.value===288&&component.component.selectionPopup.maximumBlock.large.$value.value===360,"Selection popup maximum block sizes must retain the approved recipes");
+ok(component.component.selectionPopup.paddingInline.$value==="{spacing.inline.minimal}"&&component.component.selectionPopup.railInsetInline.$value==="{spacing.inline.minimal}"&&component.component.selectionPopup.paddingBlock.$value==="{spacing.inline.related}","Selection popup must retain the approved 3px + 3px visible edge and 6px block inset");
+ok(status.components.length===10&&new Set(status.components.map(record=>record.name)).size===10,"Status registry must contain ten unique public component records");
+ok(status.components.filter(record=>record.status==="Candidate").length===10&&status.components.filter(record=>record.status==="Labs").length===0,"All ten approved families must now have Candidate production implementations");
+ok(status.components.every(record=>record.designerApproved&&!record.implementationCertified&&record.knownEvidence.length>0&&record.missingEvidence.length>0),"Visual approval must remain separate from implementation certification");
+ok(builtStatus.generated===true&&builtStatus.components.length===status.components.length,"Generated status registry must preserve every authored record");
+ok(component.component.choiceChip.height.compact.$value.value===30&&component.component.choiceChip.height.standard.$value==="{size.control.compact}"&&component.component.choiceChip.height.comfortable.$value==="{size.control.standard}","Soft Hexagon visible heights must retain the approved 30px, 36px, and 42px geometry");
+ok(component.component.choiceChip.terminal.$value==="{spacing.inline.standard}"&&component.component.choiceChip.innerTerminal.$value.value===11,"Soft Hexagon terminal geometry must remain fixed rather than scaling with label length");
+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.choiceChip.markTarget.$value.value===24&&component.component.choiceChip.markTarget.$extensions["oneli8.geometry"]==="approved-component-recipe","The Remove mark target must stay a governed 24, not an enlarged 18px mark");
+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");
+// semantic 270 -> 273 and figmaVariables 587 -> 590: material.gem.color.quiet
+// gained content and contentGlow, and material.gem.blur gained contentGlow,
+// when the quiet face was flipped to tint dark like every gem family.
+// semantic 273 -> 274 and figmaVariables 590 -> 591: quiet.legibilityFace,
+// the reduced-transparency face. It is a new token rather than a reuse of
+// opaqueEquivalent because the reduced mode must stay SEE-THROUGH: Gem is
+// worn, so an opaque panel would occlude the street for the person who
+// needs help reading the interface most. 0.72 leaves 28% of the scene
+// visible and still measures 7.70:1 in the worst region of a real daylight
+// plate, which is AAA.
+ok(manifest.counts.primitive===170&&manifest.counts.semantic===275&&manifest.counts.component===161&&manifest.counts.componentStatuses===10&&manifest.counts.figmaVariables===592&&manifest.counts.figmaElevationStyles===5,"Navigation spacing and contextual token output counts must remain deterministic");
+
+console.log(`PASS ${checks}/${checks} canonical token package checks.`);