@gjermundgaraba/gg-theme 0.2.0 → 0.3.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.
Files changed (6) hide show
  1. package/README.md +2 -1
  2. package/index.css +5 -1
  3. package/package.json +1 -1
  4. package/primitives.css +84 -12
  5. package/tailwind.css +2 -0
  6. package/tokens.json +79 -13
package/README.md CHANGED
@@ -52,6 +52,7 @@ shadcn components reference tokens by their bare names (`--background`, `--prima
52
52
  | `border` | Default 1px borders. |
53
53
  | `input` | Form-control borders, slightly stronger than `border`. |
54
54
  | `ring` | Focus ring. |
55
+ | `link` / `link-visited` | The accent as running text: the soft tier, and the quiet tier for visited. Both pass 4.5:1 on `background` and `card`. |
55
56
  | `selection` / `selection-foreground` | Text selection. |
56
57
  | `chart-1` … `chart-5` | Qualitative data viz palette. |
57
58
  | `radius` | Base corner radius (Tailwind derives `radius-sm/md/lg/xl`). |
@@ -62,7 +63,7 @@ shadcn components reference tokens by their bare names (`--background`, `--prima
62
63
  | --- | --- |
63
64
  | `@gjermundgaraba/gg-theme` | `index.css`, base CSS variables (`:root` + `.dark`). |
64
65
  | `@gjermundgaraba/gg-theme/tailwind` | `tailwind.css`, Tailwind v4 `@theme inline` mapping. |
65
- | `@gjermundgaraba/gg-theme/primitives` | `primitives.css`, the un-roled palette as `--gg-*` OKLCH custom properties for downstream layers. |
66
+ | `@gjermundgaraba/gg-theme/primitives` | `primitives.css`, the un-roled palette as `--gg-*` OKLCH custom properties for downstream layers, followed by the tiers derived from each hue: `--gg-soft-*` (text), `--gg-quiet-*` (borders, receding text), `--gg-wash-*` (row backgrounds) and `--gg-tint-*` (highlight backgrounds), plus `--gg-link` and `--gg-link-visited`. |
66
67
  | `@gjermundgaraba/gg-theme/tokens` | `tokens.json`, slot and palette values as hex for tooling and JS. |
67
68
 
68
69
  ## Notes
package/index.css CHANGED
@@ -19,13 +19,15 @@
19
19
  --destructive-foreground: #e7e9e4;
20
20
  --success: #266023;
21
21
  --success-foreground: #e7e9e4;
22
- --warning: #95512c;
22
+ --warning: #904d28;
23
23
  --warning-foreground: #e7e9e4;
24
24
  --info: #2b6369;
25
25
  --info-foreground: #e7e9e4;
26
26
  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
27
27
  --input: color-mix(in oklab, var(--foreground) 18%, transparent);
28
28
  --ring: #7a5a00;
29
+ --link: #735b28;
30
+ --link-visited: #54472c;
29
31
  --selection: #d6bcc6;
30
32
  --selection-foreground: #0f130e;
31
33
  --chart-1: #0052c8;
@@ -64,6 +66,8 @@
64
66
  --border: color-mix(in oklab, var(--foreground) 14%, transparent);
65
67
  --input: color-mix(in oklab, var(--foreground) 22%, transparent);
66
68
  --ring: #ffd60a;
69
+ --link: #d4bd68;
70
+ --link-visited: #b1a576;
67
71
  --selection: #643c4c;
68
72
  --selection-foreground: #e2e6e0;
69
73
  --chart-1: #009aff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gjermundgaraba/gg-theme",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Coordinated light and dark CSS variables for web apps. Tailwind v4 and shadcn/ui compatible.",
5
5
  "type": "module",
6
6
  "main": "./index.css",
package/primitives.css CHANGED
@@ -1,6 +1,8 @@
1
1
  /* gg-theme primitives — generated from theme/palette.ts. Do not edit.
2
2
  The un-roled palette, for layers that map it to their own vocabulary
3
- instead of consuming the shadcn slots in index.css. */
3
+ instead of consuming the shadcn slots in index.css. After the palette
4
+ come the tiers derived from it: soft (text), quiet (receding), wash and
5
+ tint (backgrounds). */
4
6
 
5
7
  :root {
6
8
  --gg-accent: oklch(0.4877 0.1000 84.43);
@@ -15,11 +17,6 @@
15
17
  --gg-cursor-text: oklch(0.9311 0.0070 124.45);
16
18
  --gg-selection-bg: oklch(0.8202 0.0324 352.61);
17
19
  --gg-selection-fg: oklch(0.1804 0.0119 139.43);
18
- --gg-diff-add-bg: oklch(0.8939 0.0382 142.83);
19
- --gg-diff-delete-bg: oklch(0.8935 0.0349 11.19);
20
- --gg-diff-change-bg: oklch(0.8882 0.0343 253.72);
21
- --gg-search-bg: oklch(0.8764 0.0628 96.44);
22
- --gg-visual-bg: oklch(0.8371 0.0424 133.01);
23
20
  --gg-red: oklch(0.4512 0.1803 13.89);
24
21
  --gg-green: oklch(0.4360 0.1484 142.50);
25
22
  --gg-yellow: oklch(0.4556 0.0933 85.70);
@@ -27,6 +24,46 @@
27
24
  --gg-magenta: oklch(0.4303 0.1898 324.97);
28
25
  --gg-cyan: oklch(0.4653 0.0794 204.22);
29
26
  --gg-orange: oklch(0.5104 0.1391 47.95);
27
+ --gg-wash: oklch(0.9085 0.0099 125.69);
28
+ --gg-wash-accent: oklch(0.9091 0.0300 85.57);
29
+ --gg-tint-accent: oklch(0.9076 0.0401 84.58);
30
+ --gg-wash-red: oklch(0.9081 0.0301 12.61);
31
+ --gg-tint-red: oklch(0.9090 0.0392 13.99);
32
+ --gg-wash-green: oklch(0.9080 0.0296 142.17);
33
+ --gg-tint-green: oklch(0.9082 0.0398 142.93);
34
+ --gg-wash-yellow: oklch(0.9091 0.0300 85.57);
35
+ --gg-tint-yellow: oklch(0.9096 0.0409 86.73);
36
+ --gg-wash-blue: oklch(0.9088 0.0295 257.77);
37
+ --gg-tint-blue: oklch(0.9089 0.0396 260.15);
38
+ --gg-wash-magenta: oklch(0.9082 0.0310 325.83);
39
+ --gg-tint-magenta: oklch(0.9081 0.0406 324.64);
40
+ --gg-wash-cyan: oklch(0.9085 0.0298 204.49);
41
+ --gg-tint-cyan: oklch(0.9082 0.0399 204.30);
42
+ --gg-wash-orange: oklch(0.9081 0.0306 46.24);
43
+ --gg-tint-orange: oklch(0.9090 0.0398 49.88);
44
+ --gg-soft-accent: oklch(0.4845 0.0753 83.97);
45
+ --gg-quiet-accent: oklch(0.4041 0.0448 84.80);
46
+ --gg-soft-red: oklch(0.4510 0.1353 14.07);
47
+ --gg-quiet-red: oklch(0.3722 0.0811 14.09);
48
+ --gg-soft-green: oklch(0.4356 0.1110 142.57);
49
+ --gg-quiet-green: oklch(0.3566 0.0666 142.75);
50
+ --gg-soft-yellow: oklch(0.4558 0.0697 86.28);
51
+ --gg-quiet-yellow: oklch(0.3761 0.0417 86.68);
52
+ --gg-soft-blue: oklch(0.4780 0.1467 260.08);
53
+ --gg-quiet-blue: oklch(0.3971 0.0884 260.53);
54
+ --gg-soft-magenta: oklch(0.4315 0.1421 325.05);
55
+ --gg-quiet-magenta: oklch(0.3515 0.0861 325.46);
56
+ --gg-soft-cyan: oklch(0.4648 0.0592 204.79);
57
+ --gg-quiet-cyan: oklch(0.3838 0.0351 204.13);
58
+ --gg-soft-orange: oklch(0.4941 0.1034 47.74);
59
+ --gg-quiet-orange: oklch(0.4145 0.0617 48.23);
60
+ --gg-link: oklch(0.4845 0.0753 83.97);
61
+ --gg-link-visited: oklch(0.4041 0.0448 84.80);
62
+ --gg-diff-add-bg: var(--gg-tint-green);
63
+ --gg-diff-delete-bg: var(--gg-tint-red);
64
+ --gg-diff-change-bg: var(--gg-tint-blue);
65
+ --gg-search-bg: var(--gg-tint-yellow);
66
+ --gg-visual-bg: var(--gg-selection-bg);
30
67
 
31
68
  color-scheme: light;
32
69
  }
@@ -39,16 +76,11 @@
39
76
  --gg-fg: oklch(0.9202 0.0091 134.88);
40
77
  --gg-terminal-fg: oklch(0.8351 0.0128 137.79);
41
78
  --gg-ansi-white: oklch(0.7458 0.0149 138.72);
42
- --gg-fg-dim: oklch(0.6410 0.0180 133.89);
79
+ --gg-fg-dim: oklch(0.7217 0.0193 134.96);
43
80
  --gg-cursor: oklch(0.9202 0.0091 134.88);
44
81
  --gg-cursor-text: oklch(0.2819 0.0061 134.94);
45
82
  --gg-selection-bg: oklch(0.4091 0.0605 354.55);
46
83
  --gg-selection-fg: oklch(0.9202 0.0091 134.88);
47
- --gg-diff-add-bg: oklch(0.3257 0.0662 145.10);
48
- --gg-diff-delete-bg: oklch(0.3256 0.0646 12.54);
49
- --gg-diff-change-bg: oklch(0.3253 0.0651 249.82);
50
- --gg-search-bg: oklch(0.3556 0.0727 91.36);
51
- --gg-visual-bg: oklch(0.4094 0.0543 135.59);
52
84
  --gg-red: oklch(0.7387 0.1641 10.32);
53
85
  --gg-green: oklch(0.7207 0.1801 145.03);
54
86
  --gg-yellow: oklch(0.8610 0.1602 92.00);
@@ -56,6 +88,46 @@
56
88
  --gg-magenta: oklch(0.7591 0.1745 324.99);
57
89
  --gg-cyan: oklch(0.7575 0.1291 196.05);
58
90
  --gg-orange: oklch(0.7349 0.1846 53.83);
91
+ --gg-wash: oklch(0.3167 0.0081 137.81);
92
+ --gg-wash-accent: oklch(0.3170 0.0306 94.44);
93
+ --gg-tint-accent: oklch(0.3171 0.0650 94.01);
94
+ --gg-wash-red: oklch(0.3174 0.0298 12.25);
95
+ --gg-tint-red: oklch(0.3169 0.0636 10.89);
96
+ --gg-wash-green: oklch(0.3167 0.0287 144.86);
97
+ --gg-tint-green: oklch(0.3150 0.0645 145.12);
98
+ --gg-wash-yellow: oklch(0.3170 0.0306 94.44);
99
+ --gg-tint-yellow: oklch(0.3158 0.0646 91.06);
100
+ --gg-wash-blue: oklch(0.3156 0.0307 250.68);
101
+ --gg-tint-blue: oklch(0.3163 0.0647 248.01);
102
+ --gg-wash-magenta: oklch(0.3174 0.0303 323.95);
103
+ --gg-tint-magenta: oklch(0.3171 0.0636 324.57);
104
+ --gg-wash-cyan: oklch(0.3172 0.0300 195.75);
105
+ --gg-tint-cyan: oklch(0.3229 0.0550 196.63);
106
+ --gg-wash-orange: oklch(0.3165 0.0292 53.38);
107
+ --gg-tint-orange: oklch(0.3175 0.0646 54.23);
108
+ --gg-soft-accent: oklch(0.8001 0.1087 94.60);
109
+ --gg-quiet-accent: oklch(0.7206 0.0651 95.51);
110
+ --gg-soft-red: oklch(0.7390 0.0991 10.12);
111
+ --gg-quiet-red: oklch(0.6587 0.0597 10.51);
112
+ --gg-soft-green: oklch(0.7208 0.1087 145.07);
113
+ --gg-quiet-green: oklch(0.6403 0.0646 144.77);
114
+ --gg-soft-yellow: oklch(0.7998 0.0956 91.63);
115
+ --gg-quiet-yellow: oklch(0.7197 0.0568 92.20);
116
+ --gg-soft-blue: oklch(0.7166 0.1096 248.45);
117
+ --gg-quiet-blue: oklch(0.6372 0.0658 248.90);
118
+ --gg-soft-magenta: oklch(0.7601 0.1046 324.88);
119
+ --gg-quiet-magenta: oklch(0.6798 0.0637 325.34);
120
+ --gg-soft-cyan: oklch(0.7577 0.0772 195.65);
121
+ --gg-quiet-cyan: oklch(0.6779 0.0465 196.11);
122
+ --gg-soft-orange: oklch(0.7346 0.1113 53.31);
123
+ --gg-quiet-orange: oklch(0.6546 0.0662 54.32);
124
+ --gg-link: oklch(0.8001 0.1087 94.60);
125
+ --gg-link-visited: oklch(0.7206 0.0651 95.51);
126
+ --gg-diff-add-bg: var(--gg-tint-green);
127
+ --gg-diff-delete-bg: var(--gg-tint-red);
128
+ --gg-diff-change-bg: var(--gg-tint-blue);
129
+ --gg-search-bg: var(--gg-tint-yellow);
130
+ --gg-visual-bg: var(--gg-selection-bg);
59
131
 
60
132
  color-scheme: dark;
61
133
  }
package/tailwind.css CHANGED
@@ -28,6 +28,8 @@
28
28
  --color-border: var(--border);
29
29
  --color-input: var(--input);
30
30
  --color-ring: var(--ring);
31
+ --color-link: var(--link);
32
+ --color-link-visited: var(--link-visited);
31
33
  --color-chart-1: var(--chart-1);
32
34
  --color-chart-2: var(--chart-2);
33
35
  --color-chart-3: var(--chart-3);
package/tokens.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gg-theme",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "modes": {
5
5
  "light": {
6
6
  "background": "#e7e9e4",
@@ -21,11 +21,13 @@
21
21
  "destructive-foreground": "#e7e9e4",
22
22
  "success": "#266023",
23
23
  "success-foreground": "#e7e9e4",
24
- "warning": "#95512c",
24
+ "warning": "#904d28",
25
25
  "warning-foreground": "#e7e9e4",
26
26
  "info": "#2b6369",
27
27
  "info-foreground": "#e7e9e4",
28
28
  "ring": "#7a5a00",
29
+ "link": "#735b28",
30
+ "link-visited": "#54472c",
29
31
  "selection": "#d6bcc6",
30
32
  "selection-foreground": "#0f130e",
31
33
  "chart-1": "#0052c8",
@@ -58,6 +60,8 @@
58
60
  "info": "#72c0c0",
59
61
  "info-foreground": "#282a27",
60
62
  "ring": "#ffd60a",
63
+ "link": "#d4bd68",
64
+ "link-visited": "#b1a576",
61
65
  "selection": "#643c4c",
62
66
  "selection-foreground": "#e2e6e0",
63
67
  "chart-1": "#009aff",
@@ -81,11 +85,6 @@
81
85
  "cursor-text": "#e7e9e4",
82
86
  "selection-bg": "#d6bcc6",
83
87
  "selection-fg": "#0f130e",
84
- "diff-add-bg": "#cee3cc",
85
- "diff-delete-bg": "#f2d3d6",
86
- "diff-change-bg": "#cbdcf1",
87
- "search-bg": "#e2d7a8",
88
- "visual-bg": "#bfd0b4",
89
88
  "red": "#a10036",
90
89
  "green": "#006400",
91
90
  "yellow": "#6e5200",
@@ -102,16 +101,11 @@
102
101
  "fg": "#e2e6e0",
103
102
  "terminal-fg": "#c5cbc3",
104
103
  "ansi-white": "#a8afa6",
105
- "fg-dim": "#888f84",
104
+ "fg-dim": "#a0a89c",
106
105
  "cursor": "#e2e6e0",
107
106
  "cursor-text": "#282a27",
108
107
  "selection-bg": "#643c4c",
109
108
  "selection-fg": "#e2e6e0",
110
- "diff-add-bg": "#1c3d1e",
111
- "diff-delete-bg": "#50252b",
112
- "diff-change-bg": "#173654",
113
- "search-bg": "#4a3a00",
114
- "visual-bg": "#3d5133",
115
109
  "red": "#ff7992",
116
110
  "green": "#4cc157",
117
111
  "yellow": "#f7cd3a",
@@ -121,5 +115,77 @@
121
115
  "orange": "#ff8200"
122
116
  }
123
117
  },
118
+ "tiers": {
119
+ "light": {
120
+ "wash": "#dfe2db",
121
+ "wash-accent": "#eae0cb",
122
+ "tint-accent": "#eddfc3",
123
+ "wash-red": "#f4d9db",
124
+ "tint-red": "#fad7d9",
125
+ "wash-green": "#d6e6d4",
126
+ "tint-green": "#d2e8d0",
127
+ "wash-yellow": "#eae0cb",
128
+ "tint-yellow": "#ede0c3",
129
+ "wash-blue": "#d5e2f5",
130
+ "tint-blue": "#d2e2fc",
131
+ "wash-magenta": "#ecdaec",
132
+ "tint-magenta": "#efd8f0",
133
+ "wash-cyan": "#cbe7ea",
134
+ "tint-cyan": "#c3e9ed",
135
+ "wash-orange": "#f3dbd0",
136
+ "tint-orange": "#f8daca",
137
+ "soft-accent": "#735b28",
138
+ "quiet-accent": "#54472c",
139
+ "soft-red": "#912c3e",
140
+ "quiet-red": "#642c33",
141
+ "soft-green": "#266023",
142
+ "quiet-green": "#264524",
143
+ "soft-yellow": "#685425",
144
+ "quiet-yellow": "#4b4027",
145
+ "soft-blue": "#2659ae",
146
+ "quiet-blue": "#2a4676",
147
+ "soft-magenta": "#752d7a",
148
+ "quiet-magenta": "#512953",
149
+ "soft-cyan": "#2b6369",
150
+ "quiet-cyan": "#2c494c",
151
+ "soft-orange": "#904d28",
152
+ "quiet-orange": "#67412d"
153
+ },
154
+ "dark": {
155
+ "wash": "#30332f",
156
+ "wash-accent": "#373220",
157
+ "tint-accent": "#3d3100",
158
+ "wash-red": "#402c2e",
159
+ "tint-red": "#4d232a",
160
+ "wash-green": "#293629",
161
+ "tint-green": "#1a3a1c",
162
+ "wash-yellow": "#373220",
163
+ "tint-yellow": "#3e3000",
164
+ "wash-blue": "#263341",
165
+ "tint-blue": "#133451",
166
+ "wash-magenta": "#3a2d3b",
167
+ "tint-magenta": "#422644",
168
+ "wash-cyan": "#1f3737",
169
+ "tint-cyan": "#003c3d",
170
+ "wash-orange": "#3e2e24",
171
+ "tint-orange": "#4b280e",
172
+ "soft-accent": "#d4bd68",
173
+ "quiet-accent": "#b1a576",
174
+ "soft-red": "#e1909c",
175
+ "quiet-red": "#b38389",
176
+ "soft-green": "#78b77a",
177
+ "quiet-green": "#749774",
178
+ "soft-yellow": "#d4bc74",
179
+ "quiet-yellow": "#b1a47c",
180
+ "soft-blue": "#6aa9e5",
181
+ "quiet-blue": "#6c8fb2",
182
+ "soft-magenta": "#d39ad6",
183
+ "quiet-magenta": "#ad8bae",
184
+ "soft-cyan": "#72c0c0",
185
+ "quiet-cyan": "#76a1a1",
186
+ "soft-orange": "#e09564",
187
+ "quiet-orange": "#b1866a"
188
+ }
189
+ },
124
190
  "radius": "0.5rem"
125
191
  }