Borders & Radius
The published @combric/tokens@1.1.1 package separates structural and
functional geometry. The general --combric-radius remains square; published
components use the role-specific tokens below rather than inheriting that value.
| Semantic token | Default | Used for |
|---|---|---|
--combric-radius-button |
0.25rem |
Button |
--combric-radius-card |
0.25rem |
Card |
--combric-radius-checkbox |
0.125rem |
Checkbox |
--combric-radius-control |
0.25rem |
Inputs and functional controls |
--combric-radius-surface |
0.25rem |
Structural surfaces |
--combric-radius-overlay |
0.5rem |
Overlays |
--combric-radius-circle / --combric-radius-pill |
9999px |
Circular and pill geometry |
Button and Card also accept the public radius presets none, sm, md,
lg, and full. Their default is md. Borders continue to use the canonical
width and style roles.
| Kind | Token | Value / reference | CSS variable |
|---|---|---|---|
| Primitive | border.style.solid | solid | --combric-primitive-border-style-solid |
| Primitive | border.width.none | 0 | --combric-primitive-border-width-none |
| Primitive | border.width.strong | 2px | --combric-primitive-border-width-strong |
| Primitive | border.width.thin | 1px | --combric-primitive-border-width-thin |
| Primitive | radius.full | 9999px | --combric-primitive-radius-full |
| Primitive | radius.lg | 0.5rem | --combric-primitive-radius-lg |
| Primitive | radius.md | 0.25rem | --combric-primitive-radius-md |
| Primitive | radius.square | 0 | --combric-primitive-radius-square |
| Primitive | radius.sm | 0.125rem | --combric-primitive-radius-sm |
| Semantic | border.style | border.style.solid → solid | --combric-border-style |
| Semantic | border.width | border.width.thin → 1px | --combric-border-width |
| Semantic | border.width.strong | border.width.strong → 2px | --combric-border-width-strong |
| Semantic | radius | radius.square → 0 | --combric-radius |
| Semantic | radius.button | radius.md → 0.25rem | --combric-radius-button |
| Semantic | radius.card | radius.md → 0.25rem | --combric-radius-card |
| Semantic | radius.checkbox | radius.sm → 0.125rem | --combric-radius-checkbox |
| Semantic | radius.circle | radius.full → 9999px | --combric-radius-circle |
| Semantic | radius.control | radius.md → 0.25rem | --combric-radius-control |
| Semantic | radius.overlay | radius.lg → 0.5rem | --combric-radius-overlay |
| Semantic | radius.pill | radius.full → 9999px | --combric-radius-pill |
| Semantic | radius.surface | radius.md → 0.25rem | --combric-radius-surface |