@devfellowship/components 1.1.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/styles/shadcn.css +84 -0
- package/package.json +2 -1
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devfellowship/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "DFL Design System — UI components, hooks, utils and providers",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"require": "./dist/providers.cjs"
|
|
29
29
|
},
|
|
30
30
|
"./styles": "./dist/styles/theme.css",
|
|
31
|
+
"./shadcn": "./dist/styles/shadcn.css",
|
|
31
32
|
"./tokens": "./dist/styles/tokens.css",
|
|
32
33
|
"./tailwind": "./dist/styles/tailwind.css"
|
|
33
34
|
},
|