webcoreui 0.0.12 → 0.1.0

package/scss/global/utility.scss

@@ -1,6 +1,6 @@
-@import '../config';
+@use '../config' as *;
 
-@mixin Utility() {
+@mixin utility() {
     .container {
         margin: 0 auto;
         max-width: 1200px;
@@ -58,7 +58,7 @@
         margin: 20px auto;
     }
 
-    @include Media('md') {
+    @include media('md') {
         .grid.md-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }
@@ -72,7 +72,7 @@
         }
     }
 
-    @include Media('lg') {
+    @include media('lg') {
         .grid.lg-2 {
             grid-template-columns: repeat(2, 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';

package/scss/resets.scss

@@ -1,4 +1,6 @@
-@mixin Resets() {
+@use './config.scss' as *;
+
+@mixin resets() {
     @if (config('fontRegular')) {
         @font-face {
             font-family: Regular;
@@ -18,12 +20,12 @@
     * {
         box-sizing: border-box;
     }
-    
+
     body {
-        background: var(--w-color-primary-70);
-        color: var(--w-color-primary);
-        margin: 0;
-        font-size: 18px;
+        @include background(primary-70);
+        @include typography(primary, default);
+        @include spacing(m0);
+
         font-family: Regular, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
@@ -33,16 +35,67 @@
     h4,
     h5,
     h6,
-    strong {
+    strong,
+    b {
         font-family: Bold, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     }
 
     a {
-        color: var(--w-color-primary);
-        text-decoration: none;
+        @include transition(color);
+        @include typography(primary);
     }
 
     button {
         font-family: Regular;
     }
+
+    code,
+    pre {
+        @include border(primary-50);
+        @include border-radius(md);
+        @include typography(sm);
+    }
+
+    code {
+        @include spacing(py-xxs, px-sm, my-xxs);
+        display: inline-block;
+    }
+
+    pre {
+        @include background(primary-60);
+        @include spacing(p-sm, my-default);
+
+    }
+
+    figure {
+        @include spacing(my-default);
+        @include layout(inline-flex, column, v-center, xs);
+    }
+
+    figcaption {
+        @include typography(sm, primary-20);  
+        
+        a {
+            @include typography(primary-20);
+
+            &:hover {
+                @include typography(primary); 
+            }
+        }
+    }
+
+    p, ul, ol {
+        @include typography(md, hlg);
+        @include spacing(my-default);
+    }
+
+    li {
+        @include spacing(mb-sm);
+    }
+
+    blockquote {
+        @include typography(md);
+        @include spacing(my-default, mx-none, pl-default);
+        @include border(2px, left, primary-30);
+    }
 }    

package/scss/setup.scss

@@ -3,76 +3,49 @@
 $config: (
     includeResets: true,
     includeHelperClasses: true,
-    includeElementStyles: true,
     includeTooltip: true,
     includeScrollbarStyles: true
 );
 
 body {
-    --w-avatar-border: var(--w-color-primary-70);
-    --w-checkbox-color: var(--w-color-primary);
-    --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-radio-color: var(--w-color-primary);
-    --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;
-    --w-scrollbar-bg: var(--w-color-primary-60);
-    --w-scrollbar-fg: var(--w-color-primary-50);
-    --w-spinner-color: var(--w-color-primary);
-    --w-spinner-width: 2px;
-    --w-spinner-speed: 2s;
-    --w-spinner-size: 30px;
-    --w-spinner-dash: 8;
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-    --w-theme-switcher-size: 20px;
-    --w-timeline-color: var(--w-color-primary-50);
-    --w-timeline-text-color: var(--w-color-primary);
-    --w-timeline-counter: decimal;
-    --w-tooltip-background: var(--w-color-primary);
-    --w-tooltip-color: var(--w-color-primary-70);
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
 }
 
 @function config($key) {
     @return map.get($config, $key);
 }
 
-@mixin Setup($customConfig: ()) {
+@mixin setup($customConfig: ()) {
     $config: map.merge($config, $customConfig) !global;
 
     @if (config('includeResets')) {
-        @include Resets();
+        @include resets();
     }
 
     @if (config('includeHelperClasses')) {
-        @include Utility();
-    }
-
-    @if (config('includeElementStyles')) {
-        @include Elements();
+        @include utility();
     }
 
     @if (config('includeScrollbarStyles')) {
-        @include Scrollbar();
+        @include scrollbar();
     }
 
     @if (config('includeTooltip')) {
-        @include Tooltip();
+        @include tooltip();
     }
 
     @if (config('theme')) {
-        @include Theme(config('theme'));
+        @include theme(config('theme'));
     }
 
     @if (config('themes')) {
         @each $theme, $selector in config('themes') {
-            @include Theme($theme, $selector);
+            @include theme($theme, $selector);
         }
     } @else if (not config('theme')) {
-        @include Theme('dark');
+        @include theme('dark');
     }
 }

package/utils/toast.ts

@@ -1,4 +1,5 @@
 import type { AlertProps } from '../components/Alert/alert'
+import type { ToastProps } from '../components/Toast/toast'
 
 type Toast = {
     element: string
@@ -6,12 +7,12 @@ type Toast = {
     title?: AlertProps['title']
     content?: string
     theme?: AlertProps['theme']
-    position?: string
+    position?: ToastProps['position']
 }
 
 let defaultTimeout = 5000
 
-export let setDefaultTimeout = (time: number) => defaultTimeout = time
+export const setDefaultTimeout = (time: number) => defaultTimeout = time
 
 export const toast = (config: Toast | string) => {
     const element = typeof config === 'string'