@invana/styling 0.0.4
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 +165 -0
- package/package.json +103 -0
- package/src/base.css +41 -0
- package/src/index.css +151 -0
- package/src/theme.css +80 -0
- package/src/themes/default.css +96 -0
- package/src/themes/index.ts +6 -0
- package/src/themes/presets-base.css +97 -0
- package/src/themes/presets.css +1946 -0
- package/src/themes/tailwind.css +105 -0
- package/src/themes/vite.css +107 -0
- package/src/themes.config.ts +212 -0
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Theme Presets — base layer.
|
|
3
|
+
*
|
|
4
|
+
* Registers the preset design tokens in `@theme` so Tailwind generates the matching
|
|
5
|
+
* utilities (`text-text-secondary`, `bg-surface`, `bg-elevated`, `text-accent-dim`,
|
|
6
|
+
* `border-border-subtle`, `font-heading`, …). The DEFAULT values below are the
|
|
7
|
+
* Dark Gold preset; the per-theme values are overridden by the `[data-theme]`
|
|
8
|
+
* blocks in presets.css. Import this BEFORE presets.css.
|
|
9
|
+
*
|
|
10
|
+
* Note: the brand accent maps to `--color-primary` (see tokens.ts) — shadcn's
|
|
11
|
+
* `--color-accent` stays the hover surface — so `.kbd` uses `--color-primary`.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@theme {
|
|
15
|
+
/* Surfaces */
|
|
16
|
+
--color-root: #0a0a0a;
|
|
17
|
+
--color-surface: #111111;
|
|
18
|
+
--color-elevated: #1a1a1a;
|
|
19
|
+
--color-panel: #141414;
|
|
20
|
+
|
|
21
|
+
/* Text (text-primary tinted toward the Dark Gold signature accent — see tokens.ts) */
|
|
22
|
+
--color-text-primary: #eee1d3;
|
|
23
|
+
--color-text-secondary: #a39787;
|
|
24
|
+
--color-text-muted: #6b5f53;
|
|
25
|
+
|
|
26
|
+
/* Accent (brand lives in --color-primary; these are its companions) */
|
|
27
|
+
--color-accent-dim: #c9a96e;
|
|
28
|
+
--color-accent-bright: #e8c49a;
|
|
29
|
+
|
|
30
|
+
/* Borders */
|
|
31
|
+
--color-border-subtle: rgba(212, 165, 116, 0.12);
|
|
32
|
+
--color-border-medium: rgba(212, 165, 116, 0.25);
|
|
33
|
+
|
|
34
|
+
/* Edges / overlays */
|
|
35
|
+
--color-edge: rgba(212, 165, 116, 0.3);
|
|
36
|
+
--color-edge-dim: rgba(212, 165, 116, 0.08);
|
|
37
|
+
--color-edge-dot: rgba(212, 165, 116, 0.15);
|
|
38
|
+
--color-accent-overlay-bg: rgba(212, 165, 116, 0.05);
|
|
39
|
+
--color-accent-overlay-border: rgba(212, 165, 116, 0.25);
|
|
40
|
+
|
|
41
|
+
/* Typography */
|
|
42
|
+
--font-serif: 'DM Serif Display', ui-serif, Georgia, serif;
|
|
43
|
+
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
44
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
45
|
+
--font-heading: var(--font-serif);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Non-utility derived tokens — defaults; overridden per theme in presets.css. */
|
|
49
|
+
:root {
|
|
50
|
+
--glass-bg: rgba(20, 20, 20, 0.8);
|
|
51
|
+
--glass-bg-heavy: rgba(20, 20, 20, 0.95);
|
|
52
|
+
--glass-border: rgba(212, 165, 116, 0.1);
|
|
53
|
+
--glass-border-heavy: rgba(212, 165, 116, 0.15);
|
|
54
|
+
--scrollbar-thumb: rgba(212, 165, 116, 0.2);
|
|
55
|
+
--scrollbar-thumb-hover: rgba(212, 165, 116, 0.35);
|
|
56
|
+
--glow-accent: rgba(212, 165, 116, 0.15);
|
|
57
|
+
--glow-accent-strong: rgba(212, 165, 116, 0.4);
|
|
58
|
+
--glow-accent-pulse: rgba(212, 165, 116, 0.6);
|
|
59
|
+
--kbd-bg: rgba(212, 165, 116, 0.1);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ── Utilities ported from the preset base styles ── */
|
|
63
|
+
|
|
64
|
+
.font-heading {
|
|
65
|
+
font-family: var(--font-heading);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.glass {
|
|
69
|
+
background: var(--glass-bg);
|
|
70
|
+
border: 1px solid var(--glass-border);
|
|
71
|
+
backdrop-filter: blur(12px);
|
|
72
|
+
-webkit-backdrop-filter: blur(12px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.glass-heavy {
|
|
76
|
+
background: var(--glass-bg-heavy);
|
|
77
|
+
border: 1px solid var(--glass-border-heavy);
|
|
78
|
+
backdrop-filter: blur(16px);
|
|
79
|
+
-webkit-backdrop-filter: blur(16px);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.kbd {
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
min-width: 1.75rem;
|
|
87
|
+
height: 1.75rem;
|
|
88
|
+
padding: 0 0.5rem;
|
|
89
|
+
font-family: var(--font-mono);
|
|
90
|
+
font-size: 0.75rem;
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
color: var(--color-primary);
|
|
93
|
+
background: var(--kbd-bg);
|
|
94
|
+
border: 1px solid var(--color-border-medium);
|
|
95
|
+
border-radius: 0.25rem;
|
|
96
|
+
box-shadow: 0 1px 0 var(--scrollbar-thumb);
|
|
97
|
+
}
|