@epilot/spark-ui 1.0.0-alpha.8 → 1.0.0-alpha.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.
- package/dist/components/accordion.cjs +1 -1
- package/dist/components/accordion.d.ts +1 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/badge.cjs +2 -2
- package/dist/components/badge.cjs.map +1 -1
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/bar-chart.js +1 -1
- package/dist/components/battery-progress-row.d.cts +1 -1
- package/dist/components/battery-progress-row.d.ts +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.cjs +2 -2
- package/dist/components/button.cjs.map +1 -1
- package/dist/components/button.d.cts +2 -2
- package/dist/components/button.d.ts +3 -3
- package/dist/components/button.js +1 -1
- package/dist/components/callout.cjs +4 -4
- package/dist/components/callout.cjs.map +1 -1
- package/dist/components/callout.d.cts +7 -2
- package/dist/components/callout.d.ts +7 -2
- package/dist/components/callout.js +4 -4
- package/dist/components/callout.js.map +1 -1
- package/dist/components/card.d.ts +1 -1
- package/dist/components/checkbox.cjs +2 -2
- package/dist/components/checkbox.cjs.map +1 -1
- package/dist/components/checkbox.d.ts +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/circular-gauge.d.cts +1 -1
- package/dist/components/circular-gauge.d.ts +1 -1
- package/dist/components/device-card.d.cts +1 -1
- package/dist/components/device-card.d.ts +1 -1
- package/dist/components/energy-bar-chart.d.cts +1 -1
- package/dist/components/energy-bar-chart.d.ts +1 -1
- package/dist/components/feed-in-hero.d.cts +1 -1
- package/dist/components/feed-in-hero.d.ts +1 -1
- package/dist/components/field.cjs +3 -3
- package/dist/components/field.cjs.map +1 -1
- package/dist/components/field.d.ts +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input-group.cjs +2 -2
- package/dist/components/input-group.cjs.map +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input-otp.cjs +10 -10
- package/dist/components/input-otp.cjs.map +1 -1
- package/dist/components/input-otp.js +1 -1
- package/dist/components/input.cjs +10 -10
- package/dist/components/input.cjs.map +1 -1
- package/dist/components/input.d.ts +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/line-chart.js +1 -1
- package/dist/components/metering-row.d.cts +1 -1
- package/dist/components/metering-row.d.ts +1 -1
- package/dist/components/number-flow.d.cts +1 -1
- package/dist/components/number-flow.d.ts +1 -1
- package/dist/components/power-history-chart.js +1 -1
- package/dist/components/power-history.cjs +1 -1
- package/dist/components/power-history.js +1 -1
- package/dist/components/power-network.cjs +1 -1
- package/dist/components/power-network.js +1 -1
- package/dist/components/radio.cjs +3 -3
- package/dist/components/radio.cjs.map +1 -1
- package/dist/components/radio.d.ts +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/sankey-chart.d.cts +1 -1
- package/dist/components/sankey-chart.d.ts +1 -1
- package/dist/components/segmented-control.d.ts +1 -1
- package/dist/components/select.cjs +2 -2
- package/dist/components/select.cjs.map +1 -1
- package/dist/components/select.d.ts +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/switch.cjs +2 -2
- package/dist/components/switch.cjs.map +1 -1
- package/dist/components/switch.d.ts +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/theme.cjs +119 -3
- package/dist/components/theme.cjs.map +1 -0
- package/dist/components/theme.d.cts +1 -3
- package/dist/components/theme.d.ts +2 -4
- package/dist/components/theme.js +115 -1
- package/dist/components/theme.js.map +1 -0
- package/dist/components/toast.cjs +158 -65
- package/dist/components/toast.cjs.map +1 -1
- package/dist/components/toast.d.cts +51 -9
- package/dist/components/toast.d.ts +51 -9
- package/dist/components/toast.js +158 -65
- package/dist/components/toast.js.map +1 -1
- package/dist/generate-radix-colors-BW09KT9m.d.ts +33 -0
- package/dist/generate-radix-colors-C5mWRWnQ.d.cts +33 -0
- package/dist/{accent-colors-CjHCf8fH.cjs → lib/accent-colors.cjs} +3 -7
- package/dist/lib/accent-colors.cjs.map +1 -0
- package/dist/lib/accent-colors.d.cts +8 -0
- package/dist/lib/accent-colors.d.ts +8 -0
- package/dist/{accent-colors-Ch2J0EEY.js → lib/accent-colors.js} +2 -2
- package/dist/lib/accent-colors.js.map +1 -0
- package/dist/lib/accent-theme.cjs +130 -0
- package/dist/lib/accent-theme.cjs.map +1 -0
- package/dist/lib/accent-theme.d.cts +35 -0
- package/dist/lib/accent-theme.d.ts +35 -0
- package/dist/lib/accent-theme.js +122 -0
- package/dist/lib/accent-theme.js.map +1 -0
- package/dist/{theme-ClRJhexF.cjs → lib/generate-radix-colors.cjs} +12 -240
- package/dist/lib/generate-radix-colors.cjs.map +1 -0
- package/dist/lib/generate-radix-colors.d.cts +4 -0
- package/dist/lib/generate-radix-colors.d.ts +4 -0
- package/dist/{theme-8PDO9E0S.js → lib/generate-radix-colors.js} +8 -225
- package/dist/lib/generate-radix-colors.js.map +1 -0
- package/dist/{input-box-variants-ZCtgs-1S.cjs → lib/input-box-variants.cjs} +5 -14
- package/dist/lib/input-box-variants.cjs.map +1 -0
- package/dist/lib/input-box-variants.d.cts +10 -0
- package/dist/lib/input-box-variants.d.ts +10 -0
- package/dist/{input-box-variants-DcajYXvo.js → lib/input-box-variants.js} +3 -3
- package/dist/lib/input-box-variants.js.map +1 -0
- package/dist/lib/theme-types.cjs +1 -0
- package/dist/lib/theme-types.d.cts +4 -0
- package/dist/lib/theme-types.d.ts +4 -0
- package/dist/lib/theme-types.js +2 -0
- package/dist/lib/tones.cjs +14 -0
- package/dist/lib/tones.cjs.map +1 -0
- package/dist/{tones-PXJGlSpe.d.ts → lib/tones.d.cts} +2 -2
- package/dist/{tones-DjgKOX3s.d.cts → lib/tones.d.ts} +2 -2
- package/dist/lib/tones.js +13 -0
- package/dist/lib/tones.js.map +1 -0
- package/dist/{number-flow-DMJouddg.d.cts → number-flow-CVIvQhZn.d.cts} +1 -1
- package/dist/{number-flow-D9zsxH0-.d.ts → number-flow-DVUHTv9D.d.ts} +1 -1
- package/dist/styles/index.css +158 -0
- package/dist/{theme-types-BDdoRxXa.d.ts → theme-types-BKlzRiyw.d.ts} +1 -1
- package/package.json +18 -3
- package/dist/accent-colors-Ch2J0EEY.js.map +0 -1
- package/dist/accent-colors-CjHCf8fH.cjs.map +0 -1
- package/dist/input-box-variants-DcajYXvo.js.map +0 -1
- package/dist/input-box-variants-ZCtgs-1S.cjs.map +0 -1
- package/dist/theme-8PDO9E0S.js.map +0 -1
- package/dist/theme-ClRJhexF.cjs.map +0 -1
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn } from "./utils/cn.js";
|
|
3
|
-
import * as React$1 from "react";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { mergeProps } from "@base-ui/react/merge-props";
|
|
6
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
7
2
|
import * as RadixColors from "@radix-ui/colors";
|
|
8
3
|
import Color from "colorjs.io";
|
|
9
4
|
import BezierEasing from "bezier-easing";
|
|
@@ -346,229 +341,17 @@ function transposeProgressionStart(to, arr, curve) {
|
|
|
346
341
|
return n - (arr[0] - to) * BezierEasing(...curve)(1 - i / lastIndex);
|
|
347
342
|
});
|
|
348
343
|
}
|
|
344
|
+
function transposeProgressionEnd(to, arr, curve) {
|
|
345
|
+
return arr.map((n, i, arr) => {
|
|
346
|
+
const lastIndex = arr.length - 1;
|
|
347
|
+
return n - (arr[lastIndex] - to) * BezierEasing(...curve)(i / lastIndex);
|
|
348
|
+
});
|
|
349
|
+
}
|
|
349
350
|
function toOklchString(color) {
|
|
350
351
|
const L = +(color.coords[0] * 100).toFixed(1);
|
|
351
352
|
return color.to("oklch").toString({ precision: 4 }).replace(/(\S+)(.+)/, `oklch(${L}%$2`);
|
|
352
353
|
}
|
|
353
354
|
//#endregion
|
|
354
|
-
|
|
355
|
-
/** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */
|
|
356
|
-
const CURATED_ACCENTS = {
|
|
357
|
-
blue: RadixColors.blue.blue9,
|
|
358
|
-
indigo: RadixColors.indigo.indigo9,
|
|
359
|
-
violet: RadixColors.violet.violet9,
|
|
360
|
-
purple: RadixColors.purple.purple9,
|
|
361
|
-
cyan: RadixColors.cyan.cyan9,
|
|
362
|
-
teal: RadixColors.teal.teal9,
|
|
363
|
-
green: RadixColors.green.green9,
|
|
364
|
-
grass: RadixColors.grass.grass9,
|
|
365
|
-
orange: RadixColors.orange.orange9,
|
|
366
|
-
red: RadixColors.red.red9,
|
|
367
|
-
pink: RadixColors.pink.pink9,
|
|
368
|
-
gray: RadixColors.gray.gray9
|
|
369
|
-
};
|
|
370
|
-
/** ECP `DesignUtils` generator inputs, so a generated scale matches live portals. */
|
|
371
|
-
const DEFAULTS = {
|
|
372
|
-
light: {
|
|
373
|
-
gray: "#333333",
|
|
374
|
-
background: "#ffffff"
|
|
375
|
-
},
|
|
376
|
-
dark: {
|
|
377
|
-
gray: "#8b8d98",
|
|
378
|
-
background: "#000000"
|
|
379
|
-
}
|
|
380
|
-
};
|
|
381
|
-
/** Generate the Radix-style accent scale for one appearance from a single accent color. */
|
|
382
|
-
function generateAccentScale(accent, appearance) {
|
|
383
|
-
const scale = generateRadixColors({
|
|
384
|
-
appearance,
|
|
385
|
-
accent,
|
|
386
|
-
gray: DEFAULTS[appearance].gray,
|
|
387
|
-
background: DEFAULTS[appearance].background
|
|
388
|
-
});
|
|
389
|
-
return {
|
|
390
|
-
...scale,
|
|
391
|
-
accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),
|
|
392
|
-
accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST)
|
|
393
|
-
};
|
|
394
|
-
}
|
|
395
|
-
const MIN_TEXT_CONTRAST = 4.5;
|
|
396
|
-
const MIN_GRAPHIC_CONTRAST = 3;
|
|
397
|
-
function readableContrast(scale, min) {
|
|
398
|
-
const step9 = new Color(scale.accentScale[8]);
|
|
399
|
-
const [, chroma, hue] = step9.to("oklch").coords;
|
|
400
|
-
const tinted = (lightness) => new Color("oklch", [
|
|
401
|
-
lightness,
|
|
402
|
-
Math.max(.08 * (chroma ?? 0), .04),
|
|
403
|
-
hue ?? 0
|
|
404
|
-
]).to("srgb").toString({ format: "hex" });
|
|
405
|
-
const candidates = [
|
|
406
|
-
scale.accentContrast,
|
|
407
|
-
tinted(.25),
|
|
408
|
-
tinted(.15)
|
|
409
|
-
];
|
|
410
|
-
const ratios = candidates.map((c) => new Color(c).contrast(step9, "WCAG21"));
|
|
411
|
-
const passing = ratios.findIndex((r) => r >= min);
|
|
412
|
-
if (passing !== -1) return candidates[passing];
|
|
413
|
-
return candidates[ratios.indexOf(Math.max(...ratios))];
|
|
414
|
-
}
|
|
415
|
-
/** sRGB `--spark-*` declarations for a generated accent scale. */
|
|
416
|
-
function accentSparkVars(scale) {
|
|
417
|
-
return sparkVars(scale.accentScale, scale.accentScaleAlpha, scale.accentContrast, scale.accentOnSolid, scale.accentSurface, scale.background);
|
|
418
|
-
}
|
|
419
|
-
/** Radix's `grayColor="auto"` pairing (accent family → gray), mapped to our 6 neutrals. */
|
|
420
|
-
const NEUTRAL_BY_ACCENT = {
|
|
421
|
-
blue: "slate",
|
|
422
|
-
indigo: "slate",
|
|
423
|
-
cyan: "slate",
|
|
424
|
-
violet: "mauve",
|
|
425
|
-
purple: "mauve",
|
|
426
|
-
pink: "mauve",
|
|
427
|
-
red: "mauve",
|
|
428
|
-
teal: "sage",
|
|
429
|
-
green: "sage",
|
|
430
|
-
grass: "olive",
|
|
431
|
-
orange: "sand",
|
|
432
|
-
gray: "gray"
|
|
433
|
-
};
|
|
434
|
-
/** Radix's "auto" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */
|
|
435
|
-
function getMatchingNeutral(accent) {
|
|
436
|
-
const byName = NEUTRAL_BY_ACCENT[accent];
|
|
437
|
-
if (byName) return byName;
|
|
438
|
-
try {
|
|
439
|
-
const [, chroma, hueRaw] = new Color(accent).to("oklch").coords;
|
|
440
|
-
if (!chroma || chroma < .04) return "gray";
|
|
441
|
-
const hue = ((hueRaw ?? 0) % 360 + 360) % 360;
|
|
442
|
-
if (hue >= 300 || hue < 35) return "mauve";
|
|
443
|
-
if (hue < 115) return "sand";
|
|
444
|
-
if (hue < 145) return "olive";
|
|
445
|
-
if (hue < 200) return "sage";
|
|
446
|
-
return "slate";
|
|
447
|
-
} catch {
|
|
448
|
-
return "slate";
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
function sparkVars(steps, alpha, contrast, onSolid, surface, background) {
|
|
452
|
-
const indicator = steps[8];
|
|
453
|
-
return [
|
|
454
|
-
...steps.map((c, i) => `--spark-${i + 1}: ${c};`),
|
|
455
|
-
...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),
|
|
456
|
-
`--spark-contrast: ${contrast};`,
|
|
457
|
-
`--spark-on-solid: ${onSolid};`,
|
|
458
|
-
`--spark-surface: ${surface};`,
|
|
459
|
-
`--spark-background: ${background};`,
|
|
460
|
-
`--spark-indicator: ${indicator};`,
|
|
461
|
-
`--spark-track: ${indicator};`
|
|
462
|
-
];
|
|
463
|
-
}
|
|
464
|
-
//#endregion
|
|
465
|
-
//#region src/components/theme.tsx
|
|
466
|
-
const ThemeContext = React$1.createContext({});
|
|
467
|
-
/** Merged theme values from enclosing `<Theme>` providers. */
|
|
468
|
-
function useTheme() {
|
|
469
|
-
return React$1.useContext(ThemeContext);
|
|
470
|
-
}
|
|
471
|
-
/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
|
|
472
|
-
const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
|
|
473
|
-
const parent = useTheme();
|
|
474
|
-
const value = React$1.useMemo(() => ({
|
|
475
|
-
accentColor: accentColor ?? parent.accentColor,
|
|
476
|
-
neutralColor: neutralColor ?? parent.neutralColor,
|
|
477
|
-
radius: radius ?? parent.radius,
|
|
478
|
-
scaling: scaling ?? parent.scaling,
|
|
479
|
-
spacing: spacing ?? parent.spacing,
|
|
480
|
-
styleVariant: styleVariant ?? parent.styleVariant,
|
|
481
|
-
highContrast: highContrast ?? parent.highContrast,
|
|
482
|
-
labelPosition: labelPosition ?? parent.labelPosition,
|
|
483
|
-
inputStyle: inputStyle ?? parent.inputStyle,
|
|
484
|
-
inputColor: inputColor ?? parent.inputColor,
|
|
485
|
-
cardVariant: cardVariant ?? parent.cardVariant,
|
|
486
|
-
cardColor: cardColor ?? parent.cardColor,
|
|
487
|
-
appearance: appearance ?? parent.appearance
|
|
488
|
-
}), [
|
|
489
|
-
accentColor,
|
|
490
|
-
neutralColor,
|
|
491
|
-
radius,
|
|
492
|
-
scaling,
|
|
493
|
-
spacing,
|
|
494
|
-
styleVariant,
|
|
495
|
-
highContrast,
|
|
496
|
-
labelPosition,
|
|
497
|
-
inputStyle,
|
|
498
|
-
inputColor,
|
|
499
|
-
cardVariant,
|
|
500
|
-
cardColor,
|
|
501
|
-
appearance,
|
|
502
|
-
parent
|
|
503
|
-
]);
|
|
504
|
-
const scopeId = React$1.useId();
|
|
505
|
-
const accent = React$1.useMemo(() => {
|
|
506
|
-
const empty = {
|
|
507
|
-
inlineVars: {},
|
|
508
|
-
css: "",
|
|
509
|
-
scoped: false
|
|
510
|
-
};
|
|
511
|
-
if (!accentColor) return empty;
|
|
512
|
-
const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
|
|
513
|
-
const i = decl.indexOf(":");
|
|
514
|
-
return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
|
|
515
|
-
}));
|
|
516
|
-
try {
|
|
517
|
-
const hex = CURATED_ACCENTS[accentColor] ?? accentColor;
|
|
518
|
-
if (value.appearance) return {
|
|
519
|
-
inlineVars: toVars(accentSparkVars(generateAccentScale(hex, value.appearance))),
|
|
520
|
-
css: "",
|
|
521
|
-
scoped: false
|
|
522
|
-
};
|
|
523
|
-
const light = accentSparkVars(generateAccentScale(hex, "light"));
|
|
524
|
-
const dark = accentSparkVars(generateAccentScale(hex, "dark"));
|
|
525
|
-
const sel = `[data-spark-scope="${scopeId}"]`;
|
|
526
|
-
return {
|
|
527
|
-
inlineVars: {},
|
|
528
|
-
css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
|
|
529
|
-
scoped: true
|
|
530
|
-
};
|
|
531
|
-
} catch (error) {
|
|
532
|
-
console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
|
|
533
|
-
return empty;
|
|
534
|
-
}
|
|
535
|
-
}, [
|
|
536
|
-
accentColor,
|
|
537
|
-
value.appearance,
|
|
538
|
-
scopeId
|
|
539
|
-
]);
|
|
540
|
-
const resolvedNeutralColor = neutralColor === "auto" ? getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
|
|
541
|
-
const element = useRender({
|
|
542
|
-
defaultTagName: "div",
|
|
543
|
-
render,
|
|
544
|
-
ref,
|
|
545
|
-
props: mergeProps({
|
|
546
|
-
className: cn("spark-theme", appearance, className),
|
|
547
|
-
"data-neutral-color": resolvedNeutralColor,
|
|
548
|
-
"data-radius": radius,
|
|
549
|
-
"data-scaling": scaling,
|
|
550
|
-
"data-spacing": spacing,
|
|
551
|
-
"data-style": styleVariant,
|
|
552
|
-
"data-high-contrast": highContrast ? "" : void 0,
|
|
553
|
-
"data-label-position": labelPosition,
|
|
554
|
-
"data-input-style": inputStyle,
|
|
555
|
-
"data-input-color": inputColor,
|
|
556
|
-
"data-card-variant": cardVariant,
|
|
557
|
-
"data-card-color": cardColor === "accent" ? "accent" : void 0,
|
|
558
|
-
"data-spark-scope": accent.scoped ? scopeId : void 0,
|
|
559
|
-
style: {
|
|
560
|
-
...accent.inlineVars,
|
|
561
|
-
...style
|
|
562
|
-
},
|
|
563
|
-
children
|
|
564
|
-
}, rest)
|
|
565
|
-
});
|
|
566
|
-
return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
|
|
567
|
-
value,
|
|
568
|
-
children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
|
|
569
|
-
});
|
|
570
|
-
});
|
|
571
|
-
//#endregion
|
|
572
|
-
export { useTheme as n, Theme as t };
|
|
355
|
+
export { generateRadixColors, transposeProgressionEnd, transposeProgressionStart };
|
|
573
356
|
|
|
574
|
-
//# sourceMappingURL=
|
|
357
|
+
//# sourceMappingURL=generate-radix-colors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"generate-radix-colors.js","names":[],"sources":["../../src/lib/generate-radix-colors.tsx"],"sourcesContent":["/**\n * Vendored from Radix UI's website — components/generate-radix-colors.tsx\n * https://github.com/radix-ui/website\n *\n * MIT License — Copyright (c) 2024 WorkOS\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND. (Full text:\n * https://github.com/radix-ui/website/blob/main/LICENSE)\n *\n * Kept VERBATIM so it can be re-synced upstream (this file is excluded from the\n * formatter in vite.config.ts). Strict type-checking is skipped (upstream targets\n * a looser tsconfig with unchecked array indexing over fixed 12-step scales).\n */\n// @ts-nocheck\nimport * as RadixColors from \"@radix-ui/colors\";\nimport Color from \"colorjs.io\";\nimport BezierEasing from \"bezier-easing\";\n\ntype ArrayOf12<T> = [T, T, T, T, T, T, T, T, T, T, T, T];\nconst arrayOf12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const;\n\n// prettier-ignore\nconst grayScaleNames = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\n// prettier-ignore\nconst scaleNames = [...grayScaleNames, 'tomato', 'red', 'ruby', 'crimson', 'pink',\n'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green',\n'grass', 'brown', 'orange', 'sky', 'mint', 'lime', 'yellow', 'amber'] as const;\n\nconst lightColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst darkColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst lightGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nconst darkGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nexport const generateRadixColors = ({\n\tappearance,\n\t...args\n}: {\n\tappearance: \"light\" | \"dark\";\n\taccent: string;\n\tgray: string;\n\tbackground: string;\n}) => {\n\tconst allScales = appearance === \"light\" ? lightColors : darkColors;\n\tconst grayScales = appearance === \"light\" ? lightGrayColors : darkGrayColors;\n\tconst backgroundColor = new Color(args.background).to(\"oklch\");\n\n\tconst grayBaseColor = new Color(args.gray).to(\"oklch\");\n\tconst grayScaleColors = getScaleFromColor(grayBaseColor, grayScales, backgroundColor);\n\n\tconst accentBaseColor = new Color(args.accent).to(\"oklch\");\n\n\tlet accentScaleColors = getScaleFromColor(accentBaseColor, allScales, backgroundColor);\n\n\t// Enforce srgb for the background color\n\tconst backgroundHex = backgroundColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\t// Make sure we use the tint from the gray scale for when base is pure white or black\n\tconst accentBaseHex = accentBaseColor.to(\"srgb\").toString({ format: \"hex\" });\n\tif (accentBaseHex === \"#000\" || accentBaseHex === \"#fff\") {\n\t\taccentScaleColors = grayScaleColors.map((color) => color.clone()) as ArrayOf12<Color>;\n\t}\n\n\tconst [accent9Color, accentContrastColor] = getStep9Colors(accentScaleColors, accentBaseColor);\n\n\taccentScaleColors[8] = accent9Color;\n\taccentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]);\n\n\t// Limit saturation of the text colors\n\taccentScaleColors[10].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[10].coords[1],\n\t);\n\taccentScaleColors[11].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[11].coords[1],\n\t);\n\n\tconst accentScaleHex = accentScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleWideGamut = accentScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaHex = accentScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaWideGamutString = accentScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentContrastColorHex = accentContrastColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\tconst grayScaleHex = grayScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleWideGamut = grayScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaHex = grayScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaWideGamutString = grayScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentSurfaceHex =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.5);\n\n\tconst accentSurfaceWideGamutString =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.5);\n\n\treturn {\n\t\taccentScale: accentScaleHex,\n\t\taccentScaleAlpha: accentScaleAlphaHex,\n\t\taccentScaleWideGamut: accentScaleWideGamut,\n\t\taccentScaleAlphaWideGamut: accentScaleAlphaWideGamutString,\n\t\taccentContrast: accentContrastColorHex,\n\n\t\tgrayScale: grayScaleHex,\n\t\tgrayScaleAlpha: grayScaleAlphaHex,\n\t\tgrayScaleWideGamut: grayScaleWideGamut,\n\t\tgrayScaleAlphaWideGamut: grayScaleAlphaWideGamutString,\n\n\t\tgraySurface: appearance === \"light\" ? \"#ffffffcc\" : \"rgba(0, 0, 0, 0.05)\",\n\t\tgraySurfaceWideGamut:\n\t\t\tappearance === \"light\" ? \"color(display-p3 1 1 1 / 80%)\" : \"color(display-p3 0 0 0 / 5%)\",\n\n\t\taccentSurface: accentSurfaceHex,\n\t\taccentSurfaceWideGamut: accentSurfaceWideGamutString,\n\n\t\tbackground: backgroundHex,\n\t};\n};\n\nfunction getStep9Colors(scale: ArrayOf12<Color>, accentBaseColor: Color): [Color, Color] {\n\tconst referenceBackgroundColor = scale[0];\n\tconst distance = accentBaseColor.deltaEOK(referenceBackgroundColor) * 100;\n\n\t// If the accent base color is close to the page background color, it's likely\n\t// white on white or black on black, so we want to return something that makes sense instead\n\tif (distance < 25) {\n\t\treturn [scale[8], getTextColor(scale[8])];\n\t}\n\n\treturn [accentBaseColor, getTextColor(accentBaseColor)];\n}\n\nfunction getButtonHoverColor(source: Color, scales: ArrayOf12<Color>[]) {\n\tconst [L, C, H] = source.coords;\n\tconst newL = L > 0.4 ? L - 0.03 / (L + 0.1) : L + 0.03 / (L + 0.1);\n\tconst newC = L > 0.4 && !isNaN(H) ? C * 0.93 + 0 : C;\n\tconst buttonHoverColor = new Color(\"oklch\", [newL, newC, H]);\n\n\t// Find closest in-scale color to donate the chroma and hue.\n\t// Especially useful when the source color is pure white or black,\n\t// but the gray scale is tinted.\n\tlet closestColor = buttonHoverColor;\n\tlet minDistance = Infinity;\n\n\tscales.forEach((scale) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = buttonHoverColor.deltaEOK(color);\n\t\t\tif (distance < minDistance) {\n\t\t\t\tminDistance = distance;\n\t\t\t\tclosestColor = color;\n\t\t\t}\n\t\t}\n\t});\n\n\tbuttonHoverColor.coords[1] = closestColor.coords[1];\n\tbuttonHoverColor.coords[2] = closestColor.coords[2];\n\treturn buttonHoverColor;\n}\n\nfunction getScaleFromColor(\n\tsource: Color,\n\tscales: Record<string, ArrayOf12<Color>>,\n\tbackgroundColor: Color,\n) {\n\tlet allColors: { scale: string; color: Color; distance: number }[] = [];\n\n\tObject.entries(scales).forEach(([name, scale]) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = source.deltaEOK(color);\n\t\t\tallColors.push({ scale: name, distance, color });\n\t\t}\n\t});\n\n\tallColors.sort((a, b) => a.distance - b.distance);\n\n\t// Remove non-unique scales\n\tlet closestColors = allColors.filter(\n\t\t(color, i, arr) => i === arr.findIndex((value) => value.scale === color.scale),\n\t);\n\n\t// If the next two closest colors are both grays, remove the second one until it’s not a gray anymore.\n\t// This is because up next we will be comparing how close the two closest colors are to the source color,\n\t// and since the grays are all extremely close to each other, we won’t get any useful data from the second\n\t// closest color if it’s also a gray.\n\tconst grayScaleNamesStr = grayScaleNames as readonly string[];\n\tconst allAreGrays = closestColors.every((color) => grayScaleNamesStr.includes(color.scale));\n\tif (!allAreGrays && grayScaleNamesStr.includes(closestColors[0].scale)) {\n\t\twhile (grayScaleNamesStr.includes(closestColors[1].scale)) {\n\t\t\tclosestColors.splice(1, 1);\n\t\t}\n\t}\n\n\tlet colorA = closestColors[0];\n\tlet colorB = closestColors[1];\n\n\t// Light trigonometry ahead.\n\t//\n\t// We want to determine the color that is the closest to the source color. Sometimes it makes sense\n\t// to proportionally mix the two closest colors together, but sometimes it is not useful at all.\n\t// Color coords are spatial in 3D, however we can treat the data we have as a 2D projection that is good enough.\n\t//\n\t// Case 1:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where NEITHER angle A nor B are larger than 90 degrees, then we want to mix the 1st and the 2nd\n\t// closest colors in the same proportion as distances AD and BD are to each other. Mixing the two would result\n\t// in a color that would be closer to the source color than either of the two original closest colors.\n\t// Example: source color is a desaturated blue, which is between \"indigo\" and \"slate\" scales.\n\t//\n\t// C ← Source color\n\t// /|⟍\n\t// / | ⟍\n\t// b / | ⟍ a\n\t// / | ⟍\n\t// / | ⟍\n\t// A --- D -------- B\n\t// ↑\n\t// The color we want to use as the base, which is a mix of A and B.\n\t//\n\t// Case 2:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where EITHER angle A or B are larger than 90 degrees, then we don’t care about point B because it’s\n\t// directionally the same as A, as mixing A and B can’t provide us with a color that is any closer to the source.\n\t// Example: source color is a saturated blue, with \"blue\" being the closest scale, and \"indigo\" just being further.\n\t//\n\t// C ← Source color\n\t// \\⟍\n\t// \\ ⟍\n\t// \\ ⟍ a\n\t// b \\ ⟍\n\t// \\ ⟍\n\t// A ------- B\n\t// ↑\n\t// The color we want to use as the base, which is not influenced by B.\n\n\t// We’ll need all the lengths of the triangle sides, named after the angles they look at:\n\tconst a = colorB.distance;\n\tconst b = colorA.distance;\n\tconst c = colorA.color.deltaEOK(colorB.color);\n\n\t// We can get the ratios of AD to BD lengths with trigonometry using tangents,\n\t// as the ratio of the tangents of the opposite angles will match.\n\tconst cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c);\n\tconst radA = Math.acos(cosA);\n\tconst sinA = Math.sin(radA);\n\n\tconst cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c);\n\tconst radB = Math.acos(cosB);\n\tconst sinB = Math.sin(radB);\n\n\t// Tangent of angle C in the ACD triangle\n\tconst tanC1 = cosA / sinA;\n\n\t// Tangent of angle C in the BCD triangle\n\tconst tanC2 = cosB / sinB;\n\n\t// The ratio of the tangents corresponds to the ratio of the distances AD to BD\n\t// In the end, it means how much of scale B we want to mix into scale A.\n\t// If it’s \"0\" or less, this is an obtuse triangle from case 2, and we use just scale A.\n\tconst ratio = Math.max(0, tanC1 / tanC2) * 0.5;\n\n\t// The base scale is going to be a mix of the two closest scales, with the mix ratio we determined before\n\tconst scaleA = scales[colorA.scale];\n\tconst scaleB = scales[colorB.scale];\n\tconst scale = arrayOf12.map((i) =>\n\t\tnew Color(Color.mix(scaleA[i], scaleB[i], ratio)).to(\"oklch\"),\n\t) as ArrayOf12<Color>;\n\n\t// Get the closest color from the pre-mixed scale we created\n\tconst baseColor = scale.slice().sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0];\n\n\t// Note the chroma difference between the source color and the base color\n\tconst ratioC = source.coords[1] / baseColor.coords[1];\n\n\t// Modify hue and chroma of the scale to match the source color\n\tscale.forEach((color) => {\n\t\tcolor.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC);\n\t\tcolor.coords[2] = source.coords[2];\n\t});\n\n\t// Light mode\n\tif (scale[0].coords[0] > 0.5) {\n\t\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\t\tconst backgroundL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\t\tconst newLightnessScale = transposeProgressionStart(\n\t\t\tbackgroundL,\n\t\t\t// Add white as the first \"step\" of the light scale\n\t\t\t[1, ...lightnessScale],\n\t\t\tlightModeEasing,\n\t\t);\n\n\t\t// Remove the step we added\n\t\tnewLightnessScale.shift();\n\n\t\tnewLightnessScale.forEach((lightness, i) => {\n\t\t\tscale[i].coords[0] = lightness;\n\t\t});\n\n\t\treturn scale;\n\t}\n\n\t// Dark mode\n\tlet ease: typeof darkModeEasing = [...darkModeEasing];\n\tconst referenceBackgroundColorL = scale[0].coords[0];\n\tconst backgroundColorL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\n\t// If background is lighter than step 0, we want to gradually change the easing to linear\n\tconst ratioL = backgroundColorL / referenceBackgroundColorL;\n\n\tif (ratioL > 1) {\n\t\tconst maxRatio = 1.5;\n\n\t\tfor (let i = 0; i < ease.length; i++) {\n\t\t\tconst metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1));\n\t\t\tease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio));\n\t\t}\n\t}\n\n\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\tconst backgroundL = backgroundColor.coords[0];\n\tconst newLightnessScale = transposeProgressionStart(backgroundL, lightnessScale, ease);\n\n\tnewLightnessScale.forEach((lightness, i) => {\n\t\tscale[i].coords[0] = lightness;\n\t});\n\n\treturn scale;\n}\n\nfunction getTextColor(background: Color) {\n\tconst white = new Color(\"oklch\", [1, 0, 0]);\n\n\tif (Math.abs(white.contrastAPCA(background)) < 40) {\n\t\tconst [, C, H] = background.coords;\n\t\treturn new Color(\"oklch\", [0.25, Math.max(0.08 * C, 0.04), H]);\n\t}\n\n\treturn white;\n}\n\n// target = background * (1 - alpha) + foreground * alpha\n// alpha = (target - background) / (foreground - background)\n// Expects 0-1 numbers for the RGB channels\nfunction getAlphaColor(\n\ttargetRgb: number[],\n\tbackgroundRgb: number[],\n\trgbPrecision: number,\n\talphaPrecision: number,\n\ttargetAlpha?: number,\n) {\n\tconst [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision));\n\tconst [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision));\n\n\tif (\n\t\ttr === undefined ||\n\t\ttg === undefined ||\n\t\ttb === undefined ||\n\t\tbr === undefined ||\n\t\tbg === undefined ||\n\t\tbb === undefined\n\t) {\n\t\tthrow Error(\"Color is undefined\");\n\t}\n\n\t// Is the background color lighter, RGB-wise, than target color?\n\t// Decide whether we want to add as little color or as much color as possible,\n\t// darkening or lightening the background respectively.\n\t// If at least one of the bits of the target RGB value\n\t// is lighter than the background, we want to lighten it.\n\tlet desiredRgb = 0;\n\tif (tr > br) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tg > bg) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tb > bb) {\n\t\tdesiredRgb = rgbPrecision;\n\t}\n\n\tconst alphaR = (tr - br) / (desiredRgb - br);\n\tconst alphaG = (tg - bg) / (desiredRgb - bg);\n\tconst alphaB = (tb - bb) / (desiredRgb - bb);\n\n\tconst isPureGray = [alphaR, alphaG, alphaB].every((alpha) => alpha === alphaR);\n\n\t// No need for precision gymnastics with pure grays, and we can get cleaner output\n\tif (!targetAlpha && isPureGray) {\n\t\t// Convert back to 0-1 values\n\t\tconst V = desiredRgb / rgbPrecision;\n\t\treturn [V, V, V, alphaR] as const;\n\t}\n\n\tconst clampRgb = (n: number) => (isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n)));\n\tconst clampA = (n: number) => (isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n)));\n\tconst maxAlpha = targetAlpha ?? Math.max(alphaR, alphaG, alphaB);\n\n\tconst A = clampA(Math.ceil(maxAlpha * alphaPrecision)) / alphaPrecision;\n\tlet R = clampRgb(((br * (1 - A) - tr) / A) * -1);\n\tlet G = clampRgb(((bg * (1 - A) - tg) / A) * -1);\n\tlet B = clampRgb(((bb * (1 - A) - tb) / A) * -1);\n\n\tR = Math.ceil(R);\n\tG = Math.ceil(G);\n\tB = Math.ceil(B);\n\n\tconst blendedR = blendAlpha(R, A, br);\n\tconst blendedG = blendAlpha(G, A, bg);\n\tconst blendedB = blendAlpha(B, A, bb);\n\n\t// Correct for rounding errors in light mode\n\tif (desiredRgb === 0) {\n\t\tif (tr <= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg <= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb <= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Correct for rounding errors in dark mode\n\tif (desiredRgb === rgbPrecision) {\n\t\tif (tr >= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg >= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb >= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Convert back to 0-1 values\n\tR = R / rgbPrecision;\n\tG = G / rgbPrecision;\n\tB = B / rgbPrecision;\n\n\treturn [R, G, B, A] as const;\n}\n\n// Important – I empirically discovered that this rounding is how the browser actually overlays\n// transparent RGB bits over each other. It does NOT round the whole result altogether.\nfunction blendAlpha(foreground: number, alpha: number, background: number, round = true) {\n\tif (round) {\n\t\treturn Math.round(background * (1 - alpha)) + Math.round(foreground * alpha);\n\t}\n\n\treturn background * (1 - alpha) + foreground * alpha;\n}\n\nfunction getAlphaColorSrgb(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"srgb\").coords,\n\t\tnew Color(backgroundColor).to(\"srgb\").coords,\n\t\t255,\n\t\t255,\n\t\ttargetAlpha,\n\t);\n\n\treturn formatHex(new Color(\"srgb\", [r, g, b], a).toString({ format: \"hex\" }));\n}\n\nfunction getAlphaColorP3(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"p3\").coords,\n\t\tnew Color(backgroundColor).to(\"p3\").coords,\n\t\t// Not sure why, but the resulting P3 alpha colors are blended in the browser most precisely when\n\t\t// rounded to 255 integers too. Is the browser using 0-255 rather than 0-1 under the hood for P3 too?\n\t\t255,\n\t\t1000,\n\t\ttargetAlpha,\n\t);\n\n\treturn (\n\t\tnew Color(\"p3\", [r, g, b], a)\n\t\t\t.toString({ precision: 4 })\n\t\t\t// Important: in non-browser environments colorjs.io outputs a different format for some reason\n\t\t\t.replace(\"color(p3 \", \"color(display-p3 \")\n\t);\n}\n\n// Format shortform hex to longform\nfunction formatHex(str: string) {\n\tif (!str.startsWith(\"#\")) {\n\t\treturn str;\n\t}\n\n\tif (str.length === 4) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\treturn hash + r + r + g + g + b + b;\n\t}\n\n\tif (str.length === 5) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\tconst a = str.charAt(4);\n\t\treturn hash + r + r + g + g + b + b + a + a;\n\t}\n\n\treturn str;\n}\n\nconst darkModeEasing = [1, 0, 1, 0] as [number, number, number, number];\nconst lightModeEasing = [0, 2, 0, 2] as [number, number, number, number];\n\nexport function transposeProgressionStart(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[0] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(1 - i / lastIndex);\n\t});\n}\n\nexport function transposeProgressionEnd(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[lastIndex] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(i / lastIndex);\n\t});\n}\n\n// Convert to OKLCH string with percentage for the lightness channel\n// https://github.com/radix-ui/themes/issues/420\nfunction toOklchString(color: Color) {\n\tconst L = +(color.coords[0] * 100).toFixed(1);\n\treturn color\n\t\t.to(\"oklch\")\n\t\t.toString({ precision: 4 })\n\t\t.replace(/(\\S+)(.+)/, `oklch(${L}%$2`);\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
require("../chunk-aJGBMT86.cjs");
|
|
3
4
|
let cnfast = require("cnfast");
|
|
4
5
|
//#region src/lib/input-box-variants.ts
|
|
5
6
|
const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
|
|
@@ -24,17 +25,7 @@ const boxChrome = {
|
|
|
24
25
|
}
|
|
25
26
|
};
|
|
26
27
|
//#endregion
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
get: function() {
|
|
30
|
-
return GHOST_UNDERLINE;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
Object.defineProperty(exports, "boxChrome", {
|
|
34
|
-
enumerable: true,
|
|
35
|
-
get: function() {
|
|
36
|
-
return boxChrome;
|
|
37
|
-
}
|
|
38
|
-
});
|
|
28
|
+
exports.GHOST_UNDERLINE = GHOST_UNDERLINE;
|
|
29
|
+
exports.boxChrome = boxChrome;
|
|
39
30
|
|
|
40
|
-
//# sourceMappingURL=input-box-variants
|
|
31
|
+
//# sourceMappingURL=input-box-variants.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-box-variants.cjs","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n 'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n 'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n 'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n SparkInputStyle,\n Record<SparkInputColor, string>\n> = {\n soft: {\n brand: cn(\n SOFT_BASE,\n 'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n ),\n gray: cn(\n SOFT_BASE,\n 'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n ),\n },\n surface: {\n brand: cn(\n BORDERED,\n 'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n ),\n gray: cn(\n BORDERED,\n 'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n ),\n },\n outlined: {\n brand: cn(\n BORDERED,\n 'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n ),\n gray: cn(\n BORDERED,\n 'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n ),\n },\n ghost: {\n brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n },\n}\n"],"mappings":";;;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,OAAA,IACE,WACA,uFACD;EACD,OAAA,GAAA,OAAA,IACE,WACA,6EACD;EACF;CACD,SAAS;EACP,QAAA,GAAA,OAAA,IACE,UACA,oGACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,iGACD;EACF;CACD,UAAU;EACR,QAAA,GAAA,OAAA,IACE,UACA,6EACD;EACD,OAAA,GAAA,OAAA,IACE,UACA,4EACD;EACF;CACD,OAAO;EACL,QAAA,GAAA,OAAA,IAAU,iBAAiB,iBAAiB;EAC5C,OAAA,GAAA,OAAA,IAAS,iBAAiB,sBAAsB;EACjD;CACF"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-BwSJKdsB.cjs";
|
|
4
|
+
|
|
5
|
+
//#region src/lib/input-box-variants.d.ts
|
|
6
|
+
declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
|
|
7
|
+
declare const boxChrome: Record<SparkInputStyle, Record<SparkInputColor, string>>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { GHOST_UNDERLINE, boxChrome };
|
|
10
|
+
//# sourceMappingURL=input-box-variants.d.cts.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { i as SparkInputStyle, r as SparkInputColor } from "../theme-types-BKlzRiyw.js";
|
|
4
|
+
|
|
5
|
+
//#region src/lib/input-box-variants.d.ts
|
|
6
|
+
declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
|
|
7
|
+
declare const boxChrome: Record<SparkInputStyle, Record<SparkInputColor, string>>;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { GHOST_UNDERLINE, boxChrome };
|
|
10
|
+
//# sourceMappingURL=input-box-variants.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn } from "
|
|
2
|
+
import { cn } from "../utils/cn.js";
|
|
3
3
|
//#region src/lib/input-box-variants.ts
|
|
4
4
|
const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
|
|
5
5
|
const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8";
|
|
@@ -23,6 +23,6 @@ const boxChrome = {
|
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
//#endregion
|
|
26
|
-
export {
|
|
26
|
+
export { GHOST_UNDERLINE, boxChrome };
|
|
27
27
|
|
|
28
|
-
//# sourceMappingURL=input-box-variants
|
|
28
|
+
//# sourceMappingURL=input-box-variants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-box-variants.js","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n 'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n 'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n 'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n SparkInputStyle,\n Record<SparkInputColor, string>\n> = {\n soft: {\n brand: cn(\n SOFT_BASE,\n 'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n ),\n gray: cn(\n SOFT_BASE,\n 'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n ),\n },\n surface: {\n brand: cn(\n BORDERED,\n 'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n ),\n gray: cn(\n BORDERED,\n 'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n ),\n },\n outlined: {\n brand: cn(\n BORDERED,\n 'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n ),\n gray: cn(\n BORDERED,\n 'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n ),\n },\n ghost: {\n brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,uFACD;EACD,MAAM,GACJ,WACA,6EACD;EACF;CACD,SAAS;EACP,OAAO,GACL,UACA,oGACD;EACD,MAAM,GACJ,UACA,iGACD;EACF;CACD,UAAU;EACR,OAAO,GACL,UACA,6EACD;EACD,MAAM,GACJ,UACA,4EACD;EACF;CACD,OAAO;EACL,OAAO,GAAG,iBAAiB,iBAAiB;EAC5C,MAAM,GAAG,iBAAiB,sBAAsB;EACjD;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
|
|
4
|
+
export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { a as SparkLabelPosition, c as SparkScaling, i as SparkInputStyle, l as SparkSpacing, n as SparkCardVariant, o as SparkNeutral, r as SparkInputColor, s as SparkRadius, t as SparkCardColor, u as SparkStyle } from "../theme-types-BKlzRiyw.js";
|
|
4
|
+
export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
//#region src/lib/tones.ts
|
|
4
|
+
const TONES = [
|
|
5
|
+
"success",
|
|
6
|
+
"warning",
|
|
7
|
+
"error",
|
|
8
|
+
"neutral",
|
|
9
|
+
"accent"
|
|
10
|
+
];
|
|
11
|
+
//#endregion
|
|
12
|
+
exports.TONES = TONES;
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=tones.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tones.cjs","names":[],"sources":["../../src/lib/tones.ts"],"sourcesContent":["const TONES = ['success', 'warning', 'error', 'neutral', 'accent'] as const\ntype Tone = (typeof TONES)[number]\n\nexport { TONES, type Tone }\n"],"mappings":";;;AAAA,MAAM,QAAQ;CAAC;CAAW;CAAW;CAAS;CAAW;CAAS"}
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
declare const TONES: readonly ["success", "warning", "error", "neutral", "accent"];
|
|
5
5
|
type Tone = (typeof TONES)[number];
|
|
6
6
|
//#endregion
|
|
7
|
-
export {
|
|
8
|
-
//# sourceMappingURL=tones
|
|
7
|
+
export { TONES, type Tone };
|
|
8
|
+
//# sourceMappingURL=tones.d.cts.map
|
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
declare const TONES: readonly ["success", "warning", "error", "neutral", "accent"];
|
|
5
5
|
type Tone = (typeof TONES)[number];
|
|
6
6
|
//#endregion
|
|
7
|
-
export {
|
|
8
|
-
//# sourceMappingURL=tones
|
|
7
|
+
export { TONES, type Tone };
|
|
8
|
+
//# sourceMappingURL=tones.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tones.js","names":[],"sources":["../../src/lib/tones.ts"],"sourcesContent":["const TONES = ['success', 'warning', 'error', 'neutral', 'accent'] as const\ntype Tone = (typeof TONES)[number]\n\nexport { TONES, type Tone }\n"],"mappings":";;AAAA,MAAM,QAAQ;CAAC;CAAW;CAAW;CAAS;CAAW;CAAS"}
|
|
@@ -12,4 +12,4 @@ declare function NumberFlow({
|
|
|
12
12
|
}: NumberFlowProps): _$react_jsx_runtime0.JSX.Element;
|
|
13
13
|
//#endregion
|
|
14
14
|
export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
|
|
15
|
-
//# sourceMappingURL=number-flow-
|
|
15
|
+
//# sourceMappingURL=number-flow-CVIvQhZn.d.cts.map
|
|
@@ -12,4 +12,4 @@ declare function NumberFlow({
|
|
|
12
12
|
}: NumberFlowProps): _$react_jsx_runtime0.JSX.Element;
|
|
13
13
|
//#endregion
|
|
14
14
|
export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
|
|
15
|
-
//# sourceMappingURL=number-flow-
|
|
15
|
+
//# sourceMappingURL=number-flow-DVUHTv9D.d.ts.map
|