@stainless-api/ui-primitives 0.1.0-beta.0 → 0.1.0-beta.10

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 (20) hide show
  1. package/CHANGELOG.md +60 -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/DropdownButton.tsx +24 -13
  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 +33 -31
  10. package/src/index.ts +1 -1
  11. package/src/styles/layout.css +1 -1
  12. package/src/styles/scales.css +1 -1
  13. package/src/styles/starlight-compat.css +142 -107
  14. package/src/styles/swatches.css +2 -2
  15. package/src/styles/theme.css +2 -2
  16. package/src/styles/typography.css +117 -144
  17. package/src/styles.css +1 -1
  18. package/tsconfig.json +2 -6
  19. package/src/components/DetailsGroup.tsx +0 -17
  20. package/src/components/details.css +0 -126
package/src/components/button.css CHANGED
@@ -1,157 +1,187 @@
1
- @layer stl-ui {
2
- .stl-ui-button {
3
- --stl-ui-button-color: var(--stl-ui-inverse-foreground);
4
- --stl-ui-button-background-color: var(--stl-ui-inverse-background);
5
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-inverse-background) l c h / 0.9);
6
-
7
- --stl-ui-button-border-color: transparent;
8
- --stl-ui-button-border-color-hover: transparent;
9
-
10
- --stl-ui-button-height: 32px;
11
- --stl-ui-button-padding: 8px 10px;
12
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
13
- --stl-ui-button-line-height: 150%;
14
- --stl-ui-button-font-weight: 500;
15
- --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
16
- --stl-ui-button-font-family: var(--stl-ui-typography-font);
17
-
18
- cursor: pointer;
19
- display: inline-flex;
20
- align-items: center;
21
- justify-content: center;
22
- gap: 2px;
23
- white-space: nowrap;
24
- flex-shrink: 0;
25
-
26
- height: var(--stl-ui-button-height);
27
- padding: var(--stl-ui-button-padding);
28
- border-radius: var(--stl-ui-button-border-radius);
29
- line-height: var(--stl-ui-button-line-height);
30
- font-weight: var(--stl-ui-button-font-weight);
31
- font-size: var(--stl-ui-button-font-size);
32
-
33
- border: 1px solid var(--stl-ui-button-border-color);
34
- font-family: var(--stl-ui-button-font-family);
35
-
36
- color: var(--stl-ui-button-color);
37
- background-color: var(--stl-ui-button-background-color);
38
-
39
- &:hover {
40
- background-color: var(--stl-ui-button-background-color-hover);
41
- border-color: var(--stl-ui-button-border-color-hover);
42
- }
1
+ .stl-ui-button {
2
+ --stl-ui-button-color: var(--stl-ui-inverse-foreground);
3
+ --stl-ui-button-background-color: var(--stl-ui-inverse-background);
4
+ --stl-ui-button-background-color-hover: color-mix(
5
+ in oklch,
6
+ var(--stl-ui-inverse-background) 90%,
7
+ var(--stl-ui-background)
8
+ );
9
+
10
+ --stl-ui-button-border-color: transparent;
11
+ --stl-ui-button-border-color-hover: transparent;
12
+
13
+ --stl-ui-button-height: 32px;
14
+ --stl-ui-button-padding: 8px 10px;
15
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
16
+ --stl-ui-button-line-height: 150%;
17
+ --stl-ui-button-font-weight: 500;
18
+ --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
19
+ --stl-ui-button-font-family: var(--stl-ui-typography-font);
20
+
21
+ cursor: pointer;
22
+ display: inline-flex;
23
+ align-items: center;
24
+ justify-content: center;
25
+ gap: 2px;
26
+ white-space: nowrap;
27
+ flex-shrink: 0;
28
+
29
+ height: var(--stl-ui-button-height);
30
+ padding: var(--stl-ui-button-padding);
31
+ border-radius: var(--stl-ui-button-border-radius);
32
+ line-height: var(--stl-ui-button-line-height);
33
+ font-weight: var(--stl-ui-button-font-weight);
34
+ font-size: var(--stl-ui-button-font-size);
35
+
36
+ border: 1px solid var(--stl-ui-button-border-color);
37
+ font-family: var(--stl-ui-button-font-family);
38
+
39
+ color: var(--stl-ui-button-color);
40
+ background-color: var(--stl-ui-button-background-color);
41
+
42
+ &:hover {
43
+ background-color: var(--stl-ui-button-background-color-hover);
44
+ border-color: var(--stl-ui-button-border-color-hover);
43
45
  }
46
+ }
44
47
 
45
- /* --- COLOR VARIANTS --- */
46
- .stl-ui-button--accent {
47
- --stl-ui-button-color: var(--stl-ui-accent-foreground);
48
- --stl-ui-button-background-color: var(--stl-ui-accent-background);
49
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.9);
50
- }
48
+ /* --- COLOR VARIANTS --- */
49
+ .stl-ui-button--accent {
50
+ --stl-ui-button-color: var(--stl-ui-accent-foreground);
51
+ --stl-ui-button-background-color: var(--stl-ui-accent-background);
52
+ --stl-ui-button-background-color-hover: color-mix(
53
+ in oklch,
54
+ var(--stl-ui-accent-background) 90%,
55
+ var(--stl-ui-inverse-foreground)
56
+ );
57
+ }
51
58
 
52
- .stl-ui-button--accent-muted {
53
- --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
54
- --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
55
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.1);
56
- }
59
+ .stl-ui-button--accent-muted {
60
+ --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
61
+ --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
62
+ --stl-ui-button-background-color-hover: color-mix(
63
+ in oklch,
64
+ var(--stl-ui-accent-background) 10%,
65
+ var(--stl-ui-inverse-foreground)
66
+ );
67
+ }
57
68
 
58
- .stl-ui-button--muted {
59
- --stl-ui-button-color: var(--stl-ui-foreground);
60
- --stl-ui-button-background-color: var(--stl-ui-muted-background);
61
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.1);
62
- }
69
+ .stl-ui-button--muted {
70
+ --stl-ui-button-color: var(--stl-ui-foreground);
71
+ --stl-ui-button-background-color: var(--stl-ui-muted-background);
72
+ --stl-ui-button-background-color-hover: color-mix(
73
+ in oklch,
74
+ var(--stl-ui-foreground) 10%,
75
+ var(--stl-ui-inverse-foreground)
76
+ );
77
+ }
63
78
 
64
- .stl-ui-button--outline {
65
- --stl-ui-button-color: var(--stl-ui-foreground);
66
- --stl-ui-button-background-color: var(--stl-ui-card-background);
67
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
68
- --stl-ui-button-border-color: var(--stl-ui-border);
69
- --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
70
- }
79
+ .stl-ui-button--outline {
80
+ --stl-ui-button-color: var(--stl-ui-foreground);
81
+ --stl-ui-button-background-color: var(--stl-ui-card-background);
82
+ --stl-ui-button-background-color-hover: color-mix(
83
+ in oklch,
84
+ var(--stl-ui-foreground) 5%,
85
+ var(--stl-ui-inverse-foreground)
86
+ );
87
+ --stl-ui-button-border-color: var(--stl-ui-border);
88
+ --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
89
+ }
71
90
 
72
- .stl-ui-button--ghost {
73
- --stl-ui-button-color: var(--stl-ui-foreground);
74
- --stl-ui-button-background-color: transparent;
75
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
76
- }
91
+ .stl-ui-button--ghost {
92
+ --stl-ui-button-color: var(--stl-ui-foreground);
93
+ --stl-ui-button-background-color: transparent;
94
+ --stl-ui-button-background-color-hover: color-mix(
95
+ in oklch,
96
+ var(--stl-ui-foreground) 5%,
97
+ var(--stl-ui-inverse-foreground)
98
+ );
99
+ }
77
100
 
78
- .stl-ui-button--success {
79
- --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
80
- --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
81
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-green-base) l c h / 0.9);
82
- }
101
+ .stl-ui-button--success {
102
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
103
+ --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
104
+ --stl-ui-button-background-color-hover: color-mix(
105
+ in oklch,
106
+ var(--stl-ui-swatch-green-base) 90%,
107
+ var(--stl-ui-inverse-foreground)
108
+ );
109
+ }
83
110
 
84
- .stl-ui-button--destructive {
85
- --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
86
- --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
87
- --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-red-base) l c h / 0.9);
88
- }
111
+ .stl-ui-button--destructive {
112
+ --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
113
+ --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
114
+ --stl-ui-button-background-color-hover: color-mix(
115
+ in oklch,
116
+ var(--stl-ui-swatch-red-base) 90%,
117
+ var(--stl-ui-inverse-foreground)
118
+ );
119
+ }
89
120
 
90
- /* --- SIZE VARIANTS --- */
91
- .stl-ui-button--size-sm {
92
- --stl-ui-button-height: 24px;
93
- --stl-ui-button-padding: 0 6px;
94
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
95
- --stl-ui-button-line-height: 100%;
96
- --stl-ui-button-font-weight: 500;
97
- --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
98
- }
121
+ /* --- SIZE VARIANTS --- */
122
+ .stl-ui-button--size-sm {
123
+ --stl-ui-button-height: 24px;
124
+ --stl-ui-button-padding: 0 6px;
125
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
126
+ --stl-ui-button-line-height: 100%;
127
+ --stl-ui-button-font-weight: 500;
128
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
129
+ }
99
130
 
100
- .stl-ui-button--size-lg {
101
- --stl-ui-button-height: 40px;
102
- --stl-ui-button-padding: 8px 14px;
103
- --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
104
- --stl-ui-button-line-height: 150%;
105
- --stl-ui-button-font-weight: 500;
106
- --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
107
- }
131
+ .stl-ui-button--size-lg {
132
+ --stl-ui-button-height: 40px;
133
+ --stl-ui-button-padding: 8px 14px;
134
+ --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
135
+ --stl-ui-button-line-height: 150%;
136
+ --stl-ui-button-font-weight: 500;
137
+ --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
138
+ }
108
139
 
109
- /* --- ICONS --- */
110
- .stl-ui-button__icon {
111
- flex-shrink: 0;
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
-
116
- svg {
117
- margin-top: 0;
118
- }
119
- }
140
+ /* --- ICONS --- */
141
+ .stl-ui-button__icon {
142
+ flex-shrink: 0;
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
120
146
 
121
- /* Left Icon */
122
- .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
123
- margin-left: -4px;
124
- margin-right: 4px;
147
+ svg {
148
+ margin-top: 0;
125
149
  }
150
+ }
126
151
 
127
- .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
128
- /* Right Icon */
129
- margin-right: -4px;
130
- margin-left: 4px;
152
+ /* Left Icon */
153
+ .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
154
+ margin-left: -4px;
155
+ margin-right: 4px;
156
+ }
157
+
158
+ .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
159
+ /* Right Icon */
160
+ margin-right: -4px;
161
+ margin-left: 4px;
131
162
 
132
- /* Right & Left Icon */
133
- &:first-child {
134
- margin-left: -4px;
135
- margin-right: 4px;
136
- }
163
+ /* Right & Left Icon */
164
+ &:first-child {
165
+ margin-left: -4px;
166
+ margin-right: 4px;
137
167
  }
168
+ }
138
169
 
139
- /* Only Icon */
140
- .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
141
- .stl-ui-button__icon:first-child
142
- ) {
143
- width: var(--stl-ui-button-height);
170
+ /* Only Icon */
171
+ .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
172
+ .stl-ui-button__icon:first-child
173
+ ) {
174
+ width: var(--stl-ui-button-height);
144
175
 
145
- .stl-ui-button__icon {
146
- margin-left: -4px;
147
- margin-right: -4px;
148
- }
176
+ .stl-ui-button__icon {
177
+ margin-left: -4px;
178
+ margin-right: -4px;
149
179
  }
180
+ }
150
181
 
151
- /* --- LINKS --- */
182
+ /* --- LINKS --- */
152
183
 
153
- a.stl-ui-button {
154
- text-decoration: none;
155
- text-align: center;
156
- }
184
+ a.stl-ui-button {
185
+ text-decoration: none;
186
+ text-align: center;
157
187
  }
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;
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);