@stainless-api/docs 0.1.0-beta.44 → 0.1.0-beta.46

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 (41) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/package.json +13 -13
  3. package/plugin/components/MethodDescription.tsx +54 -0
  4. package/plugin/components/SDKSelect.astro +0 -82
  5. package/plugin/components/search/SearchIsland.tsx +4 -1
  6. package/plugin/globalJs/method-descriptions.ts +33 -0
  7. package/plugin/index.ts +2 -9
  8. package/plugin/loadPluginConfig.ts +9 -0
  9. package/plugin/react/Routing.tsx +117 -24
  10. package/plugin/routes/Docs.astro +1 -0
  11. package/stl-docs/components/Header.astro +3 -6
  12. package/stl-docs/components/PageTitle.astro +1 -1
  13. package/stl-docs/components/ThemeSelect.astro +41 -32
  14. package/stl-docs/components/content-panel/ContentPanel.astro +0 -3
  15. package/stl-docs/components/headers/SplashMobileMenuToggle.astro +5 -8
  16. package/stl-docs/components/icons/chat-gpt.tsx +1 -1
  17. package/stl-docs/components/icons/cursor.tsx +1 -1
  18. package/stl-docs/components/icons/markdown.tsx +1 -1
  19. package/stl-docs/components/mintlify-compat/Frame.astro +4 -4
  20. package/stl-docs/components/mintlify-compat/Step.astro +3 -3
  21. package/stl-docs/components/mintlify-compat/card.css +4 -4
  22. package/stl-docs/components/nav-tabs/NavDropdown.astro +2 -12
  23. package/stl-docs/components/nav-tabs/NavTabs.astro +1 -17
  24. package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro +1 -2
  25. package/stl-docs/components/pagination/Pagination.astro +12 -11
  26. package/stl-docs/index.ts +20 -0
  27. package/stl-docs/loadStlDocsConfig.ts +2 -0
  28. package/styles/code.css +14 -39
  29. package/styles/links.css +2 -0
  30. package/styles/method-descriptions.css +36 -0
  31. package/styles/overrides.css +26 -30
  32. package/styles/sdk_select.css +1 -1
  33. package/styles/search.css +10 -11
  34. package/styles/sidebar.css +41 -28
  35. package/styles/{variables.css → sl-variables.css} +3 -2
  36. package/styles/stldocs-variables.css +6 -0
  37. package/styles/toc.css +11 -8
  38. package/theme.css +6 -4
  39. package/virtual-module.d.ts +1 -0
  40. package/components/variables.css +0 -109
  41. package/tsconfig.tsbuildinfo +0 -1
@@ -3,7 +3,7 @@ html {
3
3
  }
4
4
 
5
5
  .site-title {
6
- color: var(--sl-color-white);
6
+ color: var(--stl-color-foreground);
7
7
 
8
8
  img {
9
9
  height: 32px;
@@ -11,50 +11,46 @@ html {
11
11
  }
12
12
  }
13
13
 
14
- /* Hide the text in the theme select dropdown */
15
- starlight-theme-select select {
16
- width: 0;
17
- overflow: hidden;
18
- }
19
-
20
- .custom-select-wrapper select {
21
- background-color: var(--sl-color-bg-ui);
22
- border: 1px solid var(--sl-color-hairline);
23
- border-radius: var(--sl-button-border-radius);
24
-
25
- &:hover {
26
- border-color: var(--sl-color-hairline-shade);
27
- }
28
- }
29
-
30
- .content-panel {
31
- border-top: 0;
32
- }
33
-
14
+ /* TODO: apply real button classes here */
34
15
  starlight-menu-button button {
35
16
  box-shadow: none;
36
- background-color: var(--sl-color-bg-ui);
37
- border: 1px solid var(--sl-color-hairline);
38
- border-radius: var(--sl-button-border-radius);
39
- height: var(--sl-button-size);
40
- width: var(--sl-button-size);
17
+ background-color: var(--stl-color-ui-background);
18
+ border: 1px solid var(--stl-color-border);
19
+ border-radius: var(--stl-ui-layout-border-radius-sml);
20
+ height: 32px;
21
+ width: 32px;
41
22
  display: flex;
42
23
  align-items: center;
43
24
  justify-content: center;
44
25
 
45
26
  &:hover {
46
- border-color: var(--sl-color-hairline-shade);
27
+ background-color: var(--stl-color-ui-background-hover);
47
28
  }
48
29
  }
49
30
 
50
31
  mobile-starlight-toc {
51
32
  nav {
52
- background-color: var(--sl-color-bg);
33
+ background-color: var(--stl-color-background);
34
+ }
35
+ .toggle {
36
+ background-color: var(--stl-color-ui-background);
37
+ border: 1px solid var(--stl-color-border);
38
+ border-radius: var(--stl-ui-layout-border-radius-sml);
39
+ &:hover {
40
+ background-color: var(--stl-color-ui-background-hover);
41
+ border-color: var(--stl-color-border); /* unchanged */
42
+ }
43
+ }
44
+ .dropdown {
45
+ background-color: var(--stl-color-background);
46
+ border-color: var(--stl-color-border-faint);
53
47
  }
54
-
55
48
  summary {
56
49
  padding: 2rem 1rem;
57
- border-bottom-color: var(--sl-color-hairline-light);
50
+ border-color: var(--stl-color-border-faint);
51
+ }
52
+ a {
53
+ border-color: var(--stl-color-border-faint);
58
54
  }
59
55
  }
60
56
 
@@ -8,6 +8,6 @@
8
8
  }
9
9
  }
10
10
  .stldocs-icon.http path {
11
- fill: var(--stldocs-color-text);
11
+ fill: var(--stl-color-foreground);
12
12
  }
13
13
  }
package/styles/search.css CHANGED
@@ -15,42 +15,41 @@ site-search {
15
15
  padding: 0;
16
16
  width: var(--sl-button-size);
17
17
  justify-content: center;
18
- background-color: var(--sl-color-bg-ui);
19
- border: 1px solid var(--sl-color-hairline);
18
+ background-color: var(--stl-color-ui-background);
19
+ border: 1px solid var(--stl-color-border);
20
20
  border-radius: var(--sl-button-border-radius);
21
21
  height: var(--sl-button-size);
22
22
 
23
23
  &:hover {
24
- border-color: var(--sl-color-hairline-shade);
25
- background: color-mix(in oklch, var(--stl-ui-foreground) 5%, var(--stl-ui-inverse-foreground));
24
+ background: var(--stl-color-ui-background-hover);
26
25
  }
27
26
 
28
27
  span {
29
- font-size: var(--sl-text-sm);
30
- color: var(--sl-color-text-secondary);
28
+ font-size: var(--stl-typography-scale-sm);
29
+ color: var(--stl-color-foreground-reduced);
31
30
  line-height: 150%;
32
31
  padding-left: var(--sl-button-icon-offset);
33
32
  padding-right: var(--sl-button-icon-offset);
34
33
  }
35
34
 
36
35
  > svg {
37
- width: var(--sl-text-sm);
38
- height: var(--sl-text-sm);
36
+ width: var(--stl-typography-scale-sm);
37
+ height: var(--stl-typography-scale-sm);
39
38
  }
40
39
  }
41
40
 
42
41
  button > kbd {
43
42
  border-radius: 0.25rem;
44
- font-size: var(--sl-text-2xs);
43
+ font-size: var(--stl-typography-scale-xs);
45
44
  gap: 0.25em;
46
45
  padding-inline: 0.375rem;
47
- background-color: var(--sl-color-gray-6);
46
+ background-color: var(--stl-color-muted-background);
48
47
  margin-right: -0.3rem;
49
48
  }
50
49
 
51
50
  kbd {
52
51
  font-family: var(--__sl-font);
53
- color: var(--sl-color-text);
52
+ color: var(--stl-color-foreground-reduced);
54
53
  }
55
54
  }
56
55
 
@@ -15,11 +15,11 @@
15
15
  --stl-sidebar-item-padding-inline: 12px;
16
16
  --stl-sidebar-item-padding-block: 6px;
17
17
  --stl-sidebar-indent: 12px;
18
- font-size: var(--stl-ui-type-scale-text-sm);
18
+ font-size: var(--stl-typography-scale-sm);
19
19
  }
20
20
 
21
21
  .sidebar-pane {
22
- border-inline-end: 1px solid var(--sl-color-hairline-light);
22
+ border-inline-end: 1px solid var(--stl-color-border-faint);
23
23
  }
24
24
 
25
25
  .sidebar-content {
@@ -60,12 +60,12 @@
60
60
  padding: var(--stl-sidebar-item-padding-block) var(--stl-sidebar-item-padding-inline);
61
61
  &:hover,
62
62
  &[aria-current='page'] {
63
- color: var(--stl-ui-foreground);
63
+ color: var(--stl-color-foreground);
64
64
  }
65
65
  }
66
66
 
67
67
  li a {
68
- color: var(--stl-ui-foreground-secondary);
68
+ color: var(--stl-color-foreground-reduced);
69
69
  font-weight: 400;
70
70
  display: flex;
71
71
  text-decoration: none;
@@ -75,7 +75,7 @@
75
75
 
76
76
  &:hover {
77
77
  text-decoration: underline;
78
- text-decoration-color: var(--stl-ui-foreground-secondary);
78
+ text-decoration-color: var(--stl-color-foreground-reduced);
79
79
  }
80
80
  &[aria-current='page'] {
81
81
  font-weight: 500;
@@ -83,7 +83,7 @@
83
83
  }
84
84
  li:has(> a:is(:hover, [aria-current='page'])),
85
85
  summary:hover {
86
- background-color: var(--stl-ui-muted-background);
86
+ background-color: var(--stl-color-background-hover);
87
87
  }
88
88
 
89
89
  /* nested list items have flat left edge */
@@ -95,10 +95,10 @@
95
95
  padding: 0;
96
96
  }
97
97
  ul ul li {
98
- border-inline-start: 1px solid var(--stl-ui-border-muted);
98
+ border-inline-start: 1px solid var(--stl-color-border-faint);
99
99
  margin-inline-start: var(--stl-sidebar-indent);
100
100
  &:has(> a[aria-current='page']) {
101
- border-inline-start: 2px solid var(--stl-ui-foreground-accent);
101
+ border-inline-start: 2px solid var(--stl-color-foreground-accent);
102
102
  & > a {
103
103
  margin-left: -1px;
104
104
  }
@@ -114,28 +114,36 @@
114
114
  }
115
115
  a[data-stldocs-method] {
116
116
  --stl-ui-sidebar-icon-size-inner: 16px;
117
- --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-swatch-gray-white);
117
+ --stl-ui-sidebar-icon-color-inverse-background: var(--stl-ui-sidebar-icon-color);
118
118
 
119
119
  &[data-stldocs-method='get'] {
120
- --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-green-base);
121
- --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-green-faint);
122
- --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-green-muted);
120
+ --stl-ui-sidebar-icon-color: var(--stl-color-green);
121
+ --stl-ui-sidebar-icon-color-border: var(--stl-color-green-border);
122
+ --stl-ui-sidebar-icon-color-background: var(--stl-color-green-muted-background);
123
+ --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-green-muted-background-hover);
124
+ --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-green-foreground);
123
125
  }
124
126
  &[data-stldocs-method='post'] {
125
- --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-blue-base);
126
- --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-blue-faint);
127
- --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-blue-muted);
127
+ --stl-ui-sidebar-icon-color: var(--stl-color-blue);
128
+ --stl-ui-sidebar-icon-color-border: var(--stl-color-blue-border);
129
+ --stl-ui-sidebar-icon-color-background: var(--stl-color-blue-muted-background);
130
+ --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-blue-muted-background-hover);
131
+ --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-blue-foreground);
128
132
  }
129
133
  &[data-stldocs-method='patch'],
130
134
  &[data-stldocs-method='put'] {
131
- --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-orange-base);
132
- --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-orange-faint);
133
- --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-orange-muted);
135
+ --stl-ui-sidebar-icon-color: var(--stl-color-orange);
136
+ --stl-ui-sidebar-icon-color-border: var(--stl-color-orange-border);
137
+ --stl-ui-sidebar-icon-color-background: var(--stl-color-orange-muted-background);
138
+ --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-orange-muted-background-hover);
139
+ --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-orange-foreground);
134
140
  }
135
141
  &[data-stldocs-method='delete'] {
136
- --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-red-base);
137
- --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-red-faint);
138
- --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-red-muted);
142
+ --stl-ui-sidebar-icon-color: var(--stl-color-red);
143
+ --stl-ui-sidebar-icon-color-border: var(--stl-color-red-border);
144
+ --stl-ui-sidebar-icon-color-background: var(--stl-color-red-muted-background);
145
+ --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-red-muted-background-hover);
146
+ --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-red-foreground);
139
147
  }
140
148
 
141
149
  &[data-stldocs-method='get'] {
@@ -153,9 +161,13 @@
153
161
 
154
162
  a[data-stldocs-resource] {
155
163
  /* not yet implemented in markup */
156
- --stl-ui-sidebar-icon-color: var(--stl-ui-foreground-muted);
157
- --stl-ui-sidebar-icon-color-faint: var(--stl-ui-muted-background);
158
- --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-inverse-foreground);
164
+ --stl-ui-sidebar-icon-color: var(--stl-color-foreground-muted);
165
+ --stl-ui-sidebar-icon-color-border: var(--stl-color-border);
166
+ --stl-ui-sidebar-icon-color-background: var(--stl-color-muted-background);
167
+ --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-muted-background-hover);
168
+ --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-inverse-background);
169
+ --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-inverse-foreground);
170
+
159
171
  --stl-ui-sidebar-icon-size-inner: 14px;
160
172
  --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>');
161
173
  }
@@ -176,8 +188,9 @@
176
188
  }
177
189
  &::before {
178
190
  border-radius: 4px;
179
- background-color: var(--stl-ui-sidebar-icon-color-faint);
191
+ background-color: var(--stl-ui-sidebar-icon-color-background);
180
192
  flex: 0 0 auto;
193
+ border: 1px solid var(--stl-ui-sidebar-icon-color-border, transparent);
181
194
  }
182
195
  /* yuck (we can clean this up once we are changing sidebar markup) */
183
196
  &::after {
@@ -194,15 +207,15 @@
194
207
 
195
208
  &:hover {
196
209
  &::before {
197
- background-color: var(--stl-ui-sidebar-icon-color-muted);
210
+ background-color: var(--stl-ui-sidebar-icon-color-background-hover);
198
211
  }
199
212
  }
200
213
  &[aria-current='page'] {
201
214
  &::before {
202
- background-color: var(--stl-ui-sidebar-icon-color);
215
+ background-color: var(--stl-ui-sidebar-icon-color-inverse-background);
203
216
  }
204
217
  &::after {
205
- background-color: var(--stl-ui-sidebar-icon-color-inverse);
218
+ background-color: var(--stl-ui-sidebar-icon-color-inverse-foreground);
206
219
  }
207
220
  }
208
221
  }
@@ -1,7 +1,6 @@
1
1
  :root {
2
2
  --sl-color-bg-table-row: #ffffff0a;
3
3
  --sl-button-border-radius: 8px;
4
- --sl-text-body-sm: 0.86rem;
5
4
  --sl-content-width: 52rem;
6
5
  --sl-nav-pad-y: 0.5rem;
7
6
  --sl-nav-height: 56px;
@@ -13,6 +12,8 @@
13
12
  --sl-menu-button-size: var(--sl-button-size);
14
13
 
15
14
  --sl-nav-gap: 0.5rem;
16
- --sl-icon-color: var(--sl-color-text);
15
+ --sl-icon-color: var(--stl-color-foreground);
17
16
  --sl-page-max-width: unset;
17
+
18
+ --sl-content-pad-x: 1rem;
18
19
  }
@@ -0,0 +1,6 @@
1
+ @import '@stainless-api/docs-ui/styles/variables.css';
2
+
3
+ :root {
4
+ --stldocs-content-width: var(--sl-content-width);
5
+ --stldocs-content-padding: var(--sl-content-pad-x);
6
+ }
package/styles/toc.css CHANGED
@@ -1,7 +1,9 @@
1
1
  .right-sidebar-panel {
2
+ font-size: var(--stl-typography-scale-sm);
3
+
2
4
  nav > ul {
3
5
  padding-top: 0;
4
- border-left: 1px solid var(--sl-color-hairline-light);
6
+ border-left: 1px solid var(--stl-color-border);
5
7
  }
6
8
 
7
9
  ul ul {
@@ -12,24 +14,25 @@
12
14
  --pad-inline: 1rem;
13
15
  font-weight: 400;
14
16
  padding-block: 0.32rem;
15
- color: var(--sl-color-text-secondary);
17
+ color: var(--stl-color-foreground-reduced);
16
18
  position: relative;
19
+ font-size: inherit;
17
20
 
18
21
  &:hover {
19
22
  text-decoration: underline;
20
- color: var(--sl-color-text);
21
- text-decoration-color: var(--sl-color-text-tertiary);
23
+ color: var(--stl-color-foreground);
24
+ text-decoration-color: var(--stl-color-foreground-reduced);
22
25
  }
23
26
 
24
27
  &[aria-current='true'] {
25
- color: var(--sl-color-text-accent);
28
+ color: var(--stl-color-foreground-accent);
26
29
 
27
30
  &::after {
28
31
  content: '';
29
32
  position: absolute;
30
33
  height: 100%;
31
34
  width: 2px;
32
- background-color: var(--sl-color-text-accent);
35
+ background-color: var(--stl-color-foreground-accent);
33
36
  left: -1px;
34
37
  top: 0;
35
38
  }
@@ -37,8 +40,8 @@
37
40
  }
38
41
 
39
42
  h2 {
40
- color: var(--stldocs-color-text-secondary);
41
- font-size: var(--stldocs-font-size-small);
43
+ color: var(--stl-color-foreground-reduced);
44
+ font-size: inherit;
42
45
  line-height: 150%;
43
46
  text-decoration: none;
44
47
  font-weight: 400;
package/theme.css CHANGED
@@ -2,7 +2,6 @@
2
2
  @layer starlight;
3
3
 
4
4
  @import './styles/fonts.css';
5
- @import './styles/variables.css';
6
5
  @import './styles/links.css';
7
6
  @import './styles/sidebar.css';
8
7
  @import './styles/search.css';
@@ -11,13 +10,16 @@
11
10
  @import './styles/overrides.css';
12
11
  @import './styles/code.css';
13
12
  @import './styles/sdk_select.css';
13
+ @import './styles/method-descriptions.css';
14
+
14
15
  @import '@stainless-api/ui-primitives/styles.css';
16
+
17
+ @import './styles/sl-variables.css';
18
+ @import '@stainless-api/ui-primitives/styles/starlight-compat.css';
15
19
  @import './styles/mintlify-compat.css';
16
20
 
21
+ @import './styles/stldocs-variables.css';
17
22
  @import '@stainless-api/docs-ui/styles/resets.css';
18
23
  @import '@stainless-api/docs-ui/styles/primitives.css';
19
24
  @import '@stainless-api/docs-ui/styles/main.css';
20
- @import '@stainless-api/docs-ui/styles/snippets.css';
21
25
  @import '@stainless-api/docs-ui/styles/search.css';
22
-
23
- @import './components/variables.css';
@@ -14,6 +14,7 @@ declare module 'virtual:stl-starlight-virtual-module' {
14
14
  export const HIGHLIGHT_THEMES: CreateShikiHighlighterOptions['themes'];
15
15
  export const CONTENT_PANEL_LAYOUT: 'double-pane' | 'single-pane';
16
16
  export const EXPERIMENTAL_COLLAPSIBLE_SNIPPETS: boolean | undefined;
17
+ export const EXPERIMENTAL_COLLAPSIBLE_METHOD_DESCRIPTIONS: boolean | undefined;
17
18
  export const PROPERTY_SETTINGS: PropertySettingsType;
18
19
  export const MIDDLEWARE: StlStarlightMiddleware;
19
20
  export const ENABLE_CONTEXT_MENU: boolean;
@@ -1,109 +0,0 @@
1
- :root {
2
- --stldocs-font: var(--sl-font, system-ui, sans-serif);
3
- --stldocs-font-mono: var(--sl-font-mono, ui-monospace, monospace);
4
-
5
- --stldocs-color-white: var(--sl-color-white);
6
- --stldocs-color-gray-1: var(--sl-color-gray-1);
7
- --stldocs-color-gray-2: var(--sl-color-gray-2);
8
- --stldocs-color-gray-3: var(--sl-color-gray-3);
9
- --stldocs-color-gray-4: var(--sl-color-gray-4);
10
- --stldocs-color-gray-5: var(--sl-color-gray-5);
11
- --stldocs-color-gray-6: var(--sl-color-gray-6);
12
- --stldocs-color-gray-7: var(--sl-color-gray-7);
13
- --stldocs-color-gray-8: var(--sl-color-gray-8);
14
- --stldocs-color-gray-9: var(--sl-color-gray-9);
15
-
16
- --stldocs-color-accent-low: var(--sl-color-accent-low);
17
- --stldocs-color-accent-high: var(--sl-color-accent-high);
18
- --stldocs-color-accent: var(--sl-color-accent);
19
- --stldocs-color-red: var(--sl-color-red);
20
-
21
- --stldocs-color-text: var(--sl-color-text);
22
- --stldocs-color-text-accent: var(--sl-color-text-accent);
23
- --stldocs-color-text-invert: var(--sl-color-text-invert);
24
- --stldocs-color-text-secondary: var(--sl-color-text-secondary);
25
- --stldocs-color-text-tertiary: var(--sl-color-text-tertiary);
26
-
27
- --stldocs-color-bg: var(--sl-color-bg);
28
- --stldocs-color-bg-nav: var(--sl-color-bg-nav);
29
- --stldocs-color-selected: var(--sl-color-gray-6);
30
- --stldocs-color-bg-ui: var(--sl-color-bg-ui);
31
-
32
- --stldocs-color-bg-inline-code: var(--sl-color-bg-inline-code);
33
- --stldocs-color-bg-accent: var(--sl-color-bg-accent);
34
- --stldocs-color-hairline: var(--sl-color-hairline);
35
- --stldocs-color-hairline-shade: var(--sl-color-hairline-shade);
36
- --stldocs-color-hairline-light: var(--sl-color-hairline-light);
37
-
38
- --stldocs-badge-default-text: var(--sl-badge-default-text);
39
- --stldocs-color-bg-inline-code-dark: var(--sl-color-bg-inline-code-dark);
40
-
41
- --stldocs-font-size-h1: var(--sl-text-h1);
42
- --stldocs-font-size-h2: var(--sl-text-h2);
43
- --stldocs-font-size-h3: var(--sl-text-h3);
44
- --stldocs-font-size-h4: var(--sl-text-h4);
45
- --stldocs-font-size-h5: var(--sl-text-h5);
46
-
47
- --stlodcs-font-size-body: var(--sl-text-body);
48
- --stldocs-font-size-small: var(--sl-text-body-sm);
49
- --stldocs-font-size-code: var(--sl-text-code);
50
-
51
- --stldocs-content-width: var(--sl-content-width);
52
- --stldocs-content-padding: var(--sl-content-pad-x);
53
-
54
- --stldocs-color-http-get-bg: var(--sl-color-green-low);
55
- --stldocs-color-http-get: var(--sl-color-green);
56
- --stldocs-color-http-put-bg: var(--sl-color-orange-low);
57
- --stldocs-color-http-put: var(--sl-color-orange);
58
- --stldocs-color-http-post-bg: var(--sl-color-blue-low);
59
- --stldocs-color-http-post: var(--sl-color-blue);
60
- --stldocs-color-http-delete-bg: var(--sl-color-red-low);
61
- --stldocs-color-http-delete: var(--sl-color-red);
62
-
63
- --stldocs-syntax-color-red: var(--sl-color-red);
64
- --stldocs-syntax-color-green: var(--sl-color-green);
65
- --stldocs-syntax-color-blue: var(--sl-color-blue);
66
- --stldocs-syntax-color-orange: var(--sl-color-orange);
67
- --stldocs-syntax-color-teal: var(--sl-color-teal);
68
- --stldocs-syntax-color-magenta: var(--sl-color-magenta);
69
- --stldocs-syntax-color-purple: var(--sl-color-purple);
70
-
71
- --stldocs-color-backdrop-overlay: var(--sl-color-backdrop-overlay);
72
- --stldocs-expander-margin-shift: 24px;
73
- --stldocs-expander-right-margin: 8px;
74
- --stldocs-font-size-body: 14px;
75
- --stldocs-font-size-body-xs: 12px;
76
- }
77
-
78
- /* These are the theme overrides - we need to come up with a good way to do this in starlight */
79
- :root {
80
- /*
81
- tmp remove the theme color in favor of the Shiki default theme background
82
- commented out values are the original values in case we want them again
83
- */
84
- /* --stldocs-color-snippet-box-bg: #272727; */
85
- --stldocs-color-snippet-box-bg: #1f1f1f;
86
- /* --stldocs-color-snippet-title-bg: #161616; */
87
- --stldocs-color-snippet-title-bg: #24292f;
88
- --stldocs-color-snippet-title-muted: #8b8b8b;
89
- --stldocs-color-snippet-title-bright: #ffffff;
90
- --stldocs-color-snippet-code-bg: #1d1d1d;
91
-
92
- --stldocs-title-padding-y: 2.5rem;
93
-
94
- --stldocs-z-index-theme-select: 1000;
95
- --sl-content-pad-x: 1rem;
96
- }
97
-
98
- :root[data-theme='light'] {
99
- --stldocs-color-snippet-box-bg: #eeeeee;
100
- /*
101
- tmp remove the theme color in favor of the Shiki default theme background
102
- commented out value is the original value in case we want it again
103
- */
104
- /* --stldocs-color-snippet-title-bg: #2a2a2a; */
105
- --stldocs-color-snippet-title-bg: #24292f;
106
- --stldocs-color-snippet-title-muted: #959595;
107
- --stldocs-color-snippet-title-bright: #000;
108
- --stldocs-color-snippet-code-bg: #383838;
109
- }