@evolve.ui/theme-system 1.0.0

package/plugin-D4eCyUJe.mjs

@@ -0,0 +1,583 @@
+import { $ as colorIconPrimary, $n as fontWeightLabelMini, $t as colorSurface100, A as colorBorderInverse, An as colorWarning300, At as colorPrimary700, B as colorCritical400, Bt as colorSecondary700, C as colorBackgroundWarningDark, Cn as colorTextInverse, Ct as colorPrimary100, D as colorBorderDisabled, Dn as colorTextWarning, Dr as widthPage, Dt as colorPrimary50, E as colorBorderCritical, En as colorTextSuccess, Er as widthDense, Et as colorPrimary400, F as colorBorderTertiary, Fn as colorWarning700, Ft as colorSecondary300, G as colorCritical800, Gt as colorSuccess300, H as colorCritical500, Ht as colorSecondary900, I as colorBorderWarning, In as colorWarning800, It as colorSecondary400, J as colorFocusPrimary, Jn as fontWeightH2, Jt as colorSuccess500, K as colorCritical900, Kn as fontWeightCaption, Kt as colorSuccess400, L as colorCritical100, Ln as colorWarning900, Lt as colorSecondary50, M as colorBorderSecondary, Mn as colorWarning50, Mt as colorPrimary900, N as colorBorderSelected, Nn as colorWarning500, Nt as colorSecondary100, O as colorBorderHover, On as colorWarning100, Or as wrapOpacity, Ot as colorPrimary500, P as colorBorderSuccess, Pn as colorWarning600, Pt as colorSecondary200, Q as colorIconInverse, Qn as fontWeightH6, Qt as colorSuccess900, R as colorCritical200, Rt as colorSecondary500, S as colorBackgroundTertiary, Sn as colorTextInfo, St as colorLinkSecondary, T as colorBorderBlack, Tn as colorTextSecondary, Tr as textTransformLabelMini, Tt as colorPrimary300, U as colorCritical600, Un as fontWeightBodyPrimary, Ut as colorSuccess100, V as colorCritical50, Vt as colorSecondary800, W as colorCritical700, Wn as fontWeightBodySecondary, Wt as colorSuccess200, X as colorIconDisabled, Xn as fontWeightH4, Xt as colorSuccess700, Y as colorIconCritical, Yn as fontWeightH3, Yt as colorSuccess600, Z as colorIconInfo, Zn as fontWeightH5, Zt as colorSuccess800, _ as colorBackgroundPrimary, _n as colorTertiary800, _t as colorLinkInverseHover, an as colorSurface600, ar as letterSpacingCaption, at as colorInfo300, b as colorBackgroundSuccessDark, bn as colorTextDisabled, bt as colorLinkPressed, c as colorBackgroundDisabled, cn as colorSurface900, cr as letterSpacingH2, ct as colorInfo500, d as colorBackgroundInfoDark, dn as colorTertiary300, dr as letterSpacingH3Mobile, dt as colorInfo800, en as colorSurface200, er as fontWeightLabelStrong, et as colorIconSecondary, f as colorBackgroundInfoLight, fn as colorTertiary400, fr as letterSpacingH4, ft as colorInfo900, g as colorBackgroundPressedInverse, gn as colorTertiary700, gr as letterSpacingLabelStrong, gt as colorLinkInverseDisabled, h as colorBackgroundPressed, hn as colorTertiary600, hr as letterSpacingLabelMini, ht as colorLinkInverse, in as colorSurface500, it as colorInfo200, j as colorBorderPrimary, jn as colorWarning400, jr as wrapVariableOpacity, jt as colorPrimary800, k as colorBorderInfo, kn as colorWarning200, kr as wrapVar, kt as colorPrimary600, l as colorBackgroundHover, ln as colorTertiary100, lr as letterSpacingH2Mobile, lt as colorInfo600, m as colorBackgroundOverlay, mn as colorTertiary500, mr as letterSpacingH6, mt as colorLinkHover, n as screens, nn as colorSurface400, nr as letterSpacingBodyPrimary, nt as colorIconWarning, o as colorBackgroundCriticalDark, on as colorSurface700, or as letterSpacingH1, ot as colorInfo400, p as colorBackgroundInverse, pn as colorTertiary50, pr as letterSpacingH5, pt as colorLinkDisabled, q as colorFocusInverse, qn as fontWeightH1, qt as colorSuccess50, r as borderRadius, rn as colorSurface50, rr as letterSpacingBodySecondary, rt as colorInfo100, s as colorBackgroundCriticalLight, sn as colorSurface800, sr as letterSpacingH1Mobile, st as colorInfo50, t as spacing, tn as colorSurface300, tt as colorIconSuccess, u as colorBackgroundHoverInverse, un as colorTertiary200, ur as letterSpacingH3, ut as colorInfo700, v as colorBackgroundSecondary, vn as colorTertiary900, vt as colorLinkInversePressed, w as colorBackgroundWarningLight, wn as colorTextPrimary, wr as textTransformH6, wt as colorPrimary200, x as colorBackgroundSuccessLight, xn as colorTextInactive, xt as colorLinkPrimary, y as colorBackgroundSubdued, yn as colorTextCritical, yt as colorLinkMonochrome, z as colorCritical300, zt as colorSecondary600 } from "./spacing-D43IZfIU.mjs";
+import { n as boxShadow, t as fontFamily } from "./fontFamily-DTm-Yz5-.mjs";
+import plugin from "tailwindcss/plugin.js";
+//#region src/tailwind/colors.ts
+/**
+* Color configuration for Tailwind CSS
+*
+* Maps CSS custom properties to Tailwind color utilities using nested objects.
+* Uses wrapVariableOpacity() for dynamic alpha support (e.g., `bg-primary-500/50`)
+* and wrapOpacity() for fixed opacity values.
+*
+* @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+* Internal reference: Hammer UI patterns
+* Ported from the upstream theme system.
+*/
+const colors = {
+	background: {
+		"critical-dark": wrapVariableOpacity(wrapVar(colorBackgroundCriticalDark)),
+		"critical-light": wrapVariableOpacity(wrapVar(colorBackgroundCriticalLight)),
+		disabled: wrapVariableOpacity(wrapVar(colorBackgroundDisabled)),
+		hover: wrapOpacity(wrapVar(colorBackgroundHover), 5),
+		"hover-inverse": wrapOpacity(wrapVar(colorBackgroundHoverInverse), 5),
+		"info-dark": wrapVariableOpacity(wrapVar(colorBackgroundInfoDark)),
+		"info-light": wrapVariableOpacity(wrapVar(colorBackgroundInfoLight)),
+		inverse: wrapVariableOpacity(wrapVar(colorBackgroundInverse)),
+		overlay: wrapOpacity(wrapVar(colorBackgroundOverlay), 40),
+		pressed: wrapOpacity(wrapVar(colorBackgroundPressed), 20),
+		"pressed-inverse": wrapOpacity(wrapVar(colorBackgroundPressedInverse), 20),
+		primary: wrapVariableOpacity(wrapVar(colorBackgroundPrimary)),
+		secondary: wrapVariableOpacity(wrapVar(colorBackgroundSecondary)),
+		subdued: wrapVariableOpacity(wrapVar(colorBackgroundSubdued)),
+		"success-dark": wrapVariableOpacity(wrapVar(colorBackgroundSuccessDark)),
+		"success-light": wrapVariableOpacity(wrapVar(colorBackgroundSuccessLight)),
+		tertiary: wrapVariableOpacity(wrapVar(colorBackgroundTertiary)),
+		"warning-dark": wrapVariableOpacity(wrapVar(colorBackgroundWarningDark)),
+		"warning-light": wrapVariableOpacity(wrapVar(colorBackgroundWarningLight))
+	},
+	border: {
+		black: wrapVariableOpacity(wrapVar(colorBorderBlack)),
+		critical: wrapVariableOpacity(wrapVar(colorBorderCritical)),
+		disabled: wrapVariableOpacity(wrapVar(colorBorderDisabled)),
+		hover: wrapVariableOpacity(wrapVar(colorBorderHover)),
+		info: wrapVariableOpacity(wrapVar(colorBorderInfo)),
+		inverse: wrapVariableOpacity(wrapVar(colorBorderInverse)),
+		primary: wrapVariableOpacity(wrapVar(colorBorderPrimary)),
+		secondary: wrapVariableOpacity(wrapVar(colorBorderSecondary)),
+		selected: wrapVariableOpacity(wrapVar(colorBorderSelected)),
+		success: wrapVariableOpacity(wrapVar(colorBorderSuccess)),
+		tertiary: wrapVariableOpacity(wrapVar(colorBorderTertiary)),
+		warning: wrapVariableOpacity(wrapVar(colorBorderWarning))
+	},
+	critical: {
+		"100": wrapVariableOpacity(wrapVar(colorCritical100)),
+		"200": wrapVariableOpacity(wrapVar(colorCritical200)),
+		"300": wrapVariableOpacity(wrapVar(colorCritical300)),
+		"400": wrapVariableOpacity(wrapVar(colorCritical400)),
+		"50": wrapVariableOpacity(wrapVar(colorCritical50)),
+		"500": wrapVariableOpacity(wrapVar(colorCritical500)),
+		"600": wrapVariableOpacity(wrapVar(colorCritical600)),
+		"700": wrapVariableOpacity(wrapVar(colorCritical700)),
+		"800": wrapVariableOpacity(wrapVar(colorCritical800)),
+		"900": wrapVariableOpacity(wrapVar(colorCritical900))
+	},
+	current: "currentColor",
+	focus: {
+		inverse: wrapOpacity(wrapVar(colorFocusInverse), 50),
+		primary: wrapOpacity(wrapVar(colorFocusPrimary), 50)
+	},
+	"focus-inverse": wrapVariableOpacity(wrapVar(colorFocusInverse)),
+	"focus-primary": wrapVariableOpacity(wrapVar(colorFocusPrimary)),
+	icon: {
+		critical: wrapVariableOpacity(wrapVar(colorIconCritical)),
+		default: wrapVariableOpacity(wrapVar(colorIconPrimary)),
+		disabled: wrapVariableOpacity(wrapVar(colorIconDisabled)),
+		hover: wrapVariableOpacity(wrapVar(colorIconSecondary)),
+		info: wrapVariableOpacity(wrapVar(colorIconInfo)),
+		inverse: wrapVariableOpacity(wrapVar(colorIconInverse)),
+		primary: wrapVariableOpacity(wrapVar(colorIconPrimary)),
+		secondary: wrapVariableOpacity(wrapVar(colorIconSecondary)),
+		success: wrapVariableOpacity(wrapVar(colorIconSuccess)),
+		warning: wrapVariableOpacity(wrapVar(colorIconWarning))
+	},
+	info: {
+		"100": wrapVariableOpacity(wrapVar(colorInfo100)),
+		"200": wrapVariableOpacity(wrapVar(colorInfo200)),
+		"300": wrapVariableOpacity(wrapVar(colorInfo300)),
+		"400": wrapVariableOpacity(wrapVar(colorInfo400)),
+		"50": wrapVariableOpacity(wrapVar(colorInfo50)),
+		"500": wrapVariableOpacity(wrapVar(colorInfo500)),
+		"600": wrapVariableOpacity(wrapVar(colorInfo600)),
+		"700": wrapVariableOpacity(wrapVar(colorInfo700)),
+		"800": wrapVariableOpacity(wrapVar(colorInfo800)),
+		"900": wrapVariableOpacity(wrapVar(colorInfo900))
+	},
+	link: {
+		disabled: wrapVariableOpacity(wrapVar(colorLinkDisabled)),
+		hover: wrapVariableOpacity(wrapVar(colorLinkHover)),
+		inverse: wrapVariableOpacity(wrapVar(colorLinkInverse)),
+		"inverse-disabled": wrapVariableOpacity(wrapVar(colorLinkInverseDisabled)),
+		"inverse-hover": wrapVariableOpacity(wrapVar(colorLinkInverseHover)),
+		"inverse-pressed": wrapVariableOpacity(wrapVar(colorLinkInversePressed)),
+		monochrome: wrapVariableOpacity(wrapVar(colorLinkMonochrome)),
+		pressed: wrapVariableOpacity(wrapVar(colorLinkPressed)),
+		primary: wrapVariableOpacity(wrapVar(colorLinkPrimary)),
+		secondary: wrapVariableOpacity(wrapVar(colorLinkSecondary))
+	},
+	primary: {
+		"100": wrapVariableOpacity(wrapVar(colorPrimary100)),
+		"200": wrapVariableOpacity(wrapVar(colorPrimary200)),
+		"300": wrapVariableOpacity(wrapVar(colorPrimary300)),
+		"400": wrapVariableOpacity(wrapVar(colorPrimary400)),
+		"50": wrapVariableOpacity(wrapVar(colorPrimary50)),
+		"500": wrapVariableOpacity(wrapVar(colorPrimary500)),
+		"600": wrapVariableOpacity(wrapVar(colorPrimary600)),
+		"700": wrapVariableOpacity(wrapVar(colorPrimary700)),
+		"800": wrapVariableOpacity(wrapVar(colorPrimary800)),
+		"900": wrapVariableOpacity(wrapVar(colorPrimary900))
+	},
+	secondary: {
+		"100": wrapVariableOpacity(wrapVar(colorSecondary100)),
+		"200": wrapVariableOpacity(wrapVar(colorSecondary200)),
+		"300": wrapVariableOpacity(wrapVar(colorSecondary300)),
+		"400": wrapVariableOpacity(wrapVar(colorSecondary400)),
+		"50": wrapVariableOpacity(wrapVar(colorSecondary50)),
+		"500": wrapVariableOpacity(wrapVar(colorSecondary500)),
+		"600": wrapVariableOpacity(wrapVar(colorSecondary600)),
+		"700": wrapVariableOpacity(wrapVar(colorSecondary700)),
+		"800": wrapVariableOpacity(wrapVar(colorSecondary800)),
+		"900": wrapVariableOpacity(wrapVar(colorSecondary900))
+	},
+	success: {
+		"100": wrapVariableOpacity(wrapVar(colorSuccess100)),
+		"200": wrapVariableOpacity(wrapVar(colorSuccess200)),
+		"300": wrapVariableOpacity(wrapVar(colorSuccess300)),
+		"400": wrapVariableOpacity(wrapVar(colorSuccess400)),
+		"50": wrapVariableOpacity(wrapVar(colorSuccess50)),
+		"500": wrapVariableOpacity(wrapVar(colorSuccess500)),
+		"600": wrapVariableOpacity(wrapVar(colorSuccess600)),
+		"700": wrapVariableOpacity(wrapVar(colorSuccess700)),
+		"800": wrapVariableOpacity(wrapVar(colorSuccess800)),
+		"900": wrapVariableOpacity(wrapVar(colorSuccess900))
+	},
+	surface: {
+		"100": wrapVariableOpacity(wrapVar(colorSurface100)),
+		"200": wrapVariableOpacity(wrapVar(colorSurface200)),
+		"300": wrapVariableOpacity(wrapVar(colorSurface300)),
+		"400": wrapVariableOpacity(wrapVar(colorSurface400)),
+		"50": wrapVariableOpacity(wrapVar(colorSurface50)),
+		"500": wrapVariableOpacity(wrapVar(colorSurface500)),
+		"600": wrapVariableOpacity(wrapVar(colorSurface600)),
+		"700": wrapVariableOpacity(wrapVar(colorSurface700)),
+		"800": wrapVariableOpacity(wrapVar(colorSurface800)),
+		"900": wrapVariableOpacity(wrapVar(colorSurface900))
+	},
+	tertiary: {
+		"100": wrapVariableOpacity(wrapVar(colorTertiary100)),
+		"200": wrapVariableOpacity(wrapVar(colorTertiary200)),
+		"300": wrapVariableOpacity(wrapVar(colorTertiary300)),
+		"400": wrapVariableOpacity(wrapVar(colorTertiary400)),
+		"50": wrapVariableOpacity(wrapVar(colorTertiary50)),
+		"500": wrapVariableOpacity(wrapVar(colorTertiary500)),
+		"600": wrapVariableOpacity(wrapVar(colorTertiary600)),
+		"700": wrapVariableOpacity(wrapVar(colorTertiary700)),
+		"800": wrapVariableOpacity(wrapVar(colorTertiary800)),
+		"900": wrapVariableOpacity(wrapVar(colorTertiary900))
+	},
+	text: {
+		critical: wrapVariableOpacity(wrapVar(colorTextCritical)),
+		disabled: wrapVariableOpacity(wrapVar(colorTextDisabled)),
+		inactive: wrapVariableOpacity(wrapVar(colorTextInactive)),
+		info: wrapVariableOpacity(wrapVar(colorTextInfo)),
+		inverse: wrapVariableOpacity(wrapVar(colorTextInverse)),
+		primary: wrapVariableOpacity(wrapVar(colorTextPrimary)),
+		secondary: wrapVariableOpacity(wrapVar(colorTextSecondary)),
+		success: wrapVariableOpacity(wrapVar(colorTextSuccess)),
+		warning: wrapVariableOpacity(wrapVar(colorTextWarning))
+	},
+	transparent: "transparent",
+	warning: {
+		"100": wrapVariableOpacity(wrapVar(colorWarning100)),
+		"200": wrapVariableOpacity(wrapVar(colorWarning200)),
+		"300": wrapVariableOpacity(wrapVar(colorWarning300)),
+		"400": wrapVariableOpacity(wrapVar(colorWarning400)),
+		"50": wrapVariableOpacity(wrapVar(colorWarning50)),
+		"500": wrapVariableOpacity(wrapVar(colorWarning500)),
+		"600": wrapVariableOpacity(wrapVar(colorWarning600)),
+		"700": wrapVariableOpacity(wrapVar(colorWarning700)),
+		"800": wrapVariableOpacity(wrapVar(colorWarning800)),
+		"900": wrapVariableOpacity(wrapVar(colorWarning900))
+	}
+};
+//#endregion
+//#region src/tailwind/text.ts
+const textComponents = {
+	".hui-link-md": {
+		fontFamily: fontFamily.primary,
+		fontSize: "16px",
+		fontWeight: wrapVar(fontWeightBodyPrimary),
+		letterSpacing: wrapVar(letterSpacingBodyPrimary),
+		lineHeight: "24px"
+	},
+	".hui-link-sm": {
+		fontFamily: fontFamily.primary,
+		fontSize: "14px",
+		fontWeight: wrapVar(fontWeightBodyPrimary),
+		letterSpacing: wrapVar(letterSpacingBodyPrimary),
+		lineHeight: "22px"
+	},
+	".hui-link-xs": {
+		fontFamily: fontFamily.primary,
+		fontSize: "12px",
+		fontWeight: wrapVar(fontWeightBodyPrimary),
+		letterSpacing: wrapVar(letterSpacingBodyPrimary),
+		lineHeight: "18px"
+	},
+	".hui-text-body-primary": {
+		fontFamily: fontFamily.primary,
+		fontSize: "16px",
+		fontWeight: wrapVar(fontWeightBodyPrimary),
+		letterSpacing: wrapVar(letterSpacingBodyPrimary),
+		lineHeight: "24px"
+	},
+	".hui-text-body-secondary": {
+		fontFamily: fontFamily.primary,
+		fontSize: "14px",
+		fontWeight: wrapVar(fontWeightBodySecondary),
+		letterSpacing: wrapVar(letterSpacingBodySecondary),
+		lineHeight: "22px"
+	},
+	".hui-text-caption": {
+		fontFamily: fontFamily.primary,
+		fontSize: "12px",
+		fontWeight: wrapVar(fontWeightCaption),
+		letterSpacing: wrapVar(letterSpacingCaption),
+		lineHeight: "18px"
+	},
+	".hui-text-h1": {
+		fontFamily: fontFamily.secondary,
+		fontSize: "32px",
+		fontWeight: wrapVar(fontWeightH1),
+		letterSpacing: wrapVar(letterSpacingH1),
+		lineHeight: "48px",
+		[`@media (width < ${screens.smMax.max})`]: {
+			fontSize: "24px",
+			letterSpacing: wrapVar(letterSpacingH1Mobile),
+			lineHeight: "36px"
+		}
+	},
+	".hui-text-h2": {
+		fontFamily: fontFamily.secondary,
+		fontSize: "24px",
+		fontWeight: wrapVar(fontWeightH2),
+		letterSpacing: wrapVar(letterSpacingH2),
+		lineHeight: "36px",
+		[`@media (width < ${screens.smMax.max})`]: {
+			fontSize: "20px",
+			letterSpacing: wrapVar(letterSpacingH2Mobile),
+			lineHeight: "30px"
+		}
+	},
+	".hui-text-h3": {
+		fontFamily: fontFamily.secondary,
+		fontSize: "20px",
+		fontWeight: wrapVar(fontWeightH3),
+		letterSpacing: wrapVar(letterSpacingH3),
+		lineHeight: "30px",
+		[`@media (width < ${screens.smMax.max})`]: {
+			fontSize: "16px",
+			letterSpacing: wrapVar(letterSpacingH3Mobile),
+			lineHeight: "24px"
+		}
+	},
+	".hui-text-h4": {
+		fontFamily: fontFamily.secondary,
+		fontSize: "16px",
+		fontWeight: wrapVar(fontWeightH4),
+		letterSpacing: wrapVar(letterSpacingH4),
+		lineHeight: "24px"
+	},
+	".hui-text-h5": {
+		fontFamily: fontFamily.primary,
+		fontSize: "16px",
+		fontWeight: wrapVar(fontWeightH5),
+		letterSpacing: wrapVar(letterSpacingH5),
+		lineHeight: "24px"
+	},
+	".hui-text-h6": {
+		fontFamily: fontFamily.primary,
+		fontSize: "14px",
+		fontWeight: wrapVar(fontWeightH6),
+		letterSpacing: wrapVar(letterSpacingH6),
+		lineHeight: "22px",
+		textTransform: wrapVar(textTransformH6)
+	},
+	".hui-text-label-mini": {
+		fontFamily: fontFamily.primary,
+		fontSize: "12px",
+		fontWeight: wrapVar(fontWeightLabelMini),
+		letterSpacing: wrapVar(letterSpacingLabelMini),
+		lineHeight: "14px",
+		textTransform: wrapVar(textTransformLabelMini)
+	},
+	".hui-text-label-mini-strong": {
+		fontFamily: fontFamily.primary,
+		fontSize: "12px",
+		fontWeight: wrapVar(fontWeightLabelStrong),
+		letterSpacing: wrapVar(letterSpacingLabelMini),
+		lineHeight: "14px",
+		textTransform: wrapVar(textTransformLabelMini)
+	},
+	".hui-text-label-strong": {
+		fontFamily: fontFamily.primary,
+		fontSize: "14px",
+		fontWeight: wrapVar(fontWeightLabelStrong),
+		letterSpacing: wrapVar(letterSpacingLabelStrong),
+		lineHeight: "22px"
+	}
+};
+//#endregion
+//#region src/tailwind/width.ts
+/**
+* Layout width configuration for Tailwind CSS
+*
+* Internal reference: Hammer UI patterns
+* Ported from the upstream theme system.
+*/
+const width = {
+	dense: wrapVar(widthDense),
+	page: wrapVar(widthPage)
+};
+//#endregion
+//#region src/tailwind/plugin.ts
+/**
+* Main Tailwind CSS plugin for the theme system
+*
+* Composes all theme configuration modules (colors, spacing, typography, etc.)
+* into a single Tailwind plugin. The plugin's second argument defines the complete
+* theme, so consumers only need `plugins: [themePlugin]` — no separate theme extension.
+*
+* Internal reference: Hammer UI patterns
+* Ported from the upstream theme system.
+*/
+const autofillStyles = {
+	"-webkit-box-shadow": "0 0 0 12px rgb(var(--color-background-primary)) inset !important",
+	"box-shadow": "0 0 0 12px rgb(var(--color-background-primary)) inset !important"
+};
+const themePlugin = plugin(({ addBase, addComponents, matchUtilities }) => {
+	addComponents(textComponents);
+	addComponents({
+		".hui-autofill-transparent": {
+			"&:-webkit-autofill": autofillStyles,
+			"&:-webkit-autofill:active": autofillStyles,
+			"&:-webkit-autofill:focus": autofillStyles,
+			"&:-webkit-autofill:hover": autofillStyles
+		},
+		".hui-focus-visible-outline": { "@apply focus-visible:outline-focus-primary focus-visible:outline focus-visible:outline-4": {} },
+		".hui-focus-visible-outline-inverse": { "@apply focus-visible:outline-focus-inverse focus-visible:outline focus-visible:outline-4": {} },
+		".scrollbar-default": {
+			"&::-webkit-scrollbar": { display: "block" },
+			"-ms-overflow-style": "auto",
+			"scrollbar-width": "auto"
+		},
+		".scrollbar-hide": {
+			"&::-webkit-scrollbar": { display: "none" },
+			"-ms-overflow-style": "none",
+			"scrollbar-width": "none"
+		}
+	});
+	addBase({
+		"@keyframes saveButtonWiggle": {
+			"0%, 100%": { transform: "rotate(0deg) scale(1)" },
+			"10%": { transform: "rotate(-6deg) scale(1.03)" },
+			"25%": { transform: "rotate(5deg) scale(1.03)" },
+			"40%": { transform: "rotate(-4deg) scale(1.02)" },
+			"55%": { transform: "rotate(3deg) scale(1.02)" },
+			"70%": { transform: "rotate(-1.5deg) scale(1.01)" },
+			"85%": { transform: "rotate(0.5deg) scale(1)" }
+		},
+		"@keyframes saveHeartTwirlBloom": {
+			"0%": { transform: "rotateY(0deg) scale(1)" },
+			"50%": { transform: "rotateY(180deg) scale(1.35)" },
+			"100%": { transform: "rotateY(360deg) scale(1)" }
+		},
+		"@keyframes saveHeartColorFlash": {
+			"0%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" },
+			"40%": { fill: "rgb(var(--hui-save-color-critical-300, var(--color-critical-300)))" },
+			"60%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" },
+			"100%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" }
+		},
+		"@keyframes saveLabelShimmer": {
+			"0%": { backgroundPosition: "200% center" },
+			"100%": { backgroundPosition: "-200% center" }
+		},
+		"@keyframes saveButtonPulse": {
+			"0%": { transform: "scale(1)" },
+			"35%": { transform: "scale(1.08)" },
+			"65%": { transform: "scale(0.97)" },
+			"100%": { transform: "scale(1)" }
+		},
+		"@keyframes saveHeartPop": {
+			"0%": { transform: "scale(1)" },
+			"20%": { transform: "scale(0.6)" },
+			"60%": { transform: "scale(1.35)" },
+			"100%": { transform: "scale(1)" }
+		},
+		".hui-fb-shimmer": {
+			lineHeight: "normal",
+			backgroundImage: "linear-gradient(90deg, currentColor 0%, currentColor 20%, rgb(var(--hui-save-color-critical-200, var(--color-critical-200))) 33%, rgb(var(--hui-save-color-critical-500, var(--color-critical-500))) 50%, rgb(var(--hui-save-color-tertiary-400, var(--color-tertiary-400))) 67%, currentColor 80%, currentColor 100%)",
+			backgroundSize: "200% 100%",
+			backgroundClip: "text",
+			"-webkit-background-clip": "text",
+			"-webkit-text-fill-color": "transparent",
+			"@media (prefers-reduced-motion: reduce)": {
+				backgroundImage: "none !important",
+				"-webkit-text-fill-color": "currentColor !important"
+			}
+		},
+		".hui-fb-color-flash .hui-fb-icon-frame svg path": {
+			animation: "saveHeartColorFlash 1100ms cubic-bezier(0.45, 0, 0.55, 1) 1",
+			animationFillMode: "forwards"
+		},
+		"@media (prefers-reduced-motion: reduce)": { ".hui-fb-color-flash .hui-fb-icon-frame svg path": { animation: "none !important" } }
+	});
+	matchUtilities({ "grid-area": (value) => {
+		return { "grid-area": value };
+	} });
+}, { theme: {
+	borderRadius,
+	boxShadow,
+	colors,
+	extend: {
+		animation: {
+			fadeIn: "fadeIn .2s ease-in-out",
+			fadeInOpacity: "fadeInOpacity 0.5s ease-in-out",
+			fadeInScaled: "fadeInScaled .2s ease-in",
+			fadeOut: "fadeOut .2s ease-in-out",
+			loading: "loading 1.4s infinite ease-in-out",
+			"progress-completion": "shrink 0.15s ease-in-out both, grow 0.15s ease-in-out 0.15s both",
+			"progress-icon-fade-in": "fadeInOpacity 0.15s ease-in-out 0.15s both",
+			"progress-wave": "progressWave 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, progressWaveRotate 1568ms linear infinite both",
+			saveButtonPulse: "saveButtonPulse 500ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+			saveButtonWiggle: "saveButtonWiggle 1.3s cubic-bezier(0.36, 0, 0.66, -0.56)",
+			saveHeartColorFlash: "saveHeartColorFlash 1100ms cubic-bezier(0.45, 0, 0.55, 1)",
+			saveHeartPop: "saveHeartPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+			saveHeartTwirlBloom: "saveHeartTwirlBloom 1100ms cubic-bezier(0.45, 0, 0.55, 1)",
+			saveLabelShimmer: "saveLabelShimmer 1100ms ease-in-out",
+			slideDown: "slideDown 0.3s ease-in forwards",
+			slideUp: "slideUp 0.3s ease-out forwards"
+		},
+		keyframes: {
+			fadeIn: {
+				from: { opacity: "0" },
+				to: { opacity: "1" }
+			},
+			fadeInOpacity: {
+				from: {
+					opacity: "0",
+					visibility: "hidden"
+				},
+				to: {
+					opacity: "1",
+					visibility: "visible"
+				}
+			},
+			fadeInScaled: {
+				from: {
+					opacity: "0",
+					transform: "scale(0.7)"
+				},
+				to: {
+					opacity: "1",
+					transform: "scale(1)"
+				}
+			},
+			fadeOut: {
+				from: {
+					opacity: "1",
+					transform: "scale(1)"
+				},
+				to: {
+					opacity: "0",
+					transform: "scale(0.7)"
+				}
+			},
+			grow: {
+				from: { transform: "scale(0.5)" },
+				to: { transform: "scale(1)" }
+			},
+			loading: {
+				"0%, 100%, 80%": { transform: "scale(0)" },
+				"40%": { transform: "scale(1)" }
+			},
+			progressWave: {
+				"0%": {
+					strokeDasharray: "var(--progress-wave-start)",
+					strokeDashoffset: "0"
+				},
+				"100%": {
+					strokeDasharray: "var(--progress-wave-end)",
+					strokeDashoffset: "var(--progress-wave-full)"
+				},
+				"50%": {
+					strokeDasharray: "var(--progress-wave-mid)",
+					strokeDashoffset: "var(--progress-wave-offset)"
+				}
+			},
+			progressWaveRotate: {
+				"0%": { transform: "rotate(-90deg)" },
+				"100%": { transform: "rotate(270deg)" }
+			},
+			saveButtonPulse: {
+				"0%": { transform: "scale(1)" },
+				"35%": { transform: "scale(1.08)" },
+				"65%": { transform: "scale(0.97)" },
+				"100%": { transform: "scale(1)" }
+			},
+			saveButtonWiggle: {
+				"0%, 100%": { transform: "rotate(0deg) scale(1)" },
+				"10%": { transform: "rotate(-6deg) scale(1.03)" },
+				"25%": { transform: "rotate(5deg) scale(1.03)" },
+				"40%": { transform: "rotate(-4deg) scale(1.02)" },
+				"55%": { transform: "rotate(3deg) scale(1.02)" },
+				"70%": { transform: "rotate(-1.5deg) scale(1.01)" },
+				"85%": { transform: "rotate(0.5deg) scale(1)" }
+			},
+			saveHeartColorFlash: {
+				"0%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" },
+				"40%": { fill: "rgb(var(--hui-save-color-critical-300, var(--color-critical-300)))" },
+				"60%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" },
+				"100%": { fill: "rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))" }
+			},
+			saveHeartPop: {
+				"0%": { transform: "scale(1)" },
+				"20%": { transform: "scale(0.6)" },
+				"60%": { transform: "scale(1.35)" },
+				"100%": { transform: "scale(1)" }
+			},
+			saveHeartTwirlBloom: {
+				"0%": { transform: "rotateY(0deg) scale(1)" },
+				"50%": { transform: "rotateY(180deg) scale(1.35)" },
+				"100%": { transform: "rotateY(360deg) scale(1)" }
+			},
+			saveLabelShimmer: {
+				"0%": { backgroundPosition: "200% center" },
+				"100%": { backgroundPosition: "-200% center" }
+			},
+			shrink: {
+				from: { transform: "scale(1)" },
+				to: { transform: "scale(0.5)" }
+			},
+			slideDown: {
+				"0%": {
+					opacity: "1",
+					transform: "translateY(0)"
+				},
+				"100%": {
+					opacity: "0",
+					transform: "translateY(100%)"
+				}
+			},
+			slideUp: {
+				"0%": {
+					opacity: "0",
+					transform: "translateY(100%)"
+				},
+				"100%": {
+					opacity: "1",
+					transform: "translateY(0)"
+				}
+			}
+		},
+		maxWidth: width,
+		minWidth: width,
+		spacing,
+		width
+	},
+	fontFamily,
+	screens
+} });
+//#endregion
+export { textComponents as n, colors as r, themePlugin as t };
+
+//# sourceMappingURL=plugin-D4eCyUJe.mjs.map