@gjermundgaraba/gg-theme 0.1.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 +9 -4
  2. package/index.css +65 -88
  3. package/package.json +3 -2
  4. package/primitives.css +123 -93
  5. package/tailwind.css +3 -13
  6. package/tokens.json +181 -61
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # gg-theme
2
2
 
3
- Coordinated light and dark CSS variables for web apps. Generated from a single OKLCH palette so light and dark stay perceptually balanced. Compatible with Tailwind CSS v4, shadcn/ui, and any tool that reads CSS custom properties.
3
+ Coordinated light and dark CSS variables for web apps. Generated from the same palette as my terminal, Neovim, and agent themes, so everything matches. Compatible with Tailwind CSS v4, shadcn/ui, and any tool that reads CSS custom properties.
4
4
 
5
5
  ## Install
6
6
 
@@ -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,9 +63,13 @@ 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`, un-roled OKLCH custom properties for downstream layers. |
66
- | `@gjermundgaraba/gg-theme/tokens` | `tokens.json`, raw token values for tooling. |
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`. |
67
+ | `@gjermundgaraba/gg-theme/tokens` | `tokens.json`, slot and palette values as hex for tooling and JS. |
67
68
 
68
69
  ## Notes
69
70
 
70
- Colors are generated in OKLCH with a fixed surface and accent hue. Borders use `color-mix` against `--foreground`, so they self-tune in both modes. Status foregrounds are pre-paired and meet WCAG AA against their surface.
71
+ Every foreground is pre-paired with its surface and checked at build time: text pairs meet WCAG AA (4.5:1), and the focus ring clears 3:1 on both `background` and `card`. Status fills keep the palette's lightness and hue at reduced chroma, so large fills do not glare. Borders use `color-mix` against `--foreground`, so they self-tune in both modes.
72
+
73
+ ## Development
74
+
75
+ The CSS and JSON files are generated. Edit `theme/palette.ts` in the [source repository](https://github.com/gjermundgaraba/.dotfiles), run `node theme/build.ts`, bump `version` here, and `npm publish` from this directory.
package/index.css CHANGED
@@ -1,103 +1,80 @@
1
- /* gg-theme — generated. Do not edit. */
1
+ /* gg-theme — generated from theme/palette.ts. Do not edit. */
2
2
 
3
3
  :root {
4
- --background: #d2dad2;
5
- --foreground: #0e130f;
6
-
7
- --card: #c3cec4;
8
- --card-foreground: #0e130f;
9
-
10
- --popover: #c3cec4;
11
- --popover-foreground: #0e130f;
12
-
13
- --primary: #ae004d;
14
- --primary-foreground: #f6faf6;
15
-
16
- --secondary: #c3cec4;
17
- --secondary-foreground: #0e130f;
18
-
19
- --muted: #c3cec4;
20
- --muted-foreground: #3c453c;
21
-
22
- --accent: #c3cec4;
23
- --accent-foreground: #0e130f;
24
-
25
- --destructive: #a0003e;
26
- --destructive-foreground: #f6faf6;
27
-
28
- --success: #006c00;
29
- --success-foreground: #f6faf6;
30
-
31
- --warning: #952800;
32
- --warning-foreground: #f6faf6;
33
-
34
- --info: #006f6a;
35
- --info-foreground: #f6faf6;
36
-
4
+ --background: #e7e9e4;
5
+ --foreground: #0f130e;
6
+ --card: #d6dad2;
7
+ --card-foreground: #0f130e;
8
+ --popover: #d6dad2;
9
+ --popover-foreground: #0f130e;
10
+ --primary: #7a5a00;
11
+ --primary-foreground: #e7e9e4;
12
+ --secondary: #d6dad2;
13
+ --secondary-foreground: #0f130e;
14
+ --muted: #d6dad2;
15
+ --muted-foreground: #3a3f37;
16
+ --accent: #d6dad2;
17
+ --accent-foreground: #0f130e;
18
+ --destructive: #912c3e;
19
+ --destructive-foreground: #e7e9e4;
20
+ --success: #266023;
21
+ --success-foreground: #e7e9e4;
22
+ --warning: #904d28;
23
+ --warning-foreground: #e7e9e4;
24
+ --info: #2b6369;
25
+ --info-foreground: #e7e9e4;
37
26
  --border: color-mix(in oklab, var(--foreground) 12%, transparent);
38
27
  --input: color-mix(in oklab, var(--foreground) 18%, transparent);
39
- --ring: #960049;
40
-
41
- --selection: #9cb69e;
42
- --selection-foreground: #0e130f;
43
-
44
- --chart-1: #004ab9;
45
- --chart-2: #006c00;
46
- --chart-3: #952800;
47
- --chart-4: #83108b;
48
- --chart-5: #006f6a;
49
-
28
+ --ring: #7a5a00;
29
+ --link: #735b28;
30
+ --link-visited: #54472c;
31
+ --selection: #d6bcc6;
32
+ --selection-foreground: #0f130e;
33
+ --chart-1: #0052c8;
34
+ --chart-2: #006400;
35
+ --chart-3: #a34700;
36
+ --chart-4: #7f1087;
37
+ --chart-5: #00666e;
50
38
  --radius: 0.5rem;
51
39
 
52
40
  color-scheme: light;
53
41
  }
54
42
 
55
43
  .dark {
56
- --background: #1e2a1f;
57
- --foreground: #e1e6e1;
58
-
59
- --card: #2f3e30;
60
- --card-foreground: #e1e6e1;
61
-
62
- --popover: #2f3e30;
63
- --popover-foreground: #e1e6e1;
64
-
65
- --primary: #b40055;
66
- --primary-foreground: #f8fbf8;
67
-
68
- --secondary: #2f3e30;
69
- --secondary-foreground: #e1e6e1;
70
-
71
- --muted: #2f3e30;
72
- --muted-foreground: #829183;
73
-
74
- --accent: #2f3e30;
75
- --accent-foreground: #e1e6e1;
76
-
77
- --destructive: #ff6f79;
78
- --destructive-foreground: #0b110b;
79
-
80
- --success: #17d365;
81
- --success-foreground: #0b110b;
82
-
83
- --warning: #ff7c23;
84
- --warning-foreground: #0b110b;
85
-
86
- --info: #00d7ce;
87
- --info-foreground: #0b110b;
88
-
44
+ --background: #282a27;
45
+ --foreground: #e2e6e0;
46
+ --card: #383c36;
47
+ --card-foreground: #e2e6e0;
48
+ --popover: #383c36;
49
+ --popover-foreground: #e2e6e0;
50
+ --primary: #ffd60a;
51
+ --primary-foreground: #282a27;
52
+ --secondary: #383c36;
53
+ --secondary-foreground: #e2e6e0;
54
+ --muted: #383c36;
55
+ --muted-foreground: #a0a89c;
56
+ --accent: #383c36;
57
+ --accent-foreground: #e2e6e0;
58
+ --destructive: #e1909c;
59
+ --destructive-foreground: #282a27;
60
+ --success: #78b77a;
61
+ --success-foreground: #282a27;
62
+ --warning: #e09564;
63
+ --warning-foreground: #282a27;
64
+ --info: #72c0c0;
65
+ --info-foreground: #282a27;
89
66
  --border: color-mix(in oklab, var(--foreground) 14%, transparent);
90
67
  --input: color-mix(in oklab, var(--foreground) 22%, transparent);
91
- --ring: #ff69ab;
92
-
93
- --selection: #345137;
94
- --selection-foreground: #e1e6e1;
95
-
96
- --chart-1: #47b1ff;
97
- --chart-2: #17d365;
98
- --chart-3: #ff7c23;
99
- --chart-4: #f07cf7;
100
- --chart-5: #00d7ce;
68
+ --ring: #ffd60a;
69
+ --link: #d4bd68;
70
+ --link-visited: #b1a576;
71
+ --selection: #643c4c;
72
+ --selection-foreground: #e2e6e0;
73
+ --chart-1: #009aff;
74
+ --chart-2: #4cc157;
75
+ --chart-3: #ff8200;
76
+ --chart-4: #e786ed;
77
+ --chart-5: #00c9cb;
101
78
 
102
79
  color-scheme: dark;
103
80
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gjermundgaraba/gg-theme",
3
- "version": "0.1.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",
@@ -36,7 +36,8 @@
36
36
  "license": "MIT",
37
37
  "repository": {
38
38
  "type": "git",
39
- "url": "git+https://github.com/gjermundgaraba/theme.git"
39
+ "url": "git+https://github.com/gjermundgaraba/.dotfiles.git",
40
+ "directory": "theme/web"
40
41
  },
41
42
  "author": "Gjermund Garaba"
42
43
  }
package/primitives.css CHANGED
@@ -1,103 +1,133 @@
1
- /* gg-theme primitives — generated. Do not edit.
2
- Un-roled OKLCH custom properties for downstream layers that need to map
3
- the palette to their own semantic vocabulary instead of consuming the
4
- shadcn slot mapping in index.css. Same values as the shadcn output; OKLCH
5
- form is required so consumers can derive variants via color-mix and L/C
6
- math. */
1
+ /* gg-theme primitives — generated from theme/palette.ts. Do not edit.
2
+ The un-roled palette, for layers that map it to their own vocabulary
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). */
7
6
 
8
7
  :root {
9
- --gg-hue-surface: 147;
10
- --gg-hue-accent: 2;
11
-
12
- --gg-bg: oklch(0.88 0.014 146);
13
- --gg-surface: oklch(0.84 0.018 148);
14
- --gg-overlay: oklch(0.43 0.025 147);
15
- --gg-fg: oklch(0.18 0.011 151);
16
- --gg-fg-dim: oklch(0.38 0.019 145);
17
-
18
- --gg-cursor: oklch(0.18 0.011 151);
19
- --gg-cursor-text: oklch(0.88 0.014 146);
20
-
21
- --gg-selection-bg: oklch(0.75 0.044 147);
22
- --gg-selection-fg: oklch(0.18 0.011 151);
23
-
24
- --gg-accent: oklch(0.43 0.175 2);
25
- --gg-button-bg: oklch(0.48 0.193 6);
26
- --gg-button-fg: oklch(0.98 0.007 146);
27
- --gg-debug-fg: oklch(0.98 0.007 146);
28
-
29
- --gg-diff-add-bg: oklch(0.85 0.041 150);
30
- --gg-diff-delete-bg: oklch(0.85 0.039 8);
31
- --gg-diff-change-bg: oklch(0.85 0.039 254);
32
- --gg-search-bg: oklch(0.83 0.056 96);
33
- --gg-visual-bg: oklch(0.75 0.044 147);
34
-
35
- --gg-black: oklch(0.10 0.012 145);
36
- --gg-red: oklch(0.45 0.180 10);
37
- --gg-green: oklch(0.46 0.157 143);
38
- --gg-yellow: oklch(0.45 0.096 72);
39
- --gg-blue: oklch(0.45 0.187 260);
40
- --gg-magenta: oklch(0.44 0.194 325);
41
- --gg-cyan: oklch(0.49 0.085 189);
42
- --gg-white: oklch(0.95 0.005 147);
43
- --gg-orange: oklch(0.45 0.151 37);
44
-
45
- --gg-bright-black: oklch(0.38 0.019 145);
46
- --gg-bright-red: oklch(0.40 0.161 17);
47
- --gg-bright-green: oklch(0.39 0.134 143);
48
- --gg-bright-yellow: oklch(0.37 0.089 57);
49
- --gg-bright-blue: oklch(0.37 0.203 264);
50
- --gg-bright-magenta: oklch(0.38 0.181 324);
51
- --gg-bright-cyan: oklch(0.42 0.071 192);
52
- --gg-bright-white: oklch(0.98 0.005 147);
8
+ --gg-accent: oklch(0.4877 0.1000 84.43);
9
+ --gg-bg: oklch(0.9311 0.0070 124.45);
10
+ --gg-surface: oklch(0.8830 0.0116 128.61);
11
+ --gg-overlay: oklch(0.5010 0.0178 136.15);
12
+ --gg-fg: oklch(0.1804 0.0119 139.43);
13
+ --gg-terminal-fg: oklch(0.1804 0.0119 139.43);
14
+ --gg-ansi-white: oklch(0.4690 0.0181 136.17);
15
+ --gg-fg-dim: oklch(0.3602 0.0151 133.58);
16
+ --gg-cursor: oklch(0.1804 0.0119 139.43);
17
+ --gg-cursor-text: oklch(0.9311 0.0070 124.45);
18
+ --gg-selection-bg: oklch(0.8202 0.0324 352.61);
19
+ --gg-selection-fg: oklch(0.1804 0.0119 139.43);
20
+ --gg-red: oklch(0.4512 0.1803 13.89);
21
+ --gg-green: oklch(0.4360 0.1484 142.50);
22
+ --gg-yellow: oklch(0.4556 0.0933 85.70);
23
+ --gg-blue: oklch(0.4766 0.1961 260.16);
24
+ --gg-magenta: oklch(0.4303 0.1898 324.97);
25
+ --gg-cyan: oklch(0.4653 0.0794 204.22);
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);
53
67
 
54
68
  color-scheme: light;
55
69
  }
56
70
 
57
71
  .dark {
58
- --gg-hue-accent: 356;
59
-
60
- --gg-bg: oklch(0.27 0.026 147);
61
- --gg-surface: oklch(0.35 0.031 147);
62
- --gg-overlay: oklch(0.55 0.039 146);
63
- --gg-fg: oklch(0.92 0.009 146);
64
- --gg-fg-dim: oklch(0.64 0.027 147);
65
-
66
- --gg-cursor: oklch(0.92 0.009 146);
67
- --gg-cursor-text: oklch(0.27 0.026 147);
68
-
69
- --gg-selection-bg: oklch(0.40 0.055 147);
70
- --gg-selection-fg: oklch(0.92 0.009 146);
71
-
72
- --gg-accent: oklch(0.73 0.193 356);
73
- --gg-button-bg: oklch(0.50 0.200 4);
74
- --gg-button-fg: oklch(0.98 0.005 147);
75
- --gg-debug-fg: oklch(0.17 0.015 145);
76
-
77
- --gg-diff-add-bg: oklch(0.32 0.066 150);
78
- --gg-diff-delete-bg: oklch(0.32 0.065 20);
79
- --gg-diff-change-bg: oklch(0.31 0.066 255);
80
- --gg-search-bg: oklch(0.35 0.071 89);
81
- --gg-visual-bg: oklch(0.40 0.055 147);
82
-
83
- --gg-black: oklch(0.15 0.016 150);
84
- --gg-red: oklch(0.72 0.176 18);
85
- --gg-green: oklch(0.76 0.204 150);
86
- --gg-yellow: oklch(0.76 0.157 83);
87
- --gg-blue: oklch(0.73 0.149 244);
88
- --gg-magenta: oklch(0.76 0.205 325);
89
- --gg-cyan: oklch(0.79 0.137 189);
90
- --gg-white: oklch(0.96 0.007 146);
91
- --gg-orange: oklch(0.73 0.184 49);
92
-
93
- --gg-bright-black: oklch(0.64 0.027 147);
94
- --gg-bright-red: oklch(0.75 0.154 17);
95
- --gg-bright-green: oklch(0.83 0.220 150);
96
- --gg-bright-yellow: oklch(0.83 0.171 83);
97
- --gg-bright-blue: oklch(0.79 0.130 233);
98
- --gg-bright-magenta: oklch(0.80 0.194 327);
99
- --gg-bright-cyan: oklch(0.86 0.150 189);
100
- --gg-bright-white: oklch(0.98 0.005 147);
72
+ --gg-accent: oklch(0.8849 0.1805 94.78);
73
+ --gg-bg: oklch(0.2819 0.0061 134.94);
74
+ --gg-surface: oklch(0.3503 0.0115 134.99);
75
+ --gg-overlay: oklch(0.5804 0.0185 133.92);
76
+ --gg-fg: oklch(0.9202 0.0091 134.88);
77
+ --gg-terminal-fg: oklch(0.8351 0.0128 137.79);
78
+ --gg-ansi-white: oklch(0.7458 0.0149 138.72);
79
+ --gg-fg-dim: oklch(0.7217 0.0193 134.96);
80
+ --gg-cursor: oklch(0.9202 0.0091 134.88);
81
+ --gg-cursor-text: oklch(0.2819 0.0061 134.94);
82
+ --gg-selection-bg: oklch(0.4091 0.0605 354.55);
83
+ --gg-selection-fg: oklch(0.9202 0.0091 134.88);
84
+ --gg-red: oklch(0.7387 0.1641 10.32);
85
+ --gg-green: oklch(0.7207 0.1801 145.03);
86
+ --gg-yellow: oklch(0.8610 0.1602 92.00);
87
+ --gg-blue: oklch(0.6713 0.1827 248.45);
88
+ --gg-magenta: oklch(0.7591 0.1745 324.99);
89
+ --gg-cyan: oklch(0.7575 0.1291 196.05);
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);
101
131
 
102
132
  color-scheme: dark;
103
133
  }
package/tailwind.css CHANGED
@@ -1,45 +1,35 @@
1
- /* gg-theme — Tailwind v4 entry. Generated. Do not edit. */
1
+ /* gg-theme — Tailwind v4 entry. Generated from theme/palette.ts. Do not edit. */
2
2
 
3
3
  @import "./index.css";
4
4
 
5
5
  @theme inline {
6
6
  --color-background: var(--background);
7
7
  --color-foreground: var(--foreground);
8
-
9
8
  --color-card: var(--card);
10
9
  --color-card-foreground: var(--card-foreground);
11
-
12
10
  --color-popover: var(--popover);
13
11
  --color-popover-foreground: var(--popover-foreground);
14
-
15
12
  --color-primary: var(--primary);
16
13
  --color-primary-foreground: var(--primary-foreground);
17
-
18
14
  --color-secondary: var(--secondary);
19
15
  --color-secondary-foreground: var(--secondary-foreground);
20
-
21
16
  --color-muted: var(--muted);
22
17
  --color-muted-foreground: var(--muted-foreground);
23
-
24
18
  --color-accent: var(--accent);
25
19
  --color-accent-foreground: var(--accent-foreground);
26
-
27
20
  --color-destructive: var(--destructive);
28
21
  --color-destructive-foreground: var(--destructive-foreground);
29
-
30
22
  --color-success: var(--success);
31
23
  --color-success-foreground: var(--success-foreground);
32
-
33
24
  --color-warning: var(--warning);
34
25
  --color-warning-foreground: var(--warning-foreground);
35
-
36
26
  --color-info: var(--info);
37
27
  --color-info-foreground: var(--info-foreground);
38
-
39
28
  --color-border: var(--border);
40
29
  --color-input: var(--input);
41
30
  --color-ring: var(--ring);
42
-
31
+ --color-link: var(--link);
32
+ --color-link-visited: var(--link-visited);
43
33
  --color-chart-1: var(--chart-1);
44
34
  --color-chart-2: var(--chart-2);
45
35
  --color-chart-3: var(--chart-3);
package/tokens.json CHANGED
@@ -1,70 +1,190 @@
1
1
  {
2
2
  "name": "gg-theme",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "modes": {
5
5
  "light": {
6
- "background": "#d2dad2",
7
- "foreground": "#0e130f",
8
- "card": "#c3cec4",
9
- "card-foreground": "#0e130f",
10
- "popover": "#c3cec4",
11
- "popover-foreground": "#0e130f",
12
- "primary": "#ae004d",
13
- "primary-foreground": "#f6faf6",
14
- "secondary": "#c3cec4",
15
- "secondary-foreground": "#0e130f",
16
- "muted": "#c3cec4",
17
- "muted-foreground": "#3c453c",
18
- "accent": "#c3cec4",
19
- "accent-foreground": "#0e130f",
20
- "destructive": "#a0003e",
21
- "destructive-foreground": "#f6faf6",
22
- "success": "#006c00",
23
- "success-foreground": "#f6faf6",
24
- "warning": "#952800",
25
- "warning-foreground": "#f6faf6",
26
- "info": "#006f6a",
27
- "info-foreground": "#f6faf6",
28
- "ring": "#960049",
29
- "selection": "#9cb69e",
30
- "selection-foreground": "#0e130f",
31
- "chart-1": "#004ab9",
32
- "chart-2": "#006c00",
33
- "chart-3": "#952800",
34
- "chart-4": "#83108b",
35
- "chart-5": "#006f6a"
6
+ "background": "#e7e9e4",
7
+ "foreground": "#0f130e",
8
+ "card": "#d6dad2",
9
+ "card-foreground": "#0f130e",
10
+ "popover": "#d6dad2",
11
+ "popover-foreground": "#0f130e",
12
+ "primary": "#7a5a00",
13
+ "primary-foreground": "#e7e9e4",
14
+ "secondary": "#d6dad2",
15
+ "secondary-foreground": "#0f130e",
16
+ "muted": "#d6dad2",
17
+ "muted-foreground": "#3a3f37",
18
+ "accent": "#d6dad2",
19
+ "accent-foreground": "#0f130e",
20
+ "destructive": "#912c3e",
21
+ "destructive-foreground": "#e7e9e4",
22
+ "success": "#266023",
23
+ "success-foreground": "#e7e9e4",
24
+ "warning": "#904d28",
25
+ "warning-foreground": "#e7e9e4",
26
+ "info": "#2b6369",
27
+ "info-foreground": "#e7e9e4",
28
+ "ring": "#7a5a00",
29
+ "link": "#735b28",
30
+ "link-visited": "#54472c",
31
+ "selection": "#d6bcc6",
32
+ "selection-foreground": "#0f130e",
33
+ "chart-1": "#0052c8",
34
+ "chart-2": "#006400",
35
+ "chart-3": "#a34700",
36
+ "chart-4": "#7f1087",
37
+ "chart-5": "#00666e"
36
38
  },
37
39
  "dark": {
38
- "background": "#1e2a1f",
39
- "foreground": "#e1e6e1",
40
- "card": "#2f3e30",
41
- "card-foreground": "#e1e6e1",
42
- "popover": "#2f3e30",
43
- "popover-foreground": "#e1e6e1",
44
- "primary": "#b40055",
45
- "primary-foreground": "#f8fbf8",
46
- "secondary": "#2f3e30",
47
- "secondary-foreground": "#e1e6e1",
48
- "muted": "#2f3e30",
49
- "muted-foreground": "#829183",
50
- "accent": "#2f3e30",
51
- "accent-foreground": "#e1e6e1",
52
- "destructive": "#ff6f79",
53
- "destructive-foreground": "#0b110b",
54
- "success": "#17d365",
55
- "success-foreground": "#0b110b",
56
- "warning": "#ff7c23",
57
- "warning-foreground": "#0b110b",
58
- "info": "#00d7ce",
59
- "info-foreground": "#0b110b",
60
- "ring": "#ff69ab",
61
- "selection": "#345137",
62
- "selection-foreground": "#e1e6e1",
63
- "chart-1": "#47b1ff",
64
- "chart-2": "#17d365",
65
- "chart-3": "#ff7c23",
66
- "chart-4": "#f07cf7",
67
- "chart-5": "#00d7ce"
40
+ "background": "#282a27",
41
+ "foreground": "#e2e6e0",
42
+ "card": "#383c36",
43
+ "card-foreground": "#e2e6e0",
44
+ "popover": "#383c36",
45
+ "popover-foreground": "#e2e6e0",
46
+ "primary": "#ffd60a",
47
+ "primary-foreground": "#282a27",
48
+ "secondary": "#383c36",
49
+ "secondary-foreground": "#e2e6e0",
50
+ "muted": "#383c36",
51
+ "muted-foreground": "#a0a89c",
52
+ "accent": "#383c36",
53
+ "accent-foreground": "#e2e6e0",
54
+ "destructive": "#e1909c",
55
+ "destructive-foreground": "#282a27",
56
+ "success": "#78b77a",
57
+ "success-foreground": "#282a27",
58
+ "warning": "#e09564",
59
+ "warning-foreground": "#282a27",
60
+ "info": "#72c0c0",
61
+ "info-foreground": "#282a27",
62
+ "ring": "#ffd60a",
63
+ "link": "#d4bd68",
64
+ "link-visited": "#b1a576",
65
+ "selection": "#643c4c",
66
+ "selection-foreground": "#e2e6e0",
67
+ "chart-1": "#009aff",
68
+ "chart-2": "#4cc157",
69
+ "chart-3": "#ff8200",
70
+ "chart-4": "#e786ed",
71
+ "chart-5": "#00c9cb"
72
+ }
73
+ },
74
+ "palette": {
75
+ "light": {
76
+ "accent": "#7a5a00",
77
+ "bg": "#e7e9e4",
78
+ "surface": "#d6dad2",
79
+ "overlay": "#5f665c",
80
+ "fg": "#0f130e",
81
+ "terminal-fg": "#0f130e",
82
+ "ansi-white": "#565d53",
83
+ "fg-dim": "#3a3f37",
84
+ "cursor": "#0f130e",
85
+ "cursor-text": "#e7e9e4",
86
+ "selection-bg": "#d6bcc6",
87
+ "selection-fg": "#0f130e",
88
+ "red": "#a10036",
89
+ "green": "#006400",
90
+ "yellow": "#6e5200",
91
+ "blue": "#0052c8",
92
+ "magenta": "#7f1087",
93
+ "cyan": "#00666e",
94
+ "orange": "#a34700"
95
+ },
96
+ "dark": {
97
+ "accent": "#ffd60a",
98
+ "bg": "#282a27",
99
+ "surface": "#383c36",
100
+ "overlay": "#767d72",
101
+ "fg": "#e2e6e0",
102
+ "terminal-fg": "#c5cbc3",
103
+ "ansi-white": "#a8afa6",
104
+ "fg-dim": "#a0a89c",
105
+ "cursor": "#e2e6e0",
106
+ "cursor-text": "#282a27",
107
+ "selection-bg": "#643c4c",
108
+ "selection-fg": "#e2e6e0",
109
+ "red": "#ff7992",
110
+ "green": "#4cc157",
111
+ "yellow": "#f7cd3a",
112
+ "blue": "#009aff",
113
+ "magenta": "#e786ed",
114
+ "cyan": "#00c9cb",
115
+ "orange": "#ff8200"
116
+ }
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"
68
188
  }
69
189
  },
70
190
  "radius": "0.5rem"