webcoreui 0.0.12 → 0.2.0

package/scss/config/typography.scss

@@ -0,0 +1,65 @@
+$fontTypes: (
+    'regular':  (Regular, sans-serif),
+    'bold':     (Bold, sans-serif)
+) !default;
+
+$fontSizes: (
+    'xs':       10px,
+    'sm':       12px,
+    'md':       14px,
+    'default':  16px,
+    'lg':       18px,
+    'xl':       21px,
+    '2xl':      24px,
+    '3xl':      28px
+) !default;
+
+$lineHeights: (
+    'normal': normal,
+    'hmd': 1.5,
+    'hlg': 1.7
+) !default;
+
+$decorations: (
+    'none': none,
+    'underline': underline,
+    'overline': overline,
+    'line-through': line-through,
+    'dotted': underline dotted,
+    'dashed': underline dashed,
+    'double': underline double,
+    'wavy': underline wavy,
+    'overline-dotted': overline dotted,
+    'overline-dashed': overline dashed,
+    'overline-double': overline double,
+    'overline-wavy': overline wavy,
+    'line-through-dotted': line-through dotted,
+    'line-through-dashed': line-through dashed,
+    'line-through-double': line-through double,
+    'line-through-wavy': line-through wavy,
+    'line-through-underline': underline line-through,
+    'line-through-overline': overline line-through,
+    'overunder': underline overline,
+    'overunder-dotted': underline overline dotted,
+    'overunder-dashed': underline overline dashed,
+    'overunder-double': underline overline double,
+    'overunder-wavy': underline overline wavy,
+    'overunder-line-through': underline overline line-through,
+) !default;
+
+$textAlignValues: left,
+    right,
+    center,
+    justify !default;
+
+$fontWeights: 100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900,
+    bolder,
+    lighter !default;

package/scss/config.scss

@@ -1 +1,6 @@
-@import './config/mixins.scss';
+@import '../webcore.config.scss';
+@import './config/color-palette';
+@import './config/css-values';
+@import './config/typography';
+@import './config/layout';
+@import './config/mixins';

package/scss/global/elements.scss

@@ -1,6 +1,6 @@
 @import '../config';
 
-@mixin Elements() {
+@mixin elements() {
     code {
         display: inline-block;
         padding: 2px 10px;
@@ -8,4 +8,24 @@
         border: 1px solid var(--w-color-primary-50);
         font-size: 14px;
     }
+
+    figure {
+        margin: 0;
+    }
+
+    p {
+        font-size: 16px;
+        line-height: 1.7;
+        margin: 20px 0;
+    }
+
+    ul, ol {
+        line-height: 1.7;
+        font-size: 16px;
+        margin: 20px 0;
+
+        li {
+            margin-bottom: 10px;
+        }
+    }
 }

package/scss/global/scrollbar.scss

@@ -1,21 +1,24 @@
-@import '../config';
+@use '../config' as *;
+
+@mixin scrollbar() {
+    body {
+        --w-scrollbar-bg: var(--w-color-primary-60);
+        --w-scrollbar-fg: var(--w-color-primary-50);
+    }
 
-@mixin Scrollbar() {
     ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
+        @include size(10px);
     }
     
     ::-webkit-scrollbar-track {
-        border-radius: 5px;
-        background: var(--w-scrollbar-bg);
+        @include border-radius(md);
+        @include background(var(--w-scrollbar-bg));
         cursor: pointer;
     }
     
     ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background: var(--w-scrollbar-fg);
+        @include border-radius(md);
+        @include background(var(--w-scrollbar-fg));
         cursor: pointer;
     }
 }
-

package/scss/global/theme.scss

@@ -1,13 +1,13 @@
-@import '../config';
+@use '../config' as *;
 
-@mixin Theme($theme: 'dark', $selector: ':root') {
+@mixin theme($theme: 'dark', $selector: ':root') {
     @if $theme == 'dark' {
         #{$selector} {
             --w-color-scheme: dark;
             --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

@@ -1,48 +1,56 @@
-@import '../config';
+@use '../config' as *;
+
+@mixin tooltip() {
+    body {
+        --w-tooltip-background: var(--w-color-primary);
+        --w-tooltip-color: var(--w-color-primary-70);
+    }
 
-@mixin Tooltip() {
     [data-tooltip] {
+        @include position(relative);
+        @include typography(normal);
+
         display: inline-block;
-        position: relative;
 
         &::before,
         &::after {
-            @include Transition();
-            opacity: 0;
+            @include transition();
+            @include visibility(0);
+            @include layer(header);
+
             left: 50%;
             transform: translate(-50%, 5px);
             pointer-events: none;
-            z-index: 99;
         }
 
         &::before {
+            @include border-radius(md);
+            @include position(absolute);
+            @include typography(md, hlg);
+            @include background(var(--w-tooltip-background));
+            @include size(wmax-content);
+            @include spacing(px-xs);
+
             content: attr(data-tooltip);
-            border-radius: 5px;
-            font-size: 14px;
-            position: absolute;
-            background: var(--w-tooltip-background);
             color: var(--w-tooltip-color);
-            padding: 0 5px;
             bottom: calc(100% + 5px);
-            width: max-content;
-            line-height: 1.8;
             max-width: 300px;
         }
 
         &::after {
+            @include position(absolute, t-5px);
+            @include size(0);
+            @include border(5px, left, transparent);
+            @include border(5px, right, transparent);
+
             content: '';
-            position: absolute;
-            width: 0; 
-            height: 0; 
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
             border-top: 5px solid var(--w-tooltip-background);
-            top: -5px;
         }
 
         &:hover::before,
         &:hover::after {
-            opacity: 1;
+            @include visibility(1);
+
             pointer-events: all;
             transform: translate(-50%, 0);
         }
@@ -59,9 +67,8 @@
             }
 
             &::after {
-                border-left: 5px solid transparent;
-                border-right: 5px solid transparent;
-                border-top: 5px solid transparent;
+                @include border(5px, top, transparent);
+
                 border-bottom: 5px solid var(--w-tooltip-background);
                 top: auto;
                 bottom: -5px;
@@ -86,12 +93,12 @@
             }
 
             &::after {
+                @include border(5px, top, transparent);
+                @include border(5px, bottom, transparent);
+
+                top: calc(50%);
                 border-left: 5px solid var(--w-tooltip-background);
-                border-right: 5px solid transparent;
-                border-top: 5px solid transparent;
-                border-bottom: 5px solid transparent;
-                top: 50%;
-                transform: translate(10px, -40%);
+                transform: translate(10px, -50%);
             }
 
             &:hover::before {
@@ -99,7 +106,7 @@
             }
 
             &:hover::after {
-                transform: translate(5px, -40%);
+                transform: translate(5px, -50%);
             }
         }
 
@@ -115,12 +122,12 @@
             }
 
             &::after {
-                border-left: 5px solid transparent;
+                @include border(5px, top, transparent);
+                @include border(5px, bottom, transparent);
+
+                top: calc(50%);
                 border-right: 5px solid var(--w-tooltip-background);
-                border-top: 5px solid transparent;
-                border-bottom: 5px solid transparent;
-                top: 50%;
-                transform: translate(-10px, -40%);
+                transform: translate(-10px, -50%);
             }
 
             &:hover::before {
@@ -128,7 +135,7 @@
             }
 
             &:hover::after {
-                transform: translate(-5px, -40%);
+                transform: translate(-5px, -50%);
             }
         }
     }

package/scss/global/utility.scss

@@ -1,88 +1,106 @@
-@import '../config';
-
-@mixin Utility() {
+@use 'sass:string';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use '../config' as *;
+
+$breakpointMap: (
+    'xs': 3,
+    'sm': 4,
+    'md': 6,
+    'lg': 8
+);
+
+$alignments: (
+    'items-center': center,
+    'items-start': flex-start,
+    'items-end': flex-end,
+    'items-baseline': baseline,
+    'items-stretch': stretch,
+
+    'justify-center': center,
+    'justify-start': flex-start,
+    'justify-end': flex-end,
+    'justify-between': space-between,
+    'justify-around': space-around,
+    'justify-evenly': space-evenly,
+    'justify-stretch': stretch  
+);
+
+@mixin utility() {
     .container {
-        margin: 0 auto;
+        @include spacing(auto-none, px-default);
         max-width: 1200px;
-        padding: 0 20px;
     }
 
-    .grid {
-        display: grid;
-        gap: 20px;
-
-        &.col-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
+    // Gaps
+    .flex, .grid {
+        @each $key, $value in $spacing {
+            $numberList: ('2', '3', '4', '5');
+            $firstLetter: string.slice($key, 1, 1);
+            $class: $key;
+            
+            @if (list.index($numberList, $firstLetter)) {
+              $class: string.slice($key, 2, -1) + $firstLetter;
+            }
+
+            &.#{$class} { gap: $value; }        
         }
     }
 
-    .flex {
-        display: flex;
-        gap: 20px;
-
-        &.column {
-            flex-direction: column;
-        }
-
-        &.xs {
-            gap: 5px;
-        }
-
-        &.sm {
-            gap: 10px;
-        }
-
-        &.wrap {
-            flex-wrap: wrap;
-        }
-
-        &.center {
-            justify-content: center;
-            align-items: center;
-        }
-
-        &.justify-center {
-            justify-content: center;
-        }
-
-        &.items-center {
-            align-items: center;
-        }
-
-        &.items-start {
-            align-items: flex-start;
+    // Alignments
+    @each $key, $value in $alignments {
+        .#{$key} {
+            @if (string.index($key, 'items')) {
+                align-items: $value;
+            } @else {
+                justify-content: $value;
+            } 
         }
     }
 
-    .my {
-        margin: 20px auto;
+    .flex.center,
+    .grid.center {
+        justify-content: center;
+        align-items: center;
     }
 
-    @include Media('md') {
-        .grid.md-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
+    .flex {
+        @include layout(flex, default);
 
-        .grid.md-3 {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
+        @each $direction in $flexDirectionValues {
+            &.#{$direction} {
+                flex-direction: $direction;
+            }
         }
 
-        .grid.md-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+        @each $wrap in $flexWrapValues {
+            &.#{$wrap} {
+                flex-wrap: $wrap;
+            }
         }
     }
 
-    @include Media('lg') {
-        .grid.lg-2 {
+    .grid {
+        @include layout(grid, default);
+
+        &.col-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
-        .grid.lg-3 {
+        &.col-3 {
             grid-template-columns: repeat(3, minmax(0, 1fr));
         }
+    }
 
-        .grid.lg-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+    // Grid columns
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            @for $i from 2 to map.get($breakpointMap, $key) + 1 {
+                .grid.#{$key}-#{$i} {
+                    grid-template-columns: repeat($i, minmax(0, 1fr));
+                }
+            }
         }
     }
 }

package/scss/global.scss

@@ -1,4 +1,3 @@
-@import './global/elements.scss';
 @import './global/scrollbar.scss';
 @import './global/theme.scss';
 @import './global/tooltip.scss';