@stainless-api/ui-primitives 0.1.0-beta.1 → 0.1.0-beta.11

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 (44) hide show
  1. package/.turbo/turbo-build.log +5 -0
  2. package/CHANGELOG.md +60 -0
  3. package/dist/components/Accordion.d.ts +10 -0
  4. package/dist/components/Accordion.js +19 -0
  5. package/dist/components/Accordion.js.map +1 -0
  6. package/dist/components/Button.d.ts +27 -0
  7. package/dist/components/Button.js +33 -0
  8. package/dist/components/Button.js.map +1 -0
  9. package/dist/components/Callout.d.ts +8 -0
  10. package/dist/components/Callout.js +16 -0
  11. package/dist/components/Callout.js.map +1 -0
  12. package/dist/components/DropdownButton.d.ts +21 -0
  13. package/dist/components/DropdownButton.js +37 -0
  14. package/dist/components/DropdownButton.js.map +1 -0
  15. package/dist/index.d.ts +4 -0
  16. package/dist/index.js +5 -0
  17. package/dist/index.js.map +1 -0
  18. package/dist/scripts/dropdown-button.d.ts +5 -0
  19. package/dist/scripts/dropdown-button.js +43 -0
  20. package/dist/scripts/dropdown-button.js.map +1 -0
  21. package/dist/scripts/index.d.ts +1 -0
  22. package/dist/scripts/index.js +2 -0
  23. package/dist/scripts/index.js.map +1 -0
  24. package/dist/tsconfig.tsbuildinfo +1 -0
  25. package/package.json +6 -6
  26. package/src/components/Accordion.tsx +41 -0
  27. package/src/components/Button.tsx +1 -0
  28. package/src/components/DropdownButton.tsx +66 -40
  29. package/src/components/accordion.css +145 -0
  30. package/src/components/button.css +165 -135
  31. package/src/components/callout.css +57 -59
  32. package/src/components/dropdown-button.css +33 -31
  33. package/src/index.ts +1 -1
  34. package/src/styles/layout.css +3 -1
  35. package/src/styles/scales.css +1 -1
  36. package/src/styles/starlight-compat.css +138 -107
  37. package/src/styles/swatches.css +2 -2
  38. package/src/styles/theme.css +2 -2
  39. package/src/styles/typography.css +109 -148
  40. package/src/styles.css +1 -1
  41. package/tsconfig.json +2 -6
  42. package/.env +0 -1
  43. package/src/components/DetailsGroup.tsx +0 -17
  44. package/src/components/details.css +0 -126
package/src/components/callout.css CHANGED
@@ -1,72 +1,70 @@
1
- @layer stl-ui {
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 CHANGED
@@ -1,27 +1,25 @@
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
- }
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);
25
23
 
26
24
  .stl-ui-dropdown-button__button {
27
25
  border: none;
@@ -93,7 +91,6 @@
93
91
  }
94
92
 
95
93
  .stl-ui-dropdown-button__menu-item {
96
- /* border-radius, height, and lineheight */
97
94
  --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
98
95
  --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
99
96
  --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
@@ -110,7 +107,7 @@
110
107
  display: flex;
111
108
  align-items: center;
112
109
  justify-content: space-between;
113
- gap: 8px;
110
+ gap: 16px;
114
111
 
115
112
  &:hover {
116
113
  background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
@@ -126,9 +123,13 @@
126
123
  white-space: nowrap;
127
124
  }
128
125
 
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);
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;
132
133
  }
133
134
 
134
135
  .stl-ui-dropdown-button__menu-item-icon {
@@ -141,19 +142,20 @@
141
142
  --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
142
143
  from var(--stl-ui-foreground) l c h / 0.25
143
144
  );
144
- margin-left: 8px;
145
+
145
146
  svg {
146
147
  color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
147
148
  }
148
149
  }
149
150
  }
150
151
 
151
- .stl-ui-dropdown-button__divider {
152
+ hr {
152
153
  --stl-ui-dropdown-button__divider-height: 1px;
153
154
  --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
154
155
 
155
156
  height: var(--stl-ui-dropdown-button__divider-height);
156
157
  background-color: var(--stl-ui-dropdown-button__divider-color);
158
+ border: none;
157
159
 
158
160
  margin: 4px 0;
159
161
  width: calc(100% + 8px);
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from './components/Button';
2
2
  export * from './components/DropdownButton';
3
3
  export * from './components/Callout';
4
- export * from './components/DetailsGroup';
4
+ export * from './components/Accordion';
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;
@@ -7,5 +7,7 @@
7
7
  --stl-ui-layout-border-radius-med: 16px;
8
8
  --stl-ui-layout-border-radius-max: 9999px;
9
9
  --stl-ui-left-content-indent: 24px;
10
+
11
+ --stl-ui-page-padding-inline: 20px;
10
12
  }
11
13
  }
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,125 +1,156 @@
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
- }
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
+ }
12
64
 
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);
65
+ /* Starlight Compatibility */
66
+ .stl-ui-prose {
67
+ /* TODO: Disable starlight headingLinks and replace with our own */
68
+ /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
69
+ .sl-heading-wrapper.level-h1 {
70
+ font-size: var(--stl-ui-typography-text-h1);
71
+ letter-spacing: -0.03em;
72
+ margin-top: 64px;
73
+ line-height: var(--stl-ui-typography-line-height-headings);
74
+ }
75
+ .sl-heading-wrapper.level-h2 {
76
+ font-size: var(--stl-ui-typography-text-h2);
77
+ letter-spacing: -0.03em;
78
+ margin-top: 48px;
79
+ line-height: var(--stl-ui-typography-line-height-headings);
70
80
  }
71
81
 
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);
82
+ .sl-heading-wrapper.level-h3 {
83
+ font-size: var(--stl-ui-typography-text-h3);
84
+ letter-spacing: -0.02em;
85
+ margin-top: 40px;
86
+ line-height: var(--stl-ui-typography-line-height-headings);
87
+ }
88
+ .sl-heading-wrapper.level-h4 {
89
+ font-size: var(--stl-ui-typography-text-h4);
90
+ letter-spacing: -0.02em;
91
+ margin-top: 32px;
92
+ line-height: var(--stl-ui-typography-line-height-headings);
93
+ }
94
+ .sl-heading-wrapper.level-h5 {
95
+ font-size: var(--stl-ui-typography-text-h5);
96
+ letter-spacing: -0.02em;
97
+ margin-top: 24px;
98
+ line-height: var(--stl-ui-typography-line-height-headings);
99
+ }
100
+ .sl-heading-wrapper {
101
+ --sl-anchor-icon-size: 0.8em;
102
+ }
103
+ /* TODO: replace with an icon that matches Stainless branding */
104
+ .sl-anchor-link svg {
105
+ margin-top: 0;
106
+ }
107
+ }
94
108
 
95
- &[aria-selected='true'] {
96
- color: var(--stl-ui-foreground-accent);
97
- }
109
+ /* TODO: remove these */
110
+ .stl-ui-prose {
111
+ /* Tab component */
112
+ starlight-tabs {
113
+ a {
114
+ text-decoration: none;
115
+ line-height: unset;
116
+ color: var(--stl-ui-foreground);
117
+
118
+ &[aria-selected='true'] {
119
+ color: var(--stl-ui-foreground-accent);
120
+ font-weight: normal;
98
121
  }
122
+ }
99
123
 
100
- ol,
101
- ul {
124
+ ol,
125
+ ul {
126
+ &:not(.stl-ui-not-prose *) {
102
127
  padding-left: 0;
103
128
  }
129
+ }
104
130
 
105
- li {
131
+ li:not(.stl-ui-not-prose *) {
132
+ margin-bottom: -2px;
133
+ &:not(:last-child) {
106
134
  margin-bottom: -2px;
107
- &:not(:last-child) {
108
- margin-bottom: -2px;
109
- }
135
+ }
110
136
 
111
- a:first-child {
112
- display: flex;
113
- }
137
+ a:first-child {
138
+ display: flex;
114
139
  }
115
140
  }
141
+ }
116
142
 
117
- /* Pagination Links */
143
+ /* Pagination Links */
118
144
 
119
- .pagination-links {
120
- a {
121
- color: var(--stl-ui-foreground);
122
- }
145
+ .pagination-links {
146
+ a {
147
+ color: var(--stl-ui-foreground);
148
+ }
149
+ }
150
+
151
+ .starlight-aside {
152
+ svg {
153
+ margin-top: 0;
123
154
  }
124
155
  }
125
156
  }
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);
package/src/styles/theme.css CHANGED
@@ -1,6 +1,6 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* Swatches - Light */
3
- :root[data-theme='light'] {
3
+ :root {
4
4
  --stl-ui-background: var(--stl-ui-swatch-gray-white);
5
5
  --stl-ui-card-background: var(--stl-ui-swatch-gray-white);
6
6
  --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);