@gjermundgaraba/gg-theme 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.
Files changed (6) hide show
  1. package/README.md +70 -0
  2. package/index.css +108 -0
  3. package/package.json +42 -0
  4. package/primitives.css +103 -0
  5. package/tailwind.css +55 -0
  6. package/tokens.json +71 -0
package/README.md ADDED
@@ -0,0 +1,70 @@
1
+ # gg-theme
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.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @gjermundgaraba/gg-theme
9
+ ```
10
+
11
+ ## Use
12
+
13
+ ### Plain CSS
14
+
15
+ ```css
16
+ @import "@gjermundgaraba/gg-theme";
17
+ ```
18
+
19
+ Then toggle modes by adding `class="dark"` to `<html>` (manually, with `next-themes`, or any other theme manager). The base `:root` block is light; `.dark` overrides every token.
20
+
21
+ ### Tailwind CSS v4
22
+
23
+ ```css
24
+ @import "tailwindcss";
25
+ @import "@gjermundgaraba/gg-theme/tailwind";
26
+ ```
27
+
28
+ `@gjermundgaraba/gg-theme/tailwind` re-exports all tokens through `@theme inline`, so utilities like `bg-background`, `text-foreground`, `bg-primary`, `border-border`, `bg-chart-1` work out of the box. The bundled `@custom-variant dark` matches the `.dark` class.
29
+
30
+ ### shadcn/ui
31
+
32
+ shadcn components reference tokens by their bare names (`--background`, `--primary`, …) which is exactly the contract this package emits. Drop the import in `globals.css` and remove shadcn's default block.
33
+
34
+ ## Tokens
35
+
36
+ | Surface | Foreground | Used for |
37
+ | --- | --- | --- |
38
+ | `background` | `foreground` | Page chrome and body text. |
39
+ | `card` | `card-foreground` | Elevated panels, sheets, dialogs. |
40
+ | `popover` | `popover-foreground` | Floating menus, tooltips, popovers. |
41
+ | `primary` | `primary-foreground` | Brand action: primary buttons, active links. |
42
+ | `secondary` | `secondary-foreground` | Quiet alternative action. |
43
+ | `muted` | `muted-foreground` | Subdued surfaces and metadata text. |
44
+ | `accent` | `accent-foreground` | Hover and highlight surfaces. |
45
+ | `destructive` | `destructive-foreground` | Delete, irreversible actions, errors. |
46
+ | `success` | `success-foreground` | Confirmations, completed state. |
47
+ | `warning` | `warning-foreground` | Attention, recoverable issues. |
48
+ | `info` | `info-foreground` | Neutral informational state. |
49
+
50
+ | Token | Used for |
51
+ | --- | --- |
52
+ | `border` | Default 1px borders. |
53
+ | `input` | Form-control borders, slightly stronger than `border`. |
54
+ | `ring` | Focus ring. |
55
+ | `selection` / `selection-foreground` | Text selection. |
56
+ | `chart-1` … `chart-5` | Qualitative data viz palette. |
57
+ | `radius` | Base corner radius (Tailwind derives `radius-sm/md/lg/xl`). |
58
+
59
+ ## Files
60
+
61
+ | Export | Path |
62
+ | --- | --- |
63
+ | `@gjermundgaraba/gg-theme` | `index.css`, base CSS variables (`:root` + `.dark`). |
64
+ | `@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. |
67
+
68
+ ## Notes
69
+
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.
package/index.css ADDED
@@ -0,0 +1,108 @@
1
+ /* gg-theme — generated. Do not edit. */
2
+
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
+
37
+ --border: color-mix(in oklab, var(--foreground) 12%, transparent);
38
+ --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
+
50
+ --radius: 0.5rem;
51
+
52
+ color-scheme: light;
53
+ }
54
+
55
+ .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
+
89
+ --border: color-mix(in oklab, var(--foreground) 14%, transparent);
90
+ --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;
101
+
102
+ color-scheme: dark;
103
+ }
104
+
105
+ ::selection {
106
+ background: var(--selection);
107
+ color: var(--selection-foreground);
108
+ }
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@gjermundgaraba/gg-theme",
3
+ "version": "0.1.0",
4
+ "description": "Coordinated light and dark CSS variables for web apps. Tailwind v4 and shadcn/ui compatible.",
5
+ "type": "module",
6
+ "main": "./index.css",
7
+ "style": "./index.css",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "exports": {
12
+ ".": "./index.css",
13
+ "./tailwind": "./tailwind.css",
14
+ "./primitives": "./primitives.css",
15
+ "./tokens": "./tokens.json",
16
+ "./package.json": "./package.json"
17
+ },
18
+ "files": [
19
+ "index.css",
20
+ "tailwind.css",
21
+ "primitives.css",
22
+ "tokens.json",
23
+ "README.md"
24
+ ],
25
+ "keywords": [
26
+ "theme",
27
+ "css-variables",
28
+ "tailwindcss",
29
+ "shadcn",
30
+ "design-tokens",
31
+ "oklch"
32
+ ],
33
+ "sideEffects": [
34
+ "*.css"
35
+ ],
36
+ "license": "MIT",
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "git+https://github.com/gjermundgaraba/theme.git"
40
+ },
41
+ "author": "Gjermund Garaba"
42
+ }
package/primitives.css ADDED
@@ -0,0 +1,103 @@
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. */
7
+
8
+ :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);
53
+
54
+ color-scheme: light;
55
+ }
56
+
57
+ .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);
101
+
102
+ color-scheme: dark;
103
+ }
package/tailwind.css ADDED
@@ -0,0 +1,55 @@
1
+ /* gg-theme — Tailwind v4 entry. Generated. Do not edit. */
2
+
3
+ @import "./index.css";
4
+
5
+ @theme inline {
6
+ --color-background: var(--background);
7
+ --color-foreground: var(--foreground);
8
+
9
+ --color-card: var(--card);
10
+ --color-card-foreground: var(--card-foreground);
11
+
12
+ --color-popover: var(--popover);
13
+ --color-popover-foreground: var(--popover-foreground);
14
+
15
+ --color-primary: var(--primary);
16
+ --color-primary-foreground: var(--primary-foreground);
17
+
18
+ --color-secondary: var(--secondary);
19
+ --color-secondary-foreground: var(--secondary-foreground);
20
+
21
+ --color-muted: var(--muted);
22
+ --color-muted-foreground: var(--muted-foreground);
23
+
24
+ --color-accent: var(--accent);
25
+ --color-accent-foreground: var(--accent-foreground);
26
+
27
+ --color-destructive: var(--destructive);
28
+ --color-destructive-foreground: var(--destructive-foreground);
29
+
30
+ --color-success: var(--success);
31
+ --color-success-foreground: var(--success-foreground);
32
+
33
+ --color-warning: var(--warning);
34
+ --color-warning-foreground: var(--warning-foreground);
35
+
36
+ --color-info: var(--info);
37
+ --color-info-foreground: var(--info-foreground);
38
+
39
+ --color-border: var(--border);
40
+ --color-input: var(--input);
41
+ --color-ring: var(--ring);
42
+
43
+ --color-chart-1: var(--chart-1);
44
+ --color-chart-2: var(--chart-2);
45
+ --color-chart-3: var(--chart-3);
46
+ --color-chart-4: var(--chart-4);
47
+ --color-chart-5: var(--chart-5);
48
+
49
+ --radius-sm: calc(var(--radius) - 4px);
50
+ --radius-md: calc(var(--radius) - 2px);
51
+ --radius-lg: var(--radius);
52
+ --radius-xl: calc(var(--radius) + 4px);
53
+ }
54
+
55
+ @custom-variant dark (&:where(.dark, .dark *));
package/tokens.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "name": "gg-theme",
3
+ "version": "0.1.0",
4
+ "modes": {
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"
36
+ },
37
+ "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"
68
+ }
69
+ },
70
+ "radius": "0.5rem"
71
+ }