@nadicodeai/design-system 0.1.1 → 0.3.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.
@@ -2,7 +2,7 @@
2
2
  "theme": {
3
3
  "extend": {
4
4
  "colors": {
5
- "primary": "#171717",
5
+ "primary": "#008c45",
6
6
  "on-primary": "#ffffff",
7
7
  "ink": "#171717",
8
8
  "body": "#4d4d4d",
@@ -13,31 +13,125 @@
13
13
  "line": "#e5e5e5",
14
14
  "seam": "#e4e7ec",
15
15
  "cross": "#a1a1a1",
16
- "link": "#007a5e",
17
- "link-deep": "#005d49",
18
- "link-bg-soft": "#d8f0e9",
16
+ "link": "#007a3c",
17
+ "link-deep": "#00602f",
18
+ "link-bg-soft": "#d9f6e4",
19
+ "accent": "#cd212a",
20
+ "info": "#2743d8",
19
21
  "success": "#008c45",
20
22
  "error": "#b80022",
21
- "error-soft": "#f4d7dc",
22
- "error-deep": "#820018",
23
+ "error-soft": "#fce4e4",
24
+ "error-deep": "#9c001d",
23
25
  "warning": "#f5a623",
24
- "warning-soft": "#ffefcf",
25
- "warning-deep": "#ab570a",
26
- "cyan": "#50e3c2",
27
- "cyan-soft": "#aaffec",
28
- "cyan-deep": "#29bc9b",
26
+ "warning-soft": "#fff1cf",
27
+ "warning-deep": "#8f4a06",
29
28
  "flag-red": "#cd212a",
30
- "gradient-develop-start": "#007a5e",
31
- "gradient-develop-end": "#00dfd8",
32
- "gradient-ship-start": "#b80022",
33
- "gradient-ship-end": "#f9cb28",
34
29
  "selection-bg": "#171717",
35
30
  "selection-fg": "#f2f2f2",
36
- "state-ready": "#171717",
37
- "state-running": "#007a5e",
31
+ "state-ready": "#4d4d4d",
32
+ "state-running": "#2743d8",
38
33
  "state-review": "#f5a623",
39
34
  "state-blocked": "#b80022",
40
- "state-complete": "#008c45"
35
+ "state-complete": "#008c45",
36
+ "background-100": "#ffffff",
37
+ "background-200": "#fafafa",
38
+ "gray-100": "#f2f2f2",
39
+ "gray-200": "#ebebeb",
40
+ "gray-300": "#e6e6e6",
41
+ "gray-400": "#eaeaea",
42
+ "gray-500": "#c9c9c9",
43
+ "gray-600": "#a8a8a8",
44
+ "gray-700": "#8f8f8f",
45
+ "gray-800": "#7d7d7d",
46
+ "gray-900": "#4d4d4d",
47
+ "gray-1000": "#171717",
48
+ "green-italia-100": "#e8faef",
49
+ "green-italia-200": "#d9f6e4",
50
+ "green-italia-300": "#c3f0d4",
51
+ "green-italia-400": "#9fe6bc",
52
+ "green-italia-500": "#62d494",
53
+ "green-italia-600": "#17b568",
54
+ "green-italia-700": "#008c45",
55
+ "green-italia-800": "#007a3c",
56
+ "green-italia-900": "#00602f",
57
+ "green-italia-1000": "#00301a",
58
+ "red-italia-100": "#fdeeee",
59
+ "red-italia-200": "#fce4e4",
60
+ "red-italia-300": "#fad3d4",
61
+ "red-italia-400": "#f7b3b5",
62
+ "red-italia-500": "#f28085",
63
+ "red-italia-600": "#e84e57",
64
+ "red-italia-700": "#cd212a",
65
+ "red-italia-800": "#b80022",
66
+ "red-italia-900": "#9c001d",
67
+ "red-italia-1000": "#4a000e",
68
+ "blue-cobalto-100": "#eef2ff",
69
+ "blue-cobalto-200": "#e2e9fe",
70
+ "blue-cobalto-300": "#cdd9fd",
71
+ "blue-cobalto-400": "#a9befa",
72
+ "blue-cobalto-500": "#7d99f2",
73
+ "blue-cobalto-600": "#4f6ae6",
74
+ "blue-cobalto-700": "#2743d8",
75
+ "blue-cobalto-800": "#1d33ad",
76
+ "blue-cobalto-900": "#16277f",
77
+ "blue-cobalto-1000": "#0a1240",
78
+ "amber-100": "#fff6e1",
79
+ "amber-200": "#fff1cf",
80
+ "amber-300": "#ffe9b3",
81
+ "amber-400": "#ffd97d",
82
+ "amber-500": "#ffc933",
83
+ "amber-600": "#f5a623",
84
+ "amber-700": "#d98800",
85
+ "amber-800": "#b36b00",
86
+ "amber-900": "#8f4a06",
87
+ "amber-1000": "#452301",
88
+ "campo-verde": "#008c45",
89
+ "campo-rosso": "#cd212a",
90
+ "campo-arancio": "#e4530b",
91
+ "campo-giallo": "#f2b705",
92
+ "campo-cobalto": "#2743d8",
93
+ "campo-inchiostro": "#171717",
94
+ "campo-bianco": "#ffffff",
95
+ "chart-1": "#2743d8",
96
+ "chart-2": "#008c45",
97
+ "chart-3": "#f5a623",
98
+ "chart-4": "#cd212a",
99
+ "chart-5": "#00838f",
100
+ "chart-6": "#6f42c1",
101
+ "dark-canvas": "#0a0a0a",
102
+ "dark-canvas-soft": "#171717",
103
+ "dark-canvas-soft-2": "#262626",
104
+ "dark-ink": "#f5f5f5",
105
+ "dark-body": "#d4d4d4",
106
+ "dark-muted": "#a3a3a3",
107
+ "dark-line": "#2e2e2e",
108
+ "dark-input": "#5d5d5d",
109
+ "dark-seam": "#1f1f1f",
110
+ "dark-primary": "#ededed",
111
+ "dark-on-primary": "#0a0a0a",
112
+ "dark-link": "#9fe6bc",
113
+ "dark-link-deep": "#c3f0d4",
114
+ "dark-link-bg-soft": "#00301a",
115
+ "dark-error": "#f7b3b5",
116
+ "dark-error-soft": "#4a000e",
117
+ "dark-error-deep": "#fad3d4",
118
+ "dark-warning": "#ffd97d",
119
+ "dark-warning-soft": "#452301",
120
+ "dark-warning-deep": "#ffe9b3",
121
+ "dark-cyan": "#33d1cb",
122
+ "dark-cyan-soft": "#7ee8de",
123
+ "dark-cyan-deep": "#1f9e9a",
124
+ "dark-success": "#62d494",
125
+ "dark-state-ready": "#d4d4d4",
126
+ "dark-state-running": "#a9befa",
127
+ "dark-state-review": "#ffd97d",
128
+ "dark-state-blocked": "#f7b3b5",
129
+ "dark-state-complete": "#62d494",
130
+ "dark-selection-bg": "#ededed",
131
+ "dark-selection-fg": "#0a0a0a",
132
+ "dark-cross": "#6e6e6e",
133
+ "dark-chart-1": "#7d99f2",
134
+ "dark-chart-6": "#9575cd"
41
135
  },
42
136
  "fontFamily": {
43
137
  "display-xl": [
@@ -232,11 +326,11 @@
232
326
  },
233
327
  "borderRadius": {
234
328
  "none": "0px",
235
- "xs": "4px",
236
- "sm": "6px",
237
- "md": "8px",
238
- "lg": "12px",
239
- "xl": "16px",
329
+ "xs": "2px",
330
+ "sm": "4px",
331
+ "md": "6px",
332
+ "lg": "8px",
333
+ "xl": "10px",
240
334
  "pill-sm": "64px",
241
335
  "pill": "100px",
242
336
  "full": "9999px"
@@ -1,7 +1,7 @@
1
1
  /* Generated by Style Dictionary (scripts/sd) from the @google/design.md Tailwind export. */
2
2
  /* Do not edit directly. Run npm run build. */
3
3
 
4
- /* === SHADCN ADAPTER: light roles → references to faithful brand tokens (no dark layer). === */
4
+ /* === SHADCN ADAPTER: light/dark roles → references to faithful brand tokens. === */
5
5
  :root {
6
6
  --radius: var(--radius-md);
7
7
  --background: var(--color-canvas);
@@ -10,12 +10,12 @@
10
10
  --card-foreground: var(--color-ink);
11
11
  --popover: var(--color-canvas);
12
12
  --popover-foreground: var(--color-ink);
13
- --primary: var(--color-primary);
13
+ --primary: var(--color-nadicode-primary);
14
14
  --primary-foreground: var(--color-on-primary);
15
15
  --secondary: var(--color-canvas-soft);
16
16
  --secondary-foreground: var(--color-ink);
17
17
  --muted: var(--color-canvas-soft);
18
- --muted-foreground: var(--color-muted);
18
+ --muted-foreground: var(--color-nadicode-muted);
19
19
  --accent: var(--color-canvas-soft-2);
20
20
  --accent-foreground: var(--color-ink);
21
21
  --destructive: var(--color-error);
@@ -23,14 +23,14 @@
23
23
  --border: var(--color-line);
24
24
  --input: var(--color-line);
25
25
  --ring: var(--color-link);
26
- --chart-1: var(--color-link);
27
- --chart-2: var(--color-cyan);
28
- --chart-3: var(--color-flag-red);
29
- --chart-4: var(--color-gradient-ship-end);
30
- --chart-5: var(--color-error);
26
+ --chart-1: var(--color-nadicode-chart-1);
27
+ --chart-2: var(--color-nadicode-chart-2);
28
+ --chart-3: var(--color-nadicode-chart-3);
29
+ --chart-4: var(--color-nadicode-chart-4);
30
+ --chart-5: var(--color-nadicode-chart-5);
31
31
  --sidebar: var(--color-canvas-soft);
32
32
  --sidebar-foreground: var(--color-ink);
33
- --sidebar-primary: var(--color-primary);
33
+ --sidebar-primary: var(--color-ink);
34
34
  --sidebar-primary-foreground: var(--color-on-primary);
35
35
  --sidebar-accent: var(--color-canvas-soft-2);
36
36
  --sidebar-accent-foreground: var(--color-ink);
@@ -38,6 +38,50 @@
38
38
  --sidebar-ring: var(--color-link);
39
39
  }
40
40
 
41
+ .dark {
42
+ --radius: var(--radius-md);
43
+ --background: var(--color-dark-canvas);
44
+ --foreground: var(--color-dark-ink);
45
+ --card: var(--color-dark-canvas-soft);
46
+ --card-foreground: var(--color-dark-ink);
47
+ --popover: var(--color-dark-canvas-soft);
48
+ --popover-foreground: var(--color-dark-ink);
49
+ --primary: var(--color-dark-primary);
50
+ --primary-foreground: var(--color-dark-on-primary);
51
+ --secondary: var(--color-dark-canvas-soft);
52
+ --secondary-foreground: var(--color-dark-ink);
53
+ --muted: var(--color-dark-canvas-soft);
54
+ --muted-foreground: var(--color-dark-muted);
55
+ --accent: var(--color-dark-canvas-soft-2);
56
+ --accent-foreground: var(--color-dark-ink);
57
+ --destructive: var(--color-dark-error);
58
+ --destructive-foreground: var(--color-dark-on-primary);
59
+ --border: var(--color-dark-line);
60
+ --input: var(--color-dark-input);
61
+ --ring: var(--color-dark-link);
62
+ --chart-1: var(--color-dark-chart-1);
63
+ --chart-2: var(--color-nadicode-chart-2);
64
+ --chart-3: var(--color-nadicode-chart-3);
65
+ --chart-4: var(--color-nadicode-chart-4);
66
+ --chart-5: var(--color-nadicode-chart-5);
67
+ --sidebar: var(--color-dark-canvas-soft);
68
+ --sidebar-foreground: var(--color-dark-ink);
69
+ --sidebar-primary: var(--color-dark-primary);
70
+ --sidebar-primary-foreground: var(--color-dark-on-primary);
71
+ --sidebar-accent: var(--color-dark-canvas-soft-2);
72
+ --sidebar-accent-foreground: var(--color-dark-ink);
73
+ --sidebar-border: var(--color-dark-line);
74
+ --sidebar-ring: var(--color-dark-link);
75
+ --nc-state-ready: var(--nc-dark-state-ready);
76
+ --nc-state-running: var(--nc-dark-state-running);
77
+ --nc-state-review: var(--nc-dark-state-review);
78
+ --nc-state-blocked: var(--nc-dark-state-blocked);
79
+ --nc-state-complete: var(--nc-dark-state-complete);
80
+ --nc-selection-bg: var(--nc-dark-selection-bg);
81
+ --nc-selection-fg: var(--nc-dark-selection-fg);
82
+ --nc-cross: var(--nc-dark-cross);
83
+ }
84
+
41
85
  :root {
42
86
  --nadicode-spacing-xxs: var(--spacing-nadicode-xxs);
43
87
  --nadicode-spacing-xs: var(--spacing-nadicode-xs);
@@ -100,7 +144,7 @@
100
144
 
101
145
  /* === FAITHFUL PROJECTION of the @google/design.md Tailwind export. === */
102
146
  @theme {
103
- --color-primary: #171717;
147
+ --color-primary: #008c45;
104
148
  --color-on-primary: #ffffff;
105
149
  --color-ink: #171717;
106
150
  --color-body: #4d4d4d;
@@ -111,32 +155,132 @@
111
155
  --color-line: #e5e5e5;
112
156
  --color-seam: #e4e7ec;
113
157
  --color-cross: #a1a1a1;
114
- --color-link: #007a5e;
115
- --color-link-deep: #005d49;
116
- --color-link-bg-soft: #d8f0e9;
158
+ --color-link: #007a3c;
159
+ --color-link-deep: #00602f;
160
+ --color-link-bg-soft: #d9f6e4;
161
+ --color-accent: #cd212a;
162
+ --color-info: #2743d8;
117
163
  --color-success: #008c45;
118
164
  --color-error: #b80022;
119
- --color-error-soft: #f4d7dc;
120
- --color-error-deep: #820018;
165
+ --color-error-soft: #fce4e4;
166
+ --color-error-deep: #9c001d;
121
167
  --color-warning: #f5a623;
122
- --color-warning-soft: #ffefcf;
123
- --color-warning-deep: #ab570a;
124
- --color-cyan: #50e3c2;
125
- --color-cyan-soft: #aaffec;
126
- --color-cyan-deep: #29bc9b;
168
+ --color-warning-soft: #fff1cf;
169
+ --color-warning-deep: #8f4a06;
127
170
  --color-flag-red: #cd212a;
128
- --color-gradient-develop-start: #007a5e;
129
- --color-gradient-develop-end: #00dfd8;
130
- --color-gradient-ship-start: #b80022;
131
- --color-gradient-ship-end: #f9cb28;
132
171
  --color-selection-bg: #171717;
133
172
  --color-selection-fg: #f2f2f2;
134
- --color-state-ready: #171717;
135
- --color-state-running: #007a5e;
173
+ --color-state-ready: #4d4d4d;
174
+ --color-state-running: #2743d8;
136
175
  --color-state-review: #f5a623;
137
176
  --color-state-blocked: #b80022;
138
177
  --color-state-complete: #008c45;
139
- --color-nadicode-muted: var(--color-muted);
178
+ --color-background-100: #ffffff;
179
+ --color-background-200: #fafafa;
180
+ --color-gray-100: #f2f2f2;
181
+ --color-gray-200: #ebebeb;
182
+ --color-gray-300: #e6e6e6;
183
+ --color-gray-400: #eaeaea;
184
+ --color-gray-500: #c9c9c9;
185
+ --color-gray-600: #a8a8a8;
186
+ --color-gray-700: #8f8f8f;
187
+ --color-gray-800: #7d7d7d;
188
+ --color-gray-900: #4d4d4d;
189
+ --color-gray-1000: #171717;
190
+ --color-green-italia-100: #e8faef;
191
+ --color-green-italia-200: #d9f6e4;
192
+ --color-green-italia-300: #c3f0d4;
193
+ --color-green-italia-400: #9fe6bc;
194
+ --color-green-italia-500: #62d494;
195
+ --color-green-italia-600: #17b568;
196
+ --color-green-italia-700: #008c45;
197
+ --color-green-italia-800: #007a3c;
198
+ --color-green-italia-900: #00602f;
199
+ --color-green-italia-1000: #00301a;
200
+ --color-red-italia-100: #fdeeee;
201
+ --color-red-italia-200: #fce4e4;
202
+ --color-red-italia-300: #fad3d4;
203
+ --color-red-italia-400: #f7b3b5;
204
+ --color-red-italia-500: #f28085;
205
+ --color-red-italia-600: #e84e57;
206
+ --color-red-italia-700: #cd212a;
207
+ --color-red-italia-800: #b80022;
208
+ --color-red-italia-900: #9c001d;
209
+ --color-red-italia-1000: #4a000e;
210
+ --color-blue-cobalto-100: #eef2ff;
211
+ --color-blue-cobalto-200: #e2e9fe;
212
+ --color-blue-cobalto-300: #cdd9fd;
213
+ --color-blue-cobalto-400: #a9befa;
214
+ --color-blue-cobalto-500: #7d99f2;
215
+ --color-blue-cobalto-600: #4f6ae6;
216
+ --color-blue-cobalto-700: #2743d8;
217
+ --color-blue-cobalto-800: #1d33ad;
218
+ --color-blue-cobalto-900: #16277f;
219
+ --color-blue-cobalto-1000: #0a1240;
220
+ --color-amber-100: #fff6e1;
221
+ --color-amber-200: #fff1cf;
222
+ --color-amber-300: #ffe9b3;
223
+ --color-amber-400: #ffd97d;
224
+ --color-amber-500: #ffc933;
225
+ --color-amber-600: #f5a623;
226
+ --color-amber-700: #d98800;
227
+ --color-amber-800: #b36b00;
228
+ --color-amber-900: #8f4a06;
229
+ --color-amber-1000: #452301;
230
+ --color-campo-verde: #008c45;
231
+ --color-campo-rosso: #cd212a;
232
+ --color-campo-arancio: #e4530b;
233
+ --color-campo-giallo: #f2b705;
234
+ --color-campo-cobalto: #2743d8;
235
+ --color-campo-inchiostro: #171717;
236
+ --color-campo-bianco: #ffffff;
237
+ --color-chart-1: #2743d8;
238
+ --color-chart-2: #008c45;
239
+ --color-chart-3: #f5a623;
240
+ --color-chart-4: #cd212a;
241
+ --color-chart-5: #00838f;
242
+ --color-chart-6: #6f42c1;
243
+ --color-dark-canvas: #0a0a0a;
244
+ --color-dark-canvas-soft: #171717;
245
+ --color-dark-canvas-soft-2: #262626;
246
+ --color-dark-ink: #f5f5f5;
247
+ --color-dark-body: #d4d4d4;
248
+ --color-dark-muted: #a3a3a3;
249
+ --color-dark-line: #2e2e2e;
250
+ --color-dark-input: #5d5d5d;
251
+ --color-dark-seam: #1f1f1f;
252
+ --color-dark-primary: #ededed;
253
+ --color-dark-on-primary: #0a0a0a;
254
+ --color-dark-link: #9fe6bc;
255
+ --color-dark-link-deep: #c3f0d4;
256
+ --color-dark-link-bg-soft: #00301a;
257
+ --color-dark-error: #f7b3b5;
258
+ --color-dark-error-soft: #4a000e;
259
+ --color-dark-error-deep: #fad3d4;
260
+ --color-dark-warning: #ffd97d;
261
+ --color-dark-warning-soft: #452301;
262
+ --color-dark-warning-deep: #ffe9b3;
263
+ --color-dark-cyan: #33d1cb;
264
+ --color-dark-cyan-soft: #7ee8de;
265
+ --color-dark-cyan-deep: #1f9e9a;
266
+ --color-dark-success: #62d494;
267
+ --color-dark-state-ready: #d4d4d4;
268
+ --color-dark-state-running: #a9befa;
269
+ --color-dark-state-review: #ffd97d;
270
+ --color-dark-state-blocked: #f7b3b5;
271
+ --color-dark-state-complete: #62d494;
272
+ --color-dark-selection-bg: #ededed;
273
+ --color-dark-selection-fg: #0a0a0a;
274
+ --color-dark-cross: #6e6e6e;
275
+ --color-dark-chart-1: #7d99f2;
276
+ --color-dark-chart-6: #9575cd;
277
+ --color-nadicode-muted: #888888;
278
+ --color-nadicode-primary: #008c45;
279
+ --color-nadicode-chart-1: #2743d8;
280
+ --color-nadicode-chart-2: #008c45;
281
+ --color-nadicode-chart-3: #f5a623;
282
+ --color-nadicode-chart-4: #cd212a;
283
+ --color-nadicode-chart-5: #00838f;
140
284
  --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif;
141
285
  --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif;
142
286
  --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif;
@@ -274,11 +418,11 @@
274
418
  --text-button-lg--font-weight: 500;
275
419
  --font-weight-button-lg: 500;
276
420
  --radius-none: 0px;
277
- --radius-xs: 4px;
278
- --radius-sm: 6px;
279
- --radius-md: 8px;
280
- --radius-lg: 12px;
281
- --radius-xl: 16px;
421
+ --radius-xs: 2px;
422
+ --radius-sm: 4px;
423
+ --radius-md: 6px;
424
+ --radius-lg: 8px;
425
+ --radius-xl: 10px;
282
426
  --radius-pill-sm: 64px;
283
427
  --radius-pill: 100px;
284
428
  --radius-full: 9999px;