@devfellowship/components 0.2.0 → 1.2.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.
- package/dist/hooks.cjs +33 -0
- package/dist/hooks.d.cts +9 -1
- package/dist/hooks.d.ts +9 -1
- package/dist/hooks.js +31 -0
- package/dist/index.cjs +3902 -584
- package/dist/index.d.cts +621 -7
- package/dist/index.d.ts +621 -7
- package/dist/index.js +3914 -734
- package/dist/styles/fonts.css +102 -0
- package/dist/styles/shadcn.css +84 -0
- package/dist/styles/tailwind.css +66 -0
- package/dist/styles/theme.css +29 -163
- package/dist/styles/tokens.css +491 -0
- package/package.json +25 -5
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @devfellowship/components — Self-hosted @font-face declarations (DS v0)
|
|
3
|
+
*
|
|
4
|
+
* Brand source: brand.devfellowship.com/llms.txt §06 Tipografia.
|
|
5
|
+
* - Barlow Condensed → display (weights 500 / 600 / 700)
|
|
6
|
+
* - Inter → body (weights 400 / 500 / 600 / 700)
|
|
7
|
+
* - JetBrains Mono → mono (weights 400 / 500 / 600)
|
|
8
|
+
* - Georgia → editorial (system serif — no @font-face needed)
|
|
9
|
+
*
|
|
10
|
+
* ─────────────────────────────────────────────────────────────────────────
|
|
11
|
+
* TODO(fonts): WOFF2 BINARIES NOT YET COMMITTED.
|
|
12
|
+
*
|
|
13
|
+
* These @font-face blocks reference the *expected* self-hosted paths
|
|
14
|
+
* (`/fonts/<family>/...woff2`). The actual WOFF2 files have NOT been added to
|
|
15
|
+
* the repo yet (a separate follow-up will vendor them, ideally subset/latin,
|
|
16
|
+
* so we avoid committing large/unverified binaries in this tokens-only PR).
|
|
17
|
+
*
|
|
18
|
+
* UNTIL the binaries land, `theme.css` keeps the Google Fonts `@import` as a
|
|
19
|
+
* working fallback, so type rendering is unaffected. Once the WOFF2 files are
|
|
20
|
+
* vendored under `packages/ui/src/styles/fonts/` (and copied to `dist` by
|
|
21
|
+
* tsup, + into the showcase `public/fonts/`), drop the Google Fonts @import
|
|
22
|
+
* from theme.css and rely on these declarations.
|
|
23
|
+
*
|
|
24
|
+
* Follow-up: vendor subset WOFF2 + add tsup copy step + showcase preload.
|
|
25
|
+
* ─────────────────────────────────────────────────────────────────────────
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/* ─── Barlow Condensed (display) ─────────────────────────────────────────── */
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: 'Barlow Condensed';
|
|
31
|
+
font-style: normal;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
font-display: swap;
|
|
34
|
+
src: url('/fonts/barlow-condensed/barlow-condensed-500.woff2') format('woff2');
|
|
35
|
+
}
|
|
36
|
+
@font-face {
|
|
37
|
+
font-family: 'Barlow Condensed';
|
|
38
|
+
font-style: normal;
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
font-display: swap;
|
|
41
|
+
src: url('/fonts/barlow-condensed/barlow-condensed-600.woff2') format('woff2');
|
|
42
|
+
}
|
|
43
|
+
@font-face {
|
|
44
|
+
font-family: 'Barlow Condensed';
|
|
45
|
+
font-style: normal;
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
font-display: swap;
|
|
48
|
+
src: url('/fonts/barlow-condensed/barlow-condensed-700.woff2') format('woff2');
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ─── Inter (body) ───────────────────────────────────────────────────────── */
|
|
52
|
+
@font-face {
|
|
53
|
+
font-family: 'Inter';
|
|
54
|
+
font-style: normal;
|
|
55
|
+
font-weight: 400;
|
|
56
|
+
font-display: swap;
|
|
57
|
+
src: url('/fonts/inter/inter-400.woff2') format('woff2');
|
|
58
|
+
}
|
|
59
|
+
@font-face {
|
|
60
|
+
font-family: 'Inter';
|
|
61
|
+
font-style: normal;
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
font-display: swap;
|
|
64
|
+
src: url('/fonts/inter/inter-500.woff2') format('woff2');
|
|
65
|
+
}
|
|
66
|
+
@font-face {
|
|
67
|
+
font-family: 'Inter';
|
|
68
|
+
font-style: normal;
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
font-display: swap;
|
|
71
|
+
src: url('/fonts/inter/inter-600.woff2') format('woff2');
|
|
72
|
+
}
|
|
73
|
+
@font-face {
|
|
74
|
+
font-family: 'Inter';
|
|
75
|
+
font-style: normal;
|
|
76
|
+
font-weight: 700;
|
|
77
|
+
font-display: swap;
|
|
78
|
+
src: url('/fonts/inter/inter-700.woff2') format('woff2');
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* ─── JetBrains Mono (mono) ──────────────────────────────────────────────── */
|
|
82
|
+
@font-face {
|
|
83
|
+
font-family: 'JetBrains Mono';
|
|
84
|
+
font-style: normal;
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
font-display: swap;
|
|
87
|
+
src: url('/fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
|
|
88
|
+
}
|
|
89
|
+
@font-face {
|
|
90
|
+
font-family: 'JetBrains Mono';
|
|
91
|
+
font-style: normal;
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
font-display: swap;
|
|
94
|
+
src: url('/fonts/jetbrains-mono/jetbrains-mono-500.woff2') format('woff2');
|
|
95
|
+
}
|
|
96
|
+
@font-face {
|
|
97
|
+
font-family: 'JetBrains Mono';
|
|
98
|
+
font-style: normal;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
font-display: swap;
|
|
101
|
+
src: url('/fonts/jetbrains-mono/jetbrains-mono-600.woff2') format('woff2');
|
|
102
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @devfellowship/components — shadcn HSL-channel bridge (DS v0, dark-only)
|
|
3
|
+
*
|
|
4
|
+
* WHY THIS FILE EXISTS
|
|
5
|
+
* --------------------
|
|
6
|
+
* The DS ships its semantic vars (`--background`, `--primary`, …) as **hex**
|
|
7
|
+
* values in tokens.css (see the "Compatibility aliases" block). That's what the
|
|
8
|
+
* DS's own Tailwind v4 preset (`@dfl/components/tailwind`) consumes via
|
|
9
|
+
* `@theme inline { --color-background: var(--background); … }` — utilities like
|
|
10
|
+
* `bg-background` resolve correctly because Tailwind reads a raw color.
|
|
11
|
+
*
|
|
12
|
+
* But most fleet apps are **shadcn-slate**: their Tailwind theme wraps the same
|
|
13
|
+
* var names as `hsl(var(--background))`, `hsl(var(--primary))`, … — the standard
|
|
14
|
+
* shadcn convention where each var holds bare **HSL CHANNELS** (e.g.
|
|
15
|
+
* `--background: 222 47% 11%`, NO `hsl()` wrapper). If such an app imports the
|
|
16
|
+
* DS hex layer wholesale, hex lands inside `hsl()` → `hsl(#0a0908)` → invalid
|
|
17
|
+
* CSS → broken render.
|
|
18
|
+
*
|
|
19
|
+
* This bridge re-declares the STANDARD shadcn semantic vars as HSL CHANNELS
|
|
20
|
+
* mapped to the DS v0 dark palette, so a shadcn-slate app's existing
|
|
21
|
+
* `hsl(var(--background))` resolves to DS dark on import — zero hand-mirroring.
|
|
22
|
+
*
|
|
23
|
+
* IMPORTANT — this is ADDITIVE and OPT-IN. It is a SEPARATE export. It does NOT
|
|
24
|
+
* change the hex layer (`@dfl/components/styles` / `tokens.css`), so existing
|
|
25
|
+
* v1.1.0 hex-var consumers keep working untouched. The channels below are
|
|
26
|
+
* dark-only (DS v0 is a dark design system); scope under `.dark` is provided so
|
|
27
|
+
* apps that gate on `<html class="dark">` (shadcn default) also resolve.
|
|
28
|
+
*
|
|
29
|
+
* WHICH IMPORT DO I USE?
|
|
30
|
+
* ----------------------
|
|
31
|
+
* • DS-native app (uses `bg-background` via @dfl/components/tailwind, or reads
|
|
32
|
+
* the hex `--*` vars directly):
|
|
33
|
+
* @import '@devfellowship/components/styles';
|
|
34
|
+
*
|
|
35
|
+
* • shadcn-slate app (Tailwind theme uses `hsl(var(--background))` etc.):
|
|
36
|
+
* @import '@devfellowship/components/shadcn';
|
|
37
|
+
* then set dark mode (e.g. <html class="dark"> or default).
|
|
38
|
+
* No need to hand-mirror the DS palette anymore.
|
|
39
|
+
*
|
|
40
|
+
* Channels were converted from the canonical DS v0 hex palette (tokens.css):
|
|
41
|
+
* sand-950 #0A0908 → 30 11% 4% sand-900 #141210 → 30 11% 7%
|
|
42
|
+
* sand-850 #1A1714 → 30 13% 9% sand-800 #1F1C18 → 34 13% 11%
|
|
43
|
+
* sand-700 #2A2622 → 30 11% 15% sand-400 #7D7568 → 37 9% 45%
|
|
44
|
+
* sand-200 #C9C0B4 → 34 16% 75% sand-50 #F6F1E7 → 40 45% 94%
|
|
45
|
+
* amber-500 #E07A4A → 19 71% 58% red-500 #E07A7A → 0 62% 68%
|
|
46
|
+
*
|
|
47
|
+
* Override any channel in your own CSS to retheme.
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
:root,
|
|
51
|
+
.dark {
|
|
52
|
+
/* Surfaces / ink */
|
|
53
|
+
--background: 30 11% 4%; /* surface-page — sand-950 #0A0908 */
|
|
54
|
+
--foreground: 40 45% 94%; /* ink-primary — sand-50 #F6F1E7 */
|
|
55
|
+
|
|
56
|
+
--card: 30 11% 7%; /* surface-panel — sand-900 #141210 */
|
|
57
|
+
--card-foreground: 40 45% 94%;
|
|
58
|
+
|
|
59
|
+
--popover: 30 13% 9%; /* surface-raised — sand-850 #1A1714 */
|
|
60
|
+
--popover-foreground: 40 45% 94%;
|
|
61
|
+
|
|
62
|
+
/* Brand */
|
|
63
|
+
--primary: 19 71% 58%; /* brand — amber-500 #E07A4A */
|
|
64
|
+
--primary-foreground: 30 11% 4%; /* ink-inverse — sand-950 #0A0908 */
|
|
65
|
+
|
|
66
|
+
--secondary: 30 11% 7%; /* surface-panel — sand-900 #141210 */
|
|
67
|
+
--secondary-foreground: 34 16% 75%; /* ink-secondary — sand-200 #C9C0B4 */
|
|
68
|
+
|
|
69
|
+
--muted: 30 13% 9%; /* surface-raised — sand-850 #1A1714 */
|
|
70
|
+
--muted-foreground: 37 9% 45%; /* ink-muted — sand-400 #7D7568 */
|
|
71
|
+
|
|
72
|
+
--accent: 34 13% 11%; /* surface-elevated — sand-800 #1F1C18 */
|
|
73
|
+
--accent-foreground: 40 45% 94%; /* ink-primary — sand-50 #F6F1E7 */
|
|
74
|
+
|
|
75
|
+
--destructive: 0 62% 68%; /* danger — red-500 #E07A7A */
|
|
76
|
+
--destructive-foreground: 40 45% 94%;
|
|
77
|
+
|
|
78
|
+
/* Lines */
|
|
79
|
+
--border: 30 11% 15%; /* border-subtle — sand-700 #2A2622 */
|
|
80
|
+
--input: 30 11% 15%; /* border-subtle — sand-700 #2A2622 */
|
|
81
|
+
--ring: 19 71% 58%; /* brand — amber-500 #E07A4A */
|
|
82
|
+
|
|
83
|
+
--radius: 0.375rem; /* 6px — matches DS --p-radius-md */
|
|
84
|
+
}
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -78,6 +78,72 @@
|
|
|
78
78
|
--font-sans: var(--font-sans);
|
|
79
79
|
--font-condensed: var(--font-condensed);
|
|
80
80
|
--font-mono: var(--font-mono);
|
|
81
|
+
--font-editorial: var(--font-editorial);
|
|
82
|
+
|
|
83
|
+
/* ─── Editorial / paper (light, NOT default — see tokens.css §5.8) ─────── */
|
|
84
|
+
--color-paper: var(--paper);
|
|
85
|
+
--color-paper-2: var(--paper-2);
|
|
86
|
+
--color-ink-on-paper: var(--ink-on-paper);
|
|
87
|
+
--color-brand-on-light: var(--brand-on-light);
|
|
88
|
+
|
|
89
|
+
/* ─── Motion — DS-spec named easings → `ease-*` utilities ─────────────── */
|
|
90
|
+
--ease-standard: var(--p-ease-standard);
|
|
91
|
+
--ease-snap: var(--p-ease-snap);
|
|
92
|
+
--ease-out-std: var(--p-ease-out-std);
|
|
93
|
+
--ease-in-std: var(--p-ease-in-std);
|
|
94
|
+
|
|
95
|
+
/* ─── Z-index scale → `z-*` utilities (z-sticky, z-modal, z-toast, …) ─── */
|
|
96
|
+
--z-base: var(--p-z-base);
|
|
97
|
+
--z-sticky: var(--p-z-sticky);
|
|
98
|
+
--z-dropdown: var(--p-z-dropdown);
|
|
99
|
+
--z-tooltip: var(--p-z-tooltip);
|
|
100
|
+
--z-modal-scrim: var(--p-z-modal-scrim);
|
|
101
|
+
--z-modal: var(--p-z-modal);
|
|
102
|
+
--z-toast: var(--p-z-toast);
|
|
103
|
+
|
|
104
|
+
/* ─── DS v0 component tokens (--c-*) exposed as Tailwind utilities ────── */
|
|
105
|
+
/* Atoms cluster (Phase 1.1) — Button + Input + Card knobs */
|
|
106
|
+
--color-c-button-primary-bg: var(--c-button-primary-bg);
|
|
107
|
+
--color-c-button-primary-fg: var(--c-button-primary-fg);
|
|
108
|
+
--color-c-button-primary-bg-hover: var(--c-button-primary-bg-hover);
|
|
109
|
+
--color-c-button-primary-bg-active: var(--c-button-primary-bg-active);
|
|
110
|
+
--color-c-button-secondary-bg: var(--c-button-secondary-bg);
|
|
111
|
+
--color-c-button-secondary-fg: var(--c-button-secondary-fg);
|
|
112
|
+
--color-c-button-secondary-border: var(--c-button-secondary-border);
|
|
113
|
+
--color-c-button-secondary-bg-hover: var(--c-button-secondary-bg-hover);
|
|
114
|
+
--color-c-button-secondary-border-hover: var(--c-button-secondary-border-hover);
|
|
115
|
+
--color-c-button-ghost-fg: var(--c-button-ghost-fg);
|
|
116
|
+
--color-c-button-ghost-bg-hover: var(--c-button-ghost-bg-hover);
|
|
117
|
+
--color-c-button-destructive-fg: var(--c-button-destructive-fg);
|
|
118
|
+
--color-c-button-destructive-border: var(--c-button-destructive-border);
|
|
119
|
+
--color-c-button-destructive-bg-hover: var(--c-button-destructive-bg-hover);
|
|
120
|
+
--color-c-button-success-bg: var(--c-button-success-bg);
|
|
121
|
+
--color-c-button-success-fg: var(--c-button-success-fg);
|
|
122
|
+
--color-c-input-bg: var(--c-input-bg);
|
|
123
|
+
--color-c-input-fg: var(--c-input-fg);
|
|
124
|
+
--color-c-input-placeholder: var(--c-input-placeholder);
|
|
125
|
+
--color-c-input-border: var(--c-input-border);
|
|
126
|
+
--color-c-input-border-hover: var(--c-input-border-hover);
|
|
127
|
+
--color-c-input-border-focus: var(--c-input-border-focus);
|
|
128
|
+
--color-c-input-ring-focus: var(--c-input-ring-focus);
|
|
129
|
+
--color-c-input-border-error: var(--c-input-border-error);
|
|
130
|
+
|
|
131
|
+
/* Semantic ink as utilities */
|
|
132
|
+
--color-s-ink-primary: var(--s-ink-primary);
|
|
133
|
+
--color-s-ink-secondary: var(--s-ink-secondary);
|
|
134
|
+
--color-s-ink-muted: var(--s-ink-muted);
|
|
135
|
+
--color-s-ink-disabled: var(--s-ink-disabled);
|
|
136
|
+
--color-s-surface-page: var(--s-surface-page);
|
|
137
|
+
--color-s-surface-panel: var(--s-surface-panel);
|
|
138
|
+
--color-s-surface-raised: var(--s-surface-raised);
|
|
139
|
+
--color-s-surface-elevated: var(--s-surface-elevated);
|
|
140
|
+
--color-s-border-subtle: var(--s-border-subtle);
|
|
141
|
+
--color-s-border-strong: var(--s-border-strong);
|
|
142
|
+
--color-s-border-focus: var(--s-border-focus);
|
|
143
|
+
--color-s-brand-solid: var(--s-brand-solid);
|
|
144
|
+
--color-s-brand-hover: var(--s-brand-hover);
|
|
145
|
+
--color-s-brand-subtle: var(--s-brand-subtle);
|
|
146
|
+
--color-s-brand-ring: var(--s-brand-ring);
|
|
81
147
|
}
|
|
82
148
|
|
|
83
149
|
/* Dark mode variant — class-based */
|
package/dist/styles/theme.css
CHANGED
|
@@ -1,185 +1,51 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @dfl/components —
|
|
2
|
+
* @dfl/components — Theme entry-point (DS v0)
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* Light + dark mode via CSS custom properties.
|
|
4
|
+
* v1.0.0 (DS v0): tokens are hand-written in tokens.css using a 3-layer
|
|
5
|
+
* architecture (--p-* primitives → --s-* semantic → --c-* component).
|
|
7
6
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Legacy HSL-channel vars (--background: 0 0% 100%; etc.) and OKLCH brand
|
|
8
|
+
* tokens were REMOVED in v1.0.0 — that's the breaking change documented
|
|
9
|
+
* in the plan https://plans.tainanfidelis.com/20260520-dfl-components-ds-v0-revamp
|
|
10
10
|
*
|
|
11
|
-
*
|
|
11
|
+
* Consumer apps now import this file the same way as before:
|
|
12
|
+
* @import '@devfellowship/components/styles';
|
|
13
|
+
*
|
|
14
|
+
* Override any --p-* / --s-* / --c-* variable in your own CSS to retheme.
|
|
12
15
|
*/
|
|
13
16
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* ─── Semantic surface / text ──────────────────────────────────────────── */
|
|
23
|
-
--background: oklch(1 0 0);
|
|
24
|
-
--foreground: oklch(0.09 0.025 273);
|
|
25
|
-
|
|
26
|
-
--card: oklch(1 0 0);
|
|
27
|
-
--card-foreground: oklch(0.09 0.025 273);
|
|
28
|
-
|
|
29
|
-
--popover: oklch(1 0 0);
|
|
30
|
-
--popover-foreground: oklch(0.09 0.025 273);
|
|
31
|
-
|
|
32
|
-
--primary: oklch(0.75 0.18 55); /* brand orange */
|
|
33
|
-
--primary-foreground: oklch(1 0 0);
|
|
34
|
-
|
|
35
|
-
--secondary: oklch(0.96 0.005 240);
|
|
36
|
-
--secondary-foreground: oklch(0.09 0.025 273);
|
|
37
|
-
|
|
38
|
-
--muted: oklch(0.96 0.005 240);
|
|
39
|
-
--muted-foreground: oklch(0.55 0.015 240);
|
|
40
|
-
|
|
41
|
-
--accent: oklch(0.75 0.18 55);
|
|
42
|
-
--accent-foreground: oklch(1 0 0);
|
|
43
|
-
|
|
44
|
-
--destructive: oklch(0.63 0.22 27);
|
|
45
|
-
--destructive-foreground: oklch(1 0 0);
|
|
46
|
-
|
|
47
|
-
--border: oklch(0.91 0.005 240);
|
|
48
|
-
--input: oklch(0.91 0.005 240);
|
|
49
|
-
--ring: oklch(0.75 0.18 55);
|
|
50
|
-
|
|
51
|
-
/* ─── Radius ───────────────────────────────────────────────────────────── */
|
|
52
|
-
--radius: 0.5rem;
|
|
53
|
-
--radius-sm: calc(var(--radius) - 0.125rem);
|
|
54
|
-
--radius-md: var(--radius);
|
|
55
|
-
--radius-lg: calc(var(--radius) + 0.25rem);
|
|
56
|
-
--radius-xl: calc(var(--radius) + 0.5rem);
|
|
57
|
-
--radius-full: 9999px;
|
|
58
|
-
|
|
59
|
-
/* ─── Sidebar ──────────────────────────────────────────────────────────── */
|
|
60
|
-
--sidebar-background: oklch(0.985 0 0);
|
|
61
|
-
--sidebar-foreground: oklch(0.35 0.015 240);
|
|
62
|
-
--sidebar-primary: oklch(0.75 0.18 55);
|
|
63
|
-
--sidebar-primary-foreground: oklch(1 0 0);
|
|
64
|
-
--sidebar-accent: oklch(0.93 0.005 240);
|
|
65
|
-
--sidebar-accent-foreground: oklch(0.09 0.025 273);
|
|
66
|
-
--sidebar-border: oklch(0.88 0.005 240);
|
|
67
|
-
--sidebar-ring: oklch(0.75 0.18 55);
|
|
68
|
-
|
|
69
|
-
/* ─── Fonts ────────────────────────────────────────────────────────────── */
|
|
70
|
-
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
71
|
-
--font-condensed: 'Barlow Condensed', ui-sans-serif, sans-serif;
|
|
72
|
-
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
|
|
73
|
-
|
|
74
|
-
/* ─── Spacing scale ────────────────────────────────────────────────────── */
|
|
75
|
-
--spacing-xs: 0.25rem;
|
|
76
|
-
--spacing-sm: 0.5rem;
|
|
77
|
-
--spacing-md: 1rem;
|
|
78
|
-
--spacing-lg: 1.5rem;
|
|
79
|
-
--spacing-xl: 2rem;
|
|
80
|
-
--spacing-2xl: 3rem;
|
|
81
|
-
|
|
82
|
-
/* ─── Chart colours ────────────────────────────────────────────────────── */
|
|
83
|
-
--chart-1: oklch(0.75 0.18 55);
|
|
84
|
-
--chart-2: oklch(0.65 0.15 190);
|
|
85
|
-
--chart-3: oklch(0.60 0.13 265);
|
|
86
|
-
--chart-4: oklch(0.80 0.12 140);
|
|
87
|
-
--chart-5: oklch(0.70 0.15 330);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* ─── Dark mode ──────────────────────────────────────────────────────────── */
|
|
91
|
-
.dark {
|
|
92
|
-
--background: oklch(0.09 0.025 273); /* #030213 */
|
|
93
|
-
--foreground: oklch(0.97 0.004 240);
|
|
94
|
-
|
|
95
|
-
--card: oklch(0.12 0.025 273);
|
|
96
|
-
--card-foreground: oklch(0.97 0.004 240);
|
|
97
|
-
|
|
98
|
-
--popover: oklch(0.12 0.025 273);
|
|
99
|
-
--popover-foreground: oklch(0.97 0.004 240);
|
|
100
|
-
|
|
101
|
-
--primary: oklch(0.75 0.18 55);
|
|
102
|
-
--primary-foreground: oklch(1 0 0);
|
|
103
|
-
|
|
104
|
-
--secondary: oklch(0.18 0.025 273);
|
|
105
|
-
--secondary-foreground: oklch(0.97 0.004 240);
|
|
106
|
-
|
|
107
|
-
--muted: oklch(0.18 0.025 273);
|
|
108
|
-
--muted-foreground: oklch(0.65 0.015 240);
|
|
109
|
-
|
|
110
|
-
--accent: oklch(0.75 0.18 55);
|
|
111
|
-
--accent-foreground: oklch(1 0 0);
|
|
112
|
-
|
|
113
|
-
--destructive: oklch(0.55 0.22 27);
|
|
114
|
-
--destructive-foreground: oklch(1 0 0);
|
|
115
|
-
|
|
116
|
-
--border: oklch(0.22 0.025 273);
|
|
117
|
-
--input: oklch(0.22 0.025 273);
|
|
118
|
-
--ring: oklch(0.75 0.18 55);
|
|
119
|
-
|
|
120
|
-
--sidebar-background: oklch(0.07 0.025 273);
|
|
121
|
-
--sidebar-foreground: oklch(0.87 0.01 240);
|
|
122
|
-
--sidebar-primary: oklch(0.75 0.18 55);
|
|
123
|
-
--sidebar-primary-foreground: oklch(1 0 0);
|
|
124
|
-
--sidebar-accent: oklch(0.15 0.025 273);
|
|
125
|
-
--sidebar-accent-foreground: oklch(0.87 0.01 240);
|
|
126
|
-
--sidebar-border: oklch(0.20 0.025 273);
|
|
127
|
-
--sidebar-ring: oklch(0.75 0.18 55);
|
|
17
|
+
/* Fonts — Inter (body), Barlow Condensed (display), JetBrains Mono (code).
|
|
18
|
+
*
|
|
19
|
+
* Self-hosted @font-face declarations live in fonts.css. The WOFF2 binaries
|
|
20
|
+
* are NOT vendored yet (see TODO(fonts) in fonts.css) — so the Google Fonts
|
|
21
|
+
* @import below stays as a WORKING FALLBACK until the binaries land. Once
|
|
22
|
+
* vendored, drop this @import and rely on fonts.css. */
|
|
23
|
+
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
|
|
24
|
+
@import './fonts.css';
|
|
128
25
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
--chart-3: oklch(0.70 0.13 265);
|
|
132
|
-
--chart-4: oklch(0.80 0.12 140);
|
|
133
|
-
--chart-5: oklch(0.70 0.15 330);
|
|
134
|
-
}
|
|
26
|
+
/* All design tokens live in tokens.css. */
|
|
27
|
+
@import './tokens.css';
|
|
135
28
|
|
|
136
29
|
/* ─── Base resets ────────────────────────────────────────────────────────── */
|
|
137
30
|
*, *::before, *::after {
|
|
138
|
-
border-color: var(--border);
|
|
31
|
+
border-color: var(--s-border-subtle);
|
|
139
32
|
box-sizing: border-box;
|
|
140
33
|
}
|
|
141
34
|
|
|
142
35
|
html {
|
|
143
|
-
font-family: var(--font-
|
|
36
|
+
font-family: var(--s-font-body);
|
|
144
37
|
-webkit-font-smoothing: antialiased;
|
|
145
38
|
-moz-osx-font-smoothing: grayscale;
|
|
146
39
|
}
|
|
147
40
|
|
|
148
41
|
body {
|
|
149
|
-
background-color: var(--
|
|
150
|
-
color: var(--
|
|
151
|
-
line-height:
|
|
42
|
+
background-color: var(--s-surface-page);
|
|
43
|
+
color: var(--s-ink-primary);
|
|
44
|
+
line-height: var(--p-leading-normal);
|
|
152
45
|
}
|
|
153
46
|
|
|
154
|
-
/*
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
--card: oklch(0.95 0 0);
|
|
160
|
-
--card-foreground: oklch(0 0 0);
|
|
161
|
-
|
|
162
|
-
--popover: oklch(0.95 0 0);
|
|
163
|
-
--popover-foreground: oklch(0 0 0);
|
|
164
|
-
|
|
165
|
-
--primary: oklch(0.35 0.22 250); /* deep blue */
|
|
166
|
-
--primary-foreground: oklch(1 0 0);
|
|
167
|
-
|
|
168
|
-
--secondary: oklch(0.85 0 0);
|
|
169
|
-
--secondary-foreground: oklch(0 0 0);
|
|
170
|
-
|
|
171
|
-
--muted: oklch(0.90 0 0);
|
|
172
|
-
--muted-foreground: oklch(0.30 0 0);
|
|
173
|
-
|
|
174
|
-
--accent: oklch(0.35 0.22 250);
|
|
175
|
-
--accent-foreground: oklch(1 0 0);
|
|
176
|
-
|
|
177
|
-
--destructive: oklch(0.50 0.25 25);
|
|
178
|
-
--destructive-foreground: oklch(1 0 0);
|
|
179
|
-
|
|
180
|
-
--border: oklch(0.60 0 0);
|
|
181
|
-
--input: oklch(0.60 0 0);
|
|
182
|
-
--ring: oklch(0.35 0.22 250);
|
|
183
|
-
|
|
184
|
-
--brand-accent: oklch(0.35 0.22 250);
|
|
47
|
+
/* DS v0 is a dark-only design system. `.dark` is a no-op alias for parity
|
|
48
|
+
* with downstream apps that still wire `<html class="dark">`. */
|
|
49
|
+
.dark {
|
|
50
|
+
/* All tokens already render dark at :root. Intentionally empty. */
|
|
185
51
|
}
|