webcoreui 0.0.12 → 0.2.0

package/README.md

@@ -79,11 +79,11 @@ yarn add webcoreui
 
 ### Setup
 
-Setup default styles and fonts by calling the following in your global SCSS file:
+Create an empty `webcore.config.scss` file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
-@include Setup((
+@include setup((
     // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
     fontBold: '/fonts/Inter-Bold.woff2'
@@ -99,41 +99,72 @@ The `Setup` mixin can also accept the following options:
 | Property  | Default value | Purpose |
 |-----------|---------------|---------|
 | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
-| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
-| `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`.
+| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
 
 Default component styles can be changed by overriding the following CSS variables:
 
-```css
-body {
+```scss
+html body {
+    // Avatar component
     --w-avatar-border: var(--w-color-primary-70);
+
+    // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
+
+    // Progress component
     --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);
+
+    // Radio component
     --w-radio-color: var(--w-color-primary);
+
+    // Rating component
     --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;
+
+    // Scrollbars
     --w-scrollbar-bg: var(--w-color-primary-60);
     --w-scrollbar-fg: var(--w-color-primary-50);
+
+    // Slider component
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+
+    // Spinner component
     --w-spinner-color: var(--w-color-primary);
     --w-spinner-width: 2px;
     --w-spinner-speed: 2s;
     --w-spinner-size: 30px;
     --w-spinner-dash: 8;
+
+    // Switch component
     --w-switch-off-color: var(--w-color-primary-50);
     --w-switch-on-color: var(--w-color-primary);
+
+    // ThemeSwitcher component
     --w-theme-switcher-size: 20px;
+
+    // Timeline component
     --w-timeline-color: var(--w-color-primary-50);
     --w-timeline-text-color: var(--w-color-primary);
     --w-timeline-counter: decimal;
+
+    // Tooltips
     --w-tooltip-background: var(--w-color-primary);
     --w-tooltip-color: var(--w-color-primary-70);
+
+    // Override border-radius
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
 }
 ```
 
@@ -170,9 +201,11 @@ import { Accordion } from 'webcoreui/react'
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
+- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)

package/astro.d.ts

@@ -9,9 +9,11 @@ import type { ConditionalWrapperProps } from './components/ConditionalWrapper/co
 import type { IconProps } from './components/Icon/icon'
 import type { InputProps } 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 { RadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
@@ -33,9 +35,11 @@ declare module 'webcoreui/astro' {
 	export function Icon(_props: IconProps): any
 	export function Input(_props: InputProps): any
 	export function Menu(_props: MenuProps): any
+	export function Modal(_props: ModalProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Slider(_props: SliderProps): any
 	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SwitchProps): any
 	export function Table(_props: TableProps): any

package/astro.js

@@ -9,9 +9,11 @@ import ConditionalWrapperComponent from './components/ConditionalWrapper/Conditi
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
 import MenuComponent from './components/Menu/Menu.astro'
+import ModalComponent from './components/Modal/Modal.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import SliderComponent from './components/Slider/Slider.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
 import TableComponent from './components/Table/Table.astro'
@@ -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/components/Accordion/accordion.module.scss

@@ -1,43 +1,36 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .accordion {
-    margin: 0;
-    padding: 0;
+    @include spacing(0);
     list-style-type: none;
 
     li {
-        border-bottom: 1px solid var(--w-color-primary-50);
-        padding: 10px 0;
-        font-size: 16px;
+        @include border(primary-50, bottom);
+        @include spacing(py-sm, px-none, m0);
 
         &:first-child {
             padding-top: 0;
         }
 
         &:last-child {
-            border-bottom: 0;
+            @include border(bottom, 0);
             padding-bottom: 0;
         }
 
         .title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 10px;
-            width: 100%;
+            @include layout(flex, h-between, v-center, sm);
+            @include typography(default, primary, left);
+            @include size('w100%');
+            @include spacing(p0);
+            @include border(0);
+
             background: transparent;
-            border: 0;
-            color: var(--w-color-primary);
-            font-size: 16px;
-            padding: 0;
             cursor: pointer;
-            text-align: left;
 
             svg {
-                @include Transition(transform);
-                color: var(--w-color-primary-20);
-                width: 15px;
-                height: 15px;
+                @include transition(transform);
+                @include size(15px);
+                @include typography(primary-20);
                 pointer-events: none;
             }
 
@@ -50,22 +43,22 @@
                     grid-template-rows: 1fr;
         
                     .content {
-                        padding: 10px 0;
+                        @include spacing(py-sm, px-none);
                     }
                 }
             }
         }
 
         .wrapper {
-            @include Transition(grid-template-rows);
-            display: grid;
+            @include transition(grid-template-rows);
+            @include layout(grid);
             grid-template-rows: 0fr;
         }
 
         .content {
-            @include Transition();
-            overflow: hidden;
-            color: var(--w-color-primary-20);
+            @include transition();
+            @include visibility(hidden);
+            @include typography(primary-20);
         }
     }
 }

package/components/Alert/alert.module.scss

@@ -1,54 +1,51 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .w-alert {
-    border: 1px solid var(--w-color-primary-50);
-    border-radius: 5px;
-    padding: 15px;
-    display: flex;
+    @include border(primary-50);
+    @include border-radius(md);
+    @include spacing(p-md);
+    @include layout(flex);
 
     &.col {
-        flex-direction: column;
+        @include layout(column);
     }
 
     &:not(.col) {
-        gap: 10px;
+        @include layout(sm);
     }
 
     &.info {
-        border: 1px solid var(--w-color-info);
-        color: var(--w-color-info);
+        @include border(info);
+        @include typography(info);
     }
 
     &.success {
-        border: 1px solid var(--w-color-success);
-        color: var(--w-color-success);
+        @include border(success);
+        @include typography(success);
     }
 
     &.warning {
-        border: 1px solid var(--w-color-warning);
-        color: var(--w-color-warning);
+        @include border(warning);
+        @include typography(warning);
     }
 
     &.alert {
-        border: 1px solid var(--w-color-alert);
-        color: var(--w-color-alert);
+        @include border(alert);
+        @include typography(alert);
     }
 
     svg {
-        width: 20px;
-        height: 20px;
+        @include size(20px);
         min-width: 20px;
-        margin-top: 1px;
+        margin-top: 2.5px;
     }
 
     .title {
+        @include typography(lg, hmd);
         display: block;
-        margin-bottom: 5px;
     }
 
     .body {
-        font-size: 16px;
-        color: var(--w-color-primary-20);
-        line-height: 1.5;
+        @include typography(primary-20, hmd);
     }
 }

package/components/Avatar/avatar.module.scss

@@ -1,7 +1,11 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-avatar-border: var(--w-color-primary-70);
+}
 
 .avatar {
-    border-radius: 100%;
+    @include border-radius(max);
 
     &:not(.borderless) {
         border: 3px solid var(--w-avatar-border);
@@ -9,14 +13,13 @@
 }
 
 .group {
-    display: inline-flex;
-    align-items: center;
+    @include layout(inline-flex, v-center);
 
     &.reverse {
-        flex-direction: row-reverse;
+        @include layout(row-reverse);
 
         img {
-            z-index: 1;
+            @include layer(fg);
         }
 
         img:not(:first-child) {

package/components/Badge/badge.module.scss

@@ -1,89 +1,86 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .badge {
-    @include Transition();
-    padding: 5px 10px;
-    border-radius: 5px;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-    background: var(--w-color-primary);
-    color: var(--w-color-primary-50);
-    border: 0;
+    @include transition();
+    @include spacing(py-xs, px-sm);
+    @include border-radius(xs);
+    @include layout(inline-flex, v-center, xs);
+    @include typography(sm, primary-50);
+    @include border(0);
+    @include background(primary);
 
     &.hover {
         cursor: pointer;
 
         &:hover {
-            background: var(--w-color-primary-20);
+            @include background(primary-20);
         }
 
         &.secondary:hover {
-            background: var(--w-color-primary-40);
+            @include background(primary-40);
         }
 
         &.outline:hover {
-            color: var(--w-color-primary);
-            background: transparent;
+            @include typography(primary);
+            @include background(transparent);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
 
         &.flat:hover {
-            background: var(--w-color-primary-40);
+            @include background(primary-40);
         }
 
         &.info:hover {
-            background: var(--w-color-info-accent);
+            @include background(info-accent);
         }
 
         &.success:hover {
-            background: var(--w-color-success-accent);
+            @include background(success-accent);
         }
 
         &.warning:hover {
-            background: var(--w-color-warning-accent);
+            @include background(warning-accent);
         }
 
         &.alert:hover {
-            background: var(--w-color-alert-accent);
+            @include background(alert-accent);
         }
     }
 
     
     &.secondary {
-        background: var(--w-color-primary-50);
-        color: var(--w-color-primary);
+        @include typography(primary);
+        @include background(primary-50);
     }
 
     &.outline {
-        background: var(--w-color-primary-70);
-        color: var(--w-color-primary-20);
+        @include typography(primary-20);
+        @include background(primary-70);
         box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
     }
 
     &.flat {
-        background: var(--w-color-primary-70);
-        color: var(--w-color-primary);
+        @include typography(primary);
+        @include background(primary-70);
     }
 
     &.info {
-        background: var(--w-color-info);
-        color: var(--w-color-info-fg);
+        @include typography(info-fg);
+        @include background(info);
     }
 
     &.success {
-        background: var(--w-color-success);
-        color: var(--w-color-success-fg);
+        @include typography(success-fg);
+        @include background(success);
     }
 
     &.warning {
-        background: var(--w-color-warning);
-        color: var(--w-color-warning-fg);
+        @include typography(warning-fg);
+        @include background(warning);
     }
 
     &.alert {
-        background: var(--w-color-alert);
-        color: var(--w-color-alert-fg);
+        @include typography(alert-fg);
+        @include background(alert);
     }
 }

package/components/Button/Button.astro

@@ -8,7 +8,6 @@ interface Props extends ButtonProps {}
 
 const {
     theme,
-    bold,
     href,
     className,
     ...rest
@@ -16,7 +15,6 @@ const {
 
 const classes = classNames([
     styles.button,
-    bold && styles.bold,
     theme && styles[theme],
     className
 ])

package/components/Button/Button.svelte

@@ -5,14 +5,12 @@
     import { classNames } from '../../utils/classNames'
 
     export let theme: SvelteButtonProps['theme'] = null
-    export let bold: SvelteButtonProps['bold'] = false
     export let href: SvelteButtonProps['href'] = ''
     export let className: SvelteButtonProps['className'] = ''
     export let onClick: SvelteButtonProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.button,
-        bold && styles.bold,
         theme && styles[theme],
         className
     ])

package/components/Button/Button.tsx

@@ -6,7 +6,6 @@ import { classNames } from '../../utils/classNames'
 
 const Button = ({
     theme,
-    bold,
     href,
     className,
     onClick,
@@ -15,7 +14,6 @@ const Button = ({
 }: ReactButtonProps) => {
     const classes = classNames([
         styles.button,
-        bold && styles.bold,
         theme && styles[theme],
         className
     ])

package/components/Button/button.module.scss

@@ -1,94 +1,87 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .button {
-    @include Transition();
-    padding: 10px 15px;
-    border-radius: 5px;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 16px;
+    @include layout(inline-flex, center, xs);
+    @include typography(default, primary-50, none);
+    @include spacing(py-sm, px-md);
+    @include border-radius(xs);
+    @include border(0);
+    @include transition();
+    @include background(primary);
+
     cursor: pointer;
-    border: 0;
-    background: var(--w-color-primary);
-    color: var(--w-color-primary-50);
 
     &[disabled] {
         cursor: no-drop;
-        background: var(--w-color-primary-20);
+        @include background(primary-20);
     }
 
     &:hover {
-        background: var(--w-color-primary-20);
+        @include background(primary-20);
     }
     
     &.secondary {
-        background: var(--w-color-primary-50);
-        color: var(--w-color-primary);
+        @include typography(primary);
+        @include background(primary-50);
 
         &:hover {
-            background: var(--w-color-primary-40);
+            @include background(primary-40);
         }
     }
 
     &.outline {
-        background: transparent;
-        color: var(--w-color-primary-20);
+        @include typography(primary-20);
+        @include background(transparent);
         box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
         
         &:hover {
-            color: var(--w-color-primary);
+            @include typography(primary);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
     }
 
     &.flat {
-        background: transparent;
-        color: var(--w-color-primary);
+        @include typography(primary);
+        @include background(transparent);
 
         &:hover {
-            background: var(--w-color-primary-40);
+            @include background(primary-40);
         }
     }
 
     &.info {
-        background: var(--w-color-info);
-        color: var(--w-color-info-fg);
+        @include typography(info-fg);
+        @include background(info);
 
         &:hover {
-            background: var(--w-color-info-accent);
+            @include background(info-accent);
         }
     }
 
     &.success {
-        background: var(--w-color-success);
-        color: var(--w-color-success-fg);
+        @include typography(success-fg);
+        @include background(success);
 
         &:hover {
-            background: var(--w-color-success-accent);
+            @include background(success-accent);
         }
     }
 
     &.warning {
-        background: var(--w-color-warning);
-        color: var(--w-color-warning-fg);
+        @include typography(warning-fg);
+        @include background(warning);
 
         &:hover {
-            background: var(--w-color-warning-accent);
+            @include background(warning-accent);
         }
     }
 
     &.alert {
-        background: var(--w-color-alert);
-        color: var(--w-color-alert-fg);
+        @include typography(alert-fg);
+        @include background(alert);
 
         &:hover {
-            background: var(--w-color-alert-accent);
+            @include background(alert-accent);
         }
     }
-
-    &.bold {
-        font-family: Bold;
-    }
 }

package/components/Button/button.ts

@@ -7,7 +7,6 @@ export type ButtonProps = {
         | 'warning'
         | 'alert'
         | null
-    bold?: boolean
     href?: string
     className?: string
     [key: string]: any
@@ -19,5 +18,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: () => any
-    children: React.ReactNode
+    children?: React.ReactNode
 } & ButtonProps