@rysinal/heroui-vue-styles 0.0.1

package/src/variants/index.css

@@ -0,0 +1,106 @@
+/**
+ * ================================================================================================
+ * HeroUI Custom Tailwind CSS Variants
+ * ================================================================================================
+ *
+ * Custom variants with intelligent fallback: explicit controls override system preferences.
+ *
+ * Usage:
+ *   motion-reduce:opacity-0      - Reduced motion accessibility
+ *   motion-safe:animate-spin     - Full motion effects
+ *   dark:bg-gray-900             - Dark mode styles
+ *
+ * Priority: Explicit data attributes/classes → System preferences (fallback)
+ * ================================================================================================
+ */
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-reduce — Minimize animations for accessibility
+ * Priority: data-reduce-motion="true" → prefers-reduced-motion: reduce
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-reduce {
+  /* Explicit: data-reduce-motion="true" on element or ancestor */
+  &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers-reduced-motion setting */
+  @media (prefers-reduced-motion: reduce) {
+    &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-safe — Enable full animations and transitions
+ * Priority: data-reduce-motion="false" → prefers-reduced-motion: no-preference
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-safe {
+  /* Explicit: data-reduce-motion="false" on element or ancestor */
+  &:is([data-reduce-motion="false"], [data-reduce-motion="false"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system has no motion preference set */
+  @media (prefers-reduced-motion: no-preference) {
+    &:not(
+      :is(
+        [data-reduce-motion="true"],
+        [data-reduce-motion="true"] *,
+        [data-reduce-motion="false"],
+        [data-reduce-motion="false"] *
+      )
+    ) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * dark — Dark mode styles
+ * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant dark {
+  /* Explicit: .dark class or data-theme="dark" on element or ancestor */
+  &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers dark color scheme */
+  @media (prefers-color-scheme: dark) {
+    &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}