webcoreui 0.0.12 → 0.2.0

package/components/Card/card.module.scss

@@ -1,33 +1,37 @@
+@use '../../scss/config.scss' as *;
+
 .card {
-    border: 1px solid var(--w-color-primary-50);
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
+    @include border(primary-50);
+    @include border-radius(md);
+    @include layout(flex, column);
 
     &.secondary {
-        background: var(--w-color-primary-60);
+        @include background(primary-60);
 
         .title {
-            background: var(--w-color-primary-70);
+            @include background(primary-70);
         }
     }
 
     .title {
-        padding: 20px;
+        @include spacing(p-default);
+        @include border(primary-50, bottom);
         display: block;
-        border-bottom: 1px solid var(--w-color-primary-50);
-        font-size: 16px;
     }
 
     .body {
-        padding: 20px;
-        height: 100%;
-        position: relative;
+        @include spacing(p-default);
+        @include size('h100%');
+        @include position(relative);
 
         &.compact {
-            border: 20px solid var(--w-color-primary-60);
-            background: var(--w-color-primary-70);
-            padding: 40px;
+            @include border(20px, primary-60);
+            @include spacing(p-3xl);
+            @include background(primary-70);
         }
     }
 }
+
+a.card {
+    @include typography(none);
+}

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(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-30);
+            @include border(primary-30);
             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(md, 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/Icon/map.ts

@@ -2,6 +2,7 @@ import Alert from '../../icons/alert.svg?raw'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
 import Check from '../../icons/check.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
+import Close from '../../icons/close.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
@@ -13,6 +14,7 @@ const iconMap = {
     'arrow-down': ArrowDown,
     'check': Check,
     'circle-check': CircleCheck,
+    'close': Close,
     'github': Github,
     'info': Info,
     'moon': Moon,

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(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(md, primary-30);
+        @include spacing(mt-xs);
     }
 }

package/components/Menu/Menu.astro

@@ -45,7 +45,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
             )}
 
             {!centerLogo && logo?.html && (
-                <a href="/">
+                <a href="/" aria-label={logo.alt || 'Logo'}>
                     <Fragment set:html={logo.html} />
                 </a>
             )}
@@ -54,7 +54,11 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                 <ul>
                     {items.map(item => (
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class:list={[item.active && styles.active]}
+                            >
                                 {item.name}
                             </a>
                         </li>
@@ -73,7 +77,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
         )}
 
         {centerLogo && logo?.html && (
-            <a href="/">
+            <a href="/" aria-label={logo.alt || 'Logo'}>
                 <Fragment set:html={logo.html} />
             </a>
         )}

package/components/Menu/Menu.svelte

@@ -43,14 +43,20 @@
             {/if}
 
             {#if !centerLogo && logo?.html}
-                <a href="/">{@html logo.html}</a>
+                <a href="/" aria-label={logo.alt || 'Logo'}>
+                    {@html logo.html}
+                </a>
             {/if}
         
             {#if items?.length}
                 <ul>
                     {#each items as item}
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class={item.active ? styles.active : null}
+                            >
                                 {item.name}
                             </a>
                         </li>
@@ -69,7 +75,9 @@
         {/if}
             
         {#if centerLogo && logo?.html}
-            <a href="/">{@html logo.html}</a>
+            <a href="/" aria-label={logo.alt || 'Logo'}>
+                {@html logo.html}
+            </a>
         {/if}
 
         {#if logo?.url && centerLogo}

package/components/Menu/Menu.tsx

@@ -55,6 +55,7 @@ const Menu = ({
                         <a
                             href="/"
                             dangerouslySetInnerHTML={{ __html: logo.html }}
+                            aria-label={logo.alt || 'Logo'}
                         />
                     )}
 
@@ -62,7 +63,11 @@ const Menu = ({
                         <ul>
                             {items.map((item, index) => (
                                 <li key={index}>
-                                    <a href={item.url} target={item.target}>
+                                    <a
+                                        href={item.url}
+                                        target={item.target}
+                                        className={item.active ? styles.active : undefined}
+                                    >
                                         {item.name}
                                     </a>
                                 </li>
@@ -84,6 +89,7 @@ const Menu = ({
                     <a
                         href="/"
                         dangerouslySetInnerHTML={{ __html: logo.html }}
+                        aria-label={logo.alt || 'Logo'}
                     />
                 )}