@evolve.ui/theme-system 1.1.0 → 1.2.0

package/src/effects/vocabulary.ts

@@ -0,0 +1,32 @@
+import type { EffectRule } from './rules';
+
+/**
+ * Recipes emitted into every effect brand file before that brand's own bindings.
+ * Materials come first so `hui-fx-glass hui-fx-featured` composes in source order.
+ * CTA ink is a channel remap, so a component's own `color` utilities still apply when the guard matches.
+ */
+import { effectClasses } from './classes';
+import { fx } from './tokens';
+
+const NOT_INTERACTIVE = ':disabled, [aria-disabled="true"]';
+
+/** Opt-in glass remaps the same text colours as the catalog hooks, so `hui-fx-glass` text reads the same everywhere. */
+const GLASS_TEXT = { '--color-text-secondary': fx.textMutedRgb, '--color-text-success': fx.textSuccessRgb } as const;
+
+export const vocabularyRules: readonly EffectRule[] = [
+    { on: effectClasses.glass, material: 'surface', radius: 'surface-radius', vars: GLASS_TEXT },
+    { on: effectClasses.glassRaised, material: 'raised', radius: 'surface-radius', vars: GLASS_TEXT },
+    { on: effectClasses.featured, shadow: 'featured' },
+    { on: effectClasses.halo, shadow: 'halo' },
+    { on: effectClasses.glow, shadow: 'glow' },
+    {
+        on: effectClasses.cta,
+        unless: NOT_INTERACTIVE,
+        paint: { background: fx.ctaFill },
+        vars: { '--color-text-inverse': fx.ctaInkRgb, '--color-icon-inverse': fx.ctaInkRgb },
+    },
+    { on: effectClasses.cta, when: 'hover', unless: NOT_INTERACTIVE, paint: { background: fx.ctaFillHover } },
+    { on: effectClasses.accentFont, paint: { fontFamily: fx.fontAccent } },
+    { on: effectClasses.serif, vars: { '--effect-font-accent': fx.fontSerif } },
+    { on: effectClasses.backdrop, paint: { background: fx.backdrop } },
+];

package/src/index.ts

@@ -2,6 +2,8 @@
 export { themePlugin } from './tailwind/plugin';
 
 // Tailwind configuration modules
+export * from './tailwind/animation';
+export * from './tailwind/reducedMotion';
 export * from './tailwind/colors';
 export * from './tailwind/screens';
 export * from './tailwind/spacing';
@@ -32,6 +34,7 @@ export * from './themes/runtime/buildTheme';
 export * from './themes/runtime/default';
 export * from './themes/runtime/basketballTraining';
 export * from './themes/runtime/professionalBrand';
+export * from './themes/runtime/everydayHarbor';
 
 // Class name utility
 export { cn } from './utils/cn';

package/src/tailwind/animation.ts

@@ -0,0 +1,30 @@
+/**
+ * Animation registry for the theme system
+ *
+ * The `animate-*` utilities this library registers, extracted from `plugin.ts` so the
+ * reduced-motion policy can be checked against them (see `./reducedMotion`). These sit under
+ * `theme.extend`, so Tailwind's own defaults (`spin`, `ping`, `pulse`, `bounce`, `none`) survive
+ * alongside them — the resolved registry is this object layered over `defaultTheme.animation`,
+ * and the policy must cover both.
+ *
+ * Keyframes stay in `plugin.ts` next to the `addBase` block that emits some of them.
+ */
+export const 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 500ms ease-in-out',
+    saveHeartColorFlash: 'saveHeartColorFlash 500ms cubic-bezier(0.45, 0, 0.55, 1)',
+    saveHeartPop: 'saveHeartPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+    saveHeartTwirlBloom: 'saveHeartTwirlBloom 500ms cubic-bezier(0.45, 0, 0.55, 1)',
+    saveLabelShimmer: 'saveLabelShimmer 500ms ease-in-out',
+    slideDown: 'slideDown 0.3s ease-in forwards',
+    slideUp: 'slideUp 0.3s ease-out forwards',
+};

package/src/tailwind/borderWidth.ts

@@ -0,0 +1,14 @@
+/**
+ * Border width scale the theme ships.
+ *
+ * These match the widths Tailwind uses when a plugin does not replace `borderWidth`.
+ * They sit on the theme object so the value snapshot locks the same scale.
+ */
+
+export const borderWidth = {
+    DEFAULT: '1px',
+    0: '0px',
+    2: '2px',
+    4: '4px',
+    8: '8px',
+};

package/src/tailwind/plugin.ts

@@ -11,78 +11,111 @@
 
 import plugin from 'tailwindcss/plugin';
 
+import { animation } from './animation';
 import { borderRadius } from './borderRadius';
+import { borderWidth } from './borderWidth';
 import { boxShadow } from './boxShadow';
 import { colors } from './colors';
 import { fontFamily } from './fontFamily';
+import { buildReducedMotionBase } from './reducedMotion';
 import { screens } from './screens';
 import { spacing } from './spacing';
 import { textComponents } from './text';
 import { width } from './width';
 
-const autofillStyles = {
+export 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',
 };
 
-export const themePlugin = plugin(
-    ({ addBase, addComponents, matchUtilities }) => {
-        // https://tailwindcss.com/docs/plugins#css-in-js-syntax
-        addComponents(textComponents);
-        addComponents({
-            '.hui-autofill-transparent': {
-                '&:-webkit-autofill': autofillStyles,
-                '&:-webkit-autofill:active': autofillStyles,
-                '&:-webkit-autofill:focus': autofillStyles,
-                '&:-webkit-autofill:hover': autofillStyles,
+export const tailwindTheme = {
+    borderRadius,
+    borderWidth,
+    boxShadow,
+    colors,
+    extend: {
+        animation,
+        keyframes: {
+            fadeIn: {
+                from: {
+                    opacity: '0',
+                },
+                to: {
+                    opacity: '1',
+                },
             },
-            '.hui-focus-visible-outline': {
-                '@apply focus-visible:outline-focus-primary focus-visible:outline focus-visible:outline-4': {},
+            fadeInOpacity: {
+                from: {
+                    opacity: '0',
+                    visibility: 'hidden',
+                },
+                to: {
+                    opacity: '1',
+                    visibility: 'visible',
+                },
             },
-            '.hui-focus-visible-outline-inverse': {
-                '@apply focus-visible:outline-focus-inverse focus-visible:outline focus-visible:outline-4': {},
+            fadeInScaled: {
+                from: {
+                    opacity: '0',
+                    transform: 'scale(0.7)',
+                },
+                to: {
+                    opacity: '1',
+                    transform: 'scale(1)',
+                },
             },
-            '.scrollbar-default': {
-                /* Safari and Chrome */
-                '&::-webkit-scrollbar': {
-                    display: 'block',
+            fadeOut: {
+                from: {
+                    opacity: '1',
+                    transform: 'scale(1)',
+                },
+                to: {
+                    opacity: '0',
+                    transform: 'scale(0.7)',
                 },
-                /* IE and Edge */
-                '-ms-overflow-style': 'auto',
-                /* Firefox */
-                'scrollbar-width': 'auto',
             },
-            '.scrollbar-hide': {
-                /* Safari and Chrome */
-                '&::-webkit-scrollbar': {
-                    display: 'none',
+            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)',
                 },
-                /* IE and Edge */
-                '-ms-overflow-style': 'none',
-                /* Firefox */
-                'scrollbar-width': 'none',
             },
-        });
-
-        // Save/Favorite button keyframes — emitted unconditionally via addBase so they are
-        // available in all consumer builds regardless of Tailwind content scanning.
-        // The corresponding animate-* utilities are registered in theme.extend.animation below.
-        addBase({
-            '@keyframes saveButtonWiggle': {
+            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)' },
+                '10%': { transform: 'rotate(-4deg) scale(1.02)' },
+                '25%': { transform: 'rotate(3.5deg) scale(1.02)' },
+                '40%': { transform: 'rotate(-2.5deg) scale(1.015)' },
+                '55%': { transform: 'rotate(2deg) scale(1.015)' },
+                '70%': { transform: 'rotate(-1deg) 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': {
+            saveHeartColorFlash: {
                 '0%': {
                     fill: 'rgb(var(--hui-save-color-critical-500, var(--color-critical-500)))',
                 },
@@ -96,49 +129,161 @@ export const themePlugin = plugin(
                     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': {
+            saveHeartPop: {
                 '0%': { transform: 'scale(1)' },
                 '20%': { transform: 'scale(0.6)' },
                 '60%': { transform: 'scale(1.35)' },
                 '100%': { transform: 'scale(1)' },
             },
-            // Save/Favorite button animated variant — shimmer and color-flash helpers.
-            // Placed in addBase (not addComponents) so Vite's PostCSS pipeline emits
-            // them unconditionally. addComponents is subject to caching discrepancies
-            // in this monorepo's Storybook build that prevent new rules from landing.
-            '.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',
-                },
+            saveHeartTwirlBloom: {
+                '0%': { transform: 'rotateY(0deg) scale(1)' },
+                '30%': { transform: 'rotateY(54deg) scale(1.15)' },
+                '100%': { transform: 'rotateY(180deg) scale(1)' },
             },
-            '.hui-fb-color-flash .hui-fb-icon-frame svg path': {
-                animation: 'saveHeartColorFlash 1100ms cubic-bezier(0.45, 0, 0.55, 1) 1',
-                animationFillMode: 'forwards',
+            saveLabelShimmer: {
+                '0%': { backgroundPosition: '200% center' },
+                '100%': { backgroundPosition: '-200% center' },
             },
-            '@media (prefers-reduced-motion: reduce)': {
-                '.hui-fb-color-flash .hui-fb-icon-frame svg path': {
-                    animation: 'none !important',
-                },
+            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,
+};
+
+export const pluginComponentStyles = {
+    '.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': {
+        /* Safari and Chrome */
+        '&::-webkit-scrollbar': {
+            display: 'block',
+        },
+        /* IE and Edge */
+        '-ms-overflow-style': 'auto',
+        /* Firefox */
+        'scrollbar-width': 'auto',
+    },
+    '.scrollbar-hide': {
+        /* Safari and Chrome */
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
+        /* IE and Edge */
+        '-ms-overflow-style': 'none',
+        /* Firefox */
+        'scrollbar-width': 'none',
+    },
+};
+
+// Save/Favorite button keyframes — emitted unconditionally via addBase so they are
+// available in all consumer builds regardless of Tailwind content scanning.
+// The corresponding animate-* utilities are registered in theme.extend.animation.
+export const pluginBaseStyles = {
+    '@keyframes saveButtonWiggle': {
+        '0%, 100%': { transform: 'rotate(0deg) scale(1)' },
+        '10%': { transform: 'rotate(-4deg) scale(1.02)' },
+        '25%': { transform: 'rotate(3.5deg) scale(1.02)' },
+        '40%': { transform: 'rotate(-2.5deg) scale(1.015)' },
+        '55%': { transform: 'rotate(2deg) scale(1.015)' },
+        '70%': { transform: 'rotate(-1deg) scale(1.01)' },
+        '85%': { transform: 'rotate(0.5deg) scale(1)' },
+    },
+    '@keyframes saveHeartTwirlBloom': {
+        '0%': { transform: 'rotateY(0deg) scale(1)' },
+        '30%': { transform: 'rotateY(54deg) scale(1.15)' },
+        '100%': { transform: 'rotateY(180deg) 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)' },
+    },
+    // Save/Favorite button animated variant — shimmer and color-flash helpers.
+    // Placed in addBase (not addComponents) so Vite's PostCSS pipeline emits
+    // them unconditionally. addComponents is subject to caching discrepancies
+    // in this monorepo's Storybook build that prevent new rules from landing.
+    '.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 500ms cubic-bezier(0.45, 0, 0.55, 1) 1',
+        animationFillMode: 'forwards',
+    },
+    // Reduced-motion gating for the whole animation registry (DS-95). This replaces the
+    // per-selector `animation: none` block that used to live here — see
+    // `./reducedMotion` for why duration-collapse rather than removal, and why the
+    // `.hui-fb-shimmer` paint block above is a deliberate exception to it.
+    ...buildReducedMotionBase(),
+};
+
+export const themePlugin = plugin(
+    ({ addBase, addComponents, matchUtilities }) => {
+        // https://tailwindcss.com/docs/plugins#css-in-js-syntax
+        addComponents(textComponents);
+        addComponents(pluginComponentStyles);
+        addBase(pluginBaseStyles);
 
         matchUtilities({
             'grid-area': (value) => {
@@ -149,160 +294,6 @@ export const themePlugin = plugin(
         });
     },
     {
-        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,
-        },
+        theme: tailwindTheme,
     }
 );