@arclux/arc-ui-html 1.3.0 → 1.4.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 (8) hide show
  1. package/css/arc-ui.css +149 -310
  2. package/css/button.css +5 -34
  3. package/css/callout.css +4 -34
  4. package/css/card.css +6 -26
  5. package/css/feature-card.css +1 -28
  6. package/css/icon-button.css +13 -31
  7. package/css/top-bar.css +6 -2
  8. package/package.json +1 -1
package/css/arc-ui.css CHANGED
@@ -3,212 +3,171 @@
3
3
  /* Design Tokens */
4
4
  :root {
5
5
 
6
- /* ── Backgrounds ── */
7
- --bg-deep: rgb(3, 3, 7);
8
- --bg-surface: rgb(10, 10, 15);
9
- --bg-base: rgb(10, 10, 15);
10
- --bg-card: rgb(13, 13, 18);
11
- --bg-elevated: rgb(17, 17, 22);
12
-
13
- /* ── Text ── */
14
- --text-primary: rgb(232, 232, 236);
6
+
7
+ --bg-deep: rgb(3, 3, 7);
8
+ --bg-surface: rgb(10, 10, 15);
9
+ --bg-base: rgb(10, 10, 15);
10
+ --bg-card: rgb(13, 13, 18);
11
+ --bg-elevated: rgb(17, 17, 22);
12
+
13
+ --text-primary: rgb(232, 232, 236);
15
14
  --text-secondary: rgb(138, 138, 150);
16
- --text-muted: rgb(124, 124, 137);
17
- --text-ghost: rgb(107, 107, 128);
15
+ --text-muted: rgb(124, 124, 137);
16
+ --text-ghost: rgb(107, 107, 128);
18
17
 
19
- /* ── Borders ── */
20
- --border-subtle: rgb(24, 24, 30);
18
+ --border-subtle: rgb(24, 24, 30);
21
19
  --border-default: rgb(34, 34, 41);
22
- --border-bright: rgb(51, 51, 64);
20
+ --border-bright: rgb(51, 51, 64);
23
21
 
24
- /* ── Accent ── */
25
- --accent-primary: rgb(77, 126, 247);
22
+ --accent-primary: rgb(77, 126, 247);
26
23
  --accent-secondary: rgb(139, 92, 246);
27
-
28
- /* RGB channels (for alpha compositing) */
29
- --accent-primary-rgb: 77, 126, 247;
24
+ --accent-primary-rgb: 77, 126, 247;
30
25
  --accent-secondary-rgb: 139, 92, 246;
31
- --text-primary-rgb: 232, 232, 236;
32
- --text-muted-rgb: 124, 124, 137;
33
- --color-error-rgb: 239, 68, 68;
34
- --white-rgb: 255, 255, 255;
35
- --black-rgb: 0, 0, 0;
36
-
37
- /* Accent alpha variants */
38
- --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
39
- --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
40
- --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
41
- --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
26
+ --text-primary-rgb: 232, 232, 236;
27
+ --text-muted-rgb: 124, 124, 137;
28
+ --color-error-rgb: 239, 68, 68;
29
+ --white-rgb: 255, 255, 255;
30
+ --black-rgb: 0, 0, 0;
31
+
32
+ --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.06);
33
+ --accent-primary-border: rgba(var(--accent-primary-rgb), 0.12);
34
+ --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.2);
35
+ --accent-primary-ring: rgba(var(--accent-primary-rgb), 0.15);
42
36
  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
43
37
  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
44
- --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
45
-
46
- /* Feedback */
47
- --color-success: rgb(52, 211, 153);
48
- --color-success-rgb: 52, 211, 153;
49
- --color-error: rgb(239, 68, 68);
50
- --color-error-subtle: rgba(var(--color-error-rgb), 0.1);
51
- --color-warning: rgb(245, 158, 11);
52
- --color-warning-rgb: 245, 158, 11;
38
+ --accent-secondary-glow: rgba(var(--accent-secondary-rgb), 0.2);
39
+
40
+ --color-success: rgb(52, 211, 153);
41
+ --color-success-rgb: 52, 211, 153;
42
+ --color-error: rgb(239, 68, 68);
43
+ --color-error-subtle: rgba(239, 68, 68, 0.1);
44
+ --color-warning: rgb(245, 158, 11);
45
+ --color-warning-rgb: 245, 158, 11;
53
46
  --color-warning-subtle: rgba(245, 158, 11, 0.1);
54
- --color-info: rgb(59, 130, 246);
55
- --color-info-rgb: 59, 130, 246;
56
- --color-info-subtle: rgba(59, 130, 246, 0.1);
57
-
58
- /* ── Shadows ── */
59
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
60
- --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
61
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
62
- --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
63
- --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);
47
+ --color-info: rgb(59, 130, 246);
48
+ --color-info-rgb: 59, 130, 246;
49
+ --color-info-subtle: rgba(59, 130, 246, 0.1);
50
+
51
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
52
+ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
53
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
54
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
55
+ --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);
64
56
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
65
57
 
66
- /* ── Z-Index ── */
67
- --z-base: 0;
68
- --z-dropdown: 100;
69
- --z-sticky: 200;
70
- --z-drawer: 300;
71
- --z-modal: 400;
72
- --z-popover: 500;
73
- --z-toast: 600;
74
- --z-tooltip: 700;
75
- --z-max: 9999;
76
-
77
- /* ── Breakpoints ── */
78
- --breakpoint-xs: 480px;
79
- --breakpoint-sm: 640px;
80
- --breakpoint-md: 768px;
81
- --breakpoint-lg: 1024px;
82
- --breakpoint-xl: 1280px;
58
+ --z-base: 0;
59
+ --z-dropdown: 100;
60
+ --z-sticky: 200;
61
+ --z-drawer: 300;
62
+ --z-modal: 400;
63
+ --z-popover: 500;
64
+ --z-toast: 600;
65
+ --z-tooltip: 700;
66
+ --z-max: 9999;
67
+
68
+ --breakpoint-xs: 480px;
69
+ --breakpoint-sm: 640px;
70
+ --breakpoint-md: 768px;
71
+ --breakpoint-lg: 1024px;
72
+ --breakpoint-xl: 1280px;
83
73
  --breakpoint-2xl: 1536px;
84
74
 
85
- /* ── Opacity ── */
86
75
  --opacity-disabled: 0.5;
87
- --opacity-muted: 0.6;
88
- --opacity-hover: 0.8;
89
- --opacity-visible: 1;
90
-
91
- /* ── Typography ── */
92
- --font-body: 'Host Grotesk', system-ui, sans-serif;
93
- --font-accent: 'Tektur', system-ui, sans-serif;
94
- --font-mono: 'JetBrains Mono', ui-monospace, monospace;
95
-
96
- --display-xl-size: var(--text-3xl);
97
- --display-xl-weight: 500;
98
- --display-xl-spacing: -1px;
99
-
100
- --heading-size: var(--text-xl);
101
- --heading-weight: 500;
102
-
103
- /* ── Type scale ── */
104
- --text-xs: 12px; /* uppercase labels, badges, counters — decorative only */
105
- --text-sm: 14px; /* minimum readable size — captions, hints, metadata */
106
- --text-md: 15px; /* body text */
107
- --text-lg: clamp(18px, 1.5vw, 20px);
108
- --text-xl: clamp(22px, 2.5vw, 26px);
76
+ --opacity-muted: 0.6;
77
+ --opacity-hover: 0.8;
78
+ --opacity-visible: 1;
79
+
80
+ --font-body: 'Host Grotesk', system-ui, sans-serif;
81
+ --font-accent: 'Tektur', system-ui, sans-serif;
82
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
83
+
84
+ --text-xs: 12px;
85
+ --text-sm: 14px;
86
+ --text-md: 15px;
87
+ --text-lg: clamp(18px, 1.5vw, 20px);
88
+ --text-xl: clamp(22px, 2.5vw, 26px);
109
89
  --text-2xl: clamp(28px, 3vw, 36px);
110
90
  --text-3xl: clamp(36px, 5vw, 52px);
111
91
 
112
- --body-size: var(--text-md);
92
+ --display-xl-size: var(--text-3xl);
93
+ --display-xl-weight: 500;
94
+ --display-xl-spacing: -1px;
95
+ --heading-size: var(--text-xl);
96
+ --heading-weight: 500;
97
+ --heading-lh: 1.2;
98
+ --body-size: var(--text-md);
113
99
  --body-weight: 500;
114
- --body-lh: 1.7;
115
-
116
- --wordmark-size: clamp(20px, 2.5vw, 28px);
117
- --wordmark-weight: 500;
100
+ --body-lh: 1.7;
101
+ --wordmark-size: clamp(20px, 2.5vw, 28px);
102
+ --wordmark-weight: 500;
118
103
  --wordmark-spacing: clamp(8px, 1.2vw, 14px);
119
-
120
- --section-title-size: var(--text-xs);
121
- --section-title-weight: 600;
104
+ --section-title-size: var(--text-xs);
105
+ --section-title-weight: 600;
122
106
  --section-title-spacing: 4px;
123
-
124
- --ui-accent-size: 16px;
125
- --ui-accent-weight: 600;
107
+ --ui-accent-size: 16px;
108
+ --ui-accent-weight: 600;
126
109
  --ui-accent-spacing: 1px;
127
-
128
110
  --code-size: var(--text-sm);
129
- --code-lh: 1.8;
130
-
131
- --label-inline-size: var(--text-xs);
111
+ --code-lh: 1.8;
112
+ --label-inline-size: var(--text-xs);
132
113
  --label-inline-spacing: 3px;
133
114
 
134
- /* ── Interactive ── */
135
- --touch-min: 24px;
136
- --touch-pad: 4px;
115
+ --touch-min: 24px;
116
+ --touch-pad: 4px;
137
117
 
138
- /* ── Spacing ── */
139
- --space-xs: 4px;
140
- --space-sm: 8px;
141
- --space-md: 16px;
142
- --space-lg: 24px;
143
- --space-xl: 40px;
118
+ --space-xs: 4px;
119
+ --space-sm: 8px;
120
+ --space-md: 16px;
121
+ --space-lg: 24px;
122
+ --space-xl: 40px;
144
123
  --space-2xl: 64px;
145
124
  --space-3xl: 96px;
146
125
  --space-4xl: 128px;
147
126
 
148
- /* ── Radii ── */
149
- --radius-sm: 4px;
150
- --radius-md: 10px;
151
- --radius-lg: 14px;
152
- --radius-xl: 20px;
127
+ --radius-sm: 4px;
128
+ --radius-md: 10px;
129
+ --radius-lg: 14px;
130
+ --radius-xl: 20px;
153
131
  --radius-full: 9999px;
154
132
 
155
- /* ── Transitions ── */
156
133
  --transition-fast: 120ms ease;
157
134
  --transition-base: 200ms ease;
158
135
  --transition-slow: 400ms ease;
159
136
 
160
- /* ── Motion ── */
161
137
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
162
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
138
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
163
139
  --duration-enter: 500ms;
164
- --duration-exit: 300ms;
140
+ --duration-exit: 300ms;
165
141
 
166
- /* ── Gradients ── */
167
142
  --gradient-display-text: linear-gradient(135deg, rgb(232, 232, 236) 0%, rgb(124, 124, 137) 100%);
168
- --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
169
- --gradient-divider: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
143
+ --gradient-accent-text: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
144
+ --gradient-divider: linear-gradient(90deg, transparent, rgb(24, 24, 30), transparent);
170
145
  --gradient-divider-glow: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.12), transparent);
171
- --gradient-page-ambient: radial-gradient(ellipse, rgba(var(--white-rgb),0.015) 0%, transparent 70%);
172
-
173
- /* ── Glow ── */
174
- --glow-white:
175
- 0 0 6px rgba(var(--text-primary-rgb),0.6),
176
- 0 0 18px rgba(var(--text-primary-rgb),0.25),
177
- 0 0 40px rgba(var(--text-primary-rgb),0.1);
178
-
179
- --glow-primary:
180
- 0 0 8px rgba(var(--accent-primary-rgb),0.9),
181
- 0 0 20px rgba(var(--accent-primary-rgb),0.5),
182
- 0 0 44px rgba(var(--accent-primary-rgb),0.25),
183
- 0 0 80px rgba(var(--accent-primary-rgb),0.1);
184
-
185
- --glow-secondary:
186
- 0 0 8px rgba(var(--accent-secondary-rgb),0.9),
187
- 0 0 20px rgba(var(--accent-secondary-rgb),0.4),
188
- 0 0 40px rgba(var(--accent-secondary-rgb),0.15);
189
-
190
- --glow-line-white: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
191
- --glow-line-blue: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
146
+ --gradient-page-ambient: radial-gradient(ellipse, rgba(255, 255, 255,0.015) 0%, transparent 70%);
147
+
148
+ --glow-white: 0 0 6px rgba(var(--text-primary-rgb),0.6), 0 0 18px rgba(var(--text-primary-rgb),0.25), 0 0 40px rgba(var(--text-primary-rgb),0.1);
149
+ --glow-primary: 0 0 8px rgba(var(--accent-primary-rgb),0.9), 0 0 20px rgba(var(--accent-primary-rgb),0.5), 0 0 44px rgba(var(--accent-primary-rgb),0.25), 0 0 80px rgba(var(--accent-primary-rgb),0.1);
150
+ --glow-secondary: 0 0 8px rgba(var(--accent-secondary-rgb),0.9), 0 0 20px rgba(var(--accent-secondary-rgb),0.4), 0 0 40px rgba(var(--accent-secondary-rgb),0.15);
151
+
152
+ --glow-line-white: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
153
+ --glow-line-blue: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
192
154
  --glow-line-gradient: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
193
155
 
194
- /* ── Card / Ambient Glow ── */
195
- --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.08), 0 0 40px rgba(var(--accent-secondary-rgb),0.04);
156
+ --glow-card-hover: 0 0 20px rgba(var(--accent-primary-rgb),0.08), 0 0 40px rgba(var(--accent-secondary-rgb),0.04);
196
157
  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-secondary-rgb),0.1), rgba(var(--accent-primary-rgb),0.05));
197
158
  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.04) 0%, transparent 50%),
198
159
  radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.03) 0%, transparent 50%);
199
160
 
200
- /* ── Focus ── */
201
161
  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.25);
202
162
  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(var(--accent-secondary-rgb),0.12);
203
163
 
204
- /* ── Layout ── */
205
- --max-width: 1120px;
164
+ --max-width: 1120px;
206
165
  --max-width-sm: 720px;
207
- --nav-height: 64px;
166
+ --nav-height: 64px;
167
+
168
+ --bg-hover: rgba(255, 255, 255, 0.04);
169
+ --overlay-backdrop: rgba(0, 0, 0, 0.6);
208
170
 
209
- /* ── Utility ── */
210
- --bg-hover: rgba(var(--white-rgb), 0.04);
211
- --overlay-backdrop: rgba(var(--black-rgb), 0.6);
212
171
 
213
172
  }
214
173
 
@@ -429,8 +388,8 @@
429
388
  gap: var(--space-sm);
430
389
  padding: var(--space-md) var(--space-lg);
431
390
  border-radius: var(--radius-md);
432
- border: 1px solid var(--border-default);
433
- background: var(--bg-card);
391
+ border: 1px solid rgba(var(--_status-rgb), 0.12);
392
+ background: rgba(var(--_status-rgb), 0.04);
434
393
  font-family: var(--font-body);
435
394
  font-size: var(--text-sm);
436
395
  line-height: 1.7;
@@ -447,6 +406,7 @@
447
406
  flex-shrink: 0;
448
407
  display: flex;
449
408
  align-items: center;
409
+ color: var(--_status-color);
450
410
  }
451
411
 
452
412
  .arc-callout .callout__label {
@@ -455,44 +415,13 @@
455
415
  font-weight: 600;
456
416
  letter-spacing: 1.5px;
457
417
  text-transform: uppercase;
418
+ color: var(--_status-color);
458
419
  }
459
420
 
460
421
  .arc-callout .callout__content {
461
422
  min-width: 0;
462
423
  }
463
424
 
464
- /* ── Info ── */
465
- .arc-callout[data-variant="info"] .callout {
466
- border-color: rgba(var(--accent-primary-rgb), 0.12);
467
- background: rgba(var(--accent-primary-rgb), 0.04);
468
- }
469
- .arc-callout[data-variant="info"] .callout__icon { color: var(--accent-primary); }
470
- .arc-callout[data-variant="info"] .callout__label { color: var(--accent-primary); }
471
-
472
- /* ── Warning ── */
473
- .arc-callout[data-variant="warning"] .callout {
474
- border-color: rgba(var(--color-warning-rgb), 0.15);
475
- background: rgba(var(--color-warning-rgb), 0.04);
476
- }
477
- .arc-callout[data-variant="warning"] .callout__icon { color: var(--color-warning); }
478
- .arc-callout[data-variant="warning"] .callout__label { color: var(--color-warning); }
479
-
480
- /* ── Tip ── */
481
- .arc-callout[data-variant="tip"] .callout {
482
- border-color: rgba(var(--color-success-rgb), 0.15);
483
- background: rgba(var(--color-success-rgb), 0.04);
484
- }
485
- .arc-callout[data-variant="tip"] .callout__icon { color: var(--color-success); }
486
- .arc-callout[data-variant="tip"] .callout__label { color: var(--color-success); }
487
-
488
- /* ── Danger ── */
489
- .arc-callout[data-variant="danger"] .callout {
490
- border-color: rgba(var(--color-error-rgb), 0.15);
491
- background: rgba(var(--color-error-rgb), 0.04);
492
- }
493
- .arc-callout[data-variant="danger"] .callout__icon { color: var(--color-error); }
494
- .arc-callout[data-variant="danger"] .callout__label { color: var(--color-error); }
495
-
496
425
  @media (prefers-reduced-motion: reduce) {
497
426
  .arc-callout *,
498
427
  .arc-callout *::before,
@@ -506,40 +435,20 @@
506
435
  /* arc-card */
507
436
  .arc-card { display: block; }
508
437
 
509
- .arc-card .card {
510
- position: relative;
511
- border-radius: var(--radius-lg);
512
- padding: 1px;
438
+ .arc-card .card { height: 100%; }
439
+
440
+ /* Suppress hover effect when no href */
441
+ .arc-card:not([data-href]) .card:hover {
513
442
  background: var(--border-subtle);
514
- transition: background var(--transition-slow);
515
- text-decoration: none;
516
- display: flex;
517
- flex-direction: column;
518
- height: 100%;
519
443
  }
520
-
521
- .arc-card[href] .card:hover {
522
- background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
444
+ .arc-card:not([data-href]) .card:hover .card__inner {
445
+ box-shadow: none;
523
446
  }
524
447
 
525
448
  .arc-card .card__inner {
526
- position: relative;
527
- background: var(--bg-card);
528
- border-radius: calc(var(--radius-lg) - 1px);
529
449
  padding: var(--space-xl) var(--space-lg);
530
- flex: 1;
531
- min-height: 0;
532
- display: flex;
533
- flex-direction: column;
534
- transition: box-shadow var(--transition-slow);
535
- }
536
-
537
- .arc-card .card:hover .card__inner {
538
- box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
539
450
  }
540
451
 
541
- .arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
542
-
543
452
  .arc-card .card__body {
544
453
  flex: 1;
545
454
  }
@@ -943,39 +852,14 @@
943
852
  /* arc-feature-card */
944
853
  .arc-feature-card { display: block; height: 100%; }
945
854
 
946
- .arc-feature-card .card {
947
- position: relative;
948
- border-radius: var(--radius-lg);
949
- height: 100%;
950
- padding: 1px;
951
- background: var(--border-subtle);
952
- transition: background var(--transition-slow);
953
- text-decoration: none;
954
- display: flex;
955
- flex-direction: column;
956
- }
957
-
958
- .arc-feature-card .card:hover {
959
- background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
960
- }
855
+ .arc-feature-card .card { height: 100%; }
961
856
 
962
857
  .arc-feature-card .card__inner {
963
- position: relative;
964
- background: var(--bg-card);
965
- border-radius: calc(var(--radius-lg) - 1px);
966
858
  padding: var(--space-xl) var(--space-lg);
967
- display: flex;
968
- flex-direction: column;
969
859
  gap: var(--space-md);
970
- flex: 1;
971
- transition: box-shadow var(--transition-slow);
972
860
  z-index: 1;
973
861
  }
974
862
 
975
- .arc-feature-card .card:hover .card__inner {
976
- box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
977
- }
978
-
979
863
  .arc-feature-card .card__icon {
980
864
  width: 44px;
981
865
  height: 44px;
@@ -1025,8 +909,6 @@
1025
909
 
1026
910
  .arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
1027
911
 
1028
- .arc-feature-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
1029
-
1030
912
  @media (max-width: 768px) {
1031
913
  .arc-feature-card .card__inner { padding: var(--space-lg) var(--space-md); }
1032
914
  }
@@ -2035,55 +1917,26 @@
2035
1917
  .arc-button[data-size="md"] .btn { font-size: var(--text-xs); padding: var(--space-sm) var(--space-lg); }
2036
1918
  .arc-button[data-size="lg"] .btn { font-size: var(--text-xs); padding: var(--space-md) var(--space-xl); letter-spacing: 3px; }
2037
1919
 
2038
- /* Primary */
2039
- .arc-button:not([data-variant]) .btn,
2040
- .arc-button[data-variant="primary"] .btn {
1920
+ /* Default → primary */
1921
+ .arc-button:not([data-variant]) .btn {
2041
1922
  background: var(--accent-primary);
2042
1923
  color: var(--bg-deep);
2043
1924
  border-color: var(--accent-primary);
2044
1925
  }
2045
- .arc-button:not([data-variant]) .btn:hover,
2046
- .arc-button[data-variant="primary"] .btn:hover { box-shadow: var(--glow-primary); }
1926
+ .arc-button:not([data-variant]) .btn:hover { box-shadow: var(--glow-primary); }
1927
+
1928
+ /* :active scale */
2047
1929
  .arc-button:not([data-variant]) .btn:active,
2048
1930
  .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5); }
2049
-
2050
- /* Secondary */
2051
- .arc-button[data-variant="secondary"] .btn {
2052
- background: transparent;
2053
- color: var(--text-primary);
2054
- border-color: var(--border-default);
2055
- }
2056
- .arc-button[data-variant="secondary"] .btn:hover {
2057
- border-color: var(--accent-primary);
2058
- color: var(--accent-primary);
2059
- box-shadow: 0 0 20px var(--accent-primary-ring);
2060
- }
2061
1931
  .arc-button[data-variant="secondary"] .btn:active {
2062
1932
  transform: scale(0.97);
2063
1933
  background: rgba(var(--accent-primary-rgb),0.05);
2064
1934
  }
2065
-
2066
- /* Ghost */
2067
- .arc-button[data-variant="ghost"] .btn {
2068
- background: transparent;
2069
- color: var(--text-muted);
2070
- border-color: transparent;
2071
- }
2072
- .arc-button[data-variant="ghost"] .btn:hover {
2073
- color: var(--text-primary);
2074
- background: var(--bg-hover);
2075
- }
2076
1935
  .arc-button[data-variant="ghost"] .btn:active {
2077
1936
  transform: scale(0.97);
2078
1937
  background: var(--bg-elevated);
2079
1938
  }
2080
1939
 
2081
- /* Focus */
2082
- .arc-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
2083
-
2084
- /* Disabled */
2085
- .arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
2086
-
2087
1940
  /* Prefix / Suffix */
2088
1941
  .arc-button .btn__prefix,
2089
1942
  .arc-button .btn__suffix {
@@ -2162,59 +2015,41 @@
2162
2015
  .arc-icon-button[data-size="md"] .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
2163
2016
  .arc-icon-button[data-size="lg"] .btn--has-text { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
2164
2017
 
2165
- /* Ghost (default) */
2166
- .arc-icon-button:not([data-variant]) .btn,
2167
- .arc-icon-button[data-variant="ghost"] .btn {
2018
+ /* Default → ghost */
2019
+ .arc-icon-button:not([data-variant]) .btn {
2168
2020
  background: transparent;
2169
2021
  color: var(--text-muted);
2170
2022
  border-color: transparent;
2171
2023
  }
2172
- .arc-icon-button:not([data-variant]) .btn:hover,
2173
- .arc-icon-button[data-variant="ghost"] .btn:hover {
2024
+ .arc-icon-button:not([data-variant]) .btn:hover {
2174
2025
  color: var(--text-primary);
2175
2026
  background: var(--bg-hover);
2176
2027
  }
2028
+
2029
+ /* :active scale */
2177
2030
  .arc-icon-button:not([data-variant]) .btn:active,
2178
2031
  .arc-icon-button[data-variant="ghost"] .btn:active {
2179
2032
  transform: scale(0.93);
2180
2033
  background: var(--bg-elevated);
2181
2034
  }
2182
-
2183
- /* Secondary */
2184
- .arc-icon-button[data-variant="secondary"] .btn {
2185
- background: transparent;
2186
- color: var(--text-secondary);
2187
- border-color: var(--border-default);
2188
- }
2189
- .arc-icon-button[data-variant="secondary"] .btn:hover {
2190
- border-color: var(--accent-primary);
2191
- color: var(--accent-primary);
2192
- box-shadow: 0 0 16px var(--accent-primary-ring);
2193
- }
2194
2035
  .arc-icon-button[data-variant="secondary"] .btn:active {
2195
2036
  transform: scale(0.93);
2196
2037
  background: rgba(var(--accent-primary-rgb), 0.05);
2197
2038
  }
2198
-
2199
- /* Primary */
2200
- .arc-icon-button[data-variant="primary"] .btn {
2201
- background: var(--accent-primary);
2202
- color: var(--bg-deep);
2203
- border-color: var(--accent-primary);
2204
- }
2205
- .arc-icon-button[data-variant="primary"] .btn:hover {
2206
- box-shadow: var(--glow-primary);
2207
- }
2208
2039
  .arc-icon-button[data-variant="primary"] .btn:active {
2209
2040
  transform: scale(0.93);
2210
2041
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
2211
2042
  }
2212
2043
 
2213
- /* Focus */
2214
- .arc-icon-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
2044
+ /* IconButton secondary uses text-secondary instead of text-primary */
2045
+ .arc-icon-button[data-variant="secondary"] .btn {
2046
+ color: var(--text-secondary);
2047
+ }
2215
2048
 
2216
- /* Disabled */
2217
- .arc-icon-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
2049
+ /* IconButton secondary hover uses smaller glow */
2050
+ .arc-icon-button[data-variant="secondary"] .btn:hover {
2051
+ box-shadow: 0 0 16px var(--accent-primary-ring);
2052
+ }
2218
2053
 
2219
2054
  @media (prefers-reduced-motion: reduce) {
2220
2055
  .arc-icon-button *,
@@ -2374,15 +2209,19 @@
2374
2209
 
2375
2210
  .arc-top-bar .topbar {
2376
2211
  position: relative;
2377
- display: flex;
2378
- align-items: center;
2379
2212
  height: var(--nav-height);
2380
2213
  padding: 0 var(--space-lg);
2381
2214
  background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
2382
2215
  backdrop-filter: blur(12px) saturate(130%);
2383
2216
  -webkit-backdrop-filter: blur(12px) saturate(130%);
2384
2217
  border-bottom: 1px solid var(--border-subtle);
2218
+ }
2219
+
2220
+ .arc-top-bar .topbar__content {
2221
+ display: flex;
2222
+ align-items: center;
2385
2223
  gap: var(--space-md);
2224
+ height: 100%;
2386
2225
  }
2387
2226
 
2388
2227
  .arc-top-bar .topbar__glow {
package/css/button.css CHANGED
@@ -34,55 +34,26 @@
34
34
  .arc-button[data-size="md"] .btn { font-size: var(--text-xs); padding: var(--space-sm) var(--space-lg); }
35
35
  .arc-button[data-size="lg"] .btn { font-size: var(--text-xs); padding: var(--space-md) var(--space-xl); letter-spacing: 3px; }
36
36
 
37
- /* Primary */
38
- .arc-button:not([data-variant]) .btn,
39
- .arc-button[data-variant="primary"] .btn {
37
+ /* Default → primary */
38
+ .arc-button:not([data-variant]) .btn {
40
39
  background: var(--accent-primary);
41
40
  color: var(--bg-deep);
42
41
  border-color: var(--accent-primary);
43
42
  }
44
- .arc-button:not([data-variant]) .btn:hover,
45
- .arc-button[data-variant="primary"] .btn:hover { box-shadow: var(--glow-primary); }
43
+ .arc-button:not([data-variant]) .btn:hover { box-shadow: var(--glow-primary); }
44
+
45
+ /* :active scale */
46
46
  .arc-button:not([data-variant]) .btn:active,
47
47
  .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5); }
48
-
49
- /* Secondary */
50
- .arc-button[data-variant="secondary"] .btn {
51
- background: transparent;
52
- color: var(--text-primary);
53
- border-color: var(--border-default);
54
- }
55
- .arc-button[data-variant="secondary"] .btn:hover {
56
- border-color: var(--accent-primary);
57
- color: var(--accent-primary);
58
- box-shadow: 0 0 20px var(--accent-primary-ring);
59
- }
60
48
  .arc-button[data-variant="secondary"] .btn:active {
61
49
  transform: scale(0.97);
62
50
  background: rgba(var(--accent-primary-rgb),0.05);
63
51
  }
64
-
65
- /* Ghost */
66
- .arc-button[data-variant="ghost"] .btn {
67
- background: transparent;
68
- color: var(--text-muted);
69
- border-color: transparent;
70
- }
71
- .arc-button[data-variant="ghost"] .btn:hover {
72
- color: var(--text-primary);
73
- background: var(--bg-hover);
74
- }
75
52
  .arc-button[data-variant="ghost"] .btn:active {
76
53
  transform: scale(0.97);
77
54
  background: var(--bg-elevated);
78
55
  }
79
56
 
80
- /* Focus */
81
- .arc-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
82
-
83
- /* Disabled */
84
- .arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
85
-
86
57
  /* Prefix / Suffix */
87
58
  .arc-button .btn__prefix,
88
59
  .arc-button .btn__suffix {
package/css/callout.css CHANGED
@@ -9,8 +9,8 @@
9
9
  gap: var(--space-sm);
10
10
  padding: var(--space-md) var(--space-lg);
11
11
  border-radius: var(--radius-md);
12
- border: 1px solid var(--border-default);
13
- background: var(--bg-card);
12
+ border: 1px solid rgba(var(--_status-rgb), 0.12);
13
+ background: rgba(var(--_status-rgb), 0.04);
14
14
  font-family: var(--font-body);
15
15
  font-size: var(--text-sm);
16
16
  line-height: 1.7;
@@ -27,6 +27,7 @@
27
27
  flex-shrink: 0;
28
28
  display: flex;
29
29
  align-items: center;
30
+ color: var(--_status-color);
30
31
  }
31
32
 
32
33
  .arc-callout .callout__label {
@@ -35,44 +36,13 @@
35
36
  font-weight: 600;
36
37
  letter-spacing: 1.5px;
37
38
  text-transform: uppercase;
39
+ color: var(--_status-color);
38
40
  }
39
41
 
40
42
  .arc-callout .callout__content {
41
43
  min-width: 0;
42
44
  }
43
45
 
44
- /* ── Info ── */
45
- .arc-callout[data-variant="info"] .callout {
46
- border-color: rgba(var(--accent-primary-rgb), 0.12);
47
- background: rgba(var(--accent-primary-rgb), 0.04);
48
- }
49
- .arc-callout[data-variant="info"] .callout__icon { color: var(--accent-primary); }
50
- .arc-callout[data-variant="info"] .callout__label { color: var(--accent-primary); }
51
-
52
- /* ── Warning ── */
53
- .arc-callout[data-variant="warning"] .callout {
54
- border-color: rgba(var(--color-warning-rgb), 0.15);
55
- background: rgba(var(--color-warning-rgb), 0.04);
56
- }
57
- .arc-callout[data-variant="warning"] .callout__icon { color: var(--color-warning); }
58
- .arc-callout[data-variant="warning"] .callout__label { color: var(--color-warning); }
59
-
60
- /* ── Tip ── */
61
- .arc-callout[data-variant="tip"] .callout {
62
- border-color: rgba(var(--color-success-rgb), 0.15);
63
- background: rgba(var(--color-success-rgb), 0.04);
64
- }
65
- .arc-callout[data-variant="tip"] .callout__icon { color: var(--color-success); }
66
- .arc-callout[data-variant="tip"] .callout__label { color: var(--color-success); }
67
-
68
- /* ── Danger ── */
69
- .arc-callout[data-variant="danger"] .callout {
70
- border-color: rgba(var(--color-error-rgb), 0.15);
71
- background: rgba(var(--color-error-rgb), 0.04);
72
- }
73
- .arc-callout[data-variant="danger"] .callout__icon { color: var(--color-error); }
74
- .arc-callout[data-variant="danger"] .callout__label { color: var(--color-error); }
75
-
76
46
  @media (prefers-reduced-motion: reduce) {
77
47
  .arc-callout *,
78
48
  .arc-callout *::before,
package/css/card.css CHANGED
@@ -3,40 +3,20 @@
3
3
  /* arc-card */
4
4
  .arc-card { display: block; }
5
5
 
6
- .arc-card .card {
7
- position: relative;
8
- border-radius: var(--radius-lg);
9
- padding: 1px;
6
+ .arc-card .card { height: 100%; }
7
+
8
+ /* Suppress hover effect when no href */
9
+ .arc-card:not([data-href]) .card:hover {
10
10
  background: var(--border-subtle);
11
- transition: background var(--transition-slow);
12
- text-decoration: none;
13
- display: flex;
14
- flex-direction: column;
15
- height: 100%;
16
11
  }
17
-
18
- .arc-card[href] .card:hover {
19
- background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
12
+ .arc-card:not([data-href]) .card:hover .card__inner {
13
+ box-shadow: none;
20
14
  }
21
15
 
22
16
  .arc-card .card__inner {
23
- position: relative;
24
- background: var(--bg-card);
25
- border-radius: calc(var(--radius-lg) - 1px);
26
17
  padding: var(--space-xl) var(--space-lg);
27
- flex: 1;
28
- min-height: 0;
29
- display: flex;
30
- flex-direction: column;
31
- transition: box-shadow var(--transition-slow);
32
18
  }
33
19
 
34
- .arc-card .card:hover .card__inner {
35
- box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
36
- }
37
-
38
- .arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
39
-
40
20
  .arc-card .card__body {
41
21
  flex: 1;
42
22
  }
package/css/feature-card.css CHANGED
@@ -3,39 +3,14 @@
3
3
  /* arc-feature-card */
4
4
  .arc-feature-card { display: block; height: 100%; }
5
5
 
6
- .arc-feature-card .card {
7
- position: relative;
8
- border-radius: var(--radius-lg);
9
- height: 100%;
10
- padding: 1px;
11
- background: var(--border-subtle);
12
- transition: background var(--transition-slow);
13
- text-decoration: none;
14
- display: flex;
15
- flex-direction: column;
16
- }
17
-
18
- .arc-feature-card .card:hover {
19
- background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
20
- }
6
+ .arc-feature-card .card { height: 100%; }
21
7
 
22
8
  .arc-feature-card .card__inner {
23
- position: relative;
24
- background: var(--bg-card);
25
- border-radius: calc(var(--radius-lg) - 1px);
26
9
  padding: var(--space-xl) var(--space-lg);
27
- display: flex;
28
- flex-direction: column;
29
10
  gap: var(--space-md);
30
- flex: 1;
31
- transition: box-shadow var(--transition-slow);
32
11
  z-index: 1;
33
12
  }
34
13
 
35
- .arc-feature-card .card:hover .card__inner {
36
- box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
37
- }
38
-
39
14
  .arc-feature-card .card__icon {
40
15
  width: 44px;
41
16
  height: 44px;
@@ -85,8 +60,6 @@
85
60
 
86
61
  .arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
87
62
 
88
- .arc-feature-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
89
-
90
63
  @media (max-width: 768px) {
91
64
  .arc-feature-card .card__inner { padding: var(--space-lg) var(--space-md); }
92
65
  }
package/css/icon-button.css CHANGED
@@ -53,59 +53,41 @@
53
53
  .arc-icon-button[data-size="md"] .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
54
54
  .arc-icon-button[data-size="lg"] .btn--has-text { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
55
55
 
56
- /* Ghost (default) */
57
- .arc-icon-button:not([data-variant]) .btn,
58
- .arc-icon-button[data-variant="ghost"] .btn {
56
+ /* Default → ghost */
57
+ .arc-icon-button:not([data-variant]) .btn {
59
58
  background: transparent;
60
59
  color: var(--text-muted);
61
60
  border-color: transparent;
62
61
  }
63
- .arc-icon-button:not([data-variant]) .btn:hover,
64
- .arc-icon-button[data-variant="ghost"] .btn:hover {
62
+ .arc-icon-button:not([data-variant]) .btn:hover {
65
63
  color: var(--text-primary);
66
64
  background: var(--bg-hover);
67
65
  }
66
+
67
+ /* :active scale */
68
68
  .arc-icon-button:not([data-variant]) .btn:active,
69
69
  .arc-icon-button[data-variant="ghost"] .btn:active {
70
70
  transform: scale(0.93);
71
71
  background: var(--bg-elevated);
72
72
  }
73
-
74
- /* Secondary */
75
- .arc-icon-button[data-variant="secondary"] .btn {
76
- background: transparent;
77
- color: var(--text-secondary);
78
- border-color: var(--border-default);
79
- }
80
- .arc-icon-button[data-variant="secondary"] .btn:hover {
81
- border-color: var(--accent-primary);
82
- color: var(--accent-primary);
83
- box-shadow: 0 0 16px var(--accent-primary-ring);
84
- }
85
73
  .arc-icon-button[data-variant="secondary"] .btn:active {
86
74
  transform: scale(0.93);
87
75
  background: rgba(var(--accent-primary-rgb), 0.05);
88
76
  }
89
-
90
- /* Primary */
91
- .arc-icon-button[data-variant="primary"] .btn {
92
- background: var(--accent-primary);
93
- color: var(--bg-deep);
94
- border-color: var(--accent-primary);
95
- }
96
- .arc-icon-button[data-variant="primary"] .btn:hover {
97
- box-shadow: var(--glow-primary);
98
- }
99
77
  .arc-icon-button[data-variant="primary"] .btn:active {
100
78
  transform: scale(0.93);
101
79
  box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
102
80
  }
103
81
 
104
- /* Focus */
105
- .arc-icon-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
82
+ /* IconButton secondary uses text-secondary instead of text-primary */
83
+ .arc-icon-button[data-variant="secondary"] .btn {
84
+ color: var(--text-secondary);
85
+ }
106
86
 
107
- /* Disabled */
108
- .arc-icon-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
87
+ /* IconButton secondary hover uses smaller glow */
88
+ .arc-icon-button[data-variant="secondary"] .btn:hover {
89
+ box-shadow: 0 0 16px var(--accent-primary-ring);
90
+ }
109
91
 
110
92
  @media (prefers-reduced-motion: reduce) {
111
93
  .arc-icon-button *,
package/css/top-bar.css CHANGED
@@ -16,15 +16,19 @@
16
16
 
17
17
  .arc-top-bar .topbar {
18
18
  position: relative;
19
- display: flex;
20
- align-items: center;
21
19
  height: var(--nav-height);
22
20
  padding: 0 var(--space-lg);
23
21
  background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
24
22
  backdrop-filter: blur(12px) saturate(130%);
25
23
  -webkit-backdrop-filter: blur(12px) saturate(130%);
26
24
  border-bottom: 1px solid var(--border-subtle);
25
+ }
26
+
27
+ .arc-top-bar .topbar__content {
28
+ display: flex;
29
+ align-items: center;
27
30
  gap: var(--space-md);
31
+ height: 100%;
28
32
  }
29
33
 
30
34
  .arc-top-bar .topbar__glow {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arclux/arc-ui-html",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "description": "ARC UI — Standalone CSS and HTML examples for vanilla projects. Auto-generated by @arclux/prism.",
5
5
  "license": "MIT",
6
6
  "type": "module",