webcoreui 0.0.12 → 0.1.0

package/components/Timeline/timeline.module.scss

@@ -1,25 +1,30 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 // (circle width + border * 2) / 2 - line width
 $leftOffset: calc(((25px + 4px) / 2) - 1px);
 $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
 
+body {
+    --w-timeline-color: var(--w-color-primary-50);
+    --w-timeline-text-color: var(--w-color-primary);
+    --w-timeline-counter: decimal;
+}
+
 .timeline {
-    display: flex;
-    gap: 20px;
-    flex-direction: column;
-    padding: 0 0 0 40px;
-    margin: 0;
+    @include layout(flex, default, column);
+    @include spacing(pl-3xl, m0);
+    @include position(relative);
+    @include typography(normal);
+
     list-style-type: none;
     counter-reset: item;
-    position: relative;
 
     &::before {
-        position: absolute;
+        @include position(absolute);
+        @include size(w2px, 'h100%');
+        @include background(var(--w-timeline-color));
+
         content: '';
-        width: 2px;
-        background: var(--w-timeline-color);
-        height: 100%;
         left: $leftOffset
     }
 
@@ -28,33 +33,33 @@ $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
     }
 
     &.stroke li::before {
-        background: var(--w-color-primary-70);
+        @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
 }
 
-@include Media('xs') {
+@include media('xs') {
     .timeline {
         &.alternate {
-            padding: 0;
+            @include spacing(p0);
     
             &::before {
                 left: calc(50% - 1px);
             }
     
             li {
-                width: 50%;
+                @include size('w50%');
     
                 &:nth-child(odd) {
-                    padding-right: 40px;
+                    @include spacing(pr-3xl);
                 }
     
                 &:nth-child(even) {
+                    @include spacing(pl-3xl);
                     align-self: flex-end;
-                    padding-left: 40px;
     
                     &::before {
-                        left: 25px;
+                        @include position(l25px);
                     }
                 }
     
@@ -65,7 +70,7 @@ $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
         }
     
         &.centered li:nth-child(odd) {
-            text-align: right;
+            @include typography(right);
         }
     }
 }

package/components/TimelineItem/timelineitem.module.scss

@@ -1,31 +1,29 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .item {
-    position: relative;
-    font-size: 16px;
+    @include position(relative);
+    @include typography(md);
+    @include spacing(m0);
 
     &::before {
+        @include position(absolute, t-5px);
+        @include size(25px);
+        @include border-radius(max);
+        @include background(var(--w-timeline-color));
+        @include typography(sm);
+        @include layout(inline-flex, center);
+        @include border(2px, primary-70);
+
         content: counter(item, var(--w-timeline-counter));
         counter-increment: item;
-        position: absolute;
-        top: -5px;
-        width: 25px;
-        height: 25px;
-        border-radius: 100%;
-        background: var(--w-timeline-color);
         color: var(--w-timeline-text-color);
-        font-size: 14px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border: 2px solid var(--w-color-primary-70);
         margin-left: -40px;
     }
 
     .title {
+        @include typography(bold, default);
+        @include spacing(mb-sm);
+
         display: block;
-        margin-bottom: 10px;
-        font-family: Bold;
-        font-size: 18px;
     }
 }

package/components/Toast/toast.module.scss

@@ -1,15 +1,14 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .toast {
-    background: var(--w-color-primary-70);
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
+    @include background(primary-70);
+    @include position(fixed, r20px, b20px);
+    @include layer(header);
+
     transform: translateY(calc(100% + 25px));
-    z-index: 99;
 
     &[data-show] {
-        @include Transition(transform);
+        @include transition(transform);
     }
 
     &[data-show="true"] {
@@ -18,15 +17,15 @@
 
     &[data-position="bottom-left"],
     &[data-position="top-left"] {
+        @include position(l20px);
         right: auto;
-        left: 20px;
     }
 
     &[data-position="top-left"],
     &[data-position="top-right"],
     &[data-position="top-full"] {
+        @include position(t20px);
         bottom: auto;
-        top: 20px;
         transform: translateY(calc(-100% - 25px));
 
         &[data-show="true"] {
@@ -34,11 +33,8 @@
         }
     }
 
-    &[data-position="bottom-full"] {
-        left: 20px;
-    }
-
+    &[data-position="bottom-full"],
     &[data-position="top-full"] {
-        left: 20px;
+        @include position(l20px);
     }
 }

package/components/Toast/toast.ts

@@ -1,7 +1,12 @@
 import type { AlertProps, ReactAlertProps } from '../Alert/alert'
 
 export type ToastProps = {
-    position?: 'bottom-left' | 'top-left' | 'top-right' | null
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+        | null
     [key: string]: any
 } & AlertProps
 

package/icons.d.ts

@@ -0,0 +1,11 @@
+declare module 'webcoreui/icons' {
+    export const alert: string
+	export const arrowDown: string
+	export const check: string
+	export const circleCheck: string
+	export const github: string
+	export const info: string
+	export const moon: string
+	export const sun: string
+	export const warning: string
+}

package/icons.js

@@ -0,0 +1,9 @@
+export { default as alert } from './icons/alert.svg?raw'
+export { default as arrowDown } from './icons/arrow-down.svg?raw'
+export { default as check } from './icons/check.svg?raw'
+export { default as circleCheck } from './icons/circle-check.svg?raw'
+export { default as github } from './icons/github.svg?raw'
+export { default as info } from './icons/info.svg?raw'
+export { default as moon } from './icons/moon.svg?raw'
+export { default as sun } from './icons/sun.svg?raw'
+export { default as warning } from './icons/warning.svg?raw'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.12",
+    "version": "0.1.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -36,6 +36,8 @@
         "utils",
         "astro.d.ts",
         "astro.js",
+        "icons.d.ts",
+        "icons.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",

package/scss/config/color-palette.scss

@@ -0,0 +1,23 @@
+$colorPalette: (
+    'primary': var(--w-color-primary),
+    'primary-10': var(--w-color-primary-10),
+    'primary-20': var(--w-color-primary-20),
+    'primary-30': var(--w-color-primary-30),
+    'primary-40': var(--w-color-primary-40),
+    'primary-50': var(--w-color-primary-50),
+    'primary-60': var(--w-color-primary-60),
+    'primary-70': var(--w-color-primary-70),
+
+    'info': var(--w-color-info),
+    'info-accent': var(--w-color-info-accent),
+    'info-fg': var(--w-color-info-fg),
+    'success': var(--w-color-success),
+    'success-accent': var(--w-color-success-accent),
+    'success-fg': var(--w-color-success-fg),
+    'warning': var(--w-color-warning),
+    'warning-accent': var(--w-color-warning-accent),
+    'warning-fg': var(--w-color-warning-fg),
+    'alert': var(--w-color-alert),
+    'alert-accent': var(--w-color-alert-accent),
+    'alert-fg': var(--w-color-alert-fg),
+) !default;

package/scss/config/css-values.scss

@@ -0,0 +1,44 @@
+$overflowValues: auto,
+    hidden,
+    overlay,
+    scroll,
+    visible !default;
+
+$displayValues: inline,
+    block,
+    contents,
+    flex,
+    flow,
+    flow-root,
+    grid,
+    inline-block,
+    inline-flex,
+    inline-grid,
+    inline-table,
+    list-item,
+    run-in,
+    table,
+    table-caption,
+    table-column-group,
+    table-header-group,
+    table-footer-group,
+    table-row-group,
+    table-cell,
+    table-column,
+    table-row,
+    none !default;
+
+$positionValues: absolute,
+    fixed,
+    relative,
+    static,
+    sticky !default;
+
+$flexDirectionValues: row
+    column
+    row-reverse
+    column-reverse !default;
+
+$flexWrapValues: wrap
+    nowrap
+    wrap-reverse !default;

package/scss/config/layout.scss

@@ -0,0 +1,41 @@
+$breakpoints: (
+    'xs': 600px,
+    'sm': 800px,
+    'md': 1024px,
+    'lg': 1200px
+) !default;
+
+$layers: (
+    'bg': -1,
+    'default': 0,
+    'fg': 1,
+    'overlay': 2,
+    'popup': 3,
+    'top':  98,
+    'header': 99,
+    'modal': 100
+) !default;
+
+$radius: (
+    'none': 0,
+    'sm': var(--w-sm-radius),
+    'md': var(--w-md-radius),
+    'lg': var(--w-lg-radius),
+    'xl': var(--w-xl-radius),
+    'max': 100%
+) !default;
+
+$spacing: (
+    'none':    0,
+    'xxs':     2px,
+    'xs':      5px,
+    'sm':      10px,
+    'md':      15px,
+    'default': 20px,
+    'lg':      25px,
+    'xl':      30px,
+    '2xl':     35px,
+    '3xl':     40px,
+    '4xl':     45px,
+    '5xl':     50px
+) !default;