@stainless-api/ui-primitives 0.1.0-beta.7 → 0.1.0-beta.9

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 (22) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +6 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/DropdownButton.tsx +109 -0
  6. package/src/components/accordion.css +145 -0
  7. package/src/components/button.css +165 -135
  8. package/src/components/callout.css +57 -59
  9. package/src/components/dropdown-button.css +164 -0
  10. package/src/index.ts +2 -1
  11. package/src/scripts/dropdown-button.ts +55 -0
  12. package/src/scripts/index.ts +1 -0
  13. package/src/styles/layout.css +1 -1
  14. package/src/styles/scales.css +1 -1
  15. package/src/styles/starlight-compat.css +142 -134
  16. package/src/styles/swatches.css +2 -2
  17. package/src/styles/theme.css +2 -2
  18. package/src/styles/typography.css +128 -140
  19. package/src/styles.css +2 -1
  20. package/tsconfig.json +2 -6
  21. package/src/components/DetailsGroup.tsx +0 -17
  22. package/src/components/details.css +0 -124
package/src/components/callout.css CHANGED
@@ -1,72 +1,70 @@
1
- @layer stl-ui.components {
2
- .stl-ui-callout {
3
- --stl-ui-callout-background-color: var(--stl-ui-muted-background);
4
- --stl-ui-callout-border-color: var(--stl-ui-border);
5
- --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
1
+ .stl-ui-callout {
2
+ --stl-ui-callout-background-color: var(--stl-ui-muted-background);
3
+ --stl-ui-callout-border-color: var(--stl-ui-border);
4
+ --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
6
5
 
7
- border: 1px solid var(--stl-ui-callout-border-color);
8
- background-color: var(--stl-ui-callout-background-color);
9
- border-radius: var(--stl-ui-layout-border-radius);
10
- padding: 12px;
11
- line-height: var(--stl-ui-typography-line-height);
12
- font-weight: 400;
13
- font-size: var(--stl-ui-typography-text-body);
6
+ border: 1px solid var(--stl-ui-callout-border-color);
7
+ background-color: var(--stl-ui-callout-background-color);
8
+ border-radius: var(--stl-ui-layout-border-radius);
9
+ padding: 12px;
10
+ line-height: var(--stl-ui-typography-line-height);
11
+ font-weight: 400;
12
+ font-size: var(--stl-ui-typography-text-body);
14
13
 
15
- display: flex;
16
- align-items: flex-start;
17
- gap: 8px;
18
- }
14
+ display: flex;
15
+ align-items: flex-start;
16
+ gap: 8px;
17
+ }
19
18
 
20
- .stl-ui-callout--info {
21
- --stl-ui-callout-background-color: var(--stl-ui-muted-background);
22
- --stl-ui-callout-border-color: var(--stl-ui-border);
23
- --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
24
- }
19
+ .stl-ui-callout--info {
20
+ --stl-ui-callout-background-color: var(--stl-ui-muted-background);
21
+ --stl-ui-callout-border-color: var(--stl-ui-border);
22
+ --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
23
+ }
25
24
 
26
- .stl-ui-callout--note {
27
- --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
28
- --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
29
- --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
30
- }
25
+ .stl-ui-callout--note {
26
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
27
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
28
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
29
+ }
31
30
 
32
- .stl-ui-callout--tip {
33
- --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
34
- --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
35
- --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
36
- }
31
+ .stl-ui-callout--tip {
32
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
33
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
34
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
35
+ }
37
36
 
38
- .stl-ui-callout--success {
39
- --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
40
- --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
41
- --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
42
- }
37
+ .stl-ui-callout--success {
38
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
39
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
40
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
41
+ }
43
42
 
44
- .stl-ui-callout--warning {
45
- --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
46
- --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
47
- --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
48
- }
43
+ .stl-ui-callout--warning {
44
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
45
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
46
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
47
+ }
49
48
 
50
- .stl-ui-callout--danger {
51
- --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
52
- --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
53
- --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
54
- }
49
+ .stl-ui-callout--danger {
50
+ --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
51
+ --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
52
+ --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
53
+ }
55
54
 
56
- .stl-ui-callout__icon {
57
- color: var(--stl-ui-callout-accent-color);
58
- flex-shrink: 0;
59
- width: 1em;
60
- height: 1em;
61
- margin: calc((1lh - 1em) / 2);
62
- }
55
+ .stl-ui-callout__icon {
56
+ color: var(--stl-ui-callout-accent-color);
57
+ flex-shrink: 0;
58
+ width: 1em;
59
+ height: 1em;
60
+ margin: calc((1lh - 1em) / 2);
61
+ }
63
62
 
64
- .stl-ui-callout__content {
65
- flex: 1;
66
- margin-top: 0;
63
+ .stl-ui-callout__content {
64
+ flex: 1;
65
+ margin-top: 0;
67
66
 
68
- & > :first-child {
69
- margin-top: 0;
70
- }
67
+ & > :first-child {
68
+ margin-top: 0;
71
69
  }
72
70
  }
package/src/components/dropdown-button.css ADDED
@@ -0,0 +1,164 @@
1
+ .stl-ui-dropdown-button {
2
+ --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
3
+ --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
4
+ --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
5
+ --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
6
+ --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
7
+
8
+ --stl-ui-dropdown-button-height: 32px;
9
+ --stl-ui-dropdown-button-padding: 8px 10px;
10
+ --stl-ui-dropdown-button-line-height: 100%;
11
+ --stl-ui-dropdown-button-font-weight: 500;
12
+
13
+ position: relative;
14
+ display: inline-flex;
15
+ align-items: center;
16
+
17
+ background-color: var(--stl-ui-dropdown-button-background-color);
18
+ border: 1px solid var(--stl-ui-dropdown-button-border-color);
19
+ border-radius: var(--stl-ui-dropdown-button-border-radius);
20
+ color: var(--stl-ui-dropdown-button-color);
21
+ gap: 0;
22
+ font-size: var(--stl-ui-dropdown-button-font-size);
23
+
24
+ .stl-ui-dropdown-button__button {
25
+ border: none;
26
+ background: none;
27
+ height: var(--stl-ui-dropdown-button-height);
28
+ padding: var(--stl-ui-dropdown-button-padding);
29
+ line-height: var(--stl-ui-dropdown-button-line-height);
30
+ font-weight: var(--stl-ui-dropdown-button-font-weight);
31
+ cursor: pointer;
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+
36
+ &:hover {
37
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
38
+ border-color: var(--stl-ui-border-emphasis);
39
+ }
40
+ }
41
+
42
+ .stl-ui-dropdown-button--action {
43
+ display: flex;
44
+ align-items: center;
45
+ gap: 8px;
46
+
47
+ &:hover {
48
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
49
+ border-color: var(--stl-ui-border-emphasis);
50
+ }
51
+
52
+ &.disabled {
53
+ cursor: not-allowed;
54
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
55
+ }
56
+ }
57
+
58
+ .stl-ui-dropdown-button__trigger {
59
+ border-left: 1px solid var(--stl-ui-border);
60
+ border-radius: 0;
61
+
62
+ &:hover {
63
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
64
+ border-color: var(--stl-ui-border-emphasis);
65
+ }
66
+ }
67
+
68
+ .stl-ui-dropdown-button__menu {
69
+ --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
70
+ --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
71
+ --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
72
+ --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
73
+
74
+ background-color: var(--stl-ui-dropdown-button__menu-background-color);
75
+ border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
76
+ box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
77
+ border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
78
+
79
+ position: absolute;
80
+ top: 100%;
81
+ right: 0;
82
+ margin-top: 4px;
83
+ z-index: 1000;
84
+ min-width: 100%;
85
+ padding: 4px;
86
+ display: none;
87
+
88
+ &[data-state='open'] {
89
+ display: block;
90
+ }
91
+ }
92
+
93
+ .stl-ui-dropdown-button__menu-item {
94
+ --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
95
+ --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
96
+ --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
97
+ --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
98
+ from var(--stl-ui-foreground) l c h / 0.05
99
+ );
100
+
101
+ border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
102
+ height: var(--stl-ui-dropdown-button__menu-item-height);
103
+ line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
104
+
105
+ padding: 8px;
106
+ cursor: pointer;
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: space-between;
110
+ gap: 16px;
111
+
112
+ &:hover {
113
+ background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
114
+ }
115
+
116
+ .stl-ui-dropdown-button__menu-item-content {
117
+ display: flex;
118
+ align-items: center;
119
+ gap: 8px;
120
+ }
121
+
122
+ .stl-ui-dropdown-button__menu-item-text {
123
+ white-space: nowrap;
124
+ }
125
+
126
+ .stl-ui-dropdown-button__menu-item-text--subtle {
127
+ color: var(--stl-ui-foreground-muted);
128
+ }
129
+
130
+ strong {
131
+ color: var(--stl-ui-foreground);
132
+ font-weight: 500;
133
+ }
134
+
135
+ .stl-ui-dropdown-button__menu-item-icon {
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ }
140
+
141
+ .stl-ui-dropdown-button__menu-item-external-link-icon {
142
+ --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
143
+ from var(--stl-ui-foreground) l c h / 0.25
144
+ );
145
+
146
+ svg {
147
+ color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
148
+ }
149
+ }
150
+ }
151
+
152
+ hr {
153
+ --stl-ui-dropdown-button__divider-height: 1px;
154
+ --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
155
+
156
+ height: var(--stl-ui-dropdown-button__divider-height);
157
+ background-color: var(--stl-ui-dropdown-button__divider-color);
158
+ border: none;
159
+
160
+ margin: 4px 0;
161
+ width: calc(100% + 8px);
162
+ transform: translateX(-4px);
163
+ }
164
+ }
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './components/Button';
2
+ export * from './components/DropdownButton';
2
3
  export * from './components/Callout';
3
- export * from './components/DetailsGroup';
4
+ export * from './components/Accordion';
package/src/scripts/dropdown-button.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
+ }
package/src/scripts/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './dropdown-button';
package/src/styles/layout.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* Layout - Stainless */
3
3
  :root {
4
4
  --stl-ui-layout-border-radius-xs: 4px;
package/src/styles/scales.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* Scales - Default */
3
3
  :root {
4
4
  --stl-ui-gray-50: rgba(250, 250, 250, 1);
package/src/styles/starlight-compat.css CHANGED
@@ -1,152 +1,160 @@
1
- @layer stl-ui.starlight-compat {
2
- :root {
3
- --stl-ui-button-border-radius: 8px;
4
- --stl-ui-text-body: 14px;
5
- --stl-ui-button-size: 2rem;
6
-
7
- /* Brand colors */
8
- --stl-ui-color-text-brand: var(--stl-ui-color-text-invert);
9
- --stl-ui-color-brand: var(--stl-ui-color-accent);
10
- }
1
+ :root {
2
+ /* Layout and Typography */
3
+ --sl-font: var(--stl-ui-typography-font);
4
+ --sl-font-mono: var(--stl-ui-typography-font-mono);
5
+ --sl-line-height: var(--stl-ui-typography-line-height);
6
+
7
+ /* Headings */
8
+ --sl-text-h1: var(--stl-ui-typography-text-h1);
9
+ --sl-text-h2: var(--stl-ui-typography-text-h2);
10
+ --sl-text-h3: var(--stl-ui-typography-text-h3);
11
+ --sl-text-h4: var(--stl-ui-typography-text-h4);
12
+ --sl-text-h5: var(--stl-ui-typography-text-h5);
13
+
14
+ /* Colors */
15
+ --sl-color-bg: var(--stl-ui-background);
16
+ --sl-color-bg-sidebar: var(--stl-ui-background);
17
+ --sl-color-bg-ui: var(--stl-ui-card-background);
18
+ --sl-color-bg-nav: var(--stl-ui-background);
19
+ --sl-color-bg-inline-code: var(--stl-ui-muted-background);
20
+ --sl-color-bg-accent: var(--stl-ui-accent-background);
21
+
22
+ --sl-color-text: var(--stl-ui-foreground);
23
+ --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
24
+ --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
25
+ --sl-color-text-accent: var(--stl-ui-foreground-accent);
26
+ --sl-color-hairline: var(--stl-ui-border);
27
+ --sl-color-hairline-light: var(--stl-ui-border-muted);
28
+ --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
29
+ --sl-color-text-invert: var(--stl-ui-inverse-foreground);
30
+
31
+ /* Primary colors */
32
+ --sl-color-red-low: var(--stl-ui-swatch-red-faint);
33
+ --sl-color-red: var(--stl-ui-swatch-red-base);
34
+ --sl-color-red-high: var(--stl-ui-swatch-red-base);
35
+
36
+ --sl-color-green-low: var(--stl-ui-swatch-green-faint);
37
+ --sl-color-green: var(--stl-ui-swatch-green-base);
38
+ --sl-color-green-high: var(--stl-ui-swatch-green-base);
39
+
40
+ --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
41
+ --sl-color-blue: var(--stl-ui-swatch-blue-base);
42
+ --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
43
+
44
+ --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
45
+ --sl-color-orange: var(--stl-ui-swatch-orange-base);
46
+ --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
47
+
48
+ --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
49
+ --sl-color-purple: var(--stl-ui-swatch-purple-base);
50
+ --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
51
+
52
+ --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
53
+ --sl-color-teal: var(--stl-ui-swatch-teal-base);
54
+ --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
55
+
56
+ --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
57
+ --sl-color-magenta: var(--stl-ui-swatch-pink-base);
58
+ --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
59
+
60
+ --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
61
+ --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
62
+ --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
63
+ }
11
64
 
12
- :root {
13
- --sl-font: var(--stl-ui-typography-font);
14
- --sl-font-mono: var(--stl-ui-typography-font-mono);
15
-
16
- /* Layout and Typography */
17
- --sl-text-h1: var(--stl-ui-typography-text-h1);
18
- --sl-text-h2: var(--stl-ui-typography-text-h2);
19
- --sl-text-h3: var(--stl-ui-typography-text-h3);
20
- --sl-text-h4: var(--stl-ui-typography-text-h4);
21
- --sl-text-h4: var(--stl-ui-typography-text-h5);
22
-
23
- /* Colors */
24
- --sl-color-bg: var(--stl-ui-background);
25
- --sl-color-bg-sidebar: var(--stl-ui-background);
26
- --sl-color-bg-ui: var(--stl-ui-card-background);
27
- --sl-color-bg-nav: var(--stl-ui-background);
28
- --sl-color-bg-inline-code: var(--stl-ui-muted-background);
29
- --sl-color-bg-accent: var(--stl-ui-accent-background);
30
-
31
- --sl-color-text: var(--stl-ui-foreground);
32
- --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
33
- --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
34
- --sl-color-text-accent: var(--stl-ui-foreground-accent);
35
- --sl-color-hairline: var(--stl-ui-border);
36
- --sl-color-hairline-light: var(--stl-ui-border-muted);
37
- --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
38
- --sl-color-text-invert: var(--stl-ui-inverse-foreground);
39
-
40
- /* Primary colors */
41
- --sl-color-red-low: var(--stl-ui-swatch-red-faint);
42
- --sl-color-red: var(--stl-ui-swatch-red-base);
43
- --sl-color-red-high: var(--stl-ui-swatch-red-base);
44
-
45
- --sl-color-green-low: var(--stl-ui-swatch-green-faint);
46
- --sl-color-green: var(--stl-ui-swatch-green-base);
47
- --sl-color-green-high: var(--stl-ui-swatch-green-base);
48
-
49
- --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
50
- --sl-color-blue: var(--stl-ui-swatch-blue-base);
51
- --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
52
-
53
- --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
54
- --sl-color-orange: var(--stl-ui-swatch-orange-base);
55
- --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
56
-
57
- --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
58
- --sl-color-purple: var(--stl-ui-swatch-purple-base);
59
- --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
60
-
61
- --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
62
- --sl-color-teal: var(--stl-ui-swatch-teal-base);
63
- --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
64
-
65
- --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
66
- --sl-color-magenta: var(--stl-ui-swatch-pink-base);
67
- --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
68
-
69
- --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
70
- --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
71
- --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
65
+ /* Starlight Compatibility */
66
+ .stl-ui-prose {
67
+ :is(h1, h2, h3, h4, h5) code {
68
+ font-size: 0.9em;
69
+ font-weight: inherit;
70
+ }
71
+ /* TODO: Disable starlight headingLinks and replace with our own */
72
+ /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
73
+ .sl-heading-wrapper.level-h1 {
74
+ font-size: var(--stl-ui-typography-text-h1);
75
+ letter-spacing: -0.03em;
76
+ margin-top: 64px;
77
+ line-height: var(--stl-ui-typography-line-height-headings);
78
+ }
79
+ .sl-heading-wrapper.level-h2 {
80
+ font-size: var(--stl-ui-typography-text-h2);
81
+ letter-spacing: -0.03em;
82
+ margin-top: 48px;
83
+ line-height: var(--stl-ui-typography-line-height-headings);
72
84
  }
73
85
 
74
- /* Starlight Compatibility */
75
- .stl-ui-prose {
76
- :is(h1, h2, h3, h4, h5) code {
77
- font-size: 0.9em;
78
- font-weight: inherit;
79
- }
80
- /* TODO: Disable starlight headingLinks and replace with our own */
81
- /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
82
- .sl-heading-wrapper.level-h1 {
83
- font-size: var(--stl-ui-typography-text-h1);
84
- letter-spacing: -0.03em;
85
- margin-top: 64px;
86
- }
87
- .sl-heading-wrapper.level-h2 {
88
- font-size: var(--stl-ui-typography-text-h2);
89
- letter-spacing: -0.03em;
90
- margin-top: 48px;
91
- }
92
- .sl-heading-wrapper.level-h3 {
93
- font-size: var(--stl-ui-typography-text-h3);
94
- letter-spacing: -0.02em;
95
- margin-top: 40px;
96
- }
97
- .sl-heading-wrapper.level-h4 {
98
- font-size: var(--stl-ui-typography-text-h4);
99
- letter-spacing: -0.02em;
100
- margin-top: 32px;
101
- }
102
- .sl-heading-wrapper.level-h5 {
103
- font-size: var(--stl-ui-typography-text-h5);
104
- letter-spacing: -0.02em;
105
- margin-top: 24px;
106
- }
107
- .sl-heading-wrapper {
108
- --sl-anchor-icon-size: 0.8em;
109
- }
110
- /* TODO: replace with an icon that matches Stainless branding */
111
- .sl-anchor-link svg {
112
- margin-top: 0;
113
- }
114
-
115
- /* Tab component */
116
- starlight-tabs {
117
- a {
118
- text-decoration: none;
119
- line-height: unset;
120
- color: var(--stl-ui-foreground);
86
+ .sl-heading-wrapper.level-h3 {
87
+ font-size: var(--stl-ui-typography-text-h3);
88
+ letter-spacing: -0.02em;
89
+ margin-top: 40px;
90
+ line-height: var(--stl-ui-typography-line-height-headings);
91
+ }
92
+ .sl-heading-wrapper.level-h4 {
93
+ font-size: var(--stl-ui-typography-text-h4);
94
+ letter-spacing: -0.02em;
95
+ margin-top: 32px;
96
+ line-height: var(--stl-ui-typography-line-height-headings);
97
+ }
98
+ .sl-heading-wrapper.level-h5 {
99
+ font-size: var(--stl-ui-typography-text-h5);
100
+ letter-spacing: -0.02em;
101
+ margin-top: 24px;
102
+ line-height: var(--stl-ui-typography-line-height-headings);
103
+ }
104
+ .sl-heading-wrapper {
105
+ --sl-anchor-icon-size: 0.8em;
106
+ }
107
+ /* TODO: replace with an icon that matches Stainless branding */
108
+ .sl-anchor-link svg {
109
+ margin-top: 0;
110
+ }
111
+ }
121
112
 
122
- &[aria-selected='true'] {
123
- color: var(--stl-ui-foreground-accent);
124
- }
113
+ /* TODO: remove these */
114
+ .stl-ui-prose {
115
+ /* Tab component */
116
+ starlight-tabs {
117
+ a {
118
+ text-decoration: none;
119
+ line-height: unset;
120
+ color: var(--stl-ui-foreground);
121
+
122
+ &[aria-selected='true'] {
123
+ color: var(--stl-ui-foreground-accent);
124
+ font-weight: normal;
125
125
  }
126
+ }
126
127
 
127
- ol,
128
- ul {
128
+ ol,
129
+ ul {
130
+ &:not(.stl-ui-not-prose *) {
129
131
  padding-left: 0;
130
132
  }
133
+ }
131
134
 
132
- li {
135
+ li:not(.stl-ui-not-prose *) {
136
+ margin-bottom: -2px;
137
+ &:not(:last-child) {
133
138
  margin-bottom: -2px;
134
- &:not(:last-child) {
135
- margin-bottom: -2px;
136
- }
139
+ }
137
140
 
138
- a:first-child {
139
- display: flex;
140
- }
141
+ a:first-child {
142
+ display: flex;
141
143
  }
142
144
  }
145
+ }
143
146
 
144
- /* Pagination Links */
147
+ /* Pagination Links */
145
148
 
146
- .pagination-links {
147
- a {
148
- color: var(--stl-ui-foreground);
149
- }
149
+ .pagination-links {
150
+ a {
151
+ color: var(--stl-ui-foreground);
152
+ }
153
+ }
154
+
155
+ .starlight-aside {
156
+ svg {
157
+ margin-top: 0;
150
158
  }
151
159
  }
152
160
  }
package/src/styles/swatches.css CHANGED
@@ -1,6 +1,6 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* --stl-ui-swatch-es - Light */
3
- :root[data-theme='light'] {
3
+ :root {
4
4
  --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-800);
5
5
  --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-700);
6
6
  --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-600);