@voltro/ui-shadcn 0.66.1 → 0.68.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.
- package/CHANGELOG.md +259 -0
- package/THIRD-PARTY-NOTICES.md +6 -6
- package/dist/brand.d.ts +5 -1
- package/dist/brand.js +3 -177
- package/dist/index.d.ts +82 -7
- package/dist/index.js +1316 -882
- package/dist/signal.css +263 -0
- package/dist/tokens.css +9 -0
- package/dist/voltroLogo-CSnSpQhz.js +207 -0
- package/package.json +7 -6
- package/src/brand/voltroLogo.tsx +13 -4
- package/src/compositions/appShell.tsx +7 -9
- package/src/compositions/codeCompare.tsx +2 -3
- package/src/compositions/docsLayout.tsx +56 -35
- package/src/compositions/profileMenu.tsx +12 -9
- package/src/compositions/signalControls.tsx +43 -0
- package/src/compositions/signalField.tsx +75 -0
- package/src/compositions/signalHeader.tsx +96 -0
- package/src/compositions/signalMotion.ts +68 -0
- package/src/compositions/themeToggle.tsx +6 -3
- package/src/cookies.ts +3 -0
- package/src/index.ts +5 -1
- package/src/primitives/codeBlock.tsx +4 -4
- package/src/primitives/dialog.tsx +2 -2
- package/src/primitives/highlightedCode.tsx +2 -0
- package/src/primitives/searchModal.tsx +16 -2
- package/src/signal.css +263 -0
- package/src/tokens.css +9 -0
|
@@ -106,6 +106,7 @@ export const SearchModal = <TItem,>({
|
|
|
106
106
|
const [query, setQuery] = useState('')
|
|
107
107
|
const [activeIdx, setActiveIdx] = useState(0)
|
|
108
108
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
109
|
+
const dialogRef = useRef<HTMLDivElement>(null)
|
|
109
110
|
const listboxId = useId()
|
|
110
111
|
|
|
111
112
|
// Re-run search on every query change. Cheap for our doc-sized
|
|
@@ -132,18 +133,21 @@ export const SearchModal = <TItem,>({
|
|
|
132
133
|
// Focus the input + reset state on open.
|
|
133
134
|
useEffect(() => {
|
|
134
135
|
if (!open) return
|
|
136
|
+
const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null
|
|
135
137
|
setQuery('')
|
|
136
138
|
setActiveIdx(0)
|
|
137
139
|
// RAF lets the modal mount before we grab focus, so the autofocus
|
|
138
140
|
// ring doesn't paint twice.
|
|
139
141
|
const id = requestAnimationFrame(() => inputRef.current?.focus())
|
|
140
|
-
return () =>
|
|
142
|
+
return () => {
|
|
143
|
+
cancelAnimationFrame(id)
|
|
144
|
+
if (previous?.isConnected) previous.focus()
|
|
145
|
+
}
|
|
141
146
|
}, [open])
|
|
142
147
|
|
|
143
148
|
const close = useCallback((): void => setOpen(false), [setOpen])
|
|
144
149
|
|
|
145
150
|
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
|
|
146
|
-
if (e.key === 'Escape') { e.preventDefault(); close(); return }
|
|
147
151
|
if (e.key === 'ArrowDown') {
|
|
148
152
|
e.preventDefault()
|
|
149
153
|
setActiveIdx((i) => Math.min(i + 1, Math.max(hits.length - 1, 0)))
|
|
@@ -164,10 +168,20 @@ export const SearchModal = <TItem,>({
|
|
|
164
168
|
|
|
165
169
|
return (
|
|
166
170
|
<div
|
|
171
|
+
ref={dialogRef}
|
|
167
172
|
role="dialog"
|
|
168
173
|
aria-modal="true"
|
|
169
174
|
aria-label={t.dialog}
|
|
170
175
|
className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4"
|
|
176
|
+
onKeyDown={event => {
|
|
177
|
+
if (event.key === 'Escape') { event.preventDefault(); close(); return }
|
|
178
|
+
if (event.key !== 'Tab') return
|
|
179
|
+
const controls = [...(dialogRef.current?.querySelectorAll<HTMLElement>('button:not([disabled]), input:not([disabled]), a[href], [tabindex="0"]') ?? [])]
|
|
180
|
+
const first = controls[0]
|
|
181
|
+
const last = controls.at(-1)
|
|
182
|
+
if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus() }
|
|
183
|
+
if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus() }
|
|
184
|
+
}}
|
|
171
185
|
>
|
|
172
186
|
{/* Backdrop — click closes */}
|
|
173
187
|
<button
|
package/src/signal.css
ADDED
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
/* Voltro Signal: opt-in brand theme. Import after tokens.css. */
|
|
2
|
+
:root {
|
|
3
|
+
--signal-violet: #7c3aed;
|
|
4
|
+
--signal-header-height: 112px;
|
|
5
|
+
--signal-light: #6d28d9;
|
|
6
|
+
--signal-ease: cubic-bezier(.16,1,.3,1);
|
|
7
|
+
--background: #faf9fc;
|
|
8
|
+
--foreground: #21192d;
|
|
9
|
+
--card: #ffffff;
|
|
10
|
+
--card-foreground: #21192d;
|
|
11
|
+
--popover: #ffffff;
|
|
12
|
+
--popover-foreground: #21192d;
|
|
13
|
+
--primary: #7c3aed;
|
|
14
|
+
--primary-foreground: #ffffff;
|
|
15
|
+
--secondary: #eee9f4;
|
|
16
|
+
--secondary-foreground: #38264e;
|
|
17
|
+
--muted: #f2eef7;
|
|
18
|
+
--muted-foreground: #6b5c7c;
|
|
19
|
+
--accent: #eee6fc;
|
|
20
|
+
--accent-foreground: #5b21b6;
|
|
21
|
+
--border: #ded6e9;
|
|
22
|
+
--input: #d0c4df;
|
|
23
|
+
--ring: #7c3aed;
|
|
24
|
+
--sidebar: #f3eff8;
|
|
25
|
+
--sidebar-foreground: #38264e;
|
|
26
|
+
--sidebar-primary: #7c3aed;
|
|
27
|
+
--sidebar-primary-foreground: #fff;
|
|
28
|
+
--sidebar-accent: #e7ddf5;
|
|
29
|
+
--sidebar-accent-foreground: #5b21b6;
|
|
30
|
+
--sidebar-border: #ded6e9;
|
|
31
|
+
--sidebar-ring: #7c3aed;
|
|
32
|
+
--radius: .375rem;
|
|
33
|
+
--signal-accent-ink: #6d28d9;
|
|
34
|
+
--signal-ground: #f4effa;
|
|
35
|
+
--signal-ink: #21192d;
|
|
36
|
+
--signal-muted: #6b5c7c;
|
|
37
|
+
--signal-line: #d4c7e5;
|
|
38
|
+
--signal-detail: #735094;
|
|
39
|
+
--signal-field-a: #e4d5f5;
|
|
40
|
+
--signal-field-b: #efe5fb;
|
|
41
|
+
--signal-field-base: #faf9fc;
|
|
42
|
+
--signal-field-floor: #faf9fc;
|
|
43
|
+
}
|
|
44
|
+
.dark {
|
|
45
|
+
--signal-light: #a874ff;
|
|
46
|
+
--signal-ground: #0b0911;
|
|
47
|
+
--signal-ink: #f5f3fa;
|
|
48
|
+
--signal-muted: #b9afc9;
|
|
49
|
+
--signal-line: #342b43;
|
|
50
|
+
--signal-detail: #c2a1e8;
|
|
51
|
+
--signal-field-a: #29193d;
|
|
52
|
+
--signal-field-b: #1b1430;
|
|
53
|
+
--signal-field-base: #100c19;
|
|
54
|
+
--signal-field-floor: linear-gradient(145deg,#100c18 12%,#110c1e 55%,#0e0b15 100%);
|
|
55
|
+
--background: #100c19;
|
|
56
|
+
--foreground: #f5f3fa;
|
|
57
|
+
--card: #17111f;
|
|
58
|
+
--card-foreground: #f5f3fa;
|
|
59
|
+
--popover: #1c1427;
|
|
60
|
+
--popover-foreground: #f5f3fa;
|
|
61
|
+
--primary: #7c3aed;
|
|
62
|
+
--primary-foreground: #ffffff;
|
|
63
|
+
--secondary: #251b33;
|
|
64
|
+
--secondary-foreground: #e7dbf7;
|
|
65
|
+
--muted: #201828;
|
|
66
|
+
--muted-foreground: #b9afc9;
|
|
67
|
+
--accent: #2c1d40;
|
|
68
|
+
--accent-foreground: #d9bcff;
|
|
69
|
+
--border: #342b43;
|
|
70
|
+
--input: #584566;
|
|
71
|
+
--ring: #b995ff;
|
|
72
|
+
--sidebar: #140f1d;
|
|
73
|
+
--sidebar-foreground: #d5c9e4;
|
|
74
|
+
--sidebar-primary: #a874ff;
|
|
75
|
+
--sidebar-primary-foreground: #170c29;
|
|
76
|
+
--sidebar-accent: #2b1e3c;
|
|
77
|
+
--sidebar-accent-foreground: #e2ccff;
|
|
78
|
+
--sidebar-border: #342b43;
|
|
79
|
+
--sidebar-ring: #b995ff;
|
|
80
|
+
--signal-accent-ink: #c19aff;
|
|
81
|
+
}
|
|
82
|
+
@layer components {
|
|
83
|
+
:where(a, button, input, textarea, select, summary):focus-visible {
|
|
84
|
+
outline: 2px solid var(--ring);
|
|
85
|
+
outline-offset: 4px;
|
|
86
|
+
}
|
|
87
|
+
:where(input, textarea) { caret-color: var(--signal-accent-ink); }
|
|
88
|
+
::selection { background: #6530ba; color: #fff; }
|
|
89
|
+
:where(table, [role="table"]) { font-variant-numeric: tabular-nums; }
|
|
90
|
+
}
|
|
91
|
+
.signal-stage { position: relative; isolation: isolate; }
|
|
92
|
+
.signal-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 89% 22%,var(--signal-field-a) 0%,transparent 48%),radial-gradient(ellipse at 8% 76%,var(--signal-field-b) 0%,transparent 44%),var(--signal-field-floor)}
|
|
93
|
+
.field-contours{position:absolute;width:max(100%,1400px);height:auto;top:0;right:0;max-width:none}
|
|
94
|
+
.field-light{position:absolute;inset:20% 0 8% 0;background:radial-gradient(ellipse at 66% 49%,#7c3aed26 0%,#a874ff0b 31%,transparent 65%);opacity:.45;transition:opacity 650ms ease-out}
|
|
95
|
+
.signal-stage:has(.signal-demo[data-state=running]) .field-light{opacity:1}
|
|
96
|
+
.field-highlight{stroke-dasharray:7 93;stroke-dashoffset:-34;opacity:.22}
|
|
97
|
+
.signal-stage:has(.signal-demo[data-state=running]) .field-highlight{animation:field-response 2900ms ease-out 1}
|
|
98
|
+
@keyframes field-response{0%{stroke-dashoffset:-34;opacity:.22}40%{opacity:.55}100%{stroke-dashoffset:-78;opacity:0}}
|
|
99
|
+
.field-ambient-trace{stroke-dasharray:7 93;opacity:0;animation:field-travel 14s linear infinite;animation-play-state:paused}
|
|
100
|
+
.trace-1{animation-delay:-3s}.trace-2{animation-delay:-6s}.trace-3{animation-delay:-9s}.trace-4{animation-delay:-11s;animation-duration:17s}
|
|
101
|
+
.signal-atmosphere[data-motion=running] .field-ambient-trace{animation-play-state:running}
|
|
102
|
+
@keyframes field-travel{0%{stroke-dashoffset:3;opacity:0}10%{opacity:.32}78%{opacity:.32}100%{stroke-dashoffset:-100;opacity:0}}
|
|
103
|
+
|
|
104
|
+
.signal-stage .signal-atmosphere { mask-image: linear-gradient(#000 0%, #000 85%, transparent 100%); }
|
|
105
|
+
.signal-shell { width: min(100% - 88px, 1536px); margin-inline: auto; }
|
|
106
|
+
/* One opening rhythm for Framework, Cloud and the documentation index. */
|
|
107
|
+
.signal-opener { padding-top: 50px; }
|
|
108
|
+
.signal-opener-title { margin: 0; position: relative; z-index: 1; font-size: clamp(48px, 6.15vw, 96px); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; }
|
|
109
|
+
.signal-opener-title > span { display: block; }
|
|
110
|
+
.signal-opener-accent { color: var(--signal-light); margin-top: 9px; }
|
|
111
|
+
.signal-opener-description { position: relative; z-index: 1; max-width: 75ch; margin: 27px 0 0; font-size: clamp(18px, 1.64vw, 25px); line-height: 1.48; letter-spacing: -.023em; color: var(--signal-ink); }
|
|
112
|
+
.signal-opener-description > span { display: block; }
|
|
113
|
+
.signal-opener-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 39px; width: fit-content; margin-top: 29px; }
|
|
114
|
+
.signal-opener-secondary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--signal-ink); }
|
|
115
|
+
.signal-opener-secondary > span { position: relative; padding-block: 7px; }
|
|
116
|
+
.signal-opener-secondary > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--signal-light); transform-origin: left; transform: scaleX(.22); transition: transform 220ms var(--signal-ease); }
|
|
117
|
+
.signal-opener-actions .signal-opener-secondary svg { width: 16px; height: 16px; color: var(--signal-light); transition: transform 200ms var(--signal-ease); }
|
|
118
|
+
.signal-opener-secondary:hover > span::after, .signal-opener-secondary:focus-visible > span::after { transform: scaleX(1); }
|
|
119
|
+
.signal-opener-secondary:hover svg, .signal-opener-secondary:focus-visible svg { transform: translate(2px, -2px); }
|
|
120
|
+
.signal-opener-actions .signal-primary { position: relative; isolation: isolate; }
|
|
121
|
+
.signal-opener-actions .signal-arrow svg { width: 22px; height: 22px; }
|
|
122
|
+
.signal-opener-actions .signal-primary::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: #d5beff; transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--signal-ease); }
|
|
123
|
+
.signal-opener-actions .signal-primary:hover::after, .signal-opener-actions .signal-primary:focus-visible::after { transform: scaleX(1); }
|
|
124
|
+
.signal-opener-actions .signal-primary:active svg { transform: translateX(2px); }
|
|
125
|
+
@media (min-width: 1600px) { .signal-opener { padding-top: 70px; } }
|
|
126
|
+
@media (max-width: 1150px) {
|
|
127
|
+
.signal-opener { padding-top: 40px; }
|
|
128
|
+
.signal-opener-title { font-size: clamp(48px, 6.1vw, 75px); }
|
|
129
|
+
}
|
|
130
|
+
@media (max-width: 760px) {
|
|
131
|
+
.signal-opener { padding-top: 29px; }
|
|
132
|
+
.signal-opener-title { font-size: clamp(37px, 7.5vw, 57px); line-height: 1.1; letter-spacing: -.035em; }
|
|
133
|
+
.signal-opener-accent { margin-top: 5px; }
|
|
134
|
+
.signal-opener-description { max-width: 40ch; margin-top: 22px; font-size: 16px; line-height: 1.5; }
|
|
135
|
+
.signal-opener-description > span { display: inline; }
|
|
136
|
+
.signal-opener-description > span + span::before { content: ' '; }
|
|
137
|
+
.signal-opener-actions { width: 100%; gap: 12px 22px; margin-top: 24px; }
|
|
138
|
+
.signal-opener-secondary { gap: 5px; font-size: 13px; }
|
|
139
|
+
.signal-opener-actions .signal-opener-secondary svg { width: 14px; height: 14px; }
|
|
140
|
+
}
|
|
141
|
+
@media (prefers-reduced-motion: reduce) {
|
|
142
|
+
.signal-opener-secondary > span::after, .signal-opener-actions .signal-primary::after { transition: none; }
|
|
143
|
+
.signal-opener-actions svg { transition: none; }
|
|
144
|
+
.signal-opener-actions a:hover svg, .signal-opener-actions a:focus-visible svg, .signal-opener-actions a:active svg { transform: none; }
|
|
145
|
+
}
|
|
146
|
+
.signal-primary {
|
|
147
|
+
display: inline-flex; align-items: stretch; min-height: 54px; width: fit-content;
|
|
148
|
+
background: #7c3aed linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed);
|
|
149
|
+
background-size: 140% 100%; color: #fff; border-radius: 4px;
|
|
150
|
+
box-shadow: 0 5px 20px -9px #7c3aed66; overflow: hidden;
|
|
151
|
+
font-size: 1rem; font-weight: 500; text-decoration: none;
|
|
152
|
+
transition: background-position 280ms var(--signal-ease), box-shadow 240ms var(--signal-ease);
|
|
153
|
+
}
|
|
154
|
+
.signal-primary > span:first-child { padding: 14px 23px; display: flex; align-items: center; }
|
|
155
|
+
.signal-primary .signal-arrow { width: 55px; border-left: 1px solid #a57bdd; display: grid; place-items: center; }
|
|
156
|
+
.signal-primary svg { width: 22px; height: 22px; transition: transform 220ms var(--signal-ease); }
|
|
157
|
+
.signal-primary:hover, .signal-primary:focus-visible { background-position: 100% 50%; box-shadow: 0 8px 30px -8px #7c3aed7a; }
|
|
158
|
+
.signal-primary:hover svg, .signal-primary:focus-visible svg { transform: translateX(4px); }
|
|
159
|
+
.signal-text-link { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; text-underline-offset: 8px; text-decoration-color: var(--signal-light); }
|
|
160
|
+
.signal-text-link:hover, .signal-text-link:focus-visible { text-decoration-line: underline; }
|
|
161
|
+
.signal-text-link svg { width: 16px; height: 16px; color: var(--signal-accent-ink); }
|
|
162
|
+
.signal-motion-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--muted-foreground); font-size: 12px; background: none; border: 0; cursor: pointer; }
|
|
163
|
+
.signal-motion-toggle svg { width: 16px; height: 16px; }
|
|
164
|
+
.signal-motion-toggle:hover { color: var(--signal-accent-ink); }
|
|
165
|
+
@media (max-width: 1150px) { .signal-shell { width: calc(100% - 56px); } }
|
|
166
|
+
@media (max-width: 760px) {
|
|
167
|
+
.signal-shell { width: calc(100% - 40px); }
|
|
168
|
+
.field-contours { width: 1000px; right: -390px; top: 50px; }
|
|
169
|
+
.signal-atmosphere { background: radial-gradient(ellipse at 100% 24%, var(--signal-field-a), transparent 55%), radial-gradient(ellipse at 0% 80%, var(--signal-field-b), transparent 48%), var(--signal-field-base); }
|
|
170
|
+
.signal-primary { min-height: 50px; font-size: 14px; }
|
|
171
|
+
.signal-primary > span:first-child { padding-inline: 18px; }
|
|
172
|
+
.signal-primary .signal-arrow { width: 44px; }
|
|
173
|
+
}
|
|
174
|
+
@media (prefers-reduced-motion: reduce) {
|
|
175
|
+
.field-ambient-trace { animation: none; }
|
|
176
|
+
.signal-primary, .signal-primary svg { transition: none; }
|
|
177
|
+
.signal-motion-toggle { display: none; }
|
|
178
|
+
html { scroll-behavior: auto; }
|
|
179
|
+
}
|
|
180
|
+
@media (forced-colors: active) {
|
|
181
|
+
.signal-atmosphere { display: none; }
|
|
182
|
+
.signal-primary { border: 1px solid ButtonText; }
|
|
183
|
+
}
|
|
184
|
+
.signal-masthead { position: relative; z-index: 40; color: var(--foreground); background: transparent; transition: background-color 180ms var(--signal-ease); }
|
|
185
|
+
.signal-masthead-sticky { position: sticky; top: 0; }
|
|
186
|
+
.signal-masthead[data-scrolled=true] { background: var(--background); }
|
|
187
|
+
.signal-header { min-height: var(--signal-header-height); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; gap: 24px; }
|
|
188
|
+
.signal-brand { flex: none; }
|
|
189
|
+
.signal-brand .voltro-wordmark { --voltro-wordmark-size: 42px; }
|
|
190
|
+
.signal-brand > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
|
|
191
|
+
.signal-brand svg { flex: none; }
|
|
192
|
+
.signal-navigation-area { display: flex; align-items: center; gap: 24px; }
|
|
193
|
+
.signal-navigation { position: relative; display: flex; align-items: center; padding: 5px; gap: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--background); }
|
|
194
|
+
.signal-nav-marker { position: absolute; inset-block: 5px; left: 5px; width: 100px; border-radius: 2px; background: var(--secondary); transform-origin: left; transition: transform 240ms var(--signal-ease); pointer-events: none; }
|
|
195
|
+
.signal-nav-item { border: 0; background: none; position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 17px; font-size: 14px; font-weight: 500; min-height: 44px; white-space: nowrap; color: var(--foreground); }
|
|
196
|
+
.signal-nav-dot { width: 5px; height: 5px; background: var(--signal-light); flex: none; }
|
|
197
|
+
.signal-header svg:not(.voltro-logo) { stroke-linecap: round; stroke-linejoin: round; }
|
|
198
|
+
.signal-nav-item > svg, .signal-menu-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--muted-foreground); transition: transform 180ms var(--signal-ease); }
|
|
199
|
+
.signal-nav-item[aria-expanded=true] > svg { transform: rotate(180deg); }
|
|
200
|
+
.signal-nav-item[href]:hover > svg { transform: translate(2px, -2px); }
|
|
201
|
+
.signal-header-utilities { display: flex; align-items: center; gap: 12px; }
|
|
202
|
+
.signal-control { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--background); color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; text-decoration: none; transition: color 180ms var(--signal-ease), border-color 180ms var(--signal-ease), background-color 180ms var(--signal-ease); }
|
|
203
|
+
.signal-control > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
|
204
|
+
.signal-control:hover, .signal-control[data-state=open] { border-color: var(--input); background: var(--secondary); }
|
|
205
|
+
.signal-preferences { padding-inline: 12px; border-color: transparent; background: transparent; color: var(--muted-foreground); font-size: 12px; }
|
|
206
|
+
.signal-preferences:hover, .signal-preferences[data-state=open] { color: var(--foreground); }
|
|
207
|
+
.signal-header-action { line-height: 1.5; }
|
|
208
|
+
.signal-header-action > svg { width: 16px; height: 16px; color: var(--signal-accent-ink); transition: transform 180ms var(--signal-ease); }
|
|
209
|
+
.signal-header-action:hover > svg { transform: translateX(3px); }
|
|
210
|
+
.signal-search { width: 224px; justify-content: flex-start; color: var(--muted-foreground); font-weight: 400; }
|
|
211
|
+
.signal-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; font-family: inherit; font-size: 11px; line-height: 1.4; }
|
|
212
|
+
.signal-search:hover { color: var(--foreground); }
|
|
213
|
+
@media(max-width:1250px) { .signal-search { width: 56px; padding: 0; justify-content: center; } .signal-search > span, .signal-search kbd { display: none; } }
|
|
214
|
+
.signal-menu { position: absolute; right: 100px; top: calc(100% - 16px); width: 570px; padding: 26px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--input); border-radius: 7px; }
|
|
215
|
+
.signal-menu[hidden] { display: none; }
|
|
216
|
+
.signal-menu-intro { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
|
|
217
|
+
.signal-menu-links { display: flex; flex-direction: column; }
|
|
218
|
+
.signal-menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
|
|
219
|
+
.signal-menu-links a:first-child { padding-top: 0; }
|
|
220
|
+
.signal-menu-links a:last-child { border: 0; padding-bottom: 0; }
|
|
221
|
+
.signal-menu-links a:hover { color: var(--signal-accent-ink); }
|
|
222
|
+
.signal-menu-links small { display: block; font-size: 12px; color: var(--muted-foreground); margin-top: 5px; }
|
|
223
|
+
@media(max-width:1150px) { :root { --signal-header-height: 96px; } .signal-navigation-area { gap: 24px; } .signal-nav-item { padding-inline: 12px; } }
|
|
224
|
+
@media(max-width:900px) {
|
|
225
|
+
:root { --signal-header-height: 158px; }
|
|
226
|
+
.signal-header { padding-block: 18px; align-items: center; flex-wrap: wrap; gap: 16px; }
|
|
227
|
+
.signal-brand .voltro-wordmark { --voltro-wordmark-size: 32px; display: grid; grid-template-columns: auto auto; row-gap: 5px; }
|
|
228
|
+
.signal-brand .voltro-wordmark > svg { grid-row: 1 / 3; }
|
|
229
|
+
.signal-brand .voltro-wordmark-label, .signal-brand .voltro-product-badge { grid-column: 2; justify-self: start; }
|
|
230
|
+
.signal-navigation-area { display: contents; }
|
|
231
|
+
.signal-navigation { order: 3; width: 100%; gap: 3px; }
|
|
232
|
+
.signal-nav-item { flex: 1; justify-content: center; padding: 7px; font-size: 12px; gap: 7px; }
|
|
233
|
+
.signal-header-utilities { margin-left: auto; }
|
|
234
|
+
.signal-control { min-height: 44px; font-size: 12px; padding-inline: 12px; border-radius: 5px; }
|
|
235
|
+
.signal-search, .signal-preferences { width: 44px; padding: 0; }
|
|
236
|
+
.signal-preferences > span { display: none; }
|
|
237
|
+
.signal-menu { top: 100%; right: 0; width: 100%; grid-template-columns: 1fr; padding: 20px; gap: 21px; }
|
|
238
|
+
.signal-menu-intro { font-size: 20px; }
|
|
239
|
+
.signal-menu-links a { min-height: 55px; }
|
|
240
|
+
}
|
|
241
|
+
@media(prefers-reduced-motion:reduce) { .signal-masthead, .signal-nav-marker, .signal-nav-item > svg, .signal-control, .signal-header-action > svg { transition: none; } }
|
|
242
|
+
|
|
243
|
+
.signal-skip { position: fixed; top: 10px; left: 20px; padding: 12px 20px; background: var(--foreground); color: var(--background); z-index: 100; transform: translateY(-160%); }
|
|
244
|
+
.signal-skip:focus { transform: none; }
|
|
245
|
+
|
|
246
|
+
.signal-operate h1 { letter-spacing: -.03em; }
|
|
247
|
+
.signal-operate h2 { letter-spacing: -.02em; }
|
|
248
|
+
.signal-operate [data-sidebar="sidebar"], .signal-operate aside { background-color: var(--sidebar); }
|
|
249
|
+
.signal-operate [aria-current="page"], .signal-operate [data-active="true"] { color: var(--sidebar-accent-foreground); background-color: var(--sidebar-accent); }
|
|
250
|
+
.signal-operate [role="tab"][aria-selected="true"] { color: var(--signal-accent-ink); }
|
|
251
|
+
.signal-operate :where(td, th) { padding-block: .8rem; }
|
|
252
|
+
.signal-operate :where(tbody tr) { transition: background-color 140ms; }
|
|
253
|
+
.signal-operate :where(tbody tr):hover { background-color: var(--muted); }
|
|
254
|
+
.signal-operate :where(input, select, textarea) { border-radius: 4px; }
|
|
255
|
+
@media(prefers-reduced-motion:reduce) { .signal-operate :where(tbody tr) { transition: none; } }
|
|
256
|
+
|
|
257
|
+
.text-primary { color: var(--signal-accent-ink); }
|
|
258
|
+
|
|
259
|
+
/* The marketing close repeats the hero's violet action and plum surface. */
|
|
260
|
+
.signal-marketing-close { background: var(--signal-ground); backdrop-filter: none; }
|
|
261
|
+
.signal-marketing-close::before { background: radial-gradient(ellipse at 20% 30%, #7c3aed29, transparent 65%); }
|
|
262
|
+
.signal-marketing-close .group { background: linear-gradient(115deg, #6d28d9, #7c3aed 48%, #8a49ed); color: #fff; border-radius: 4px; box-shadow: 0 5px 20px -9px #7c3aed66; }
|
|
263
|
+
@media(max-width:760px) { .signal-marketing-close { padding: 40px 24px; } }
|
package/src/tokens.css
CHANGED
|
@@ -51,6 +51,9 @@
|
|
|
51
51
|
--accent-foreground: oklch(0 0 0);
|
|
52
52
|
--destructive: oklch(0.63 0.19 23.03);
|
|
53
53
|
--destructive-foreground: oklch(1 0 0);
|
|
54
|
+
--success: #167252;
|
|
55
|
+
--warning: #805e00;
|
|
56
|
+
--info: #2563b4;
|
|
54
57
|
--border: oklch(0.92 0 0);
|
|
55
58
|
--input: oklch(0.94 0 0);
|
|
56
59
|
--ring: oklch(0 0 0);
|
|
@@ -111,6 +114,9 @@
|
|
|
111
114
|
--accent-foreground: oklch(1 0 0);
|
|
112
115
|
--destructive: oklch(0.69 0.2 23.91);
|
|
113
116
|
--destructive-foreground: oklch(0 0 0);
|
|
117
|
+
--success: #62cda1;
|
|
118
|
+
--warning: #e4ba65;
|
|
119
|
+
--info: #86b7f2;
|
|
114
120
|
--border: oklch(0.26 0 0);
|
|
115
121
|
--input: oklch(0.32 0 0);
|
|
116
122
|
--ring: oklch(0.72 0 0);
|
|
@@ -173,6 +179,9 @@
|
|
|
173
179
|
--color-accent-foreground: var(--accent-foreground);
|
|
174
180
|
--color-destructive: var(--destructive);
|
|
175
181
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
182
|
+
--color-success: var(--success);
|
|
183
|
+
--color-warning: var(--warning);
|
|
184
|
+
--color-info: var(--info);
|
|
176
185
|
--color-border: var(--border);
|
|
177
186
|
--color-input: var(--input);
|
|
178
187
|
--color-ring: var(--ring);
|