@atelier-ui/angular 0.2.9 → 0.2.11
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/package.json +1 -1
- package/src/styles/tokens.css +35 -0
package/package.json
CHANGED
package/src/styles/tokens.css
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
* Mono (code), chosen 2026-08-26 — see ADR-0035, which revises ADR-0020's
|
|
12
12
|
* Inter choice. The library declares the stacks; loading the faces is the
|
|
13
13
|
* consumer's job (the docs app does it through Astro's fonts config).
|
|
14
|
+
* The --ui-type-* roles (ADR-0036) are the layer component CSS should
|
|
15
|
+
* reference; the individual axes remain for the cases a role does not fit.
|
|
14
16
|
*
|
|
15
17
|
* Plan: ~/.claude/plans/atelier-design-rebrief.md (Direction A pivot)
|
|
16
18
|
*
|
|
@@ -34,12 +36,45 @@
|
|
|
34
36
|
--ui-letter-spacing-tight: -0.01em;
|
|
35
37
|
--ui-letter-spacing-normal: 0;
|
|
36
38
|
--ui-letter-spacing-wide: 0.01em;
|
|
39
|
+
--ui-letter-spacing-uppercase: 0.08em;
|
|
40
|
+
--ui-font-size-3xl: 2.25rem;
|
|
37
41
|
--ui-font-weight-normal: 400;
|
|
38
42
|
--ui-font-weight-medium: 500;
|
|
39
43
|
--ui-font-weight-semibold: 600;
|
|
44
|
+
--ui-font-weight-bold: 700;
|
|
40
45
|
--ui-line-height-tight: 1.25;
|
|
41
46
|
--ui-line-height-normal: 1.5;
|
|
42
47
|
|
|
48
|
+
/* ── Type roles ─────────────────────────────────────────────
|
|
49
|
+
* Composed entirely from the axes above, so sizes and weights stay
|
|
50
|
+
* single-sourced and a role adds meaning rather than new numbers.
|
|
51
|
+
* Reference a ROLE from component CSS (`font: var(--ui-type-body-md)`),
|
|
52
|
+
* not an axis — the role is what carries ADR-0035's rule that weight
|
|
53
|
+
* comes from the sans and the display face is never bolded.
|
|
54
|
+
*
|
|
55
|
+
* `font:` is a shorthand: it resets font-style, font-variant,
|
|
56
|
+
* font-stretch and line-height, so declare it BEFORE any font-* override
|
|
57
|
+
* on the same rule. It does not touch letter-spacing — pair the display
|
|
58
|
+
* role with --ui-letter-spacing-tight and an uppercased label role with
|
|
59
|
+
* --ui-letter-spacing-uppercase yourself.
|
|
60
|
+
*/
|
|
61
|
+
--ui-type-display: italic var(--ui-font-weight-normal) var(--ui-font-size-3xl) /
|
|
62
|
+
var(--ui-line-height-tight) var(--ui-font-display);
|
|
63
|
+
--ui-type-headline: var(--ui-font-weight-bold) var(--ui-font-size-2xl) /
|
|
64
|
+
var(--ui-line-height-tight) var(--ui-font-family);
|
|
65
|
+
--ui-type-title: var(--ui-font-weight-semibold) var(--ui-font-size-lg) /
|
|
66
|
+
var(--ui-line-height-tight) var(--ui-font-family);
|
|
67
|
+
--ui-type-body-lg: var(--ui-font-weight-normal) var(--ui-font-size-lg) /
|
|
68
|
+
var(--ui-line-height-normal) var(--ui-font-family);
|
|
69
|
+
--ui-type-body-md: var(--ui-font-weight-normal) var(--ui-font-size-md) /
|
|
70
|
+
var(--ui-line-height-normal) var(--ui-font-family);
|
|
71
|
+
--ui-type-body-sm: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
|
|
72
|
+
var(--ui-line-height-normal) var(--ui-font-family);
|
|
73
|
+
--ui-type-label: var(--ui-font-weight-medium) var(--ui-font-size-xs) /
|
|
74
|
+
var(--ui-line-height-tight) var(--ui-font-family);
|
|
75
|
+
--ui-type-code: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
|
|
76
|
+
var(--ui-line-height-normal) var(--ui-font-mono);
|
|
77
|
+
|
|
43
78
|
/* ── Colours · light mode (default) ────────────────────────── */
|
|
44
79
|
|
|
45
80
|
/* Primary — Conciso deep teal */
|