Goal
Support semantic and component token layers through the existing primitives abstraction:
palette / spacing / typography
↓
semantic primitives
↓
component primitives
No separate semantic-token module or configuration DSL is needed.
Current limitation
At 94bf4d8, processPrimitives() creates primitives.* entries in its output map, but supplies only colors, typography, and spacing to reference resolution. The resolver has no primitives case.
Consequently, a reference such as:
variables: {
action: "primitives.semantic.action.background",
}
reaches the unsupported-module error rather than resolving to the generated custom-property name.
Raw var(--semantic-action-background) references can already be written directly. The missing capability is the configuration-path reference contract, validation, and tooling—not CSS's ability to compose custom properties.
Proposed implementation direction
Use an order-independent registry of token identities. A two-pass approach can first register all primitive paths and generated names, then resolve references and emit declarations. Add graph validation for missing paths and cycles; topological processing is an option, not a requirement to eagerly evaluate CSS.
Preserve var() references in CSS output. Do not flatten aliases into literal values, because that would change native theming and cascade behavior.
Acceptance criteria
Non-goals
A separate semantic module, a prettier hand-authored DSL, arbitrary component-style composition, and TypeScript style bindings in Vue.
Goal
Support semantic and component token layers through the existing
primitivesabstraction:No separate semantic-token module or configuration DSL is needed.
Current limitation
At
94bf4d8, processPrimitives() createsprimitives.*entries in its output map, but supplies only colors, typography, and spacing to reference resolution. The resolver has noprimitivescase.Consequently, a reference such as:
reaches the unsupported-module error rather than resolving to the generated custom-property name.
Raw
var(--semantic-action-background)references can already be written directly. The missing capability is the configuration-path reference contract, validation, and tooling—not CSS's ability to compose custom properties.Proposed implementation direction
Use an order-independent registry of token identities. A two-pass approach can first register all primitive paths and generated names, then resolve references and emit declarations. Add graph validation for missing paths and cycles; topological processing is an option, not a requirement to eagerly evaluate CSS.
Preserve
var()references in CSS output. Do not flatten aliases into literal values, because that would change native theming and cascade behavior.Acceptance criteria
primitives.<primitive>.<variant>.<property>references resolve through the existingvariablesmap.primitives.a.default.x → primitives.b.default.x → primitives.a.default.x.Non-goals
A separate semantic module, a prettier hand-authored DSL, arbitrary component-style composition, and TypeScript style bindings in Vue.