luxen-ui 0.22.0 → 0.23.0

package/dist/css/base.css

@@ -4,9 +4,7 @@
    - css-extras CSS utility functions
 
    Imports zero tokens. Use this if you want to swap the token layer entirely
-   (e.g. plug in Radix UI primitives + your own aliases). */
-
-/**
+   (e.g. plug in Radix UI primitives + your own aliases). *//**
 CSS Extras - A collection of useful CSS custom functions
 
 @author Sindre Sorhus
@@ -24,7 +22,6 @@ Negates a value (returns the negative).
 @returns {Number} The negated value.
 @example padding: --negate(1em);
 */
-
 @function --negate(--value) {
 	result: calc(-1 * var(--value));
 }
@@ -38,7 +35,6 @@ Linear interpolation between two values.
 @returns {Number} Interpolated value.
 @example width: --lerp(100px, 200px, 0.5);
 */
-
 @function --lerp(--from, --to, --progress) {
 	result: calc(var(--from) + (var(--to) - var(--from)) * var(--progress));
 }
@@ -54,7 +50,6 @@ Maps a value from one range to another.
 @returns {Number} Mapped value.
 @example font-size: --map-range(50vw, 320px, 1920px, 14px, 24px);
 */
-
 @function --map-range(--value, --in-min, --in-max, --out-min, --out-max) {
 	--progress: clamp(0, calc((var(--value) - var(--in-min)) / (var(--in-max) - var(--in-min))), 1);
 	result: calc(var(--out-min) + (var(--out-max) - var(--out-min)) * var(--progress));
@@ -68,7 +63,6 @@ Returns the ratio of two values. Supports values with different units, unlike re
 @returns {Number} The ratio between two values.
 @example scale: --ratio(16px, 1em);
 */
-
 @function --ratio(--value, --to-value) {
 	result: tan(atan2(var(--value), var(--to-value)));
 }
@@ -85,7 +79,6 @@ Returns a semi-transparent version of any color.
 @returns {Color} Color with opacity.
 @example background: --opacity(blue, 50%);
 */
-
 @function --opacity(--color, --opacity) {
 	result: rgb(from var(--color) r g b / var(--opacity));
 }
@@ -100,7 +93,6 @@ Uses OKLab color space for perceptually uniform mixing.
 @returns {Color} Lightened color.
 @example background: --tint(blue, 20%);
 */
-
 @function --tint(--color, --amount: 10%) {
 	result: color-mix(in oklab, var(--color), white var(--amount));
 }
@@ -115,7 +107,6 @@ Uses OKLab color space for perceptually uniform mixing.
 @returns {Color} Darkened color.
 @example background: --shade(blue, 20%);
 */
-
 @function --shade(--color, --amount: 10%) {
 	result: color-mix(in oklab, var(--color), black var(--amount));
 }
@@ -130,7 +121,6 @@ Uses OKLCH color space for perceptually uniform chroma adjustment. Chroma is cla
 @returns {Color} Adjusted color.
 @example color: --saturate(red, 1.5);
 */
-
 @function --saturate(--color, --amount: 1.2) {
 	result: oklch(from var(--color) l clamp(0, calc(c * var(--amount)), 0.4) h);
 }
@@ -145,7 +135,6 @@ Uses OKLCH color space for perceptually uniform lightness adjustment. Maintains
 @returns {Color} Adjusted color.
 @example background: --lighten(blue, 20%);
 */
-
 @function --lighten(--color, --amount: 10%) {
 	result: oklch(from var(--color) clamp(0, calc(l + var(--amount) / 100%), 1) c h);
 }
@@ -160,7 +149,6 @@ Uses OKLCH color space for perceptually uniform lightness adjustment. Unlike `--
 @returns {Color} Darkened color.
 @example background: --darken(blue, 20%);
 */
-
 @function --darken(--color, --amount: 10%) {
 	result: oklch(from var(--color) clamp(0, calc(l - var(--amount) / 100%), 1) c h);
 }
@@ -175,7 +163,6 @@ Uses OKLCH color space for perceptually uniform hue rotation.
 @returns {Color} Color with rotated hue.
 @example background: --rotate-hue(blue, 180deg);
 */
-
 @function --rotate-hue(--color, --degrees: 30deg) {
 	result: oklch(from var(--color) l c calc(h + var(--degrees)));
 }
@@ -189,7 +176,6 @@ Uses OKLCH color space for perceptually accurate complementary colors.
 @returns {Color} Complementary color.
 @example border-color: --complement(blue);
 */
-
 @function --complement(--color) {
 	result: oklch(from var(--color) l c calc(h + 180deg));
 }
@@ -201,7 +187,6 @@ Inverts a color.
 @returns {Color} Inverted color.
 @example background: --invert(white);
 */
-
 @function --invert(--color) {
 	result: rgb(from var(--color) calc(255 - r) calc(255 - g) calc(255 - b) / alpha);
 }
@@ -215,7 +200,6 @@ Uses OKLCH color space by setting chroma to 0.
 @returns {Color} Grayscale color.
 @example filter: --grayscale(var(--brand-color));
 */
-
 @function --grayscale(--color) {
 	result: oklch(from var(--color) l 0 h);
 }
@@ -223,7 +207,6 @@ Uses OKLCH color space by setting chroma to 0.
 /*
 Uses HWB color space trick: converts to grayscale in OKLCH, then uses HWB's blackness/whiteness values amplified by a large multiplier to create a binary black/white decision based on brightness. This provides excellent contrast decisions without needing numeric luminance extraction.
 */
-
 /**
 Returns black or white text color for optimal contrast on a background.
 
@@ -231,7 +214,6 @@ Returns black or white text color for optimal contrast on a background.
 @returns {Color} Black or white for optimal readability.
 @example color: --text-on(var(--bg-color));
 */
-
 @function --text-on(--bg) {
 	result: hwb(from oklch(from var(--bg) l 0 0) h calc((b - 50) * 999) calc((w - 50) * 999));
 }
@@ -243,7 +225,6 @@ Removes transparency from a color, making it fully opaque.
 @returns {Color} Fully opaque version of the color.
 @example background: --opaque(var(--semi-transparent-bg));
 */
-
 @function --opaque(--color) {
 	result: rgb(from var(--color) r g b / 1);
 }
@@ -259,7 +240,6 @@ Uses perceptually uniform OKLab color space for natural-looking color mixing.
 @returns {Color} Mixed color.
 @example background: --mix(red, blue, 30%);
 */
-
 @function --mix(--color1, --color2, --amount: 50%) {
 	result: color-mix(in oklab, var(--color1), var(--color2) var(--amount));
 }
@@ -274,7 +254,6 @@ Triadic colors are evenly spaced around the color wheel (120° apart).
 @returns {Color} Triadic color.
 @example color: --triadic(blue, 1);
 */
-
 @function --triadic(--color, --index: 1) {
 	result: oklch(from var(--color) l c calc(h + 120deg * var(--index)));
 }
@@ -289,7 +268,6 @@ Tetradic colors are evenly spaced around the color wheel (90° apart).
 @returns {Color} Tetradic color.
 @example color: --tetradic(blue, 2);
 */
-
 @function --tetradic(--color, --index: 1) {
 	result: oklch(from var(--color) l c calc(h + 90deg * var(--index)));
 }
@@ -301,7 +279,6 @@ Creates a semi-transparent black.
 @returns {Color} Semi-transparent black.
 @example box-shadow: 0 2px 4px --black(20%);
 */
-
 @function --black(--opacity: 50%) {
 	result: rgb(0 0 0 / var(--opacity));
 }
@@ -313,7 +290,6 @@ Creates a semi-transparent white.
 @returns {Color} Semi-transparent white.
 @example background: --white(90%);
 */
-
 @function --white(--opacity: 50%) {
 	result: rgb(255 255 255 / var(--opacity));
 }
@@ -334,7 +310,6 @@ NOTE: This function is mathematically equivalent to `--responsive-value()` but o
 @returns {Length} Fluid font size.
 @example font-size: --fluid-type(16px, 24px, 320px, 1280px);
 */
-
 @function --fluid-type(--min, --max, --min-viewport: 320px, --max-viewport: 1280px) {
 	--slope: calc((var(--max) - var(--min)) / (var(--max-viewport) - var(--min-viewport)));
 	--intercept: calc(var(--min) - var(--slope) * var(--min-viewport));
@@ -350,7 +325,6 @@ Creates a modular scale value.
 @returns {Length} Scaled value.
 @example font-size: --modular-scale(1rem, 1.25, 3);
 */
-
 @function --modular-scale(--base: 1rem, --ratio: 1.25, --step: 0) {
 	result: calc(var(--base) * pow(var(--ratio), var(--step)));
 }
@@ -365,7 +339,6 @@ Returns a length (e.g., 24px) rather than a unitless ratio. Use this when you ne
 @returns {Length} Line height as a length.
 @example line-height: --line-height-length(16px, 1.6);
 */
-
 @function --line-height-length(--font-size, --multiplier: 1.5) {
 	result: calc(var(--font-size) * var(--multiplier));
 }
@@ -380,7 +353,6 @@ Returns a number (e.g., 1.5) which is recommended for better inheritance in CSS.
 @returns {Number} Unitless line height ratio.
 @example line-height: --line-height-ratio(24px, 16px);
 */
-
 @function --line-height-ratio(--line-height, --font-size) {
 	result: calc(var(--line-height) / var(--font-size));
 }
@@ -395,7 +367,6 @@ NOTE: Only works correctly with pixel font sizes. For rem/em values, use `--line
 @returns {Number} Unitless line height.
 @example line-height: --line-height-unitless(16px, 1.5);
 */
-
 @function --line-height-unitless(--font-size: 16px, --multiplier: 1.5) {
 	result: calc(var(--font-size) * var(--multiplier) / 1px);
 }
@@ -412,7 +383,6 @@ Creates responsive sidebar layout columns.
 @returns {Length} Grid template columns value.
 @example grid-template-columns: --sidebar-layout(250px, 20ch);
 */
-
 @function --sidebar-layout(--sidebar-width: 20ch, --content-min: 20ch) {
 	result: minmax(var(--sidebar-width), 1fr) minmax(var(--content-min), 3fr);
 }
@@ -425,7 +395,6 @@ Conditional border radius that removes at viewport edges.
 @returns {Length} Computed border radius.
 @example border-radius: --conditional-radius(1rem, 8px);
 */
-
 @function --conditional-radius(--radius, --edge-dist: 4px) {
 	/* Multiply by large number to amplify small differences, creating binary 0/radius effect */
 	result: clamp(0px, ((100vw - var(--edge-dist)) - 100%) * 1e5, var(--radius));
@@ -443,7 +412,6 @@ NOTE: This function is mathematically equivalent to `--fluid-type()` but uses a
 @returns {Length} Responsive value.
 @example padding: --responsive-value(1rem, 2rem, 320px, 1200px);
 */
-
 @function --responsive-value(--small, --large, --viewport-min: 320px, --viewport-max: 1200px) {
 	--progress: calc((100vw - var(--viewport-min)) / (var(--viewport-max) - var(--viewport-min)));
 	--clamped-progress: clamp(0, var(--progress), 1);
@@ -459,7 +427,6 @@ Calculates height from aspect ratio and maximum constraints.
 @returns {Length} Computed height.
 @example height: --aspect-height(16/9, 100vw, 100vh);
 */
-
 @function --aspect-height(--ratio: 1, --max-width: 100%, --max-height: 100%) {
 	--computed-height: calc(var(--max-width) / var(--ratio));
 	result: min(var(--computed-height), var(--max-height));
@@ -474,7 +441,6 @@ Calculates width from aspect ratio and maximum constraints.
 @returns {Length} Computed width.
 @example width: --aspect-width(16/9, 100vh, 100vw);
 */
-
 @function --aspect-width(--ratio: 1, --max-height: 100%, --max-width: 100%) {
 	--computed-width: calc(var(--max-height) * var(--ratio));
 	result: min(var(--computed-width), var(--max-width));
@@ -494,7 +460,6 @@ Recommended range: 0-10. Higher values create exponentially larger spacing.
 @returns {Length} Computed spacing.
 @example margin: --spacing(3);
 */
-
 @function --spacing(--level: 1, --base: 0.25rem) {
 	result: calc(var(--base) * pow(2, var(--level)));
 }
@@ -507,7 +472,6 @@ Creates inset spacing for containers.
 @returns {Length} Responsive padding.
 @example padding: --container-padding(2rem, 1200px);
 */
-
 @function --container-padding(--padding: 1rem, --max-width: 1200px) {
 	--available: calc(100vw - var(--max-width));
 	--side-space: max(var(--padding), calc(var(--available) / 2));
@@ -525,7 +489,6 @@ Creates a simple easing curve value.
 @returns {Number} Eased value.
 @example transform: translateY(--ease-out(var(--progress)));
 */
-
 @function --ease-out(--progress) {
 	--inverse: calc(1 - var(--progress));
 	result: calc(1 - var(--inverse) * var(--inverse));
@@ -539,7 +502,6 @@ Creates elastic easing.
 @returns {Number} Eased value.
 @example transform: scale(--elastic-ease(var(--progress), 1.2));
 */
-
 @function --elastic-ease(--progress, --amplitude: 1) {
 	--p: calc(var(--progress) * 3.14159);
 	result: calc(var(--amplitude) * sin(var(--p) * 10) * exp(calc(-5 * var(--progress))));
@@ -557,7 +519,6 @@ Converts pixels to rem.
 @returns {Length} Rem value.
 @example font-size: --px-to-rem(24px);
 */
-
 @function --px-to-rem(--pixels, --base: 16px) {
 	result: calc(var(--pixels) / var(--base) * 1rem);
 }
@@ -570,7 +531,6 @@ Converts rem to pixels.
 @returns {Length} Pixel value.
 @example width: --rem-to-px(2rem);
 */
-
 @function --rem-to-px(--rems, --base: 16px) {
 	result: calc(var(--rems) / 1rem * var(--base));
 }
@@ -587,7 +547,6 @@ Creates responsive grid columns.
 @returns {Grid} Grid template columns value.
 @example grid-template-columns: --auto-grid(250px, 4);
 */
-
 @function --auto-grid(--min-width: 250px, --max-cols: 4) {
 	result: repeat(
 		auto-fit,
@@ -605,7 +564,6 @@ Ensures the span is an integer value.
 @returns {Span} Grid column span (rounded to integer).
 @example grid-column: --grid-span(3, 12);
 */
-
 @function --grid-span(--columns: 1, --total: 12) {
 	result: span round(clamp(1, var(--columns), var(--total)));
 }
@@ -625,7 +583,6 @@ Generates three shadow layers. The spread-factor controls how distributed the sh
 @returns {Shadow} Layered box shadow.
 @example box-shadow: --smooth-shadow(black, 20px, 3);
 */
-
 @function --smooth-shadow(--color: rgb(0 0 0 / 0.2), --size: 12px, --spread-factor: 3) {
 	--step: calc(var(--size) / var(--spread-factor));
 	result:
@@ -643,7 +600,6 @@ Creates a glow effect.
 @returns {Shadow} Glow shadow.
 @example box-shadow: --glow(cyan, 10px, 0.5);
 */
-
 @function --glow(--color: white, --size: 10px, --intensity: 0.5) {
 	result: 0 0 var(--size) rgb(from var(--color) r g b / var(--intensity));
 }
@@ -668,7 +624,6 @@ Works with ANY value type (colors, lengths, etc.), not just colors.
 @example background-image: --light-dark(url(light.svg), url(dark.svg));
 @example padding: --light-dark(0.75rem, 1rem);
 */
-
 @function --light-dark(--light, --dark) {
 	result: if(color-scheme(dark): var(--dark); else: var(--light));
 }
@@ -687,13 +642,11 @@ In dark mode, mixes the base color with black (default 15% black).
 @returns {Color} Theme-adjusted color.
 @example background: --theme-color(blue, 80%, 20%);
 */
-
 @function --theme-color(--base, --light-mix: 85%, --dark-mix: 15%) {
 	--light-result: color-mix(in oklab, white var(--light-mix), var(--base));
 	--dark-result: color-mix(in oklab, black var(--dark-mix), var(--base));
 	result: if(color-scheme(dark): var(--dark-result); else: var(--light-result));
 }
-
 @layer base {
   .l-visually-hidden {
     /* Visually hide this, but keep it accessible to keyboard,