webcoreui 0.1.0 → 0.3.0

package/scss/config/mixins.scss

@@ -3,27 +3,6 @@
 @use 'sass:list';
 @use 'sass:string';
 
-@mixin transition($args...) {
-    $property: all;
-    $speed: .3s;
-
-    @each $arg in $args {
-        @if (meta.type-of($arg) == 'number') {
-            $speed: $arg;
-        } @else {
-            $property: $arg;
-        }
-    }
-
-    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-@mixin media($breakpoint: 'xs') {
-    @media (min-width: #{map.get($breakpoints, $breakpoint)}) {
-        @content;
-    }
-}
-
 @mixin background($arg) {
     background: map.get($colorPalette, '#{$arg}') or $arg;
 }
@@ -71,122 +50,95 @@
 @mixin border-radius($args...) {
     $borderRadius: map.get($radius, 'md');
     $position: null;
-    $side: (
-        top: ('top-left', 'top-right'),
-        bottom: ('bottom-left', 'bottom-right'),
-        left: ('top-left', 'bottom-left'),
-        right: ('top-right', 'bottom-right')
-    );
-
+  
     @each $arg in $args {
-        @if (map.get($radius, $arg)) {
-            $borderRadius: map.get($radius, $arg);
-        }
-
-        @if (map.get($side, $arg)) {
-            $position: map.get($side, $arg);
-        }
+      @if (map.get($radius, $arg)) {
+        $borderRadius: map.get($radius, $arg);
+      }
+  
+      $side: (
+        top: $borderRadius $borderRadius 0 0,
+        bottom: 0 0 $borderRadius $borderRadius,
+        left: $borderRadius 0 0 $borderRadius,
+        right: 0 $borderRadius $borderRadius 0,
+        diagonal: $borderRadius 0,
+        reverse-diagonal: 0 $borderRadius
+      );
+  
+      @if (map.get($side, $arg)) {
+        $position: map.get($side, $arg);
+      }
     }
+  
+    border-radius: $position or $borderRadius;
+  }
 
-    @if ($position) {
-        @each $key in $position {
-            border-#{$key}-radius: $borderRadius;
-        }
-    } @else {
-        border-radius: $borderRadius;
-    }
+@mixin layer($stack: 'default') {
+    z-index: #{map.get($layers, $stack)};
 }
 
-@mixin visibility($args...) {        
+@mixin layout($args...) {
+    $layouts: (flex, inline-flex, grid, inline-grid);
+    $alignments: (
+        vertical: (
+            'v-center': center,
+            'v-start': flex-start,
+            'v-end': flex-end,
+            'v-baseline': baseline,
+            'v-stretch': stretch
+        ),
+        horizontal: (
+            'h-center': center,
+            'h-start': flex-start,
+            'h-end': flex-end,
+            'h-between': space-between,
+            'h-around': space-around,
+            'h-evenly': space-evenly,
+            'h-stretch': stretch
+        )
+    );
+
     @each $arg in $args {
-        @if list.index($displayValues, $arg) {
+        @if (list.index($layouts, $arg)) {
             display: $arg;
         }
 
-        @if list.index($overflowValues, $arg) {
-            overflow: $arg;
-        }
-
-        @if (meta.type-of($arg) == 'number') {
-            opacity: $arg;
+        @if (map.get($spacing, $arg)) {
+            gap: map.get($spacing, $arg);
         }
-    }
-}
-
-@mixin layer($stack: 'default') {
-    z-index: #{map.get($layers, $stack)};
-}
-
-@mixin size($args...) {
-    $singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
-    $isSingle: list.length($args) == 1
-        and $singlePrefix != 'w'
-        and $singlePrefix != 'h';
-
-    @if ($isSingle) {
-        width: $args;
-        height: $args;
-    } @else {
-        @each $arg in $args {
-            @if (meta.type-of($arg) == string) {
-                $prefix: string.slice($arg, 1, 1);
-                $value: string.slice($arg, 2, -1);
 
-                @if ($prefix == 'w') {
-                    width: string.unquote($value);
-                }
-
-                @if ($prefix == 'h') {
-                    height: string.unquote($value);
-                }
-            } @else {
-                @if (index($args, $arg) == 1) {
-                    width: $arg;
-                }
+        @if (meta.type-of($arg) == 'string') {
+            @if (string.index($arg, 'v-')) {
+                align-items: map.get(map.get($alignments, vertical), $arg)
+            }
     
-                @if (index($args, $arg) == 2) {
-                    height: $arg;
-                }
+            @if (string.index($arg, 'h-')) {
+                justify-content: map.get(map.get($alignments, horizontal), $arg)
             }
         }
-    }
-}
-
-@mixin typography($args...) {
-    @each $arg in $args {
-        $color: map.get($colorPalette, '#{$arg}');
-        $type: map.get($fontTypes, '#{$arg}');
-        $size: map.get($fontSizes, '#{$arg}');
-        $height: map.get($lineHeights, '#{$arg}');
-        $decoration: map.get($decorations, '#{$arg}');
-
-        @if ($color) {
-            color: $color;
-        }
-
-        @if ($type) {
-            font-family: $type;
-        }
 
-        @if ($size) {
-            font-size: $size;
+        @if ($arg == 'center') {
+            align-items: center;
+            justify-content: center;
         }
 
-        @if list.index($fontWeights, $arg) {
-            font-weight: $arg;
+        @if (list.index($flexDirectionValues, $arg)) {
+            flex-direction: $arg;
         }
 
-        @if list.index($textAlignValues, $arg) {
-            text-align: $arg;
+        @if (meta.type-of($arg) == 'number') {
+            grid-template-columns: repeat($arg, minmax(0, 1fr));
         }
 
-        @if ($decoration) {
-            text-decoration: $decoration;
+        @if (list.index($flexWrapValues, $arg)) {
+            flex-wrap: $arg;
         }
+    }
+}
 
-        @if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
-            line-height: $height or $arg;
-        }
+@mixin media($breakpoint: 'xs') {
+    @media (min-width: #{map.get($breakpoints, $breakpoint)}) {
+        @content;
     }
 }
 
@@ -230,6 +182,41 @@
     }
 }
 
+@mixin size($args...) {
+    $singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
+    $isSingle: list.length($args) == 1
+        and $singlePrefix != 'w'
+        and $singlePrefix != 'h';
+
+    @if ($isSingle) {
+        width: $args;
+        height: $args;
+    } @else {
+        @each $arg in $args {
+            @if (meta.type-of($arg) == string) {
+                $prefix: string.slice($arg, 1, 1);
+                $value: string.slice($arg, 2, -1);
+
+                @if ($prefix == 'w') {
+                    width: string.unquote($value);
+                }
+
+                @if ($prefix == 'h') {
+                    height: string.unquote($value);
+                }
+            } @else {
+                @if (index($args, $arg) == 1) {
+                    width: $arg;
+                }
+    
+                @if (index($args, $arg) == 2) {
+                    height: $arg;
+                }
+            }
+        }
+    }
+}
+
 @mixin spacing($args...) {
     $margin: (0 0 0 0);
     $padding: (0 0 0 0);
@@ -342,61 +329,71 @@
     }
 }
 
-@mixin layout($args...) {
-    $layouts: (flex, inline-flex, grid, inline-grid);
-    $alignments: (
-        vertical: (
-            'v-center': center,
-            'v-start': flex-start,
-            'v-end': flex-end,
-            'v-baseline': baseline,
-            'v-stretch': stretch
-        ),
-        horizontal: (
-            'h-center': center,
-            'h-start': flex-start,
-            'h-end': flex-end,
-            'h-between': space-between,
-            'h-around': space-around,
-            'h-evenly': space-evenly,
-            'h-stretch': stretch
-        )
-    );
+@mixin transition($args...) {
+    $property: all;
+    $speed: .3s;
 
     @each $arg in $args {
-        @if (list.index($layouts, $arg)) {
-            display: $arg;
+        @if (meta.type-of($arg) == 'number') {
+            $speed: $arg;
+        } @else {
+            $property: $arg;
         }
+    }
 
-        @if (map.get($spacing, $arg)) {
-            gap: map.get($spacing, $arg);
+    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@mixin typography($args...) {
+    @each $arg in $args {
+        $color: map.get($colorPalette, '#{$arg}');
+        $type: map.get($fontTypes, '#{$arg}');
+        $size: map.get($fontSizes, '#{$arg}');
+        $height: map.get($lineHeights, '#{$arg}');
+        $decoration: map.get($decorations, '#{$arg}');
+
+        @if ($color) {
+            color: $color;
         }
 
-        @if (meta.type-of($arg) == 'string') {
-            @if (string.index($arg, 'v-')) {
-                align-items: map.get(map.get($alignments, vertical), $arg)
-            }
-    
-            @if (string.index($arg, 'h-')) {
-                justify-content: map.get(map.get($alignments, horizontal), $arg)
-            }
+        @if ($type) {
+            font-family: $type;
         }
 
-        @if ($arg == 'center') {
-            align-items: center;
-            justify-content: center;
+        @if ($size) {
+            font-size: $size;
         }
 
-        @if (list.index($flexDirectionValues, $arg)) {
-            flex-direction: $arg;
+        @if list.index($fontWeights, $arg) {
+            font-weight: $arg;
         }
 
-        @if (meta.type-of($arg) == 'number') {
-            grid-template-columns: repeat($arg, minmax(0, 1fr));
+        @if list.index($textAlignValues, $arg) {
+            text-align: $arg;
         }
 
-        @if (list.index($flexWrapValues, $arg)) {
-            flex-wrap: $arg;
+        @if ($decoration) {
+            text-decoration: $decoration;
+        }
+
+        @if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
+            line-height: $height or $arg;
+        }
+    }
+}
+
+@mixin visibility($args...) {        
+    @each $arg in $args {
+        @if list.index($displayValues, $arg) {
+            display: $arg;
+        }
+
+        @if list.index($overflowValues, $arg) {
+            overflow: $arg;
+        }
+
+        @if (meta.type-of($arg) == 'number') {
+            opacity: $arg;
         }
     }
 }

package/scss/config/typography.scss

@@ -4,15 +4,14 @@ $fontTypes: (
 ) !default;
 
 $fontSizes: (
-    'xxs':      10px,
-    'xs':       12px,
-    'sm':       14px,
-    'md':       16px,
-    'default':  18px,
-    'lg':       21px,
-    'xl':       24px,
-    '2xl':      28px,
-    '3xl':      32px
+    'xs':       10px,
+    'sm':       12px,
+    'md':       14px,
+    'default':  16px,
+    'lg':       18px,
+    'xl':       21px,
+    '2xl':      24px,
+    '3xl':      28px
 ) !default;
 
 $lineHeights: (

package/scss/global/theme.scss

@@ -7,7 +7,7 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #DDD;
             --w-color-primary-20: #BBB;
-            --w-color-primary-30: #555;
+            --w-color-primary-30: #757575;
             --w-color-primary-40: #333;
             --w-color-primary-50: #252525;
             --w-color-primary-60: #111;
@@ -22,9 +22,10 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -49,9 +50,10 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -61,78 +63,109 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #EEE;
             --w-color-primary-20: #a5b7cf;
-            --w-color-primary-30: #516580;
+            --w-color-primary-30: #667f9e;
             --w-color-primary-40: #2d4463;
             --w-color-primary-50: #20344e;
             --w-color-primary-60: #101a2d;
             --w-color-primary-70: #061321;
 
-            --w-color-info: #1058b6;
-            --w-color-info-accent: #176ee0;
-            --w-color-info-fg: #FFF;
-            --w-color-success: #10ac95;
+            --w-color-info: #57a0ff;
+            --w-color-info-accent: #71afff;
+            --w-color-info-fg: #000;
+            --w-color-success: #10b59c;
             --w-color-success-accent: #1DD1A1;
             --w-color-success-fg: #000;
             --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-accent: #feb570;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #ed3b3c;
+            --w-color-alert-accent: #fb6161;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0017239e;
         }
     }
 
-    @if $theme == green {
+    @if $theme == 'vintage' {
         #{$selector} {
             --w-color-scheme: dark;
-            --w-color-primary: #FFF;
-            --w-color-primary-10: #EEE;
-            --w-color-primary-20: #b7ffe4;
-            --w-color-primary-30: #dad7cd;
-            --w-color-primary-40: #10AC84;
-            --w-color-primary-50: #4d6e4c;
-            --w-color-primary-60: #315037;
-            --w-color-primary-70: #22392d;
+            --w-color-primary: #000;
+            --w-color-primary-10: #111;
+            --w-color-primary-20: #6b4430;
+            --w-color-primary-30: #d6ccc2;
+            --w-color-primary-40: #cbb39a;
+            --w-color-primary-50: #e8d0b7;
+            --w-color-primary-60: #f5e6d5;
+            --w-color-primary-70: #f5ebe0;
 
-            --w-color-info: #0ABDE3;
+            --w-color-info: #6d95d1;
             --w-color-info-accent: #48DBFB;
             --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
+            --w-color-success: #85c8ba;
             --w-color-success-accent: #1DD1A1;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
+            --w-color-warning: #e79d6b;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #bf6170;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
-    @if $theme == beige {
+    @if $theme == 'amber' {
         #{$selector} {
             --w-color-scheme: dark;
-            --w-color-primary: #000;
-            --w-color-primary-10: #111;
-            --w-color-primary-20: #97725c;
-            --w-color-primary-30: #d6ccc2;
-            --w-color-primary-40: #e3d5ca;
-            --w-color-primary-50: #ecddcd;
-            --w-color-primary-60: #f1e6da;
-            --w-color-primary-70: #f5ebe0;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #DDD;
+            --w-color-primary-20: #FFF3DB;
+            --w-color-primary-30: #757575;
+            --w-color-primary-40: #232323;
+            --w-color-primary-50: #312e31;
+            --w-color-primary-60: #1b1b1b;
+            --w-color-primary-70: #111;
 
-            --w-color-info: #0ABDE3;
+            --w-color-info: #78dcdc;
             --w-color-info-accent: #48DBFB;
             --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
-            --w-color-success-accent: #1DD1A1;
+            --w-color-success: #a9dc62;
+            --w-color-success-accent: #97da3b;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
+            --w-color-warning: #FCBA28;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #ff6188;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #000;
+            --w-color-overlay: #0000009e;
+        }
+    }
+
+    @if $theme == 'synthwave' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #EEE;
+            --w-color-primary-20: #fad5c0;
+            --w-color-primary-30: #eabfff;
+            --w-color-primary-40: #8212ba;
+            --w-color-primary-50: #9D2BD6;
+            --w-color-primary-60: #0f1b33;
+            --w-color-primary-70: #030d1e;
+
+            --w-color-info: #1c98ff;
+            --w-color-info-accent: #6be4ff;
+            --w-color-info-fg: #000;
+            --w-color-success: #83e300;
+            --w-color-success-accent: #b7ff51;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #ffb672;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #ff3333;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #13002cc2;
         }
     }
 }

package/scss/global/tooltip.scss

@@ -8,6 +8,8 @@
 
     [data-tooltip] {
         @include position(relative);
+        @include typography(normal);
+
         display: inline-block;
 
         &::before,
@@ -24,7 +26,7 @@
         &::before {
             @include border-radius(md);
             @include position(absolute);
-            @include typography(sm, hlg);
+            @include typography(md, hlg);
             @include background(var(--w-tooltip-background));
             @include size(wmax-content);
             @include spacing(px-xs);
@@ -94,7 +96,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-left: 5px solid var(--w-tooltip-background);
                 transform: translate(10px, -50%);
             }
@@ -123,7 +125,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-right: 5px solid var(--w-tooltip-background);
                 transform: translate(-10px, -50%);
             }