@stainless-api/ui-primitives 0.1.0-beta.29 → 0.1.0-beta.30

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 (8) hide show
  1. package/dist/{Accordion-CvvTR8p8.d.ts → Accordion-X9MBt29l.d.ts} +4 -4
  2. package/dist/{Callout-Desqa2PM.d.ts → Callout-DlwbfFHm.d.ts} +2 -2
  3. package/dist/components/Accordion.d.ts +1 -1
  4. package/dist/components/Callout.d.ts +1 -1
  5. package/dist/index.d.ts +2 -2
  6. package/dist/styles/starlight-compat.css +3 -3
  7. package/dist/styles.css +146 -124
  8. package/package.json +1 -1
package/dist/{Accordion-CvvTR8p8.d.ts → Accordion-X9MBt29l.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import * as react_jsx_runtime3 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/Accordion.d.ts
5
5
  type AccordionProps = React.ComponentProps<'details'>;
@@ -7,7 +7,7 @@ declare function Accordion({
7
7
  className,
8
8
  children,
9
9
  ...props
10
- }: AccordionProps): react_jsx_runtime3.JSX.Element;
10
+ }: AccordionProps): react_jsx_runtime2.JSX.Element;
11
11
  declare namespace Accordion {
12
12
  var Summary: typeof AccordionSummary;
13
13
  var Group: typeof AccordionGroup;
@@ -16,11 +16,11 @@ declare function AccordionSummary({
16
16
  children,
17
17
  className,
18
18
  ...props
19
- }: React.ComponentProps<'summary'>): react_jsx_runtime3.JSX.Element;
19
+ }: React.ComponentProps<'summary'>): react_jsx_runtime2.JSX.Element;
20
20
  declare function AccordionGroup({
21
21
  className,
22
22
  children,
23
23
  ...props
24
- }: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
24
+ }: React.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
25
25
  //#endregion
26
26
  export { AccordionProps as n, Accordion as t };
package/dist/{Callout-Desqa2PM.d.ts → Callout-DlwbfFHm.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import * as react_jsx_runtime0 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime5 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/Callout.d.ts
5
5
  type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
@@ -13,6 +13,6 @@ declare function Callout({
13
13
  className,
14
14
  children,
15
15
  ...props
16
- }: CalloutProps): react_jsx_runtime0.JSX.Element;
16
+ }: CalloutProps): react_jsx_runtime5.JSX.Element;
17
17
  //#endregion
18
18
  export { CalloutProps as n, CalloutVariant as r, Callout as t };
package/dist/components/Accordion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as AccordionProps, t as Accordion } from "../Accordion-CvvTR8p8.js";
1
+ import { n as AccordionProps, t as Accordion } from "../Accordion-X9MBt29l.js";
2
2
  export { Accordion, AccordionProps };
package/dist/components/Callout.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-Desqa2PM.js";
1
+ import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-DlwbfFHm.js";
2
2
  export { Callout, CalloutProps, CalloutVariant };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { n as AccordionProps, t as Accordion } from "./Accordion-CvvTR8p8.js";
1
+ import { n as AccordionProps, t as Accordion } from "./Accordion-X9MBt29l.js";
2
2
  import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-DMtVJEuK.js";
3
- import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-Desqa2PM.js";
3
+ import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-DlwbfFHm.js";
4
4
  import * as react3 from "react";
5
5
  import { ComponentProps } from "react";
6
6
  import * as react_jsx_runtime21 from "react/jsx-runtime";
package/dist/styles/starlight-compat.css CHANGED
@@ -22,12 +22,12 @@
22
22
  --sl-color-bg-ui: var(--stl-color-ui-background);
23
23
  --sl-color-bg-nav: var(--stl-color-background);
24
24
  --sl-color-bg-inline-code: var(--stl-color-muted-background);
25
- --sl-color-bg-accent: var(--stl-color-accent-background);
25
+ --sl-color-bg-accent: var(--stl-color-accent-inverse-background);
26
26
 
27
27
  --sl-color-text: var(--stl-color-foreground);
28
28
  --sl-color-text-secondary: var(--stl-color-foreground-reduced);
29
29
  --sl-color-text-tertiary: var(--stl-color-foreground-muted);
30
- --sl-color-text-accent: var(--stl-color-foreground-accent);
30
+ --sl-color-text-accent: var(--stl-color-accent-foreground);
31
31
  --sl-color-hairline: var(--stl-color-border);
32
32
  --sl-color-hairline-light: var(--stl-color-border-faint);
33
33
  --sl-color-hairline-shade: var(--stl-color-border-strong);
@@ -125,7 +125,7 @@
125
125
  color: var(--stl-color-foreground);
126
126
 
127
127
  &[aria-selected='true'] {
128
- color: var(--stl-color-foreground-accent);
128
+ color: var(--stl-color-accent-foreground);
129
129
  font-weight: normal;
130
130
  }
131
131
  }
package/dist/styles.css CHANGED
@@ -209,6 +209,7 @@ body {
209
209
  }
210
210
  }
211
211
 
212
+ /* 1. Base colors */
212
213
  @layer stl-ui.tokens {
213
214
  :root {
214
215
  --stl-opacity-level-080: 0.80;
@@ -218,18 +219,23 @@ body {
218
219
  --stl-opacity-level-004: 0.04;
219
220
  /* background */
220
221
  --stl-color-background: light-dark(rgb(255 255 255), rgb(10 10 10));
221
- --stl-color-background-hover: light-dark(
222
- rgb(from var(--stl-color-foreground) r g b / var(--stl-opacity-level-004)),
223
- rgb(from var(--stl-color-foreground) r g b / var(--stl-opacity-level-008))
224
- );
222
+ --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
225
223
  /* background shades */
226
- --stl-color-muted-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008)));
227
- --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/var(--stl-opacity-level-016));
228
- --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
229
- --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/var(--stl-opacity-level-008));
230
- /* ui elements like cards and buttons have faint-background in dark mode */
231
- --stl-color-ui-background: light-dark(var(--stl-color-background), var(--stl-color-faint-background));
232
- --stl-color-ui-background-hover: light-dark(var(--stl-color-background-hover), var(--stl-color-faint-background-hover));
224
+ /* muted background */
225
+ --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
226
+ --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
227
+ /* faint background */
228
+ --stl-color-faint-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
229
+ --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
230
+ /* ui elements like cards and buttons match --stl-color-background in light mode, but have a slight tint in dark mode */
231
+ --stl-color-ui-background: light-dark(
232
+ var(--stl-color-background),
233
+ rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)))
234
+ );
235
+ --stl-color-ui-background-hover: light-dark(
236
+ var(--stl-color-background-hover),
237
+ rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2))
238
+ );
233
239
  /* foreground */
234
240
  --stl-color-foreground: light-dark(rgb(38 38 38), rgb(245 245 245));
235
241
  --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
@@ -240,116 +246,130 @@ body {
240
246
  --stl-color-inverse-foreground: var(--stl-color-background);
241
247
  /* default border (“foreground border”) */
242
248
  --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
243
- --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/var(--stl-opacity-level-008));
244
- --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/var(--stl-opacity-level-040));
249
+ --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * 0.5));
250
+ --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
251
+ }
252
+ }
253
+ /* 2. Color palettes (accent, red, green, etc) */
254
+ @layer stl-ui.tokens {
255
+ :root {
245
256
  /* accent */
246
257
  --stl-color-accent: light-dark(#155dfc, #2b7fff);
247
- --stl-color-foreground-accent: var(--stl-color-accent);
248
- --stl-color-accent-background: var(--stl-color-accent);
249
- --stl-color-accent-background-hover: rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-080)));
250
- --stl-color-accent-foreground: rgb(255, 255, 255);
251
- --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))));
258
+ --stl-color-accent-foreground: var(--stl-color-accent);
259
+ --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
260
+ --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
261
+ --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
252
262
  --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
253
- --stl-color-accent-muted-foreground: var(--stl-color-foreground-accent);
254
- --stl-color-accent-border: rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016)));
255
- --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/var(--stl-opacity-level-008));
256
- --stl-color-accent-border-strong: rgb(from var(--stl-color-accent) r g b/1);
263
+ --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
264
+ --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * 0.5));
265
+ --stl-color-accent-border-strong: var(--stl-color-accent);
266
+ --stl-color-accent-inverse-background: var(--stl-color-accent);
267
+ --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-080)));
268
+ --stl-color-accent-inverse-foreground: rgb(255, 255, 255);
257
269
  /* red */
258
- --stl-color-red: light-dark(#D01E22, #E34041);
259
- --stl-color-foreground-red: var(--stl-color-red);
260
- --stl-color-red-background: var(--stl-color-red);
261
- --stl-color-red-background-hover: rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-080)));
262
- --stl-color-red-foreground: rgb(255, 255, 255);
263
- --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))));
270
+ --stl-color-red: light-dark(#d01e22, #e34041);
271
+ --stl-color-red-foreground: var(--stl-color-red);
272
+ --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
273
+ --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
274
+ --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
264
275
  --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
265
- --stl-color-red-muted-foreground: var(--stl-color-foreground-red);
266
- --stl-color-red-border: rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016)));
267
- --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/var(--stl-opacity-level-008));
268
- --stl-color-red-border-strong: rgb(from var(--stl-color-red) r g b/1);
276
+ --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
277
+ --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * 0.5));
278
+ --stl-color-red-border-strong: var(--stl-color-red);
279
+ --stl-color-red-inverse-background: var(--stl-color-red);
280
+ --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-080)));
281
+ --stl-color-red-inverse-foreground: rgb(255, 255, 255);
269
282
  /* green */
270
- --stl-color-green: light-dark(#16A34A, #22C55E);
271
- --stl-color-foreground-green: var(--stl-color-green);
272
- --stl-color-green-background: var(--stl-color-green);
273
- --stl-color-green-background-hover: rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-080)));
274
- --stl-color-green-foreground: rgb(255, 255, 255);
275
- --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))));
283
+ --stl-color-green: light-dark(#16a34a, #22c55e);
284
+ --stl-color-green-foreground: var(--stl-color-green);
285
+ --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
286
+ --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
287
+ --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
276
288
  --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
277
- --stl-color-green-muted-foreground: var(--stl-color-foreground-green);
278
- --stl-color-green-border: rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016)));
279
- --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/var(--stl-opacity-level-008));
280
- --stl-color-green-border-strong: rgb(from var(--stl-color-green) r g b/1);
289
+ --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
290
+ --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * 0.5));
291
+ --stl-color-green-border-strong: var(--stl-color-green);
292
+ --stl-color-green-inverse-background: var(--stl-color-green);
293
+ --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-080)));
294
+ --stl-color-green-inverse-foreground: rgb(255, 255, 255);
281
295
  /* blue */
282
- --stl-color-blue: light-dark(#155DFC, #2B7FFF);
283
- --stl-color-foreground-blue: var(--stl-color-blue);
284
- --stl-color-blue-background: var(--stl-color-blue);
285
- --stl-color-blue-background-hover: rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-080)));
286
- --stl-color-blue-foreground: rgb(255, 255, 255);
287
- --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))));
296
+ --stl-color-blue: light-dark(#155dfc, #2b7fff);
297
+ --stl-color-blue-foreground: var(--stl-color-blue);
298
+ --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
299
+ --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
300
+ --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
288
301
  --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
289
- --stl-color-blue-muted-foreground: var(--stl-color-foreground-blue);
290
- --stl-color-blue-border: rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016)));
291
- --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/var(--stl-opacity-level-008));
292
- --stl-color-blue-border-strong: rgb(from var(--stl-color-blue) r g b/1);
302
+ --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
303
+ --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * 0.5));
304
+ --stl-color-blue-border-strong: var(--stl-color-blue);
305
+ --stl-color-blue-inverse-background: var(--stl-color-blue);
306
+ --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-080)));
307
+ --stl-color-blue-inverse-foreground: rgb(255, 255, 255);
293
308
  /* orange */
294
- --stl-color-orange: light-dark(#EA580C, #F97316);
295
- --stl-color-foreground-orange: var(--stl-color-orange);
296
- --stl-color-orange-background: var(--stl-color-orange);
297
- --stl-color-orange-background-hover: rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-080)));
298
- --stl-color-orange-foreground: rgb(255, 255, 255);
299
- --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))));
309
+ --stl-color-orange: light-dark(#ea580c, #f97316);
310
+ --stl-color-orange-foreground: var(--stl-color-orange);
311
+ --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
312
+ --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
313
+ --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
300
314
  --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
301
- --stl-color-orange-muted-foreground: var(--stl-color-foreground-orange);
302
- --stl-color-orange-border: rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016)));
303
- --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/var(--stl-opacity-level-008));
304
- --stl-color-orange-border-strong: rgb(from var(--stl-color-orange) r g b/1);
315
+ --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
316
+ --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * 0.5));
317
+ --stl-color-orange-border-strong: var(--stl-color-orange);
318
+ --stl-color-orange-inverse-background: var(--stl-color-orange);
319
+ --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-080)));
320
+ --stl-color-orange-inverse-foreground: rgb(255, 255, 255);
305
321
  /* purple */
306
- --stl-color-purple: light-dark(#9333EA, #A855F7);
307
- --stl-color-foreground-purple: var(--stl-color-purple);
308
- --stl-color-purple-background: var(--stl-color-purple);
309
- --stl-color-purple-background-hover: rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-080)));
310
- --stl-color-purple-foreground: rgb(255, 255, 255);
311
- --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))));
322
+ --stl-color-purple: light-dark(#9333ea, #a855f7);
323
+ --stl-color-purple-foreground: var(--stl-color-purple);
324
+ --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
325
+ --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
326
+ --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
312
327
  --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
313
- --stl-color-purple-muted-foreground: var(--stl-color-foreground-purple);
314
- --stl-color-purple-border: rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016)));
315
- --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/var(--stl-opacity-level-008));
316
- --stl-color-purple-border-strong: rgb(from var(--stl-color-purple) r g b/1);
328
+ --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
329
+ --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * 0.5));
330
+ --stl-color-purple-border-strong: var(--stl-color-purple);
331
+ --stl-color-purple-inverse-background: var(--stl-color-purple);
332
+ --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-080)));
333
+ --stl-color-purple-inverse-foreground: rgb(255, 255, 255);
317
334
  /* cyan */
318
- --stl-color-cyan: light-dark(#0891B2, #06B6D4);
319
- --stl-color-foreground-cyan: var(--stl-color-cyan);
320
- --stl-color-cyan-background: var(--stl-color-cyan);
321
- --stl-color-cyan-background-hover: rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-080)));
322
- --stl-color-cyan-foreground: rgb(255, 255, 255);
323
- --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))));
335
+ --stl-color-cyan: light-dark(#0891b2, #06b6d4);
336
+ --stl-color-cyan-foreground: var(--stl-color-cyan);
337
+ --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
338
+ --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
339
+ --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
324
340
  --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
325
- --stl-color-cyan-muted-foreground: var(--stl-color-foreground-cyan);
326
- --stl-color-cyan-border: rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016)));
327
- --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/var(--stl-opacity-level-008));
328
- --stl-color-cyan-border-strong: rgb(from var(--stl-color-cyan) r g b/1);
341
+ --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
342
+ --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * 0.5));
343
+ --stl-color-cyan-border-strong: var(--stl-color-cyan);
344
+ --stl-color-cyan-inverse-background: var(--stl-color-cyan);
345
+ --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-080)));
346
+ --stl-color-cyan-inverse-foreground: rgb(255, 255, 255);
329
347
  /* pink */
330
- --stl-color-pink: light-dark(#EC4899, #EC4899);
331
- --stl-color-foreground-pink: var(--stl-color-pink);
332
- --stl-color-pink-background: var(--stl-color-pink);
333
- --stl-color-pink-background-hover: rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-080)));
334
- --stl-color-pink-foreground: rgb(255, 255, 255);
335
- --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))));
348
+ --stl-color-pink: light-dark(#ec4899, #ec4899);
349
+ --stl-color-pink-foreground: var(--stl-color-pink);
350
+ --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
351
+ --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
352
+ --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
336
353
  --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
337
- --stl-color-pink-muted-foreground: var(--stl-color-foreground-pink);
338
- --stl-color-pink-border: rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016)));
339
- --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/var(--stl-opacity-level-008));
340
- --stl-color-pink-border-strong: rgb(from var(--stl-color-pink) r g b/1);
354
+ --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
355
+ --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * 0.5));
356
+ --stl-color-pink-border-strong: var(--stl-color-pink);
357
+ --stl-color-pink-inverse-background: var(--stl-color-pink);
358
+ --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-080)));
359
+ --stl-color-pink-inverse-foreground: rgb(255, 255, 255);
341
360
  /* yellow */
342
- --stl-color-yellow: light-dark(#CA8A04, #EAB308);
343
- --stl-color-foreground-yellow: var(--stl-color-yellow);
344
- --stl-color-yellow-background: var(--stl-color-yellow);
345
- --stl-color-yellow-background-hover: rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-080)));
346
- --stl-color-yellow-foreground: rgb(255, 255, 255);
347
- --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))));
361
+ --stl-color-yellow: light-dark(#ca8a04, #eab308);
362
+ --stl-color-yellow-foreground: var(--stl-color-yellow);
363
+ --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
364
+ --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
365
+ --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
348
366
  --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
349
- --stl-color-yellow-muted-foreground: var(--stl-color-foreground-yellow);
350
- --stl-color-yellow-border: rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016)));
351
- --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/var(--stl-opacity-level-008));
352
- --stl-color-yellow-border-strong: rgb(from var(--stl-color-yellow) r g b/1);
367
+ --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
368
+ --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
369
+ --stl-color-yellow-border-strong: var(--stl-color-yellow);
370
+ --stl-color-yellow-inverse-background: var(--stl-color-yellow);
371
+ --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-080)));
372
+ --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
353
373
  }
354
374
  :root[data-theme=dark],
355
375
  .stl-theme-dark {
@@ -367,8 +387,8 @@ body {
367
387
  /* Semantic color roles */
368
388
  @layer stl-ui.tokens {
369
389
  :root {
370
- --stl-color-link-foreground: var(--stl-color-foreground-accent);
371
- --stl-color-text-selection: var(--stl-color-accent-background);
390
+ --stl-color-link-foreground: var(--stl-color-accent-foreground);
391
+ --stl-color-text-selection: var(--stl-color-accent-inverse-background);
372
392
  }
373
393
  }
374
394
  .stl-ui-button {
@@ -403,15 +423,15 @@ body {
403
423
 
404
424
  /* --- COLOR VARIANTS --- */
405
425
  .stl-ui-button--accent {
406
- color: var(--stl-color-accent-foreground);
407
- background-color: var(--stl-color-accent-background);
426
+ color: var(--stl-color-accent-inverse-foreground);
427
+ background-color: var(--stl-color-accent-inverse-background);
408
428
  &:hover {
409
- background-color: var(--stl-color-accent-background-hover);
429
+ background-color: var(--stl-color-accent-inverse-background-hover);
410
430
  }
411
431
  }
412
432
 
413
433
  .stl-ui-button--accent-muted {
414
- color: var(--stl-color-accent-muted-foreground);
434
+ color: var(--stl-color-accent-foreground);
415
435
  background-color: var(--stl-color-accent-muted-background);
416
436
  &:hover {
417
437
  background-color: var(--stl-color-accent-muted-background-hover);
@@ -420,9 +440,9 @@ body {
420
440
 
421
441
  .stl-ui-button--muted {
422
442
  color: var(--stl-color-foreground);
423
- background-color: var(--stl-color-muted-background);
443
+ background-color: var(--stl-color-faint-background);
424
444
  &:hover {
425
- background-color: var(--stl-color-muted-background-hover);
445
+ background-color: var(--stl-color-faint-background-hover);
426
446
  }
427
447
  }
428
448
 
@@ -444,18 +464,18 @@ body {
444
464
  }
445
465
 
446
466
  .stl-ui-button--success {
447
- color: var(--stl-color-green-foreground);
448
- background-color: var(--stl-color-green-background);
467
+ color: var(--stl-color-green-inverse-foreground);
468
+ background-color: var(--stl-color-green-inverse-background);
449
469
  &:hover {
450
- background-color: var(--stl-color-green-background-hover);
470
+ background-color: var(--stl-color-green-inverse-background-hover);
451
471
  }
452
472
  }
453
473
 
454
474
  .stl-ui-button--destructive {
455
- color: var(--stl-color-red-foreground);
456
- background-color: var(--stl-color-red-background);
475
+ color: var(--stl-color-red-inverse-foreground);
476
+ background-color: var(--stl-color-red-inverse-background);
457
477
  &:hover {
458
- background-color: var(--stl-color-red-background-hover);
478
+ background-color: var(--stl-color-red-inverse-background-hover);
459
479
  }
460
480
  }
461
481
 
@@ -769,7 +789,7 @@ a.stl-ui-button {
769
789
  }
770
790
 
771
791
  .stl-ui-callout {
772
- --stl-ui-callout-background-color: var(--stl-color-muted-background);
792
+ --stl-ui-callout-background-color: var(--stl-color-faint-background);
773
793
  --stl-ui-callout-border-color: var(--stl-color-border);
774
794
  --stl-ui-callout-accent-color: var(--stl-color-foreground);
775
795
 
@@ -786,8 +806,10 @@ a.stl-ui-button {
786
806
  align-items: flex-start;
787
807
  gap: 8px;
788
808
 
789
- :where(a) {
809
+ :where(a, strong) {
790
810
  color: var(--stl-ui-callout-strong-color, var(--stl-ui-callout-accent-color));
811
+ }
812
+ :where(a) {
791
813
  text-decoration-color: rgba(from currentColor r g b / 0.4);
792
814
  transition: text-decoration-color 0.1s ease;
793
815
  &:hover {
@@ -805,7 +827,7 @@ a.stl-ui-button {
805
827
  }
806
828
 
807
829
  .stl-ui-callout--info {
808
- --stl-ui-callout-background-color: var(--stl-color-muted-background);
830
+ --stl-ui-callout-background-color: var(--stl-color-faint-background);
809
831
  --stl-ui-callout-border-color: var(--stl-color-border);
810
832
  --stl-ui-callout-accent-color: var(--stl-color-foreground-reduced);
811
833
  --stl-ui-callout-strong-color: var(--stl-color-foreground);
@@ -814,31 +836,31 @@ a.stl-ui-button {
814
836
  .stl-ui-callout--note {
815
837
  --stl-ui-callout-background-color: var(--stl-color-blue-muted-background);
816
838
  --stl-ui-callout-border-color: var(--stl-color-blue-border);
817
- --stl-ui-callout-accent-color: var(--stl-color-blue);
839
+ --stl-ui-callout-accent-color: var(--stl-color-blue-foreground);
818
840
  }
819
841
 
820
842
  .stl-ui-callout--tip {
821
843
  --stl-ui-callout-background-color: var(--stl-color-purple-muted-background);
822
844
  --stl-ui-callout-border-color: var(--stl-color-purple-border);
823
- --stl-ui-callout-accent-color: var(--stl-color-purple);
845
+ --stl-ui-callout-accent-color: var(--stl-color-purple-foreground);
824
846
  }
825
847
 
826
848
  .stl-ui-callout--success {
827
849
  --stl-ui-callout-background-color: var(--stl-color-green-muted-background);
828
850
  --stl-ui-callout-border-color: var(--stl-color-green-border);
829
- --stl-ui-callout-accent-color: var(--stl-color-green);
851
+ --stl-ui-callout-accent-color: var(--stl-color-green-foreground);
830
852
  }
831
853
 
832
854
  .stl-ui-callout--warning {
833
855
  --stl-ui-callout-background-color: var(--stl-color-yellow-muted-background);
834
856
  --stl-ui-callout-border-color: var(--stl-color-yellow-border);
835
- --stl-ui-callout-accent-color: var(--stl-color-yellow);
857
+ --stl-ui-callout-accent-color: var(--stl-color-yellow-foreground);
836
858
  }
837
859
 
838
860
  .stl-ui-callout--danger {
839
861
  --stl-ui-callout-background-color: var(--stl-color-red-muted-background);
840
862
  --stl-ui-callout-border-color: var(--stl-color-red-border);
841
- --stl-ui-callout-accent-color: var(--stl-color-red);
863
+ --stl-ui-callout-accent-color: var(--stl-color-red-foreground);
842
864
  }
843
865
 
844
866
  .stl-ui-callout__icon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stainless-api/ui-primitives",
3
- "version": "0.1.0-beta.29",
3
+ "version": "0.1.0-beta.30",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },