@stainless-api/ui-primitives 0.1.0-beta.8 → 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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/accordion.css +145 -0
  6. package/src/components/button.css +165 -135
  7. package/src/components/callout.css +57 -59
  8. package/src/components/dropdown-button.css +132 -145
  9. package/src/index.ts +1 -1
  10. package/src/styles/layout.css +1 -1
  11. package/src/styles/scales.css +1 -1
  12. package/src/styles/starlight-compat.css +142 -134
  13. package/src/styles/swatches.css +2 -2
  14. package/src/styles/theme.css +2 -2
  15. package/src/styles/typography.css +128 -140
  16. package/src/styles.css +1 -1
  17. package/tsconfig.json +2 -6
  18. package/src/components/DetailsGroup.tsx +0 -17
  19. package/src/components/details.css +0 -124
package/src/components/dropdown-button.css CHANGED
@@ -1,177 +1,164 @@
1
- /* revert docs-ui resets */
2
- @layer docs-ui {
3
- .stldocs-root .stl-ui-dropdown-button {
4
- all: revert-layer;
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;
5
35
 
6
- * {
7
- all: revert-layer;
36
+ &:hover {
37
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
38
+ border-color: var(--stl-ui-border-emphasis);
8
39
  }
9
40
  }
10
- }
11
41
 
12
- @layer stl-ui.components {
13
- .stl-ui-dropdown-button {
14
- --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
15
- --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
16
- --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
17
- --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
18
- --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
19
-
20
- --stl-ui-dropdown-button-height: 32px;
21
- --stl-ui-dropdown-button-padding: 8px 10px;
22
- --stl-ui-dropdown-button-line-height: 100%;
23
- --stl-ui-dropdown-button-font-weight: 500;
24
-
25
- position: relative;
26
- display: inline-flex;
42
+ .stl-ui-dropdown-button--action {
43
+ display: flex;
27
44
  align-items: center;
45
+ gap: 8px;
28
46
 
29
- background-color: var(--stl-ui-dropdown-button-background-color);
30
- border: 1px solid var(--stl-ui-dropdown-button-border-color);
31
- border-radius: var(--stl-ui-dropdown-button-border-radius);
32
- color: var(--stl-ui-dropdown-button-color);
33
- gap: 0;
34
- font-size: var(--stl-ui-dropdown-button-font-size);
35
-
36
- .stl-ui-dropdown-button__button {
37
- border: none;
38
- background: none;
39
- height: var(--stl-ui-dropdown-button-height);
40
- padding: var(--stl-ui-dropdown-button-padding);
41
- line-height: var(--stl-ui-dropdown-button-line-height);
42
- font-weight: var(--stl-ui-dropdown-button-font-weight);
43
- cursor: pointer;
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
-
48
- &:hover {
49
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
50
- border-color: var(--stl-ui-border-emphasis);
51
- }
47
+ &:hover {
48
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
49
+ border-color: var(--stl-ui-border-emphasis);
52
50
  }
53
51
 
54
- .stl-ui-dropdown-button--action {
55
- display: flex;
56
- align-items: center;
57
- gap: 8px;
58
-
59
- &:hover {
60
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
61
- border-color: var(--stl-ui-border-emphasis);
62
- }
63
-
64
- &.disabled {
65
- cursor: not-allowed;
66
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
67
- }
52
+ &.disabled {
53
+ cursor: not-allowed;
54
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
68
55
  }
56
+ }
69
57
 
70
- .stl-ui-dropdown-button__trigger {
71
- border-left: 1px solid var(--stl-ui-border);
72
- border-radius: 0;
58
+ .stl-ui-dropdown-button__trigger {
59
+ border-left: 1px solid var(--stl-ui-border);
60
+ border-radius: 0;
73
61
 
74
- &:hover {
75
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
76
- border-color: var(--stl-ui-border-emphasis);
77
- }
62
+ &:hover {
63
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
64
+ border-color: var(--stl-ui-border-emphasis);
78
65
  }
66
+ }
79
67
 
80
- .stl-ui-dropdown-button__menu {
81
- --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
82
- --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
83
- --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
84
- --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
85
-
86
- background-color: var(--stl-ui-dropdown-button__menu-background-color);
87
- border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
88
- box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
89
- border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
90
-
91
- position: absolute;
92
- top: 100%;
93
- right: 0;
94
- margin-top: 4px;
95
- z-index: 1000;
96
- min-width: 100%;
97
- padding: 4px;
98
- display: none;
99
-
100
- &[data-state='open'] {
101
- display: block;
102
- }
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;
103
90
  }
91
+ }
104
92
 
105
- .stl-ui-dropdown-button__menu-item {
106
- --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
107
- --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
108
- --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
109
- --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
110
- from var(--stl-ui-foreground) l c h / 0.05
111
- );
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;
112
111
 
113
- border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
114
- height: var(--stl-ui-dropdown-button__menu-item-height);
115
- line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
112
+ &:hover {
113
+ background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
114
+ }
116
115
 
117
- padding: 8px;
118
- cursor: pointer;
116
+ .stl-ui-dropdown-button__menu-item-content {
119
117
  display: flex;
120
118
  align-items: center;
121
- justify-content: space-between;
122
- gap: 16px;
123
-
124
- &:hover {
125
- background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
126
- }
127
-
128
- .stl-ui-dropdown-button__menu-item-content {
129
- display: flex;
130
- align-items: center;
131
- gap: 8px;
132
- }
119
+ gap: 8px;
120
+ }
133
121
 
134
- .stl-ui-dropdown-button__menu-item-text {
135
- white-space: nowrap;
136
- }
122
+ .stl-ui-dropdown-button__menu-item-text {
123
+ white-space: nowrap;
124
+ }
137
125
 
138
- .stl-ui-dropdown-button__menu-item-text--subtle {
139
- color: var(--stl-ui-foreground-muted);
140
- }
126
+ .stl-ui-dropdown-button__menu-item-text--subtle {
127
+ color: var(--stl-ui-foreground-muted);
128
+ }
141
129
 
142
- strong {
143
- color: var(--stl-ui-foreground);
144
- font-weight: 500;
145
- }
130
+ strong {
131
+ color: var(--stl-ui-foreground);
132
+ font-weight: 500;
133
+ }
146
134
 
147
- .stl-ui-dropdown-button__menu-item-icon {
148
- display: flex;
149
- align-items: center;
150
- justify-content: center;
151
- }
135
+ .stl-ui-dropdown-button__menu-item-icon {
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ }
152
140
 
153
- .stl-ui-dropdown-button__menu-item-external-link-icon {
154
- --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
155
- from var(--stl-ui-foreground) l c h / 0.25
156
- );
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
+ );
157
145
 
158
- svg {
159
- color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
160
- }
146
+ svg {
147
+ color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
161
148
  }
162
149
  }
150
+ }
163
151
 
164
- hr {
165
- --stl-ui-dropdown-button__divider-height: 1px;
166
- --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
152
+ hr {
153
+ --stl-ui-dropdown-button__divider-height: 1px;
154
+ --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
167
155
 
168
- height: var(--stl-ui-dropdown-button__divider-height);
169
- background-color: var(--stl-ui-dropdown-button__divider-color);
170
- border: none;
156
+ height: var(--stl-ui-dropdown-button__divider-height);
157
+ background-color: var(--stl-ui-dropdown-button__divider-color);
158
+ border: none;
171
159
 
172
- margin: 4px 0;
173
- width: calc(100% + 8px);
174
- transform: translateX(-4px);
175
- }
160
+ margin: 4px 0;
161
+ width: calc(100% + 8px);
162
+ transform: translateX(-4px);
176
163
  }
177
164
  }
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;
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);
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);