@sprig-and-prose/sprig-design 0.1.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/README.md +65 -0
- package/package.json +27 -0
- package/src/index.css +6 -0
- package/src/sizes.css +69 -0
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# sprig-design
|
|
2
|
+
|
|
3
|
+
**sprig-design** contains the shared design primitives used across the
|
|
4
|
+
sprig and prose ecosystem.
|
|
5
|
+
|
|
6
|
+
This repository is intentionally small and boring.
|
|
7
|
+
|
|
8
|
+
It defines:
|
|
9
|
+
- font size scales
|
|
10
|
+
- line-height rhythm
|
|
11
|
+
- (eventually) semantic colors and typography tokens
|
|
12
|
+
|
|
13
|
+
It does **not** include:
|
|
14
|
+
- components
|
|
15
|
+
- layout systems
|
|
16
|
+
- CSS resets
|
|
17
|
+
- texture generation
|
|
18
|
+
- JavaScript
|
|
19
|
+
|
|
20
|
+
sprig-design exists to make calm, readable interfaces *repeatable*.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
sprig-design is pure CSS.
|
|
27
|
+
|
|
28
|
+
Import the stylesheet you need (or `index.css` for everything), and apply
|
|
29
|
+
the namespace to the part of your app that should use sprig’s design language.
|
|
30
|
+
|
|
31
|
+
Example:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<div class="sprig-design">
|
|
35
|
+
<!-- sprig UI, docs, or prose-rendered content -->
|
|
36
|
+
</div>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
@import '@sprig-and-prose/sprig-design/index.css';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
All design tokens are exposed as CSS variables under the `.sprig-design`
|
|
44
|
+
namespace.
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## Philosophy
|
|
49
|
+
|
|
50
|
+
sprig-design favors:
|
|
51
|
+
|
|
52
|
+
* small, constrained scales
|
|
53
|
+
* semantic naming
|
|
54
|
+
* explicit opt-in
|
|
55
|
+
* calm defaults
|
|
56
|
+
|
|
57
|
+
It is designed to coexist with other systems, not replace them.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Status
|
|
62
|
+
|
|
63
|
+
This package is evolving.
|
|
64
|
+
|
|
65
|
+
Versions are published as `0.x` while the design language settles.
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sprig-and-prose/sprig-design",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Shared design primitives (sizes, rhythm, typography tokens) for the sprig and prose ecosystem.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/thegrumpysnail/sprig-design.git"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"src"
|
|
12
|
+
],
|
|
13
|
+
"style": "src/index.css",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"style": "./src/index.css"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"sprig",
|
|
21
|
+
"prose",
|
|
22
|
+
"design",
|
|
23
|
+
"css",
|
|
24
|
+
"tokens",
|
|
25
|
+
"typography"
|
|
26
|
+
]
|
|
27
|
+
}
|
package/src/index.css
ADDED
package/src/sizes.css
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/* sprig-design: sizes.css
|
|
2
|
+
Calm, constrained typography scale.
|
|
3
|
+
H1 is the upper bound. Body text is the anchor.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.sprig-design {
|
|
7
|
+
/* Font sizes */
|
|
8
|
+
--sp-font-body: 1rem; /* primary reading size */
|
|
9
|
+
--sp-font-small: 0.875rem; /* meta / de-emphasized text (lower bound) */
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
Headings
|
|
13
|
+
H1 is intentionally large and expressive.
|
|
14
|
+
Other headings step down gently to avoid visual spikes.
|
|
15
|
+
*/
|
|
16
|
+
--sp-font-h1: 3rem; /* 48px — upper bound */
|
|
17
|
+
--sp-font-h2: 1.5rem; /* 24px */
|
|
18
|
+
--sp-font-h3: 1.25rem; /* 20px */
|
|
19
|
+
|
|
20
|
+
/* Line heights */
|
|
21
|
+
--sp-line-body: 1.7; /* calm paragraph rhythm */
|
|
22
|
+
--sp-line-tight: 1.3; /* headings, labels */
|
|
23
|
+
--sp-line-loose: 1.9; /* optional long-form blocks */
|
|
24
|
+
|
|
25
|
+
/*
|
|
26
|
+
Vertical rhythm tokens
|
|
27
|
+
(used for spacing, not layout)
|
|
28
|
+
*/
|
|
29
|
+
--sp-space-1: 0.25rem;
|
|
30
|
+
--sp-space-2: 0.5rem;
|
|
31
|
+
--sp-space-3: 0.75rem;
|
|
32
|
+
--sp-space-4: 1rem;
|
|
33
|
+
--sp-space-6: 1.5rem;
|
|
34
|
+
--sp-space-8: 2rem;
|
|
35
|
+
--sp-space-12: 3rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sprig-design .sp-prose {
|
|
39
|
+
font-size: var(--sp-font-body);
|
|
40
|
+
line-height: var(--sp-line-body);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sprig-design .sp-prose p {
|
|
44
|
+
margin: 0 0 var(--sp-space-4) 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.sprig-design .sp-prose h1 {
|
|
48
|
+
font-size: var(--sp-font-h1);
|
|
49
|
+
line-height: 1.15; /* large headings need tighter leading */
|
|
50
|
+
margin: 0 0 var(--sp-space-12) 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.sprig-design .sp-prose h2 {
|
|
54
|
+
font-size: var(--sp-font-h2);
|
|
55
|
+
line-height: var(--sp-line-tight);
|
|
56
|
+
margin: var(--sp-space-12) 0 var(--sp-space-3) 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sprig-design .sp-prose h3 {
|
|
60
|
+
font-size: var(--sp-font-h3);
|
|
61
|
+
line-height: var(--sp-line-tight);
|
|
62
|
+
margin: var(--sp-space-8) 0 var(--sp-space-2) 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.sprig-design .sp-prose small,
|
|
66
|
+
.sprig-design .sp-prose .sp-meta {
|
|
67
|
+
font-size: var(--sp-font-small);
|
|
68
|
+
line-height: var(--sp-line-tight);
|
|
69
|
+
}
|