webcoreui 0.0.12 → 0.1.0

package/components/Radio/radio.module.scss

@@ -1,49 +1,47 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-radio-color: var(--w-color-primary);
+}
 
 .radio {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    @include layout(flex, column, sm);
 
     &.inline {
-        flex-direction: row;
+        @include layout(row);
     }
 
     label {
-        display: flex;
-        align-items: center;
-        gap: 5px;
+        @include layout(flex, xs);
+        @include typography(md);
+
         cursor: pointer;
-        font-size: 16px;
 
         &.disabled {
             cursor: no-drop;
 
             input + span::after {
-                background: var(--w-color-primary-20);
+                @include background(primary-20);
             }
         }
 
         &.col {
-            flex-direction: column;
-            align-items: flex-start;
+            @include layout(column, v-start);
         }
     }
 
     input {
-        display: none;
+        @include visibility(none);
 
         + span::after {
-            @include Transition(transform);
+            @include transition(transform);
+            @include position(absolute, 't50%', 'l50%');
+            @include size(8px);
+            @include border-radius(max);
+            @include background(var(--w-radio-color));
+
             content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
             transform: translate(-50%, -50%) scale(0);
-            width: 8px;
-            height: 8px;
-            border-radius: 100%;
-            background: var(--w-radio-color);
         }
 
         &:checked + span::after {
@@ -51,41 +49,35 @@
         }
 
         &:disabled + span {
-            background-color: var(--w-color-primary-40);
-            border-color: var(--w-color-primary-40);
+            @include background(primary-40);
+            @include border(primary-40);
         }
     }
 
-    a {
-        text-decoration: underline;
-    }
-
     .wrapper {
-        display: flex;
-        align-items: center;
-        gap: 10px;
+        @include layout(flex, sm);
     }
-
+    
     .icon {
+        @include size(16px);
+        @include border-radius(max);
+        @include position(relative);
+        @include spacing(mt-xxs);
+
         display: inline-block;
-        width: 16px;
-        height: 16px;
-        border-radius: 100%;
+        min-width: 16px;
         border: 1px solid var(--w-radio-color);
-        position: relative;
     }
 
     .subtext {
-        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/Rating/rating.module.scss

@@ -1,8 +1,15 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-rating-color: var(--w-color-primary);
+    --w-rating-empty-color: var(--w-color-primary);
+    --w-rating-empty-background: var(--w-color-primary-70);
+    --w-rating-size: 18px;
+}
 
 .rating {
-    display: inline-flex;
-    align-items: center;
+    @include layout(inline-flex, v-center);
+
     color: var(--w-rating-color);
     font-size: var(--w-rating-size);
 
@@ -22,14 +29,14 @@
         color: var(--w-rating-empty-color);
     }
 
-    a {
-        text-decoration: underline;
+    a:hover .text {
+        @include typography(primary);
     }
     
     .text {
-        font-size: 16px;
-        color: var(--w-color-primary-20);
-        margin-left: 5px;
+        @include transition(color);
+        @include typography(md, primary-20);
+        @include spacing(ml-xs);
 
         &.m {
             margin-right: 5px;

package/components/Spinner/spinner.module.scss

@@ -1,7 +1,16 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-spinner-color: var(--w-color-primary);
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+}
 
 .spinner {
-    margin: 0px auto;
+    @include spacing(auto-none);
+
     width: var(--w-spinner-size);
     height: var(--w-spinner-size);
     animation: rotate var(--w-spinner-speed) linear infinite;

package/components/Switch/switch.module.scss

@@ -1,21 +1,24 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-switch-off-color: var(--w-color-primary-50);
+    --w-switch-on-color: var(--w-color-primary);
+}
 
 .switch {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
+    @include layout(inline-flex, v-center, sm);
     cursor: pointer;
 
     &.reverse {
-        flex-direction: row-reverse;
+        @include layout(row-reverse);
     }
 
     &.disabled .toggle {
+        @include background(primary-40);
         cursor: no-drop;
-        background: var(--w-color-primary-40);
 
         &::before {
-            background: var(--w-color-primary-50);
+            @include background(primary-50);
         }
     }
 
@@ -25,33 +28,31 @@
         }
 
         .toggle {
-            width: 40px;
-            height: 20px;
+            @include size(w40px, h20px);
     
             &::before {
-                height: 14px;
-                width: 14px;
+                @include size(14px);
             }
         }
 
         .label {
-            font-size: 14px;
+            @include typography(sm);
         }
     }
 
     &.square .toggle {
-        border-radius: 5px;
+        @include border-radius(md);
 
         &::before {
-            border-radius: 5px;
+            @include border-radius(md);
         }
     }
 
     input {
-        display: none;
+        @include visibility(none);
 
         &:checked + span {
-            background-color: var(--w-switch-on-color);
+            @include background(var(--w-switch-on-color));
     
             &::before {
                 transform: translateX(30px);
@@ -60,22 +61,19 @@
     }
 
     .toggle {
-        @include Transition(background);
-        position: relative;
-        width: 60px;
-        height: 30px;
-        background: var(--w-switch-off-color);
-        border-radius: 30px;
+        @include transition(background);
+        @include position(relative);
+        @include size(w60px, h30px);
+        @include border-radius(xl);
+        @include background(var(--w-switch-off-color));
 
         &::before {
-            content: "";
-            position: absolute;
-            height: 24px;
-            width: 24px;
-            left: 3px;
-            bottom: 3px;
-            background: var(--w-color-primary-70);
-            border-radius: 50%;
+            @include position(absolute, l3px, b3px);
+            @include size(24px);
+            @include border-radius(max);
+            @include background(primary-70);
+
+            content: '';
             transition: 0.3s;
         }
     }

package/components/Table/table.module.scss

@@ -1,38 +1,34 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .table {
-    overflow-x: auto;
+    @include visibility(auto);
 
     table {
-        width: 100%;
+        @include size('w100%');
+        @include typography(md, left);
+
         border-collapse: collapse;
-        text-align: left;
-        font-size: 16px;
     }
 
     thead,
     tfoot {
-        font-family: Bold;
+        @include typography(bold);
     }
 
     th,
     td {
-        padding: 5px 10px;
+        @include spacing(py-xs, px-sm);
     }
 
     thead,
     tr {
-        border-bottom: 1px solid var(--w-color-primary-50);
+        @include border(bottom, primary-50);
 
         &:last-child {
-            border-bottom: 0;
+            @include border(bottom, 0);
         }
     }
 
-    a {
-        text-decoration: underline;
-    }
-
     tfoot,
     &.hover tr:hover,
     &.striped-rows tbody tr:nth-child(odd),
@@ -40,25 +36,25 @@
     &.striped-columns td:nth-child(odd),
     &.striped-columns.offset td:nth-child(even),
     &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
-        background: var(--w-color-primary-60);
+        @include background(primary-60);
     }
 
     &.striped-rows tr,
     &.striped-columns tr,
     &.striped-columns thead {
-        border-bottom: 0;
+        @include border(bottom, 0);
     }
 
     &.striped-rows.offset tbody tr:nth-child(odd),
     &.striped-rows.offset tfoot,
     &.striped-columns.offset td:nth-child(odd),
     &.striped-columns tfoot {
-        background: transparent;
+        @include background(transparent);
     }
 
     &.compact {
         th, td {
-            padding: 3px 10px;
+            @include spacing(py-xxs, px-sm);
         }
     }
 }

package/components/Tabs/Tabs.astro

@@ -63,7 +63,6 @@ const classes = [
 
                 const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
 
-                // TODO - update logic
                 Array.from(tabs).forEach((tab: any) => {
                     tab.dataset.active = 'false'
 

package/components/Tabs/tabs.module.scss

@@ -1,60 +1,58 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .tabs {
     &.boxed .items,
     &.outline .items {
-        background: var(--w-color-primary-50);
-        border-radius: 5px;
-        padding: 5px;
-        width: max-content;
+        @include background(primary-50);
+        @include border-radius(md);
+        @include spacing(p-xs);
+        @include size(wmax-content);
 
         button {
-            @include Transition();
-            border-radius: 5px;
-            padding: 10px;
+            @include transition();
+            @include border-radius(md);
+            @include spacing(p-sm);
 
             &[data-active="true"] {
-                border: 0;
-                background: var(--w-color-primary-70);
+                @include border(0);
+                @include background(primary-70);
                 padding-bottom: 10px;
             }
         }
     }
 
     &.outline .items {
-        background: transparent;
-        border: 1px solid var(--w-color-primary-50);
+        @include background(transparent);
+        @include border(primary-50);
 
         button {
             margin-bottom: 0;
 
             &[data-active="true"] {
-                background: var(--w-color-primary-50);
+                @include background(primary-50);
             }
         }
     }
 
     &.even .items button {
+        @include layout(h-center);
         flex: 1;
-        justify-content: center;
     }
 
     &.vertical {
-        display: flex;
-        gap: 20px;
+        @include layout(flex, default);
 
         &.boxed .items button,
         &.outline .items button {
-            border-bottom: 0;
+            @include border(bottom, 0);
         }
         
         .items {
-            flex-direction: column;
-            gap: 5px;
+            @include layout(column, xs);
             
             button {
-                padding: 10px;
-                border-bottom: 2px solid var(--w-color-primary-50);
+                @include spacing(p-sm);
+                @include border(2px, bottom, primary-50);
 
                 &[data-active="true"] {
                     padding-bottom: 10px;
@@ -63,71 +61,65 @@
         }
 
         .content {
-            margin-top: 0;
+            @include spacing(m0);
         }
     }
 
     .wrapper {
-        overflow: auto;
+        @include visibility(auto);
     }
 
     .items {
-        border-bottom: 2px solid var(--w-color-primary-50);
-        display: flex;
-        gap: 10px;
+        @include border(2px, bottom, primary-50);
+        @include layout(flex, sm);
 
         button {
-            @include Transition(color);
-            background: transparent;
+            @include transition(color);
+            @include background(transparent);
+            @include typography(md, primary-20);
+            @include border(0);
+            @include spacing(p-md);
+            @include layout(flex, v-center, sm);
+
             cursor: pointer;
-            color: var(--w-color-primary);
-            border: 0;
-            font-size: 16px;
-            padding: 0;
-            margin-bottom: -2px;
-            padding: 15px 15px;
-            color: var(--w-color-primary-20);
-            display: flex;
-            align-items: center;
-            gap: 10px;
             flex-shrink: 0;
 
             svg {
+                @include size(20px);
                 pointer-events: none;
-                width: 20px;
-                height: 20px;
             }
 
             &[disabled] {
-                color: var(--w-color-primary-30);
+                @include typography(primary-30);
                 cursor: no-drop;
             }
             
             &[data-active="true"] {
-                color: var(--w-color-primary);
-                border-bottom: 2px solid var(--w-color-primary);
+                @include typography(primary);
+                @include border(2px, bottom, primary);
+
                 padding-bottom: 13px;
             }
         }
     }
 
     .content {
-        margin-top: 20px;
+        @include spacing(mt-default);
     }
 
     [data-tab] {
-        display: none;
+        @include visibility(none);
 
         &[data-active="true"] {
-            display: block;
+            @include visibility(block);
         }
     }
 }
 
-@include Media('xs') {
+@include media('xs') {
     .tabs {
         &.even .items {
-            width: auto;
+            @include size(wauto);
         }
     }
 }

package/components/ThemeSwitcher/themeswitcher.module.scss

@@ -1,11 +1,14 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-theme-switcher-size: 20px;
+}
 
 .switcher {
-    display: flex;
-    gap: 10px;
+    @include layout(flex, sm);
 
     &.toggle {
-        position: relative;
+        @include position(relative);
         width: var(--w-theme-switcher-size);
         height: var(--w-theme-switcher-size);
 
@@ -13,37 +16,38 @@
             position: absolute;
 
             &:first-child {
-                z-index: 2;
+                @include layer(overlay);
             }
 
             &:nth-child(2) {
-                z-index: 1;
+                @include layer(fg);
             }
 
             &[data-active="true"] {
-                z-index: 3;
+                @include layer(popup);
             }
         }
     }
 }
 
 .switch {
+    @include border(0);
+    @include border-radius(max);
+    @include position(relative);
+
     width: var(--w-theme-switcher-size);
     height: var(--w-theme-switcher-size);
-    border-radius: 100%;
     cursor: pointer;
-    position: relative;
-    border: 0;
 
     &.icons {
-        @include Transition(opacity);
-        color: var(--w-color-primary);
-        background: transparent;
-        padding: 0;
-        opacity: 0;
+        @include transition(opacity);
+        @include typography(primary);
+        @include background(transparent);
+        @include spacing(p0);
+        @include visibility(0);
 
         &[data-active="true"] {
-            opacity: 1;
+            @include visibility(1);
         }
 
         svg, img {
@@ -54,20 +58,18 @@
     }
 
     &:not(.icons)::after {
-        @include Transition();
+        @include position(absolute, center);
+        @include border(primary);
+        @include border-radius(max);
+        @include layer(bg);
+        @include transition();
+        @include size(0);
+
         content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        border: 1px solid var(--w-color-primary);
-        border-radius: 100%;
-        width: 0;
-        height: 0;
-        z-index: -1;
     }
 
     &[data-active="true"]::after {
+        @include layer(default);
         width: calc(var(--w-theme-switcher-size) + 5px);
         height: calc(var(--w-theme-switcher-size) + 5px);
     }