@sprig-and-prose/sprig-design 0.1.0 → 0.1.2
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/README.md +16 -1
- package/package.json +1 -1
- package/src/sizes.css +3 -2
package/README.md
CHANGED
|
@@ -6,8 +6,10 @@ sprig and prose ecosystem.
|
|
|
6
6
|
This repository is intentionally small and boring.
|
|
7
7
|
|
|
8
8
|
It defines:
|
|
9
|
-
- font
|
|
9
|
+
- three base font sizes (tiny, small, body)
|
|
10
|
+
- heading sizes (h1, h2, h3)
|
|
10
11
|
- line-height rhythm
|
|
12
|
+
- spacing tokens
|
|
11
13
|
- (eventually) semantic colors and typography tokens
|
|
12
14
|
|
|
13
15
|
It does **not** include:
|
|
@@ -43,6 +45,19 @@ Example:
|
|
|
43
45
|
All design tokens are exposed as CSS variables under the `.sprig-design`
|
|
44
46
|
namespace.
|
|
45
47
|
|
|
48
|
+
### Font Sizes
|
|
49
|
+
|
|
50
|
+
sprig-design uses exactly three base text sizes:
|
|
51
|
+
|
|
52
|
+
- `--sp-font-tiny: 0.75rem` (12px) — non-critical / tertiary text only
|
|
53
|
+
- `--sp-font-small: 0.875rem` (14px) — smallest "critical" text
|
|
54
|
+
- `--sp-font-body: 1rem` (16px) — default everyday text (including prose)
|
|
55
|
+
|
|
56
|
+
Plus heading sizes:
|
|
57
|
+
- `--sp-font-h1: 3rem` (48px) — upper bound
|
|
58
|
+
- `--sp-font-h2: 1.5rem` (24px)
|
|
59
|
+
- `--sp-font-h3: 1.25rem` (20px)
|
|
60
|
+
|
|
46
61
|
---
|
|
47
62
|
|
|
48
63
|
## Philosophy
|
package/package.json
CHANGED
package/src/sizes.css
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
.sprig-design {
|
|
7
7
|
/* Font sizes */
|
|
8
|
-
--sp-font-
|
|
9
|
-
--sp-font-small: 0.875rem;
|
|
8
|
+
--sp-font-tiny: 0.75rem; /* 12px — non-critical / tertiary text only */
|
|
9
|
+
--sp-font-small: 0.875rem; /* 14px — smallest "critical" text */
|
|
10
|
+
--sp-font-body: 1rem; /* 16px — default everyday text */
|
|
10
11
|
|
|
11
12
|
/*
|
|
12
13
|
Headings
|