@nuvoui/core 0.2.1

package/src/styles/utilities/_tooltips.scss

@@ -0,0 +1,213 @@
+
+
+[data-tooltip][role~="tooltip"] {
+    position: relative
+}
+
+[data-tooltip][role~="tooltip"]::before,
+[data-tooltip][role~="tooltip"]::after {
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    will-change: transform;
+    opacity: 0;
+    pointer-events: none;
+    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+    position: absolute;
+    box-sizing: border-box;
+    z-index: 10;
+    transform-origin: top
+}
+
+[data-tooltip][role~="tooltip"]::before {
+    background-size: 100% auto !important;
+    content: ""
+}
+
+[data-tooltip][role~="tooltip"]::after {
+    background: var(--tooltip-bg); //rgba(17, 17, 17, .95);
+    box-shadow: 0 3px 7px var(--tooltip-shadow-color);
+    border-radius: 4px;
+    color: #fff;
+    content: attr(data-tooltip);
+    font-size: var(--microtip-font-size, 13px);
+    font-weight: var(--microtip-font-weight, normal);
+    text-transform: var(--microtip-text-transform, none);
+    padding: .5em 1em;
+    white-space: nowrap;
+    box-sizing: content-box
+}
+
+[data-tooltip][role~="tooltip"]:hover::before,
+[data-tooltip][role~="tooltip"]:hover::after,
+[data-tooltip][role~="tooltip"]:focus::before,
+[data-tooltip][role~="tooltip"]:focus::after {
+    opacity: 1;
+    pointer-events: auto
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
+    height: 6px;
+    width: 18px;
+    margin-bottom: 5px
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+    margin-bottom: 11px
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    transform: translate3d(-50%, 0, 0);
+    bottom: 100%;
+    left: 50%
+}
+
+[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+    transform: translate3d(-50%, -5px, 0)
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+    transform: translate3d(-50%, 0, 0);
+    bottom: 100%;
+    left: 50%
+}
+
+[role~="tooltip"][data-microtip-position="top"]:hover::after {
+    transform: translate3d(-50%, -5px, 0)
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]::after {
+    transform: translate3d(calc(-100% + 16px), 0, 0);
+    bottom: 100%
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+    transform: translate3d(calc(-100% + 16px), -5px, 0)
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]::after {
+    transform: translate3d(calc(0% + -16px), 0, 0);
+    bottom: 100%
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+    transform: translate3d(calc(0% + -16px), -5px, 0)
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
+    height: 6px;
+    width: 18px;
+    margin-top: 5px;
+    margin-bottom: 0
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+    margin-top: 11px
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    transform: translate3d(-50%, -10px, 0);
+    bottom: auto;
+    left: 50%;
+    top: 100%
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+    transform: translate3d(-50%, 0, 0)
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+    transform: translate3d(-50%, -10px, 0);
+    top: 100%;
+    left: 50%
+}
+
+[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+    transform: translate3d(-50%, 0, 0)
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+    transform: translate3d(calc(-100% + 16px), -10px, 0);
+    top: 100%
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+    transform: translate3d(calc(-100% + 16px), 0, 0)
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+    transform: translate3d(calc(0% + -16px), -10px, 0);
+    top: 100%
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+    transform: translate3d(calc(0% + -16px), 0, 0)
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before,
+[role~="tooltip"][data-microtip-position="left"]::after {
+    bottom: auto;
+    left: auto;
+    right: 100%;
+    top: 50%;
+    transform: translate3d(10px, -50%, 0)
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
+    height: 18px;
+    width: 6px;
+    margin-right: 5px;
+    margin-bottom: 0
+}
+
+[role~="tooltip"][data-microtip-position="left"]::after {
+    margin-right: 11px
+}
+
+[role~="tooltip"][data-microtip-position="left"]:hover::before,
+[role~="tooltip"][data-microtip-position="left"]:hover::after {
+    transform: translate3d(0, -50%, 0)
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before,
+[role~="tooltip"][data-microtip-position="right"]::after {
+    bottom: auto;
+    left: 100%;
+    top: 50%;
+    transform: translate3d(-10px, -50%, 0)
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before {
+    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;
+    height: 18px;
+    width: 6px;
+    margin-bottom: 0;
+    margin-left: 5px
+}
+
+[role~="tooltip"][data-microtip-position="right"]::after {
+    margin-left: 11px
+}
+
+[role~="tooltip"][data-microtip-position="right"]:hover::before,
+[role~="tooltip"][data-microtip-position="right"]:hover::after {
+    transform: translate3d(0, -50%, 0)
+}
+
+[role~="tooltip"][data-microtip-size="small"]::after {
+    white-space: initial;
+    width: 80px
+}
+
+[role~="tooltip"][data-microtip-size="medium"]::after {
+    white-space: initial;
+    width: 150px
+}
+
+[role~="tooltip"][data-microtip-size="large"]::after {
+    white-space: initial;
+    width: 260px
+}

package/src/styles/utilities/_typography.scss

@@ -0,0 +1,108 @@
+@use 'sass:map';
+// Import variables
+@use '../utilities/variables' as *;
+
+// Utilities for text sizes
+@mixin text-xs { font-size: map.get($font-sizes, 'xs'); }
+@mixin text-sm { font-size: map.get($font-sizes, 'sm'); }
+@mixin text-md { font-size: map.get($font-sizes, 'md'); }
+@mixin text-lg { font-size: map.get($font-sizes, 'lg'); }
+@mixin text-xl { font-size: map.get($font-sizes, 'xl'); }
+@mixin text-2xl { font-size: map.get($font-sizes, '2xl'); }
+@mixin text-3xl { font-size: map.get($font-sizes, '3xl'); }
+@mixin text-4xl { font-size: map.get($font-sizes, '4xl'); }
+
+// Font weights
+@mixin font-thin { font-weight: 100; }
+@mixin font-extralight { font-weight: 200; }
+@mixin font-light { font-weight: 300; }
+@mixin font-normal { font-weight: 400; }
+@mixin font-medium { font-weight: 500; }
+@mixin font-semibold { font-weight: 600; }
+@mixin font-bold { font-weight: 700; }
+@mixin font-extrabold { font-weight: 800; }
+@mixin font-black { font-weight: 900; }
+
+// Line heights
+@mixin leading-none { line-height: 1; }
+@mixin leading-tight { line-height: 1.25; }
+@mixin leading-snug { line-height: 1.375; }
+@mixin leading-normal { line-height: 1.5; }
+@mixin leading-relaxed { line-height: 1.625; }
+@mixin leading-loose { line-height: 2; }
+
+// Text alignment
+@mixin text-left { text-align: left; }
+@mixin text-center { text-align: center; }
+@mixin text-right { text-align: right; }
+@mixin text-justify { text-align: justify; }
+
+
+// Text transform mixins
+@mixin uppercase { text-transform: uppercase; }
+@mixin lowercase { text-transform: lowercase; }
+@mixin capitalize { text-transform: capitalize; }
+@mixin normal-case { text-transform: none; }
+
+// Font style mixins
+@mixin italic { font-style: italic; }
+@mixin not-italic { font-style: normal; }
+
+// Text decoration mixins
+@mixin underline { text-decoration: underline; }
+@mixin line-through { text-decoration: line-through; }
+@mixin no-underline { text-decoration: none; }
+
+// Text overflow mixin
+@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+
+// Generate text size utilities
+.text-xs { @include text-xs; }
+.text-sm { @include text-sm; }
+.text-md { @include text-md; }
+.text-lg { @include text-lg; }
+.text-xl { @include text-xl; }
+.text-2xl { @include text-2xl; }
+.text-3xl { @include text-3xl; }
+.text-4xl { @include text-4xl; }
+
+// Generate font weight utilities
+.font-thin { @include font-thin; }
+.font-extralight { @include font-extralight; }
+.font-light { @include font-light; }
+.font-normal { @include font-normal; }
+.font-medium { @include font-medium; }
+.font-semibold { @include font-semibold; }
+.font-bold { @include font-bold; }
+.font-extrabold { @include font-extrabold; }
+.font-black { @include font-black; }
+
+// Generate line height utilities
+.leading-none { @include leading-none; }
+.leading-tight { @include leading-tight; }
+.leading-snug { @include leading-snug; }
+.leading-normal { @include leading-normal; }
+.leading-relaxed { @include leading-relaxed; }
+.leading-loose { @include leading-loose; }
+
+// Generate text alignment utilities
+.text-left { @include text-left; }
+.text-center { @include text-center; }
+.text-right { @include text-right; }
+.text-justify { @include text-justify; }
+
+// Classes using mixins
+.uppercase { @include uppercase; }
+.lowercase { @include lowercase; }
+.capitalize { @include capitalize; }
+.normal-case { @include normal-case; }
+
+.italic { @include italic; }
+.not-italic { @include not-italic; }
+
+.underline { @include underline; }
+.line-through { @include line-through; }
+.no-underline { @include no-underline; }
+
+.truncate { @include truncate; }

package/src/styles/utilities/_variables.scss

@@ -0,0 +1,70 @@
+// Global variables that might be used across different modules
+$enable-dark-mode: true;
+$enable-rtl: false;
+$enable-reduced-motion: true;
+
+$column-count: 12 !default;
+
+$color-primary: #007bff !default;
+$color-secondary: #6c757d !default;
+$color-success: #28a745 !default;
+$color-danger: #dc3545 !default;
+$color-warning: #ffc107 !default;
+$color-info: #17a2b8 !default;
+$color-light: #f8f9fa !default;
+$color-dark: #1c1f22 !default;
+
+$colors: (
+  'primary': $color-primary,
+  'secondary': $color-secondary,
+  'success': $color-success,
+  'danger': $color-danger,
+  'warning': $color-warning,
+  'info': $color-info,
+  'light': $color-light,
+  'dark': $color-dark
+);
+
+// Breakpoints
+$breakpoints: (
+  'xs': 480px,
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+  'xxl': 1536px, 
+);
+
+// Container max-widths
+$container-max-widths: (
+  'xs': 450px,
+  'sm': 540px,
+  'md': 720px,
+  'lg': 960px,
+  'xl': 1140px,
+  'xxl': 1320px,
+);
+
+// _variables.scss
+$font-sizes: (
+  '4xl': 2.5rem,  // 40px
+  '3xl': 2rem,    // 32px
+  '2xl': 1.75rem, // 28px
+  'xl': 1.5rem,   // 24px
+  'lg': 1.25rem,  // 20px
+  'md': 1rem,     // 16px
+  'sm': 0.875rem, // 14px
+  'xs': 0.75rem   // 12px
+);
+
+
+// Column widths for auto-fit
+$column-widths: (
+  'sm': 200px,
+  'md': 300px,
+  'lg': 400px
+);
+
+$spacings: (
+  0,1,2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
+)