@stainless-api/ui-primitives 0.1.0-beta.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/.env +1 -0
- package/CHANGELOG.md +7 -0
- package/eslint.config.js +2 -0
- package/package.json +37 -0
- package/src/components/Button.tsx +94 -0
- package/src/components/Callout.tsx +31 -0
- package/src/components/DetailsGroup.tsx +17 -0
- package/src/components/DropdownButton.tsx +98 -0
- package/src/components/button.css +157 -0
- package/src/components/callout.css +72 -0
- package/src/components/details.css +126 -0
- package/src/components/dropdown-button.css +162 -0
- package/src/index.ts +4 -0
- package/src/scripts/dropdown-button.ts +55 -0
- package/src/scripts/index.ts +1 -0
- package/src/styles/layout.css +11 -0
- package/src/styles/scales.css +129 -0
- package/src/styles/starlight-compat.css +125 -0
- package/src/styles/swatches.css +87 -0
- package/src/styles/theme.css +49 -0
- package/src/styles/typography.css +199 -0
- package/src/styles.css +11 -0
- package/tsconfig.json +15 -0
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
.stl-ui-dropdown-button {
|
|
3
|
+
--stl-ui-dropdown-button-color: var(--stl-ui-foreground);
|
|
4
|
+
--stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
|
|
5
|
+
--stl-ui-dropdown-button-border-color: var(--stl-ui-border);
|
|
6
|
+
--stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
|
|
7
|
+
--stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
|
|
8
|
+
|
|
9
|
+
--stl-ui-dropdown-button-height: 32px;
|
|
10
|
+
--stl-ui-dropdown-button-padding: 8px 10px;
|
|
11
|
+
--stl-ui-dropdown-button-line-height: 100%;
|
|
12
|
+
--stl-ui-dropdown-button-font-weight: 500;
|
|
13
|
+
|
|
14
|
+
position: relative;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
|
|
18
|
+
background-color: var(--stl-ui-dropdown-button-background-color);
|
|
19
|
+
border: 1px solid var(--stl-ui-dropdown-button-border-color);
|
|
20
|
+
border-radius: var(--stl-ui-dropdown-button-border-radius);
|
|
21
|
+
color: var(--stl-ui-dropdown-button-color);
|
|
22
|
+
gap: 0;
|
|
23
|
+
font-size: var(--stl-ui-dropdown-button-font-size);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.stl-ui-dropdown-button__button {
|
|
27
|
+
border: none;
|
|
28
|
+
background: none;
|
|
29
|
+
height: var(--stl-ui-dropdown-button-height);
|
|
30
|
+
padding: var(--stl-ui-dropdown-button-padding);
|
|
31
|
+
line-height: var(--stl-ui-dropdown-button-line-height);
|
|
32
|
+
font-weight: var(--stl-ui-dropdown-button-font-weight);
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
|
|
38
|
+
&:hover {
|
|
39
|
+
background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
|
|
40
|
+
border-color: var(--stl-ui-border-emphasis);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.stl-ui-dropdown-button--action {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: 8px;
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
|
|
51
|
+
border-color: var(--stl-ui-border-emphasis);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&.disabled {
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.stl-ui-dropdown-button__trigger {
|
|
61
|
+
border-left: 1px solid var(--stl-ui-border);
|
|
62
|
+
border-radius: 0;
|
|
63
|
+
|
|
64
|
+
&:hover {
|
|
65
|
+
background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
|
|
66
|
+
border-color: var(--stl-ui-border-emphasis);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.stl-ui-dropdown-button__menu {
|
|
71
|
+
--stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
|
|
72
|
+
--stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
|
|
73
|
+
--stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
|
|
74
|
+
--stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
|
|
75
|
+
|
|
76
|
+
background-color: var(--stl-ui-dropdown-button__menu-background-color);
|
|
77
|
+
border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
|
|
78
|
+
box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
|
|
79
|
+
border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
|
|
80
|
+
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 100%;
|
|
83
|
+
right: 0;
|
|
84
|
+
margin-top: 4px;
|
|
85
|
+
z-index: 1000;
|
|
86
|
+
min-width: 100%;
|
|
87
|
+
padding: 4px;
|
|
88
|
+
display: none;
|
|
89
|
+
|
|
90
|
+
&[data-state='open'] {
|
|
91
|
+
display: block;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.stl-ui-dropdown-button__menu-item {
|
|
96
|
+
/* border-radius, height, and lineheight */
|
|
97
|
+
--stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
|
|
98
|
+
--stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
|
|
99
|
+
--stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
|
|
100
|
+
--stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
|
|
101
|
+
from var(--stl-ui-foreground) l c h / 0.05
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
|
|
105
|
+
height: var(--stl-ui-dropdown-button__menu-item-height);
|
|
106
|
+
line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
|
|
107
|
+
|
|
108
|
+
padding: 8px;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: space-between;
|
|
113
|
+
gap: 8px;
|
|
114
|
+
|
|
115
|
+
&:hover {
|
|
116
|
+
background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.stl-ui-dropdown-button__menu-item-content {
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
gap: 8px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.stl-ui-dropdown-button__menu-item-text {
|
|
126
|
+
white-space: nowrap;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.stl-ui-dropdown-button__menu-item-text-subtle {
|
|
130
|
+
--stl-ui-dropdown-button__menu-item-text-subtle-color: var(--stl-ui-foreground-muted);
|
|
131
|
+
color: var(--stl-ui-dropdown-button__menu-item-text-subtle-color);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.stl-ui-dropdown-button__menu-item-icon {
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.stl-ui-dropdown-button__menu-item-external-link-icon {
|
|
141
|
+
--stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
|
|
142
|
+
from var(--stl-ui-foreground) l c h / 0.25
|
|
143
|
+
);
|
|
144
|
+
margin-left: 8px;
|
|
145
|
+
svg {
|
|
146
|
+
color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.stl-ui-dropdown-button__divider {
|
|
152
|
+
--stl-ui-dropdown-button__divider-height: 1px;
|
|
153
|
+
--stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
|
|
154
|
+
|
|
155
|
+
height: var(--stl-ui-dropdown-button__divider-height);
|
|
156
|
+
background-color: var(--stl-ui-dropdown-button__divider-color);
|
|
157
|
+
|
|
158
|
+
margin: 4px 0;
|
|
159
|
+
width: calc(100% + 8px);
|
|
160
|
+
transform: translateX(-4px);
|
|
161
|
+
}
|
|
162
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
export function initDropdownButton({
|
|
2
|
+
dropdownId,
|
|
3
|
+
onSelect,
|
|
4
|
+
onPrimaryAction,
|
|
5
|
+
}: {
|
|
6
|
+
dropdownId: string;
|
|
7
|
+
onSelect: (value: string) => void;
|
|
8
|
+
onPrimaryAction: (primaryActionElement: Element) => void;
|
|
9
|
+
}) {
|
|
10
|
+
const dropdown = document.getElementById(dropdownId);
|
|
11
|
+
if (!dropdown) return;
|
|
12
|
+
|
|
13
|
+
const trigger = dropdown.querySelector('[data-part="trigger"]') as HTMLButtonElement | null;
|
|
14
|
+
const menu = dropdown.querySelector('[data-part="menu"]') as HTMLElement | null;
|
|
15
|
+
const primaryAction = dropdown.querySelector('[data-part="primary-action"]');
|
|
16
|
+
|
|
17
|
+
if (!trigger || !menu || !primaryAction) return;
|
|
18
|
+
|
|
19
|
+
let isOpen = false;
|
|
20
|
+
|
|
21
|
+
function toggleDropdown() {
|
|
22
|
+
if (!trigger || !menu) return;
|
|
23
|
+
isOpen = !isOpen;
|
|
24
|
+
menu.dataset.state = isOpen ? 'open' : 'closed';
|
|
25
|
+
trigger.setAttribute('aria-expanded', String(isOpen));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
trigger.addEventListener('click', toggleDropdown);
|
|
29
|
+
|
|
30
|
+
document.addEventListener('click', (event) => {
|
|
31
|
+
if (!isOpen) return;
|
|
32
|
+
if (!dropdown.contains(event.target as Node)) {
|
|
33
|
+
toggleDropdown();
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (primaryAction && primaryAction.contains(event.target as Node)) {
|
|
37
|
+
toggleDropdown();
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const items = dropdown.querySelectorAll('[data-part="item"]');
|
|
42
|
+
items.forEach((item) => {
|
|
43
|
+
item.addEventListener('click', () => {
|
|
44
|
+
const value = item.getAttribute('data-value');
|
|
45
|
+
if (value) {
|
|
46
|
+
onSelect(value);
|
|
47
|
+
}
|
|
48
|
+
toggleDropdown();
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
primaryAction.addEventListener('click', () => {
|
|
53
|
+
onPrimaryAction(primaryAction);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './dropdown-button';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
/* Layout - Stainless */
|
|
3
|
+
:root {
|
|
4
|
+
--stl-ui-layout-border-radius-xs: 4px;
|
|
5
|
+
--stl-ui-layout-border-radius-sml: 8px;
|
|
6
|
+
--stl-ui-layout-border-radius: 12px;
|
|
7
|
+
--stl-ui-layout-border-radius-med: 16px;
|
|
8
|
+
--stl-ui-layout-border-radius-max: 9999px;
|
|
9
|
+
--stl-ui-left-content-indent: 24px;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
/* Scales - Default */
|
|
3
|
+
:root {
|
|
4
|
+
--stl-ui-gray-50: rgba(250, 250, 250, 1);
|
|
5
|
+
--stl-ui-gray-100: rgba(245, 245, 245, 1);
|
|
6
|
+
--stl-ui-gray-200: rgba(229, 229, 229, 1);
|
|
7
|
+
--stl-ui-gray-300: rgba(212, 212, 212, 1);
|
|
8
|
+
--stl-ui-gray-400: rgba(163, 163, 163, 1);
|
|
9
|
+
--stl-ui-gray-500: rgba(115, 115, 115, 1);
|
|
10
|
+
--stl-ui-gray-600: rgba(82, 82, 82, 1);
|
|
11
|
+
--stl-ui-gray-700: rgba(64, 64, 64, 1);
|
|
12
|
+
--stl-ui-gray-800: rgba(38, 38, 38, 1);
|
|
13
|
+
--stl-ui-gray-900: rgba(23, 23, 23, 1);
|
|
14
|
+
--stl-ui-gray-950: rgba(10, 10, 10, 1);
|
|
15
|
+
--stl-ui-accent-50: #eff6ffff;
|
|
16
|
+
--stl-ui-accent-100: #dbeafeff;
|
|
17
|
+
--stl-ui-accent-200: #bedbffff;
|
|
18
|
+
--stl-ui-accent-300: #8ec5ffff;
|
|
19
|
+
--stl-ui-accent-400: #51a2ffff;
|
|
20
|
+
--stl-ui-accent-500: #2b7fffff;
|
|
21
|
+
--stl-ui-accent-600: #155dfcff;
|
|
22
|
+
--stl-ui-accent-700: #1447e6ff;
|
|
23
|
+
--stl-ui-accent-800: #193cb8ff;
|
|
24
|
+
--stl-ui-accent-900: #132762ff;
|
|
25
|
+
--stl-ui-accent-950: #0b1128ff;
|
|
26
|
+
--stl-ui-red-50: rgba(252, 243, 243, 1);
|
|
27
|
+
--stl-ui-red-100: rgba(249, 227, 227, 1);
|
|
28
|
+
--stl-ui-red-200: rgba(246, 203, 203, 1);
|
|
29
|
+
--stl-ui-red-300: rgba(242, 166, 165, 1);
|
|
30
|
+
--stl-ui-red-400: rgba(235, 109, 108, 1);
|
|
31
|
+
--stl-ui-red-500: rgba(227, 64, 65, 1);
|
|
32
|
+
--stl-ui-red-600: rgba(208, 30, 34, 1);
|
|
33
|
+
--stl-ui-red-700: rgba(174, 25, 26, 1);
|
|
34
|
+
--stl-ui-red-800: rgba(143, 28, 27, 1);
|
|
35
|
+
--stl-ui-red-900: rgba(85, 24, 22, 1);
|
|
36
|
+
--stl-ui-red-950: rgba(43, 9, 8, 1);
|
|
37
|
+
--stl-ui-blue-50: rgba(239, 246, 255, 1);
|
|
38
|
+
--stl-ui-blue-100: rgba(219, 234, 254, 1);
|
|
39
|
+
--stl-ui-blue-200: rgba(190, 219, 255, 1);
|
|
40
|
+
--stl-ui-blue-300: rgba(142, 197, 255, 1);
|
|
41
|
+
--stl-ui-blue-400: rgba(81, 162, 255, 1);
|
|
42
|
+
--stl-ui-blue-500: rgba(43, 127, 255, 1);
|
|
43
|
+
--stl-ui-blue-600: rgba(21, 93, 252, 1);
|
|
44
|
+
--stl-ui-blue-700: rgba(20, 71, 230, 1);
|
|
45
|
+
--stl-ui-blue-800: rgba(25, 60, 184, 1);
|
|
46
|
+
--stl-ui-blue-900: rgba(19, 39, 98, 1);
|
|
47
|
+
--stl-ui-blue-950: rgba(11, 17, 40, 1);
|
|
48
|
+
--stl-ui-green-50: rgba(240, 253, 244, 1);
|
|
49
|
+
--stl-ui-green-100: rgba(220, 252, 231, 1);
|
|
50
|
+
--stl-ui-green-200: rgba(187, 247, 208, 1);
|
|
51
|
+
--stl-ui-green-300: rgba(134, 239, 172, 1);
|
|
52
|
+
--stl-ui-green-400: rgba(74, 222, 128, 1);
|
|
53
|
+
--stl-ui-green-500: rgba(34, 197, 94, 1);
|
|
54
|
+
--stl-ui-green-600: rgba(22, 163, 74, 1);
|
|
55
|
+
--stl-ui-green-700: rgba(21, 128, 61, 1);
|
|
56
|
+
--stl-ui-green-800: rgba(22, 101, 52, 1);
|
|
57
|
+
--stl-ui-green-900: rgba(15, 62, 33, 1);
|
|
58
|
+
--stl-ui-green-950: rgba(4, 32, 15, 1);
|
|
59
|
+
--stl-ui-orange-50: rgba(255, 247, 237, 1);
|
|
60
|
+
--stl-ui-orange-100: rgba(255, 237, 213, 1);
|
|
61
|
+
--stl-ui-orange-200: rgba(254, 215, 170, 1);
|
|
62
|
+
--stl-ui-orange-300: rgba(253, 186, 116, 1);
|
|
63
|
+
--stl-ui-orange-400: rgba(251, 146, 60, 1);
|
|
64
|
+
--stl-ui-orange-500: rgba(249, 115, 22, 1);
|
|
65
|
+
--stl-ui-orange-600: rgba(234, 88, 12, 1);
|
|
66
|
+
--stl-ui-orange-700: rgba(194, 65, 12, 1);
|
|
67
|
+
--stl-ui-orange-800: rgba(154, 52, 18, 1);
|
|
68
|
+
--stl-ui-orange-900: rgba(89, 32, 13, 1);
|
|
69
|
+
--stl-ui-orange-950: rgba(46, 14, 5, 1);
|
|
70
|
+
--stl-ui-purple-50: rgba(250, 245, 255, 1);
|
|
71
|
+
--stl-ui-purple-100: rgba(243, 232, 255, 1);
|
|
72
|
+
--stl-ui-purple-200: rgba(233, 213, 255, 1);
|
|
73
|
+
--stl-ui-purple-300: rgba(216, 180, 254, 1);
|
|
74
|
+
--stl-ui-purple-400: rgba(192, 132, 252, 1);
|
|
75
|
+
--stl-ui-purple-500: rgba(168, 85, 247, 1);
|
|
76
|
+
--stl-ui-purple-600: rgba(147, 51, 234, 1);
|
|
77
|
+
--stl-ui-purple-700: rgba(126, 34, 206, 1);
|
|
78
|
+
--stl-ui-purple-800: rgba(107, 33, 168, 1);
|
|
79
|
+
--stl-ui-purple-900: rgba(72, 23, 110, 1);
|
|
80
|
+
--stl-ui-purple-950: rgba(39, 5, 67, 1);
|
|
81
|
+
--stl-ui-cyan-50: rgba(236, 254, 255, 1);
|
|
82
|
+
--stl-ui-cyan-100: rgba(207, 250, 254, 1);
|
|
83
|
+
--stl-ui-cyan-200: rgba(165, 243, 252, 1);
|
|
84
|
+
--stl-ui-cyan-300: rgba(103, 232, 249, 1);
|
|
85
|
+
--stl-ui-cyan-400: rgba(34, 211, 238, 1);
|
|
86
|
+
--stl-ui-cyan-500: rgba(6, 182, 212, 1);
|
|
87
|
+
--stl-ui-cyan-600: rgba(8, 145, 178, 1);
|
|
88
|
+
--stl-ui-cyan-700: rgba(14, 116, 144, 1);
|
|
89
|
+
--stl-ui-cyan-800: rgba(21, 94, 117, 1);
|
|
90
|
+
--stl-ui-cyan-900: rgba(18, 62, 79, 1);
|
|
91
|
+
--stl-ui-cyan-950: rgba(5, 34, 46, 1);
|
|
92
|
+
--stl-ui-pink-50: rgba(253, 242, 248, 1);
|
|
93
|
+
--stl-ui-pink-100: rgba(252, 231, 243, 1);
|
|
94
|
+
--stl-ui-pink-200: rgba(251, 207, 232, 1);
|
|
95
|
+
--stl-ui-pink-300: rgba(249, 168, 212, 1);
|
|
96
|
+
--stl-ui-pink-400: rgba(244, 114, 182, 1);
|
|
97
|
+
--stl-ui-pink-500: rgba(236, 72, 153, 1);
|
|
98
|
+
--stl-ui-pink-600: rgba(219, 39, 119, 1);
|
|
99
|
+
--stl-ui-pink-700: rgba(190, 24, 93, 1);
|
|
100
|
+
--stl-ui-pink-800: rgba(157, 23, 77, 1);
|
|
101
|
+
--stl-ui-pink-900: rgba(103, 19, 53, 1);
|
|
102
|
+
--stl-ui-pink-950: rgba(56, 5, 25, 1);
|
|
103
|
+
--stl-ui-yellow-50: rgba(254, 252, 232, 1);
|
|
104
|
+
--stl-ui-yellow-100: rgba(254, 249, 195, 1);
|
|
105
|
+
--stl-ui-yellow-200: rgba(254, 240, 138, 1);
|
|
106
|
+
--stl-ui-yellow-300: rgba(253, 224, 71, 1);
|
|
107
|
+
--stl-ui-yellow-400: rgba(250, 204, 21, 1);
|
|
108
|
+
--stl-ui-yellow-500: rgba(234, 179, 8, 1);
|
|
109
|
+
--stl-ui-yellow-600: rgba(202, 138, 4, 1);
|
|
110
|
+
--stl-ui-yellow-700: rgba(161, 98, 7, 1);
|
|
111
|
+
--stl-ui-yellow-800: rgba(133, 77, 14, 1);
|
|
112
|
+
--stl-ui-yellow-900: rgba(88, 49, 14, 1);
|
|
113
|
+
--stl-ui-yellow-950: rgba(47, 23, 4, 1);
|
|
114
|
+
|
|
115
|
+
/* TODO support accent generation */
|
|
116
|
+
/* --stl-ui-accent-base: rgb(21, 93, 252);
|
|
117
|
+
--stl-ui-accent-50: color-mix(in oklch, white 95%, var(--stl-ui-accent-base));
|
|
118
|
+
--stl-ui-accent-100: color-mix(in oklch, white 85%, var(--stl-ui-accent-base));
|
|
119
|
+
--stl-ui-accent-200: color-mix(in oklch, white 70%, var(--stl-ui-accent-base));
|
|
120
|
+
--stl-ui-accent-300: color-mix(in oklch, white 55%, var(--stl-ui-accent-base));
|
|
121
|
+
--stl-ui-accent-400: color-mix(in oklch, white 40%, var(--stl-ui-accent-base));
|
|
122
|
+
--stl-ui-accent-500: color-mix(in oklch, white 25%, var(--stl-ui-accent-base));
|
|
123
|
+
--stl-ui-accent-600: var(--stl-ui-accent-base);
|
|
124
|
+
--stl-ui-accent-700: color-mix(in oklch, black 15%, var(--stl-ui-accent-base));
|
|
125
|
+
--stl-ui-accent-800: color-mix(in oklch, black 30%, var(--stl-ui-accent-base));
|
|
126
|
+
--stl-ui-accent-900: color-mix(in oklch, black 45%, var(--stl-ui-accent-base));
|
|
127
|
+
--stl-ui-accent-950: color-mix(in oklch, black 60%, var(--stl-ui-accent-base)); */
|
|
128
|
+
}
|
|
129
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
:root {
|
|
3
|
+
--stl-ui-button-border-radius: 8px;
|
|
4
|
+
--stl-ui-text-body: 14px;
|
|
5
|
+
--stl-ui-font-family: 'Geist', system-ui, sans-serif;
|
|
6
|
+
--stl-ui-button-size: 2rem;
|
|
7
|
+
|
|
8
|
+
/* Brand colors */
|
|
9
|
+
--stl-ui-color-text-brand: var(--stl-ui-color-text-invert);
|
|
10
|
+
--stl-ui-color-brand: var(--stl-ui-color-accent);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
/* Layout and Typography */
|
|
15
|
+
--sl-text-h1: var(--stl-ui-typography-text-h1);
|
|
16
|
+
--sl-text-h2: var(--stl-ui-typography-text-h2);
|
|
17
|
+
--sl-text-h3: var(--stl-ui-typography-text-h3);
|
|
18
|
+
--sl-text-h4: var(--stl-ui-typography-text-h4);
|
|
19
|
+
--sl-text-h4: var(--stl-ui-typography-text-h5);
|
|
20
|
+
|
|
21
|
+
/* Colors */
|
|
22
|
+
--sl-color-bg: var(--stl-ui-background);
|
|
23
|
+
--sl-color-bg-sidebar: var(--stl-ui-background);
|
|
24
|
+
--sl-color-bg-ui: var(--stl-ui-card-background);
|
|
25
|
+
--sl-color-bg-nav: var(--stl-ui-background);
|
|
26
|
+
--sl-color-bg-inline-code: var(--stl-ui-muted-background);
|
|
27
|
+
--sl-color-bg-accent: var(--stl-ui-accent-background);
|
|
28
|
+
|
|
29
|
+
--sl-color-text: var(--stl-ui-foreground);
|
|
30
|
+
--sl-color-text-secondary: var(--stl-ui-foreground-secondary);
|
|
31
|
+
--sl-color-text-tertiary: var(--stl-ui-foreground-muted);
|
|
32
|
+
--sl-color-text-accent: var(--stl-ui-foreground-accent);
|
|
33
|
+
--sl-color-hairline: var(--stl-ui-border);
|
|
34
|
+
--sl-color-hairline-light: var(--stl-ui-border-muted);
|
|
35
|
+
--sl-color-hairline-shade: var(--stl-ui-border-emphasis);
|
|
36
|
+
--sl-color-text-invert: var(--stl-ui-inverse-foreground);
|
|
37
|
+
|
|
38
|
+
/* Primary colors */
|
|
39
|
+
--sl-color-red-low: var(--stl-ui-swatch-red-faint);
|
|
40
|
+
--sl-color-red: var(--stl-ui-swatch-red-base);
|
|
41
|
+
--sl-color-red-high: var(--stl-ui-swatch-red-base);
|
|
42
|
+
|
|
43
|
+
--sl-color-green-low: var(--stl-ui-swatch-green-faint);
|
|
44
|
+
--sl-color-green: var(--stl-ui-swatch-green-base);
|
|
45
|
+
--sl-color-green-high: var(--stl-ui-swatch-green-base);
|
|
46
|
+
|
|
47
|
+
--sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
|
|
48
|
+
--sl-color-blue: var(--stl-ui-swatch-blue-base);
|
|
49
|
+
--sl-color-blue-high: var(--stl-ui-swatch-blue-base);
|
|
50
|
+
|
|
51
|
+
--sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
|
|
52
|
+
--sl-color-orange: var(--stl-ui-swatch-orange-base);
|
|
53
|
+
--sl-color-orange-high: var(--stl-ui-swatch-orange-base);
|
|
54
|
+
|
|
55
|
+
--sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
|
|
56
|
+
--sl-color-purple: var(--stl-ui-swatch-purple-base);
|
|
57
|
+
--sl-color-purple-high: var(--stl-ui-swatch-purple-base);
|
|
58
|
+
|
|
59
|
+
--sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
|
|
60
|
+
--sl-color-teal: var(--stl-ui-swatch-teal-base);
|
|
61
|
+
--sl-color-teal-high: var(--stl-ui-swatch-teal-base);
|
|
62
|
+
|
|
63
|
+
--sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
|
|
64
|
+
--sl-color-magenta: var(--stl-ui-swatch-pink-base);
|
|
65
|
+
--sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
|
|
66
|
+
|
|
67
|
+
--sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
|
|
68
|
+
--sl-color-yellow: var(--stl-ui-swatch-yellow-base);
|
|
69
|
+
--sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Starlight Compatibility */
|
|
73
|
+
.stl-ui-prose {
|
|
74
|
+
.sl-anchor-link svg {
|
|
75
|
+
margin-top: 4px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h2 code {
|
|
79
|
+
font-size: var(--stl-ui-typography-text-h4);
|
|
80
|
+
line-height: 120%;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
h3 code {
|
|
84
|
+
font-size: var(--stl-ui-typography-text-h5);
|
|
85
|
+
line-height: 120%;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Tab component */
|
|
89
|
+
starlight-tabs {
|
|
90
|
+
a {
|
|
91
|
+
text-decoration: none;
|
|
92
|
+
line-height: unset;
|
|
93
|
+
color: var(--stl-ui-foreground);
|
|
94
|
+
|
|
95
|
+
&[aria-selected='true'] {
|
|
96
|
+
color: var(--stl-ui-foreground-accent);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
ol,
|
|
101
|
+
ul {
|
|
102
|
+
padding-left: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
li {
|
|
106
|
+
margin-bottom: -2px;
|
|
107
|
+
&:not(:last-child) {
|
|
108
|
+
margin-bottom: -2px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
a:first-child {
|
|
112
|
+
display: flex;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Pagination Links */
|
|
118
|
+
|
|
119
|
+
.pagination-links {
|
|
120
|
+
a {
|
|
121
|
+
color: var(--stl-ui-foreground);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
/* --stl-ui-swatch-es - Light */
|
|
3
|
+
:root[data-theme='light'] {
|
|
4
|
+
--stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-800);
|
|
5
|
+
--stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-700);
|
|
6
|
+
--stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-600);
|
|
7
|
+
--stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-500);
|
|
8
|
+
--stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-400);
|
|
9
|
+
--stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-300);
|
|
10
|
+
--stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-200);
|
|
11
|
+
--stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-100);
|
|
12
|
+
--stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-50);
|
|
13
|
+
--stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
|
|
14
|
+
--stl-ui-swatch-gray-white: rgb(255, 255, 255);
|
|
15
|
+
|
|
16
|
+
--stl-ui-swatch-accent-base: var(--stl-ui-accent-600);
|
|
17
|
+
--stl-ui-swatch-accent-muted: var(--stl-ui-accent-200);
|
|
18
|
+
--stl-ui-swatch-accent-faint: var(--stl-ui-accent-50);
|
|
19
|
+
--stl-ui-swatch-red-base: var(--stl-ui-red-600);
|
|
20
|
+
--stl-ui-swatch-red-muted: var(--stl-ui-red-200);
|
|
21
|
+
--stl-ui-swatch-red-faint: var(--stl-ui-red-50);
|
|
22
|
+
--stl-ui-swatch-green-base: var(--stl-ui-green-600);
|
|
23
|
+
--stl-ui-swatch-green-muted: var(--stl-ui-green-200);
|
|
24
|
+
--stl-ui-swatch-green-faint: var(--stl-ui-green-50);
|
|
25
|
+
--stl-ui-swatch-blue-base: var(--stl-ui-blue-600);
|
|
26
|
+
--stl-ui-swatch-blue-muted: var(--stl-ui-blue-200);
|
|
27
|
+
--stl-ui-swatch-blue-faint: var(--stl-ui-blue-50);
|
|
28
|
+
--stl-ui-swatch-orange-base: var(--stl-ui-orange-600);
|
|
29
|
+
--stl-ui-swatch-orange-muted: var(--stl-ui-orange-200);
|
|
30
|
+
--stl-ui-swatch-orange-faint: var(--stl-ui-orange-50);
|
|
31
|
+
--stl-ui-swatch-purple-base: var(--stl-ui-purple-600);
|
|
32
|
+
--stl-ui-swatch-purple-muted: var(--stl-ui-purple-200);
|
|
33
|
+
--stl-ui-swatch-purple-faint: var(--stl-ui-purple-50);
|
|
34
|
+
--stl-ui-swatch-cyan-base: var(--stl-ui-cyan-600);
|
|
35
|
+
--stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-200);
|
|
36
|
+
--stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-50);
|
|
37
|
+
--stl-ui-swatch-pink-base: var(--stl-ui-pink-600);
|
|
38
|
+
--stl-ui-swatch-pink-muted: var(--stl-ui-pink-200);
|
|
39
|
+
--stl-ui-swatch-pink-faint: var(--stl-ui-pink-50);
|
|
40
|
+
--stl-ui-swatch-yellow-base: var(--stl-ui-yellow-600);
|
|
41
|
+
--stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-200);
|
|
42
|
+
--stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-50);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* --stl-ui-swatch-es - Dark */
|
|
46
|
+
:root[data-theme='dark'] {
|
|
47
|
+
--stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-100);
|
|
48
|
+
--stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-200);
|
|
49
|
+
--stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-300);
|
|
50
|
+
--stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-400);
|
|
51
|
+
--stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-500);
|
|
52
|
+
--stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-600);
|
|
53
|
+
--stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-700);
|
|
54
|
+
--stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-800);
|
|
55
|
+
--stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-900);
|
|
56
|
+
--stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
|
|
57
|
+
--stl-ui-swatch-gray-white: rgb(255, 255, 255);
|
|
58
|
+
|
|
59
|
+
--stl-ui-swatch-accent-base: var(--stl-ui-accent-500);
|
|
60
|
+
--stl-ui-swatch-accent-muted: var(--stl-ui-accent-900);
|
|
61
|
+
--stl-ui-swatch-accent-faint: var(--stl-ui-accent-950);
|
|
62
|
+
--stl-ui-swatch-red-base: var(--stl-ui-red-500);
|
|
63
|
+
--stl-ui-swatch-red-muted: var(--stl-ui-red-900);
|
|
64
|
+
--stl-ui-swatch-red-faint: var(--stl-ui-red-950);
|
|
65
|
+
--stl-ui-swatch-green-base: var(--stl-ui-green-500);
|
|
66
|
+
--stl-ui-swatch-green-muted: var(--stl-ui-green-900);
|
|
67
|
+
--stl-ui-swatch-green-faint: var(--stl-ui-green-950);
|
|
68
|
+
--stl-ui-swatch-blue-base: var(--stl-ui-blue-500);
|
|
69
|
+
--stl-ui-swatch-blue-muted: var(--stl-ui-blue-900);
|
|
70
|
+
--stl-ui-swatch-blue-faint: var(--stl-ui-blue-950);
|
|
71
|
+
--stl-ui-swatch-orange-base: var(--stl-ui-orange-500);
|
|
72
|
+
--stl-ui-swatch-orange-muted: var(--stl-ui-orange-900);
|
|
73
|
+
--stl-ui-swatch-orange-faint: var(--stl-ui-orange-950);
|
|
74
|
+
--stl-ui-swatch-purple-base: var(--stl-ui-purple-500);
|
|
75
|
+
--stl-ui-swatch-purple-muted: var(--stl-ui-purple-900);
|
|
76
|
+
--stl-ui-swatch-purple-faint: var(--stl-ui-purple-950);
|
|
77
|
+
--stl-ui-swatch-cyan-base: var(--stl-ui-cyan-500);
|
|
78
|
+
--stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-900);
|
|
79
|
+
--stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-950);
|
|
80
|
+
--stl-ui-swatch-pink-base: var(--stl-ui-pink-500);
|
|
81
|
+
--stl-ui-swatch-pink-muted: var(--stl-ui-pink-900);
|
|
82
|
+
--stl-ui-swatch-pink-faint: var(--stl-ui-pink-950);
|
|
83
|
+
--stl-ui-swatch-yellow-base: var(--stl-ui-yellow-500);
|
|
84
|
+
--stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-900);
|
|
85
|
+
--stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-950);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
@layer stl-ui {
|
|
2
|
+
/* Swatches - Light */
|
|
3
|
+
:root[data-theme='light'] {
|
|
4
|
+
--stl-ui-background: var(--stl-ui-swatch-gray-white);
|
|
5
|
+
--stl-ui-card-background: var(--stl-ui-swatch-gray-white);
|
|
6
|
+
--stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);
|
|
7
|
+
--stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
|
|
8
|
+
--stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
|
|
9
|
+
--stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
|
|
10
|
+
--stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
|
|
11
|
+
--stl-ui-border: var(--stl-ui-swatch-gray-gray-7);
|
|
12
|
+
--stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-8);
|
|
13
|
+
--stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-6);
|
|
14
|
+
--stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
|
|
15
|
+
--stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-white);
|
|
16
|
+
--stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
|
|
17
|
+
--stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
|
|
18
|
+
--stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
|
|
19
|
+
--stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
|
|
20
|
+
--stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
|
|
21
|
+
--stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
|
|
22
|
+
--stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
|
|
23
|
+
--stl-ui-overlay-background: #0000000d;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Swatches - Dark */
|
|
27
|
+
:root[data-theme='dark'] {
|
|
28
|
+
--stl-ui-background: var(--stl-ui-swatch-gray-black);
|
|
29
|
+
--stl-ui-card-background: var(--stl-ui-swatch-gray-gray-9);
|
|
30
|
+
--stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-9);
|
|
31
|
+
--stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
|
|
32
|
+
--stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
|
|
33
|
+
--stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
|
|
34
|
+
--stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
|
|
35
|
+
--stl-ui-border: var(--stl-ui-swatch-gray-gray-8);
|
|
36
|
+
--stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-9);
|
|
37
|
+
--stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-7);
|
|
38
|
+
--stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
|
|
39
|
+
--stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-black);
|
|
40
|
+
--stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
|
|
41
|
+
--stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
|
|
42
|
+
--stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
|
|
43
|
+
--stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
|
|
44
|
+
--stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
|
|
45
|
+
--stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
|
|
46
|
+
--stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
|
|
47
|
+
--stl-ui-overlay-background: #00000080;
|
|
48
|
+
}
|
|
49
|
+
}
|