@soli92/solids 1.0.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 (11) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/LICENSE +0 -0
  3. package/README.md +231 -0
  4. package/dist/css/base.css +56 -0
  5. package/dist/css/index.css +6 -0
  6. package/dist/css/shadcn.css +167 -0
  7. package/dist/css/themes.css +101 -0
  8. package/dist/css/utilities.css +260 -0
  9. package/dist/css/variables.css +305 -0
  10. package/dist/tokens/tokens.json +421 -0
  11. package/package.json +68 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,25 @@
1
+ # 1.0.0 (2026-03-24)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **base:** add prefers-color-scheme dark support for color-scheme property ([f055741](https://github.com/Soli92/solids/commit/f0557414b2fe1da5de8e46b7708676cc054f697f))
7
+ * **ci:** pass NODE_AUTH_TOKEN for npm auth via setup-node ([9de7228](https://github.com/Soli92/solids/commit/9de72289c35ba69e37e5a7eecf2dd426af63d99f))
8
+ * **ci:** upgrade Node to 22 for semantic-release compatibility ([3b0f4c0](https://github.com/Soli92/solids/commit/3b0f4c04e98dfb0ab4f6e3b97445d91c6a27f083))
9
+ * **docs:** fix npm package name casing (must be lowercase) + fix import paths ([e51bd71](https://github.com/Soli92/solids/commit/e51bd713618c91e0893529d2570d89663c535ed2))
10
+ * **release:** add missing semantic-release core plugins to devDependencies ([8b57869](https://github.com/Soli92/solids/commit/8b57869fdd2e85a3af79cb51c5bcb435b3ad313a))
11
+ * **release:** correct semantic-release plugin order (git must be last) ([94d674b](https://github.com/Soli92/solids/commit/94d674b877120fd4c25bc5a42bf771912fe49341))
12
+ * **shadcn:** complete truncated dark theme block ([f7e36d9](https://github.com/Soli92/solids/commit/f7e36d99cb19c9278240830f476f8652ebcfd850))
13
+ * **tokens:** add missing overlay color in dark theme ([ba011dd](https://github.com/Soli92/solids/commit/ba011ddf5d43c5e77643906a79eda069683586e7))
14
+
15
+
16
+ ### Features
17
+
18
+ * add real utility classes to utilities.css ([34112a4](https://github.com/Soli92/solids/commit/34112a40516f9b1c964af45cbd93aca9e30634a9))
19
+ * add shadcn.css export and update package exports ([274256f](https://github.com/Soli92/solids/commit/274256fe21fded1053201d2ad8a6cfe3a50eb47e))
20
+ * **css:** add shadcn/ui compatibility layer — maps shadcn vars to SoliDS tokens ([324131b](https://github.com/Soli92/solids/commit/324131b18823edcc71900d840cc3a099159eb129))
21
+ * **tokens:** complete dark theme — all semantic overrides for dark mode ([8649ce5](https://github.com/Soli92/solids/commit/8649ce542afa682926d73306d31d732c4985bdca))
22
+ * **tokens:** complete light theme — all semantic overrides ([6d5f857](https://github.com/Soli92/solids/commit/6d5f857581a8642da6eab5dcd30c1eb1987d8c4d))
23
+ * **tokens:** complete semantic tokens — text, bg, border, intent, interactive ([668d4b0](https://github.com/Soli92/solids/commit/668d4b0b21bf98b624aa33f4a7709937a537d5d6))
24
+ * **tokens:** expand base palette — full color scale, typography, shadow, spacing ([06f1499](https://github.com/Soli92/solids/commit/06f1499ccfc003d39c082590048d1484ef24f6af))
25
+ * update build script to generate shadcn.css and full CSS variables ([a483dae](https://github.com/Soli92/solids/commit/a483dae64fc1ca97013dfd16124a73ad8609a2cd))
package/LICENSE ADDED
File without changes
package/README.md ADDED
@@ -0,0 +1,231 @@
1
+ # SoliDS
2
+
3
+ **SoliDS** è il design system personale di [Soli92](https://github.com/Soli92) —
4
+ una fondamenta **agnostica** basata su **design tokens** e **CSS variables**,
5
+ pronta all'uso con qualsiasi framework web e compatibile con **shadcn/ui**.
6
+
7
+ ---
8
+
9
+ ## Cosa include
10
+
11
+ | Layer | File | Descrizione |
12
+ |-------|------|-------------|
13
+ | 🎨 Tokens | `dist/tokens/tokens.json` | Palette completa, spacing, tipografia, shadow, radius, easing, z-index |
14
+ | 🔤 Variables | `dist/css/variables.css` | CSS vars `--sd-*` per tema light (default) |
15
+ | 🌗 Themes | `dist/css/themes.css` | Override dark + `prefers-color-scheme` |
16
+ | 🔗 shadcn | `dist/css/shadcn.css` | Mapping variabili shadcn/ui → token SoliDS |
17
+ | 🧱 Base | `dist/css/base.css` | Reset minimale, body, focus-visible, box-sizing |
18
+ | 🛠️ Utilities | `dist/css/utilities.css` | Classi utility `sd-*` (flex, spacing, colori, badge, card…) |
19
+ | 📦 Index | `dist/css/index.css` | Entrypoint unico che importa tutto nell'ordine corretto |
20
+
21
+ ---
22
+
23
+ ## Installazione
24
+
25
+ ```bash
26
+ npm install @soli92/solids
27
+ ```
28
+
29
+ ---
30
+
31
+ ## Quick Start
32
+
33
+ ### Con Tailwind + shadcn/ui (Next.js, Vite…)
34
+
35
+ ```css
36
+ /* globals.css */
37
+ @import "@soli92/solids/css/index.css";
38
+
39
+ @tailwind base;
40
+ @tailwind components;
41
+ @tailwind utilities;
42
+ ```
43
+
44
+ ```js
45
+ // tailwind.config.js
46
+ module.exports = {
47
+ darkMode: ["class", '[data-theme="dark"]'],
48
+ theme: {
49
+ extend: {
50
+ colors: {
51
+ background: "var(--background)",
52
+ foreground: "var(--foreground)",
53
+ primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
54
+ secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
55
+ muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
56
+ accent: { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
57
+ destructive: { DEFAULT: "var(--destructive)",foreground: "var(--destructive-foreground)" },
58
+ card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
59
+ popover: { DEFAULT: "var(--popover)", foreground: "var(--popover-foreground)" },
60
+ border: "var(--border)",
61
+ input: "var(--input)",
62
+ ring: "var(--ring)",
63
+ },
64
+ borderRadius: {
65
+ lg: "var(--radius)",
66
+ md: "calc(var(--radius) - 2px)",
67
+ sm: "calc(var(--radius) - 4px)",
68
+ },
69
+ },
70
+ },
71
+ };
72
+ ```
73
+
74
+ ➡️ Guida completa: [docs/shadcn-integration.md](./docs/shadcn-integration.md)
75
+
76
+ ### Senza framework
77
+
78
+ ```html
79
+ <link rel="stylesheet" href="node_modules/@soli92/solids/dist/css/index.css" />
80
+ ```
81
+
82
+ ---
83
+
84
+ ## Esportazioni disponibili
85
+
86
+ ```js
87
+ import tokens from "@soli92/solids/tokens"; // tokens.json
88
+ import "@soli92/solids/css/index.css"; // tutto
89
+ import "@soli92/solids/css/variables.css"; // solo vars
90
+ import "@soli92/solids/css/themes.css"; // solo dark
91
+ import "@soli92/solids/css/shadcn.css"; // solo shadcn layer
92
+ import "@soli92/solids/css/base.css"; // solo base
93
+ import "@soli92/solids/css/utilities.css"; // solo utilities
94
+ ```
95
+
96
+ ---
97
+
98
+ ## Token Reference
99
+
100
+ ### Colori (palette base)
101
+ `gray` · `blue` · `green` · `amber` · `red` · `violet` — ogni colore ha steps `50→900`.
102
+
103
+ ### Token semantici (`--sd-color-*`)
104
+
105
+ **Testo**
106
+ - `--sd-color-text-primary` / `secondary` / `tertiary` / `disabled` / `inverse` / `link` / `link-hover`
107
+
108
+ **Background**
109
+ - `--sd-color-bg-canvas` / `surface` / `elevated` / `overlay` / `hover` / `active` / `disabled`
110
+
111
+ **Border**
112
+ - `--sd-color-border-default` / `muted` / `strong` / `focus` / `disabled`
113
+
114
+ **Intent**
115
+ - `--sd-color-intent-success` / `warning` / `danger` / `info` (+ `-bg` e `-border` per ognuno)
116
+
117
+ **Componenti**
118
+ - `--sd-color-primary-default` / `hover` / `active` / `subtle` / `foreground`
119
+ - `--sd-color-secondary-*` / `muted-*` / `accent-*` / `destructive-*`
120
+
121
+ ### Spacing (`--sd-space-*`)
122
+ `xs` `sm` `md` `lg` `xl` `2xl` `3xl`
123
+
124
+ ### Radius (`--sd-radius-*`)
125
+ `none` `sm` `md` `lg` `xl` `full`
126
+
127
+ ### Tipografia
128
+ - `--sd-font-size-xs` → `6xl`
129
+ - `--sd-font-weight-light` → `extrabold`
130
+ - `--sd-font-body` / `--sd-font-heading` / `--sd-font-mono`
131
+
132
+ ### Shadow (`--sd-shadow-*`)
133
+ `sm` `md` `lg` `xl`
134
+
135
+ ### Motion
136
+ - `--sd-duration-fast` / `normal` / `slow`
137
+ - `--sd-easing-ease-inout` / `ease-out` / …
138
+
139
+ ### Z-index (`--sd-z-*`)
140
+ `dropdown` `sticky` `overlay` `modal` `toast` `tooltip`
141
+
142
+ ---
143
+
144
+ ## Dark Mode
145
+
146
+ SoliDS supporta tre strategie contemporaneamente:
147
+
148
+ ```html
149
+ <!-- Forza dark -->
150
+ <html data-theme="dark">
151
+
152
+ <!-- Forza light -->
153
+ <html data-theme="light">
154
+
155
+ <!-- Automatico (segue sistema, default) -->
156
+ <html>
157
+ ```
158
+
159
+ Con **next-themes**:
160
+ ```tsx
161
+ <ThemeProvider attribute="data-theme" defaultTheme="system" enableSystem>
162
+ ```
163
+
164
+ ---
165
+
166
+ ## Utility Classes (`sd-*`)
167
+
168
+ ```html
169
+ <!-- Layout -->
170
+ <div class="sd-flex sd-items-center sd-gap-md sd-p-lg">
171
+
172
+ <!-- Tipografia -->
173
+ <h1 class="sd-text-3xl sd-font-bold sd-text-primary">Titolo</h1>
174
+ <p class="sd-text-base sd-text-secondary">Sottotitolo</p>
175
+
176
+ <!-- Card -->
177
+ <div class="sd-card">...</div>
178
+
179
+ <!-- Badge -->
180
+ <span class="sd-badge sd-badge-success">Attivo</span>
181
+ <span class="sd-badge sd-badge-danger">Errore</span>
182
+
183
+ <!-- Container -->
184
+ <main class="sd-container">...</main>
185
+ ```
186
+
187
+ ---
188
+
189
+ ## Sviluppo
190
+
191
+ ```bash
192
+ # Installa dipendenze
193
+ npm install
194
+
195
+ # Build (genera dist/)
196
+ npm run build
197
+
198
+ # Storybook
199
+ npm run storybook
200
+
201
+ # Release (semantic-release — solo da CI)
202
+ npm run release
203
+ ```
204
+
205
+ ---
206
+
207
+ ## Struttura
208
+
209
+ ```
210
+ src/
211
+ ├── tokens/
212
+ │ ├── base.json # Palette, spacing, tipografia, shadow, easing, z-index
213
+ │ ├── semantic.json # Token semantici (testo, bg, border, intent, componenti)
214
+ │ └── themes/
215
+ │ ├── light.json # Override tema light
216
+ │ └── dark.json # Override tema dark
217
+ ├── css/
218
+ │ ├── shadcn.css # Compatibility layer shadcn/ui
219
+ │ ├── base.css # Reset + global styles
220
+ │ └── utilities.css # Classi utility sd-*
221
+ scripts/
222
+ └── build.mjs # Build script → genera dist/
223
+ docs/
224
+ └── shadcn-integration.md # Guida integrazione completa
225
+ ```
226
+
227
+ ---
228
+
229
+ ## License
230
+
231
+ MIT © [Soli92](https://github.com/Soli92)
package/dist/css/base.css ADDED
@@ -0,0 +1,56 @@
1
+ /* SoliDS — Base Styles */
2
+
3
+ /* ─── Color scheme ───────────────────────────────────────── */
4
+ :root {
5
+ color-scheme: light;
6
+ }
7
+
8
+ [data-theme="dark"] {
9
+ color-scheme: dark;
10
+ }
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ :root:not([data-theme="light"]) {
14
+ color-scheme: dark;
15
+ }
16
+ }
17
+
18
+ /* ─── Layout ─────────────────────────────────────────────── */
19
+ html,
20
+ body {
21
+ height: 100%;
22
+ }
23
+
24
+ body {
25
+ margin: 0;
26
+ background: var(--sd-color-bg-canvas);
27
+ color: var(--sd-color-text-primary);
28
+ font-family: var(--sd-font-body);
29
+ font-size: var(--sd-font-size-base);
30
+ line-height: var(--sd-font-leading-normal, 1.5);
31
+ font-weight: var(--sd-font-weight-regular, 400);
32
+ -webkit-font-smoothing: antialiased;
33
+ -moz-osx-font-smoothing: grayscale;
34
+ }
35
+
36
+ /* ─── Focus ──────────────────────────────────────────────── */
37
+ :focus-visible {
38
+ outline: 2px solid var(--sd-color-border-focus);
39
+ outline-offset: 2px;
40
+ }
41
+
42
+ /* ─── Box sizing ─────────────────────────────────────────── */
43
+ *,
44
+ *::before,
45
+ *::after {
46
+ box-sizing: border-box;
47
+ }
48
+
49
+ /* ─── Reduced motion ─────────────────────────────────────── */
50
+ @media (prefers-reduced-motion: reduce) {
51
+ * {
52
+ scroll-behavior: auto !important;
53
+ transition: none !important;
54
+ animation: none !important;
55
+ }
56
+ }
package/dist/css/index.css ADDED
@@ -0,0 +1,6 @@
1
+ /* SoliDS — Entrypoint (auto-generated, do not edit) */
2
+ @import "./variables.css";
3
+ @import "./themes.css";
4
+ @import "./shadcn.css";
5
+ @import "./base.css";
6
+ @import "./utilities.css";
package/dist/css/shadcn.css ADDED
@@ -0,0 +1,167 @@
1
+ /*
2
+ * SoliDS — shadcn/ui Compatibility Layer
3
+ * ----------------------------------------
4
+ * This file maps the shadcn/ui CSS variable convention to SoliDS semantic tokens.
5
+ * Import AFTER variables.css and themes.css.
6
+ *
7
+ * Usage in a Next.js / Vite project with shadcn:
8
+ * import "@soli92/solids/css/index.css";
9
+ *
10
+ * See: https://ui.shadcn.com/docs/theming
11
+ */
12
+
13
+ /* ─── Light (default) ─────────────────────────────────────── */
14
+ :root {
15
+ /* ── Layout ──────────────────────────────────────────────── */
16
+ --background: var(--sd-color-bg-canvas);
17
+ --foreground: var(--sd-color-text-primary);
18
+
19
+ /* ── Card ────────────────────────────────────────────────── */
20
+ --card: var(--sd-color-bg-elevated);
21
+ --card-foreground: var(--sd-color-text-primary);
22
+
23
+ /* ── Popover ─────────────────────────────────────────────── */
24
+ --popover: var(--sd-color-bg-elevated);
25
+ --popover-foreground: var(--sd-color-text-primary);
26
+
27
+ /* ── Primary ─────────────────────────────────────────────── */
28
+ --primary: var(--sd-color-primary-default);
29
+ --primary-foreground: var(--sd-color-primary-foreground);
30
+
31
+ /* ── Secondary ───────────────────────────────────────────── */
32
+ --secondary: var(--sd-color-secondary-default);
33
+ --secondary-foreground: var(--sd-color-secondary-foreground);
34
+
35
+ /* ── Muted ───────────────────────────────────────────────── */
36
+ --muted: var(--sd-color-muted-default);
37
+ --muted-foreground: var(--sd-color-muted-foreground);
38
+
39
+ /* ── Accent ──────────────────────────────────────────────── */
40
+ --accent: var(--sd-color-accent-default);
41
+ --accent-foreground: var(--sd-color-accent-foreground);
42
+
43
+ /* ── Destructive ─────────────────────────────────────────── */
44
+ --destructive: var(--sd-color-destructive-default);
45
+ --destructive-foreground: var(--sd-color-destructive-foreground);
46
+
47
+ /* ── Border / Input / Ring ───────────────────────────────── */
48
+ --border: var(--sd-color-border-default);
49
+ --input: var(--sd-color-border-default);
50
+ --ring: var(--sd-color-border-focus);
51
+
52
+ /* ── Radius (maps to shadcn --radius convention) ─────────── */
53
+ --radius: var(--sd-radius-md);
54
+
55
+ /* ── Chart colors (optional — used by shadcn charts) ─────── */
56
+ --chart-1: var(--sd-color-primary-default);
57
+ --chart-2: var(--sd-color-intent-success);
58
+ --chart-3: var(--sd-color-intent-warning);
59
+ --chart-4: var(--sd-color-intent-danger);
60
+ --chart-5: var(--sd-color-intent-info);
61
+
62
+ /* ── Sidebar (shadcn sidebar component) ─────────────────── */
63
+ --sidebar: var(--sd-color-bg-surface);
64
+ --sidebar-foreground: var(--sd-color-text-primary);
65
+ --sidebar-primary: var(--sd-color-primary-default);
66
+ --sidebar-primary-foreground: var(--sd-color-primary-foreground);
67
+ --sidebar-accent: var(--sd-color-bg-hover);
68
+ --sidebar-accent-foreground: var(--sd-color-text-primary);
69
+ --sidebar-border: var(--sd-color-border-default);
70
+ --sidebar-ring: var(--sd-color-border-focus);
71
+ }
72
+
73
+ /* ─── Dark ────────────────────────────────────────────────── */
74
+ [data-theme="dark"] {
75
+ --background: var(--sd-color-bg-canvas);
76
+ --foreground: var(--sd-color-text-primary);
77
+
78
+ --card: var(--sd-color-bg-elevated);
79
+ --card-foreground: var(--sd-color-text-primary);
80
+
81
+ --popover: var(--sd-color-bg-elevated);
82
+ --popover-foreground: var(--sd-color-text-primary);
83
+
84
+ --primary: var(--sd-color-primary-default);
85
+ --primary-foreground: var(--sd-color-primary-foreground);
86
+
87
+ --secondary: var(--sd-color-secondary-default);
88
+ --secondary-foreground: var(--sd-color-secondary-foreground);
89
+
90
+ --muted: var(--sd-color-muted-default);
91
+ --muted-foreground: var(--sd-color-muted-foreground);
92
+
93
+ --accent: var(--sd-color-accent-default);
94
+ --accent-foreground: var(--sd-color-accent-foreground);
95
+
96
+ --destructive: var(--sd-color-destructive-default);
97
+ --destructive-foreground: var(--sd-color-destructive-foreground);
98
+
99
+ --border: var(--sd-color-border-default);
100
+ --input: var(--sd-color-border-default);
101
+ --ring: var(--sd-color-border-focus);
102
+
103
+ --radius: var(--sd-radius-md);
104
+
105
+ --chart-1: var(--sd-color-primary-default);
106
+ --chart-2: var(--sd-color-intent-success);
107
+ --chart-3: var(--sd-color-intent-warning);
108
+ --chart-4: var(--sd-color-intent-danger);
109
+ --chart-5: var(--sd-color-intent-info);
110
+
111
+ --sidebar: var(--sd-color-bg-surface);
112
+ --sidebar-foreground: var(--sd-color-text-primary);
113
+ --sidebar-primary: var(--sd-color-primary-default);
114
+ --sidebar-primary-foreground: var(--sd-color-primary-foreground);
115
+ --sidebar-accent: var(--sd-color-bg-hover);
116
+ --sidebar-accent-foreground: var(--sd-color-text-primary);
117
+ --sidebar-border: var(--sd-color-border-default);
118
+ --sidebar-ring: var(--sd-color-border-focus);
119
+ }
120
+
121
+ /* ─── System dark (mirrors data-theme="dark") ─────────────── */
122
+ @media (prefers-color-scheme: dark) {
123
+ :root:not([data-theme="light"]) {
124
+ --background: var(--sd-color-bg-canvas);
125
+ --foreground: var(--sd-color-text-primary);
126
+
127
+ --card: var(--sd-color-bg-elevated);
128
+ --card-foreground: var(--sd-color-text-primary);
129
+
130
+ --popover: var(--sd-color-bg-elevated);
131
+ --popover-foreground: var(--sd-color-text-primary);
132
+
133
+ --primary: var(--sd-color-primary-default);
134
+ --primary-foreground: var(--sd-color-primary-foreground);
135
+
136
+ --secondary: var(--sd-color-secondary-default);
137
+ --secondary-foreground: var(--sd-color-secondary-foreground);
138
+
139
+ --muted: var(--sd-color-muted-default);
140
+ --muted-foreground: var(--sd-color-muted-foreground);
141
+
142
+ --accent: var(--sd-color-accent-default);
143
+ --accent-foreground: var(--sd-color-accent-foreground);
144
+
145
+ --destructive: var(--sd-color-destructive-default);
146
+ --destructive-foreground: var(--sd-color-destructive-foreground);
147
+
148
+ --border: var(--sd-color-border-default);
149
+ --input: var(--sd-color-border-default);
150
+ --ring: var(--sd-color-border-focus);
151
+
152
+ --chart-1: var(--sd-color-primary-default);
153
+ --chart-2: var(--sd-color-intent-success);
154
+ --chart-3: var(--sd-color-intent-warning);
155
+ --chart-4: var(--sd-color-intent-danger);
156
+ --chart-5: var(--sd-color-intent-info);
157
+
158
+ --sidebar: var(--sd-color-bg-surface);
159
+ --sidebar-foreground: var(--sd-color-text-primary);
160
+ --sidebar-primary: var(--sd-color-primary-default);
161
+ --sidebar-primary-foreground: var(--sd-color-primary-foreground);
162
+ --sidebar-accent: var(--sd-color-bg-hover);
163
+ --sidebar-accent-foreground: var(--sd-color-text-primary);
164
+ --sidebar-border: var(--sd-color-border-default);
165
+ --sidebar-ring: var(--sd-color-border-focus);
166
+ }
167
+ }
package/dist/css/themes.css ADDED
@@ -0,0 +1,101 @@
1
+ /* SoliDS — Dark Theme (auto-generated, do not edit) */
2
+
3
+ [data-theme="dark"] {
4
+ --sd-color-text-primary: #F9FAFB;
5
+ --sd-color-text-secondary: #D1D5DB;
6
+ --sd-color-text-tertiary: #9CA3AF;
7
+ --sd-color-text-disabled: #6B7280;
8
+ --sd-color-text-inverse: #111827;
9
+ --sd-color-text-link: #60A5FA;
10
+ --sd-color-text-link-hover: #93C5FD;
11
+ --sd-color-bg-canvas: #0B1120;
12
+ --sd-color-bg-surface: #111827;
13
+ --sd-color-bg-elevated: #1F2937;
14
+ --sd-color-bg-overlay: rgba(0,0,0,0.7);
15
+ --sd-color-bg-hover: #1F2937;
16
+ --sd-color-bg-active: #374151;
17
+ --sd-color-bg-disabled: #1F2937;
18
+ --sd-color-border-default: #374151;
19
+ --sd-color-border-muted: #1F2937;
20
+ --sd-color-border-strong: #4B5563;
21
+ --sd-color-border-focus: #60A5FA;
22
+ --sd-color-border-disabled: #374151;
23
+ --sd-color-intent-success: #4ADE80;
24
+ --sd-color-intent-success-bg: #052e16;
25
+ --sd-color-intent-success-border: #166534;
26
+ --sd-color-intent-warning: #FBBF24;
27
+ --sd-color-intent-warning-bg: #1c1004;
28
+ --sd-color-intent-warning-border: #92400e;
29
+ --sd-color-intent-danger: #F87171;
30
+ --sd-color-intent-danger-bg: #1c0404;
31
+ --sd-color-intent-danger-border: #991b1b;
32
+ --sd-color-intent-info: #60A5FA;
33
+ --sd-color-intent-info-bg: #0c1a3a;
34
+ --sd-color-intent-info-border: #1e3a8a;
35
+ --sd-color-primary-default: #3B82F6;
36
+ --sd-color-primary-hover: #60A5FA;
37
+ --sd-color-primary-active: #93C5FD;
38
+ --sd-color-primary-subtle: #0c1a3a;
39
+ --sd-color-primary-foreground: #FFFFFF;
40
+ --sd-color-secondary-default: #1F2937;
41
+ --sd-color-secondary-hover: #374151;
42
+ --sd-color-secondary-active: #4B5563;
43
+ --sd-color-secondary-foreground: #F9FAFB;
44
+ --sd-color-muted-default: #1F2937;
45
+ --sd-color-muted-foreground: #9CA3AF;
46
+ --sd-color-accent-default: #1F2937;
47
+ --sd-color-accent-foreground: #F9FAFB;
48
+ --sd-color-destructive-default: #DC2626;
49
+ --sd-color-destructive-foreground: #FFFFFF;
50
+ }
51
+
52
+ @media (prefers-color-scheme: dark) {
53
+ :root:not([data-theme="light"]) {
54
+ --sd-color-text-primary: #F9FAFB;
55
+ --sd-color-text-secondary: #D1D5DB;
56
+ --sd-color-text-tertiary: #9CA3AF;
57
+ --sd-color-text-disabled: #6B7280;
58
+ --sd-color-text-inverse: #111827;
59
+ --sd-color-text-link: #60A5FA;
60
+ --sd-color-text-link-hover: #93C5FD;
61
+ --sd-color-bg-canvas: #0B1120;
62
+ --sd-color-bg-surface: #111827;
63
+ --sd-color-bg-elevated: #1F2937;
64
+ --sd-color-bg-overlay: rgba(0,0,0,0.7);
65
+ --sd-color-bg-hover: #1F2937;
66
+ --sd-color-bg-active: #374151;
67
+ --sd-color-bg-disabled: #1F2937;
68
+ --sd-color-border-default: #374151;
69
+ --sd-color-border-muted: #1F2937;
70
+ --sd-color-border-strong: #4B5563;
71
+ --sd-color-border-focus: #60A5FA;
72
+ --sd-color-border-disabled: #374151;
73
+ --sd-color-intent-success: #4ADE80;
74
+ --sd-color-intent-success-bg: #052e16;
75
+ --sd-color-intent-success-border: #166534;
76
+ --sd-color-intent-warning: #FBBF24;
77
+ --sd-color-intent-warning-bg: #1c1004;
78
+ --sd-color-intent-warning-border: #92400e;
79
+ --sd-color-intent-danger: #F87171;
80
+ --sd-color-intent-danger-bg: #1c0404;
81
+ --sd-color-intent-danger-border: #991b1b;
82
+ --sd-color-intent-info: #60A5FA;
83
+ --sd-color-intent-info-bg: #0c1a3a;
84
+ --sd-color-intent-info-border: #1e3a8a;
85
+ --sd-color-primary-default: #3B82F6;
86
+ --sd-color-primary-hover: #60A5FA;
87
+ --sd-color-primary-active: #93C5FD;
88
+ --sd-color-primary-subtle: #0c1a3a;
89
+ --sd-color-primary-foreground: #FFFFFF;
90
+ --sd-color-secondary-default: #1F2937;
91
+ --sd-color-secondary-hover: #374151;
92
+ --sd-color-secondary-active: #4B5563;
93
+ --sd-color-secondary-foreground: #F9FAFB;
94
+ --sd-color-muted-default: #1F2937;
95
+ --sd-color-muted-foreground: #9CA3AF;
96
+ --sd-color-accent-default: #1F2937;
97
+ --sd-color-accent-foreground: #F9FAFB;
98
+ --sd-color-destructive-default: #DC2626;
99
+ --sd-color-destructive-foreground: #FFFFFF;
100
+ }
101
+ }