@rysinal/heroui-vue-styles 0.0.3 → 0.0.5

package/README.md

@@ -1,37 +1,49 @@
 # @rysinal/heroui-vue-styles
 
-Styles, Tailwind variants, and CSS entrypoints for `@rysinal/heroui-vue`.
+Styles and CSS entrypoints for `@rysinal/heroui-vue`.
 
-Most users should install this package together with the Vue component package:
+Most users should not use this package by itself. Install it together with the Vue component package:
 
 ```bash
-pnpm add @rysinal/heroui-vue @rysinal/heroui-vue-styles
+npm install @rysinal/heroui-vue @rysinal/heroui-vue-styles
+npm install -D tailwindcss @tailwindcss/vite
 ```
 
 ```bash
-npm install @rysinal/heroui-vue @rysinal/heroui-vue-styles
+pnpm add @rysinal/heroui-vue @rysinal/heroui-vue-styles
+pnpm add -D tailwindcss @tailwindcss/vite
 ```
 
 ```bash
 yarn add @rysinal/heroui-vue @rysinal/heroui-vue-styles
+yarn add -D tailwindcss @tailwindcss/vite
 ```
 
 ## Usage
 
-Import the global styles once in your app entry:
+If Tailwind CSS 4 is already configured in your app, keep your existing setup.
+For a Vite app, add the Tailwind plugin:
 
 ```ts
-import '@rysinal/heroui-vue-styles/styles.css'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [tailwindcss(), vue()],
+})
 ```
 
-For Tailwind CSS 4, include the Vue package in your CSS source scan:
+Add to your main CSS file, for example `src/style.css`:
 
 ```css
 @import "tailwindcss";
-@source "../node_modules/@rysinal/heroui-vue";
+@import "@rysinal/heroui-vue-styles/styles.css";
 ```
 
-The package also exposes compiled style utilities for advanced usage:
+Import order matters. Always import `tailwindcss` first.
+
+Advanced users can also import variant helpers directly:
 
 ```ts
 import { buttonVariants } from '@rysinal/heroui-vue-styles'

package/dist/components/text/text.styles.d.ts

@@ -14,7 +14,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-}, undefined, string[], {
+}, undefined, "text", {
     size: {
         base: string;
         lg: string;
@@ -44,6 +44,6 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-}, undefined, string[], unknown, unknown, undefined>>;
+}, undefined, "text", unknown, unknown, undefined>>;
 export type TextVariants = VariantProps<typeof textVariants>;
 //# sourceMappingURL=text.styles.d.ts.map

package/dist/components/text/text.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAsBvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
+{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAsBvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}

package/dist/components/text/text.styles.js

@@ -1,24 +1,24 @@
 import { tv } from 'tailwind-variants';
 export const textVariants = tv({
-    base: ['transition-colors duration-200'],
+    base: 'text',
     defaultVariants: {
         size: 'base',
         variant: 'default',
     },
     variants: {
         size: {
-            base: 'text-base',
-            lg: 'text-lg',
-            sm: 'text-sm',
-            xl: 'text-xl',
-            xs: 'text-xs',
+            base: 'text--base',
+            lg: 'text--lg',
+            sm: 'text--sm',
+            xl: 'text--xl',
+            xs: 'text--xs',
         },
         variant: {
-            danger: 'text-danger',
-            default: 'text-foreground',
-            muted: 'text-muted',
-            success: 'text-success',
-            warning: 'text-warning',
+            danger: 'text--danger',
+            default: 'text--default',
+            muted: 'text--muted',
+            success: 'text--success',
+            warning: 'text--warning',
         },
     },
 });

package/dist/components/text/text.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;IAC7B,IAAI,EAAE,CAAC,gCAAgC,CAAC;IACxC,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,WAAW;YACjB,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;SACd;QACD,OAAO,EAAE;YACP,MAAM,EAAE,aAAa;YACrB,OAAO,EAAE,iBAAiB;YAC1B,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;SACxB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM;IACZ,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,UAAU;SACf;QACD,OAAO,EAAE;YACP,MAAM,EAAE,cAAc;YACtB,OAAO,EAAE,eAAe;YACxB,KAAK,EAAE,aAAa;YACpB,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,eAAe;SACzB;KACF;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rysinal/heroui-vue-styles",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Styles for HeroUI Vue components",
   "keywords": [
     "heroui",
@@ -41,14 +41,14 @@
     "src"
   ],
   "dependencies": {
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.2.2",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.4",
     "tailwindcss": "^4.1.18",
-    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.3",
-    "@rysinal/heroui-vue-standard": "0.0.3"
+    "@rysinal/heroui-vue-standard": "0.0.5"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"

package/src/components/accordion.css

@@ -22,7 +22,13 @@
 }
 
 .accordion__indicator {
-  @apply ml-auto size-4 shrink-0 text-muted;
+  @apply ml-auto inline-flex size-4 shrink-0 items-center justify-center text-muted;
+  line-height: 1;
+  transform-origin: center;
+
+  & > svg {
+    @apply block size-full shrink-0;
+  }
 
   /**
    * Transitions

package/src/components/alert-dialog.css

@@ -217,9 +217,13 @@
 /**
  * Element: heading - the main title text
  */
-.alert-dialog__heading {
+.alert-dialog__heading,
+.alert-dialog__dialog .alert-dialog__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**

package/src/components/button.css

@@ -156,3 +156,7 @@
 .button--full-width {
   @apply w-full;
 }
+
+.button.w-full {
+  width: 100%;
+}

package/src/components/disclosure.css

@@ -3,8 +3,10 @@
   @apply relative;
 }
 
-.disclosure__heading {
+.disclosure .disclosure__heading {
   @apply flex;
+  margin: 0;
+  font: inherit;
 }
 
 .disclosure__trigger {
@@ -13,19 +15,25 @@
 
   /* Focus state */
   &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
+  &[data-focus-visible='true'] {
     @apply status-focused;
   }
 
   /* Disabled state */
   &:disabled,
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     @apply status-disabled;
   }
 }
 
 .disclosure__indicator {
-  @apply ml-auto size-4 shrink-0 text-inherit;
+  @apply ml-auto inline-flex size-4 shrink-0 items-center justify-center text-inherit;
+  line-height: 1;
+  transform-origin: center;
+
+  & > svg {
+    @apply block size-full shrink-0;
+  }
 
   /**
    * Transitions
@@ -33,7 +41,7 @@
   @apply transition duration-250 motion-reduce:transition-none;
 
   /* Expanded state for indicator rotation */
-  &[data-expanded="true"] {
+  &[data-expanded='true'] {
     @apply -rotate-180;
   }
 }
@@ -52,7 +60,7 @@
     opacity 200ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
-  &[data-expanded="true"] {
+  &[data-expanded='true'] {
     will-change: height, opacity;
     opacity: 1;
   }

package/src/components/drawer.css

@@ -43,7 +43,8 @@
  */
 .drawer__backdrop {
   @apply fixed inset-0 z-50;
-  @apply h-(--visual-viewport-height) w-full;
+  @apply w-full;
+  height: var(--visual-viewport-height, 100dvh);
   opacity: 1;
   transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
 
@@ -94,7 +95,8 @@
 .drawer__content {
   @apply pointer-events-none;
   @apply fixed inset-0 z-50 flex;
-  @apply h-(--visual-viewport-height) w-full min-w-0;
+  @apply w-full min-w-0;
+  height: var(--visual-viewport-height, 100dvh);
 }
 
 /**
@@ -224,9 +226,13 @@
 /**
  * Element: heading - the main title text
  */
-.drawer__heading {
+.drawer__heading,
+.drawer__dialog .drawer__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**
@@ -241,6 +247,11 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.drawer__header > :where(p):not([class]),
+.drawer__body > :where(p):not([class]) {
+  margin: 0;
+}
+
 /**
  * Element: footer - the bottom action section
  */

package/src/components/index.css

@@ -152,6 +152,7 @@
  * Typography
  * ------------------------------------------------------------------------------------------------ */
 @import "./kbd.css";
+@import "./text.css";
 
 /* ------------------------------------------------------------------------------------------------
  * Utilities

package/src/components/modal.css

@@ -63,6 +63,7 @@
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
+    --tw-animation-fill-mode: both;
     @apply motion-reduce:animate-none;
   }
 }
@@ -93,10 +94,11 @@
  */
 .modal__container {
   @apply flex flex-col items-center;
-  @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
+  @apply w-full min-w-0 flex-1;
   @apply p-4;
   @apply sm:w-fit sm:p-10;
   @apply pointer-events-none;
+  height: var(--visual-viewport-height, 100dvh);
 
   /* Entering animation */
   &[data-entering="true"] {
@@ -132,6 +134,7 @@
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];
+    --tw-animation-fill-mode: both;
     @apply motion-reduce:animate-none;
   }
 }
@@ -140,7 +143,7 @@
  * Modifier: container--scroll-outside
  */
 .modal__container--scroll-outside {
-  @apply overflow-y-auto;
+  @apply overflow-y-auto overscroll-contain;
   @apply pointer-events-auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -195,7 +198,7 @@
  * Modifier: dialog--scroll-inside
  */
 .modal__dialog--scroll-inside {
-  @apply overflow-hidden;
+  @apply max-h-full overflow-hidden;
 }
 
 /**
@@ -265,9 +268,13 @@
 /**
  * Element: heading - the main title text
  */
-.modal__heading {
+.modal__heading,
+.modal__dialog .modal__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**
@@ -279,6 +286,30 @@
   @apply rounded-full select-none;
 }
 
+.modal__icon.bg-default {
+  background-color: var(--color-default);
+}
+
+.modal__icon.bg-accent-soft {
+  background-color: var(--color-accent-soft);
+}
+
+.modal__icon.bg-success-soft {
+  background-color: var(--color-success-soft);
+}
+
+.modal__icon.text-foreground {
+  color: var(--color-foreground);
+}
+
+.modal__icon.text-accent-soft-foreground {
+  color: var(--color-accent-soft-foreground);
+}
+
+.modal__icon.text-success-soft-foreground {
+  color: var(--color-success-soft-foreground);
+}
+
 /**
  * Element: body - the main content area
  */
@@ -288,11 +319,16 @@
   @apply my-0;
 }
 
+.modal__header > :where(p),
+.modal__body > :where(p) {
+  margin: 0;
+}
+
 /**
  * Modifier: body--scroll-inside
  */
 .modal__body--scroll-inside {
-  @apply overflow-y-auto;
+  @apply overflow-y-auto overscroll-contain;
   -webkit-overflow-scrolling: touch;
 }
 

package/src/components/popover.css

@@ -62,8 +62,14 @@
 }
 
 /* Popover heading */
-.popover__heading {
+.popover__heading,
+.popover .popover__heading {
   @apply font-medium;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 /* Popover trigger */

package/src/components/text/text.styles.ts

@@ -2,25 +2,25 @@ import type { VariantProps } from 'tailwind-variants'
 import { tv } from 'tailwind-variants'
 
 export const textVariants = tv({
-  base: ['transition-colors duration-200'],
+  base: 'text',
   defaultVariants: {
     size: 'base',
     variant: 'default',
   },
   variants: {
     size: {
-      base: 'text-base',
-      lg: 'text-lg',
-      sm: 'text-sm',
-      xl: 'text-xl',
-      xs: 'text-xs',
+      base: 'text--base',
+      lg: 'text--lg',
+      sm: 'text--sm',
+      xl: 'text--xl',
+      xs: 'text--xs',
     },
     variant: {
-      danger: 'text-danger',
-      default: 'text-foreground',
-      muted: 'text-muted',
-      success: 'text-success',
-      warning: 'text-warning',
+      danger: 'text--danger',
+      default: 'text--default',
+      muted: 'text--muted',
+      success: 'text--success',
+      warning: 'text--warning',
     },
   },
 })

package/src/components/text.css

@@ -0,0 +1,45 @@
+/* Text component styles */
+
+.text {
+  @apply transition-colors duration-200;
+}
+
+.text--xs {
+  @apply text-xs;
+}
+
+.text--sm {
+  @apply text-sm;
+}
+
+.text--base {
+  @apply text-base;
+}
+
+.text--lg {
+  @apply text-lg;
+}
+
+.text--xl {
+  @apply text-xl;
+}
+
+.text--default {
+  color: var(--foreground);
+}
+
+.text--muted {
+  color: var(--muted);
+}
+
+.text--danger {
+  color: var(--danger);
+}
+
+.text--success {
+  color: var(--success);
+}
+
+.text--warning {
+  color: var(--warning);
+}

package/src/styles.css

@@ -2,10 +2,18 @@
 
 /* HeroUI v3 Styles - Layered Theme Architecture */
 
-/* Base layer - Tailwind CSS v4 */
-@import "tailwindcss";
+/* Make Tailwind utilities available to @apply without emitting Tailwind twice. */
+@reference "tailwindcss";
+
+/* External animation utilities used by overlay components. */
 @import "tw-animate-css";
 
+/*
+ * Do not @source component TypeScript here. Tailwind scans object keys as class
+ * candidates too, which can emit global layout utilities and collide with host
+ * themes like VitePress.
+ */
+
 /* Base styles */
 @import "./base/base.css" layer(base);
 

package/src/themes/shared/theme.css

@@ -191,3 +191,133 @@
     }
   }
 }
+
+@layer theme {
+  :root,
+  .light,
+  .default,
+  [data-theme="light"],
+  [data-theme="default"],
+  .dark,
+  [data-theme="dark"] {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-surface: var(--surface);
+    --color-surface-foreground: var(--surface-foreground);
+    --color-surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --color-surface-secondary: var(--surface-secondary);
+    --color-surface-secondary-foreground: var(--surface-secondary-foreground);
+    --color-surface-tertiary: var(--surface-tertiary);
+    --color-surface-tertiary-foreground: var(--surface-tertiary-foreground);
+    --color-overlay: var(--overlay);
+    --color-overlay-foreground: var(--overlay-foreground);
+    --color-muted: var(--muted);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-segment: var(--segment);
+    --color-segment-foreground: var(--segment-foreground);
+    --color-border: var(--border);
+    --color-separator: var(--separator);
+    --color-focus: var(--focus);
+    --color-link: var(--link);
+    --color-default: var(--default);
+    --color-default-foreground: var(--default-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-danger: var(--danger);
+    --color-danger-foreground: var(--danger-foreground);
+    --color-backdrop: var(--backdrop);
+    --shadow-surface: var(--surface-shadow);
+    --shadow-overlay: var(--overlay-shadow);
+    --shadow-field: var(--field-shadow);
+    --color-field: var(--field-background, var(--default));
+    --color-field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --color-field-foreground: var(--field-foreground, var(--foreground));
+    --color-field-placeholder: var(--field-placeholder, var(--muted));
+    --color-field-border: var(--field-border, var(--border));
+    --color-field-border-invalid: var(--danger);
+    --radius-field: var(--field-radius, calc(var(--radius) * 1.5));
+    --border-width-field: var(--field-border-width, var(--border-width));
+    --color-background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --color-background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --color-background-inverse: var(--foreground);
+    --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --color-success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --color-warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+    --color-field-focus: var(--field-background, var(--default));
+    --color-field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --color-field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+    --color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+    --color-accent-soft-foreground: var(--accent);
+    --color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+    --color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --color-danger-soft-foreground: var(--danger);
+    --color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+    --color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+    --color-warning-soft-foreground: var(--warning);
+    --color-warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+    --color-success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+    --color-success-soft-foreground: var(--success);
+    --color-success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+    --color-separator-secondary: color-mix(
+      in oklab,
+      var(--surface) 85%,
+      var(--surface-foreground) 15%
+    );
+    --color-separator-tertiary: color-mix(
+      in oklab,
+      var(--surface) 81%,
+      var(--surface-foreground) 19%
+    );
+    --color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --color-border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+    --radius-xs: calc(var(--radius) * 0.25);
+    --radius-sm: calc(var(--radius) * 0.5);
+    --radius-md: calc(var(--radius) * 0.75);
+    --radius-lg: calc(var(--radius) * 1);
+    --radius-xl: calc(var(--radius) * 1.5);
+    --radius-2xl: calc(var(--radius) * 2);
+    --radius-3xl: calc(var(--radius) * 3);
+    --radius-4xl: calc(var(--radius) * 4);
+    --ease-smooth: ease;
+    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+    --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
+    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    --ease-linear: linear;
+    --animate-spin-fast: spin 0.75s linear infinite;
+    --animate-skeleton: skeleton 2s linear infinite;
+    --animate-caret-blink: caret-blink 1.2s ease-out infinite;
+  }
+}