nuxt-ui-elements 0.1.3 → 0.1.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.3",
+  "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,41 +35,68 @@ 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)'
      *
-     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     * 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-200' - Light Tailwind color for subtle effect
-     * @example 'blue-600' - Dark Tailwind color for bold effect
-     * @example '#e0f2fe' - Direct hex color value (light blue)
+     * @example 'blue-500' - Tailwind color
+     * @example '#3b82f6' - Direct hex color value
      *
      * @default 'neutral'
      */
     color?: ColorInput;
     /**
-     * Opacity/visibility of the grid squares.
-     * Controls how transparent the grid appears.
+     * Lightness adjustment in OKLCH color space (0-100).
      *
-     * - 0: Completely invisible
-     * - 0.3: Subtle, background texture
-     * - 0.5: Medium visibility
-     * - 0.8: Bold, prominent
-     * - 1: Fully opaque
+     * 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).
      *
-     * Range: 0-1
+     * 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)
      *
-     * @default 0.5
+     * 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;
+    /**
+     * 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.
+     *
+     * 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;
     /**
-     * Dark mode overrides for color and opacity.
+     * 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', opacity: 0.3 }
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
     dark?: {
         color?: ColorInput;
+        lightness?: number;
         opacity?: number;
     };
     /**

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 { darkenColor, oklchToRgb } from "../../composables/useThemeColors";
+import { adjustLightness, darkenColor, oklchToRgb } from "../../composables/useThemeColors";
 import {
   resolveColor
 } from "../../composables/useColorResolver";
@@ -16,7 +16,8 @@ const {
   gap = 9,
   speed = 5,
   color = "neutral",
-  opacity = 0.5,
+  lightness = 95,
+  opacity = 50,
   ...props
 } = defineProps({
   size: { type: Number, required: false },
@@ -24,6 +25,7 @@ const {
   speed: { type: Number, required: false },
   fade: { type: String, required: false },
   color: { type: null, required: false },
+  lightness: { type: Number, required: false },
   opacity: { type: Number, required: false },
   dark: { type: Object, required: false },
   ui: { type: null, required: false }
@@ -36,11 +38,15 @@ const effectiveColor = computed(() => {
   }
   return color;
 });
-const effectiveOpacity = computed(() => {
-  if (isDark.value && props.dark?.opacity !== void 0) {
-    return props.dark.opacity;
+const effectiveLightness = computed(() => {
+  if (isDark.value && props.dark?.lightness !== void 0) {
+    return props.dark.lightness;
   }
-  return opacity;
+  return lightness;
+});
+const effectiveOpacity = computed(() => {
+  const opacityValue = isDark.value && props.dark?.opacity !== void 0 ? props.dark.opacity : opacity;
+  return opacityValue / 100;
 });
 const internalSpeed = computed(() => {
   return speed * 0.01;
@@ -88,8 +94,9 @@ function parseColor(color2) {
 }
 const gridColors = computed(() => {
   const baseColor = resolveColor(effectiveColor.value);
-  const baseRgb = oklchToRgb(baseColor);
-  const darkerColor = darkenColor(baseColor, 10);
+  const adjustedColor = adjustLightness(baseColor, effectiveLightness.value);
+  const baseRgb = oklchToRgb(adjustedColor);
+  const darkerColor = darkenColor(adjustedColor, 10);
   const flickerRgb = oklchToRgb(darkerColor);
   return {
     base: parseColor(baseRgb),
@@ -218,8 +225,10 @@ watch(
     () => size,
     () => gap,
     () => color,
+    () => lightness,
     () => opacity,
     () => props.dark?.color,
+    () => props.dark?.lightness,
     () => props.dark?.opacity
   ],
   () => {

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

@@ -35,41 +35,68 @@ 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)'
      *
-     * Choose lighter shades (e.g., 'blue-200') for subtle backgrounds or darker shades (e.g., 'blue-600') for bolder effects.
+     * 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-200' - Light Tailwind color for subtle effect
-     * @example 'blue-600' - Dark Tailwind color for bold effect
-     * @example '#e0f2fe' - Direct hex color value (light blue)
+     * @example 'blue-500' - Tailwind color
+     * @example '#3b82f6' - Direct hex color value
      *
      * @default 'neutral'
      */
     color?: ColorInput;
     /**
-     * Opacity/visibility of the grid squares.
-     * Controls how transparent the grid appears.
+     * Lightness adjustment in OKLCH color space (0-100).
      *
-     * - 0: Completely invisible
-     * - 0.3: Subtle, background texture
-     * - 0.5: Medium visibility
-     * - 0.8: Bold, prominent
-     * - 1: Fully opaque
+     * 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).
      *
-     * Range: 0-1
+     * 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)
      *
-     * @default 0.5
+     * 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;
+    /**
+     * 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.
+     *
+     * 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;
     /**
-     * Dark mode overrides for color and opacity.
+     * 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', opacity: 0.3 }
+     * @example { color: 'blue-300', lightness: 90, opacity: 0.3 }
      */
     dark?: {
         color?: ColorInput;
+        lightness?: number;
         opacity?: number;
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.3",
+  "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",