@nuvoui/core 1.0.1 → 1.1.3

package/src/styles/themes/_theme.scss

@@ -28,7 +28,6 @@ $opacity-levels: (
   @each $name, $color in $colors {
     // Base color
     --#{$name}: #{$color};
-    --#{$name}-rgb: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
     
     // Variations
     @each $variant, $percentage in $color-variations {

package/src/styles/utilities/_display.scss

@@ -1,5 +1,6 @@
 
 @use './variables' as *;
+@use './functions' as *;
 
 // Display Mixins
 @mixin d-none { display: none; }

package/src/styles/utilities/_spacing.scss

@@ -1,24 +1,43 @@
 @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; }

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}

package/dist/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>UI Framework</title>
-  <script type="module" crossorigin src="/main.js"></script>
-  <link rel="stylesheet" crossorigin href="/main.css">
-</head>
-<body>
-  <h1>Hello World</h1>
-
-  <button class="center my">Click Me</button>
-</body>
-</html>

package/dist/light.css

@@ -1 +0,0 @@
-[data-theme=light]{--primary:#007bff;--primary-rgb:0,123,255;--primary-lighter:#268fff;--primary-light:#1a88ff;--primary-dark:#006fe6;--primary-darker:#0069d9;--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-dark);--primary-active:var(--primary-darker);--primary-disabled:var(--primary-50);--secondary:#6c757d;--secondary-rgb:108,117,125;--secondary-lighter:#818a92;--secondary-light:#79838b;--secondary-dark:#616971;--secondary-darker:#5c636a;--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-dark);--secondary-active:var(--secondary-darker);--secondary-disabled:var(--secondary-50);--success:#28a745;--success-rgb:40,167,69;--success-lighter:#31cc54;--success-light:#2ebf4f;--success-dark:#24963e;--success-darker:#228e3b;--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-dark);--success-active:var(--success-darker);--success-disabled:var(--success-50);--danger:#dc3545;--danger-rgb:220,53,69;--danger-lighter:#e15361;--danger-light:#e04958;--danger-dark:#d12435;--danger-darker:#c62232;--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-dark);--danger-active:var(--danger-darker);--danger-disabled:var(--danger-50);--warning:#ffc107;--warning-rgb:255,193,7;--warning-lighter:#ffca2c;--warning-light:#ffc720;--warning-dark:#ecb100;--warning-darker:#dfa700;--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-dark);--warning-active:var(--warning-darker);--warning-disabled:var(--warning-50);--info:#17a2b8;--info-rgb:23,162,184;--info-lighter:#1cc6e0;--info-light:#1abad3;--info-dark:#1592a6;--info-darker:#148a9c;--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-dark);--info-active:var(--info-darker);--info-disabled:var(--info-50);--light:#f8f9fa;--light-rgb:248,249,250;--light-lighter:#f9fafb;--light-light:#f9fafb;--light-dark:#dbe0e5;--light-darker:#ccd4db;--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-dark);--light-active:var(--light-darker);--light-disabled:var(--light-50);--dark:#1c1f22;--dark-rgb:28,31,34;--dark-lighter:#3a4147;--dark-light:#30353b;--dark-dark:#191c1f;--dark-darker:#181a1d;--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-dark);--dark-active:var(--dark-darker);--dark-disabled:var(--dark-50);--bg-primary:var(--light);--bg-secondary:#e9edf0;--bg-tertiary:#dbe0e5;--border-color:rgba(28,31,34,.1);--border-color-dark:rgba(28,31,34,.2);--text-primary:var(--dark);--text-secondary:rgba(28,31,34,.7);--text-tertiary:rgba(28,31,34,.5);--text-disabled:rgba(28,31,34,.3);--text-inverse:var(--light);--link-color:var(--primary);--link-hover-color:#006fe6;--link-active-color:#0062cc;--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;--input-bg:#f9fafb}