@primitiv-ui/tokens 0.1.21 → 0.1.23

package/README.md

@@ -17,6 +17,7 @@ token transformer (e.g. CSS variables, Tailwind config) reads from.
 | `src/index.ts` | Public entry; re-exports the transform, the server, and types |
 | `src/*.test.ts` | Vitest unit tests, 100% coverage |
 | `src/{primitives,palette,intent,context,interaction}.json` | DTCG output written by the sync server. **Committed** — these files are the repo's source of truth for downstream transformers. |
+| `src/motion.json` | **Code-only** DTCG (motion durations + easing curves + the semantic `motion.*` layer). Hand-authored, *not* a sync target — Figma has no `cubicBezier` variable type, so motion can't round-trip. Sits outside the five-file write-set, so a backup never touches it. |
 
 ## Backing up tokens (end-to-end)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/tokens",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "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/context.json

@@ -1463,73 +1463,73 @@
       "sm": {
         "radius": {
           "$type": "number",
-          "$value": 8
+          "$value": "{radii.8}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         },
         "gap": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         }
       },
       "md": {
         "radius": {
           "$type": "number",
-          "$value": 10
+          "$value": "{radii.10}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         },
         "gap": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         }
       },
       "lg": {
         "radius": {
           "$type": "number",
-          "$value": 12
+          "$value": "{radii.12}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 24
+          "$value": "{space.space-24}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 14
+          "$value": "{space.space-14}"
         },
         "gap": {
           "$type": "number",
-          "$value": 14
+          "$value": "{space.space-14}"
         }
       },
       "xl": {
         "radius": {
           "$type": "number",
-          "$value": 16
+          "$value": "{radii.16}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 28
+          "$value": "{space.space-28}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         },
         "gap": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         }
       },
       "border-width": {
@@ -3098,73 +3098,73 @@
       "sm": {
         "radius": {
           "$type": "number",
-          "$value": 6
+          "$value": "{radii.6}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 14
+          "$value": "{space.space-14}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         },
         "gap": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         }
       },
       "md": {
         "radius": {
           "$type": "number",
-          "$value": 8
+          "$value": "{radii.8}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         },
         "gap": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         }
       },
       "lg": {
         "radius": {
           "$type": "number",
-          "$value": 10
+          "$value": "{radii.10}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         },
         "gap": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         }
       },
       "xl": {
         "radius": {
           "$type": "number",
-          "$value": 12
+          "$value": "{radii.12}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 24
+          "$value": "{space.space-24}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         },
         "gap": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         }
       },
       "border-width": {
@@ -4733,73 +4733,73 @@
       "sm": {
         "radius": {
           "$type": "number",
-          "$value": 10
+          "$value": "{radii.10}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         },
         "gap": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         }
       },
       "md": {
         "radius": {
           "$type": "number",
-          "$value": 12
+          "$value": "{radii.12}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 24
+          "$value": "{space.space-24}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 14
+          "$value": "{space.space-14}"
         },
         "gap": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         }
       },
       "lg": {
         "radius": {
           "$type": "number",
-          "$value": 16
+          "$value": "{radii.16}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 28
+          "$value": "{space.space-28}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         },
         "gap": {
           "$type": "number",
-          "$value": 18
+          "$value": "{space.space-16}"
         }
       },
       "xl": {
         "radius": {
           "$type": "number",
-          "$value": 20
+          "$value": "{radii.20}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 32
+          "$value": "{space.space-32}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         },
         "gap": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         }
       },
       "border-width": {
@@ -6368,73 +6368,73 @@
       "sm": {
         "radius": {
           "$type": "number",
-          "$value": 4
+          "$value": "{radii.4}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 12
+          "$value": "{space.space-12}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 6
+          "$value": "{space.space-6}"
         },
         "gap": {
           "$type": "number",
-          "$value": 6
+          "$value": "{space.space-6}"
         }
       },
       "md": {
         "radius": {
           "$type": "number",
-          "$value": 6
+          "$value": "{radii.6}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 14
+          "$value": "{space.space-14}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         },
         "gap": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         }
       },
       "lg": {
         "radius": {
           "$type": "number",
-          "$value": 8
+          "$value": "{radii.8}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 16
+          "$value": "{space.space-16}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         },
         "gap": {
           "$type": "number",
-          "$value": 8
+          "$value": "{space.space-8}"
         }
       },
       "xl": {
         "radius": {
           "$type": "number",
-          "$value": 10
+          "$value": "{radii.10}"
         },
         "padding-inline": {
           "$type": "number",
-          "$value": 20
+          "$value": "{space.space-20}"
         },
         "padding-block": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         },
         "gap": {
           "$type": "number",
-          "$value": 10
+          "$value": "{space.space-10}"
         }
       },
       "border-width": {

package/src/dtcg.test.ts

@@ -479,6 +479,41 @@ describe('figmaVarsToDtcg', () => {
     })
   })
 
+  it('merges two modes that collapse to the same top-level key', () => {
+    // Mode names are lowercased before they become keys, so 'Light' and 'light'
+    // both target intent.light. The second merge must reuse the existing group
+    // rather than recreate it — exercising the "key already present" path.
+    const DUP_MODE_COLL: FigmaCollection = {
+      id: 'cdup',
+      name: 'Intent',
+      modes: [
+        { modeId: 'mL', name: 'Light' },
+        { modeId: 'ml', name: 'light' },
+      ],
+      defaultModeId: 'mL',
+    }
+    const result = figmaVarsToDtcg(
+      [DUP_MODE_COLL],
+      [
+        {
+          id: 'v1',
+          name: 'action/primary/default',
+          resolvedType: 'COLOR',
+          variableCollectionId: 'cdup',
+          valuesByMode: {
+            mL: { r: 0, g: 0, b: 0, a: 1 },
+            ml: { r: 1, g: 1, b: 1, a: 1 },
+          },
+        },
+      ],
+    )
+
+    // The later 'light' mode wins, proving its merge landed in the existing key.
+    expect(result.intent.light).toEqual({
+      action: { primary: { default: { $type: 'color', $value: '#ffffff' } } },
+    })
+  })
+
   it('routes Primitives / Foreground per-mode into foreground, resolving aliases', () => {
     const result = figmaVarsToDtcg(
       [FOREGROUND_COLL],

package/src/dtcg.ts

@@ -128,12 +128,13 @@ export function figmaVarsToDtcg(
   const foreground  = collections.find((c) => c.name === 'Primitives / Foreground')
   const intent      = collections.find((c) => c.name === 'Intent')
   const context     = collections.find((c) => c.name === 'Context')
-  const singleMode  = collections.filter(
-    (c) => c.name === 'Primitives' || c.name === 'Interaction',
-  )
+  const singleMode  = collections.filter((c) => c.name in SINGLE_MODE_FILES)
 
   const routes = new Map<string, Routing>(
-    singleMode.map((c) => [c.id, routeCollection(c.name)]),
+    singleMode.map((c) => [
+      c.id,
+      { file: SINGLE_MODE_FILES[c.name], prefix: [] },
+    ]),
   )
 
   // All variables are addressable by their natural name path — no collection prefix.
@@ -200,10 +201,14 @@ export function figmaVarsToDtcg(
   return files
 }
 
-function routeCollection(name: string): Routing {
-  if (name === 'Primitives')   return { file: 'primitives',   prefix: [] }
-  if (name === 'Interaction')  return { file: 'interaction',  prefix: [] }
-  throw new Error(`Unrecognised collection name: "${name}"`)
+/**
+ * Single-mode collection names mapped to their output file. The keys are the
+ * single source of truth for both the `singleMode` filter and the routing
+ * lookup, so the two can never drift apart.
+ */
+const SINGLE_MODE_FILES: Record<string, keyof DtcgFiles> = {
+  Primitives: 'primitives',
+  Interaction: 'interaction',
 }
 
 function mergeIntoPrefix(

package/src/elevation.json

@@ -0,0 +1,149 @@
+{
+  "shadow": {
+    "color": {
+      "strong": {
+        "$type": "color",
+        "$value": "#00000014"
+      },
+      "medium": {
+        "$type": "color",
+        "$value": "#0000000f"
+      },
+      "soft": {
+        "$type": "color",
+        "$value": "#0000000a"
+      }
+    },
+    "1": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "color": "{shadow.color.strong}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-1}",
+          "blur": "{space.space-2}",
+          "spread": "{space.space-0}"
+        }
+      ]
+    },
+    "2": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "color": "{shadow.color.strong}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-1}",
+          "blur": "{space.space-2}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.soft}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-2}",
+          "blur": "{space.space-4}",
+          "spread": "{space.space-0}"
+        }
+      ]
+    },
+    "3": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "color": "{shadow.color.strong}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-2}",
+          "blur": "{space.space-4}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.medium}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-4}",
+          "blur": "{space.space-8}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.soft}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-8}",
+          "blur": "{space.space-16}",
+          "spread": "{space.space-0}"
+        }
+      ]
+    },
+    "4": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "color": "{shadow.color.strong}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-4}",
+          "blur": "{space.space-8}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.medium}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-8}",
+          "blur": "{space.space-16}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.soft}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-16}",
+          "blur": "{space.space-24}",
+          "spread": "{space.space-0}"
+        }
+      ]
+    },
+    "5": {
+      "$type": "shadow",
+      "$value": [
+        {
+          "color": "{shadow.color.strong}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-8}",
+          "blur": "{space.space-16}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.medium}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-16}",
+          "blur": "{space.space-32}",
+          "spread": "{space.space-0}"
+        },
+        {
+          "color": "{shadow.color.soft}",
+          "offsetX": "{space.space-0}",
+          "offsetY": "{space.space-24}",
+          "blur": "{space.space-48}",
+          "spread": "{space.space-0}"
+        }
+      ]
+    }
+  },
+  "elevation": {
+    "flat": {
+      "$type": "shadow",
+      "$value": []
+    },
+    "raised": {
+      "$type": "shadow",
+      "$value": "{shadow.2}"
+    },
+    "overlay": {
+      "$type": "shadow",
+      "$value": "{shadow.3}"
+    },
+    "floating": {
+      "$type": "shadow",
+      "$value": "{shadow.4}"
+    },
+    "modal": {
+      "$type": "shadow",
+      "$value": "{shadow.5}"
+    }
+  }
+}

package/src/intent.json

@@ -186,6 +186,10 @@
         "$value": "{color.neutral.800}"
       }
     },
+    "scrim": {
+      "$type": "color",
+      "$value": "#00000080"
+    },
     "content": {
       "primary": {
         "$type": "color",
@@ -462,6 +466,10 @@
         "$value": "{color.neutral.100}"
       }
     },
+    "scrim": {
+      "$type": "color",
+      "$value": "#00000080"
+    },
     "content": {
       "primary": {
         "$type": "color",

package/src/motion.json

@@ -0,0 +1,96 @@
+{
+  "duration": {
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "75": {
+      "$type": "number",
+      "$value": 75
+    },
+    "100": {
+      "$type": "number",
+      "$value": 100
+    },
+    "150": {
+      "$type": "number",
+      "$value": 150
+    },
+    "200": {
+      "$type": "number",
+      "$value": 200
+    },
+    "300": {
+      "$type": "number",
+      "$value": 300
+    },
+    "500": {
+      "$type": "number",
+      "$value": 500
+    },
+    "700": {
+      "$type": "number",
+      "$value": 700
+    },
+    "1000": {
+      "$type": "number",
+      "$value": 1000
+    }
+  },
+  "easing": {
+    "linear": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 1, 1]
+    },
+    "in": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 1, 1]
+    },
+    "out": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 0.2, 1]
+    },
+    "in-out": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 0.2, 1]
+    }
+  },
+  "motion": {
+    "duration": {
+      "feedback": {
+        "$type": "number",
+        "$value": "{duration.75}"
+      },
+      "control": {
+        "$type": "number",
+        "$value": "{duration.150}"
+      },
+      "expand": {
+        "$type": "number",
+        "$value": "{duration.200}"
+      },
+      "overlay": {
+        "$type": "number",
+        "$value": "{duration.300}"
+      }
+    },
+    "easing": {
+      "default": {
+        "$type": "cubicBezier",
+        "$value": "{easing.in-out}"
+      },
+      "enter": {
+        "$type": "cubicBezier",
+        "$value": "{easing.out}"
+      },
+      "exit": {
+        "$type": "cubicBezier",
+        "$value": "{easing.in}"
+      },
+      "linear": {
+        "$type": "cubicBezier",
+        "$value": "{easing.linear}"
+      }
+    }
+  }
+}