@epilot/spark-ui 0.11.1 → 0.12.1
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/avatar.d.cts +1 -1
- package/dist/components/avatar.d.ts +1 -1
- package/dist/components/badge.d.cts +1 -1
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/bar-chart.js +1 -1
- package/dist/components/box.cjs +3 -2
- package/dist/components/box.cjs.map +1 -1
- package/dist/components/box.d.cts +8 -1
- package/dist/components/box.d.ts +8 -1
- package/dist/components/box.js +3 -2
- package/dist/components/box.js.map +1 -1
- package/dist/components/button-group.d.cts +1 -1
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/button.d.cts +2 -2
- package/dist/components/button.d.ts +2 -2
- package/dist/components/calendar.cjs +2 -2
- package/dist/components/calendar.cjs.map +1 -1
- package/dist/components/calendar.js +2 -2
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/callout.cjs +1 -1
- package/dist/components/callout.cjs.map +1 -1
- package/dist/components/callout.d.cts +3 -3
- package/dist/components/callout.d.ts +3 -3
- package/dist/components/callout.js +1 -1
- package/dist/components/callout.js.map +1 -1
- package/dist/components/card.cjs +3 -2
- package/dist/components/card.cjs.map +1 -1
- package/dist/components/card.d.cts +7 -1
- package/dist/components/card.d.ts +7 -1
- package/dist/components/card.js +3 -2
- package/dist/components/card.js.map +1 -1
- package/dist/components/checkbox.d.cts +1 -1
- package/dist/components/checkbox.d.ts +1 -1
- package/dist/components/field.d.cts +1 -1
- package/dist/components/field.d.ts +1 -1
- package/dist/components/icon.cjs +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/input-group.cjs +1 -1
- package/dist/components/input-group.cjs.map +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/input.d.cts +1 -1
- package/dist/components/input.d.ts +1 -1
- package/dist/components/line-chart.cjs +1 -1
- package/dist/components/line-chart.js +2 -2
- package/dist/components/list.d.cts +1 -1
- package/dist/components/list.d.ts +1 -1
- package/dist/components/marker.d.cts +1 -1
- package/dist/components/marker.d.ts +1 -1
- package/dist/components/pill.cjs +20 -13
- package/dist/components/pill.cjs.map +1 -1
- package/dist/components/pill.d.cts +1 -1
- package/dist/components/pill.d.ts +1 -1
- package/dist/components/pill.js +20 -13
- package/dist/components/pill.js.map +1 -1
- package/dist/components/power-history-chart.cjs +1 -1
- package/dist/components/power-history-chart.js +2 -2
- package/dist/components/progress.cjs +1 -1
- package/dist/components/progress.cjs.map +1 -1
- package/dist/components/progress.js +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-card-group.cjs.map +1 -1
- package/dist/components/radio-card-group.js.map +1 -1
- package/dist/components/radio.d.cts +1 -1
- package/dist/components/radio.d.ts +1 -1
- package/dist/components/schedule-list.cjs +10 -7
- package/dist/components/schedule-list.cjs.map +1 -1
- package/dist/components/schedule-list.js +10 -7
- package/dist/components/schedule-list.js.map +1 -1
- package/dist/components/segmented-control.d.cts +1 -1
- package/dist/components/segmented-control.d.ts +1 -1
- package/dist/components/select.cjs +1 -1
- package/dist/components/select.d.cts +1 -1
- package/dist/components/select.d.ts +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/solar-forecast-chart.cjs +1 -1
- package/dist/components/solar-forecast-chart.js +2 -2
- package/dist/components/switch.d.cts +1 -1
- package/dist/components/switch.d.ts +1 -1
- package/dist/components/textarea.d.cts +1 -1
- package/dist/components/textarea.d.ts +1 -1
- package/dist/components/theme.cjs +18 -6
- package/dist/components/theme.cjs.map +1 -1
- package/dist/components/theme.d.cts +16 -2
- package/dist/components/theme.d.ts +16 -2
- package/dist/components/theme.js +19 -7
- package/dist/components/theme.js.map +1 -1
- package/dist/{generate-radix-colors-Bw-RYaV4.d.ts → generate-radix-colors-BY4Wjsm7.d.cts} +4 -2
- package/dist/{generate-radix-colors-Bw-RYaV4.d.cts → generate-radix-colors-BY4Wjsm7.d.ts} +4 -2
- package/dist/icons/material-symbol.cjs +1 -1
- package/dist/icons/material-symbol.cjs.map +1 -1
- package/dist/icons/material-symbol.js +1 -1
- package/dist/icons/material-symbol.js.map +1 -1
- package/dist/lib/accent-theme.cjs +367 -16
- package/dist/lib/accent-theme.cjs.map +1 -1
- package/dist/lib/accent-theme.d.cts +75 -6
- package/dist/lib/accent-theme.d.ts +75 -6
- package/dist/lib/accent-theme.js +365 -18
- package/dist/lib/accent-theme.js.map +1 -1
- package/dist/lib/container-chrome.cjs +9 -7
- package/dist/lib/container-chrome.cjs.map +1 -1
- package/dist/lib/container-chrome.d.cts +4 -3
- package/dist/lib/container-chrome.d.ts +4 -3
- package/dist/lib/container-chrome.js +9 -8
- package/dist/lib/container-chrome.js.map +1 -1
- package/dist/lib/generate-radix-colors.cjs +7 -0
- package/dist/lib/generate-radix-colors.cjs.map +1 -1
- package/dist/lib/generate-radix-colors.d.cts +2 -2
- package/dist/lib/generate-radix-colors.d.ts +2 -2
- package/dist/lib/generate-radix-colors.js +6 -1
- package/dist/lib/generate-radix-colors.js.map +1 -1
- package/dist/lib/input-box-variants.d.cts +1 -1
- package/dist/lib/input-box-variants.d.ts +1 -1
- package/dist/lib/theme-types.cjs +19 -0
- package/dist/lib/theme-types.cjs.map +1 -0
- package/dist/lib/theme-types.d.cts +2 -2
- package/dist/lib/theme-types.d.ts +2 -2
- package/dist/lib/theme-types.js +17 -1
- package/dist/lib/theme-types.js.map +1 -0
- package/dist/styles/material-symbol.css +3 -0
- package/dist/styles/spark-default.css +148 -0
- package/dist/styles/utilities.css +9 -8
- package/dist/{theme-types-1yB0d8mp.d.ts → theme-types-Bn5E15-P.d.cts} +12 -3
- package/dist/{theme-types-1yB0d8mp.d.cts → theme-types-Bn5E15-P.d.ts} +12 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n | 'none'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\nexport const containerChrome: Record<ContainerVariant, string> = {\n ambient:\n 'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n soft: 'bg-(--spark-card-c-soft,var(--neutral-a3))',\n surface:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))',\n outline
|
|
1
|
+
{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n | 'none'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n ambient:\n 'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n surface:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n outline:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n ghost: '[--spark-card-bg:transparent]',\n solid:\n 'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n ambient: 'px-(--spark-card-px,1rem)',\n soft: 'px-4',\n surface: 'px-4',\n outline: 'px-4',\n ghost: '',\n solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n ambient: 'p-(--spark-card-px,1rem)',\n soft: 'p-4',\n surface: 'p-4',\n outline: 'p-4',\n ghost: '',\n solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n resolved: ContainerVariant,\n elevated?: boolean,\n) {\n const softHover =\n (resolved === 'ambient' || resolved === 'soft') &&\n (elevated\n ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n return [\n 'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n // hover deepens the fill one step; bordered/bare variants only ring\n softHover,\n ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n 'bg-(--spark-elevated) ' +\n '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n 'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.cjs";
|
|
4
4
|
|
|
5
5
|
//#region src/lib/container-chrome.d.ts
|
|
6
6
|
type ContainerVariant = SparkCardVariant | 'ambient';
|
|
@@ -9,7 +9,8 @@ declare const radiusClasses: Record<ContainerRadius, string>;
|
|
|
9
9
|
declare const containerChrome: Record<ContainerVariant, string>;
|
|
10
10
|
declare const containerPaddingX: Record<ContainerVariant, string>;
|
|
11
11
|
declare const containerPaddingAll: Record<ContainerVariant, string>;
|
|
12
|
-
declare function containerInteractiveClasses(resolved: ContainerVariant): (string | false)[];
|
|
12
|
+
declare function containerInteractiveClasses(resolved: ContainerVariant, elevated?: boolean): (string | false)[];
|
|
13
|
+
declare const containerElevated: string;
|
|
13
14
|
//#endregion
|
|
14
|
-
export { ContainerRadius, ContainerVariant, containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
15
|
+
export { ContainerRadius, ContainerVariant, containerChrome, containerElevated, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
15
16
|
//# sourceMappingURL=container-chrome.d.cts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.js";
|
|
4
4
|
|
|
5
5
|
//#region src/lib/container-chrome.d.ts
|
|
6
6
|
type ContainerVariant = SparkCardVariant | 'ambient';
|
|
@@ -9,7 +9,8 @@ declare const radiusClasses: Record<ContainerRadius, string>;
|
|
|
9
9
|
declare const containerChrome: Record<ContainerVariant, string>;
|
|
10
10
|
declare const containerPaddingX: Record<ContainerVariant, string>;
|
|
11
11
|
declare const containerPaddingAll: Record<ContainerVariant, string>;
|
|
12
|
-
declare function containerInteractiveClasses(resolved: ContainerVariant): (string | false)[];
|
|
12
|
+
declare function containerInteractiveClasses(resolved: ContainerVariant, elevated?: boolean): (string | false)[];
|
|
13
|
+
declare const containerElevated: string;
|
|
13
14
|
//#endregion
|
|
14
|
-
export { ContainerRadius, ContainerVariant, containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
15
|
+
export { ContainerRadius, ContainerVariant, containerChrome, containerElevated, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
15
16
|
//# sourceMappingURL=container-chrome.d.ts.map
|
|
@@ -12,11 +12,11 @@ const radiusClasses = {
|
|
|
12
12
|
};
|
|
13
13
|
const containerChrome = {
|
|
14
14
|
ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
|
|
15
|
-
soft: "bg-(--spark-card-c-soft,var(--neutral-a3))",
|
|
16
|
-
surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))",
|
|
17
|
-
outline: "border border-(--spark-card-c-border,var(--neutral-a6))",
|
|
18
|
-
ghost: "",
|
|
19
|
-
solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
|
|
15
|
+
soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
|
|
16
|
+
surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
|
|
17
|
+
outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
|
|
18
|
+
ghost: "[--spark-card-bg:transparent]",
|
|
19
|
+
solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
|
|
20
20
|
};
|
|
21
21
|
const containerPaddingX = {
|
|
22
22
|
ambient: "px-(--spark-card-px,1rem)",
|
|
@@ -34,15 +34,16 @@ const containerPaddingAll = {
|
|
|
34
34
|
ghost: "",
|
|
35
35
|
solid: "p-4"
|
|
36
36
|
};
|
|
37
|
-
function containerInteractiveClasses(resolved) {
|
|
37
|
+
function containerInteractiveClasses(resolved, elevated) {
|
|
38
38
|
return [
|
|
39
39
|
"cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none",
|
|
40
40
|
"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
|
|
41
41
|
"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
|
|
42
|
-
(resolved === "ambient" || resolved === "soft") && "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))"
|
|
42
|
+
(resolved === "ambient" || resolved === "soft") && (elevated ? "hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]" : "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))")
|
|
43
43
|
];
|
|
44
44
|
}
|
|
45
|
+
const containerElevated = "bg-(--spark-elevated) [background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] shadow-(--spark-card-shadow,var(--spark-shadow-1))";
|
|
45
46
|
//#endregion
|
|
46
|
-
export { containerChrome, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
47
|
+
export { containerChrome, containerElevated, containerInteractiveClasses, containerPaddingAll, containerPaddingX, radiusClasses };
|
|
47
48
|
|
|
48
49
|
//# sourceMappingURL=container-chrome.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n | 'none'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\nexport const containerChrome: Record<ContainerVariant, string> = {\n ambient:\n 'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n soft: 'bg-(--spark-card-c-soft,var(--neutral-a3))',\n surface:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2))',\n outline
|
|
1
|
+
{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n | 'none'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n ambient:\n 'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n surface:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n outline:\n 'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n ghost: '[--spark-card-bg:transparent]',\n solid:\n 'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n ambient: 'px-(--spark-card-px,1rem)',\n soft: 'px-4',\n surface: 'px-4',\n outline: 'px-4',\n ghost: '',\n solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n ambient: 'p-(--spark-card-px,1rem)',\n soft: 'p-4',\n surface: 'p-4',\n outline: 'p-4',\n ghost: '',\n solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n resolved: ContainerVariant,\n elevated?: boolean,\n) {\n const softHover =\n (resolved === 'ambient' || resolved === 'soft') &&\n (elevated\n ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n return [\n 'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n 'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n // hover deepens the fill one step; bordered/bare variants only ring\n softHover,\n ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n 'bg-(--spark-elevated) ' +\n '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n 'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
|
|
@@ -30,6 +30,11 @@ bezier_easing = require_chunk.__toESM(bezier_easing);
|
|
|
30
30
|
* Kept VERBATIM so it can be re-synced upstream (this file is excluded from the
|
|
31
31
|
* formatter in vite.config.ts). Strict type-checking is skipped (upstream targets
|
|
32
32
|
* a looser tsconfig with unchecked array indexing over fixed 12-step scales).
|
|
33
|
+
*
|
|
34
|
+
* Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no
|
|
35
|
+
* algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps
|
|
36
|
+
* with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply
|
|
37
|
+
* these two keywords after a re-sync.
|
|
33
38
|
*/
|
|
34
39
|
const arrayOf12 = [
|
|
35
40
|
0,
|
|
@@ -358,6 +363,8 @@ function toOklchString(color) {
|
|
|
358
363
|
}
|
|
359
364
|
//#endregion
|
|
360
365
|
exports.generateRadixColors = generateRadixColors;
|
|
366
|
+
exports.getAlphaColorP3 = getAlphaColorP3;
|
|
367
|
+
exports.getAlphaColorSrgb = getAlphaColorSrgb;
|
|
361
368
|
exports.transposeProgressionEnd = transposeProgressionEnd;
|
|
362
369
|
exports.transposeProgressionStart = transposeProgressionStart;
|
|
363
370
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-radix-colors.cjs","names":["RadixColors","Color"],"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
|
+
{"version":3,"file":"generate-radix-colors.cjs","names":["RadixColors","Color"],"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 * Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no\n * algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps\n * with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply\n * these two keywords after a re-sync.\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\nexport function 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\nexport function 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,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
export { generateRadixColors, transposeProgressionEnd, transposeProgressionStart };
|
|
3
|
+
import { a as transposeProgressionStart, i as transposeProgressionEnd, n as getAlphaColorP3, r as getAlphaColorSrgb, t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.cjs";
|
|
4
|
+
export { generateRadixColors, getAlphaColorP3, getAlphaColorSrgb, transposeProgressionEnd, transposeProgressionStart };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
export { generateRadixColors, transposeProgressionEnd, transposeProgressionStart };
|
|
3
|
+
import { a as transposeProgressionStart, i as transposeProgressionEnd, n as getAlphaColorP3, r as getAlphaColorSrgb, t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.js";
|
|
4
|
+
export { generateRadixColors, getAlphaColorP3, getAlphaColorSrgb, transposeProgressionEnd, transposeProgressionStart };
|
|
@@ -25,6 +25,11 @@ import BezierEasing from "bezier-easing";
|
|
|
25
25
|
* Kept VERBATIM so it can be re-synced upstream (this file is excluded from the
|
|
26
26
|
* formatter in vite.config.ts). Strict type-checking is skipped (upstream targets
|
|
27
27
|
* a looser tsconfig with unchecked array indexing over fixed 12-step scales).
|
|
28
|
+
*
|
|
29
|
+
* Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no
|
|
30
|
+
* algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps
|
|
31
|
+
* with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply
|
|
32
|
+
* these two keywords after a re-sync.
|
|
28
33
|
*/
|
|
29
34
|
const arrayOf12 = [
|
|
30
35
|
0,
|
|
@@ -352,6 +357,6 @@ function toOklchString(color) {
|
|
|
352
357
|
return color.to("oklch").toString({ precision: 4 }).replace(/(\S+)(.+)/, `oklch(${L}%$2`);
|
|
353
358
|
}
|
|
354
359
|
//#endregion
|
|
355
|
-
export { generateRadixColors, transposeProgressionEnd, transposeProgressionStart };
|
|
360
|
+
export { generateRadixColors, getAlphaColorP3, getAlphaColorSrgb, transposeProgressionEnd, transposeProgressionStart };
|
|
356
361
|
|
|
357
362
|
//# sourceMappingURL=generate-radix-colors.js.map
|
|
@@ -1 +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
|
+
{"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 * Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no\n * algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps\n * with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply\n * these two keywords after a re-sync.\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\nexport function 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\nexport function 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,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.cjs";
|
|
4
4
|
|
|
5
5
|
//#region src/lib/input-box-variants.d.ts
|
|
6
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";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.js";
|
|
4
4
|
|
|
5
5
|
//#region src/lib/input-box-variants.d.ts
|
|
6
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";
|
package/dist/lib/theme-types.cjs
CHANGED
|
@@ -1 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
//#region src/lib/theme-types.ts
|
|
4
|
+
/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */
|
|
5
|
+
const SPARK_NEUTRAL_FAMILIES = [
|
|
6
|
+
"slate",
|
|
7
|
+
"mauve",
|
|
8
|
+
"gray",
|
|
9
|
+
"sage",
|
|
10
|
+
"olive",
|
|
11
|
+
"sand"
|
|
12
|
+
];
|
|
13
|
+
function isSparkNeutralFamily(value) {
|
|
14
|
+
return SPARK_NEUTRAL_FAMILIES.includes(value);
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
17
|
+
exports.SPARK_NEUTRAL_FAMILIES = SPARK_NEUTRAL_FAMILIES;
|
|
18
|
+
exports.isSparkNeutralFamily = isSparkNeutralFamily;
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=theme-types.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-types.cjs","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n 'slate',\n 'mauve',\n 'gray',\n 'sage',\n 'olive',\n 'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n value: string,\n): value is SparkNeutralFamily {\n return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n"],"mappings":";;;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { a as
|
|
4
|
-
export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };
|
|
3
|
+
import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, p as isSparkNeutralFamily, r as SparkCardVariant, s as SparkNeutral, t as SPARK_NEUTRAL_FAMILIES, u as SparkScaling } from "../theme-types-Bn5E15-P.cjs";
|
|
4
|
+
export { SPARK_NEUTRAL_FAMILIES, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { a as
|
|
4
|
-
export { SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkRadius, SparkScaling, SparkSpacing, SparkStyle };
|
|
3
|
+
import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, p as isSparkNeutralFamily, r as SparkCardVariant, s as SparkNeutral, t as SPARK_NEUTRAL_FAMILIES, u as SparkScaling } from "../theme-types-Bn5E15-P.js";
|
|
4
|
+
export { SPARK_NEUTRAL_FAMILIES, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };
|