@motion-proto/live-tokens 0.24.1 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/live-tokens-create-component/SKILL.md +38 -24
- package/bin/check-component.mjs +52 -4
- package/dist-plugin/index.cjs +7 -0
- package/dist-plugin/index.js +7 -0
- package/package.json +1 -1
- package/src/editor/component-editor/CalloutEditor.svelte +1 -1
- package/src/editor/component-editor/CardEditor.svelte +1 -1
- package/src/editor/component-editor/CollapsibleSectionEditor.svelte +1 -1
- package/src/editor/component-editor/DialogEditor.svelte +1 -1
- package/src/editor/component-editor/PanelEditor.svelte +81 -0
- package/src/editor/component-editor/ProgressBarEditor.svelte +1 -1
- package/src/editor/component-editor/RadioButtonEditor.svelte +1 -1
- package/src/editor/component-editor/SectionDividerEditor.svelte +2 -2
- package/src/editor/component-editor/SideNavigationEditor.svelte +18 -15
- package/src/editor/component-editor/TabBarEditor.svelte +1 -1
- package/src/editor/component-editor/TableEditor.svelte +8 -17
- package/src/editor/component-editor/TooltipEditor.svelte +1 -1
- package/src/editor/component-editor/index.ts +8 -1
- package/src/editor/component-editor/registry.ts +11 -0
- package/src/editor/component-editor/scaffolding/buildTypeGroupTokens.ts +120 -17
- package/src/editor/component-editor/scaffolding/types.ts +4 -0
- package/src/editor/overlay/LiveEditorOverlay.svelte +79 -3
- package/src/editor/styles/ui-editor.css +8 -2
- package/src/system/assets/github-mark-white.svg +1 -0
- package/src/system/assets/npm-mark-white.svg +1 -0
- package/src/system/assets/offering.webp +0 -0
- package/src/system/components/Button.svelte +12 -12
- package/src/system/components/CodeSnippet.svelte +4 -1
- package/src/system/components/FloatingTokenTags.css +1 -1
- package/src/system/components/Panel.svelte +44 -0
- package/src/system/components/SectionDivider.svelte +10 -10
- package/src/system/components/SideNavigation.svelte +13 -0
- package/src/system/styles/CONVENTIONS.md +13 -6
|
@@ -135,7 +135,7 @@ Tokens that share a `groupKey` form a **sibling set**. A property declared `canB
|
|
|
135
135
|
- `--segmentedcontrol-bar-border-width` and `--segmentedcontrol-selected-border-width` share `groupKey: 'border-width'`.
|
|
136
136
|
- `--segmentedcontrol-option-text-font-weight`, `--segmentedcontrol-option-disabled-text-font-weight`, and `--segmentedcontrol-selected-text-font-weight` share `groupKey: 'font-weight'`.
|
|
137
137
|
|
|
138
|
-
Editor authors declare `groupKey` per token in the editor's token list (and call `registerComponentSchema(component, tokens)` once at module load). The
|
|
138
|
+
Editor authors declare `groupKey` per token in the editor's token list (and call `registerComponentSchema(component, tokens)` once at module load). The contract is explicit: the store reads each token's declared `groupKey` and nothing else. A token with no `groupKey` has no siblings. (Inference happens only at *build time* inside the `buildTypeGroup*` helpers, which bake a concrete `groupKey` into the schema before it is registered — see "Deriving groupKeys with the type-group helpers".)
|
|
139
139
|
|
|
140
140
|
Linkage is **dev-declared** — the editor schema is the source of truth for which variables share a `groupKey`. Users only choose whether to opt out of an existing link (per-property), never to add or reshape one.
|
|
141
141
|
|
|
@@ -152,15 +152,22 @@ groupKey: 'font-family' ✗ silently links title a
|
|
|
152
152
|
|
|
153
153
|
A bare typography `groupKey` like `'font-family'` is fine when the component has only one typography slot (Button has only `text`; RadioButton only `label`; CollapsibleSection only `label`). Add a slot prefix the moment the component grows a second slot.
|
|
154
154
|
|
|
155
|
-
`registerComponentSchema` emits a console warning at runtime if a single `groupKey` covers variables whose name-derived slots differ. Treat
|
|
155
|
+
`registerComponentSchema` emits a console warning at runtime if a single `groupKey` covers variables whose name-derived slots differ; the `editor groupKey slot invariant` test (`groupKeySlots.test.ts`) and `npx live-tokens check-component <id>` both fail on it too. Treat any of them as a hard error.
|
|
156
156
|
|
|
157
|
-
###
|
|
157
|
+
### Deriving groupKeys with the type-group helpers
|
|
158
158
|
|
|
159
|
-
|
|
159
|
+
`buildTypeGroupColorTokens`, `buildTypeGroupTokens`, and `buildTypeGroupFontTokens` generate the per-slot `groupKey`s for you so editors don't hand-list 16+ near-identical entries. **Pass a derivation** so the key is slot-scoped:
|
|
160
160
|
|
|
161
|
-
|
|
161
|
+
```ts
|
|
162
|
+
buildTypeGroupColorTokens(typeGroups, { component, variants: ['default', 'hover'] })
|
|
163
|
+
buildTypeGroupTokens(typeGroups, { component, variants })
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
The helper strips the `--<component>-` prefix and the variant/state segments, keeping the rest: `--sidenavigation-section-default-text` → `section-text`, `--card-default-title-font-family` → `title-font-family`. Two parts ending in the same word (`section-text`, `item-text`) stay distinct; the same slot across variants (`--badge-primary-text`, `--badge-accent-text`) collapses to one key. This is correct by construction — it cannot phantom-link independent slots.
|
|
167
|
+
|
|
168
|
+
Precedence, most specific first: a per-group `colorGroupKey` (the durable one-line fix; never recomputed) > a `groupKeyFor` callback > the structural derivation (`{ component, variants }`). There is **no name-based fallback**: call `buildTypeGroupColorTokens` with none of these and its color tokens are emitted solo (no `groupKey`), never inferred from the last dash. The font helpers (`buildTypeGroupTokens`, `buildTypeGroupFontTokens`) still default to the bare `font-family`/`font-size`/… keys, which is correct for a single slot but merges fonts across multiple slots — `check-component` warns when a font helper is called bare across more than one slot.
|
|
162
169
|
|
|
163
|
-
|
|
170
|
+
Linking *across* slots on purpose (Table links `border`/`width` across wrapper/header/row/column) is done with an **explicit shared `groupKey`**, a deliberate authored choice distinct from the accidental merge the structural derivation prevents.
|
|
164
171
|
|
|
165
172
|
## Checklist for adding a new component token
|
|
166
173
|
|