@rysinal/heroui-vue-styles 0.0.3 → 0.0.4

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.4",
   "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.4"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"

package/src/components/index.css

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

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;
+  }
+}