webcoreui 0.1.0 → 0.2.0

package/scss/global/theme.scss

@@ -7,7 +7,7 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #DDD;
             --w-color-primary-20: #BBB;
-            --w-color-primary-30: #555;
+            --w-color-primary-30: #757575;
             --w-color-primary-40: #333;
             --w-color-primary-50: #252525;
             --w-color-primary-60: #111;
@@ -22,9 +22,10 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -49,9 +50,10 @@
             --w-color-warning: #FF9F43;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -61,78 +63,109 @@
             --w-color-primary: #FFF;
             --w-color-primary-10: #EEE;
             --w-color-primary-20: #a5b7cf;
-            --w-color-primary-30: #516580;
+            --w-color-primary-30: #667f9e;
             --w-color-primary-40: #2d4463;
             --w-color-primary-50: #20344e;
             --w-color-primary-60: #101a2d;
             --w-color-primary-70: #061321;
 
-            --w-color-info: #1058b6;
-            --w-color-info-accent: #176ee0;
-            --w-color-info-fg: #FFF;
-            --w-color-success: #10ac95;
+            --w-color-info: #57a0ff;
+            --w-color-info-accent: #71afff;
+            --w-color-info-fg: #000;
+            --w-color-success: #10b59c;
             --w-color-success-accent: #1DD1A1;
             --w-color-success-fg: #000;
             --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #f7AA61;
+            --w-color-warning-accent: #feb570;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #ed3b3c;
+            --w-color-alert-accent: #fb6161;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0017239e;
         }
     }
 
-    @if $theme == green {
+    @if $theme == 'vintage' {
         #{$selector} {
             --w-color-scheme: dark;
-            --w-color-primary: #FFF;
-            --w-color-primary-10: #EEE;
-            --w-color-primary-20: #b7ffe4;
-            --w-color-primary-30: #dad7cd;
-            --w-color-primary-40: #10AC84;
-            --w-color-primary-50: #4d6e4c;
-            --w-color-primary-60: #315037;
-            --w-color-primary-70: #22392d;
+            --w-color-primary: #000;
+            --w-color-primary-10: #111;
+            --w-color-primary-20: #6b4430;
+            --w-color-primary-30: #d6ccc2;
+            --w-color-primary-40: #cbb39a;
+            --w-color-primary-50: #e8d0b7;
+            --w-color-primary-60: #f5e6d5;
+            --w-color-primary-70: #f5ebe0;
 
-            --w-color-info: #0ABDE3;
+            --w-color-info: #6d95d1;
             --w-color-info-accent: #48DBFB;
             --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
+            --w-color-success: #85c8ba;
             --w-color-success-accent: #1DD1A1;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
+            --w-color-warning: #e79d6b;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #bf6170;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
-    @if $theme == beige {
+    @if $theme == 'amber' {
         #{$selector} {
             --w-color-scheme: dark;
-            --w-color-primary: #000;
-            --w-color-primary-10: #111;
-            --w-color-primary-20: #97725c;
-            --w-color-primary-30: #d6ccc2;
-            --w-color-primary-40: #e3d5ca;
-            --w-color-primary-50: #ecddcd;
-            --w-color-primary-60: #f1e6da;
-            --w-color-primary-70: #f5ebe0;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #DDD;
+            --w-color-primary-20: #FFF3DB;
+            --w-color-primary-30: #757575;
+            --w-color-primary-40: #232323;
+            --w-color-primary-50: #312e31;
+            --w-color-primary-60: #1b1b1b;
+            --w-color-primary-70: #111;
 
-            --w-color-info: #0ABDE3;
+            --w-color-info: #78dcdc;
             --w-color-info-accent: #48DBFB;
             --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
-            --w-color-success-accent: #1DD1A1;
+            --w-color-success: #a9dc62;
+            --w-color-success-accent: #97da3b;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
+            --w-color-warning: #FCBA28;
             --w-color-warning-accent: #f7AA61;
             --w-color-warning-fg: #000;
-            --w-color-alert: #E73F40;
+            --w-color-alert: #ff6188;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #000;
+            --w-color-overlay: #0000009e;
+        }
+    }
+
+    @if $theme == 'synthwave' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #EEE;
+            --w-color-primary-20: #fad5c0;
+            --w-color-primary-30: #eabfff;
+            --w-color-primary-40: #8212ba;
+            --w-color-primary-50: #9D2BD6;
+            --w-color-primary-60: #0f1b33;
+            --w-color-primary-70: #030d1e;
+
+            --w-color-info: #1c98ff;
+            --w-color-info-accent: #6be4ff;
+            --w-color-info-fg: #000;
+            --w-color-success: #83e300;
+            --w-color-success-accent: #b7ff51;
+            --w-color-success-fg: #000;
+            --w-color-warning: #FF9F43;
+            --w-color-warning-accent: #ffb672;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #ff3333;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #13002cc2;
         }
     }
 }

package/scss/global/tooltip.scss

@@ -8,6 +8,8 @@
 
     [data-tooltip] {
         @include position(relative);
+        @include typography(normal);
+
         display: inline-block;
 
         &::before,
@@ -24,7 +26,7 @@
         &::before {
             @include border-radius(md);
             @include position(absolute);
-            @include typography(sm, hlg);
+            @include typography(md, hlg);
             @include background(var(--w-tooltip-background));
             @include size(wmax-content);
             @include spacing(px-xs);
@@ -94,7 +96,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-left: 5px solid var(--w-tooltip-background);
                 transform: translate(10px, -50%);
             }
@@ -123,7 +125,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-right: 5px solid var(--w-tooltip-background);
                 transform: translate(-10px, -50%);
             }

package/scss/global/utility.scss

@@ -1,88 +1,106 @@
+@use 'sass:string';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
 @use '../config' as *;
 
+$breakpointMap: (
+    'xs': 3,
+    'sm': 4,
+    'md': 6,
+    'lg': 8
+);
+
+$alignments: (
+    'items-center': center,
+    'items-start': flex-start,
+    'items-end': flex-end,
+    'items-baseline': baseline,
+    'items-stretch': stretch,
+
+    'justify-center': center,
+    'justify-start': flex-start,
+    'justify-end': flex-end,
+    'justify-between': space-between,
+    'justify-around': space-around,
+    'justify-evenly': space-evenly,
+    'justify-stretch': stretch  
+);
+
 @mixin utility() {
     .container {
-        margin: 0 auto;
+        @include spacing(auto-none, px-default);
         max-width: 1200px;
-        padding: 0 20px;
     }
 
-    .grid {
-        display: grid;
-        gap: 20px;
-
-        &.col-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
+    // Gaps
+    .flex, .grid {
+        @each $key, $value in $spacing {
+            $numberList: ('2', '3', '4', '5');
+            $firstLetter: string.slice($key, 1, 1);
+            $class: $key;
+            
+            @if (list.index($numberList, $firstLetter)) {
+              $class: string.slice($key, 2, -1) + $firstLetter;
+            }
+
+            &.#{$class} { gap: $value; }        
         }
     }
 
-    .flex {
-        display: flex;
-        gap: 20px;
-
-        &.column {
-            flex-direction: column;
-        }
-
-        &.xs {
-            gap: 5px;
-        }
-
-        &.sm {
-            gap: 10px;
-        }
-
-        &.wrap {
-            flex-wrap: wrap;
-        }
-
-        &.center {
-            justify-content: center;
-            align-items: center;
-        }
-
-        &.justify-center {
-            justify-content: center;
-        }
-
-        &.items-center {
-            align-items: center;
-        }
-
-        &.items-start {
-            align-items: flex-start;
+    // Alignments
+    @each $key, $value in $alignments {
+        .#{$key} {
+            @if (string.index($key, 'items')) {
+                align-items: $value;
+            } @else {
+                justify-content: $value;
+            } 
         }
     }
 
-    .my {
-        margin: 20px auto;
+    .flex.center,
+    .grid.center {
+        justify-content: center;
+        align-items: center;
     }
 
-    @include media('md') {
-        .grid.md-2 {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
+    .flex {
+        @include layout(flex, default);
 
-        .grid.md-3 {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
+        @each $direction in $flexDirectionValues {
+            &.#{$direction} {
+                flex-direction: $direction;
+            }
         }
 
-        .grid.md-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+        @each $wrap in $flexWrapValues {
+            &.#{$wrap} {
+                flex-wrap: $wrap;
+            }
         }
     }
 
-    @include media('lg') {
-        .grid.lg-2 {
+    .grid {
+        @include layout(grid, default);
+
+        &.col-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
-        .grid.lg-3 {
+        &.col-3 {
             grid-template-columns: repeat(3, minmax(0, 1fr));
         }
+    }
 
-        .grid.lg-4 {
-            grid-template-columns: repeat(4, minmax(0, 1fr));
+    // Grid columns
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            @for $i from 2 to map.get($breakpointMap, $key) + 1 {
+                .grid.#{$key}-#{$i} {
+                    grid-template-columns: repeat($i, minmax(0, 1fr));
+                }
+            }
         }
     }
 }

package/scss/resets.scss

@@ -53,11 +53,11 @@
     pre {
         @include border(primary-50);
         @include border-radius(md);
-        @include typography(sm);
+        @include typography(md);
     }
 
     code {
-        @include spacing(py-xxs, px-sm, my-xxs);
+        @include spacing(px-sm);
         display: inline-block;
     }
 
@@ -73,7 +73,7 @@
     }
 
     figcaption {
-        @include typography(sm, primary-20);  
+        @include typography(md, primary-20);  
         
         a {
             @include typography(primary-20);
@@ -85,7 +85,7 @@
     }
 
     p, ul, ol {
-        @include typography(md, hlg);
+        @include typography(hlg);
         @include spacing(my-default);
     }
 
@@ -94,8 +94,13 @@
     }
 
     blockquote {
-        @include typography(md);
         @include spacing(my-default, mx-none, pl-default);
         @include border(2px, left, primary-30);
     }
+
+    hr {
+        @include size('w100%', h1px);
+        @include border(0);
+        @include background(primary-50);
+    }
 }    

package/scss/setup.scss

@@ -2,7 +2,7 @@
 
 $config: (
     includeResets: true,
-    includeHelperClasses: true,
+    includeUtilities: true,
     includeTooltip: true,
     includeScrollbarStyles: true
 );
@@ -25,7 +25,7 @@ body {
         @include resets();
     }
 
-    @if (config('includeHelperClasses')) {
+    @if (config('includeUtilities')) {
         @include utility();
     }
 

package/svelte.d.ts

@@ -9,9 +9,11 @@ import type { ConditionalWrapperProps } from './components/ConditionalWrapper/co
 import type { IconProps } from './components/Icon/icon'
 import type { SvelteInputProps } from './components/Input/input'
 import type { MenuProps } from './components/Menu/menu'
+import type { ModalProps } from './components/Modal/modal'
 import type { ProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
@@ -33,9 +35,11 @@ declare module 'webcoreui/svelte' {
 	export function Icon(_props: IconProps): any
 	export function Input(_props: SvelteInputProps): any
 	export function Menu(_props: MenuProps): any
+	export function Modal(_props: ModalProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: SvelteRadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Slider(_props: SvelteSliderProps): any
 	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SvelteSwitchProps): any
 	export function Table(_props: TableProps): any

package/svelte.js

@@ -9,9 +9,11 @@ import ConditionalWrapperComponent from './components/ConditionalWrapper/Conditi
 import IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
+import ModalComponent from './components/Modal/Modal.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.svelte'
+import SliderComponent from './components/Slider/Slider.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SwitchComponent from './components/Switch/Switch.svelte'
 import TableComponent from './components/Table/Table.svelte'
@@ -32,9 +34,11 @@ export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent

package/utils/interpolate.ts

@@ -0,0 +1,23 @@
+export const clamp = (
+    num: number,
+    min: number,
+    max: number
+) => Math.min(Math.max(num, min), max)
+    
+export const lerp = (
+    x: number,
+    y: number,
+    z: number
+) => x * (1 - z) + y * z
+        
+export const invlerp = (
+    x: number,
+    y: number,
+    z: number
+) => clamp((z - x) / (y - x), 0, 1)
+    
+export const interpolate = (
+    value: number,
+    input: [x: number, y: number],
+    output: [x: number, y: number],
+) => lerp(output[0], output[1], invlerp(input[0], input[1], value))

package/utils/modal.ts

@@ -0,0 +1,59 @@
+export const modal = (element: string) => {
+    const htmlElement = document.querySelector(element) as HTMLElement
+
+    if (htmlElement) {
+        const handleClose = {
+            icon: () => {
+                const close = htmlElement.querySelector('[data-id="close"]')
+
+                const listener = () => {
+                    htmlElement.dataset.show = ''
+
+                    close?.removeEventListener('click', listener)
+                }
+
+                close?.addEventListener('click', listener)
+            },
+    
+            esc: () => {
+                const listener = (event: KeyboardEvent) => {
+                    if (event.key === 'Escape') {
+                        htmlElement.dataset.show = ''
+
+                        document.removeEventListener('keydown', listener)
+                    }
+                }
+
+                document.addEventListener('keydown', listener)
+            },
+    
+            overlay: () => {
+                const close = htmlElement.nextElementSibling
+
+                const listener = () => {
+                    htmlElement.dataset.show = ''
+
+                    close?.removeEventListener('click', listener)
+                }
+
+                close?.addEventListener('click', listener)
+            }
+        }
+
+        const closeOptions = htmlElement.dataset.close?.split(',')
+
+        htmlElement.dataset.show = 'true'
+
+        closeOptions?.forEach(option => {
+            handleClose[option as keyof typeof handleClose]()
+        })
+    }
+}
+
+export const closeModal = (element: string) => {
+    const htmlElement = document.querySelector(element) as HTMLElement
+
+    if (htmlElement) {
+        htmlElement.dataset.show = ''
+    }
+}