@nuvoui/core 0.3.1 → 1.1.2

package/src/styles/utilities/_sizing.scss

@@ -0,0 +1,73 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+@mixin width($value) { width: if($value == 0, $value, $value + px); }
+@mixin height($value) { height: if($value == 0, $value, $value + px); }
+@mixin min-width($value) { min-width: if($value == 0, $value, $value + px); }
+@mixin min-height($value) { min-height: if($value == 0, $value, $value + px); }
+@mixin max-width($value) { max-width: if($value == 0, $value, $value + px); }
+@mixin max-height($value) { max-height: if($value == 0, $value, $value + px); }
+
+@mixin width-percent($i) { width: #{$i + '%'}; }
+@mixin height-percent($i) { height: #{$i + '%'};  }
+@mixin min-width-percent($i) { min-width: #{$i + '%'}; }
+@mixin min-height-percent($i) { min-height: #{$i + '%'};  }
+@mixin max-width-percent($i) { max-width: #{$i + '%'}; }
+@mixin max-height-percent($i) { max-height: #{$i + '%'};  }
+
+
+@mixin w-auto { width: auto; }
+@mixin w-full { width: 100%; }
+@mixin h-auto { height: auto; }
+@mixin h-full { height: 100%; }
+@mixin min-w-full { min-width: 100%; }
+@mixin max-w-full { max-width: 100%; }
+@mixin min-h-full { min-height: 100%; }
+@mixin max-h-full { max-height: 100%; }
+
+:not(.flex)>.w-auto { @include w-auto; }
+:not(.flex)>.w-full { @include w-full; }
+
+.h-auto { @include h-auto; }
+.h-full { @include h-full; }
+.min-w-full { @include min-w-full }
+.max-w-full { @include max-w-full }
+.min-h-full { @include min-h-full }
+.max-h-full { @include max-h-full }
+
+// Percentage widths
+@each $i in $percentages {
+    .w-#{$i}per { @include width-percent($i); }
+    .h-#{$i}per { @include height-percent($i); }
+    .min-w-#{$i} { @include min-width-percent($i); }
+    .min-h-#{$i} { @include min-height-percent($i); }
+    .max-w-#{$i} { @include max-width-percent($i); }
+    .max-h-#{$i} { @include max-height-percent($i); }
+}
+
+// Generate utilities from spacing map
+@each $i in $spacings {
+    .w-#{$i} { @include width($i); }
+    .h-#{$i} { @include height($i); }
+    .min-w-#{$i} { @include min-width($i) }
+    .min-h-#{$i} { @include min-height($i) }
+    .max-w-#{$i} { @include max-width($i) }
+    .max-h-#{$i} { @include max-height($i) }
+}
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+        // Generate utilities from spacing map
+        @each $i in $spacings {
+            .w-#{$i}\@#{$breakpoint} { @include width($i); }
+            .h-#{$i}\@#{$breakpoint} { @include height($i); }
+            .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }
+            .min-h-#{$i}\@#{$breakpoint} { @include min-height($i) }
+            .max-w-#{$i}\@#{$breakpoint} { @include max-width($i) }
+            .max-h-#{$i}\@#{$breakpoint} { @include max-height($i) }
+        }
+    }
+}

package/src/styles/utilities/_spacing.scss

@@ -1,28 +1,66 @@
-// _spacing.scss
-
 @use 'sass:math';
+@use 'sass:string';
+@use 'sass:meta';
 @use './variables' as *; 
 
+@function format-unit-value($value) {
+  // Zero check
+  @if $value == 0 {
+    @return 0;
+  }
+
+  // If pure number, add px
+  @if meta.type-of($value) == 'number' {
+    @return $value + px;
+  }
+
+   // Convert value to string for unit checking
+  $value-str: if(meta.type-of($value) == 'string', string.unquote($value), #{$value});
+  @debug string.unquote( $value-str); // .widget:hover
+  
+  @return $value-str;
+}
 
 // Padding mixins
-@mixin p($val) { $val: if($val==0, $val, $val + px); padding: $val !important; }
-@mixin px($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
-@mixin py($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
-@mixin pt($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; }
-@mixin pr($val) { $val: if($val==0, $val, $val + px); padding-right: $val !important; }
-@mixin pb($val) { $val: if($val==0, $val, $val + px); padding-bottom: $val !important; }
-@mixin pl($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; }
+@mixin p($val) { padding: format-unit-value($val) !important; }
+@mixin px($val) { $val: format-unit-value($val); padding-left: $val !important; padding-right: $val !important; }
+@mixin py($val) { $val: format-unit-value($val); padding-top: $val !important; padding-bottom: $val !important; }
+@mixin pt($val) { $val: format-unit-value($val); padding-top: $val !important; }
+@mixin pr($val) { $val: format-unit-value($val); padding-right: $val !important; }
+@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val !important; }
+@mixin pl($val) { $val: format-unit-value($val); padding-left: $val !important; }
 
 // Margin mixins
-@mixin m($val) { $val: if($val==0, $val, $val + px); margin: $val !important; }
-@mixin mx($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
-@mixin my($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
-@mixin mt($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; }
-@mixin mr($val) { $val: if($val==0, $val, $val + px); margin-right: $val !important; }
-@mixin mb($val) { $val: if($val==0, $val, $val + px); margin-bottom: $val !important; }
-@mixin ml($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; }
+@mixin m($val) { $val: format-unit-value($val); margin: $val !important; }
+@mixin mx($val) { $val: format-unit-value($val); margin-left: $val !important; margin-right: $val !important; }
+@mixin my($val) { $val: format-unit-value($val); margin-top: $val !important; margin-bottom: $val !important; }
+@mixin mt($val) { $val: format-unit-value($val); margin-top: $val !important; }
+@mixin mr($val) { $val: format-unit-value($val); margin-right: $val !important; }
+@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val !important; }
+@mixin ml($val) { $val: format-unit-value($val); margin-left: $val !important; }
+
+// Auto margin utilities
+@mixin ml-auto { margin-left: auto; }
+@mixin mr-auto { margin-right: auto; }
+@mixin mx-auto { @include ml-auto; @include mr-auto; }
+
+// Spacing map
+@mixin space-y($i) { & > * + * { margin-top: if($i == 0, 0, $i + px); } }
+@mixin space-x($i) { & > * + * { margin-left: if($i == 0, 0, $i + px); } }
 
 
+// Gap Mixins
+@mixin gap($value) { gap: if($value == 0, $value, $value + px); }
+@mixin gap-x($value) { column-gap: if($value == 0, $value, $value + px); }
+@mixin gap-y($value) { row-gap: if($value == 0, $value, $value + px); }
+
+.mx-auto { @include mx-auto; }
+.ml-auto { @include ml-auto; }
+.mr-auto { @include mr-auto; }
+
+// Gap Classes
+.gap-auto { gap: auto; }
+
 // Generate utilities from spacing map
 @each $i in $spacings {
     // Padding classes
@@ -42,13 +80,25 @@
     .mr-#{$i} { @include mr($i); }
     .mb-#{$i} { @include mb($i); }
     .ml-#{$i} { @include ml($i); }
-    // .gap-#{$key} { gap: $value; }
+    
+    // Gap classes
+    .gap-#{$i} { @include gap($i); }
+    .gap-x-#{$i} { @include gap-x($i); }
+    .gap-y-#{$i} { @include gap-y($i); }
+
+    // Space classes
+    .space-x-#{$i} { @include space-x($i); }
+    .space-y-#{$i} { @include space-y($i); }
 }
 
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
+        .mx-auto\@#{$breakpoint} { @include mx-auto; }
+        .ml-auto\@#{$breakpoint} { @include ml-auto; }
+        .mr-auto\@#{$breakpoint} { @include mr-auto; }
+
         // Generate utilities from spacing map
         @each $i in $spacings {
             // Padding classes
@@ -68,52 +118,15 @@
             .mr-#{$i}\@#{$breakpoint} { @include mr($i); }
             .mb-#{$i}\@#{$breakpoint} { @include mb($i); }
             .ml-#{$i}\@#{$breakpoint} { @include ml($i); }
-        }
-    }
-}
 
-// Auto margin utilities
-@mixin ml-auto { margin-left: auto; }
-@mixin mr-auto { margin-right: auto; }
-@mixin mx-auto { @include ml-auto; @include mr-auto; }
-
-.mx-auto { @include mx-auto; }
-
-
-.ml-auto { @include ml-auto; }
-.mr-auto { @include mr-auto; }
-
-
-
-// Gap Mixins
-@mixin gap($value) {
-    gap: if($value == 0, $value, $value + px);
-}
-
-@mixin gap-x($value) {
-    column-gap: if($value == 0, $value, $value + px);
-}
-
-@mixin gap-y($value) {
-    row-gap: if($value == 0, $value, $value + px);
-}
-
-// Gap Classes
-.gap-auto { gap: auto; }
-
-@each $i in $spacings {
-    .gap-#{$i} { @include gap($i); }
-    .gap-x-#{$i} { @include gap-x($i); }
-    .gap-y-#{$i} { @include gap-y($i); }
-}
-
-// Responsive Gap Classes
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
-    @each $i in $spacings {
-      .gap-#{$i}\@#{$breakpoint} { gap: $i; }
-      .gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
-      .gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
+            .gap-#{$i}\@#{$breakpoint} { gap: $i; }
+            .gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
+            .gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
+      
+            
+            // Space classes
+            .space-x-#{$i}\@#{$breakpoint} { @include space-x($i); }
+            .space-y-#{$i}\@#{$breakpoint} { @include space-y($i); }
+        }
     }
-  }
 }

package/src/styles/utilities/_tooltips.scss

@@ -7,7 +7,6 @@
 [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;
@@ -25,7 +24,7 @@
 }
 
 [data-tooltip][role~="tooltip"]::after {
-    background: var(--tooltip-bg); //rgba(17, 17, 17, .95);
+    background: var(--tooltip-bg); // todo: change to a variable
     box-shadow: 0 3px 7px var(--tooltip-shadow-color);
     border-radius: 4px;
     color: #fff;
@@ -47,17 +46,17 @@
 }
 
 [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;
+    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
+    margin-bottom: 5px;
+    transform: translate3d(-50%, 0, 0);
+    bottom: 100%;
+    left: 50%
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    margin-bottom: 11px
-}
-
-[role~="tooltip"][data-microtip-position|="top"]::before {
+    margin-bottom: 11px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
     left: 50%
@@ -67,12 +66,6 @@
     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)
 }
@@ -96,34 +89,31 @@
 }
 
 [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;
+    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 {
+    margin-bottom: 0;
     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 {
+    margin-top: 11px;
     transform: translate3d(-50%, -10px, 0);
     top: 100%;
     left: 50%
 }
 
+
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+    transform: translate3d(-50%, 0, 0)
+}
+
+
 [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
     transform: translate3d(-50%, 0, 0)
 }
@@ -148,15 +138,12 @@
 
 [role~="tooltip"][data-microtip-position="left"]::before,
 [role~="tooltip"][data-microtip-position="left"]::after {
-    bottom: auto;
-    left: auto;
-    right: 100%;
-    top: 50%;
+    inset: auto auto auto 100%;
     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;
+    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;
@@ -181,7 +168,7 @@
 }
 
 [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;
+    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;

package/src/styles/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+
 // Import variables
 @use '../utilities/variables' as *;
 

package/src/styles/utilities/_variables.scss

@@ -1,7 +1,7 @@
 // Global variables that might be used across different modules
-$enable-dark-mode: true;
-$enable-rtl: false;
-$enable-reduced-motion: true;
+$enable-dark-mode: true !default;
+$enable-rtl: true !default;;
+$enable-reduced-motion: true !default;;
 
 $column-count: 12 !default;
 
@@ -33,7 +33,7 @@ $breakpoints: (
   'lg': 1024px,
   'xl': 1280px,
   'xxl': 1536px, 
-);
+) !default;
 
 // Container max-widths
 $container-max-widths: (
@@ -43,28 +43,35 @@ $container-max-widths: (
   'lg': 960px,
   'xl': 1140px,
   'xxl': 1320px,
-);
+) !default;
 
 // _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
+  'xs': 0.75rem,  // 12px
   'sm': 0.875rem, // 14px
-  'xs': 0.75rem   // 12px
-);
-
-
-// Column widths for auto-fit
-$column-widths: (
-  'sm': 200px,
-  'md': 300px,
-  'lg': 400px
-);
+  'md': 1rem,     // 16px
+  'lg': 1.25rem,  // 20px
+  'xl': 1.5rem,   // 24px
+  '2xl': 1.75rem, // 28px
+  '3xl': 2rem,    // 32px
+  '4xl': 2.5rem   // 40px
+) !default;
+ 
+$padding-map: (
+  'xs': 0.25rem 0.5rem,
+  'sm': 0.375rem 0.75rem,
+  'md': 0.5rem 1rem,
+  'lg': 0.75rem 1.5rem,
+  'xl': 1rem 2rem,
+  '2xl': 1.25rem 2.5rem,
+  '3xl': 1.5rem 3rem,
+  '4xl': 2rem 4rem, 
+) !default;
 
 $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
-)
+  0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,125,150,175,200,250,300,350,400,450,500
+) !default;
+
+$percentages: (
+  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100
+) !default;

package/dist/dark.css

@@ -1 +0,0 @@
-[data-theme=dark]{--primary:#007bff;--primary-rgb:0,123,255;--primary-lighter:#0069d9;--primary-light:#006fe6;--primary-dark:#1a88ff;--primary-darker:#268fff;--primary-10:rgba(0,123,255,.1);--primary-25:rgba(0,123,255,.25);--primary-50:rgba(0,123,255,.5);--primary-75:rgba(0,123,255,.75);--primary-hover:var(--primary-light);--primary-active:var(--primary-lighter);--primary-disabled:var(--primary-50);--secondary:#6c757d;--secondary-rgb:108,117,125;--secondary-lighter:#5c636a;--secondary-light:#616971;--secondary-dark:#79838b;--secondary-darker:#818a92;--secondary-10:hsla(208,7%,46%,.1);--secondary-25:hsla(208,7%,46%,.25);--secondary-50:hsla(208,7%,46%,.5);--secondary-75:hsla(208,7%,46%,.75);--secondary-hover:var(--secondary-light);--secondary-active:var(--secondary-lighter);--secondary-disabled:var(--secondary-50);--success:#28a745;--success-rgb:40,167,69;--success-lighter:#228e3b;--success-light:#24963e;--success-dark:#2ebf4f;--success-darker:#31cc54;--success-10:rgba(40,167,69,.1);--success-25:rgba(40,167,69,.25);--success-50:rgba(40,167,69,.5);--success-75:rgba(40,167,69,.75);--success-hover:var(--success-light);--success-active:var(--success-lighter);--success-disabled:var(--success-50);--danger:#dc3545;--danger-rgb:220,53,69;--danger-lighter:#c62232;--danger-light:#d12435;--danger-dark:#e04958;--danger-darker:#e15361;--danger-10:rgba(220,53,69,.1);--danger-25:rgba(220,53,69,.25);--danger-50:rgba(220,53,69,.5);--danger-75:rgba(220,53,69,.75);--danger-hover:var(--danger-light);--danger-active:var(--danger-lighter);--danger-disabled:var(--danger-50);--warning:#ffc107;--warning-rgb:255,193,7;--warning-lighter:#dfa700;--warning-light:#ecb100;--warning-dark:#ffc720;--warning-darker:#ffca2c;--warning-10:rgba(255,193,7,.1);--warning-25:rgba(255,193,7,.25);--warning-50:rgba(255,193,7,.5);--warning-75:rgba(255,193,7,.75);--warning-hover:var(--warning-light);--warning-active:var(--warning-lighter);--warning-disabled:var(--warning-50);--info:#17a2b8;--info-rgb:23,162,184;--info-lighter:#148a9c;--info-light:#1592a6;--info-dark:#1abad3;--info-darker:#1cc6e0;--info-10:rgba(23,162,184,.1);--info-25:rgba(23,162,184,.25);--info-50:rgba(23,162,184,.5);--info-75:rgba(23,162,184,.75);--info-hover:var(--info-light);--info-active:var(--info-lighter);--info-disabled:var(--info-50);--light:#f8f9fa;--light-rgb:248,249,250;--light-lighter:#ccd4db;--light-light:#dbe0e5;--light-dark:#f9fafb;--light-darker:#f9fafb;--light-10:rgba(248,249,250,.1);--light-25:rgba(248,249,250,.25);--light-50:rgba(248,249,250,.5);--light-75:rgba(248,249,250,.75);--light-hover:var(--light-light);--light-active:var(--light-lighter);--light-disabled:var(--light-50);--dark:#1c1f22;--dark-rgb:28,31,34;--dark-lighter:#181a1d;--dark-light:#191c1f;--dark-dark:#30353b;--dark-darker:#3a4147;--dark-10:rgba(28,31,34,.1);--dark-25:rgba(28,31,34,.25);--dark-50:rgba(28,31,34,.5);--dark-75:rgba(28,31,34,.75);--dark-hover:var(--dark-light);--dark-active:var(--dark-lighter);--dark-disabled:var(--dark-50);--bg-primary:var(--dark);--bg-secondary:#262a2e;--bg-tertiary:#30353b;--border-color:rgba(248,249,250,.07);--border-color-dark:rgba(248,249,250,.15);--text-primary:var(--light);--text-secondary:rgba(248,249,250,.7);--text-tertiary:rgba(248,249,250,.5);--text-disabled:rgba(248,249,250,.3);--text-inverse:var(--dark);--link-color:var(--primary);--link-hover-color:#1a88ff;--link-active-color:#3395ff;--link-visited-color:#1a7ce6;--nav-bg:var(--bg-primary);--nav-hover:var(--bg-secondary);--nav-active:var(--bg-tertiary);--nav-text:var(--text-primary);--nav-text-hover:var(--primary);--nav-border:var(--border-color);--tooltip-bg:var(--dark);--tooltip-text:var(--light);--tooltip-shadow-color:rgba(0,0,0,.4);--microtip-transition-duration:.518s;--microtip-transition-delay:.2s;--microtip-transition-easing:cubic-bezier(.16,1,.9,1);--microtip-font-size:.875rem;--microtip-font-weight:300;--microtip-text-transform:none;--font-family-heading:var(--font-family-base);--input-bg:#16191b}