@nuvoui/core 1.3.5 → 1.4.0

package/src/styles/tools/_accessibility.scss

@@ -0,0 +1,50 @@
+// Section: Tools
+// Module: Accessibility
+// Description: Mixins for handling user preferences and accessibility
+
+@use "../config/feature-flags" as config-flags;
+
+// todo: doc
+/// Target system dark mode preference
+@mixin prefers-dark {
+    @media (prefers-color-scheme: dark) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Apply dark mode styles based on user and system preferences
+/// Respects the site's theme selection system
+@mixin dark-mode {
+    @if config-flags.$enable-dark-mode {
+        // Apply when user explicitly chooses dark
+        [data-theme="dark"] & {
+            @content;
+        }
+
+        // Apply when system is dark AND user hasn't made a choice
+        @media (prefers-color-scheme: dark) {
+            [data-theme="system"] & {
+                @content;
+            }
+        }
+    }
+}
+
+// todo: doc
+/// Target reduced motion preference
+/// @example @include reduced-motion { * { transition: none !important; } }
+@mixin reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Target high contrast mode
+/// @example @include high-contrast { border: 1px solid; }
+@mixin high-contrast {
+    @media (forced-colors: active) {
+        @content;
+    }
+}

package/src/styles/tools/_container-queries.scss

@@ -0,0 +1,98 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/container-queries" as config-container;
+@use "../functions/feature-flags" as fn-flags;
+@use "../functions/breakpoints" as fn-breakpoints;
+
+// Container Query Mixins
+// Usage:
+// .container {
+//   container-type: inline-size;
+//   container-name: sidebar;
+// }
+// .item {
+//   @include container-up('md', 'sidebar') {
+//     // Styles for 'md' and up within 'sidebar' container
+//   }
+// }
+
+// /Container Query: Up
+@mixin container-up($breakpoint, $containerName: null) {
+    $bp-val: fn-breakpoints.get-breakpoint-value($breakpoint);
+    @container #{$containerName} (min-width: #{$bp-val}) {
+        @content;
+    }
+}
+
+// /Container Query: Down
+@mixin container-down($breakpoint, $containerName: null) {
+    $bp-val: fn-breakpoints.get-breakpoint-value($breakpoint);
+    @container #{$containerName} (max-width: (#{ $bp-val } - 0.02px)) {
+        @content;
+    }
+}
+
+// /Container Query: Between
+@mixin container-between($lower, $upper, $containerName: null) {
+    $min: fn-breakpoints.get-breakpoint-value($lower);
+    $max: fn-breakpoints.get-breakpoint-value($upper);
+    @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $max } - 0.02px)) {
+        @content;
+    }
+}
+
+// /Container Query: Only
+@mixin container-only($breakpoint, $containerName: null) {
+    $min: fn-breakpoints.get-breakpoint-value($breakpoint);
+    $next-breakpoint: null;
+
+    @each $name, $width in config-breakpoint.$breakpoints {
+        @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
+            $next-breakpoint: $width;
+        }
+    }
+
+    @if $next-breakpoint {
+        @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @container #{$containerName} (min-width: #{$min}) {
+            @content;
+        }
+    }
+}
+
+// /Container Query: Query by Size
+@mixin container-query($size, $containerName: null) {
+    @container #{$containerName} (min-width: $size) {
+        @content;
+    }
+}
+
+@mixin container-type($type: inline-size) {
+    container-type: $type;
+}
+
+@mixin container-name($name) {
+    container-name: $name;
+}
+
+@if fn-flags.feature-enabled("container-queries") {
+    // Utility classes
+    #{config-flags.$parent-selector} .container-inline-size {
+        container-type: inline-size;
+    }
+
+    #{config-flags.$parent-selector} .container-size {
+        container-type: size;
+    }
+
+    @each $name in config-container.$container-names {
+        #{config-flags.$parent-selector} .container-#{$name} {
+            container-name: $name;
+        }
+    }
+}

package/src/styles/tools/_feature-support.scss

@@ -0,0 +1,46 @@
+// Section: Tools
+// Module: Device Capabilities
+// Description: Mixins for targeting device-specific capabilities
+
+// todo: doc
+/// Target touch devices
+/// @example @include touch { button { padding: 12px; } }
+@mixin touch {
+    @media (hover: none) and (pointer: coarse) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Target devices with precise pointing (mouse)
+/// @example @include fine-pointer { .tooltip { opacity: 0; } }
+@mixin fine-pointer {
+    @media (pointer: fine) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Target devices in landscape orientation
+@mixin landscape {
+    @media screen and (orientation: landscape) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Target devices in portrait orientation
+@mixin portrait {
+    @media screen and (orientation: portrait) {
+        @content;
+    }
+}
+
+// todo: doc
+/// Target Progressive Web App display modes
+/// @param {String} $mode - Display mode (standalone, fullscreen, minimal-ui, browser)
+@mixin display-mode($mode: "standalone") {
+    @media (display-mode: #{$mode}) {
+        @content;
+    }
+}

package/src/styles/tools/_media-queries.scss

@@ -0,0 +1,70 @@
+// Section: Utilities
+// Module: Media Queries
+
+@use "sass:map";
+@use "sass:string";
+@use "sass:math";
+@use "sass:meta";
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
+@use "../functions/units" as fn-units;
+@use "../functions/breakpoints" as fn-breakpoints;
+
+// @description Media query mixins.
+// @param {string|number} $breakpoint - The breakpoint value.
+// @param {string} $type - The media query type (e.g. 'lg', 'md').
+@mixin media-up($breakpoint, $debug: null) {
+    $blueprint-value: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($breakpoint, $debug));
+    $val: $blueprint-value - 0.01;
+    @media screen and (min-width: #{$val}) {
+        @content;
+    }
+}
+
+@mixin media-down($breakpoint) {
+    $blueprint-value: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($breakpoint));
+    $val: $blueprint-value - 0.01;
+    @media screen and (max-width: #{$val}) {
+        @content;
+    }
+}
+
+@mixin media-between($lower, $upper) {
+    $lower-val: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($lower));
+    $upper-val: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($upper));
+    $upper-val: $upper-val - 0.01;
+    @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
+        @content;
+    }
+}
+
+// Only at specific breakpoint
+@mixin media-only($breakpoint) {
+    @if meta.type-of($breakpoint) == "number" and math.is-unitless($breakpoint) {
+        @error "media-only() needs a breakpoint value";
+    }
+    $min: 0;
+    @if map.has-key(config-breakpoint.$breakpoints, $breakpoint) {
+        $min: fn-breakpoints.get-breakpoint-value($breakpoint);
+    } @else {
+        @error "media-only() needs a valid breakpoint value #{$breakpoint} is not in your $breakpoints map";
+    }
+
+    $next-breakpoint: null;
+
+    @each $name, $width in config-breakpoint.$breakpoints {
+        @if $width > $min and (meta.type-of($next-breakpoint) == "null" or $width < $next-breakpoint) {
+            $next-breakpoint: $width;
+        }
+    }
+
+    @if $next-breakpoint {
+        @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
+            @content;
+        }
+    } @else {
+        @media (min-width: #{$min}) {
+            @content;
+        }
+    }
+}

package/src/styles/tools/_modern-layout.scss

@@ -0,0 +1,49 @@
+// Section: Tools
+// Module: Modern Layout
+// Description: Mixins for modern CSS layout techniques
+
+// todo: doc
+/// Set aspect ratio with fallbacks
+/// @param {String} $ratio - Aspect ratio (e.g. "16/9")
+@mixin aspect-ratio($ratio) {
+    aspect-ratio: #{$ratio};
+}
+
+// todo: doc
+/// Use dynamic viewport height with fallback
+@mixin dvh {
+    @supports (height: 100dvh) {
+        height: 100dvh;
+    }
+
+    @supports not (height: 100dvh) {
+        height: 100vh;
+    }
+}
+
+// todo: doc
+/// Handle safe area insets for notches, etc.
+/// @param {String} $property - CSS property to apply inset to
+/// @param {String} $position - Inset position (top, right, bottom, left)
+@mixin safe-area-inset($property, $position) {
+    #{$property}: env(safe-area-inset-#{$position});
+}
+
+// todo: doc
+/// Target print media
+/// @example @include print { .nav { display: none; } }
+@mixin print {
+    @media print {
+        @content;
+    }
+}
+
+// todo: doc
+/// Check for feature support
+/// @param {String} $property - CSS property to check for support
+/// @example @include supports(display: grid) { .grid { display: grid; } }
+@mixin supports($property) {
+    @supports (#{$property}) {
+        @content;
+    }
+}

package/src/styles/utilities/_alignment.scss

@@ -1,50 +1,51 @@
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
 
 @mixin align-baseline {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 @mixin align-top {
-  vertical-align: top;
+    vertical-align: top;
 }
 @mixin align-middle {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 @mixin align-bottom {
-  vertical-align: bottom;
+    vertical-align: bottom;
 }
 
-@if FN.feature-enabled("alignments") {
-  #{VAR.$parent-selector} .align-baseline {
-    @include align-baseline;
-  }
-
-  #{VAR.$parent-selector} .align-top {
-    @include align-top;
-  }
-
-  #{VAR.$parent-selector} .align-middle {
-    @include align-middle;
-  }
-
-  #{VAR.$parent-selector} .align-bottom {
-    @include align-bottom;
-  }
-
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      #{VAR.$parent-selector} .align-baseline\@#{$breakpoint} {
+@if fn-flags.feature-enabled("alignments") {
+    #{config-flags.$parent-selector} .align-baseline {
         @include align-baseline;
-      }
-      #{VAR.$parent-selector} .align-top\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .align-top {
         @include align-top;
-      }
-      #{VAR.$parent-selector} .align-middle\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .align-middle {
         @include align-middle;
-      }
-      #{VAR.$parent-selector} .align-bottom\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .align-bottom {
         @include align-bottom;
-      }
     }
-  }
+
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            #{config-flags.$parent-selector} .align-baseline\@#{$breakpoint} {
+                @include align-baseline;
+            }
+            #{config-flags.$parent-selector} .align-top\@#{$breakpoint} {
+                @include align-top;
+            }
+            #{config-flags.$parent-selector} .align-middle\@#{$breakpoint} {
+                @include align-middle;
+            }
+            #{config-flags.$parent-selector} .align-bottom\@#{$breakpoint} {
+                @include align-bottom;
+            }
+        }
+    }
 }