alacard-ui-components 1.0.1 → 1.0.2
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.
package/package.json
CHANGED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* ─── Color: Background ─── */
|
|
3
|
+
--ui-color-bg: ;
|
|
4
|
+
--ui-color-bg-muted: ;
|
|
5
|
+
--ui-color-bg-hover: ;
|
|
6
|
+
--ui-color-bg-active: ;
|
|
7
|
+
|
|
8
|
+
/* ─── Color: Surface (cards, panels, inputs) ─── */
|
|
9
|
+
--ui-color-surface: ;
|
|
10
|
+
--ui-color-surface-elevated: ;
|
|
11
|
+
--ui-color-surface-overlay: ;
|
|
12
|
+
|
|
13
|
+
/* ─── Color: Border ─── */
|
|
14
|
+
--ui-color-border: ;
|
|
15
|
+
--ui-color-border-subtle: ;
|
|
16
|
+
--ui-color-border-strong: ;
|
|
17
|
+
|
|
18
|
+
/* ─── Color: Text ─── */
|
|
19
|
+
--ui-color-text: ;
|
|
20
|
+
--ui-color-text-muted: ;
|
|
21
|
+
--ui-color-text-disabled: ;
|
|
22
|
+
--ui-color-text-inverse: ;
|
|
23
|
+
|
|
24
|
+
/* ─── Color: Brand ─── */
|
|
25
|
+
--ui-color-primary: ;
|
|
26
|
+
--ui-color-primary-hover: ;
|
|
27
|
+
--ui-color-primary-active: ;
|
|
28
|
+
--ui-color-primary-soft: ;
|
|
29
|
+
--ui-color-primary-contrast: ;
|
|
30
|
+
|
|
31
|
+
--ui-color-secondary: ;
|
|
32
|
+
--ui-color-secondary-hover: ;
|
|
33
|
+
--ui-color-secondary-active: ;
|
|
34
|
+
|
|
35
|
+
/* ─── Color: Semantic ─── */
|
|
36
|
+
--ui-color-success: ;
|
|
37
|
+
--ui-color-success-hover: ;
|
|
38
|
+
--ui-color-success-soft: ;
|
|
39
|
+
--ui-color-success-contrast: #ffffff;
|
|
40
|
+
|
|
41
|
+
--ui-color-warning: ;
|
|
42
|
+
--ui-color-warning-hover: ;
|
|
43
|
+
--ui-color-warning-soft: ;
|
|
44
|
+
--ui-color-warning-contrast: #111827;
|
|
45
|
+
|
|
46
|
+
--ui-color-danger: ;
|
|
47
|
+
--ui-color-danger-hover: ;
|
|
48
|
+
--ui-color-danger-soft: ;
|
|
49
|
+
--ui-color-danger-contrast: #ffffff;
|
|
50
|
+
|
|
51
|
+
--ui-color-info: ;
|
|
52
|
+
--ui-color-info-hover: ;
|
|
53
|
+
--ui-color-info-soft: ;
|
|
54
|
+
--ui-color-info-contrast: #ffffff;
|
|
55
|
+
|
|
56
|
+
/* ─── Typography (Fluid) ─── */
|
|
57
|
+
--ui-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
58
|
+
--ui-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
59
|
+
|
|
60
|
+
--ui-font-size-xs: clamp(0.6875rem, 1.2vw, 0.75rem);
|
|
61
|
+
--ui-font-size-sm: clamp(0.75rem, 1.5vw, 0.875rem);
|
|
62
|
+
--ui-font-size-md: clamp(0.875rem, 2vw, 1rem);
|
|
63
|
+
--ui-font-size-base: 1rem;
|
|
64
|
+
--ui-font-size-lg: clamp(1rem, 2.5vw, 1.125rem);
|
|
65
|
+
--ui-font-size-xl: clamp(1.125rem, 3vw, 1.25rem);
|
|
66
|
+
--ui-font-size-2xl: 1.5rem;
|
|
67
|
+
--ui-font-size-3xl: 1.875rem;
|
|
68
|
+
|
|
69
|
+
--ui-font-weight-regular: 400;
|
|
70
|
+
--ui-font-weight-medium: 500;
|
|
71
|
+
--ui-font-weight-semibold: 600;
|
|
72
|
+
--ui-font-weight-bold: 700;
|
|
73
|
+
|
|
74
|
+
--ui-line-height-tight: 1.25;
|
|
75
|
+
--ui-line-height-normal: 1.5;
|
|
76
|
+
|
|
77
|
+
/* ─── Spacing (Fluid) ─── */
|
|
78
|
+
--ui-spacing-none: 0;
|
|
79
|
+
--ui-spacing-xs: clamp(0.25rem, 0.5vw, 0.375rem);
|
|
80
|
+
--ui-spacing-sm: clamp(0.5rem, 1vw, 0.75rem);
|
|
81
|
+
--ui-spacing-md: clamp(0.75rem, 1.5vw, 1rem);
|
|
82
|
+
--ui-spacing-lg: clamp(1rem, 2vw, 1.5rem);
|
|
83
|
+
--ui-spacing-xl: clamp(1.5rem, 3vw, 2rem);
|
|
84
|
+
--ui-spacing-2xl: 3rem;
|
|
85
|
+
|
|
86
|
+
/* ─── Component Sizes (Fluid) ─── */
|
|
87
|
+
--ui-size-sm: clamp(1.75rem, 4vw, 2rem);
|
|
88
|
+
--ui-size-md: clamp(2.25rem, 5vw, 2.5rem);
|
|
89
|
+
--ui-size-lg: clamp(2.625rem, 6vw, 3rem);
|
|
90
|
+
|
|
91
|
+
/* ─── Border Radius ─── */
|
|
92
|
+
--ui-radius-none: 0;
|
|
93
|
+
--ui-radius-xs: 0.125rem;
|
|
94
|
+
--ui-radius-sm: 0.25rem;
|
|
95
|
+
--ui-radius-md: 0.5rem;
|
|
96
|
+
--ui-radius-lg: 0.75rem;
|
|
97
|
+
--ui-radius-xl: 1rem;
|
|
98
|
+
--ui-radius-full: 9999px;
|
|
99
|
+
|
|
100
|
+
/* ─── Shadows ─── */
|
|
101
|
+
--ui-shadow-none: none;
|
|
102
|
+
--ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
103
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
104
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
105
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
106
|
+
--ui-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
107
|
+
|
|
108
|
+
/* ─── Transitions ─── */
|
|
109
|
+
--ui-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
110
|
+
--ui-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
111
|
+
--ui-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
112
|
+
/* ─── Z-Index scale ─── */
|
|
113
|
+
--ui-z-index-deep: -1;
|
|
114
|
+
--ui-z-index-default: 0;
|
|
115
|
+
--ui-z-index-raised: 1;
|
|
116
|
+
--ui-z-index-sticky: 100;
|
|
117
|
+
--ui-z-index-dropdown: 200;
|
|
118
|
+
--ui-z-index-backdrop: 300;
|
|
119
|
+
--ui-z-index-modal: 400;
|
|
120
|
+
--ui-z-index-drawer: 500;
|
|
121
|
+
--ui-z-index-popover: 600;
|
|
122
|
+
--ui-z-index-banner: 700;
|
|
123
|
+
--ui-z-index-toast: 800;
|
|
124
|
+
--ui-z-index-tooltip: 900;
|
|
125
|
+
--ui-z-index-widget: 1000;
|
|
126
|
+
|
|
127
|
+
/* ─── Focus Ring ─── */
|
|
128
|
+
--ui-focus-ring-color: rgba(37, 99, 235, 0.25);
|
|
129
|
+
--ui-focus-ring-offset: 2px;
|
|
130
|
+
--ui-focus-ring-width: 3px;
|
|
131
|
+
|
|
132
|
+
/* ─── Component Tokens ─── */
|
|
133
|
+
--ui-input-height-sm: 2rem;
|
|
134
|
+
--ui-input-height-md: 2.5rem;
|
|
135
|
+
--ui-input-height-lg: 3rem;
|
|
136
|
+
--ui-input-padding-x: 0.75rem;
|
|
137
|
+
|
|
138
|
+
--ui-btn-height-xs: 1.75rem;
|
|
139
|
+
--ui-btn-height-sm: 2rem;
|
|
140
|
+
--ui-btn-height-md: 2.5rem;
|
|
141
|
+
--ui-btn-height-lg: 3rem;
|
|
142
|
+
--ui-btn-height-xl: 3.5rem;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ─── Breakpoint adjustments ─── */
|
|
146
|
+
@media (max-width: 639px) {
|
|
147
|
+
:root {
|
|
148
|
+
--ui-font-size-sm: 0.75rem;
|
|
149
|
+
--ui-font-size-md: 0.875rem;
|
|
150
|
+
--ui-font-size-lg: 1rem;
|
|
151
|
+
--ui-spacing-sm: 0.5rem;
|
|
152
|
+
--ui-spacing-md: 0.75rem;
|
|
153
|
+
--ui-spacing-lg: 1rem;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
.ui-theme-dark,
|
|
2
|
+
[data-theme='dark'] {
|
|
3
|
+
/* ─── Background ─── */
|
|
4
|
+
--ui-color-bg: #0f172a;
|
|
5
|
+
--ui-color-bg-muted: #1e293b;
|
|
6
|
+
--ui-color-bg-hover: rgba(255, 255, 255, 0.06);
|
|
7
|
+
--ui-color-bg-active: rgba(255, 255, 255, 0.10);
|
|
8
|
+
|
|
9
|
+
/* ─── Surface ─── */
|
|
10
|
+
--ui-color-surface: #1e293b;
|
|
11
|
+
--ui-color-surface-elevated: #273449;
|
|
12
|
+
--ui-color-surface-overlay: rgba(15, 23, 42, 0.92);
|
|
13
|
+
|
|
14
|
+
/* ─── Border ─── */
|
|
15
|
+
--ui-color-border: #334155;
|
|
16
|
+
--ui-color-border-subtle: #1e293b;
|
|
17
|
+
--ui-color-border-strong: #475569;
|
|
18
|
+
|
|
19
|
+
/* ─── Text ─── */
|
|
20
|
+
--ui-color-text: #f1f5f9;
|
|
21
|
+
--ui-color-text-muted: #94a3b8;
|
|
22
|
+
--ui-color-text-disabled: #475569;
|
|
23
|
+
--ui-color-text-inverse: #0f172a;
|
|
24
|
+
|
|
25
|
+
/* ─── Primary ─── */
|
|
26
|
+
--ui-color-primary: #3b82f6;
|
|
27
|
+
--ui-color-primary-hover: #60a5fa;
|
|
28
|
+
--ui-color-primary-active: #93c5fd;
|
|
29
|
+
--ui-color-primary-soft: rgba(59, 130, 246, 0.15);
|
|
30
|
+
--ui-color-primary-contrast: #ffffff;
|
|
31
|
+
--ui-focus-ring-color: rgba(59, 130, 246, 0.35);
|
|
32
|
+
|
|
33
|
+
/* ─── Secondary ─── */
|
|
34
|
+
--ui-color-secondary: #1e293b;
|
|
35
|
+
--ui-color-secondary-hover: #334155;
|
|
36
|
+
--ui-color-secondary-active: #475569;
|
|
37
|
+
|
|
38
|
+
/* ─── Success ─── */
|
|
39
|
+
--ui-color-success: #10b981;
|
|
40
|
+
--ui-color-success-hover: #34d399;
|
|
41
|
+
--ui-color-success-soft: rgba(16, 185, 129, 0.15);
|
|
42
|
+
--ui-color-success-contrast: #ffffff;
|
|
43
|
+
|
|
44
|
+
/* ─── Warning ─── */
|
|
45
|
+
--ui-color-warning: #f59e0b;
|
|
46
|
+
--ui-color-warning-hover: #fbbf24;
|
|
47
|
+
--ui-color-warning-soft: rgba(245, 158, 11, 0.15);
|
|
48
|
+
--ui-color-warning-contrast: #0f172a;
|
|
49
|
+
|
|
50
|
+
/* ─── Danger ─── */
|
|
51
|
+
--ui-color-danger: #ef4444;
|
|
52
|
+
--ui-color-danger-hover: #f87171;
|
|
53
|
+
--ui-color-danger-soft: rgba(239, 68, 68, 0.15);
|
|
54
|
+
--ui-color-danger-contrast: #ffffff;
|
|
55
|
+
|
|
56
|
+
/* ─── Info ─── */
|
|
57
|
+
--ui-color-info: #06b6d4;
|
|
58
|
+
--ui-color-info-hover: #22d3ee;
|
|
59
|
+
--ui-color-info-soft: rgba(6, 182, 212, 0.15);
|
|
60
|
+
--ui-color-info-contrast: #ffffff;
|
|
61
|
+
|
|
62
|
+
/* ─── RGB Tokens (for transparency) ─── */
|
|
63
|
+
--ui-color-primary-rgb: 59, 130, 246;
|
|
64
|
+
--ui-color-success-rgb: 16, 185, 129;
|
|
65
|
+
--ui-color-warning-rgb: 245, 158, 11;
|
|
66
|
+
--ui-color-danger-rgb: 239, 68, 68;
|
|
67
|
+
--ui-color-info-rgb: 6, 182, 212;
|
|
68
|
+
--ui-color-surface-rgb: 30, 41, 59;
|
|
69
|
+
--ui-color-text-rgb: 241, 245, 249;
|
|
70
|
+
|
|
71
|
+
/* ─── Shadows (brighter in dark) ─── */
|
|
72
|
+
--ui-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
73
|
+
--ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.30);
|
|
74
|
+
--ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30);
|
|
75
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
|
|
76
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
.ui-theme-light,
|
|
2
|
+
[data-theme='light'] {
|
|
3
|
+
/* ─── Background ─── */
|
|
4
|
+
--ui-color-bg: #f9fafb;
|
|
5
|
+
--ui-color-bg-muted: #f3f4f6;
|
|
6
|
+
--ui-color-bg-hover: rgba(0, 0, 0, 0.04);
|
|
7
|
+
--ui-color-bg-active: rgba(0, 0, 0, 0.08);
|
|
8
|
+
|
|
9
|
+
/* ─── Surface ─── */
|
|
10
|
+
--ui-color-surface: #ffffff;
|
|
11
|
+
--ui-color-surface-elevated: #ffffff;
|
|
12
|
+
--ui-color-surface-overlay: rgba(255, 255, 255, 0.92);
|
|
13
|
+
|
|
14
|
+
/* ─── Border ─── */
|
|
15
|
+
--ui-color-border: #e5e7eb;
|
|
16
|
+
--ui-color-border-subtle: #f3f4f6;
|
|
17
|
+
--ui-color-border-strong: #d1d5db;
|
|
18
|
+
|
|
19
|
+
/* ─── Text ─── */
|
|
20
|
+
--ui-color-text: #111827;
|
|
21
|
+
--ui-color-text-muted: #6b7280;
|
|
22
|
+
--ui-color-text-disabled: #9ca3af;
|
|
23
|
+
--ui-color-text-inverse: #ffffff;
|
|
24
|
+
|
|
25
|
+
/* ─── Primary ─── */
|
|
26
|
+
--ui-color-primary: #2563eb;
|
|
27
|
+
--ui-color-primary-hover: #1d4ed8;
|
|
28
|
+
--ui-color-primary-active: #1e40af;
|
|
29
|
+
--ui-color-primary-soft: rgba(37, 99, 235, 0.08);
|
|
30
|
+
--ui-color-primary-contrast: #ffffff;
|
|
31
|
+
--ui-focus-ring-color: rgba(37, 99, 235, 0.25);
|
|
32
|
+
|
|
33
|
+
/* ─── Secondary ─── */
|
|
34
|
+
--ui-color-secondary: #f3f4f6;
|
|
35
|
+
--ui-color-secondary-hover: #e5e7eb;
|
|
36
|
+
--ui-color-secondary-active: #d1d5db;
|
|
37
|
+
|
|
38
|
+
/* ─── Success ─── */
|
|
39
|
+
--ui-color-success: #059669;
|
|
40
|
+
--ui-color-success-hover: #047857;
|
|
41
|
+
--ui-color-success-soft: rgba(5, 150, 105, 0.08);
|
|
42
|
+
--ui-color-success-contrast: #ffffff;
|
|
43
|
+
|
|
44
|
+
/* ─── Warning ─── */
|
|
45
|
+
--ui-color-warning: #d97706;
|
|
46
|
+
--ui-color-warning-hover: #b45309;
|
|
47
|
+
--ui-color-warning-soft: rgba(217, 119, 6, 0.10);
|
|
48
|
+
--ui-color-warning-contrast: #111827;
|
|
49
|
+
|
|
50
|
+
/* ─── Danger ─── */
|
|
51
|
+
--ui-color-danger: #dc2626;
|
|
52
|
+
--ui-color-danger-hover: #b91c1c;
|
|
53
|
+
--ui-color-danger-soft: rgba(220, 38, 38, 0.08);
|
|
54
|
+
--ui-color-danger-contrast: #ffffff;
|
|
55
|
+
|
|
56
|
+
/* ─── Info ─── */
|
|
57
|
+
--ui-color-info: #0891b2;
|
|
58
|
+
--ui-color-info-hover: #0e7490;
|
|
59
|
+
--ui-color-info-soft: rgba(8, 145, 178, 0.08);
|
|
60
|
+
--ui-color-info-contrast: #ffffff;
|
|
61
|
+
|
|
62
|
+
/* ─── RGB Tokens (for transparency) ─── */
|
|
63
|
+
--ui-color-primary-rgb: 37, 99, 235;
|
|
64
|
+
--ui-color-success-rgb: 5, 150, 105;
|
|
65
|
+
--ui-color-warning-rgb: 217, 119, 6;
|
|
66
|
+
--ui-color-danger-rgb: 220, 38, 38;
|
|
67
|
+
--ui-color-info-rgb: 8, 145, 178;
|
|
68
|
+
--ui-color-surface-rgb: 255, 255, 255;
|
|
69
|
+
--ui-color-text-rgb: 17, 24, 39;
|
|
70
|
+
|
|
71
|
+
/* ─── Shadows (adjusted for light) ─── */
|
|
72
|
+
--ui-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
73
|
+
}
|