@hackcove/theme-thrifty-paper 0.1.0 → 0.1.3
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 +1 -1
- package/package.json +18 -1
- package/theme.css +41 -5
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ The Thrifty Paper light theme for Hack Cove: cream paper, ink text, clay accent.
|
|
|
4
4
|
`theme.css`: under `.thrifty-paper` it remaps the Tailwind slate/colour utilities that
|
|
5
5
|
`@hackcove/ui` is written against to Thrifty's light tokens. It also ships a `.link` class.
|
|
6
6
|
|
|
7
|
-
Status: `0.x`,
|
|
7
|
+
Status: `0.x`, published on npm. License: MIT.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hackcove/theme-thrifty-paper",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "The Thrifty Paper light theme for Hack Cove: one CSS file that remaps the Tailwind utilities @hackcove/ui is written against.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"design-system",
|
|
7
|
+
"hackcove",
|
|
8
|
+
"light-theme",
|
|
9
|
+
"paper",
|
|
10
|
+
"tailwind",
|
|
11
|
+
"tailwindcss",
|
|
12
|
+
"theme"
|
|
13
|
+
],
|
|
14
|
+
"homepage": "https://github.com/madangryscientist/hackcove/tree/main/themes/thrifty-paper#readme",
|
|
15
|
+
"bugs": {
|
|
16
|
+
"url": "https://github.com/madangryscientist/hackcove/issues"
|
|
17
|
+
},
|
|
5
18
|
"license": "MIT",
|
|
19
|
+
"author": {
|
|
20
|
+
"name": "Jacobus Langner",
|
|
21
|
+
"url": "https://github.com/madangryscientist"
|
|
22
|
+
},
|
|
6
23
|
"repository": {
|
|
7
24
|
"type": "git",
|
|
8
25
|
"url": "git+https://github.com/madangryscientist/hackcove.git",
|
package/theme.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
accent #c2410c · accent-hover #9a3412 · accent-soft #fdf5f0
|
|
18
18
|
positive #047857 / #ecfdf5 · warn #b45309 / #fffbeb · note #0f766e / #f0fdfa
|
|
19
19
|
danger #b91c1c / #fef2f2
|
|
20
|
+
Added for 3:1 control edges (not in Thrifty's block): edge #948a7c
|
|
20
21
|
|
|
21
22
|
--------------------------------------------------------------------------- */
|
|
22
23
|
|
|
@@ -63,17 +64,25 @@
|
|
|
63
64
|
.thrifty-paper .text-slate-400 {
|
|
64
65
|
color: #6b6259; /* ink-mute — Thrifty's lightest text */
|
|
65
66
|
}
|
|
67
|
+
.thrifty-paper .text-slate-300 {
|
|
68
|
+
color: #6b6259; /* ink-mute — days outside the month: 5.97:1 on white (ink-mute/50 was 2.15:1) */
|
|
69
|
+
}
|
|
66
70
|
.thrifty-paper .placeholder\:text-slate-400::placeholder {
|
|
67
71
|
color: rgba(107, 98, 89, 0.7); /* ink-mute/70 */
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
/* Borders */
|
|
75
|
+
.thrifty-paper .border-slate-50 {
|
|
76
|
+
border-color: #f7f2e9; /* same as bg-slate-50: the ring takes the page colour */
|
|
77
|
+
}
|
|
71
78
|
.thrifty-paper .border-slate-100,
|
|
72
79
|
.thrifty-paper .border-slate-200,
|
|
73
|
-
.thrifty-paper .border-slate-200\/70
|
|
74
|
-
.thrifty-paper .border-slate-300 {
|
|
80
|
+
.thrifty-paper .border-slate-200\/70 {
|
|
75
81
|
border-color: #ece3d4; /* line */
|
|
76
82
|
}
|
|
83
|
+
.thrifty-paper .border-slate-300 {
|
|
84
|
+
border-color: #948a7c; /* control edge: 3.39:1 on white, 3.28:1 on canvas (line was 1.27:1) */
|
|
85
|
+
}
|
|
77
86
|
.thrifty-paper .border-slate-900 {
|
|
78
87
|
border-color: #1c1917; /* ink */
|
|
79
88
|
}
|
|
@@ -111,7 +120,7 @@
|
|
|
111
120
|
border-color: #c2410c; /* accent */
|
|
112
121
|
}
|
|
113
122
|
.thrifty-paper .hover\:border-violet-400:hover {
|
|
114
|
-
border-color:
|
|
123
|
+
border-color: #c2410c; /* accent: 5.18:1 on white, darker than the resting edge (was accent/40, 1.85:1) */
|
|
115
124
|
}
|
|
116
125
|
.thrifty-paper .focus-visible\:outline-violet-600:focus-visible {
|
|
117
126
|
outline-color: #c2410c; /* accent */
|
|
@@ -120,6 +129,26 @@
|
|
|
120
129
|
accent-color: #c2410c; /* accent */
|
|
121
130
|
}
|
|
122
131
|
|
|
132
|
+
/* Avatar identity colours — violet-600 is the accent above; the rest sit on the theme. */
|
|
133
|
+
.thrifty-paper .bg-orange-600 {
|
|
134
|
+
background-color: #8c5a2b; /* brown */
|
|
135
|
+
}
|
|
136
|
+
.thrifty-paper .bg-cyan-600 {
|
|
137
|
+
background-color: #0e7490; /* cyan */
|
|
138
|
+
}
|
|
139
|
+
.thrifty-paper .bg-emerald-600 {
|
|
140
|
+
background-color: #047857; /* positive */
|
|
141
|
+
}
|
|
142
|
+
.thrifty-paper .bg-sky-600 {
|
|
143
|
+
background-color: #1e6a8f; /* steel blue */
|
|
144
|
+
}
|
|
145
|
+
.thrifty-paper .bg-pink-600 {
|
|
146
|
+
background-color: #a8325e; /* berry */
|
|
147
|
+
}
|
|
148
|
+
.thrifty-paper .bg-amber-600 {
|
|
149
|
+
background-color: #7a6a1a; /* olive */
|
|
150
|
+
}
|
|
151
|
+
|
|
123
152
|
/* Hover states */
|
|
124
153
|
.thrifty-paper .hover\:bg-slate-50:hover {
|
|
125
154
|
background-color: #f7f2e9; /* subtle */
|
|
@@ -183,14 +212,21 @@
|
|
|
183
212
|
border-color: rgba(180, 83, 9, 0.3); /* warn */
|
|
184
213
|
}
|
|
185
214
|
.thrifty-paper .border-red-200 {
|
|
186
|
-
border-color: rgba(
|
|
215
|
+
border-color: rgba(
|
|
216
|
+
185,
|
|
217
|
+
28,
|
|
218
|
+
28,
|
|
219
|
+
0.7
|
|
220
|
+
); /* danger/70: an invalid field's edge, 3.62:1 on danger-soft (danger/30 was 1.67:1) */
|
|
187
221
|
}
|
|
188
222
|
.thrifty-paper .border-blue-200,
|
|
189
223
|
.thrifty-paper .border-blue-300 {
|
|
190
224
|
border-color: rgba(15, 118, 110, 0.3); /* note */
|
|
191
225
|
}
|
|
192
226
|
|
|
193
|
-
/* Inline links — the clay accent.
|
|
227
|
+
/* Inline links — the clay accent. Alias of @hackcove/ui's TextLink (text-violet-600,
|
|
228
|
+
hover:text-violet-700, remapped above), kept for consumers that still write class="link" on a
|
|
229
|
+
bare <a>. */
|
|
194
230
|
.thrifty-paper .link {
|
|
195
231
|
color: #c2410c; /* accent */
|
|
196
232
|
font-weight: 500;
|