@codelitdev/design-system 0.1.0-alpha.0 → 0.1.0-alpha.1
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 +83 -6
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -9,11 +9,19 @@ the preset and keep their own shadcn components.
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
11
11
|
Published to npm as a public package. The current release line is a prerelease
|
|
12
|
-
under the `alpha` dist-tag
|
|
12
|
+
under the `alpha` dist-tag.
|
|
13
|
+
|
|
14
|
+
> [!WARNING]
|
|
15
|
+
> **`latest` currently also points at `0.1.0-alpha.0`.** npm always sets
|
|
16
|
+
> `latest` on a package's first-ever publish, regardless of `--tag` — this is
|
|
17
|
+
> unavoidable until a real stable version is cut, at which point publishing it
|
|
18
|
+
> moves `latest` forward automatically. Until then, **always pin the exact
|
|
19
|
+
> version** — do not `npm install @codelitdev/design-system` bare, and do not
|
|
20
|
+
> use a caret/tilde range (`^0.1.0-alpha.0` would still resolve to a
|
|
21
|
+
> prerelease, which is at least explicit — but a bare install with no version
|
|
22
|
+
> silently means "whatever `latest` is," which right now is this alpha).
|
|
13
23
|
|
|
14
24
|
```sh
|
|
15
|
-
npm install @codelitdev/design-system@alpha
|
|
16
|
-
# or a specific version
|
|
17
25
|
npm install @codelitdev/design-system@0.1.0-alpha.0
|
|
18
26
|
```
|
|
19
27
|
|
|
@@ -38,17 +46,86 @@ module.exports = {
|
|
|
38
46
|
};
|
|
39
47
|
```
|
|
40
48
|
|
|
41
|
-
3. Scope the product on
|
|
49
|
+
3. Scope the product on the **`<html>`** element (not `<body>`):
|
|
42
50
|
```tsx
|
|
43
|
-
<
|
|
51
|
+
<html data-product="sendlit"> {/* courselit | medialit | sendlit | frontlit, omit for CodeLit amber */}
|
|
44
52
|
```
|
|
53
|
+
> [!IMPORTANT]
|
|
54
|
+
> Put `data-product` on `<html>`, not `<body>`. The product scope only overrides
|
|
55
|
+
> `--primary`/`--ring`; any token you alias at `:root` that references `--primary`
|
|
56
|
+
> (e.g. shadcn's `--sidebar-primary: var(--primary)`) resolves that `var()` **at the
|
|
57
|
+
> declaring element**. If the override sits on `<body>` (a child of `:root`), those
|
|
58
|
+
> `:root` aliases freeze to the base amber and never pick up the product accent —
|
|
59
|
+
> while direct `bg-primary` utilities still turn green, producing a confusing split.
|
|
45
60
|
|
|
46
61
|
4. Fonts: load Hanken Grotesk + Spline Sans Mono via `next/font/google` (or your framework's font loader), mapped to `--font-sans` / `--font-mono`.
|
|
47
62
|
|
|
48
|
-
5. Components
|
|
63
|
+
5. **Components — install from the shadcn registry** (see [Components](#components-shadcn-registry) below). These are real shadcn/Radix components styled to the design system, so your app's buttons/badges/cards *are* the DS's — no hand-porting. The plain-React `src/components/` classes (`components.css`) remain as visual reference only.
|
|
49
64
|
|
|
50
65
|
6. Logos: `@codelitdev/design-system/assets/logo-<product>.svg`.
|
|
51
66
|
|
|
67
|
+
## Components (shadcn registry)
|
|
68
|
+
|
|
69
|
+
The design system ships its components as a **shadcn registry** so every product
|
|
70
|
+
installs the *same* styled components (buttons, badges, cards, …) via the shadcn
|
|
71
|
+
CLI — keeping all four apps on one component layer instead of each re-styling its
|
|
72
|
+
own. They're standard shadcn/Radix components; they pull their look from the DS
|
|
73
|
+
tokens, so make sure `@codelitdev/design-system/styles.css` is imported (above).
|
|
74
|
+
|
|
75
|
+
Add the registry namespace to your app's `components.json`:
|
|
76
|
+
|
|
77
|
+
```jsonc
|
|
78
|
+
{
|
|
79
|
+
"registries": {
|
|
80
|
+
"@codelit": "https://raw.githubusercontent.com/codelitdev/design-system/main/public/r/{name}.json"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Then install components like any other shadcn component:
|
|
86
|
+
|
|
87
|
+
```sh
|
|
88
|
+
npx shadcn@latest add @codelit/button @codelit/badge @codelit/card
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Or install a single component directly by URL, no config:
|
|
92
|
+
|
|
93
|
+
```sh
|
|
94
|
+
npx shadcn@latest add https://raw.githubusercontent.com/codelitdev/design-system/main/public/r/button.json
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Available components
|
|
98
|
+
|
|
99
|
+
| Component | Notes |
|
|
100
|
+
|---|---|
|
|
101
|
+
| `button` | `primary` / `secondary` / `outline` / `ghost` / **`soft`** / `destructive`; `sm` `md` `lg` (30/36/42px) |
|
|
102
|
+
| `icon-button` | Square icon-only; `ghost` / `outline`; `sm` `md` |
|
|
103
|
+
| `badge` | `default` / `neutral` / `success` / `warning` / `destructive` / `outline`; `dot` prop |
|
|
104
|
+
| `card` | + `CardHeader` `CardTitle` `CardDescription` `CardContent` `CardFooter` |
|
|
105
|
+
| `input` | Accent-wash focus ring; `aria-invalid` → destructive |
|
|
106
|
+
| `textarea` | Multiline form of `input` |
|
|
107
|
+
| `label` | 13px semibold field label |
|
|
108
|
+
| `checkbox` | 18px, 5px radius, accent fill when checked |
|
|
109
|
+
| `radio-group` | + `RadioGroupItem` |
|
|
110
|
+
| `switch` | 36×21 track, accent when on |
|
|
111
|
+
| `select` | Trigger matches `input`; token-styled popover |
|
|
112
|
+
| `tabs` | Segmented; active trigger lifts onto a card surface |
|
|
113
|
+
| `dialog` | Warm scrim, 16px radius; full Radix parts |
|
|
114
|
+
| `tooltip` | Dark chip; `TooltipProvider` included |
|
|
115
|
+
| `toast` | Presentational card (`default`/`success`/`destructive`) — drive with your own queue |
|
|
116
|
+
|
|
117
|
+
Install everything at once:
|
|
118
|
+
|
|
119
|
+
```sh
|
|
120
|
+
npx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
|
|
121
|
+
@codelit/input @codelit/textarea @codelit/label @codelit/checkbox @codelit/radio-group \
|
|
122
|
+
@codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/tooltip @codelit/toast
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**Maintainers:** component sources live in `registry/codelit/ui/`. After changing
|
|
126
|
+
one, rebuild the served JSON with `pnpm registry:build` (→ `public/r/*.json`) and
|
|
127
|
+
commit it — the raw-URL install serves those committed files.
|
|
128
|
+
|
|
52
129
|
## Publishing
|
|
53
130
|
|
|
54
131
|
Prereleases go under the `alpha` dist-tag so a plain `npm install` never grabs
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codelitdev/design-system",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.1",
|
|
4
4
|
"description": "Shared CodeLit design tokens, Tailwind preset, and React primitives for CourseLit, MediaLit, SendLit, and FrontLit.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "CodeLit",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"main": "src/index.ts",
|
|
16
16
|
"types": "src/index.ts",
|
|
17
17
|
"scripts": {
|
|
18
|
-
"release:alpha": "npm publish --tag alpha"
|
|
18
|
+
"release:alpha": "npm publish --tag alpha",
|
|
19
|
+
"registry:build": "shadcn build"
|
|
19
20
|
},
|
|
20
21
|
"exports": {
|
|
21
22
|
".": "./src/index.ts",
|
|
@@ -39,6 +40,7 @@
|
|
|
39
40
|
],
|
|
40
41
|
"devDependencies": {
|
|
41
42
|
"@types/react": "^19.2.17",
|
|
42
|
-
"lucide-react": "^0.544.0"
|
|
43
|
+
"lucide-react": "^0.544.0",
|
|
44
|
+
"shadcn": "^4.14.0"
|
|
43
45
|
}
|
|
44
46
|
}
|