@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/dist/css/utilities.css ADDED
@@ -0,0 +1,260 @@
1
+ /* ============================================================
2
+ SoliDS — Utility Classes
3
+ Lightweight, token-driven utility layer.
4
+ Import via: @import "@Soli92/solids/css/index.css"
5
+ ============================================================ */
6
+
7
+ /* ─── Display ────────────────────────────────────────────── */
8
+ .sd-block { display: block; }
9
+ .sd-inline { display: inline; }
10
+ .sd-inline-block { display: inline-block; }
11
+ .sd-flex { display: flex; }
12
+ .sd-inline-flex { display: inline-flex; }
13
+ .sd-grid { display: grid; }
14
+ .sd-hidden { display: none; }
15
+
16
+ /* ─── Flex helpers ───────────────────────────────────────── */
17
+ .sd-flex-col { flex-direction: column; }
18
+ .sd-flex-row { flex-direction: row; }
19
+ .sd-flex-wrap { flex-wrap: wrap; }
20
+ .sd-flex-nowrap { flex-wrap: nowrap; }
21
+ .sd-flex-1 { flex: 1 1 0%; }
22
+ .sd-flex-auto { flex: 1 1 auto; }
23
+ .sd-flex-none { flex: none; }
24
+ .sd-items-start { align-items: flex-start; }
25
+ .sd-items-center { align-items: center; }
26
+ .sd-items-end { align-items: flex-end; }
27
+ .sd-items-stretch{ align-items: stretch; }
28
+ .sd-justify-start { justify-content: flex-start; }
29
+ .sd-justify-center { justify-content: center; }
30
+ .sd-justify-end { justify-content: flex-end; }
31
+ .sd-justify-between{ justify-content: space-between; }
32
+ .sd-justify-around { justify-content: space-around; }
33
+
34
+ /* ─── Gap ────────────────────────────────────────────────── */
35
+ .sd-gap-xs { gap: var(--sd-space-xs); }
36
+ .sd-gap-sm { gap: var(--sd-space-sm); }
37
+ .sd-gap-md { gap: var(--sd-space-md); }
38
+ .sd-gap-lg { gap: var(--sd-space-lg); }
39
+ .sd-gap-xl { gap: var(--sd-space-xl); }
40
+ .sd-gap-2xl { gap: var(--sd-space-2xl); }
41
+
42
+ /* ─── Padding ────────────────────────────────────────────── */
43
+ .sd-p-xs { padding: var(--sd-space-xs); }
44
+ .sd-p-sm { padding: var(--sd-space-sm); }
45
+ .sd-p-md { padding: var(--sd-space-md); }
46
+ .sd-p-lg { padding: var(--sd-space-lg); }
47
+ .sd-p-xl { padding: var(--sd-space-xl); }
48
+ .sd-p-2xl { padding: var(--sd-space-2xl); }
49
+
50
+ .sd-px-xs { padding-inline: var(--sd-space-xs); }
51
+ .sd-px-sm { padding-inline: var(--sd-space-sm); }
52
+ .sd-px-md { padding-inline: var(--sd-space-md); }
53
+ .sd-px-lg { padding-inline: var(--sd-space-lg); }
54
+ .sd-px-xl { padding-inline: var(--sd-space-xl); }
55
+
56
+ .sd-py-xs { padding-block: var(--sd-space-xs); }
57
+ .sd-py-sm { padding-block: var(--sd-space-sm); }
58
+ .sd-py-md { padding-block: var(--sd-space-md); }
59
+ .sd-py-lg { padding-block: var(--sd-space-lg); }
60
+ .sd-py-xl { padding-block: var(--sd-space-xl); }
61
+
62
+ /* ─── Margin ─────────────────────────────────────────────── */
63
+ .sd-m-auto { margin: auto; }
64
+ .sd-mx-auto { margin-inline: auto; }
65
+ .sd-my-auto { margin-block: auto; }
66
+ .sd-m-xs { margin: var(--sd-space-xs); }
67
+ .sd-m-sm { margin: var(--sd-space-sm); }
68
+ .sd-m-md { margin: var(--sd-space-md); }
69
+ .sd-m-lg { margin: var(--sd-space-lg); }
70
+ .sd-m-xl { margin: var(--sd-space-xl); }
71
+
72
+ /* ─── Width / Height ─────────────────────────────────────── */
73
+ .sd-w-full { width: 100%; }
74
+ .sd-w-screen { width: 100vw; }
75
+ .sd-w-auto { width: auto; }
76
+ .sd-h-full { height: 100%; }
77
+ .sd-h-screen { height: 100vh; }
78
+ .sd-h-auto { height: auto; }
79
+ .sd-min-h-screen { min-height: 100vh; }
80
+ .sd-max-w-sm { max-width: 640px; }
81
+ .sd-max-w-md { max-width: 768px; }
82
+ .sd-max-w-lg { max-width: 1024px; }
83
+ .sd-max-w-xl { max-width: 1280px; }
84
+
85
+ /* ─── Typography ─────────────────────────────────────────── */
86
+ .sd-text-xs { font-size: var(--sd-font-size-xs); }
87
+ .sd-text-sm { font-size: var(--sd-font-size-sm); }
88
+ .sd-text-base { font-size: var(--sd-font-size-base); }
89
+ .sd-text-lg { font-size: var(--sd-font-size-lg); }
90
+ .sd-text-xl { font-size: var(--sd-font-size-xl); }
91
+ .sd-text-2xl { font-size: var(--sd-font-size-2xl); }
92
+ .sd-text-3xl { font-size: var(--sd-font-size-3xl); }
93
+ .sd-text-4xl { font-size: var(--sd-font-size-4xl); }
94
+
95
+ .sd-font-light { font-weight: var(--sd-font-weight-light); }
96
+ .sd-font-regular { font-weight: var(--sd-font-weight-regular); }
97
+ .sd-font-medium { font-weight: var(--sd-font-weight-medium); }
98
+ .sd-font-semibold { font-weight: var(--sd-font-weight-semibold); }
99
+ .sd-font-bold { font-weight: var(--sd-font-weight-bold); }
100
+
101
+ .sd-font-sans { font-family: var(--sd-font-body); }
102
+ .sd-font-mono { font-family: var(--sd-font-mono); }
103
+
104
+ .sd-text-left { text-align: left; }
105
+ .sd-text-center { text-align: center; }
106
+ .sd-text-right { text-align: right; }
107
+
108
+ .sd-leading-tight { line-height: 1.25; }
109
+ .sd-leading-normal { line-height: 1.5; }
110
+ .sd-leading-relaxed { line-height: 1.625; }
111
+
112
+ .sd-truncate {
113
+ overflow: hidden;
114
+ text-overflow: ellipsis;
115
+ white-space: nowrap;
116
+ }
117
+ .sd-break-words { overflow-wrap: break-word; }
118
+
119
+ /* ─── Colors ─────────────────────────────────────────────── */
120
+ .sd-text-primary { color: var(--sd-color-text-primary); }
121
+ .sd-text-secondary { color: var(--sd-color-text-secondary); }
122
+ .sd-text-tertiary { color: var(--sd-color-text-tertiary); }
123
+ .sd-text-disabled { color: var(--sd-color-text-disabled); }
124
+ .sd-text-inverse { color: var(--sd-color-text-inverse); }
125
+ .sd-text-link { color: var(--sd-color-text-link); }
126
+
127
+ .sd-text-success { color: var(--sd-color-intent-success); }
128
+ .sd-text-warning { color: var(--sd-color-intent-warning); }
129
+ .sd-text-danger { color: var(--sd-color-intent-danger); }
130
+ .sd-text-info { color: var(--sd-color-intent-info); }
131
+
132
+ .sd-bg-canvas { background-color: var(--sd-color-bg-canvas); }
133
+ .sd-bg-surface { background-color: var(--sd-color-bg-surface); }
134
+ .sd-bg-elevated { background-color: var(--sd-color-bg-elevated); }
135
+
136
+ /* ─── Borders ────────────────────────────────────────────── */
137
+ .sd-border { border: 1px solid var(--sd-color-border-default); }
138
+ .sd-border-muted { border: 1px solid var(--sd-color-border-muted); }
139
+ .sd-border-strong { border: 1px solid var(--sd-color-border-strong); }
140
+ .sd-border-t { border-top: 1px solid var(--sd-color-border-default); }
141
+ .sd-border-b { border-bottom: 1px solid var(--sd-color-border-default); }
142
+
143
+ /* ─── Border Radius ──────────────────────────────────────── */
144
+ .sd-rounded-none { border-radius: var(--sd-radius-none, 0); }
145
+ .sd-rounded-sm { border-radius: var(--sd-radius-sm); }
146
+ .sd-rounded-md { border-radius: var(--sd-radius-md); }
147
+ .sd-rounded-lg { border-radius: var(--sd-radius-lg); }
148
+ .sd-rounded-xl { border-radius: var(--sd-radius-xl); }
149
+ .sd-rounded-full { border-radius: var(--sd-radius-full); }
150
+
151
+ /* ─── Shadows ────────────────────────────────────────────── */
152
+ .sd-shadow-sm { box-shadow: var(--sd-shadow-sm); }
153
+ .sd-shadow-md { box-shadow: var(--sd-shadow-md); }
154
+ .sd-shadow-lg { box-shadow: var(--sd-shadow-lg); }
155
+ .sd-shadow-xl { box-shadow: var(--sd-shadow-xl); }
156
+ .sd-shadow-none { box-shadow: none; }
157
+
158
+ /* ─── Position ───────────────────────────────────────────── */
159
+ .sd-relative { position: relative; }
160
+ .sd-absolute { position: absolute; }
161
+ .sd-fixed { position: fixed; }
162
+ .sd-sticky { position: sticky; }
163
+ .sd-inset-0 { inset: 0; }
164
+ .sd-top-0 { top: 0; }
165
+
166
+ /* ─── Overflow ───────────────────────────────────────────── */
167
+ .sd-overflow-hidden { overflow: hidden; }
168
+ .sd-overflow-auto { overflow: auto; }
169
+ .sd-overflow-scroll { overflow: scroll; }
170
+ .sd-overflow-x-auto { overflow-x: auto; }
171
+ .sd-overflow-y-auto { overflow-y: auto; }
172
+
173
+ /* ─── Opacity / Visibility ───────────────────────────────── */
174
+ .sd-opacity-0 { opacity: 0; }
175
+ .sd-opacity-50 { opacity: 0.5; }
176
+ .sd-opacity-100 { opacity: 1; }
177
+ .sd-invisible { visibility: hidden; }
178
+ .sd-visible { visibility: visible; }
179
+ .sd-sr-only {
180
+ position: absolute;
181
+ width: 1px; height: 1px;
182
+ padding: 0; margin: -1px;
183
+ overflow: hidden;
184
+ clip: rect(0,0,0,0);
185
+ white-space: nowrap;
186
+ border-width: 0;
187
+ }
188
+
189
+ /* ─── Cursor ─────────────────────────────────────────────── */
190
+ .sd-cursor-pointer { cursor: pointer; }
191
+ .sd-cursor-default { cursor: default; }
192
+ .sd-cursor-not-allowed { cursor: not-allowed; }
193
+
194
+ /* ─── Transition ─────────────────────────────────────────── */
195
+ .sd-transition {
196
+ transition-property: color, background-color, border-color, box-shadow, opacity, transform;
197
+ transition-duration: var(--sd-duration-normal);
198
+ transition-timing-function: var(--sd-easing-ease-inout);
199
+ }
200
+ .sd-transition-fast {
201
+ transition-property: color, background-color, border-color, box-shadow, opacity, transform;
202
+ transition-duration: var(--sd-duration-fast);
203
+ transition-timing-function: var(--sd-easing-ease-inout);
204
+ }
205
+
206
+ /* ─── Z-index ────────────────────────────────────────────── */
207
+ .sd-z-dropdown { z-index: var(--sd-z-dropdown); }
208
+ .sd-z-sticky { z-index: var(--sd-z-sticky); }
209
+ .sd-z-overlay { z-index: var(--sd-z-overlay); }
210
+ .sd-z-modal { z-index: var(--sd-z-modal); }
211
+ .sd-z-toast { z-index: var(--sd-z-toast); }
212
+ .sd-z-tooltip { z-index: var(--sd-z-tooltip); }
213
+
214
+ /* ─── Common component patterns ──────────────────────────── */
215
+
216
+ /* Container */
217
+ .sd-container {
218
+ width: 100%;
219
+ max-width: 1280px;
220
+ margin-inline: auto;
221
+ padding-inline: var(--sd-space-md);
222
+ }
223
+
224
+ /* Card */
225
+ .sd-card {
226
+ background-color: var(--sd-color-bg-elevated);
227
+ border: 1px solid var(--sd-color-border-default);
228
+ border-radius: var(--sd-radius-lg);
229
+ box-shadow: var(--sd-shadow-sm);
230
+ padding: var(--sd-space-lg);
231
+ }
232
+
233
+ /* Badge */
234
+ .sd-badge {
235
+ display: inline-flex;
236
+ align-items: center;
237
+ padding: 2px var(--sd-space-sm);
238
+ border-radius: var(--sd-radius-full);
239
+ font-size: var(--sd-font-size-xs);
240
+ font-weight: var(--sd-font-weight-medium);
241
+ background-color: var(--sd-color-secondary-default);
242
+ color: var(--sd-color-secondary-foreground);
243
+ }
244
+ .sd-badge-success { background-color: var(--sd-color-intent-success-bg); color: var(--sd-color-intent-success); }
245
+ .sd-badge-warning { background-color: var(--sd-color-intent-warning-bg); color: var(--sd-color-intent-warning); }
246
+ .sd-badge-danger { background-color: var(--sd-color-intent-danger-bg); color: var(--sd-color-intent-danger); }
247
+ .sd-badge-info { background-color: var(--sd-color-intent-info-bg); color: var(--sd-color-intent-info); }
248
+
249
+ /* Divider */
250
+ .sd-divider {
251
+ border: none;
252
+ border-top: 1px solid var(--sd-color-border-default);
253
+ margin-block: var(--sd-space-md);
254
+ }
255
+
256
+ /* Focus ring */
257
+ .sd-focus-ring:focus-visible {
258
+ outline: 2px solid var(--sd-color-border-focus);
259
+ outline-offset: 2px;
260
+ }
package/dist/css/variables.css ADDED
@@ -0,0 +1,305 @@
1
+ /* SoliDS — CSS Variables (auto-generated, do not edit) */
2
+
3
+ :root {
4
+ --sd-color-gray-0: #FFFFFF;
5
+ --sd-color-gray-50: #F9FAFB;
6
+ --sd-color-gray-100: #F3F4F6;
7
+ --sd-color-gray-200: #E5E7EB;
8
+ --sd-color-gray-300: #D1D5DB;
9
+ --sd-color-gray-400: #9CA3AF;
10
+ --sd-color-gray-500: #6B7280;
11
+ --sd-color-gray-600: #4B5563;
12
+ --sd-color-gray-700: #374151;
13
+ --sd-color-gray-800: #1F2937;
14
+ --sd-color-gray-900: #111827;
15
+ --sd-color-gray-950: #030712;
16
+ --sd-color-blue-50: #EFF6FF;
17
+ --sd-color-blue-100: #DBEAFE;
18
+ --sd-color-blue-200: #BFDBFE;
19
+ --sd-color-blue-300: #93C5FD;
20
+ --sd-color-blue-400: #60A5FA;
21
+ --sd-color-blue-500: #3B82F6;
22
+ --sd-color-blue-600: #2563EB;
23
+ --sd-color-blue-700: #1D4ED8;
24
+ --sd-color-blue-800: #1E40AF;
25
+ --sd-color-blue-900: #1E3A8A;
26
+ --sd-color-green-50: #F0FDF4;
27
+ --sd-color-green-100: #DCFCE7;
28
+ --sd-color-green-400: #4ADE80;
29
+ --sd-color-green-500: #22C55E;
30
+ --sd-color-green-600: #16A34A;
31
+ --sd-color-green-700: #15803D;
32
+ --sd-color-green-900: #14532D;
33
+ --sd-color-amber-50: #FFFBEB;
34
+ --sd-color-amber-100: #FEF3C7;
35
+ --sd-color-amber-400: #FBBF24;
36
+ --sd-color-amber-500: #F59E0B;
37
+ --sd-color-amber-600: #D97706;
38
+ --sd-color-amber-700: #B45309;
39
+ --sd-color-amber-900: #78350F;
40
+ --sd-color-red-50: #FEF2F2;
41
+ --sd-color-red-100: #FEE2E2;
42
+ --sd-color-red-400: #F87171;
43
+ --sd-color-red-500: #EF4444;
44
+ --sd-color-red-600: #DC2626;
45
+ --sd-color-red-700: #B91C1C;
46
+ --sd-color-red-900: #7F1D1D;
47
+ --sd-color-violet-50: #F5F3FF;
48
+ --sd-color-violet-100: #EDE9FE;
49
+ --sd-color-violet-400: #A78BFA;
50
+ --sd-color-violet-500: #8B5CF6;
51
+ --sd-color-violet-600: #7C3AED;
52
+ --sd-color-violet-700: #6D28D9;
53
+ --sd-color-violet-900: #4C1D95;
54
+ --sd-color-white: #FFFFFF;
55
+ --sd-color-black: #000000;
56
+ --sd-color-transparent: transparent;
57
+ --sd-space-0: 0px;
58
+ --sd-space-1: 4px;
59
+ --sd-space-2: 8px;
60
+ --sd-space-3: 12px;
61
+ --sd-space-4: 16px;
62
+ --sd-space-5: 20px;
63
+ --sd-space-6: 24px;
64
+ --sd-space-7: 28px;
65
+ --sd-space-8: 32px;
66
+ --sd-space-9: 36px;
67
+ --sd-space-10: 40px;
68
+ --sd-space-12: 48px;
69
+ --sd-space-14: 56px;
70
+ --sd-space-16: 64px;
71
+ --sd-space-20: 80px;
72
+ --sd-space-24: 96px;
73
+ --sd-space-32: 128px;
74
+ --sd-space-40: 160px;
75
+ --sd-space-48: 192px;
76
+ --sd-space-64: 256px;
77
+ --sd-space-px: 1px;
78
+ --sd-space-0.5: 2px;
79
+ --sd-space-1.5: 6px;
80
+ --sd-space-2.5: 10px;
81
+ --sd-space-3.5: 14px;
82
+ --sd-radius-none: 0px;
83
+ --sd-radius-sm: 4px;
84
+ --sd-radius-md: 8px;
85
+ --sd-radius-lg: 12px;
86
+ --sd-radius-xl: 16px;
87
+ --sd-radius-2xl: 20px;
88
+ --sd-radius-3xl: 24px;
89
+ --sd-radius-full: 9999px;
90
+ --sd-font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
91
+ --sd-font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
92
+ --sd-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
93
+ --sd-font-size-xs: 0.75rem;
94
+ --sd-font-size-sm: 0.875rem;
95
+ --sd-font-size-base: 1rem;
96
+ --sd-font-size-lg: 1.125rem;
97
+ --sd-font-size-xl: 1.25rem;
98
+ --sd-font-size-2xl: 1.5rem;
99
+ --sd-font-size-3xl: 1.875rem;
100
+ --sd-font-size-4xl: 2.25rem;
101
+ --sd-font-size-5xl: 3rem;
102
+ --sd-font-size-6xl: 3.75rem;
103
+ --sd-font-weight-light: 300;
104
+ --sd-font-weight-regular: 400;
105
+ --sd-font-weight-medium: 500;
106
+ --sd-font-weight-semibold: 600;
107
+ --sd-font-weight-bold: 700;
108
+ --sd-font-weight-extrabold: 800;
109
+ --sd-font-leading-none: 1;
110
+ --sd-font-leading-tight: 1.25;
111
+ --sd-font-leading-snug: 1.375;
112
+ --sd-font-leading-normal: 1.5;
113
+ --sd-font-leading-relaxed: 1.625;
114
+ --sd-font-leading-loose: 2;
115
+ --sd-font-tracking-tight: -0.05em;
116
+ --sd-font-tracking-normal: 0em;
117
+ --sd-font-tracking-wide: 0.025em;
118
+ --sd-font-tracking-wider: 0.05em;
119
+ --sd-font-tracking-widest: 0.1em;
120
+ --sd-shadow-none: none;
121
+ --sd-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
122
+ --sd-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
123
+ --sd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
124
+ --sd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
125
+ --sd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
126
+ --sd-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
127
+ --sd-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
128
+ --sd-duration-instant: 0ms;
129
+ --sd-duration-fast: 100ms;
130
+ --sd-duration-normal: 200ms;
131
+ --sd-duration-slow: 300ms;
132
+ --sd-duration-slower: 500ms;
133
+ --sd-easing-linear: linear;
134
+ --sd-easing-ease: ease;
135
+ --sd-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
136
+ --sd-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
137
+ --sd-easing-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
138
+ --sd-z-hide: -1;
139
+ --sd-z-base: 0;
140
+ --sd-z-raised: 1;
141
+ --sd-z-dropdown: 10;
142
+ --sd-z-sticky: 100;
143
+ --sd-z-overlay: 200;
144
+ --sd-z-modal: 300;
145
+ --sd-z-toast: 400;
146
+ --sd-z-tooltip: 500;
147
+ --sd-color-text-primary: #111827;
148
+ --sd-color-text-secondary: #4B5563;
149
+ --sd-color-text-tertiary: #6B7280;
150
+ --sd-color-text-disabled: #9CA3AF;
151
+ --sd-color-text-inverse: #FFFFFF;
152
+ --sd-color-text-link: #2563EB;
153
+ --sd-color-text-link-hover: #1D4ED8;
154
+ --sd-color-bg-canvas: #FFFFFF;
155
+ --sd-color-bg-surface: #F9FAFB;
156
+ --sd-color-bg-elevated: #FFFFFF;
157
+ --sd-color-bg-overlay: rgba(0,0,0,0.5);
158
+ --sd-color-bg-hover: #F3F4F6;
159
+ --sd-color-bg-active: #E5E7EB;
160
+ --sd-color-bg-disabled: #F3F4F6;
161
+ --sd-color-border-default: #E5E7EB;
162
+ --sd-color-border-muted: #F3F4F6;
163
+ --sd-color-border-strong: #9CA3AF;
164
+ --sd-color-border-focus: #3B82F6;
165
+ --sd-color-border-disabled: #E5E7EB;
166
+ --sd-color-intent-success: #16A34A;
167
+ --sd-color-intent-success-bg: #F0FDF4;
168
+ --sd-color-intent-success-border: #4ADE80;
169
+ --sd-color-intent-warning: #D97706;
170
+ --sd-color-intent-warning-bg: #FFFBEB;
171
+ --sd-color-intent-warning-border: #FBBF24;
172
+ --sd-color-intent-danger: #DC2626;
173
+ --sd-color-intent-danger-bg: #FEF2F2;
174
+ --sd-color-intent-danger-border: #F87171;
175
+ --sd-color-intent-info: #2563EB;
176
+ --sd-color-intent-info-bg: #EFF6FF;
177
+ --sd-color-intent-info-border: #93C5FD;
178
+ --sd-color-primary-default: #2563EB;
179
+ --sd-color-primary-hover: #1D4ED8;
180
+ --sd-color-primary-active: #1E40AF;
181
+ --sd-color-primary-subtle: #EFF6FF;
182
+ --sd-color-primary-foreground: #FFFFFF;
183
+ --sd-color-secondary-default: #F3F4F6;
184
+ --sd-color-secondary-hover: #E5E7EB;
185
+ --sd-color-secondary-active: #D1D5DB;
186
+ --sd-color-secondary-foreground: #111827;
187
+ --sd-color-muted-default: #F3F4F6;
188
+ --sd-color-muted-foreground: #6B7280;
189
+ --sd-color-accent-default: #F3F4F6;
190
+ --sd-color-accent-foreground: #111827;
191
+ --sd-color-destructive-default: #DC2626;
192
+ --sd-color-destructive-foreground: #FFFFFF;
193
+ --sd-space-xs: 4px;
194
+ --sd-space-sm: 8px;
195
+ --sd-space-md: 16px;
196
+ --sd-space-lg: 24px;
197
+ --sd-space-xl: 32px;
198
+ --sd-space-2xl: 48px;
199
+ --sd-space-3xl: 64px;
200
+ --sd-radius-sm: 4px;
201
+ --sd-radius-md: 8px;
202
+ --sd-radius-lg: 12px;
203
+ --sd-radius-xl: 16px;
204
+ --sd-radius-full: 9999px;
205
+ --sd-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
206
+ --sd-font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
207
+ --sd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
208
+ --sd-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
209
+ --sd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
210
+ --sd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
211
+ --sd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
212
+ --sd-color-text-primary: #111827;
213
+ --sd-color-text-secondary: #4B5563;
214
+ --sd-color-text-tertiary: #6B7280;
215
+ --sd-color-text-disabled: #9CA3AF;
216
+ --sd-color-text-inverse: #FFFFFF;
217
+ --sd-color-text-link: #2563EB;
218
+ --sd-color-text-link-hover: #1D4ED8;
219
+ --sd-color-bg-canvas: #FFFFFF;
220
+ --sd-color-bg-surface: #F9FAFB;
221
+ --sd-color-bg-elevated: #FFFFFF;
222
+ --sd-color-bg-hover: #F3F4F6;
223
+ --sd-color-bg-active: #E5E7EB;
224
+ --sd-color-bg-disabled: #F3F4F6;
225
+ --sd-color-border-default: #E5E7EB;
226
+ --sd-color-border-muted: #F3F4F6;
227
+ --sd-color-border-strong: #9CA3AF;
228
+ --sd-color-border-focus: #3B82F6;
229
+ --sd-color-border-disabled: #E5E7EB;
230
+ --sd-color-intent-success: #16A34A;
231
+ --sd-color-intent-success-bg: #F0FDF4;
232
+ --sd-color-intent-success-border: #4ADE80;
233
+ --sd-color-intent-warning: #D97706;
234
+ --sd-color-intent-warning-bg: #FFFBEB;
235
+ --sd-color-intent-warning-border: #FBBF24;
236
+ --sd-color-intent-danger: #DC2626;
237
+ --sd-color-intent-danger-bg: #FEF2F2;
238
+ --sd-color-intent-danger-border: #F87171;
239
+ --sd-color-intent-info: #2563EB;
240
+ --sd-color-intent-info-bg: #EFF6FF;
241
+ --sd-color-intent-info-border: #93C5FD;
242
+ --sd-color-primary-default: #2563EB;
243
+ --sd-color-primary-hover: #1D4ED8;
244
+ --sd-color-primary-active: #1E40AF;
245
+ --sd-color-primary-subtle: #EFF6FF;
246
+ --sd-color-primary-foreground: #FFFFFF;
247
+ --sd-color-secondary-default: #F3F4F6;
248
+ --sd-color-secondary-hover: #E5E7EB;
249
+ --sd-color-secondary-active: #D1D5DB;
250
+ --sd-color-secondary-foreground: #111827;
251
+ --sd-color-muted-default: #F3F4F6;
252
+ --sd-color-muted-foreground: #6B7280;
253
+ --sd-color-accent-default: #F3F4F6;
254
+ --sd-color-accent-foreground: #111827;
255
+ --sd-color-destructive-default: #DC2626;
256
+ --sd-color-destructive-foreground: #FFFFFF;
257
+ }
258
+
259
+ [data-theme="light"] {
260
+ --sd-color-text-primary: #111827;
261
+ --sd-color-text-secondary: #4B5563;
262
+ --sd-color-text-tertiary: #6B7280;
263
+ --sd-color-text-disabled: #9CA3AF;
264
+ --sd-color-text-inverse: #FFFFFF;
265
+ --sd-color-text-link: #2563EB;
266
+ --sd-color-text-link-hover: #1D4ED8;
267
+ --sd-color-bg-canvas: #FFFFFF;
268
+ --sd-color-bg-surface: #F9FAFB;
269
+ --sd-color-bg-elevated: #FFFFFF;
270
+ --sd-color-bg-hover: #F3F4F6;
271
+ --sd-color-bg-active: #E5E7EB;
272
+ --sd-color-bg-disabled: #F3F4F6;
273
+ --sd-color-border-default: #E5E7EB;
274
+ --sd-color-border-muted: #F3F4F6;
275
+ --sd-color-border-strong: #9CA3AF;
276
+ --sd-color-border-focus: #3B82F6;
277
+ --sd-color-border-disabled: #E5E7EB;
278
+ --sd-color-intent-success: #16A34A;
279
+ --sd-color-intent-success-bg: #F0FDF4;
280
+ --sd-color-intent-success-border: #4ADE80;
281
+ --sd-color-intent-warning: #D97706;
282
+ --sd-color-intent-warning-bg: #FFFBEB;
283
+ --sd-color-intent-warning-border: #FBBF24;
284
+ --sd-color-intent-danger: #DC2626;
285
+ --sd-color-intent-danger-bg: #FEF2F2;
286
+ --sd-color-intent-danger-border: #F87171;
287
+ --sd-color-intent-info: #2563EB;
288
+ --sd-color-intent-info-bg: #EFF6FF;
289
+ --sd-color-intent-info-border: #93C5FD;
290
+ --sd-color-primary-default: #2563EB;
291
+ --sd-color-primary-hover: #1D4ED8;
292
+ --sd-color-primary-active: #1E40AF;
293
+ --sd-color-primary-subtle: #EFF6FF;
294
+ --sd-color-primary-foreground: #FFFFFF;
295
+ --sd-color-secondary-default: #F3F4F6;
296
+ --sd-color-secondary-hover: #E5E7EB;
297
+ --sd-color-secondary-active: #D1D5DB;
298
+ --sd-color-secondary-foreground: #111827;
299
+ --sd-color-muted-default: #F3F4F6;
300
+ --sd-color-muted-foreground: #6B7280;
301
+ --sd-color-accent-default: #F3F4F6;
302
+ --sd-color-accent-foreground: #111827;
303
+ --sd-color-destructive-default: #DC2626;
304
+ --sd-color-destructive-foreground: #FFFFFF;
305
+ }