webcoreui 0.0.12 → 0.1.0

package/components/Checkbox/checkbox.module.scss

@@ -1,26 +1,20 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-checkbox-color: var(--w-color-primary);
+}
 
 .checkbox {
+    @include layout(inline-flex, sm);
+    @include typography(md, hmd);
+
     cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 16px;
-    line-height: 1.5;
 
     &.col {
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        gap: 0;
+        @include layout(column, h-start, v-start, none);
 
         .wrapper {
-            display: flex;
-            gap: 10px;
-
-            .check {
-                margin-top: 5px;
-            }
+            @include layout(flex, sm);
         }
     }
 
@@ -28,56 +22,48 @@
         display: none;
 
         &:checked + span {
-            background-color: var(--w-checkbox-color);
+            @include background(var(--w-checkbox-color));
 
             svg {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                @include position(absolute, center);
+                @include typography(primary-50);
+                @include size(10px);
+
                 display: block;
-                color: var(--w-color-primary-50);
-                width: 10px;
-                height: 10px;
             }
         }
 
         &:disabled + span {
-            background-color: var(--w-color-primary-40);
-            border-color: var(--w-color-primary-40);
+            @include background(primary-40);
+            @include border(primary-40);
             cursor: no-drop;
         }
     }
 
-    a {
-        text-decoration: underline;
-    }
-
     .check {
+        @include size(15px);
+        @include position(relative);
+        @include border-radius(sm);
+        @include spacing(mt-xs);
+
         display: inline-block;
-        width: 15px;
-        height: 15px;
         min-width: 15px;
         border: 1px solid var(--w-checkbox-color);
-        border-radius: 2px;
-        position: relative;
 
         svg {
-            display: none;
+            @include visibility(none);
         }
     }
 
     .text {
-        margin-left: 25px;
-        font-size: 14px;
-        color: var(--w-color-primary-20);
+        @include spacing(ml-lg);
+        @include typography(sm, primary-20);
 
         a {
-            @include Transition(color);
-            color: var(--w-color-primary-20);
+            @include typography(primary-20);
 
             &:hover {
-                color: var(--w-color-primary);
+                @include typography(primary);
             }
         }
     }

package/components/Icon/Icon.astro

@@ -1,5 +1,6 @@
 ---
 import type { IconProps } from './icon'
+import iconMap from './map'
 
 interface Props extends IconProps {}
 
@@ -9,8 +10,7 @@ const {
     color
 } = Astro.props
 
-const { default: markup } = await import(`../../icons/${type}.svg?raw`)
-const icon = markup
+const icon = iconMap[type as keyof typeof iconMap]
     .replace('width="24"', `width=${size}`)
     .replace('height="24"', color
         ? `height=${size} color=${color}`

package/components/Input/input.module.scss

@@ -1,87 +1,79 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .input {
-    border-radius: 2px;
-    padding: 5px 10px;
-    border: 1px solid var(--w-color-primary-50);
-    background: transparent;
-    font-family: Regular;
-    color: var(--w-color-primary);
-    line-height: 20px;
-    width: 100%;
+    @include border-radius(sm);
+    @include spacing(py-xs, px-sm);
+    @include border(primary-50);
+    @include background(transparent);    
+    @include typography(regular, primary, hlg);
+    @include size('w100%');
+
     color-scheme: var(--w-color-scheme);
 
     &[disabled] {
+        @include typography(primary-30);
         cursor: no-drop;
-        color: var(--w-color-primary-30);
     }
 
     &::file-selector-button {
-        background: transparent;
-        border: 0;
-        color: var(--w-color-primary);
+        @include background(transparent);
+        @include border(0);
+        @include typography(primary);
     }
 
     &::placeholder {
-        color: var(--w-color-primary-30);
+        @include typography(primary-30);
     }
 
     &[type="color"] {
-        padding: 0;
+        @include spacing(p0);
     }
 
     &.info {
-        border-color: #48dbfb;
+        @include border(info);
     }
 
     &.success {
-        border-color: #1dd1a1;
+        @include border(success);
     }
 
     &.warning {
-        border-color: #f7aa61;
+        @include border(warning);
     }
 
     &.alert {
-        border-color: #ee5253;
+        @include border(alert);
     }
 
     &.fill {
-        background: var(--w-color-primary-50);
+        @include background(primary-50);
     }
 }
 
 .input-label {
-    display: flex;
-    flex-direction: column;
+    @include layout(flex, column);
 
     .label {
-        font-size: 16px;
-        color: var(--w-color-primary-20);
-        margin-bottom: 5px;
+        @include typography(md, primary-20);
+        @include spacing(mb-xs);
     }
 
     .wrapper {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        position: relative;
+        @include layout(flex, v-center, sm);
+        @include position(relative);
 
         input {
             padding-left: 40px;
         }
 
         svg {
-            position: absolute;
-            left: 10px;
-            width: 20px;
-            height: 20px;
+            @include position(absolute, l10px);
+            @include size(20px);
         }
     }
 
     .subtext {
-        font-size: 14px;
-        color: var(--w-color-primary-30);
-        margin-top: 5px;
+        @include typography(sm, primary-30);
+        @include spacing(mt-xs);
     }
 }

package/components/Menu/menu.module.scss

@@ -1,144 +1,141 @@
-@import '../../scss/config.scss';
-
-.menu {
-    background: var(--w-color-primary-70);
-    padding: 15px;
-    font-size: 16px;
-    border-bottom: 1px solid var(--w-color-primary-50);
-    position: sticky;
-    top: 0;
-    z-index: 99;
-
-    &[data-active="true"] {
-        .hamburger {
-            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
-
-            .meat:first-child,
-            .meat:last-child {
-                opacity: 0;
-            }
-
-            .meat:first-child {
-                transform: translateY(20px) scale(0);
-            }
-
-            .meat:last-child {
-                transform: translateY(-20px) scale(0);
-            }
-
-            .meat:nth-child(2) {
-                transform: rotate(45deg);
-            }
-
-            .meat:nth-child(3) {
-                transform: rotate(-45deg);
-            }
-        }
-
-        ul {
-            @include Transition(opacity);
-            opacity: 1;
-            z-index: 99;
-            pointer-events: all;
-        }
-    }
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    img,
-    svg {
-        display: block;
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        gap: 20px;
-        position: fixed;
-        top: 20px;
-        left: 20px;
-        flex-direction: column;
-        opacity: 0;
-        pointer-events: none;
-
-        a {
-            @include Transition(color);
-            color: var(--w-color-primary-20);
-    
-            &:hover {
-                color: var(--w-color-primary);
-            }
-        }
-    }
-
-    .hamburger {
-        @include Transition(box-shadow);
-        position: relative;
-        width: 30px;
-        height: 20px;
-        box-shadow: 0 0 0 0 var(--w-color-primary-70);
-        border-radius: 50%;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        z-index: 98;
-        cursor: pointer;
-
-        .meat {
-            @include Transition();
-            width: 100%;
-            position: absolute;
-            height: 2px;
-            background: var(--w-color-primary);
-            display: block;
-            border-radius: 5px;
-
-            &:first-child {
-                top: 0;
-            }
-
-            &:nth-child(2),
-            &:nth-child(3) {
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            &:last-child {
-                bottom: 0;
-            }
-        }
-    }
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-@include Media('sm') {
-    .menu {
-        .hamburger {
-            display: none;
-        }
-
-        ul {
-            position: static;
-            opacity: 1;
-            flex-direction: row;
-            pointer-events: all;
-            transform: none;
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.menu {
+    @include background(primary-70);
+    @include spacing(p-md);
+    @include typography(md);
+    @include border(bottom, primary-50);
+    @include position(sticky, t0);
+    @include layer(header);
+
+    &[data-active="true"] {
+        .hamburger {
+            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
+
+            .meat:first-child,
+            .meat:last-child {
+                @include visibility(0);
+            }
+
+            .meat:first-child {
+                transform: translateY(20px) scale(0);
+            }
+
+            .meat:last-child {
+                transform: translateY(-20px) scale(0);
+            }
+
+            .meat:nth-child(2) {
+                transform: rotate(45deg);
+            }
+
+            .meat:nth-child(3) {
+                transform: rotate(-45deg);
+            }
+        }
+
+        ul {
+            @include transition(opacity);
+            @include visibility(1);
+            @include layer(header);
+            pointer-events: all;
+        }
+    }
+
+    .wrapper {
+        @include layout(flex, v-center, default);
+    }
+
+    a {
+        @include typography(none);
+    }
+
+    img,
+    svg {
+        display: block;
+    }
+
+    ul {
+        @include spacing(0);
+        @include layout(flex, default, column);
+        @include position(fixed, t20px, l20px);
+        @include visibility(0);
+        @include typography(normal);
+
+        list-style-type: none;
+        pointer-events: none;
+
+        li {
+            @include spacing(m0);
+        }
+
+        a {
+            @include typography(primary-20);
+    
+            &:hover {
+                @include typography(primary);
+            }
+        }
+    }
+
+    .hamburger {
+        @include transition(box-shadow);
+        @include position(relative);
+        @include size(w30px, h20px);
+        @include border-radius(max);
+        @include spacing(p0);
+        @include border(0);
+        @include background(transparent);
+        @include layer(top);
+
+        box-shadow: 0 0 0 0 var(--w-color-primary-70);
+        cursor: pointer;
+
+        .meat {
+            @include transition();
+            @include size('w100%', h2px);
+            @include position(absolute);
+            @include background(primary);
+            @include border-radius(md);
+
+            display: block;
+
+            &:first-child {
+                @include position(t0);
+            }
+
+            &:nth-child(2),
+            &:nth-child(3) {
+                @include position(v-center);
+            }
+
+            &:last-child {
+                @include position(b0);
+            }
+        }
+    }
+}
+
+.container {
+    @include layout(flex, v-center, default, h-between, wrap);
+    @include spacing(auto-none, px-default);
+
+    max-width: 1200px;
+}
+
+@include media('sm') {
+    .menu {
+        .hamburger {
+            @include visibility(none);
+        }
+
+        ul {
+            @include position(static);
+            @include visibility(1);
+            @include layout(row);
+
+            pointer-events: all;
+            transform: none;
+        }
+    }
+}

package/components/Progress/progress.module.scss

@@ -1,35 +1,40 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-progress-color: var(--w-color-primary);
+    --w-progress-background: var(--w-color-primary-50);
+    --w-progress-stripe-light: var(--w-color-primary);
+    --w-progress-stripe-dark: var(--w-color-primary-10);
+}
 
 .w-progress {
-    width: 100%;
-    height: 10px;
-    background: var(--w-progress-background);
-    border-radius: 20px;
-    overflow: hidden;
+    @include size('w100%', h10px);
+    @include border-radius(xl);
+    @include visibility(hidden);
+    @include typography(bold, xxs);
+    @include background(var(--w-progress-background));
+
     color: var(--w-progress-background);
-    font-family: Bold;
-    font-size: 10px;
     
     &.medium {
-        height: 15px;
-        font-size: 12px;
+        @include size(h15px);
+        @include typography(xs);
     }
 
     &.large {
-        height: 20px;
-        font-size: 14px;
+        @include size(h20px);
+        @include typography(sm);
     }
 
     &.square {
-        border-radius: 2px;
+        @include border-radius(sm);
 
         .progress {
-            border-radius: 2px;
+            @include border-radius(sm);
         }
     }
 
     &.striped {
-
         .progress {
             background-size: 10px 10px;
             background-image: linear-gradient(
@@ -54,13 +59,12 @@
     }
 
     .progress {
-        @include Transition(width);
+        @include transition(width);
+        @include size('h100%');
+        @include border-radius(xl);
+        @include layout(flex, center);
+        @include background(var(--w-progress-color));
+
         width: var(--w-progress-width);
-        height: 100%;
-        background: var(--w-progress-color);
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
     }
 }