@nuvoui/core 1.3.5 → 1.4.0

package/src/styles/components/_tooltips.scss

@@ -0,0 +1,271 @@
+@use "../config/feature-flags" as config-flags;
+@use "../functions/feature-flags" as fn-flags;
+@mixin tooltip-variables {
+    // Tooltip core variables
+    --tooltip-bg: rgba(17 17 17 / 90%);
+    --tooltip-shadow-color: rgb(0 0 0 / 20%);
+    --tooltip-text-color: #fff;
+
+    // Animation variables
+    --microtip-transition-duration: 0.18s;
+    --microtip-transition-easing: ease-in-out;
+    --microtip-transition-delay: 0s;
+
+    // config-typo variables
+    --microtip-font-size: 13px;
+    --microtip-font-weight: normal;
+    --microtip-text-transform: none;
+
+    // Sizing variables
+    --tooltip-small-width: 80px;
+    --tooltip-medium-width: 150px;
+    --tooltip-large-width: 260px;
+    --tooltip-border-radius: 4px;
+}
+
+@if fn-flags.feature-enabled("tooltips") {
+    // Apply variables based on parent selector
+    @if config-flags.$parent-selector == "" {
+        :root {
+            @include tooltip-variables;
+        }
+    } @else {
+        #{config-flags.$parent-selector} {
+            @include tooltip-variables;
+        }
+    }
+
+    #{config-flags.$parent-selector} [data-tooltip][role~="tooltip"] {
+        position: relative;
+
+        &::before,
+        &::after {
+            transform: translate3d(0, 0, 0);
+            backface-visibility: hidden;
+            will-change: transform;
+            opacity: 0;
+            pointer-events: none;
+            transition:
+                opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay),
+                transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
+            position: absolute;
+            box-sizing: border-box;
+            z-index: 10;
+            transform-origin: top;
+        }
+
+        &::before {
+            background-size: 100% auto !important;
+            content: "";
+        }
+
+        &::after {
+            background: var(--tooltip-bg);
+            box-shadow: 0 3px 7px var(--tooltip-shadow-color);
+            border-radius: var(--tooltip-border-radius);
+            color: var(--tooltip-text-color);
+            content: attr(data-tooltip);
+            font-size: var(--microtip-font-size);
+            font-weight: var(--microtip-font-weight);
+            text-transform: var(--microtip-text-transform);
+            padding: 0.5em 1em;
+            white-space: nowrap;
+            box-sizing: content-box;
+        }
+
+        &:hover::before,
+        &:hover::after,
+        &:focus::before,
+        &:focus::after {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    // Top position tooltips
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
+        &::before {
+            border-left: 9px solid transparent;
+            border-right: 9px solid transparent;
+            border-top: 6px solid var(--tooltip-bg);
+            height: 0;
+            width: 0;
+            margin-bottom: 6px;
+            transform: translate3d(-50%, 0, 0);
+            bottom: 100%;
+            left: 50%;
+            z-index: 999;
+        }
+
+        &::after {
+            margin-bottom: 11px;
+            transform: translate3d(-50%, 0, 0);
+            bottom: 100%;
+            left: 50%;
+        }
+
+        &:hover::before {
+            transform: translate3d(-50%, -5px, 0);
+        }
+
+        &:hover::after {
+            transform: translate3d(-50%, -5px, 0);
+        }
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
+        &::after {
+            transform: translate3d(calc(-100% + 16px), 0, 0);
+            bottom: 100%;
+        }
+
+        &:hover::after {
+            transform: translate3d(calc(-100% + 16px), -5px, 0);
+        }
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
+        &::after {
+            transform: translate3d(calc(0% + -16px), 0, 0);
+            bottom: 100%;
+        }
+
+        &:hover::after {
+            transform: translate3d(calc(0% + -16px), -5px, 0);
+        }
+    }
+
+    // Bottom position tooltips
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
+        &::before {
+            border-left: 9px solid transparent;
+            border-right: 9px solid transparent;
+            border-bottom: 6px solid var(--tooltip-bg);
+            height: 0;
+            width: 0;
+            margin-top: 5px;
+            margin-bottom: 0;
+            transform: translate3d(-50%, -10px, 0);
+            bottom: auto;
+            left: 50%;
+            top: 100%;
+            z-index: 999;
+        }
+
+        &::after {
+            margin-top: 11px;
+            transform: translate3d(-50%, -10px, 0);
+            top: 100%;
+            left: 50%;
+        }
+
+        &:hover::before {
+            transform: translate3d(-50%, 0, 0);
+        }
+
+        &:hover::after {
+            transform: translate3d(-50%, 0, 0);
+        }
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
+        &::after {
+            transform: translate3d(calc(-100% + 16px), -10px, 0);
+            top: 100%;
+        }
+
+        &:hover::after {
+            transform: translate3d(calc(-100% + 16px), 0, 0);
+        }
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
+        &::after {
+            transform: translate3d(calc(0% + -16px), -10px, 0);
+            top: 100%;
+        }
+
+        &:hover::after {
+            transform: translate3d(calc(0% + -16px), 0, 0);
+        }
+    }
+
+    // Left position tooltips
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
+        &::before,
+        &::after {
+            inset: auto auto auto 100%;
+            left: auto; // Remove any left positioning
+            right: 100%; // Position to the left of the element
+            top: 50%;
+            transform: translate3d(10px, -50%, 0);
+        }
+
+        &::before {
+            border-top: 9px solid transparent;
+            border-bottom: 9px solid transparent;
+            border-left: 6px solid var(--tooltip-bg);
+            height: 0;
+            width: 0;
+            margin-right: 5px;
+            margin-bottom: 0;
+            z-index: 999;
+        }
+
+        &::after {
+            margin-right: 11px;
+        }
+
+        &:hover::before,
+        &:hover::after {
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Right position tooltips
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
+        &::before,
+        &::after {
+            bottom: auto;
+            left: 100%;
+            top: 50%;
+            transform: translate3d(-10px, -50%, 0);
+        }
+
+        &::before {
+            border-top: 9px solid transparent;
+            border-bottom: 9px solid transparent;
+            border-right: 6px solid var(--tooltip-bg);
+            height: 0;
+            width: 0;
+            margin-bottom: 0;
+            margin-left: 5px;
+            z-index: 999;
+        }
+
+        &::after {
+            margin-left: 11px;
+        }
+
+        &:hover::before,
+        &:hover::after {
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Tooltip sizes
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
+        white-space: initial;
+        width: var(--tooltip-small-width);
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
+        white-space: initial;
+        width: var(--tooltip-medium-width);
+    }
+
+    #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
+        white-space: initial;
+        width: var(--tooltip-large-width);
+    }
+}

package/src/styles/config/_borders.scss

@@ -0,0 +1,15 @@
+// Configuration: Borders
+// Border widths and radii
+
+$border-widths: (0, 1, 2, 4, 8) !default;
+
+$border-radii: (
+    "xs": 0.25rem,
+    "sm": 0.375rem,
+    "md": 0.5rem,
+    "lg": 0.75rem,
+    "xl": 1rem,
+    "2xl": 1.25rem,
+    "full": 99in,
+    "none": 0,
+) !default;

package/src/styles/config/_breakpoints.scss

@@ -0,0 +1,11 @@
+// Configuration: Breakpoints
+// Media query breakpoints for responsive design
+
+$breakpoints: (
+    "xs": 480px,
+    "sm": 640px,
+    "md": 768px,
+    "lg": 1024px,
+    "xl": 1280px,
+    "2xl": 1536px,
+) !default;

package/src/styles/config/_colors.scss

@@ -0,0 +1,192 @@
+// Configuration: Color system
+// Core color definitions and semantic mappings
+
+@use "sass:map";
+@use "sass:list";
+
+// Accessible color palette - semantic colors
+$primary: #007bff !default;
+$secondary: #6c757d !default;
+$success: #28a745 !default;
+$danger: #dc3545 !default;
+$warning: #ffc107 !default;
+$info: #17a2b8 !default;
+
+// Color primitives
+$color-primitives: (
+    "gray": #6b7280,
+    "red": #ef4444,
+    "blue": #3b82f6,
+    "green": #22c55e,
+    "yellow": #eab308,
+    "purple": #a855f7,
+    "pink": #ec4899,
+) !default;
+
+// Basic colors
+$basic-colors: (
+    "black": #000,
+    "white": #fff,
+    "transparent": transparent,
+) !default;
+
+// Generate required lists
+$semantic-colors: ("primary", "secondary", "success", "danger", "warning", "info");
+$primitive-color-names: map.keys($color-primitives);
+$color-names: list.join($semantic-colors, $primitive-color-names);
+$color-names-with-basic: list.join($color-names, map.keys($basic-colors));
+
+// A default color for color generation function `get-color` to return a a default value on using wrong value
+$default-color: currentcolor !default;
+
+$colors-constants: (
+    "aliceblue": aliceblue,
+    "antiquewhite": antiquewhite,
+    "aqua": aqua,
+    "aquamarine": aquamarine,
+    "azure": azure,
+    "beige": beige,
+    "bisque": bisque,
+    "black": black,
+    "blanchedalmond": blanchedalmond,
+    "blue": blue,
+    "blueviolet": blueviolet,
+    "brown": brown,
+    "burlywood": burlywood,
+    "cadetblue": cadetblue,
+    "chartreuse": chartreuse,
+    "chocolate": chocolate,
+    "coral": coral,
+    "cornflowerblue": cornflowerblue,
+    "cornsilk": cornsilk,
+    "crimson": crimson,
+    "cyan": cyan,
+    "darkblue": darkblue,
+    "darkcyan": darkcyan,
+    "darkgoldenrod": darkgoldenrod,
+    "darkgray": darkgray,
+    "darkgreen": darkgreen,
+    "darkgrey": darkgrey,
+    "darkkhaki": darkkhaki,
+    "darkmagenta": darkmagenta,
+    "darkolivegreen": darkolivegreen,
+    "darkorange": darkorange,
+    "darkorchid": darkorchid,
+    "darkred": darkred,
+    "darksalmon": darksalmon,
+    "darkseagreen": darkseagreen,
+    "darkslateblue": darkslateblue,
+    "darkslategray": darkslategray,
+    "darkslategrey": darkslategrey,
+    "darkturquoise": darkturquoise,
+    "darkviolet": darkviolet,
+    "deeppink": deeppink,
+    "deepskyblue": deepskyblue,
+    "dimgray": dimgray,
+    "dimgrey": dimgrey,
+    "dodgerblue": dodgerblue,
+    "firebrick": firebrick,
+    "floralwhite": floralwhite,
+    "forestgreen": forestgreen,
+    "fuchsia": fuchsia,
+    "gainsboro": gainsboro,
+    "ghostwhite": ghostwhite,
+    "gold": gold,
+    "goldenrod": goldenrod,
+    "gray": gray,
+    "green": green,
+    "greenyellow": greenyellow,
+    "grey": grey,
+    "honeydew": honeydew,
+    "hotpink": hotpink,
+    "indianred": indianred,
+    "indigo": indigo,
+    "ivory": ivory,
+    "khaki": khaki,
+    "lavender": lavender,
+    "lavenderblush": lavenderblush,
+    "lawngreen": lawngreen,
+    "lemonchiffon": lemonchiffon,
+    "lightblue": lightblue,
+    "lightcoral": lightcoral,
+    "lightcyan": lightcyan,
+    "lightgoldenrodyellow": lightgoldenrodyellow,
+    "lightgray": lightgray,
+    "lightgreen": lightgreen,
+    "lightgrey": lightgrey,
+    "lightpink": lightpink,
+    "lightsalmon": lightsalmon,
+    "lightseagreen": lightseagreen,
+    "lightskyblue": lightskyblue,
+    "lightslategray": lightslategray,
+    "lightslategrey": lightslategrey,
+    "lightsteelblue": lightsteelblue,
+    "lightyellow": lightyellow,
+    "lime": lime,
+    "limegreen": limegreen,
+    "linen": linen,
+    "magenta": magenta,
+    "maroon": maroon,
+    "mediumaquamarine": mediumaquamarine,
+    "mediumblue": mediumblue,
+    "mediumorchid": mediumorchid,
+    "mediumpurple": mediumpurple,
+    "mediumseagreen": mediumseagreen,
+    "mediumslateblue": mediumslateblue,
+    "mediumspringgreen": mediumspringgreen,
+    "mediumturquoise": mediumturquoise,
+    "mediumvioletred": mediumvioletred,
+    "midnightblue": midnightblue,
+    "mintcream": mintcream,
+    "mistyrose": mistyrose,
+    "moccasin": moccasin,
+    "navajowhite": navajowhite,
+    "navy": navy,
+    "oldlace": oldlace,
+    "olive": olive,
+    "olivedrab": olivedrab,
+    "orange": orange,
+    "orangered": orangered,
+    "orchid": orchid,
+    "palegoldenrod": palegoldenrod,
+    "palegreen": palegreen,
+    "paleturquoise": paleturquoise,
+    "palevioletred": palevioletred,
+    "papayawhip": papayawhip,
+    "peachpuff": peachpuff,
+    "peru": peru,
+    "pink": pink,
+    "plum": plum,
+    "powderblue": powderblue,
+    "purple": purple,
+    "red": red,
+    "rebeccapurple": rebeccapurple,
+    "rosybrown": rosybrown,
+    "royalblue": royalblue,
+    "saddlebrown": saddlebrown,
+    "salmon": salmon,
+    "sandybrown": sandybrown,
+    "seagreen": seagreen,
+    "seashell": seashell,
+    "sienna": sienna,
+    "silver": silver,
+    "skyblue": skyblue,
+    "slateblue": slateblue,
+    "slategray": slategray,
+    "slategrey": slategrey,
+    "snow": snow,
+    "springgreen": springgreen,
+    "steelblue": steelblue,
+    "tan": tan,
+    "teal": teal,
+    "thistle": thistle,
+    "tomato": tomato,
+    "transparent": transparent,
+    "turquoise": turquoise,
+    "violet": violet,
+    "wheat": wheat,
+    "white": white,
+    "whitesmoke": whitesmoke,
+    "yellow": yellow,
+    "yellowgreen": yellowgreen,
+);

package/src/styles/config/_constants.scss

@@ -0,0 +1 @@
+$units: ("px", "rem", "%", "em", "vh", "vw", "vmin", "vmax", "ch", "ex", "cm", "mm", "in", "pt", "pc");

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

@@ -0,0 +1 @@
+$container-names: ("main", "sidebar", "card", "section") !default;

package/src/styles/config/_feature-flags.scss

@@ -0,0 +1,33 @@
+// Configuration: Feature flags
+// Control which features are enabled in the framework
+
+$feature-flags: (
+    "alignments": true,
+    "animations": true,
+    "backdrops": true,
+    "borders": true,
+    "container": true,
+    "container-queries": true,
+    "cursors": true,
+    "displays": true,
+    "flex": true,
+    "grid": true,
+    "opacity": true,
+    "position": true,
+    "shadows": true,
+    "sizing": true,
+    "spacing": true,
+    "tooltips": true,
+    "theme": true,
+    "transforms": true,
+    "transitions": true,
+    "config-typo": true,
+    "z-index": true,
+) !default;
+
+// Framework global settings
+$generate-utility-classes: false !default;
+$enable-dark-mode: true !default;
+$enable-debugger: false !default;
+$default-unit: px !default;
+$parent-selector: "" !default;

package/src/styles/config/_layouts.scss

@@ -0,0 +1,13 @@
+// Configuration: Layout
+// Layout constants and grid configurations
+
+$column-count: 12 !default;
+$default-container-name: nuvoui-container !default;
+
+$grid-item-sizes: (
+    "xs": 200px,
+    "sm": 250px,
+    "md": 300px,
+    "lg": 350px,
+    "xl": 400px,
+) !default;

package/src/styles/config/_shadows.scss

@@ -0,0 +1,9 @@
+// Configuration: Shadows
+// Shadow color definitions
+
+$shadow-colors: (
+    "default": rgb(0 0 0 / 10%),
+    "dark": rgb(0 0 0 / 20%),
+    "darker": rgb(0 0 0 / 35%),
+    "darkest": rgb(0 0 0 / 50%),
+) !default;

package/src/styles/config/_spacing.scss

@@ -0,0 +1,41 @@
+// Configuration: Spacing
+// Spacing scale and percentage values
+
+$spacings: (
+    0: 0,
+    1: 0.25rem,
+    // 4px
+    2: 0.5rem,
+    // 8px
+    3: 0.75rem,
+    // 12px
+    4: 1rem,
+    // 16px
+    5: 1.25rem,
+    // 20px
+    6: 1.5rem,
+    // 24px
+    8: 2rem,
+    // 32px
+    10: 2.5rem,
+    // 40px
+    12: 3rem,
+    // 48px
+    16: 4rem,
+    // 64px
+    20: 5rem,
+    // 80px
+    24: 6rem,
+    // 96px
+    32: 8rem,
+    // 128px
+    40: 10rem,
+    // 160px
+    48: 12rem,
+    // 192px
+    56: 14rem,
+    // 224px
+    64: 16rem, // 256px
+) !default;
+
+$percentages: (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100) !default;

package/src/styles/config/_theme-validation.scss

@@ -0,0 +1,59 @@
+// Configuration: Theme validation
+// Theme token validation and theme definitions
+
+@use "sass:map";
+@use "sass:list";
+
+// Default theme config (can be overridden)
+$light-theme: (
+    "bg-base": #fbfafc,
+    "bg-alternate": #1a1a1a,
+    "bg-surface": #fff,
+    "border-base": #d3d5d9,
+    "text-color": #1a1a1a,
+    "text-muted": #1a1a1a8a,
+    "text-subtle": #1a1a1a50,
+    "text-inverted": #f1f1f1,
+) !default;
+
+// Extract theme tokens from light theme keys
+$theme-tokens: map.keys($light-theme) !default;
+
+$dark-theme: (
+    "bg-base": #1a1a1a,
+    "bg-alternate": #f1f1f1,
+    "bg-surface": #2e2e2e,
+    "border-base": #2e2e2e,
+    "text-color": #f1f1f1,
+    "text-muted": #f1f1f18a,
+    "text-subtle": #f1f1f150,
+    "text-inverted": #1a1a1a,
+) !default;
+
+@function validate-theme-tokens($theme-map, $required-tokens) {
+    $missing-tokens: ();
+
+    @each $token in $required-tokens {
+        @if not map.has-key($theme-map, $token) {
+            $missing-tokens: list.append($missing-tokens, $token, comma);
+        }
+    }
+
+    @if list.length($missing-tokens) > 0 {
+        @error "Theme is missing required tokens: #{$missing-tokens}";
+    }
+
+    @return list.length($missing-tokens) == 0;
+}
+
+// Validate both themes
+@mixin validate-tokens {
+    @if not validate-theme-tokens($light-theme, $theme-tokens) {
+        @error "Light theme is missing required tokens.";
+    }
+    @if not validate-theme-tokens($dark-theme, $theme-tokens) {
+        @error "Dark theme is missing required tokens.";
+    }
+}
+
+@include validate-tokens;

package/src/styles/config/_typography.scss

@@ -0,0 +1,45 @@
+// Configuration: config-typo
+// Font families, sizes, and weights
+
+$base-size: 1rem !default;
+$font-family:
+    system-ui,
+    -apple-system,
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    sans-serif !default;
+
+$font-sizes: (
+    "xs": 0.75rem,
+    // 12px
+    "sm": 0.875rem,
+    // 14px
+    "md": 1rem,
+    "base": 1rem,
+    // 16px
+    "lg": 1.25rem,
+    // 20px
+    "xl": 1.5rem,
+    // 24px
+    "2xl": 1.75rem,
+    // 28px
+    "3xl": 2rem,
+    // 32px
+    "4xl": 2.5rem, // 40px
+) !default;
+
+$font-weights: (
+    "thin": 100,
+    "extralight": 200,
+    "light": 300,
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700,
+    "extrabold": 800,
+    "black": 900,
+) !default;