@openvoxproject/voxblocks 0.9.0 → 0.10.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/README.md +17 -9
- package/dist/cdn/voxblocks.css +1 -1
- package/dist/cdn/voxblocks.js +1784 -1180
- package/dist/types/components/alert/vox-alert.d.ts +2 -1
- package/dist/types/components/callout/vox-callout.d.ts +2 -1
- package/dist/types/components/header/vox-header.d.ts +9 -1
- package/dist/types/components/icon/icon-paths.d.ts +30 -0
- package/dist/types/components/icon/vox-icon.d.ts +22 -0
- package/dist/types/components/link-hub/vox-link-hub.d.ts +3 -0
- package/dist/types/components/sidenav/vox-sidenav.d.ts +16 -0
- package/dist/types/components/toc/vox-toc.d.ts +43 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/voxblocks.css +1 -1
- package/dist/voxblocks.js +1436 -832
- package/package.json +9 -6
- package/src/components/alert/vox-alert.ts +41 -1
- package/src/components/callout/vox-callout.ts +53 -3
- package/src/components/card/vox-card.ts +5 -0
- package/src/components/header/vox-header.ts +132 -7
- package/src/components/icon/icon-paths.ts +287 -0
- package/src/components/icon/vox-icon.ts +78 -0
- package/src/components/link-hub/vox-link-hub.ts +21 -0
- package/src/components/sidenav/vox-sidenav.ts +148 -3
- package/src/components/toc/vox-toc.ts +140 -0
- package/src/index.ts +6 -0
- package/src/styles/utilities.css +158 -0
- package/src/tokens/palette.css +95 -0
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* An in-page table of contents / heading outline, in the style of the
|
|
6
|
+
* OpenVox docs "On this page" panel. Nest `<vox-toc-item>` for
|
|
7
|
+
* sub-headings via the `children` slot.
|
|
8
|
+
*
|
|
9
|
+
* ```html
|
|
10
|
+
* <vox-toc heading="On this page">
|
|
11
|
+
* <vox-toc-item href="#palette" current>Palette</vox-toc-item>
|
|
12
|
+
* <vox-toc-item href="#pairing-hues">
|
|
13
|
+
* Pairing hues
|
|
14
|
+
* <vox-toc-item slot="children" href="#soft-badge">Soft badge</vox-toc-item>
|
|
15
|
+
* </vox-toc-item>
|
|
16
|
+
* </vox-toc>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @slot - `<vox-toc-item>` elements.
|
|
20
|
+
*/
|
|
21
|
+
@customElement('vox-toc')
|
|
22
|
+
export class VoxToc extends LitElement {
|
|
23
|
+
@property() heading = 'On this page';
|
|
24
|
+
|
|
25
|
+
static styles = css`
|
|
26
|
+
:host {
|
|
27
|
+
display: block;
|
|
28
|
+
font-family: var(--vox-font-family-base);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.heading {
|
|
32
|
+
margin: 0 0 var(--vox-space-2);
|
|
33
|
+
padding-left: var(--vox-space-3);
|
|
34
|
+
font-size: 13px;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
color: var(--vox-color-text-1);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
nav {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
gap: 1px;
|
|
43
|
+
border-left: 1px solid var(--vox-color-divider);
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
46
|
+
|
|
47
|
+
render() {
|
|
48
|
+
return html`
|
|
49
|
+
<div class="heading" id="vox-toc-heading">${this.heading}</div>
|
|
50
|
+
<nav aria-labelledby="vox-toc-heading">
|
|
51
|
+
<slot></slot>
|
|
52
|
+
</nav>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* One heading link in a vox-toc. Set `current` on the active section.
|
|
59
|
+
*
|
|
60
|
+
* @slot - Link text.
|
|
61
|
+
* @slot children - Nested `<vox-toc-item>` elements for sub-headings.
|
|
62
|
+
*/
|
|
63
|
+
@customElement('vox-toc-item')
|
|
64
|
+
export class VoxTocItem extends LitElement {
|
|
65
|
+
@property() href = '#';
|
|
66
|
+
@property({ type: Boolean, reflect: true }) current = false;
|
|
67
|
+
|
|
68
|
+
static styles = css`
|
|
69
|
+
:host {
|
|
70
|
+
display: block;
|
|
71
|
+
font-family: var(--vox-font-family-base);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
a {
|
|
75
|
+
display: block;
|
|
76
|
+
margin-left: -1px;
|
|
77
|
+
padding: var(--vox-space-1) var(--vox-space-3);
|
|
78
|
+
border-left: 2px solid transparent;
|
|
79
|
+
color: var(--vox-color-text-2);
|
|
80
|
+
font-size: 13px;
|
|
81
|
+
line-height: 1.5;
|
|
82
|
+
text-decoration: none;
|
|
83
|
+
transition:
|
|
84
|
+
color var(--vox-transition-fast),
|
|
85
|
+
border-color var(--vox-transition-fast);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
a:hover {
|
|
89
|
+
color: var(--vox-color-text-1);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
a:focus-visible {
|
|
93
|
+
outline: 2px solid var(--vox-color-brand-1);
|
|
94
|
+
outline-offset: -2px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([current]) a {
|
|
98
|
+
border-left-color: var(--vox-color-brand-1);
|
|
99
|
+
color: var(--vox-color-brand-1);
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.children {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
gap: 1px;
|
|
107
|
+
padding-left: var(--vox-space-3);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.children:not(.has-children) {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
`;
|
|
114
|
+
|
|
115
|
+
private hasChildren = false;
|
|
116
|
+
|
|
117
|
+
private handleChildrenSlotChange(event: Event) {
|
|
118
|
+
const slot = event.target as HTMLSlotElement;
|
|
119
|
+
this.hasChildren = slot.assignedNodes({ flatten: true }).length > 0;
|
|
120
|
+
this.requestUpdate();
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
render() {
|
|
124
|
+
return html`
|
|
125
|
+
<a href=${this.href} aria-current=${this.current ? 'true' : 'false'}>
|
|
126
|
+
<slot></slot>
|
|
127
|
+
</a>
|
|
128
|
+
<div class="children ${this.hasChildren ? 'has-children' : ''}">
|
|
129
|
+
<slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
|
|
130
|
+
</div>
|
|
131
|
+
`;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
declare global {
|
|
136
|
+
interface HTMLElementTagNameMap {
|
|
137
|
+
'vox-toc': VoxToc;
|
|
138
|
+
'vox-toc-item': VoxTocItem;
|
|
139
|
+
}
|
|
140
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import './tokens/tokens.css';
|
|
2
|
+
import './tokens/palette.css';
|
|
2
3
|
import './styles/utilities.css';
|
|
3
4
|
|
|
4
5
|
// Actions
|
|
@@ -6,6 +7,9 @@ export { VoxButton } from './components/button/vox-button.js';
|
|
|
6
7
|
export { VoxCta } from './components/cta/vox-cta.js';
|
|
7
8
|
export { VoxThemeToggle } from './components/theme-toggle/vox-theme-toggle.js';
|
|
8
9
|
|
|
10
|
+
// Icon
|
|
11
|
+
export { VoxIcon } from './components/icon/vox-icon.js';
|
|
12
|
+
|
|
9
13
|
// Forms
|
|
10
14
|
export { VoxCheckbox } from './components/checkbox/vox-checkbox.js';
|
|
11
15
|
export { VoxFileInput } from './components/file-input/vox-file-input.js';
|
|
@@ -28,6 +32,7 @@ export { VoxSeriesNav } from './components/series-nav/vox-series-nav.js';
|
|
|
28
32
|
export { VoxSidenav, VoxSidenavGroup, VoxSidenavItem } from './components/sidenav/vox-sidenav.js';
|
|
29
33
|
export { VoxSubnav } from './components/subnav/vox-subnav.js';
|
|
30
34
|
export { VoxTabs, VoxTab, VoxTabPanel } from './components/tabs/vox-tabs.js';
|
|
35
|
+
export { VoxToc, VoxTocItem } from './components/toc/vox-toc.js';
|
|
31
36
|
|
|
32
37
|
// Overlays
|
|
33
38
|
export { VoxDialog } from './components/dialog/vox-dialog.js';
|
|
@@ -56,6 +61,7 @@ export { VoxStepIndicator, VoxStep } from './components/step-indicator/vox-step-
|
|
|
56
61
|
export { VoxTimeline, VoxTimelineItem } from './components/timeline/vox-timeline.js';
|
|
57
62
|
|
|
58
63
|
// Types
|
|
64
|
+
export type { IconName, IconSize } from './components/icon/vox-icon.js';
|
|
59
65
|
export type { ButtonVariant, ButtonSize } from './components/button/vox-button.js';
|
|
60
66
|
export type { CalloutVariant } from './components/callout/vox-callout.js';
|
|
61
67
|
export type { BadgeVariant } from './components/badge/vox-badge.js';
|
package/src/styles/utilities.css
CHANGED
|
@@ -124,6 +124,19 @@
|
|
|
124
124
|
color: var(--vox-color-brand-2);
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
/* Container ------------------------------------------------------------ */
|
|
128
|
+
|
|
129
|
+
/* Centers content at the same 1280px measure and horizontal padding that
|
|
130
|
+
vox-header and vox-footer already use internally, so page sections built
|
|
131
|
+
from other components (vox-hero, vox-grid, etc.) line up with them
|
|
132
|
+
instead of running edge-to-edge. */
|
|
133
|
+
.vox-container {
|
|
134
|
+
max-width: 1280px;
|
|
135
|
+
margin: 0 auto;
|
|
136
|
+
padding-left: var(--vox-space-6);
|
|
137
|
+
padding-right: var(--vox-space-6);
|
|
138
|
+
}
|
|
139
|
+
|
|
127
140
|
/* Spacing: margin ---------------------------------------------------- */
|
|
128
141
|
|
|
129
142
|
.vox-m-all-none { margin: 0 !important; }
|
|
@@ -289,6 +302,151 @@
|
|
|
289
302
|
.vox-bg-warning-soft { background-color: var(--vox-color-warning-soft) !important; }
|
|
290
303
|
.vox-bg-danger-soft { background-color: var(--vox-color-danger-soft) !important; }
|
|
291
304
|
|
|
305
|
+
/* Color: extended palette --------------------------------------------
|
|
306
|
+
Fixed swatches (see src/tokens/palette.css), not theme-adaptive.
|
|
307
|
+
Pair a light step's text with the same hue's 900 step, or use a
|
|
308
|
+
600+ step as a solid fill with white text (vox-color-text-inverse). */
|
|
309
|
+
|
|
310
|
+
/* gray */
|
|
311
|
+
.vox-color-gray-100 { color: var(--vox-palette-gray-100) !important; }
|
|
312
|
+
.vox-color-gray-200 { color: var(--vox-palette-gray-200) !important; }
|
|
313
|
+
.vox-color-gray-300 { color: var(--vox-palette-gray-300) !important; }
|
|
314
|
+
.vox-color-gray-400 { color: var(--vox-palette-gray-400) !important; }
|
|
315
|
+
.vox-color-gray-500 { color: var(--vox-palette-gray-500) !important; }
|
|
316
|
+
.vox-color-gray-600 { color: var(--vox-palette-gray-600) !important; }
|
|
317
|
+
.vox-color-gray-700 { color: var(--vox-palette-gray-700) !important; }
|
|
318
|
+
.vox-color-gray-800 { color: var(--vox-palette-gray-800) !important; }
|
|
319
|
+
.vox-color-gray-900 { color: var(--vox-palette-gray-900) !important; }
|
|
320
|
+
.vox-bg-gray-100 { background-color: var(--vox-palette-gray-100) !important; }
|
|
321
|
+
.vox-bg-gray-200 { background-color: var(--vox-palette-gray-200) !important; }
|
|
322
|
+
.vox-bg-gray-300 { background-color: var(--vox-palette-gray-300) !important; }
|
|
323
|
+
.vox-bg-gray-400 { background-color: var(--vox-palette-gray-400) !important; }
|
|
324
|
+
.vox-bg-gray-500 { background-color: var(--vox-palette-gray-500) !important; }
|
|
325
|
+
.vox-bg-gray-600 { background-color: var(--vox-palette-gray-600) !important; }
|
|
326
|
+
.vox-bg-gray-700 { background-color: var(--vox-palette-gray-700) !important; }
|
|
327
|
+
.vox-bg-gray-800 { background-color: var(--vox-palette-gray-800) !important; }
|
|
328
|
+
.vox-bg-gray-900 { background-color: var(--vox-palette-gray-900) !important; }
|
|
329
|
+
|
|
330
|
+
/* teal */
|
|
331
|
+
.vox-color-teal-100 { color: var(--vox-palette-teal-100) !important; }
|
|
332
|
+
.vox-color-teal-200 { color: var(--vox-palette-teal-200) !important; }
|
|
333
|
+
.vox-color-teal-300 { color: var(--vox-palette-teal-300) !important; }
|
|
334
|
+
.vox-color-teal-400 { color: var(--vox-palette-teal-400) !important; }
|
|
335
|
+
.vox-color-teal-500 { color: var(--vox-palette-teal-500) !important; }
|
|
336
|
+
.vox-color-teal-600 { color: var(--vox-palette-teal-600) !important; }
|
|
337
|
+
.vox-color-teal-700 { color: var(--vox-palette-teal-700) !important; }
|
|
338
|
+
.vox-color-teal-800 { color: var(--vox-palette-teal-800) !important; }
|
|
339
|
+
.vox-color-teal-900 { color: var(--vox-palette-teal-900) !important; }
|
|
340
|
+
.vox-bg-teal-100 { background-color: var(--vox-palette-teal-100) !important; }
|
|
341
|
+
.vox-bg-teal-200 { background-color: var(--vox-palette-teal-200) !important; }
|
|
342
|
+
.vox-bg-teal-300 { background-color: var(--vox-palette-teal-300) !important; }
|
|
343
|
+
.vox-bg-teal-400 { background-color: var(--vox-palette-teal-400) !important; }
|
|
344
|
+
.vox-bg-teal-500 { background-color: var(--vox-palette-teal-500) !important; }
|
|
345
|
+
.vox-bg-teal-600 { background-color: var(--vox-palette-teal-600) !important; }
|
|
346
|
+
.vox-bg-teal-700 { background-color: var(--vox-palette-teal-700) !important; }
|
|
347
|
+
.vox-bg-teal-800 { background-color: var(--vox-palette-teal-800) !important; }
|
|
348
|
+
.vox-bg-teal-900 { background-color: var(--vox-palette-teal-900) !important; }
|
|
349
|
+
|
|
350
|
+
/* blue */
|
|
351
|
+
.vox-color-blue-100 { color: var(--vox-palette-blue-100) !important; }
|
|
352
|
+
.vox-color-blue-200 { color: var(--vox-palette-blue-200) !important; }
|
|
353
|
+
.vox-color-blue-300 { color: var(--vox-palette-blue-300) !important; }
|
|
354
|
+
.vox-color-blue-400 { color: var(--vox-palette-blue-400) !important; }
|
|
355
|
+
.vox-color-blue-500 { color: var(--vox-palette-blue-500) !important; }
|
|
356
|
+
.vox-color-blue-600 { color: var(--vox-palette-blue-600) !important; }
|
|
357
|
+
.vox-color-blue-700 { color: var(--vox-palette-blue-700) !important; }
|
|
358
|
+
.vox-color-blue-800 { color: var(--vox-palette-blue-800) !important; }
|
|
359
|
+
.vox-color-blue-900 { color: var(--vox-palette-blue-900) !important; }
|
|
360
|
+
.vox-bg-blue-100 { background-color: var(--vox-palette-blue-100) !important; }
|
|
361
|
+
.vox-bg-blue-200 { background-color: var(--vox-palette-blue-200) !important; }
|
|
362
|
+
.vox-bg-blue-300 { background-color: var(--vox-palette-blue-300) !important; }
|
|
363
|
+
.vox-bg-blue-400 { background-color: var(--vox-palette-blue-400) !important; }
|
|
364
|
+
.vox-bg-blue-500 { background-color: var(--vox-palette-blue-500) !important; }
|
|
365
|
+
.vox-bg-blue-600 { background-color: var(--vox-palette-blue-600) !important; }
|
|
366
|
+
.vox-bg-blue-700 { background-color: var(--vox-palette-blue-700) !important; }
|
|
367
|
+
.vox-bg-blue-800 { background-color: var(--vox-palette-blue-800) !important; }
|
|
368
|
+
.vox-bg-blue-900 { background-color: var(--vox-palette-blue-900) !important; }
|
|
369
|
+
|
|
370
|
+
/* green */
|
|
371
|
+
.vox-color-green-100 { color: var(--vox-palette-green-100) !important; }
|
|
372
|
+
.vox-color-green-200 { color: var(--vox-palette-green-200) !important; }
|
|
373
|
+
.vox-color-green-300 { color: var(--vox-palette-green-300) !important; }
|
|
374
|
+
.vox-color-green-400 { color: var(--vox-palette-green-400) !important; }
|
|
375
|
+
.vox-color-green-500 { color: var(--vox-palette-green-500) !important; }
|
|
376
|
+
.vox-color-green-600 { color: var(--vox-palette-green-600) !important; }
|
|
377
|
+
.vox-color-green-700 { color: var(--vox-palette-green-700) !important; }
|
|
378
|
+
.vox-color-green-800 { color: var(--vox-palette-green-800) !important; }
|
|
379
|
+
.vox-color-green-900 { color: var(--vox-palette-green-900) !important; }
|
|
380
|
+
.vox-bg-green-100 { background-color: var(--vox-palette-green-100) !important; }
|
|
381
|
+
.vox-bg-green-200 { background-color: var(--vox-palette-green-200) !important; }
|
|
382
|
+
.vox-bg-green-300 { background-color: var(--vox-palette-green-300) !important; }
|
|
383
|
+
.vox-bg-green-400 { background-color: var(--vox-palette-green-400) !important; }
|
|
384
|
+
.vox-bg-green-500 { background-color: var(--vox-palette-green-500) !important; }
|
|
385
|
+
.vox-bg-green-600 { background-color: var(--vox-palette-green-600) !important; }
|
|
386
|
+
.vox-bg-green-700 { background-color: var(--vox-palette-green-700) !important; }
|
|
387
|
+
.vox-bg-green-800 { background-color: var(--vox-palette-green-800) !important; }
|
|
388
|
+
.vox-bg-green-900 { background-color: var(--vox-palette-green-900) !important; }
|
|
389
|
+
|
|
390
|
+
/* gold */
|
|
391
|
+
.vox-color-gold-100 { color: var(--vox-palette-gold-100) !important; }
|
|
392
|
+
.vox-color-gold-200 { color: var(--vox-palette-gold-200) !important; }
|
|
393
|
+
.vox-color-gold-300 { color: var(--vox-palette-gold-300) !important; }
|
|
394
|
+
.vox-color-gold-400 { color: var(--vox-palette-gold-400) !important; }
|
|
395
|
+
.vox-color-gold-500 { color: var(--vox-palette-gold-500) !important; }
|
|
396
|
+
.vox-color-gold-600 { color: var(--vox-palette-gold-600) !important; }
|
|
397
|
+
.vox-color-gold-700 { color: var(--vox-palette-gold-700) !important; }
|
|
398
|
+
.vox-color-gold-800 { color: var(--vox-palette-gold-800) !important; }
|
|
399
|
+
.vox-color-gold-900 { color: var(--vox-palette-gold-900) !important; }
|
|
400
|
+
.vox-bg-gold-100 { background-color: var(--vox-palette-gold-100) !important; }
|
|
401
|
+
.vox-bg-gold-200 { background-color: var(--vox-palette-gold-200) !important; }
|
|
402
|
+
.vox-bg-gold-300 { background-color: var(--vox-palette-gold-300) !important; }
|
|
403
|
+
.vox-bg-gold-400 { background-color: var(--vox-palette-gold-400) !important; }
|
|
404
|
+
.vox-bg-gold-500 { background-color: var(--vox-palette-gold-500) !important; }
|
|
405
|
+
.vox-bg-gold-600 { background-color: var(--vox-palette-gold-600) !important; }
|
|
406
|
+
.vox-bg-gold-700 { background-color: var(--vox-palette-gold-700) !important; }
|
|
407
|
+
.vox-bg-gold-800 { background-color: var(--vox-palette-gold-800) !important; }
|
|
408
|
+
.vox-bg-gold-900 { background-color: var(--vox-palette-gold-900) !important; }
|
|
409
|
+
|
|
410
|
+
/* red */
|
|
411
|
+
.vox-color-red-100 { color: var(--vox-palette-red-100) !important; }
|
|
412
|
+
.vox-color-red-200 { color: var(--vox-palette-red-200) !important; }
|
|
413
|
+
.vox-color-red-300 { color: var(--vox-palette-red-300) !important; }
|
|
414
|
+
.vox-color-red-400 { color: var(--vox-palette-red-400) !important; }
|
|
415
|
+
.vox-color-red-500 { color: var(--vox-palette-red-500) !important; }
|
|
416
|
+
.vox-color-red-600 { color: var(--vox-palette-red-600) !important; }
|
|
417
|
+
.vox-color-red-700 { color: var(--vox-palette-red-700) !important; }
|
|
418
|
+
.vox-color-red-800 { color: var(--vox-palette-red-800) !important; }
|
|
419
|
+
.vox-color-red-900 { color: var(--vox-palette-red-900) !important; }
|
|
420
|
+
.vox-bg-red-100 { background-color: var(--vox-palette-red-100) !important; }
|
|
421
|
+
.vox-bg-red-200 { background-color: var(--vox-palette-red-200) !important; }
|
|
422
|
+
.vox-bg-red-300 { background-color: var(--vox-palette-red-300) !important; }
|
|
423
|
+
.vox-bg-red-400 { background-color: var(--vox-palette-red-400) !important; }
|
|
424
|
+
.vox-bg-red-500 { background-color: var(--vox-palette-red-500) !important; }
|
|
425
|
+
.vox-bg-red-600 { background-color: var(--vox-palette-red-600) !important; }
|
|
426
|
+
.vox-bg-red-700 { background-color: var(--vox-palette-red-700) !important; }
|
|
427
|
+
.vox-bg-red-800 { background-color: var(--vox-palette-red-800) !important; }
|
|
428
|
+
.vox-bg-red-900 { background-color: var(--vox-palette-red-900) !important; }
|
|
429
|
+
|
|
430
|
+
/* purple */
|
|
431
|
+
.vox-color-purple-100 { color: var(--vox-palette-purple-100) !important; }
|
|
432
|
+
.vox-color-purple-200 { color: var(--vox-palette-purple-200) !important; }
|
|
433
|
+
.vox-color-purple-300 { color: var(--vox-palette-purple-300) !important; }
|
|
434
|
+
.vox-color-purple-400 { color: var(--vox-palette-purple-400) !important; }
|
|
435
|
+
.vox-color-purple-500 { color: var(--vox-palette-purple-500) !important; }
|
|
436
|
+
.vox-color-purple-600 { color: var(--vox-palette-purple-600) !important; }
|
|
437
|
+
.vox-color-purple-700 { color: var(--vox-palette-purple-700) !important; }
|
|
438
|
+
.vox-color-purple-800 { color: var(--vox-palette-purple-800) !important; }
|
|
439
|
+
.vox-color-purple-900 { color: var(--vox-palette-purple-900) !important; }
|
|
440
|
+
.vox-bg-purple-100 { background-color: var(--vox-palette-purple-100) !important; }
|
|
441
|
+
.vox-bg-purple-200 { background-color: var(--vox-palette-purple-200) !important; }
|
|
442
|
+
.vox-bg-purple-300 { background-color: var(--vox-palette-purple-300) !important; }
|
|
443
|
+
.vox-bg-purple-400 { background-color: var(--vox-palette-purple-400) !important; }
|
|
444
|
+
.vox-bg-purple-500 { background-color: var(--vox-palette-purple-500) !important; }
|
|
445
|
+
.vox-bg-purple-600 { background-color: var(--vox-palette-purple-600) !important; }
|
|
446
|
+
.vox-bg-purple-700 { background-color: var(--vox-palette-purple-700) !important; }
|
|
447
|
+
.vox-bg-purple-800 { background-color: var(--vox-palette-purple-800) !important; }
|
|
448
|
+
.vox-bg-purple-900 { background-color: var(--vox-palette-purple-900) !important; }
|
|
449
|
+
|
|
292
450
|
/* Border ------------------------------------------------------------- */
|
|
293
451
|
|
|
294
452
|
.vox-border-all { border: 1px solid var(--vox-color-divider) !important; }
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* VoxBlocks extended color palette.
|
|
3
|
+
*
|
|
4
|
+
* Seven hues (gray, teal, blue, green, gold, red, purple), each a fixed
|
|
5
|
+
* 100-900 tint/shade scale. Unlike the semantic --vox-color-* tokens in
|
|
6
|
+
* tokens.css, these are raw swatches: constant across light and dark mode,
|
|
7
|
+
* the same way a can of paint doesn't change color when the lights dim.
|
|
8
|
+
* Reach for these when a component needs a specific hue rather than a
|
|
9
|
+
* themed role — data viz series, tags/badges, status chips.
|
|
10
|
+
*
|
|
11
|
+
* Every step passes WCAG AA (>=4.5:1) as text against its own scale's
|
|
12
|
+
* 100 step when paired at least 800 steps apart — e.g. teal-900 text on a
|
|
13
|
+
* teal-100 background — see docs/guide/colors.md for the full pairing
|
|
14
|
+
* guidance. Steps 600-900 are dark enough to pair with white text
|
|
15
|
+
* (--vox-color-text-inverse) as a solid fill.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
:root {
|
|
19
|
+
/* gray */
|
|
20
|
+
--vox-palette-gray-100: #f1f3f4;
|
|
21
|
+
--vox-palette-gray-200: #dde1e3;
|
|
22
|
+
--vox-palette-gray-300: #c1c9cd;
|
|
23
|
+
--vox-palette-gray-400: #a0abb1;
|
|
24
|
+
--vox-palette-gray-500: #7e8e95;
|
|
25
|
+
--vox-palette-gray-600: #67777e;
|
|
26
|
+
--vox-palette-gray-700: #535f65;
|
|
27
|
+
--vox-palette-gray-800: #404a4f;
|
|
28
|
+
--vox-palette-gray-900: #2c3235;
|
|
29
|
+
|
|
30
|
+
/* teal */
|
|
31
|
+
--vox-palette-teal-100: #eafaf9;
|
|
32
|
+
--vox-palette-teal-200: #cdf3f1;
|
|
33
|
+
--vox-palette-teal-300: #a4eae5;
|
|
34
|
+
--vox-palette-teal-400: #73ded7;
|
|
35
|
+
--vox-palette-teal-500: #41d2c9;
|
|
36
|
+
--vox-palette-teal-600: #2cbab0;
|
|
37
|
+
--vox-palette-teal-700: #23958d;
|
|
38
|
+
--vox-palette-teal-800: #1b746e;
|
|
39
|
+
--vox-palette-teal-900: #124e4a;
|
|
40
|
+
|
|
41
|
+
/* blue */
|
|
42
|
+
--vox-palette-blue-100: #e9f2fb;
|
|
43
|
+
--vox-palette-blue-200: #cadff6;
|
|
44
|
+
--vox-palette-blue-300: #9fc4ef;
|
|
45
|
+
--vox-palette-blue-400: #6aa4e7;
|
|
46
|
+
--vox-palette-blue-500: #3584de;
|
|
47
|
+
--vox-palette-blue-600: #206dc5;
|
|
48
|
+
--vox-palette-blue-700: #1a579e;
|
|
49
|
+
--vox-palette-blue-800: #14447b;
|
|
50
|
+
--vox-palette-blue-900: #0e2e53;
|
|
51
|
+
|
|
52
|
+
/* green */
|
|
53
|
+
--vox-palette-green-100: #ecf9f1;
|
|
54
|
+
--vox-palette-green-200: #d1f0dc;
|
|
55
|
+
--vox-palette-green-300: #abe3bf;
|
|
56
|
+
--vox-palette-green-400: #7dd49d;
|
|
57
|
+
--vox-palette-green-500: #4fc47a;
|
|
58
|
+
--vox-palette-green-600: #39ac63;
|
|
59
|
+
--vox-palette-green-700: #2e8a50;
|
|
60
|
+
--vox-palette-green-800: #246b3e;
|
|
61
|
+
--vox-palette-green-900: #18492a;
|
|
62
|
+
|
|
63
|
+
/* gold */
|
|
64
|
+
--vox-palette-gold-100: #fdf6e8;
|
|
65
|
+
--vox-palette-gold-200: #f9e9c7;
|
|
66
|
+
--vox-palette-gold-300: #f5d699;
|
|
67
|
+
--vox-palette-gold-400: #efc061;
|
|
68
|
+
--vox-palette-gold-500: #eaaa2a;
|
|
69
|
+
--vox-palette-gold-600: #d19215;
|
|
70
|
+
--vox-palette-gold-700: #a77511;
|
|
71
|
+
--vox-palette-gold-800: #825b0d;
|
|
72
|
+
--vox-palette-gold-900: #583e09;
|
|
73
|
+
|
|
74
|
+
/* red */
|
|
75
|
+
--vox-palette-red-100: #fbeaeb;
|
|
76
|
+
--vox-palette-red-200: #f5cccf;
|
|
77
|
+
--vox-palette-red-300: #eda1a7;
|
|
78
|
+
--vox-palette-red-400: #e36d77;
|
|
79
|
+
--vox-palette-red-500: #d93a47;
|
|
80
|
+
--vox-palette-red-600: #c12532;
|
|
81
|
+
--vox-palette-red-700: #9a1d28;
|
|
82
|
+
--vox-palette-red-800: #78171f;
|
|
83
|
+
--vox-palette-red-900: #511015;
|
|
84
|
+
|
|
85
|
+
/* purple */
|
|
86
|
+
--vox-palette-purple-100: #f1ecf9;
|
|
87
|
+
--vox-palette-purple-200: #ded1f0;
|
|
88
|
+
--vox-palette-purple-300: #c2abe3;
|
|
89
|
+
--vox-palette-purple-400: #a17dd4;
|
|
90
|
+
--vox-palette-purple-500: #804fc4;
|
|
91
|
+
--vox-palette-purple-600: #6939ac;
|
|
92
|
+
--vox-palette-purple-700: #542e8a;
|
|
93
|
+
--vox-palette-purple-800: #41246b;
|
|
94
|
+
--vox-palette-purple-900: #2c1849;
|
|
95
|
+
}
|