@primitiv-ui/tokens 0.1.29 → 0.1.30

package/README.md

@@ -58,7 +58,7 @@ and `dist/index.html` (UI). Stays running and rebuilds on change.
 ### 4. Load the plugin into Figma desktop (one-time per machine)
 
 In Figma desktop: **Plugins → Development → Import plugin from
-manifest…** and select
+manifest...** and select
 `apps/primitiv-sync-figma-plugin/manifest.json`. After this Figma
 remembers it under **Plugins → Development → Primitiv Sync**.
 
@@ -110,7 +110,7 @@ backup "real".
 ## Conventions
 
 - Slash-separated Figma variable names (`font-family/heading`) become
-  nested DTCG groups (`{ "font-family": { "heading": {…} } }`).
+  nested DTCG groups (`{ "font-family": { "heading": {...} } }`).
 - Each token has `$type` and `$value`. Aliases (next cycle) will use
   DTCG's `{group.sub.name}` reference string.
 - Colours emit as hex: `#rrggbb` opaque, `#rrggbbaa` translucent.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/tokens",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "The DTCG-conformant design-token layer for the Primitiv ecosystem, plus helpers that transform Figma variable exports into DTCG JSON.",
   "type": "module",
   "main": "src/index.ts",

package/src/breakpoint.json

@@ -0,0 +1,10 @@
+{
+  "breakpoint": {
+    "xs": { "$type": "number", "$value": 360 },
+    "sm": { "$type": "number", "$value": 640 },
+    "md": { "$type": "number", "$value": 768 },
+    "lg": { "$type": "number", "$value": 1024 },
+    "xl": { "$type": "number", "$value": 1280 },
+    "2xl": { "$type": "number", "$value": 1536 }
+  }
+}

package/src/code-typography.test.ts

@@ -0,0 +1,64 @@
+import context from './context.json'
+import primitives from './primitives.json'
+
+/*
+ * `code.*` is the mono typographic family — the one every colour value, hex,
+ * ratio and percentage in Harmoni is set in.
+ *
+ * Why this needs a test: the family was authored size-first, so it shipped with
+ * `font-size` and `line-height` and nothing else. That is invisible in the JSON
+ * (a group with two members looks intentional) but it is not a usable family —
+ * a Figma text style binds four members, so `code.*` could not be expressed as
+ * a text style at all, and `font-family.mono` sat in the primitives with
+ * nothing consuming it. This asserts the family is complete *and* that it is
+ * the mono one, which is the whole reason it exists apart from `body`.
+ */
+
+type Mode = 'dense' | 'compact' | 'comfortable' | 'spacious'
+type DtcgNode = { $type?: string; $value?: unknown; [key: string]: unknown }
+
+const MODES: Mode[] = ['dense', 'compact', 'comfortable', 'spacious']
+const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+/** The members a Figma text style binds, plus the weight the CSS layer needs. */
+const MEMBERS = {
+  'font-family': 'string',
+  'font-weight': 'number',
+  'font-size': 'number',
+  'line-height': 'number',
+  'font-style': 'string',
+} as const
+
+function codeSize(mode: Mode, size: string): DtcgNode {
+  const code = (context as Record<Mode, DtcgNode>)[mode].code as DtcgNode
+  return code[size] as DtcgNode
+}
+
+/** Resolve a DTCG alias (`{font-family.mono}`) against the primitive tree. */
+function resolvePrimitive(ref: string): unknown {
+  const path = ref.slice(1, -1).split('.')
+  let node: DtcgNode = primitives as DtcgNode
+  for (const key of path) node = node[key] as DtcgNode
+  return node.$value
+}
+
+describe('code typography', () => {
+  for (const mode of MODES) {
+    for (const size of SIZES) {
+      it(`${mode} / code / ${size} is a complete typographic family`, () => {
+        const entry = codeSize(mode, size)
+        for (const [member, type] of Object.entries(MEMBERS)) {
+          const node = entry[member] as DtcgNode | undefined
+          expect(node, `${mode}.code.${size}.${member} is missing`).toBeDefined()
+          expect(node?.$type).toBe(type)
+        }
+      })
+
+      it(`${mode} / code / ${size} is set in the mono face`, () => {
+        const family = codeSize(mode, size)['font-family'] as DtcgNode | undefined
+        expect(family?.$value).toBe('{font-family.mono}')
+        expect(resolvePrimitive(family?.$value as string)).toBe('JetBrains Mono')
+      })
+    }
+  }
+})