@salesmind-ai/design-system 1.5.0 → 1.6.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 (2) hide show
  1. package/dist/styles/styles.css +27 -0
  2. package/package.json +2 -2
package/dist/styles/styles.css CHANGED
@@ -49,6 +49,9 @@
49
49
  --font-size-6xl: 3.75rem;
50
50
  --font-size-display: clamp(3rem, 5vw + 1rem, 4.5rem);
51
51
  --font-size-display-sm: clamp(2.25rem, 3.5vw + 0.75rem, 3rem);
52
+ --font-size-display-hero: clamp(4.5rem, 7.4vw, 7.25rem);
53
+ --font-size-display-monument: clamp(4rem, 9vw, 9rem);
54
+ --font-size-display-mega: clamp(7.5rem, 14vw, 13.75rem);
52
55
  --font-size-code-inline: 0.875em;
53
56
  --font-size-suffix: 0.6em;
54
57
  --font-weight-normal: 400;
@@ -179,6 +182,10 @@
179
182
  --glass-1: var(--glass-base);
180
183
  --glass-2: var(--glass-elevated);
181
184
  --glass-3: var(--glass-heavy);
185
+ --glass-blur-sm: 12px;
186
+ --glass-blur-md: 20px;
187
+ --glass-blur-lg: 28px;
188
+ --text-on-brand: #ffffff;
182
189
  }
183
190
  :root,
184
191
  :root[data-theme=dark] {
@@ -215,6 +222,7 @@
215
222
  --glass-highlight-bright: rgba(255, 255, 255, 0.35);
216
223
  --glass-knob-start: rgba(255, 255, 255, 0.95);
217
224
  --glass-knob-end: rgba(255, 255, 255, 0.85);
225
+ --glass-void: rgba(8,4,10,0.72);
218
226
  --outline-rim-top: rgba(255, 255, 255, 0.15);
219
227
  --outline-rim-bottom: rgba(255, 255, 255, 0.05);
220
228
  --interactive-hover-bg: rgba(255, 255, 255, 0.05);
@@ -240,6 +248,7 @@
240
248
  --shadow-interactive-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
241
249
  --shadow-interactive-hover-subtle: 0 12px 40px rgba(0, 0, 0, 0.3);
242
250
  --shadow-interactive-active: 0 4px 20px rgba(0, 0, 0, 0.3);
251
+ --surface-0: rgba(0,0,0,0.4);
243
252
  --surface-alpha-1: rgba(255, 255, 255, 0.05);
244
253
  --surface-alpha-2: rgba(255, 255, 255, 0.1);
245
254
  --surface-alpha-3: rgba(255, 255, 255, 0.15);
@@ -293,6 +302,9 @@
293
302
  --illus-label-color: rgba(255, 255, 255, 0.5);
294
303
  --illus-label-active-color: rgba(255, 255, 255, 0.9);
295
304
  --illus-glow-color: rgba(var(--accent-rgb), 0.15);
305
+ --border-subtle: rgba(255,255,255,0.06);
306
+ --border-default: rgba(255,255,255,0.1);
307
+ --border-strong: rgba(255,255,255,0.18);
296
308
  }
297
309
  :root[data-theme=dark-contrast] {
298
310
  --void-base: #08040a;
@@ -315,6 +327,7 @@
315
327
  --glass-backdrop-heavy: blur(60px) saturate(100%) brightness(60%);
316
328
  --glass-shadow-outer: 0 20px 50px rgba(0, 0, 0, 0.5);
317
329
  --glass-shadow-inner: inset 0 1px 1px rgba(255, 255, 255, 0.15);
330
+ --glass-void: rgba(8,4,10,0.9);
318
331
  --rim-light-top: rgba(255, 255, 255, 0.35);
319
332
  --rim-light-bottom: rgba(255, 255, 255, 0.12);
320
333
  --rim-light-hover-top: rgba(255, 255, 255, 0.45);
@@ -327,6 +340,7 @@
327
340
  --shadow-interactive-hover: 0 12px 40px rgba(0, 0, 0, 0.45);
328
341
  --shadow-interactive-hover-subtle: 0 12px 40px rgba(0, 0, 0, 0.4);
329
342
  --shadow-interactive-active: 0 4px 20px rgba(0, 0, 0, 0.4);
343
+ --surface-0: rgba(0,0,0,0.6);
330
344
  --surface-alpha-1: rgba(255, 255, 255, 0.05);
331
345
  --surface-alpha-2: rgba(255, 255, 255, 0.1);
332
346
  --surface-alpha-3: rgba(255, 255, 255, 0.15);
@@ -352,6 +366,9 @@
352
366
  --illus-label-color: rgba(255, 255, 255, 0.7);
353
367
  --illus-label-active-color: rgba(255, 255, 255, 1);
354
368
  --illus-glow-color: rgba(var(--accent-rgb), 0.2);
369
+ --border-subtle: rgba(255,255,255,0.12);
370
+ --border-default: rgba(255,255,255,0.2);
371
+ --border-strong: rgba(255,255,255,0.32);
355
372
  }
356
373
  :root[data-theme=light] {
357
374
  --void-base: #f4f5f7;
@@ -387,6 +404,7 @@
387
404
  --glass-highlight-bright: rgba(255, 255, 255, 0.8);
388
405
  --glass-knob-start: rgba(255, 255, 255, 1);
389
406
  --glass-knob-end: rgba(255, 255, 255, 0.95);
407
+ --glass-void: rgba(244,245,247,0.7);
390
408
  --outline-rim-top: rgba(0, 0, 0, 0.08);
391
409
  --outline-rim-bottom: rgba(0, 0, 0, 0.03);
392
410
  --interactive-hover-bg: rgba(0, 0, 0, 0.04);
@@ -412,6 +430,7 @@
412
430
  --shadow-interactive-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
413
431
  --shadow-interactive-hover-subtle: 0 12px 40px rgba(0, 0, 0, 0.12);
414
432
  --shadow-interactive-active: 0 4px 20px rgba(0, 0, 0, 0.1);
433
+ --surface-0: rgba(0,0,0,0.06);
415
434
  --surface-alpha-1: rgba(0, 0, 0, 0.03);
416
435
  --surface-alpha-2: rgba(0, 0, 0, 0.06);
417
436
  --surface-alpha-3: rgba(0, 0, 0, 0.09);
@@ -465,6 +484,9 @@
465
484
  --illus-label-color: rgba(0, 0, 0, 0.45);
466
485
  --illus-label-active-color: rgba(0, 0, 0, 0.85);
467
486
  --illus-glow-color: rgba(var(--accent-rgb), 0.1);
487
+ --border-subtle: rgba(0,0,0,0.06);
488
+ --border-default: rgba(0,0,0,0.1);
489
+ --border-strong: rgba(0,0,0,0.18);
468
490
  }
469
491
  :root[data-theme=light-contrast] {
470
492
  --void-base: #ffffff;
@@ -491,6 +513,7 @@
491
513
  --glass-shadow-combined: var(--glass-shadow-outer), var(--glass-shadow-inner);
492
514
  --glass-shadow-elevated: 0 16px 32px rgba(0, 0, 0, 0.12);
493
515
  --glass-shadow-elevated-combined: var(--glass-shadow-elevated), var(--glass-shadow-inner);
516
+ --glass-void: rgba(244,245,247,0.92);
494
517
  --rim-light-top: rgba(0, 0, 0, 0.08);
495
518
  --rim-light-bottom: rgba(0, 0, 0, 0.02);
496
519
  --rim-light-hover-top: rgba(0, 0, 0, 0.12);
@@ -501,6 +524,7 @@
501
524
  --shadow-interactive-hover: 0 12px 40px rgba(0, 0, 0, 0.22);
502
525
  --shadow-interactive-hover-subtle: 0 12px 40px rgba(0, 0, 0, 0.18);
503
526
  --shadow-interactive-active: 0 4px 20px rgba(0, 0, 0, 0.15);
527
+ --surface-0: rgba(0,0,0,0.1);
504
528
  --surface-alpha-1: rgba(0, 0, 0, 0.05);
505
529
  --surface-alpha-2: rgba(0, 0, 0, 0.08);
506
530
  --surface-alpha-3: rgba(0, 0, 0, 0.12);
@@ -526,6 +550,9 @@
526
550
  --illus-label-color: rgba(0, 0, 0, 0.6);
527
551
  --illus-label-active-color: rgba(0, 0, 0, 1);
528
552
  --illus-glow-color: rgba(var(--accent-rgb), 0.15);
553
+ --border-subtle: rgba(0,0,0,0.12);
554
+ --border-default: rgba(0,0,0,0.2);
555
+ --border-strong: rgba(0,0,0,0.32);
529
556
  }
530
557
  :root,
531
558
  :root[data-brand=default] {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesmind-ai/design-system",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Salesmind AI Design System",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -227,7 +227,7 @@
227
227
  "test": "vitest run",
228
228
  "test:watch": "vitest",
229
229
  "test-storybook": "test-storybook",
230
- "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:6006 && npm run test-storybook\"",
230
+ "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on http-get://127.0.0.1:6006/iframe.html && npm run test-storybook -- --maxWorkers=2\"",
231
231
  "storybook": "storybook dev -p 6006",
232
232
  "build-storybook": "storybook build",
233
233
  "guard": "node scripts/guard.mjs",