nexa-ui-kit 0.11.4 → 0.11.6

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 (68) hide show
  1. package/dist/components/NAlert.js +20 -5
  2. package/dist/components/NAlert.nexa +20 -5
  3. package/dist/components/NAvatar.js +2 -0
  4. package/dist/components/NAvatar.nexa +2 -0
  5. package/dist/components/NBadge.js +5 -4
  6. package/dist/components/NBadge.nexa +5 -4
  7. package/dist/components/NBottomSheet.js +24 -22
  8. package/dist/components/NBottomSheet.nexa +9 -7
  9. package/dist/components/NButton.js +63 -18
  10. package/dist/components/NButton.nexa +63 -18
  11. package/dist/components/NCard.js +6 -5
  12. package/dist/components/NCard.nexa +6 -5
  13. package/dist/components/NCheckbox.js +62 -47
  14. package/dist/components/NCheckbox.nexa +46 -33
  15. package/dist/components/NDataTable.js +124 -100
  16. package/dist/components/NDataTable.nexa +39 -15
  17. package/dist/components/NInput.js +27 -6
  18. package/dist/components/NInput.nexa +27 -6
  19. package/dist/components/NModal.js +22 -9
  20. package/dist/components/NModal.nexa +22 -9
  21. package/dist/components/NMultiSelect.js +1 -1
  22. package/dist/components/NMultiSelect.nexa +1 -1
  23. package/dist/components/NPaginator.js +83 -1
  24. package/dist/components/NPaginator.nexa +83 -1
  25. package/dist/components/NProgressBar.js +11 -9
  26. package/dist/components/NProgressBar.nexa +11 -9
  27. package/dist/components/NRadio.js +24 -24
  28. package/dist/components/NRadio.nexa +11 -10
  29. package/dist/components/NSelect.js +38 -12
  30. package/dist/components/NSelect.nexa +38 -12
  31. package/dist/components/NSwitch.js +5 -3
  32. package/dist/components/NSwitch.nexa +5 -3
  33. package/dist/components/NTabs.js +14 -6
  34. package/dist/components/NTabs.nexa +14 -6
  35. package/dist/components/NTag.js +14 -5
  36. package/dist/components/NTag.nexa +14 -5
  37. package/dist/components/NToastContainer.js +11 -4
  38. package/dist/components/NToastContainer.nexa +11 -4
  39. package/dist/components/NTooltip.js +5 -4
  40. package/dist/components/NTooltip.nexa +5 -4
  41. package/dist/components/NTreeMenu.js +77 -34
  42. package/dist/components/NTreeMenu.nexa +55 -12
  43. package/dist/styles/theme.js +69 -55
  44. package/dist/styles/tokens.css +90 -74
  45. package/package.json +4 -4
  46. package/src/components/NAlert.nexa +20 -5
  47. package/src/components/NAvatar.nexa +2 -0
  48. package/src/components/NBadge.nexa +5 -4
  49. package/src/components/NBottomSheet.nexa +9 -7
  50. package/src/components/NButton.nexa +63 -18
  51. package/src/components/NCard.nexa +6 -5
  52. package/src/components/NCheckbox.nexa +46 -33
  53. package/src/components/NDataTable.nexa +39 -15
  54. package/src/components/NInput.nexa +27 -6
  55. package/src/components/NModal.nexa +22 -9
  56. package/src/components/NMultiSelect.nexa +1 -1
  57. package/src/components/NPaginator.nexa +83 -1
  58. package/src/components/NProgressBar.nexa +11 -9
  59. package/src/components/NRadio.nexa +11 -10
  60. package/src/components/NSelect.nexa +38 -12
  61. package/src/components/NSwitch.nexa +5 -3
  62. package/src/components/NTabs.nexa +14 -6
  63. package/src/components/NTag.nexa +14 -5
  64. package/src/components/NToastContainer.nexa +11 -4
  65. package/src/components/NTooltip.nexa +5 -4
  66. package/src/components/NTreeMenu.nexa +55 -12
  67. package/src/styles/theme.ts +69 -55
  68. package/src/styles/tokens.css +90 -74
package/src/styles/theme.ts CHANGED
@@ -6,46 +6,49 @@ export function installTheme(): void {
6
6
 
7
7
  const tokenCSS = `
8
8
  :root {
9
- --n-color-primary: #3b82f6;
10
- --n-color-primary-hover: #2563eb;
11
- --n-color-primary-active: #1d4ed8;
12
- --n-color-primary-light: rgba(59, 130, 246, 0.12);
13
- --n-color-primary-glow: rgba(59, 130, 246, 0.3);
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ --n-color-primary: #6366f1;
12
+ --n-color-primary-hover: #4f46e5;
13
+ --n-color-primary-active: #4338ca;
14
+ --n-color-primary-light: rgba(99, 102, 241, 0.1);
15
+ --n-color-primary-lighter: rgba(99, 102, 241, 0.06);
16
+ --n-color-primary-glow: rgba(99, 102, 241, 0.35);
14
17
  --n-color-success: #10b981;
15
18
  --n-color-success-hover: #059669;
16
- --n-color-success-light: rgba(16, 185, 129, 0.12);
19
+ --n-color-success-light: rgba(16, 185, 129, 0.1);
17
20
  --n-color-warning: #f59e0b;
18
21
  --n-color-warning-hover: #d97706;
19
- --n-color-warning-light: rgba(245, 158, 11, 0.12);
22
+ --n-color-warning-light: rgba(245, 158, 11, 0.1);
20
23
  --n-color-danger: #ef4444;
21
24
  --n-color-danger-hover: #dc2626;
22
- --n-color-danger-light: rgba(239, 68, 68, 0.12);
25
+ --n-color-danger-light: rgba(239, 68, 68, 0.1);
23
26
  --n-color-info: #06b6d4;
24
27
  --n-color-info-hover: #0891b2;
25
- --n-color-info-light: rgba(6, 182, 212, 0.12);
28
+ --n-color-info-light: rgba(6, 182, 212, 0.1);
26
29
  --n-color-surface: #0f172a;
27
30
  --n-color-surface-alt: #1e293b;
28
- --n-color-surface-hover: #334155;
31
+ --n-color-surface-hover: #1e293b;
29
32
  --n-color-surface-elevated: #1e293b;
30
33
  --n-color-bg: #020617;
31
34
  --n-color-bg-alt: #0f172a;
32
- --n-color-text: #f8fafc;
35
+ --n-color-text: #f1f5f9;
33
36
  --n-color-text-secondary: #94a3b8;
34
37
  --n-color-text-muted: #64748b;
35
38
  --n-color-text-inverse: #0f172a;
36
- --n-color-border: rgba(255, 255, 255, 0.08);
37
- --n-color-border-hover: rgba(255, 255, 255, 0.15);
38
- --n-color-border-active: rgba(255, 255, 255, 0.25);
39
- --n-color-overlay: rgba(2, 6, 17, 0.7);
40
- --n-color-glass: rgba(255, 255, 255, 0.04);
41
- --n-color-glass-border: rgba(255, 255, 255, 0.08);
42
- --n-color-glass-hover: rgba(255, 255, 255, 0.08);
43
- --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
44
- --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
39
+ --n-color-border: rgba(255, 255, 255, 0.06);
40
+ --n-color-border-hover: rgba(255, 255, 255, 0.12);
41
+ --n-color-border-active: rgba(255, 255, 255, 0.2);
42
+ --n-color-overlay: rgba(2, 6, 17, 0.6);
43
+ --n-color-glass: rgba(255, 255, 255, 0.03);
44
+ --n-color-glass-border: rgba(255, 255, 255, 0.06);
45
+ --n-color-glass-hover: rgba(255, 255, 255, 0.06);
46
+ --n-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
47
+ --n-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
45
48
  --n-text-xs: 0.75rem;
46
- --n-text-sm: 0.875rem;
47
- --n-text-base: 1rem;
48
- --n-text-lg: 1.125rem;
49
+ --n-text-sm: 0.8125rem;
50
+ --n-text-base: 0.9375rem;
51
+ --n-text-lg: 1.0625rem;
49
52
  --n-text-xl: 1.25rem;
50
53
  --n-text-2xl: 1.5rem;
51
54
  --n-text-3xl: 2rem;
@@ -71,21 +74,26 @@ export function installTheme(): void {
71
74
  --n-space-12: 3rem;
72
75
  --n-space-16: 4rem;
73
76
  --n-radius-sm: 6px;
74
- --n-radius-md: 10px;
75
- --n-radius-lg: 14px;
76
- --n-radius-xl: 20px;
77
- --n-radius-2xl: 28px;
77
+ --n-radius-md: 8px;
78
+ --n-radius-lg: 12px;
79
+ --n-radius-xl: 16px;
80
+ --n-radius-2xl: 24px;
78
81
  --n-radius-full: 9999px;
79
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
80
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
81
- --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
82
- --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
83
- --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
84
- --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
85
- --n-transition-fast: 0.15s ease;
86
- --n-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
87
- --n-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
88
- --n-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
82
+ --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
83
+ --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
84
+ --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
85
+ --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
86
+ --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
87
+ --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
88
+ --n-shadow-glow-primary: 0 4px 20px -4px rgba(99, 102, 241, 0.4);
89
+ --n-shadow-glow-success: 0 4px 20px -4px rgba(16, 185, 129, 0.4);
90
+ --n-shadow-glow-warning: 0 4px 20px -4px rgba(245, 158, 11, 0.4);
91
+ --n-shadow-glow-info: 0 4px 20px -4px rgba(6, 182, 212, 0.4);
92
+ --n-shadow-glow-danger: 0 4px 20px -4px rgba(239, 68, 68, 0.4);
93
+ --n-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
94
+ --n-transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
95
+ --n-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
96
+ --n-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
89
97
  --n-z-dropdown: 100;
90
98
  --n-z-sticky: 200;
91
99
  --n-z-overlay: 500;
@@ -94,11 +102,12 @@ export function installTheme(): void {
94
102
  --n-z-tooltip: 1000;
95
103
  }
96
104
  [data-theme="light"] {
97
- --n-color-primary: #2563eb;
98
- --n-color-primary-hover: #1d4ed8;
99
- --n-color-primary-active: #1e40af;
100
- --n-color-primary-light: rgba(37, 99, 235, 0.08);
101
- --n-color-primary-glow: rgba(37, 99, 235, 0.2);
105
+ --n-color-primary: #4f46e5;
106
+ --n-color-primary-hover: #4338ca;
107
+ --n-color-primary-active: #3730a3;
108
+ --n-color-primary-light: rgba(79, 70, 229, 0.08);
109
+ --n-color-primary-lighter: rgba(79, 70, 229, 0.04);
110
+ --n-color-primary-glow: rgba(79, 70, 229, 0.2);
102
111
  --n-color-success: #059669;
103
112
  --n-color-success-light: rgba(5, 150, 105, 0.08);
104
113
  --n-color-warning: #d97706;
@@ -117,19 +126,24 @@ export function installTheme(): void {
117
126
  --n-color-text-secondary: #475569;
118
127
  --n-color-text-muted: #94a3b8;
119
128
  --n-color-text-inverse: #f8fafc;
120
- --n-color-border: rgba(0, 0, 0, 0.08);
121
- --n-color-border-hover: rgba(0, 0, 0, 0.15);
122
- --n-color-border-active: rgba(0, 0, 0, 0.25);
123
- --n-color-overlay: rgba(15, 23, 42, 0.5);
124
- --n-color-glass: rgba(255, 255, 255, 0.6);
125
- --n-color-glass-border: rgba(0, 0, 0, 0.06);
126
- --n-color-glass-hover: rgba(255, 255, 255, 0.8);
127
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
128
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
129
- --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
130
- --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
131
- --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
132
- --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.2);
129
+ --n-color-border: rgba(0, 0, 0, 0.06);
130
+ --n-color-border-hover: rgba(0, 0, 0, 0.12);
131
+ --n-color-border-active: rgba(0, 0, 0, 0.2);
132
+ --n-color-overlay: rgba(15, 23, 42, 0.4);
133
+ --n-color-glass: rgba(255, 255, 255, 0.7);
134
+ --n-color-glass-border: rgba(0, 0, 0, 0.04);
135
+ --n-color-glass-hover: rgba(255, 255, 255, 0.85);
136
+ --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
137
+ --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
138
+ --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
139
+ --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
140
+ --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
141
+ --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
142
+ --n-shadow-glow-primary: 0 4px 20px -4px rgba(79, 70, 229, 0.25);
143
+ --n-shadow-glow-success: 0 4px 20px -4px rgba(5, 150, 105, 0.25);
144
+ --n-shadow-glow-warning: 0 4px 20px -4px rgba(217, 119, 6, 0.25);
145
+ --n-shadow-glow-info: 0 4px 20px -4px rgba(8, 145, 178, 0.25);
146
+ --n-shadow-glow-danger: 0 4px 20px -4px rgba(220, 38, 38, 0.25);
133
147
  }
134
148
  `
135
149
 
package/src/styles/tokens.css CHANGED
@@ -1,66 +1,75 @@
1
1
  :root {
2
+ -webkit-font-smoothing: antialiased;
3
+ -moz-osx-font-smoothing: grayscale;
4
+
2
5
  /* ─── Color Palette ─── */
3
- --n-color-primary: #3b82f6;
4
- --n-color-primary-hover: #2563eb;
5
- --n-color-primary-active: #1d4ed8;
6
- --n-color-primary-light: rgba(59, 130, 246, 0.12);
7
- --n-color-primary-glow: rgba(59, 130, 246, 0.3);
6
+ --n-color-primary: #6366f1;
7
+ --n-color-primary-hover: #4f46e5;
8
+ --n-color-primary-active: #4338ca;
9
+ --n-color-primary-light: rgba(99, 102, 241, 0.1);
10
+ --n-color-primary-lighter: rgba(99, 102, 241, 0.06);
11
+ --n-color-primary-glow: rgba(99, 102, 241, 0.35);
8
12
 
9
13
  --n-color-success: #10b981;
10
14
  --n-color-success-hover: #059669;
11
- --n-color-success-light: rgba(16, 185, 129, 0.12);
15
+ --n-color-success-light: rgba(16, 185, 129, 0.1);
12
16
 
13
17
  --n-color-warning: #f59e0b;
14
18
  --n-color-warning-hover: #d97706;
15
- --n-color-warning-light: rgba(245, 158, 11, 0.12);
19
+ --n-color-warning-light: rgba(245, 158, 11, 0.1);
16
20
 
17
21
  --n-color-danger: #ef4444;
18
22
  --n-color-danger-hover: #dc2626;
19
- --n-color-danger-light: rgba(239, 68, 68, 0.12);
23
+ --n-color-danger-light: rgba(239, 68, 68, 0.1);
20
24
 
21
25
  --n-color-info: #06b6d4;
22
26
  --n-color-info-hover: #0891b2;
23
- --n-color-info-light: rgba(6, 182, 212, 0.12);
27
+ --n-color-info-light: rgba(6, 182, 212, 0.1);
24
28
 
29
+ /* Surfaces — dark */
25
30
  --n-color-surface: #0f172a;
26
31
  --n-color-surface-alt: #1e293b;
27
- --n-color-surface-hover: #334155;
32
+ --n-color-surface-hover: #1e293b;
28
33
  --n-color-surface-elevated: #1e293b;
29
34
 
30
35
  --n-color-bg: #020617;
31
36
  --n-color-bg-alt: #0f172a;
32
37
 
33
- --n-color-text: #f8fafc;
38
+ /* Text */
39
+ --n-color-text: #f1f5f9;
34
40
  --n-color-text-secondary: #94a3b8;
35
41
  --n-color-text-muted: #64748b;
36
42
  --n-color-text-inverse: #0f172a;
37
43
 
38
- --n-color-border: rgba(255, 255, 255, 0.08);
39
- --n-color-border-hover: rgba(255, 255, 255, 0.15);
40
- --n-color-border-active: rgba(255, 255, 255, 0.25);
44
+ /* Borders */
45
+ --n-color-border: rgba(255, 255, 255, 0.06);
46
+ --n-color-border-hover: rgba(255, 255, 255, 0.12);
47
+ --n-color-border-active: rgba(255, 255, 255, 0.2);
41
48
 
42
- --n-color-overlay: rgba(2, 6, 17, 0.7);
43
- --n-color-glass: rgba(255, 255, 255, 0.04);
44
- --n-color-glass-border: rgba(255, 255, 255, 0.08);
45
- --n-color-glass-hover: rgba(255, 255, 255, 0.08);
49
+ /* Overlay / Glass */
50
+ --n-color-overlay: rgba(2, 6, 17, 0.6);
51
+ --n-color-glass: rgba(255, 255, 255, 0.03);
52
+ --n-color-glass-border: rgba(255, 255, 255, 0.06);
53
+ --n-color-glass-hover: rgba(255, 255, 255, 0.06);
46
54
 
47
- --n-color-primary-border: rgba(59, 130, 246, 0.2);
48
- --n-color-success-border: rgba(16, 185, 129, 0.2);
49
- --n-color-warning-border: rgba(245, 158, 11, 0.2);
50
- --n-color-danger-border: rgba(239, 68, 68, 0.2);
51
- --n-color-info-border: rgba(6, 182, 212, 0.2);
55
+ /* Semantic borders */
56
+ --n-color-primary-border: rgba(99, 102, 241, 0.15);
57
+ --n-color-success-border: rgba(16, 185, 129, 0.15);
58
+ --n-color-warning-border: rgba(245, 158, 11, 0.15);
59
+ --n-color-danger-border: rgba(239, 68, 68, 0.15);
60
+ --n-color-info-border: rgba(6, 182, 212, 0.15);
52
61
 
53
- --n-color-stripe: rgba(255, 255, 255, 0.12);
54
- --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.3);
62
+ --n-color-stripe: rgba(255, 255, 255, 0.04);
63
+ --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.5);
55
64
 
56
65
  /* ─── Typography ─── */
57
- --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
58
- --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
66
+ --n-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
67
+ --n-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
59
68
 
60
69
  --n-text-xs: 0.75rem;
61
- --n-text-sm: 0.875rem;
62
- --n-text-base: 1rem;
63
- --n-text-lg: 1.125rem;
70
+ --n-text-sm: 0.8125rem;
71
+ --n-text-base: 0.9375rem;
72
+ --n-text-lg: 1.0625rem;
64
73
  --n-text-xl: 1.25rem;
65
74
  --n-text-2xl: 1.5rem;
66
75
  --n-text-3xl: 2rem;
@@ -93,28 +102,31 @@
93
102
 
94
103
  /* ─── Border Radius ─── */
95
104
  --n-radius-sm: 6px;
96
- --n-radius-md: 10px;
97
- --n-radius-lg: 14px;
98
- --n-radius-xl: 20px;
99
- --n-radius-2xl: 28px;
105
+ --n-radius-md: 8px;
106
+ --n-radius-lg: 12px;
107
+ --n-radius-xl: 16px;
108
+ --n-radius-2xl: 24px;
100
109
  --n-radius-full: 9999px;
101
110
 
102
111
  /* ─── Shadows ─── */
103
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
104
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
105
- --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
106
- --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
107
- --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
108
- --n-shadow-glow-success: 0 4px 15px -3px rgba(16, 185, 129, 0.3);
109
- --n-shadow-glow-warning: 0 4px 15px -3px rgba(245, 158, 11, 0.3);
110
- --n-shadow-glow-info: 0 4px 15px -3px rgba(6, 182, 212, 0.3);
111
- --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
112
-
113
- /* ─── Transitions ─── */
114
- --n-transition-fast: 0.15s ease;
115
- --n-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
116
- --n-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
117
- --n-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
112
+ --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
113
+ --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
114
+ --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
115
+ --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
116
+ --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
117
+ --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
118
+
119
+ --n-shadow-glow-primary: 0 4px 20px -4px rgba(99, 102, 241, 0.4);
120
+ --n-shadow-glow-success: 0 4px 20px -4px rgba(16, 185, 129, 0.4);
121
+ --n-shadow-glow-warning: 0 4px 20px -4px rgba(245, 158, 11, 0.4);
122
+ --n-shadow-glow-info: 0 4px 20px -4px rgba(6, 182, 212, 0.4);
123
+ --n-shadow-glow-danger: 0 4px 20px -4px rgba(239, 68, 68, 0.4);
124
+
125
+ /* ─── Transitions (magnetic easing) ─── */
126
+ --n-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
127
+ --n-transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
128
+ --n-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
129
+ --n-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
118
130
 
119
131
  /* ─── Z-Index Scale ─── */
120
132
  --n-z-dropdown: 100;
@@ -127,11 +139,12 @@
127
139
 
128
140
  /* ─── Light Theme ─── */
129
141
  [data-theme="light"] {
130
- --n-color-primary: #2563eb;
131
- --n-color-primary-hover: #1d4ed8;
132
- --n-color-primary-active: #1e40af;
133
- --n-color-primary-light: rgba(37, 99, 235, 0.08);
134
- --n-color-primary-glow: rgba(37, 99, 235, 0.2);
142
+ --n-color-primary: #4f46e5;
143
+ --n-color-primary-hover: #4338ca;
144
+ --n-color-primary-active: #3730a3;
145
+ --n-color-primary-light: rgba(79, 70, 229, 0.08);
146
+ --n-color-primary-lighter: rgba(79, 70, 229, 0.04);
147
+ --n-color-primary-glow: rgba(79, 70, 229, 0.2);
135
148
 
136
149
  --n-color-success: #059669;
137
150
  --n-color-success-light: rgba(5, 150, 105, 0.08);
@@ -158,31 +171,34 @@
158
171
  --n-color-text-muted: #94a3b8;
159
172
  --n-color-text-inverse: #f8fafc;
160
173
 
161
- --n-color-border: rgba(0, 0, 0, 0.08);
162
- --n-color-border-hover: rgba(0, 0, 0, 0.15);
163
- --n-color-border-active: rgba(0, 0, 0, 0.25);
174
+ --n-color-border: rgba(0, 0, 0, 0.06);
175
+ --n-color-border-hover: rgba(0, 0, 0, 0.12);
176
+ --n-color-border-active: rgba(0, 0, 0, 0.2);
164
177
 
165
- --n-color-overlay: rgba(15, 23, 42, 0.5);
166
- --n-color-glass: rgba(255, 255, 255, 0.6);
167
- --n-color-glass-border: rgba(0, 0, 0, 0.06);
168
- --n-color-glass-hover: rgba(255, 255, 255, 0.8);
178
+ --n-color-overlay: rgba(15, 23, 42, 0.4);
179
+ --n-color-glass: rgba(255, 255, 255, 0.7);
180
+ --n-color-glass-border: rgba(0, 0, 0, 0.04);
181
+ --n-color-glass-hover: rgba(255, 255, 255, 0.85);
169
182
 
170
- --n-color-primary-border: rgba(37, 99, 235, 0.2);
183
+ --n-color-primary-border: rgba(79, 70, 229, 0.2);
171
184
  --n-color-success-border: rgba(5, 150, 105, 0.2);
172
185
  --n-color-warning-border: rgba(217, 119, 6, 0.2);
173
186
  --n-color-danger-border: rgba(220, 38, 38, 0.2);
174
187
  --n-color-info-border: rgba(8, 145, 178, 0.2);
175
188
 
176
- --n-color-stripe: rgba(0, 0, 0, 0.08);
177
- --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
178
-
179
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
180
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
181
- --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
182
- --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
183
- --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
184
- --n-shadow-glow-success: 0 4px 15px -3px rgba(5, 150, 105, 0.2);
185
- --n-shadow-glow-warning: 0 4px 15px -3px rgba(217, 119, 6, 0.2);
186
- --n-shadow-glow-info: 0 4px 15px -3px rgba(8, 145, 178, 0.2);
187
- --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.2);
189
+ --n-color-stripe: rgba(0, 0, 0, 0.04);
190
+ --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.15);
191
+
192
+ --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
193
+ --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
194
+ --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
195
+ --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
196
+ --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
197
+ --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
198
+
199
+ --n-shadow-glow-primary: 0 4px 20px -4px rgba(79, 70, 229, 0.25);
200
+ --n-shadow-glow-success: 0 4px 20px -4px rgba(5, 150, 105, 0.25);
201
+ --n-shadow-glow-warning: 0 4px 20px -4px rgba(217, 119, 6, 0.25);
202
+ --n-shadow-glow-info: 0 4px 20px -4px rgba(8, 145, 178, 0.25);
203
+ --n-shadow-glow-danger: 0 4px 20px -4px rgba(220, 38, 38, 0.25);
188
204
  }