nuxt-ui-elements 0.1.2 → 0.1.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/background/FlickeringGrid.d.vue.ts

@@ -35,6 +35,8 @@ export interface FlickeringGridProps {
      * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
      * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
      *
+     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
+     *
      * @example 'primary' - Nuxt UI semantic color
      * @example 'blue-500' - Tailwind color
      * @example '#3b82f6' - Direct hex color value
@@ -43,20 +45,60 @@ export interface FlickeringGridProps {
      */
     color?: ColorInput;
     /**
-     * Lightness value for the grid (controls how light/subtle the grid appears)
-     * Range: 0-100, where higher values = lighter/more subtle
+     * Lightness adjustment in OKLCH color space (0-100).
+     *
+     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
+     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
+     *
+     * Think of it as a "color brightness" slider:
+     * - Lower values (70-80): Darker, more saturated, vibrant colors
+     * - Medium values (85-92): Balanced, natural colors
+     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
+     *
+     * Use cases:
+     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
+     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
+     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
+     *
+     * Range: 0-100
      * @default 95
      */
     lightness?: number;
     /**
-     * Fine-grained element customization (similar to Nuxt UI's ui prop)
+     * Opacity/transparency of the grid squares (0-100).
+     *
+     * Controls how see-through the grid is WITHOUT changing the color itself.
+     * This is pure transparency - the color stays the same, just more/less visible.
      *
-     * @example { colorDark: 'blue-300' } - Override color for dark mode
+     * Think of it as a "visibility" slider:
+     * - 0: Completely invisible (transparent)
+     * - 30: Very subtle, barely visible
+     * - 50: Medium visibility
+     * - 80: Bold, prominent
+     * - 100: Fully opaque, no transparency
+     *
+     * Use cases:
+     * - Gentle texture: `opacity={20}` → Barely visible background pattern
+     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
+     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
+     *
+     * Range: 0-100
+     * @default 50
      */
+    opacity?: number;
     /**
-     * Override color specifically for dark mode
+     * Dark mode overrides for color, lightness, and opacity.
+     *
+     * Allows you to customize the grid appearance specifically for dark mode.
+     * Any property not specified will use the default light mode value.
+     *
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
-    colorDark?: ColorInput;
+    dark?: {
+        color?: ColorInput;
+        lightness?: number;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */

package/dist/runtime/components/background/FlickeringGrid.vue

@@ -7,7 +7,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useColorMode } from "#imports";
 import { tv } from "../../utils/tv";
 import theme from "../../themes/background-flickering-grid";
-import { adjustLightness, oklchToRgb } from "../../composables/useThemeColors";
+import { adjustLightness, darkenColor, oklchToRgb } from "../../composables/useThemeColors";
 import {
   resolveColor
 } from "../../composables/useColorResolver";
@@ -17,6 +17,7 @@ const {
   speed = 5,
   color = "neutral",
   lightness = 95,
+  opacity = 50,
   ...props
 } = defineProps({
   size: { type: Number, required: false },
@@ -25,30 +26,30 @@ const {
   fade: { type: String, required: false },
   color: { type: null, required: false },
   lightness: { type: Number, required: false },
-  colorDark: { type: null, required: false },
+  opacity: { type: Number, required: false },
+  dark: { type: Object, required: false },
   ui: { type: null, required: false }
 });
 const colorMode = useColorMode();
 const isDark = computed(() => colorMode.value === "dark");
 const effectiveColor = computed(() => {
-  if (isDark.value && props.colorDark) {
-    return props.colorDark;
+  if (isDark.value && props.dark?.color) {
+    return props.dark.color;
   }
   return color;
 });
-const internalSpeed = computed(() => {
-  return speed * 0.01;
+const effectiveLightness = computed(() => {
+  if (isDark.value && props.dark?.lightness !== void 0) {
+    return props.dark.lightness;
+  }
+  return lightness;
 });
 const effectiveOpacity = computed(() => {
-  const minLightness = 70;
-  const maxLightness = 100;
-  const maxOpacity = 0.8;
-  const minOpacity = 0.15;
-  const t = Math.max(
-    0,
-    Math.min(1, (lightness - minLightness) / (maxLightness - minLightness))
-  );
-  return maxOpacity - t * (maxOpacity - minOpacity);
+  const opacityValue = isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : opacity;
+  return opacityValue / 100;
+});
+const internalSpeed = computed(() => {
+  return speed * 0.01;
 });
 defineSlots();
 const ui = computed(() => tv(theme)());
@@ -93,10 +94,10 @@ function parseColor(color2) {
 }
 const gridColors = computed(() => {
   const baseColor = resolveColor(effectiveColor.value);
-  const lightnessBase = lightness;
-  const lightnessFlicker = Math.max(0, lightness - 10);
-  const baseRgb = oklchToRgb(adjustLightness(baseColor, lightnessBase));
-  const flickerRgb = oklchToRgb(adjustLightness(baseColor, lightnessFlicker));
+  const adjustedColor = adjustLightness(baseColor, effectiveLightness.value);
+  const baseRgb = oklchToRgb(adjustedColor);
+  const darkerColor = darkenColor(adjustedColor, 10);
+  const flickerRgb = oklchToRgb(darkerColor);
   return {
     base: parseColor(baseRgb),
     flicker: parseColor(flickerRgb)
@@ -146,13 +147,13 @@ function drawGrid(ctx, canvasWidth, canvasHeight, cols, rows, squares, dpr) {
   for (let i = 0; i < cols; i++) {
     for (let j = 0; j < rows; j++) {
       const idx = i * rows + j;
-      const opacity = squares[idx] ?? 0;
+      const opacity2 = squares[idx] ?? 0;
       let cellColor = colors.base;
-      let cellAlpha = opacity;
-      if (opacity > 0.5 * effectiveOpacity.value) {
-        const blendT = (opacity - 0.5 * effectiveOpacity.value) / (0.5 * effectiveOpacity.value);
+      let cellAlpha = opacity2;
+      if (opacity2 > 0.5 * effectiveOpacity.value) {
+        const blendT = (opacity2 - 0.5 * effectiveOpacity.value) / (0.5 * effectiveOpacity.value);
         cellColor = lerpColor(colors.base, colors.flicker, blendT);
-        cellAlpha = Math.min(1, opacity + 0.2);
+        cellAlpha = Math.min(1, opacity2 + 0.2);
       }
       ctx.fillStyle = rgbToString(cellColor, cellAlpha);
       ctx.fillRect(
@@ -219,9 +220,21 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   intersectionObserver?.disconnect();
 });
-watch([() => size, () => gap, () => color, () => lightness], () => {
-  updateCanvasSize();
-});
+watch(
+  [
+    () => size,
+    () => gap,
+    () => color,
+    () => lightness,
+    () => opacity,
+    () => props.dark?.color,
+    () => props.dark?.lightness,
+    () => props.dark?.opacity
+  ],
+  () => {
+    updateCanvasSize();
+  }
+);
 </script>
 
 <template>

package/dist/runtime/components/background/FlickeringGrid.vue.d.ts

@@ -35,6 +35,8 @@ export interface FlickeringGridProps {
      * - Tailwind colors: 'blue-500', 'red-600', 'slate-200', etc.
      * - Direct values: '#3b82f6', 'oklch(0.6 0.15 250)', 'rgb(59, 130, 246)'
      *
+     * This controls the base hue/color of the grid. Use `lightness` to adjust how bright/washed out it appears.
+     *
      * @example 'primary' - Nuxt UI semantic color
      * @example 'blue-500' - Tailwind color
      * @example '#3b82f6' - Direct hex color value
@@ -43,20 +45,60 @@ export interface FlickeringGridProps {
      */
     color?: ColorInput;
     /**
-     * Lightness value for the grid (controls how light/subtle the grid appears)
-     * Range: 0-100, where higher values = lighter/more subtle
+     * Lightness adjustment in OKLCH color space (0-100).
+     *
+     * Controls how bright or washed-out the color appears WITHOUT changing transparency.
+     * This modifies the color itself, making it closer to white (higher values) or more saturated (lower values).
+     *
+     * Think of it as a "color brightness" slider:
+     * - Lower values (70-80): Darker, more saturated, vibrant colors
+     * - Medium values (85-92): Balanced, natural colors
+     * - Higher values (93-100): Very light, pastel, washed-out colors (approaching white)
+     *
+     * Use cases:
+     * - Subtle background: `color="blue-500" lightness={95}` → Very light blue tint
+     * - Bold accent: `color="blue-500" lightness={75}` → Vibrant, saturated blue
+     * - Combined with opacity: `lightness={90} opacity={0.3}` → Medium-tone color, very transparent
+     *
+     * Range: 0-100
      * @default 95
      */
     lightness?: number;
     /**
-     * Fine-grained element customization (similar to Nuxt UI's ui prop)
+     * Opacity/transparency of the grid squares (0-100).
+     *
+     * Controls how see-through the grid is WITHOUT changing the color itself.
+     * This is pure transparency - the color stays the same, just more/less visible.
      *
-     * @example { colorDark: 'blue-300' } - Override color for dark mode
+     * Think of it as a "visibility" slider:
+     * - 0: Completely invisible (transparent)
+     * - 30: Very subtle, barely visible
+     * - 50: Medium visibility
+     * - 80: Bold, prominent
+     * - 100: Fully opaque, no transparency
+     *
+     * Use cases:
+     * - Gentle texture: `opacity={20}` → Barely visible background pattern
+     * - Strong effect: `opacity={80}` → Prominent, eye-catching grid
+     * - Combined with lightness: `lightness={95} opacity={50}` → Light color, medium transparency
+     *
+     * Range: 0-100
+     * @default 50
      */
+    opacity?: number;
     /**
-     * Override color specifically for dark mode
+     * Dark mode overrides for color, lightness, and opacity.
+     *
+     * Allows you to customize the grid appearance specifically for dark mode.
+     * Any property not specified will use the default light mode value.
+     *
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
-    colorDark?: ColorInput;
+    dark?: {
+        color?: ColorInput;
+        lightness?: number;
+        opacity?: number;
+    };
     /**
      * UI slot customization
      */

package/dist/runtime/composables/useThemeColors.d.ts

@@ -16,6 +16,13 @@ export declare function createOklch(l: number, c: number, h: number): string;
  * Accepts any valid CSS color string
  */
 export declare function adjustLightness(colorStr: string, targetLightness: number): string;
+/**
+ * Darken a color by reducing its lightness
+ * @param colorStr - Any valid CSS color string
+ * @param amount - Amount to reduce lightness by (in percentage points, 0-100)
+ * @returns Darkened color string
+ */
+export declare function darkenColor(colorStr: string, amount?: number): string;
 /**
  * Adjust the chroma (saturation) of a color while preserving lightness and hue
  */

package/dist/runtime/composables/useThemeColors.js

@@ -24,6 +24,16 @@ export function adjustLightness(colorStr, targetLightness) {
   oklch.l = targetLightness / 100;
   return formatCss(oklch);
 }
+export function darkenColor(colorStr, amount = 10) {
+  const parsed = parse(colorStr);
+  if (!parsed) return colorStr;
+  const oklch = toOklch(parsed);
+  if (!oklch || oklch.l === void 0) return colorStr;
+  const currentLightness = oklch.l * 100;
+  const newLightness = Math.max(0, currentLightness - amount);
+  oklch.l = newLightness / 100;
+  return formatCss(oklch);
+}
 export function adjustChroma(colorStr, targetChroma) {
   const parsed = parse(colorStr);
   if (!parsed) return colorStr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -55,7 +55,7 @@
     "lint:fix": "oxlint --fix --type-aware",
     "format": "oxfmt --write",
     "format:check": "oxfmt --check",
-    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish && git push --follow-tags",
+    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"