From 5bfc16fec3c6a96ce51dff8d46b4c2ea798b75c0 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 30 Jul 2024 22:56:46 +0200
Subject: [PATCH 01/18] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20package=20ver?=
 =?UTF-8?q?sion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6af96dc..0e33220 100644
--- a/package.json
+++ b/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",

From 64d9d3daf53a5bb7d5ae414e190584e9b859bcab Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Wed, 31 Jul 2024 09:21:45 +0200
Subject: [PATCH 02/18] =?UTF-8?q?=F0=9F=90=9B=20Fix=20React=20types=20for?=
 =?UTF-8?q?=20TimelineItem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/buildTypes.js                        | 1 -
 src/components/TimelineItem/TimelineItem.tsx | 7 +------
 src/components/TimelineItem/timelineitem.ts  | 5 +++++
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index ec59c18..7378210 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -57,7 +57,6 @@ const buildTypes = type => {
                 'Rating',
                 'Spinner',
                 'Table',
-                'TimelineItem',
                 'Progress'
             ]
     
diff --git a/src/components/TimelineItem/TimelineItem.tsx b/src/components/TimelineItem/TimelineItem.tsx
index ca2b666..de18dbf 100644
--- a/src/components/TimelineItem/TimelineItem.tsx
+++ b/src/components/TimelineItem/TimelineItem.tsx
@@ -1,14 +1,9 @@
 import React from 'react'
-import type { TimelineItemProps } from './timelineitem'
+import type { ReactTimelineItemProps } from './timelineitem'
 
 import styles from './timelineitem.module.scss'
 import { classNames } from '../../utils/classNames'
 
-type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>
-
 const TimelineItem = ({
     title,
     TitleTag = 'span',
diff --git a/src/components/TimelineItem/timelineitem.ts b/src/components/TimelineItem/timelineitem.ts
index 306d2a8..ba4df0c 100644
--- a/src/components/TimelineItem/timelineitem.ts
+++ b/src/components/TimelineItem/timelineitem.ts
@@ -3,3 +3,8 @@ export type TimelineItemProps = {
     titleTag?: string
     className?: string
 }
+
+export type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>

From 77c088fc6a603179532ee76c022ec6ae727cd2a3 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 1 Aug 2024 16:03:12 +0200
Subject: [PATCH 03/18] =?UTF-8?q?=F0=9F=92=84=20Adjust=20alert=20alignment?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Alert/alert.module.scss | 4 ++--
 src/pages/alert.astro                  | 6 +++++-
 src/scss/resets.scss                   | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Alert/alert.module.scss b/src/components/Alert/alert.module.scss
index dd1197c..b0a0ff4 100644
--- a/src/components/Alert/alert.module.scss
+++ b/src/components/Alert/alert.module.scss
@@ -37,11 +37,11 @@
     svg {
         @include size(20px);
         min-width: 20px;
-        margin-top: 1px;
+        margin-top: 2.5px;
     }
 
     .title {
-        @include spacing(mb-xs);
+        @include typography(hmd);
         display: block;
     }
 
diff --git a/src/pages/alert.astro b/src/pages/alert.astro
index d2540cd..994cb0f 100644
--- a/src/pages/alert.astro
+++ b/src/pages/alert.astro
@@ -72,7 +72,7 @@ const sections = getSections({
             </section.component>
 
             <section.component theme="info">
-                Predefined info theme alert without title.
+                Predefined <code>info</code> theme alert without title.
             </section.component>
 
             <section.component theme="success">
@@ -82,6 +82,10 @@ const sections = getSections({
             <section.component theme="warning">
                 Predefined warning theme alert without title and multiple lines, to demonstrate the behavior of layout with large amounts of text.
             </section.component>
+
+            <section.component theme="info" title="Information about changes to our terms.">
+                Predefined <code>info</code> theme alert with long title and multiple lines, to demonstrate the behavior of layout with large amounts of text.
+            </section.component>
         </div>
     ))}
 </Layout>
diff --git a/src/scss/resets.scss b/src/scss/resets.scss
index 4b1a0ae..4a4bf9b 100644
--- a/src/scss/resets.scss
+++ b/src/scss/resets.scss
@@ -57,7 +57,7 @@
     }
 
     code {
-        @include spacing(py-xxs, px-sm, my-xxs);
+        @include spacing(px-sm);
         display: inline-block;
     }
 

From 9143a5c90f1c2521de02ed1e00a34b08a6e1594d Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 1 Aug 2024 17:06:52 +0200
Subject: [PATCH 04/18] =?UTF-8?q?=E2=9C=A8=20Add=20utility=20classes=20for?=
 =?UTF-8?q?=20flexbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                    |   2 +-
 src/pages/resets.astro       |   2 +-
 src/pages/utilities.astro    | 122 +++++++++++++++++++++++++++++++
 src/scss/global/utility.scss | 134 ++++++++++++++++++++---------------
 src/scss/setup.scss          |   4 +-
 src/static/Box.astro         |  14 ++++
 6 files changed, 216 insertions(+), 62 deletions(-)
 create mode 100644 src/pages/utilities.astro
 create mode 100644 src/static/Box.astro

diff --git a/README.md b/README.md
index 9b8e85e..9cc6998 100644
--- a/README.md
+++ b/README.md
@@ -99,7 +99,7 @@ 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). |
+| `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.
 
diff --git a/src/pages/resets.astro b/src/pages/resets.astro
index aac7364..add828d 100644
--- a/src/pages/resets.astro
+++ b/src/pages/resets.astro
@@ -4,7 +4,7 @@ import Card from '@components/Card/Card.astro'
 ---
 
 <Layout>
-    <h1>Reset styles</h1>
+    <h1>CSS Resets</h1>
 
     <Card>
         <blockquote>
diff --git a/src/pages/utilities.astro b/src/pages/utilities.astro
new file mode 100644
index 0000000..185d4f3
--- /dev/null
+++ b/src/pages/utilities.astro
@@ -0,0 +1,122 @@
+---
+import Layout from '@static/Layout.astro'
+import Box from '@static/Box.astro'
+
+import Card from '@components/Card/Card.astro'
+
+const spacings = [
+    'xxs',
+    'xs',
+    'sm',
+    'md',
+    'default',
+    'lg',
+    'xl',
+    'xl2',
+    'xl3',
+    'xl4',
+    'xl5'
+]
+
+const flexDirections = [
+    'row',
+    'column',
+    'row-reverse',
+    'column-reverse',
+]
+
+const verticalAlignments = [
+    'items-center',
+    'items-start',
+    'items-end'
+]
+
+const horizontalAlignments = [
+    'justify-center',
+    'justify-start',
+    'justify-end',
+    'justify-between',
+    'justify-around',
+    'justify-evenly'
+]
+
+const wraps = [
+    'wrap',
+    'nowrap',
+    'wrap-reverse'
+]
+---
+
+<Layout>
+    <h1>CSS Utility Classes</h1>
+
+    <h3>Container</h3>
+    <Card>
+        <div class="container">
+            <pre>.container with a max-width and padding</pre>
+        </div>
+    </Card>
+
+    <h3>Flex</h3>
+    <Card className="my" title="Gaps">
+        {spacings.map(space => (
+            <div class:list={['flex mb', space]}>
+                <Box>{space}</Box>
+                <Box />
+                <Box />
+                <Box />
+                <Box />
+            </div>
+        ))}
+    </Card>
+    <div class="grid sm-2 lg-4 my">
+        {flexDirections.map(direction => (
+            <Card title={`Direction: ${direction}`}>
+                <div class:list={['flex xs wrap', direction]}>
+                    <Box>1</Box>
+                    <Box>2</Box>
+                    <Box>3</Box>
+                    <Box>4</Box>
+                </div>
+            </Card>
+        ))}
+    </div>
+    <div class="grid sm-2 lg-3 my">
+        {verticalAlignments.map(alignment => (
+            <Card title={`Horziontal alignment: ${alignment}`}>
+                <div
+                    class:list={['flex xs wrap', alignment]}
+                    style="min-height: 200px"
+                >
+                    <Box>1</Box>
+                    <Box>2</Box>
+                    <Box>3</Box>
+                </div>
+            </Card>
+        ))}
+    </div>
+    <div class="grid sm-2 lg-3 my">
+        {horizontalAlignments.map(alignment => (
+            <Card title={`Horziontal alignment: ${alignment}`}>
+                <div class:list={['flex xs wrap', alignment]}>
+                    <Box>1</Box>
+                    <Box>2</Box>
+                    <Box>3</Box>
+                </div>
+            </Card>
+        ))}
+    </div>
+    <div class="grid sm-2 lg-3 my">
+        {wraps.map(wrap => (
+            <Card title={`Wrap: ${wrap}`}>
+                <div class:list={['flex xs wrap', wrap]}>
+                    <Box>1</Box>
+                    <Box>2</Box>
+                    <Box>3</Box>
+                    <Box>4</Box>
+                    <Box>5</Box>
+                </div>
+            </Card>
+        ))}
+    </div>
+</Layout>
diff --git a/src/scss/global/utility.scss b/src/scss/global/utility.scss
index ad398f3..4e83c80 100644
--- a/src/scss/global/utility.scss
+++ b/src/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));
+                }
+            }
         }
     }
 }
diff --git a/src/scss/setup.scss b/src/scss/setup.scss
index 541dd4a..462ed86 100644
--- a/src/scss/setup.scss
+++ b/src/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();
     }
 
diff --git a/src/static/Box.astro b/src/static/Box.astro
new file mode 100644
index 0000000..59d0181
--- /dev/null
+++ b/src/static/Box.astro
@@ -0,0 +1,14 @@
+<div><slot /></div>
+
+<style lang="scss">
+    @import '../scss/config.scss';
+
+    div {
+        @include size(80px);
+        @include border-radius(sm);
+        @include background(primary-50);
+        @include border(1px, primary-40);
+        @include layout(flex, center);
+        @include typography(sm, primary-20);
+    }
+</style>

From 58c00e285df0c1b48fc60485c54197a011c891a7 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 1 Aug 2024 17:16:58 +0200
Subject: [PATCH 05/18] =?UTF-8?q?=E2=9C=A8=20Accept=20active=20state=20for?=
 =?UTF-8?q?=20menu=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Menu/Menu.astro       |  6 +++++-
 src/components/Menu/Menu.svelte      |  6 +++++-
 src/components/Menu/Menu.tsx         |  6 +++++-
 src/components/Menu/menu.module.scss |  4 ++++
 src/components/Menu/menu.ts          |  1 +
 src/static/Layout.astro              | 18 ++++++++++++------
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Menu/Menu.astro b/src/components/Menu/Menu.astro
index 97e56ec..208726a 100644
--- a/src/components/Menu/Menu.astro
+++ b/src/components/Menu/Menu.astro
@@ -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>
diff --git a/src/components/Menu/Menu.svelte b/src/components/Menu/Menu.svelte
index e8ba567..46bcb62 100644
--- a/src/components/Menu/Menu.svelte
+++ b/src/components/Menu/Menu.svelte
@@ -50,7 +50,11 @@
                 <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>
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 21e57c2..5a0e78e 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -62,7 +62,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>
diff --git a/src/components/Menu/menu.module.scss b/src/components/Menu/menu.module.scss
index 1b623da..0eb53dd 100644
--- a/src/components/Menu/menu.module.scss
+++ b/src/components/Menu/menu.module.scss
@@ -75,6 +75,10 @@
             &:hover {
                 @include typography(primary);
             }
+
+            &.active {
+                @include typography(primary);
+            }
         }
     }
 
diff --git a/src/components/Menu/menu.ts b/src/components/Menu/menu.ts
index aaa1cca..85928d0 100644
--- a/src/components/Menu/menu.ts
+++ b/src/components/Menu/menu.ts
@@ -3,6 +3,7 @@ export type MenuProps = {
         url: string
         name: string
         target?: string
+        active?: boolean
     }[]
     logo?: {
         url?: string
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index a0dd079..fbe14c9 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -10,15 +10,17 @@ const menuClasses = [
 ].filter(Boolean).join(' ')
 
 const theme = (Astro.cookies.get('w-theme')?.value || 'theme-dark') as string
+const isPath = (path: string) => Astro.url.pathname.includes(path)
 
 const menu = {
     logo: {
         html: logo
     },
     items: [
-        { url: '/resets', name: 'Resets' },
-        { url: '/svelte', name: 'Svelte' },
-        { url: '/react', name: 'React' }
+        { url: '/svelte', name: 'Svelte', active: isPath('svelte') },
+        { url: '/react', name: 'React', active: isPath('react') },
+        { url: '/resets', name: 'Resets', active: isPath('resets') },
+        { url: '/utilities', name: 'Utilities', active: isPath('utilities') }
     ]
 }
 
@@ -60,7 +62,7 @@ const externalLinks = [
                 ))}
             </div>
         </Menu>
-        <div class="container">
+        <div class="container my">
             <slot />
         </div>
     </body>
@@ -124,7 +126,11 @@ const externalLinks = [
         }
     }
 
-    .container {
-        margin-top: 20px;
+    .my {
+        @include spacing(auto-default);
+    }
+
+    .mb {
+        @include spacing(mb-default);
     }
 </style>

From 6658c96bafd4b8a0cc4b3409f3071a8a0f886747 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 2 Aug 2024 10:19:23 +0200
Subject: [PATCH 06/18] =?UTF-8?q?=F0=9F=92=84=20Match=20default=20font=20s?=
 =?UTF-8?q?ize=20with=20browser=20defaults?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Accordion/accordion.module.scss  |  3 +--
 src/components/Alert/alert.module.scss          |  4 ++--
 src/components/Badge/badge.module.scss          |  2 +-
 src/components/Button/button.module.scss        |  2 +-
 src/components/Card/card.module.scss            |  1 -
 src/components/Checkbox/checkbox.module.scss    |  4 ++--
 src/components/Input/input.module.scss          |  4 ++--
 src/components/Menu/menu.module.scss            |  1 -
 src/components/Progress/progress.module.scss    |  6 +++---
 src/components/Radio/radio.module.scss          |  3 +--
 src/components/Rating/rating.module.scss        |  2 +-
 src/components/Switch/switch.module.scss        |  2 +-
 src/components/Table/table.module.scss          |  2 +-
 src/components/Tabs/tabs.module.scss            |  2 +-
 .../TimelineItem/timelineitem.module.scss       |  5 ++---
 src/pages/resets.astro                          |  1 +
 src/scss/config/typography.scss                 | 17 ++++++++---------
 src/scss/global/tooltip.scss                    |  2 +-
 src/scss/resets.scss                            | 13 +++++++++----
 19 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss
index 7c4a957..af27342 100644
--- a/src/components/Accordion/accordion.module.scss
+++ b/src/components/Accordion/accordion.module.scss
@@ -7,7 +7,6 @@
     li {
         @include border(primary-50, bottom);
         @include spacing(py-sm, px-none, m0);
-        @include typography(md);
 
         &:first-child {
             padding-top: 0;
@@ -20,7 +19,7 @@
 
         .title {
             @include layout(flex, h-between, v-center, sm);
-            @include typography(md, primary, left);
+            @include typography(default, primary, left);
             @include size('w100%');
             @include spacing(p0);
             @include border(0);
diff --git a/src/components/Alert/alert.module.scss b/src/components/Alert/alert.module.scss
index b0a0ff4..4ce2155 100644
--- a/src/components/Alert/alert.module.scss
+++ b/src/components/Alert/alert.module.scss
@@ -41,11 +41,11 @@
     }
 
     .title {
-        @include typography(hmd);
+        @include typography(lg, hmd);
         display: block;
     }
 
     .body {
-        @include typography(primary-20, md, hmd);
+        @include typography(primary-20, hmd);
     }
 }
diff --git a/src/components/Badge/badge.module.scss b/src/components/Badge/badge.module.scss
index d91e7bf..8f9358f 100644
--- a/src/components/Badge/badge.module.scss
+++ b/src/components/Badge/badge.module.scss
@@ -5,7 +5,7 @@
     @include spacing(py-xs, px-sm);
     @include border-radius(xs);
     @include layout(inline-flex, v-center, xs);
-    @include typography(xs, primary-50);
+    @include typography(sm, primary-50);
     @include border(0);
     @include background(primary);
 
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index b08fd63..8967343 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -2,7 +2,7 @@
 
 .button {
     @include layout(inline-flex, v-center, xs);
-    @include typography(md, primary-50, none);
+    @include typography(default, primary-50, none);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
     @include border(0);
diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss
index d61aa8d..4b0736e 100644
--- a/src/components/Card/card.module.scss
+++ b/src/components/Card/card.module.scss
@@ -16,7 +16,6 @@
     .title {
         @include spacing(p-default);
         @include border(primary-50, bottom);
-        @include typography(md);
         display: block;
     }
 
diff --git a/src/components/Checkbox/checkbox.module.scss b/src/components/Checkbox/checkbox.module.scss
index e2cd0a6..07da0c6 100644
--- a/src/components/Checkbox/checkbox.module.scss
+++ b/src/components/Checkbox/checkbox.module.scss
@@ -6,7 +6,7 @@ body {
 
 .checkbox {
     @include layout(inline-flex, sm);
-    @include typography(md, hmd);
+    @include typography(hmd);
 
     cursor: pointer;
 
@@ -57,7 +57,7 @@ body {
 
     .text {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);
diff --git a/src/components/Input/input.module.scss b/src/components/Input/input.module.scss
index 56b12c3..4650c69 100644
--- a/src/components/Input/input.module.scss
+++ b/src/components/Input/input.module.scss
@@ -54,7 +54,7 @@
     @include layout(flex, column);
 
     .label {
-        @include typography(md, primary-20);
+        @include typography(primary-20);
         @include spacing(mb-xs);
     }
 
@@ -73,7 +73,7 @@
     }
 
     .subtext {
-        @include typography(sm, primary-30);
+        @include typography(md, primary-30);
         @include spacing(mt-xs);
     }
 }
diff --git a/src/components/Menu/menu.module.scss b/src/components/Menu/menu.module.scss
index 0eb53dd..4f36438 100644
--- a/src/components/Menu/menu.module.scss
+++ b/src/components/Menu/menu.module.scss
@@ -3,7 +3,6 @@
 .menu {
     @include background(primary-70);
     @include spacing(p-md);
-    @include typography(md);
     @include border(bottom, primary-50);
     @include position(sticky, t0);
     @include layer(header);
diff --git a/src/components/Progress/progress.module.scss b/src/components/Progress/progress.module.scss
index 70a9848..7099b8f 100644
--- a/src/components/Progress/progress.module.scss
+++ b/src/components/Progress/progress.module.scss
@@ -11,19 +11,19 @@ body {
     @include size('w100%', h10px);
     @include border-radius(xl);
     @include visibility(hidden);
-    @include typography(bold, xxs);
+    @include typography(bold, xs);
     @include background(var(--w-progress-background));
 
     color: var(--w-progress-background);
     
     &.medium {
         @include size(h15px);
-        @include typography(xs);
+        @include typography(sm);
     }
 
     &.large {
         @include size(h20px);
-        @include typography(sm);
+        @include typography(md);
     }
 
     &.square {
diff --git a/src/components/Radio/radio.module.scss b/src/components/Radio/radio.module.scss
index a022775..0bf5bc2 100644
--- a/src/components/Radio/radio.module.scss
+++ b/src/components/Radio/radio.module.scss
@@ -13,7 +13,6 @@ body {
 
     label {
         @include layout(flex, xs);
-        @include typography(md);
 
         cursor: pointer;
 
@@ -71,7 +70,7 @@ body {
 
     .subtext {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);
diff --git a/src/components/Rating/rating.module.scss b/src/components/Rating/rating.module.scss
index 24b4482..68dd408 100644
--- a/src/components/Rating/rating.module.scss
+++ b/src/components/Rating/rating.module.scss
@@ -35,7 +35,7 @@ body {
     
     .text {
         @include transition(color);
-        @include typography(md, primary-20);
+        @include typography(default, primary-20);
         @include spacing(ml-xs);
 
         &.m {
diff --git a/src/components/Switch/switch.module.scss b/src/components/Switch/switch.module.scss
index eceaf7d..7c7e4a3 100644
--- a/src/components/Switch/switch.module.scss
+++ b/src/components/Switch/switch.module.scss
@@ -36,7 +36,7 @@ body {
         }
 
         .label {
-            @include typography(sm);
+            @include typography(md);
         }
     }
 
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
index afdd107..63e10b1 100644
--- a/src/components/Table/table.module.scss
+++ b/src/components/Table/table.module.scss
@@ -5,7 +5,7 @@
 
     table {
         @include size('w100%');
-        @include typography(md, left);
+        @include typography(left);
 
         border-collapse: collapse;
     }
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
index 7a3f689..379d7d3 100644
--- a/src/components/Tabs/tabs.module.scss
+++ b/src/components/Tabs/tabs.module.scss
@@ -76,7 +76,7 @@
         button {
             @include transition(color);
             @include background(transparent);
-            @include typography(md, primary-20);
+            @include typography(default, primary-20);
             @include border(0);
             @include spacing(p-md);
             @include layout(flex, v-center, sm);
diff --git a/src/components/TimelineItem/timelineitem.module.scss b/src/components/TimelineItem/timelineitem.module.scss
index 8726f8c..ed3e6bf 100644
--- a/src/components/TimelineItem/timelineitem.module.scss
+++ b/src/components/TimelineItem/timelineitem.module.scss
@@ -2,7 +2,6 @@
 
 .item {
     @include position(relative);
-    @include typography(md);
     @include spacing(m0);
 
     &::before {
@@ -10,7 +9,7 @@
         @include size(25px);
         @include border-radius(max);
         @include background(var(--w-timeline-color));
-        @include typography(sm);
+        @include typography(md);
         @include layout(inline-flex, center);
         @include border(2px, primary-70);
 
@@ -21,7 +20,7 @@
     }
 
     .title {
-        @include typography(bold, default);
+        @include typography(bold, lg);
         @include spacing(mb-sm);
 
         display: block;
diff --git a/src/pages/resets.astro b/src/pages/resets.astro
index add828d..a075f4a 100644
--- a/src/pages/resets.astro
+++ b/src/pages/resets.astro
@@ -31,6 +31,7 @@ import Card from '@components/Card/Card.astro'
             <li>Call the <code>setup</code> mixin in your global SCSS file.</li>
         </ol>
 
+        <hr />
         <p>Start your dev server with:</p>
         <pre>npm run dev</pre>
 
diff --git a/src/scss/config/typography.scss b/src/scss/config/typography.scss
index 6c8e4f6..712f000 100644
--- a/src/scss/config/typography.scss
+++ b/src/scss/config/typography.scss
@@ -4,15 +4,14 @@ $fontTypes: (
 ) !default;
 
 $fontSizes: (
-    'xxs':      10px,
-    'xs':       12px,
-    'sm':       14px,
-    'md':       16px,
-    'default':  18px,
-    'lg':       21px,
-    'xl':       24px,
-    '2xl':      28px,
-    '3xl':      32px
+    'xs':       10px,
+    'sm':       12px,
+    'md':       14px,
+    'default':  16px,
+    'lg':       18px,
+    'xl':       21px,
+    '2xl':      24px,
+    '3xl':      28px
 ) !default;
 
 $lineHeights: (
diff --git a/src/scss/global/tooltip.scss b/src/scss/global/tooltip.scss
index 6dd8536..0391aa8 100644
--- a/src/scss/global/tooltip.scss
+++ b/src/scss/global/tooltip.scss
@@ -24,7 +24,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);
diff --git a/src/scss/resets.scss b/src/scss/resets.scss
index 4a4bf9b..db7e714 100644
--- a/src/scss/resets.scss
+++ b/src/scss/resets.scss
@@ -53,7 +53,7 @@
     pre {
         @include border(primary-50);
         @include border-radius(md);
-        @include typography(sm);
+        @include typography(md);
     }
 
     code {
@@ -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);
+    }
 }    

From e6b8bebf5602a246bf68465ae6ef93cbd8e65ab1 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 2 Aug 2024 10:26:29 +0200
Subject: [PATCH 07/18] =?UTF-8?q?=E2=9C=A8=20Make=20Rating=20component=20a?=
 =?UTF-8?q?ccept=20decimal=20numbers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Rating/Rating.astro  |  4 ++--
 src/components/Rating/Rating.svelte |  4 ++--
 src/components/Rating/Rating.tsx    |  4 ++--
 src/pages/rating.astro              | 10 ++++++++++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Rating/Rating.astro b/src/components/Rating/Rating.astro
index 7a24fe9..851f9af 100644
--- a/src/components/Rating/Rating.astro
+++ b/src/components/Rating/Rating.astro
@@ -45,11 +45,11 @@ const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
 
 <span class:list={classes} style={styleVariables}>
     {score > 0 && (
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     )}
     {showEmpty && (
         <span class={styles.empty}>
-            {Array(total - score).fill('★').join('')}
+            {Array(total - Math.round(score)).fill('★').join('')}
         </span>
     )}
     {showText && (
diff --git a/src/components/Rating/Rating.svelte b/src/components/Rating/Rating.svelte
index ae0433b..617bf2f 100644
--- a/src/components/Rating/Rating.svelte
+++ b/src/components/Rating/Rating.svelte
@@ -42,11 +42,11 @@
 
 <span class={classes} style={styleVariables}>
     {#if score}
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     {/if}
     {#if showEmpty}
     <span class={styles.empty}>
-            {Array((total || 5) - score).fill('★').join('')}
+            {Array((total || 5) - Math.round(score)).fill('★').join('')}
         </span>
     {/if}
 
diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx
index 4c89ad2..ed1d5c2 100644
--- a/src/components/Rating/Rating.tsx
+++ b/src/components/Rating/Rating.tsx
@@ -43,12 +43,12 @@ const Rating = ({
         <span className={classes} style={styleVariables}>
             {score > 0 && (
                 <span className={styles.score}>
-                    {Array(score).fill('★').join('')}
+                    {Array(Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showEmpty && (
                 <span className={styles.empty}>
-                    {Array(total - score).fill('★').join('')}
+                    {Array(total - Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showText && (
diff --git a/src/pages/rating.astro b/src/pages/rating.astro
index 9c65e28..2d0f332 100644
--- a/src/pages/rating.astro
+++ b/src/pages/rating.astro
@@ -148,6 +148,16 @@ const sections = getSections({
                     <section.component score={5} total={10} />
                 </div>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Decimal rating">
+                <section.component
+                    score={4.8}
+                    showText={true}
+                    reviewCount={123}
+                    reviewLink="/avatar"
+                    reviewTarget="_blank"
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>

From b01962bd061a01ae58cf0f6a27e0e0588abbfa49 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 2 Aug 2024 11:58:23 +0200
Subject: [PATCH 08/18] =?UTF-8?q?=E2=9C=A8=20Add=20example=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tabs/tabs.module.scss |   5 +
 src/pages/index.astro                |  28 +--
 src/static/Examples.astro            | 268 +++++++++++++++++++++++++++
 src/static/Layout.astro              |   4 +
 4 files changed, 292 insertions(+), 13 deletions(-)
 create mode 100644 src/static/Examples.astro

diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
index 379d7d3..cc61ee4 100644
--- a/src/components/Tabs/tabs.module.scss
+++ b/src/components/Tabs/tabs.module.scss
@@ -7,6 +7,7 @@
         @include border-radius(md);
         @include spacing(p-xs);
         @include size(wmax-content);
+        @include border(0);
 
         button {
             @include transition();
@@ -46,6 +47,10 @@
         &.outline .items button {
             @include border(bottom, 0);
         }
+
+        &:not(.outline) .items {
+            @include border(0);
+        }
         
         .items {
             @include layout(column, xs);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 17519d5..178956d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '@static/Layout.astro'
+import Examples from '@static/Examples.astro'
 import CardWrapper from '@static/CardWrapper.astro'
 
 import Accordion from '@components/Accordion/Accordion.astro'
@@ -66,7 +67,9 @@ const tabItems = [{
     </div>
 
     <ThemeSwitcher themes={themes} className="switcher" />
+    <Examples />
 
+    <h2 class="my">Components</h2>
     <div class="grid md-2 lg-3">
         <CardWrapper title="Accordion" href="/accordion">
             <Accordion items={accordionItems} />
@@ -174,6 +177,9 @@ const tabItems = [{
 </Layout>
 
 <style is:global lang="scss">
+    h2.my {
+       margin-top: 100px;
+    }
 
     .a {
         background: #B545ED;
@@ -182,11 +188,11 @@ const tabItems = [{
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
-    
+
     .s {
         color: #FF3E00;
     }
-    
+
     .r {
         color: #61DAFB;
     }
@@ -197,17 +203,13 @@ const tabItems = [{
         justify-content: center;
         gap: 10px;
     }
-    
-    .grid {
-        margin-top: 100px;
-        
-        .card-wrapper > div {
-            pointer-events: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-        }
+
+    .card-wrapper > div {
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
     }
 
     .menu-example {
diff --git a/src/static/Examples.astro b/src/static/Examples.astro
new file mode 100644
index 0000000..fa4c8dd
--- /dev/null
+++ b/src/static/Examples.astro
@@ -0,0 +1,268 @@
+---
+import Card from '@components/Card/Card.astro'
+import Input from '@components/Input/Input.astro'
+import Badge from '@components/Badge/Badge.astro'
+import Button from '@components/Button/Button.astro'
+import Checkbox from '@components/Checkbox/Checkbox.astro'
+import Radio from '@components/Radio/Radio.astro'
+import Switch from '@components/Switch/Switch.astro'
+import Avatar from '@components/Avatar/Avatar.astro'
+import Tabs from '@components/Tabs/Tabs.astro'
+import Table from '@components/Table/Table.astro'
+import Timeline from '@components/Timeline/Timeline.astro'
+import Progress from '@components/Progress/Progress.astro'
+import Rating from '@components/Rating/Rating.astro'
+import Spinner from '@components/Spinner/Spinner.astro'
+import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
+
+import { avatarGroup } from '@data'
+
+const tabItems = [{
+    label: 'Profile',
+    value: 'profile',
+    active: true
+}, {
+    label: 'Contact',
+    value: 'contact'
+}]
+
+const radioItems = [
+    { label: 'All messages', value: '1' },
+    { label: 'Direct messages only', value: '2', selected: true },
+    { label: 'No notifications', value: '3'},
+]
+
+const tasks = [
+    { theme: null, label: 'IP', ticket: 'W4567 - Home redesign' },
+    { theme: 'alert', label: 'P1', ticket: 'W2345 - Payment gateway warnings' },
+    { theme: 'warning', label: 'P3', ticket: 'W6789 - Investigate user auth issues' },
+    { theme: 'info', label: 'TODO', ticket: 'W1357 - Mobile redesign' }
+]
+---
+
+<div class="examples flex">
+    <div class="example-column flex column">
+        <Card title="Sign up">
+            <div class="flex column">
+                <Input label="Email" placeholder="Enter your email" />
+                <Input
+                    type="password"
+                    label="Password"
+                    placeholder="Enter your password"
+                    subText="Generate a unique password <a href='#'>here</a>"
+                />
+                <div>
+                    <Button theme="success">Create an account</Button>
+                    <Button theme="secondary">Sign in</Button>
+                </div>
+            </div>
+        </Card>
+        <Card>
+            <Timeline theme="fill">
+                <TimelineItem title="2020">
+                    <strong>Founded</strong>
+                    <br />
+                    <span class="muted">
+                        Launched our mission to transform online shopping with a handpicked selection of goods and a commitment to unparalleled customer care.
+                    </span>
+                </TimelineItem>
+                <TimelineItem title="2021">
+                    <strong>Expanded Offerings</strong>
+                    <br />
+                    <span class="muted">
+                        Introduced over 500 unique, locally-sourced products, enriching our collection and supporting small businesses.
+                    </span>
+                </TimelineItem>
+                <TimelineItem title="2022">
+                    <strong>⭐ Achieved Milestone</strong>
+                    <br />
+                    <span class="muted">
+                        Proudly served 100,000 happy customers, marked by launching same-day delivery in major cities and exclusive membership perks.
+                    </span>
+                </TimelineItem>
+            </Timeline>
+        </Card>
+    </div>
+    
+    <div class="example-column flex column">
+        <Card title="Settings">
+            <div class="flex column">
+                <Checkbox
+                    label="Enable all notifications"
+                    subText="Enable or disable all of your notification with one click. Previous settings will be overwritten."
+                />
+                <Switch label="Security emails" toggled={true} />
+                <Switch label="Marketing emails" />
+                <hr />
+                <strong class="slack">Slack notifications</strong>
+                <Radio
+                    items={radioItems}
+                    name="radio-example"
+                />
+            </div>
+        </Card>
+        <Card title="SEO Overview">
+            <span>Keep track of the SEO performance of your posts.</span>
+    
+            <div class="my flex column md">
+                <div>
+                    <div class="flex justify-between muted progress-label">
+                        <span>Underperforming</span>
+                        <span>50%</span>
+                    </div>
+                    <Progress value={50} color="var(--w-color-alert)" />
+                </div>
+                <div>
+                    <div class="flex justify-between muted progress-label">
+                        <span>OK</span>
+                        <span>30%</span>
+                    </div>
+                    <Progress value={30} color="var(--w-color-warning)" />
+                </div>
+                <div>
+                    <div class="flex justify-between muted progress-label">
+                        <span>SEO-friendly</span>
+                        <span>20%</span>
+                    </div>
+                    <Progress value={20} color="var(--w-color-success)" />
+                </div>
+            </div>
+        </Card>
+    </div>
+
+    <div class="example-column flex column">
+        <Card>
+            <Tabs items={tabItems} theme="boxed" even={true}>
+                <div data-tab="profile" data-active="true">
+                    <div class="flex sm items-center">
+                        <Avatar
+                            img="/img/avatar2.png" 
+                            size={50}
+                        />
+                        <div class="flex column xs">
+                            <span>Emily</span>
+                            <span class="muted">QA Engineer</span>
+                        </div>
+                    </div>
+    
+                    <strong class="tasks">Tasks</strong>
+                    <hr />
+                    <div class="flex column xs">
+                        {tasks.map(task => (
+                            <div>
+                                <Badge theme={task.theme as any}>
+                                    {task.label}
+                                </Badge>
+                                <a href="#" class="muted task">
+                                    {task.ticket}
+                                </a>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div data-tab="contact">
+                    <Table
+                        data={[
+                            ['Phone', '+1 234 5678'],
+                            ['Email', '<a href="#">emily@example.com</a>'],
+                            ['Slack', '@emily09'],
+                            ['Address', 'Mars, Pennsylvania']
+                        ]}
+                    />
+                </div>
+            </Tabs>
+        </Card>
+
+        <Card>
+            <div class="flex sm items-center">
+                <Avatar
+                    img="/img/avatar0.png" 
+                    size={50}
+                />
+                <div class="flex column xs">
+                    <span>Marcus</span>
+                    <span class="muted" data-tooltip="In Art & Collectibles">
+                        Top rated seller
+                    </span>
+                </div>
+            </div>
+            <hr />
+            <Rating
+                score={4.8}
+                showText={true}
+                reviewCount={123}
+                reviewLink="#"
+                reviewTarget="_blank"
+            />
+            <div class="flex center sm loading">
+                <Spinner />
+                <span class="muted">
+                    Loading reviews...
+                </span>
+            </div>
+            <hr />
+            <div class="sellers">
+                <strong>Explore other sellers</strong>
+                <a href="#">
+                    <Avatar
+                        size={[30, 40, 50, 40, 30]}
+                        img={avatarGroup}
+                    />
+                </a>
+            </div>
+        </Card>
+    </div>
+</div>
+
+<style is:global lang="scss">
+    @import '../scss/config.scss';
+
+    .examples {
+        margin-top: 100px;
+        overflow-x: scroll;
+        scrollbar-width: none;
+    }
+
+    .example-column {
+        min-width: 370px;
+        width: 370px;
+    }
+
+    .slack {
+        margin-top: -5px;
+    }
+
+    .tasks {
+        @include spacing(mt-sm);
+        display: block;
+    }
+
+    .task {
+        @include typography(none);
+
+        &:hover {
+            @include typography(primary);
+        }
+    }
+
+    .progress-label {
+        @include spacing(mb-xs);
+    }
+
+    .loading {
+        @include spacing(mt-default);
+
+        svg {
+            @include spacing(m0);
+        }
+    }
+
+    .sellers {
+        @include typography(center);
+
+        strong {
+            @include spacing(my-xs);
+            display: block;
+        }
+    }
+</style>
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index fbe14c9..80680d4 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -133,4 +133,8 @@ const externalLinks = [
     .mb {
         @include spacing(mb-default);
     }
+
+    .muted {
+        @include typography(primary-20, md);
+    }
 </style>

From e72a8ed1eef6a703f9b33c054ff1c3a4fecd7309 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sat, 3 Aug 2024 20:20:31 +0200
Subject: [PATCH 09/18] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Improve=20components?=
 =?UTF-8?q?=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Menu/Menu.astro                |  4 +--
 src/components/Menu/Menu.svelte               |  8 ++++--
 src/components/Menu/Menu.tsx                  |  2 ++
 .../ThemeSwitcher/ThemeSwitcher.astro         |  1 +
 .../ThemeSwitcher/ThemeSwitcher.svelte        |  3 ++-
 .../ThemeSwitcher/ThemeSwitcher.tsx           |  3 ++-
 src/data.js                                   | 26 +++++++++++++++----
 src/pages/index.astro                         | 12 ++++++++-
 src/scss/global/theme.scss                    | 14 +++++-----
 src/static/Examples.astro                     | 16 +++++++++++-
 10 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/components/Menu/Menu.astro b/src/components/Menu/Menu.astro
index 208726a..a1ee360 100644
--- a/src/components/Menu/Menu.astro
+++ b/src/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>
             )}
@@ -77,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>
         )}
diff --git a/src/components/Menu/Menu.svelte b/src/components/Menu/Menu.svelte
index 46bcb62..a9b2b56 100644
--- a/src/components/Menu/Menu.svelte
+++ b/src/components/Menu/Menu.svelte
@@ -43,7 +43,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 items?.length}
@@ -73,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}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 5a0e78e..1077f9c 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -55,6 +55,7 @@ const Menu = ({
                         <a
                             href="/"
                             dangerouslySetInnerHTML={{ __html: logo.html }}
+                            aria-label={logo.alt || 'Logo'}
                         />
                     )}
 
@@ -88,6 +89,7 @@ const Menu = ({
                     <a
                         href="/"
                         dangerouslySetInnerHTML={{ __html: logo.html }}
+                        aria-label={logo.alt || 'Logo'}
                     />
                 )}
 
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.astro b/src/components/ThemeSwitcher/ThemeSwitcher.astro
index 92f65a3..26a719b 100644
--- a/src/components/ThemeSwitcher/ThemeSwitcher.astro
+++ b/src/components/ThemeSwitcher/ThemeSwitcher.astro
@@ -38,6 +38,7 @@ const buttonClasses = [
         <button
             style={!useIcons ? `background:${theme};` : undefined}
             data-theme={themes[theme]}
+            aria-label={themes[theme]}
             class:list={buttonClasses}
         >
             {index === 0 && <slot name="primaryIcon" />}
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.svelte b/src/components/ThemeSwitcher/ThemeSwitcher.svelte
index 11b632c..b900f47 100644
--- a/src/components/ThemeSwitcher/ThemeSwitcher.svelte
+++ b/src/components/ThemeSwitcher/ThemeSwitcher.svelte
@@ -61,9 +61,10 @@
 >
     {#each Object.keys(themes) as theme, index}
         <button
+            on:click={() => setTheme(toggle ? index : themes[theme])}
             style={!useIcons ? `background:${theme};` : undefined}
             data-active={currentTheme === themes[theme]}
-            on:click={() => setTheme(toggle ? index : themes[theme])}
+            aria-label={themes[theme]}
             class={classNames([
                 styles.switch,
                 useIcons && styles.icons
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ThemeSwitcher/ThemeSwitcher.tsx
index a85d08b..785f665 100644
--- a/src/components/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -70,8 +70,9 @@ const ThemeSwitcher = ({
             {Object.keys(themes as {}).map((theme, index) => (
                 <button
                     key={index}
-                    data-active={currentTheme === themes[theme]}
                     onClick={() => setTheme(toggle ? index : themes[theme])}
+                    data-active={currentTheme === themes[theme]}
+                    aria-label={themes[theme]}
                     style={!useIcons ? { background: theme } : undefined}
                     className={classNames([
                         styles.switch,
diff --git a/src/data.js b/src/data.js
index 1cc0595..5ae2623 100644
--- a/src/data.js
+++ b/src/data.js
@@ -14,11 +14,27 @@ export const accordionItems = [{
 }]
 
 export const avatarGroup = [
-    "/img/avatar0.png",
-    "/img/avatar1.png",
-    "/img/avatar2.png",
-    "/img/avatar3.png",
-    "/img/avatar4.png"
+    '/img/avatar0.png',
+    '/img/avatar1.png',
+    '/img/avatar2.png',
+    '/img/avatar3.png',
+    '/img/avatar4.png'
+]
+
+export const avatarGroupAlt1 = [
+    'avatar0',
+    'avatar1',
+    'avatar2',
+    'avatar3',
+    'avatar4'
+]
+
+export const avatarGroupAlt2 = [
+    'Marcus',
+    'Giuseppe',
+    'Emily',
+    'Frank',
+    'Jonathan'
 ]
 
 export const tabItems = [{
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 178956d..2650672 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,7 +26,12 @@ import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
 import infoIcon from '../icons/info.svg?raw'
 import gitHubIcon from '../icons/github.svg?raw'
 
-import { themes, accordionItems, avatarGroup } from '@data'
+import {
+    themes,
+    accordionItems,
+    avatarGroup,
+    avatarGroupAlt2
+} from '@data'
 
 import logo from '../../public/img/logo.svg?raw'
 
@@ -81,6 +86,7 @@ const tabItems = [{
             <Avatar
                 size={[30, 40, 50, 40, 30]}
                 img={avatarGroup}
+                alt={avatarGroupAlt2}
             />
         </CardWrapper>
         <CardWrapper title="Badge" href="/badge">
@@ -197,6 +203,10 @@ const tabItems = [{
         color: #61DAFB;
     }
 
+    .theme-light .r {
+        color: #00a0cc;
+    }
+
     .cta {
         text-align: center;
         display: flex;
diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
index e2861ca..0b3ffc1 100644
--- a/src/scss/global/theme.scss
+++ b/src/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,7 +22,7 @@
             --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;
         }
@@ -49,7 +49,7 @@
             --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;
         }
@@ -61,7 +61,7 @@
             --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;
@@ -76,7 +76,7 @@
             --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;
         }
@@ -103,7 +103,7 @@
             --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;
         }
@@ -130,7 +130,7 @@
             --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;
         }
diff --git a/src/static/Examples.astro b/src/static/Examples.astro
index fa4c8dd..611008a 100644
--- a/src/static/Examples.astro
+++ b/src/static/Examples.astro
@@ -1,6 +1,8 @@
 ---
+import Alert from '@components/Alert/Alert.astro'
 import Card from '@components/Card/Card.astro'
 import Input from '@components/Input/Input.astro'
+import Icon from '@components/Icon/Icon.astro'
 import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
@@ -15,7 +17,7 @@ import Rating from '@components/Rating/Rating.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
 import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
 
-import { avatarGroup } from '@data'
+import { avatarGroup, avatarGroupAlt2 } from '@data'
 
 const tabItems = [{
     label: 'Profile',
@@ -207,10 +209,17 @@ const tasks = [
                     <Avatar
                         size={[30, 40, 50, 40, 30]}
                         img={avatarGroup}
+                        alt={avatarGroupAlt2}
                     />
                 </a>
             </div>
         </Card>
+
+        <Alert title="Deployments">
+            <Icon type="github" slot="icon" />
+            <span>Connect your project to GitHub to start running automatic deployments.</span>
+            <Button className="connect">Connect</Button>
+        </Alert>
     </div>
 </div>
 
@@ -265,4 +274,9 @@ const tasks = [
             display: block;
         }
     }
+
+    .connect {
+        @include spacing(mt-sm);
+        @include typography(md);
+    }
 </style>

From 7de1a3787edc9af5ebe4393edf07bf7d736511d3 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Sun, 4 Aug 2024 23:06:05 +0200
Subject: [PATCH 10/18] =?UTF-8?q?=E2=9C=A8=20Add=20additional=20example=20?=
 =?UTF-8?q?themes=20+=20themes=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/button.module.scss |  2 +-
 src/data.js                              | 15 ++--
 src/pages/themes.astro                   | 95 ++++++++++++++++++++++++
 src/scss/global/theme.scss               | 95 +++++++++++++++---------
 src/static/Layout.astro                  | 14 ++--
 src/utils/interpolate.ts                 | 23 ++++++
 6 files changed, 196 insertions(+), 48 deletions(-)
 create mode 100644 src/pages/themes.astro
 create mode 100644 src/utils/interpolate.ts

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index 8967343..cb25646 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -1,7 +1,7 @@
 @use '../../scss/config.scss' as *;
 
 .button {
-    @include layout(inline-flex, v-center, xs);
+    @include layout(inline-flex, center, xs);
     @include typography(default, primary-50, none);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
diff --git a/src/data.js b/src/data.js
index 5ae2623..3139fdb 100644
--- a/src/data.js
+++ b/src/data.js
@@ -81,14 +81,15 @@ export const menuLogo = {
 }
 
 export const themes = {
-    '#252525': 'theme-dark',
-    '#DDD': 'theme-light',
-    '#415a77': 'theme-blue',
-    '#d5bdaf': 'theme-beige',
-    '#588157': 'theme-green'
+    '#252525': 'dark',
+    '#DDD': 'light',
+    '#415a77': 'midnight',
+    '#d5bdaf': 'vintage',
+    '#fCBA28': 'amber',
+    '#9D2BD6': 'synthwave',
 }
 
 export const toggleThemes = {
-    '#252525': 'theme-dark',
-    '#DDD': 'theme-light'
+    '#252525': 'dark',
+    '#DDD': 'light'
 }
diff --git a/src/pages/themes.astro b/src/pages/themes.astro
new file mode 100644
index 0000000..20ffcc4
--- /dev/null
+++ b/src/pages/themes.astro
@@ -0,0 +1,95 @@
+---
+import Layout from '@static/Layout.astro'
+import Examples from '@static/Examples.astro'
+import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.astro'
+import Button from '@components/Button/Button.astro'
+import Toast from '@components/Toast/Toast.astro'
+
+import { themes } from '@data'
+---
+
+<Layout>
+    <h1>Themes</h1>
+
+    <ThemeSwitcher themes={themes} className="justify-center" />
+
+    <div class="flex sm justify-center my column">
+        <label class="flex column none">
+            <span class="muted">Radius</span>
+            <input
+                type="range"
+                min={0}
+                max={100}
+                value={50}
+                step={10}
+                id="radius"
+            />
+        </label>
+        <Button id="copy">Copy Setup</Button>
+    </div>
+
+    <Examples />
+
+    <Toast theme="success" id="toast">
+        Copied setup to clipboard
+    </Toast>
+</Layout>
+
+<script>
+    import { toast } from '@utils/toast'
+    import { interpolate } from '@utils/interpolate'
+
+    const input = document.querySelector('#radius') as HTMLElement
+    const copy = document.querySelector('#copy') as HTMLElement
+
+    input.addEventListener('change', (e: any) => {
+        const value = Number(e.target.value)
+
+        const sm = interpolate(value, [0, 100], [0, 8])
+        const md = interpolate(value, [0, 100], [0, 20])
+        const lg = interpolate(value, [0, 100], [0, 40])
+        const xl = interpolate(value, [0, 100], [0, 60])
+
+        document.body.style.setProperty('--w-sm-radius', `${sm}px`)
+        document.body.style.setProperty('--w-md-radius', `${md}px`)
+        document.body.style.setProperty('--w-lg-radius', `${lg}px`)
+        document.body.style.setProperty('--w-xl-radius', `${xl}px`)
+    })
+
+    copy.addEventListener('click', () => {
+        const bodyStyles = document.body.style
+        
+        const sm = bodyStyles.getPropertyValue('--w-sm-radius') || '2px'
+        const md = bodyStyles.getPropertyValue('--w-md-radius') || '5px'
+        const lg = bodyStyles.getPropertyValue('--w-lg-radius') || '10px'
+        const xl = bodyStyles.getPropertyValue('--w-xl-radius') || '15px'
+
+        const code = `
+            @import 'webcoreui/styles';
+            @include setup((
+                theme: '${document.body.className}'
+            ));
+
+            html body {
+                --w-sm-radius: ${sm};
+                --w-md-radius: ${md};
+                --w-lg-radius: ${lg};
+                --w-xl-radius: ${xl};
+            }
+        `.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
+
+        navigator.clipboard.writeText(code)
+
+        toast('#toast')
+    })
+</script>
+
+<style lang="scss">
+    input {
+        margin: 0;
+    }
+
+    .flex {
+        max-width: fit-content;
+    }
+</style>
diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
index 0b3ffc1..098ac87 100644
--- a/src/scss/global/theme.scss
+++ b/src/scss/global/theme.scss
@@ -67,70 +67,97 @@
             --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: #de3233;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #ed3b3c;
+            --w-color-alert-accent: #fb6161;
             --w-color-alert-fg: #FFF;
         }
     }
 
-    @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: #de3233;
+            --w-color-alert: #bf6170;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
         }
     }
 
-    @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: #222;
+            --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: #de3233;
+            --w-color-alert: #ff6188;
+            --w-color-alert-accent: #EE5253;
+            --w-color-alert-fg: #000;
+        }
+    }
+
+    @if $theme == 'synthwave' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #FFF;
+            --w-color-primary-10: #EEE;
+            --w-color-primary-20: #fad1ba;
+            --w-color-primary-30: #a8b6de;
+            --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;
         }
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index 80680d4..2682b69 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -9,7 +9,7 @@ const menuClasses = [
     nonStickyMenu && 'fixed'
 ].filter(Boolean).join(' ')
 
-const theme = (Astro.cookies.get('w-theme')?.value || 'theme-dark') as string
+const theme = (Astro.cookies.get('w-theme')?.value || 'dark') as string
 const isPath = (path: string) => Astro.url.pathname.includes(path)
 
 const menu = {
@@ -19,6 +19,7 @@ const menu = {
     items: [
         { url: '/svelte', name: 'Svelte', active: isPath('svelte') },
         { url: '/react', name: 'React', active: isPath('react') },
+        { url: '/themes', name: 'Themes', active: isPath('themes') },
         { url: '/resets', name: 'Resets', active: isPath('resets') },
         { url: '/utilities', name: 'Utilities', active: isPath('utilities') }
     ]
@@ -76,11 +77,12 @@ const externalLinks = [
         fontRegular: '/fonts/Inter-Regular.woff2',
         fontBold: '/fonts/Inter-Bold.woff2',
         themes: (
-            dark: '.theme-dark',
-            light: '.theme-light',
-            midnight: '.theme-blue',
-            green: '.theme-green',
-            beige: '.theme-beige'
+            dark: '.dark',
+            light: '.light',
+            midnight: '.midnight',
+            vintage: '.vintage',
+            amber: '.amber',
+            synthwave: '.synthwave',
         )
     ));
 
diff --git a/src/utils/interpolate.ts b/src/utils/interpolate.ts
new file mode 100644
index 0000000..d87c696
--- /dev/null
+++ b/src/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))

From 633d4f742465d70bc67114e66ce6c6cbbf20b035 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 5 Aug 2024 13:04:43 +0200
Subject: [PATCH 11/18] =?UTF-8?q?=E2=9C=A8=20Add=20Modal=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  22 +++
 src/components/Button/button.ts        |   2 +-
 src/components/Icon/map.ts             |   2 +
 src/components/Modal/Modal.astro       |  50 +++++++
 src/components/Modal/Modal.svelte      |  52 +++++++
 src/components/Modal/Modal.tsx         |  55 +++++++
 src/components/Modal/modal.module.scss |  67 +++++++++
 src/components/Modal/modal.ts          |  13 ++
 src/icons/close.svg                    |   3 +
 src/pages/index.astro                  |   3 +
 src/pages/modal.astro                  | 197 +++++++++++++++++++++++++
 src/scss/config/color-palette.scss     |   1 +
 src/scss/global/theme.scss             |   6 +
 src/static/ComponentWrapper.astro      |   6 +-
 src/utils/modal.ts                     |  60 ++++++++
 15 files changed, 535 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Modal/Modal.astro
 create mode 100644 src/components/Modal/Modal.svelte
 create mode 100644 src/components/Modal/Modal.tsx
 create mode 100644 src/components/Modal/modal.module.scss
 create mode 100644 src/components/Modal/modal.ts
 create mode 100644 src/icons/close.svg
 create mode 100644 src/pages/modal.astro
 create mode 100644 src/utils/modal.ts

diff --git a/README.md b/README.md
index 9cc6998..e371980 100644
--- a/README.md
+++ b/README.md
@@ -107,30 +107,51 @@ Default component styles can be changed by overriding the following CSS variable
 
 ```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);
+
+    // 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);
 
@@ -175,6 +196,7 @@ 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)
diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts
index b68ffb3..a3dda08 100644
--- a/src/components/Button/button.ts
+++ b/src/components/Button/button.ts
@@ -18,5 +18,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: () => any
-    children: React.ReactNode
+    children?: React.ReactNode
 } & ButtonProps
diff --git a/src/components/Icon/map.ts b/src/components/Icon/map.ts
index 661ebe0..1906853 100644
--- a/src/components/Icon/map.ts
+++ b/src/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,
diff --git a/src/components/Modal/Modal.astro b/src/components/Modal/Modal.astro
new file mode 100644
index 0000000..e79dd4a
--- /dev/null
+++ b/src/components/Modal/Modal.astro
@@ -0,0 +1,50 @@
+---
+import type { ModalProps } from './modal'
+import styles from './modal.module.scss'
+
+import Button from '../Button/Button.astro'
+import closeIcon from '../../icons/close.svg?raw'
+
+interface Props extends ModalProps {}
+
+const {
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    id,
+    className
+} = Astro.props
+
+const close = [
+    showCloseIcon && 'icon',
+    closeOnEsc && 'esc',
+    closeOnOverlay && 'overlay'
+].filter(Boolean).join(',')
+
+const classes = [
+    styles.modal,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+>
+    {showCloseIcon && (
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+        >
+            <Fragment set:html={closeIcon} />
+        </Button>
+    )}
+    {title && <strong class={styles.title}>{title}</strong>}
+    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
+    <slot />
+</dialog>
+<div class={styles.overlay} />
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
new file mode 100644
index 0000000..194d83c
--- /dev/null
+++ b/src/components/Modal/Modal.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { ModalProps } from './modal'
+
+    import styles from './modal.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    import Button from '../Button/Button.svelte'
+    import closeIcon from '../../icons/close.svg?raw'
+
+    export let title: ModalProps['title'] = ''
+    export let subTitle: ModalProps['subTitle'] = ''
+    export let showCloseIcon: ModalProps['showCloseIcon'] = true
+    export let closeOnEsc: ModalProps['closeOnEsc'] = true
+    export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let id : ModalProps['className'] = ''
+    export let className: ModalProps['className'] = ''
+
+    const classes = classNames([
+        styles.modal,
+        className
+    ])
+
+    const close = [
+        showCloseIcon && 'icon',
+        closeOnEsc && 'esc',
+        closeOnOverlay && 'overlay'
+    ].filter(Boolean).join(',')
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+>
+    {#if showCloseIcon}
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+        >
+            {@html closeIcon}
+        </Button>
+    {/if}
+    {#if title}
+        <strong class={styles.title}>{title}</strong>
+    {/if}
+    {#if subTitle}
+        <div class={styles.subTitle}>{subTitle}</div>
+    {/if}
+    <slot />
+</dialog>
+<div class={styles.overlay} />
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000..297f443
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import type { ReactModalProps } from './modal'
+
+import styles from './modal.module.scss'
+import { classNames } from '../../utils/classNames'
+
+import Button from '../Button/Button.tsx'
+import closeIcon from '../../icons/close.svg?raw'
+
+const Modal = ({
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    id,
+    className,
+    children
+}: ReactModalProps) => {
+    const classes = classNames([
+        styles.modal,
+        className
+    ])
+
+    const close = [
+        showCloseIcon && 'icon',
+        closeOnEsc && 'esc',
+        closeOnOverlay && 'overlay'
+    ].filter(Boolean).join(',')
+
+    return (
+        <React.Fragment>
+            <dialog
+                className={classes}
+                id={id}
+                data-close={close.length ? close : undefined}
+            >
+                {showCloseIcon && (
+                    <Button
+                        theme="flat"
+                        className={styles.close}
+                        data-id="close"
+                        dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    />
+                )}
+                {title && <strong className={styles.title}>{title}</strong>}
+                {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+                {children}
+            </dialog>
+            <div className={styles.overlay} />
+        </React.Fragment>
+    )
+}
+
+export default Modal
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
new file mode 100644
index 0000000..0170686
--- /dev/null
+++ b/src/components/Modal/modal.module.scss
@@ -0,0 +1,67 @@
+@import '../../scss/config.scss';
+
+.modal {
+    @include transition();
+    @include position(fixed, 't50%', 'l50%');
+    @include spacing(0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size('w90%');
+
+    transform: translate(-50%, calc(-50% + 15px));
+    max-width: 500px;
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translate(-50%, -50%);
+        pointer-events: all;
+
+        + .overlay {
+            @include visibility(1);
+            pointer-events: all;
+        }
+    }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        display: block;
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+}
+
+.overlay {
+    @include transition(opacity);
+    @include position(fixed);
+    @include background(overlay);
+    @include layer(header);
+    @include visibility(0);
+
+    inset: 0;
+    pointer-events: none;
+}
+
+@include media(xs) {
+    .modal {
+        @include size('wauto');
+    }
+}
diff --git a/src/components/Modal/modal.ts b/src/components/Modal/modal.ts
new file mode 100644
index 0000000..59bbec6
--- /dev/null
+++ b/src/components/Modal/modal.ts
@@ -0,0 +1,13 @@
+export type ModalProps = {
+    title?: string
+    subTitle?: string
+    showCloseIcon?: boolean
+    closeOnEsc?: boolean
+    closeOnOverlay?: boolean
+    id?: string
+    className?: string
+}
+
+export type ReactModalProps = {
+    children?: React.ReactNode
+} & ModalProps
diff --git a/src/icons/close.svg b/src/icons/close.svg
new file mode 100644
index 0000000..88d02d9
--- /dev/null
+++ b/src/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+</svg>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2650672..8128531 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -137,6 +137,9 @@ const tabItems = [{
                 <Fragment set:html={logo} />
             </Menu>
         </CardWrapper>
+        <CardWrapper title="Modal" href="/modal">
+            <Button theme="outline">Trigger Modal</Button>
+        </CardWrapper>
         <CardWrapper title="Progress" href="/progress">
             <Progress value={33} />
         </CardWrapper>
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
new file mode 100644
index 0000000..a273eb4
--- /dev/null
+++ b/src/pages/modal.astro
@@ -0,0 +1,197 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroModal from '@components/Modal/Modal.astro'
+import SvelteModal from '@components/Modal/Modal.svelte'
+import ReactModal from '@components/Modal/Modal.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'modals',
+    components: [AstroModal, SvelteModal, ReactModal]
+})
+---
+
+<Layout>
+    <h1>Modal</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <Button theme="secondary" id="modal-btn-astro">
+                Trigger modal in Astro
+            </Button>
+
+            <AstroModal
+                title="Astro Modal"
+                subTitle="With a subtitle"
+                id="modal-astro"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
+                </p>
+
+                <Button id="modal-close-btn-astro">
+                    Close Modal
+                </Button>
+            </AstroModal>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <Button theme="alert" id="modal-btn-svelte">
+                Trigger modal in Svelte
+            </Button>
+
+            <SvelteModal
+                title="Svelte Modal"
+                subTitle="With a subtitle"
+                id="modal-svelte"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
+                </p>
+
+                <Button id="modal-close-btn-svelte">
+                    Close Modal
+                </Button>
+            </SvelteModal>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <Button theme="info" id="modal-btn-react">
+                Trigger modal in React
+            </Button>
+
+            <ReactModal
+                title="React Modal"
+                subTitle="With a subtitle"
+                id="modal-react"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
+                </p>
+
+                <Button id="modal-close-btn-react">
+                    Close Modal
+                </Button>
+            </ReactModal>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map((section, index) => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default modal with content">
+                <Button theme="secondary" id={`modal-btn-0${index}`}>
+                    Trigger
+                </Button>
+                <section.component id={`modal-0${index}`}>
+                    Modal with content only
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Modal with title">
+                <Button theme="secondary" id={`modal-btn-1${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-1${index}`}
+                    title="Information"
+                >
+                    Modal with a title
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Modal with title & sub title">
+                <Button theme="secondary" id={`modal-btn-2${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-2${index}`}
+                    title="Information"
+                    subTitle="Before continuing, please read carefully"
+                >
+                    Modal with title and sub title
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close on Esc">
+                <Button theme="secondary" id={`modal-btn-3${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-3${index}`}
+                    title="Modal"
+                    subTitle="No close on Esc"
+                    closeOnEsc={false}
+                >
+                    This modal cannot be closed by clicking the <code>esc</code> button.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close on overlay">
+                <Button theme="secondary" id={`modal-btn-4${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-4${index}`}
+                    title="Modal"
+                    subTitle="No close on overlay"
+                    closeOnOverlay={false}
+                >
+                    This modal cannot be closed by clicking the overlay.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close button">
+                <Button theme="secondary" id={`modal-btn-5${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-5${index}`}
+                    title="Modal"
+                    subTitle="No close button"
+                    showCloseIcon={false}
+                >
+                    This modal doesn't have a close button. It can only be closed by clicking on the overlay or using the <code>esc</code> button.
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<script>
+    import { modal, closeModal } from '@utils/modal'
+
+    const on = (element: string, callback: () => any) => {
+        document
+            .querySelector(element)
+            ?.addEventListener('click', callback)
+    }
+
+    const selectors = [
+        'astro',
+        'svelte',
+        'react'
+    ]
+
+    const ids = Array(5).fill(10).map((x, index) => x * (index + 1))
+    const variants = [
+        '00',
+        '01',
+        '02',
+        ...ids,
+        ...ids.map(x => x + 1),
+        ...ids.map(x => x + 2)
+    ]
+
+    selectors.forEach(selector => {
+        on(`#modal-btn-${selector}`, () => modal(`#modal-${selector}`))
+        on(`#modal-close-btn-${selector}`, () => closeModal(`#modal-${selector}`))
+    });
+
+    variants.forEach(variant => {
+        on(`#modal-btn-${variant}`, () => modal(`#modal-${variant}`))
+    })
+</script>
diff --git a/src/scss/config/color-palette.scss b/src/scss/config/color-palette.scss
index f2b19fa..522b297 100644
--- a/src/scss/config/color-palette.scss
+++ b/src/scss/config/color-palette.scss
@@ -20,4 +20,5 @@ $colorPalette: (
     'alert': var(--w-color-alert),
     'alert-accent': var(--w-color-alert-accent),
     'alert-fg': var(--w-color-alert-fg),
+    'overlay': var(--w-color-overlay)
 ) !default;
diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
index 098ac87..d921be7 100644
--- a/src/scss/global/theme.scss
+++ b/src/scss/global/theme.scss
@@ -25,6 +25,7 @@
             --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -52,6 +53,7 @@
             --w-color-alert: #de3233;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -79,6 +81,7 @@
             --w-color-alert: #ed3b3c;
             --w-color-alert-accent: #fb6161;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -106,6 +109,7 @@
             --w-color-alert: #bf6170;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -133,6 +137,7 @@
             --w-color-alert: #ff6188;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #000;
+            --w-color-overlay: #0000009e;
         }
     }
 
@@ -160,6 +165,7 @@
             --w-color-alert: #ff3333;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
+            --w-color-overlay: #0000009e;
         }
     }
 }
diff --git a/src/static/ComponentWrapper.astro b/src/static/ComponentWrapper.astro
index 807a419..30fae26 100644
--- a/src/static/ComponentWrapper.astro
+++ b/src/static/ComponentWrapper.astro
@@ -18,7 +18,7 @@ const {
 </Card>
 
 <style is:global>
-    .a strong {
+    .a > strong {
         background: #B545ED;
         background: linear-gradient(to right, #505FFF, #B545ED);
         background-clip: text;
@@ -26,11 +26,11 @@ const {
         -webkit-text-fill-color: transparent;
     }
     
-    .s strong {
+    .s > strong {
         color: #FF3E00;
     }
     
-    .r strong {
+    .r > strong {
         color: #61DAFB;
     }
 </style>
diff --git a/src/utils/modal.ts b/src/utils/modal.ts
new file mode 100644
index 0000000..d5aeb10
--- /dev/null
+++ b/src/utils/modal.ts
@@ -0,0 +1,60 @@
+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 = ''
+    }
+}

From 39f9bf8de305ba6ebbd09c13099e1b8532a738c3 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 6 Aug 2024 09:13:57 +0200
Subject: [PATCH 12/18] =?UTF-8?q?=E2=9C=A8=20Add=20Slider=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |   1 +
 scripts/buildTypes.js                    |   3 +-
 src/components/Slider/Slider.astro       |  42 +++++++++
 src/components/Slider/Slider.svelte      |  40 +++++++++
 src/components/Slider/Slider.tsx         |  46 ++++++++++
 src/components/Slider/slider.module.scss |  48 +++++++++++
 src/components/Slider/slider.ts          |  19 ++++
 src/pages/index.astro                    |   4 +
 src/pages/slider.astro                   | 105 +++++++++++++++++++++++
 src/pages/themes.astro                   |  12 +--
 src/playground/ReactPlayground.tsx       |  13 +++
 src/playground/SveltePlayground.svelte   |  13 +++
 src/playground/playground.module.scss    |   4 +
 src/scss/global/theme.scss               |   8 +-
 14 files changed, 348 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Slider/Slider.astro
 create mode 100644 src/components/Slider/Slider.svelte
 create mode 100644 src/components/Slider/Slider.tsx
 create mode 100644 src/components/Slider/slider.module.scss
 create mode 100644 src/components/Slider/slider.ts
 create mode 100644 src/pages/slider.astro

diff --git a/README.md b/README.md
index e371980..b09fde6 100644
--- a/README.md
+++ b/README.md
@@ -200,6 +200,7 @@ import { Accordion } from 'webcoreui/react'
 - [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)
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index 7378210..75eb0b2 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -27,7 +27,8 @@ const buildTypes = type => {
                 'Checkbox',
                 'Input',
                 'Radio',
-                'Switch'
+                'Switch',
+                'Slider'
             ]
     
             return componentsWithSvelteSpecificTypes.includes(component)
diff --git a/src/components/Slider/Slider.astro b/src/components/Slider/Slider.astro
new file mode 100644
index 0000000..d7f2296
--- /dev/null
+++ b/src/components/Slider/Slider.astro
@@ -0,0 +1,42 @@
+---
+import type { SliderProps } from './slider'
+
+import styles from './slider.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SliderProps {}
+
+const {
+    min,
+    max,
+    value,
+    step,
+    color,
+    background,
+    thumb,
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.slider,
+    className
+]
+
+const styleVariables = classNames([
+    color && `--w-slider-color: ${color};`,
+    background && `--w-slider-background: ${background};`,
+    thumb && `--w-slider-thumb: ${thumb};`
+])
+---
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    class:list={classes}
+    id={id}
+    style={styleVariables}
+/>
diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte
new file mode 100644
index 0000000..29a1b8f
--- /dev/null
+++ b/src/components/Slider/Slider.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { SvelteSliderProps } from './slider'
+
+    import styles from './slider.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let min: SvelteSliderProps['min'] = 0
+    export let max: SvelteSliderProps['max'] = 100
+    export let value: SvelteSliderProps['value'] = 0
+    export let step: SvelteSliderProps['step'] = 1
+    export let color: SvelteSliderProps['color'] = ''
+    export let background: SvelteSliderProps['background'] = ''
+    export let thumb: SvelteSliderProps['thumb'] = ''
+    export let id: SvelteSliderProps['id'] = ''
+    export let className: SvelteSliderProps['className'] = ''
+    export let onChange: SvelteSliderProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = classNames([
+        color && `--w-slider-color: ${color};`,
+        background && `--w-slider-background: ${background};`,
+        thumb && `--w-slider-thumb: ${thumb};`
+    ])
+</script>
+
+<input
+    type="range"
+    min={min}
+    max={max}
+    value={value || min}
+    step={step}
+    class={classes}
+    id={id}
+    style={styleVariables}
+    on:change={onChange}
+/>
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000..d310201
--- /dev/null
+++ b/src/components/Slider/Slider.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import type { ReactSliderProps } from './slider'
+
+import styles from './slider.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Slider = ({
+    min,
+    max,
+    value,
+    step,
+    color,
+    background,
+    thumb,
+    id,
+    className,
+    onChange
+}: ReactSliderProps) => {
+    const classes = classNames([
+        styles.slider,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-slider-color': color }),
+        ...(background && { '--w-slider-background': background }),
+        ...(thumb && { '--w-slider-thumb': thumb })
+    } as React.CSSProperties
+
+    return (
+        <input
+            type="range"
+            min={min}
+            max={max}
+            defaultValue={value || min}
+            step={step}
+            className={classes}
+            id={id}
+            style={styleVariables}
+            onChange={onChange}
+        />
+
+    )
+}
+
+export default Slider
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
new file mode 100644
index 0000000..f2b209b
--- /dev/null
+++ b/src/components/Slider/slider.module.scss
@@ -0,0 +1,48 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+}
+
+.slider {
+    @include border-radius(xl);
+    @include size('w100%');
+    @include visibility(hidden);
+    @include size(h10px);
+    @include spacing(m0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+.slider::-webkit-slider-runnable-track {
+    @include background(var(--w-slider-background));
+}
+
+.slider::-moz-range-track {
+    @include background(var(--w-slider-background));
+    @include size(h10px);
+}
+
+.slider::-webkit-slider-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: -405px 0 0 400px var(--w-slider-color);
+}
+
+.slider::-moz-range-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    box-shadow: -405px 0 0 400px var(--w-slider-color);
+}
diff --git a/src/components/Slider/slider.ts b/src/components/Slider/slider.ts
new file mode 100644
index 0000000..c617439
--- /dev/null
+++ b/src/components/Slider/slider.ts
@@ -0,0 +1,19 @@
+export type SliderProps = {
+    min: number
+    max: number
+    value?: number
+    step?: number
+    id?: string
+    color?: string
+    background?: string
+    thumb?: string
+    className?: string
+}
+
+export type SvelteSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps
+
+export type ReactSliderProps = {
+    onChange?: (e: any) => any
+} & SliderProps
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8128531..7f17d3c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,6 +15,7 @@ import Menu from '@components/Menu/Menu.astro'
 import Progress from '@components/Progress/Progress.astro'
 import Radio from '@components/Radio/Radio.astro'
 import Rating from '@components/Rating/Rating.astro'
+import Slider from '@components/Slider/Slider.astro'
 import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
 import Table from '@components/Table/Table.astro'
@@ -152,6 +153,9 @@ const tabItems = [{
         <CardWrapper title="Rating" href="/rating">
             <Rating score={4} />
         </CardWrapper>
+        <CardWrapper title="Slider" href="/slider">
+            <Slider min={0} max={100} value={50} />
+        </CardWrapper>
         <CardWrapper title="Spinner" href="/spinner">
             <Spinner />
         </CardWrapper>
diff --git a/src/pages/slider.astro b/src/pages/slider.astro
new file mode 100644
index 0000000..05691ff
--- /dev/null
+++ b/src/pages/slider.astro
@@ -0,0 +1,105 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroSlider from '@components/Slider/Slider.astro'
+import SvelteSlider from '@components/Slider/Slider.svelte'
+import ReactSlider from '@components/Slider/Slider.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'sliders',
+    components: [AstroSlider, SvelteSlider, ReactSlider],
+    showSubTitle: true
+})
+---
+
+<Layout>
+    <h1>Slider</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroSlider min={0} max={100} value={50} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteSlider min={0} max={100} value={50} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactSlider min={0} max={100} value={50}  />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default with no value">
+                <section.component min={0} max={100}  />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With default value">
+                <section.component min={0} max={100} value={33}  />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With steps">
+                <section.component
+                    min={0}
+                    max={100}
+                    step={20}
+                    value={20} 
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With custom colors">
+                <section.component
+                    min={0}
+                    max={100}
+                    value={50}
+                    color="var(--w-color-success)"
+                    background="var(--w-color-primary-60)"
+                    thumb="var(--w-color-primary)"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label">
+                <div class="flex items-center xs">
+                    <section.component
+                        min={0}
+                        max={100}
+                        value={20}
+                        className="labelled"
+                    />
+                    <span class="muted">20</span>
+                </div>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label on top">
+                <span class="muted">40</span>
+                <section.component
+                    min={0}
+                    max={100}
+                    value={40}
+                    className="labelled1"
+                />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<script>
+    const slider1 = document.querySelector('.labelled')
+    const slider2 = document.querySelector('.labelled1');
+
+    slider1?.addEventListener('change', (e: any) => {
+        e.target.nextElementSibling.innerText = e.target.value
+    })
+
+    slider2?.addEventListener('change', (e: any) => {
+        e.target.previousElementSibling.innerText = e.target.value
+    })
+
+</script>
diff --git a/src/pages/themes.astro b/src/pages/themes.astro
index 20ffcc4..e8ec20a 100644
--- a/src/pages/themes.astro
+++ b/src/pages/themes.astro
@@ -4,6 +4,7 @@ import Examples from '@static/Examples.astro'
 import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.astro'
 import Button from '@components/Button/Button.astro'
 import Toast from '@components/Toast/Toast.astro'
+import Slider from '@components/Slider/Slider.astro'
 
 import { themes } from '@data'
 ---
@@ -15,9 +16,8 @@ import { themes } from '@data'
 
     <div class="flex sm justify-center my column">
         <label class="flex column none">
-            <span class="muted">Radius</span>
-            <input
-                type="range"
+            <div class="muted">Radius</div>
+            <Slider
                 min={0}
                 max={100}
                 value={50}
@@ -85,8 +85,10 @@ import { themes } from '@data'
 </script>
 
 <style lang="scss">
-    input {
-        margin: 0;
+    @import '../scss/config.scss';
+
+    .muted {
+        @include spacing(mb-xs);
     }
 
     .flex {
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 24f8b0f..2ee21a8 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -10,6 +10,7 @@ import Icon from '@components/Icon/Icon.tsx'
 import Input from '@components/Input/Input.tsx'
 import Progress from '@components/Progress/Progress.tsx'
 import Radio from '@components/Radio/Radio.tsx'
+import Slider from '@components/Slider/Slider.tsx'
 import Switch from '@components/Switch/Switch.tsx'
 import Tabs from '@components/Tabs/Tabs.tsx'
 import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.tsx'
@@ -26,6 +27,7 @@ const ReactPlayground = () => {
     const [radio, setRadio] = useState('')
     const [toggle, setToggle] = useState(false)
     const [input, setInput] = useState('')
+    const [slider, setSlider] = useState(50)
 
     return (
         <div className="grid md-2 lg-3">
@@ -136,6 +138,17 @@ const ReactPlayground = () => {
                 />
             </Card>
 
+            <Card title="Slider">
+                <Slider
+                    min={0}
+                    max={100}
+                    value={slider}
+                    onChange={e => setSlider(e.target.value)}
+                    className={styles.mt}
+                />
+                <span className={styles.span}>{slider}</span>
+            </Card>
+
             <Toast title="Badge toast" id="badgeToast">
                 👋 Clicked on badge toast
             </Toast>
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 4765477..1d455b9 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -9,6 +9,7 @@
     import Input from '@components/Input/Input.svelte'
     import Progress from '@components/Progress/Progress.svelte'
     import Radio from '@components/Radio/Radio.svelte'
+    import Slider from '@components/Slider/Slider.svelte'
     import Switch from '@components/Switch/Switch.svelte'
     import Tabs from '@components/Tabs/Tabs.svelte'
     import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.svelte'
@@ -24,6 +25,7 @@
     let radio = ''
     let toggle = false
     let input = ''
+    let slider = 50
 </script>
 
 <div class="playground grid md-2 lg-3">
@@ -131,6 +133,17 @@
             <Icon type="sun" slot="secondaryIcon" />
         </ThemeSwitcher>
     </Card>
+
+    <Card title="Slider">
+        <Slider
+            min={0}
+            max={100}
+            value={slider}
+            onChange={e => slider = e.target.value}
+            className={styles.mt}
+        />
+        <span class={styles.span}>{slider}</span>
+    </Card>
 </div>
 
 <Toast title="Badge toast" id="badgeToast">
diff --git a/src/playground/playground.module.scss b/src/playground/playground.module.scss
index ffdd46d..ef5be54 100644
--- a/src/playground/playground.module.scss
+++ b/src/playground/playground.module.scss
@@ -5,3 +5,7 @@
     color: var(--w-color-primary-20);
     font-size: 14px;
 }
+
+.mt {
+    margin-top: 20px;
+}
diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
index d921be7..7666897 100644
--- a/src/scss/global/theme.scss
+++ b/src/scss/global/theme.scss
@@ -81,7 +81,7 @@
             --w-color-alert: #ed3b3c;
             --w-color-alert-accent: #fb6161;
             --w-color-alert-fg: #FFF;
-            --w-color-overlay: #0000009e;
+            --w-color-overlay: #0017239e;
         }
     }
 
@@ -146,8 +146,8 @@
             --w-color-scheme: dark;
             --w-color-primary: #FFF;
             --w-color-primary-10: #EEE;
-            --w-color-primary-20: #fad1ba;
-            --w-color-primary-30: #a8b6de;
+            --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;
@@ -165,7 +165,7 @@
             --w-color-alert: #ff3333;
             --w-color-alert-accent: #EE5253;
             --w-color-alert-fg: #FFF;
-            --w-color-overlay: #0000009e;
+            --w-color-overlay: #13002cc2;
         }
     }
 }

From 6a386efecc4c02edbb969477b12b4ca6286dba67 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 14:54:11 +0200
Subject: [PATCH 13/18] =?UTF-8?q?=F0=9F=90=9B=20Fix=20tooltip=20and=20time?=
 =?UTF-8?q?line=20alignment=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Timeline/timeline.module.scss |  8 ++++----
 src/pages/tooltip.astro                      | 18 +++++++++---------
 src/scss/global/tooltip.scss                 |  6 ++++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/Timeline/timeline.module.scss b/src/components/Timeline/timeline.module.scss
index eb6e344..83e1513 100644
--- a/src/components/Timeline/timeline.module.scss
+++ b/src/components/Timeline/timeline.module.scss
@@ -28,11 +28,11 @@ body {
         left: $leftOffset
     }
 
-    &.fill li::before {
+    &.fill > li::before {
         content: '';
     }
 
-    &.stroke li::before {
+    &.stroke > li::before {
         @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
@@ -47,7 +47,7 @@ body {
                 left: calc(50% - 1px);
             }
     
-            li {
+            > li {
                 @include size('w50%');
     
                 &:nth-child(odd) {
@@ -69,7 +69,7 @@ body {
             }
         }
     
-        &.centered li:nth-child(odd) {
+        &.centered > li:nth-child(odd) {
             @include typography(right);
         }
     }
diff --git a/src/pages/tooltip.astro b/src/pages/tooltip.astro
index 1c5af9c..0a1badb 100644
--- a/src/pages/tooltip.astro
+++ b/src/pages/tooltip.astro
@@ -14,13 +14,13 @@ const tooltipStyle = [
     <h1>Tooltip</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper title="Default">
-            <p data-tooltip="Tooltip content">Default tooltip</p>
+            <span data-tooltip="Tooltip content">Default tooltip</span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Custom color">
-            <p data-tooltip="Tooltip content" style={tooltipStyle}>
+            <span data-tooltip="Tooltip content" style={tooltipStyle}>
                 Colored tooltip
-            </p>
+            </span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Tooltip on button">
@@ -30,21 +30,21 @@ const tooltipStyle = [
         </ComponentWrapper>
 
         <ComponentWrapper title="Bottom position">
-            <p data-tooltip="Tooltip content" data-position="bottom">
+            <span data-tooltip="Tooltip content" data-position="bottom">
                 Bottom tooltip
-            </p>
+            </span>
         </ComponentWrapper>
         
         <ComponentWrapper title="Left position">
-            <p data-tooltip="Tooltip content" data-position="left">
+            <span data-tooltip="Tooltip content" data-position="left">
                 Left tooltip
-            </p>
+            </span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Right position">
-            <p data-tooltip="Tooltip content" data-position="right">
+            <span data-tooltip="Tooltip content" data-position="right">
                 Right tooltip
-            </p>
+            </span>
         </ComponentWrapper>
     </div>
 </Layout>
diff --git a/src/scss/global/tooltip.scss b/src/scss/global/tooltip.scss
index 0391aa8..14b3d87 100644
--- a/src/scss/global/tooltip.scss
+++ b/src/scss/global/tooltip.scss
@@ -8,6 +8,8 @@
 
     [data-tooltip] {
         @include position(relative);
+        @include typography(normal);
+
         display: inline-block;
 
         &::before,
@@ -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%);
             }

From 98e95e7dcdbcafd1e3f048279d467ba0cfeff08d Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 14:54:49 +0200
Subject: [PATCH 14/18] =?UTF-8?q?=E2=9C=A8=20Add=20disabled=20state=20to?=
 =?UTF-8?q?=20sliders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  5 +++++
 src/components/Slider/Slider.astro       |  2 ++
 src/components/Slider/Slider.svelte      |  6 ++++--
 src/components/Slider/Slider.tsx         |  2 ++
 src/components/Slider/slider.module.scss | 24 ++++++++++++++++++++++--
 src/components/Slider/slider.ts          |  3 ++-
 src/pages/slider.astro                   | 10 +++++++++-
 7 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index b09fde6..26450f0 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,11 @@ html body {
     --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;
diff --git a/src/components/Slider/Slider.astro b/src/components/Slider/Slider.astro
index d7f2296..1048353 100644
--- a/src/components/Slider/Slider.astro
+++ b/src/components/Slider/Slider.astro
@@ -11,6 +11,7 @@ const {
     max,
     value,
     step,
+    disabled,
     color,
     background,
     thumb,
@@ -36,6 +37,7 @@ const styleVariables = classNames([
     max={max}
     value={value || min}
     step={step}
+    disabled={disabled}
     class:list={classes}
     id={id}
     style={styleVariables}
diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte
index 29a1b8f..a4b4bf0 100644
--- a/src/components/Slider/Slider.svelte
+++ b/src/components/Slider/Slider.svelte
@@ -8,6 +8,7 @@
     export let max: SvelteSliderProps['max'] = 100
     export let value: SvelteSliderProps['value'] = 0
     export let step: SvelteSliderProps['step'] = 1
+    export let disabled: SvelteSliderProps['disabled'] = false
     export let color: SvelteSliderProps['color'] = ''
     export let background: SvelteSliderProps['background'] = ''
     export let thumb: SvelteSliderProps['thumb'] = ''
@@ -33,8 +34,9 @@
     max={max}
     value={value || min}
     step={step}
+    disabled={disabled}
     class={classes}
-    id={id}
-    style={styleVariables}
+    id={id || null}
+    style={styleVariables || null}
     on:change={onChange}
 />
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index d310201..75cbbf6 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -9,6 +9,7 @@ const Slider = ({
     max,
     value,
     step,
+    disabled,
     color,
     background,
     thumb,
@@ -34,6 +35,7 @@ const Slider = ({
             max={max}
             defaultValue={value || min}
             step={step}
+            disabled={disabled}
             className={classes}
             id={id}
             style={styleVariables}
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
index f2b209b..8e56d38 100644
--- a/src/components/Slider/slider.module.scss
+++ b/src/components/Slider/slider.module.scss
@@ -16,6 +16,26 @@ body {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
 }
 
 .slider::-webkit-slider-runnable-track {
@@ -35,7 +55,7 @@ body {
 
     -webkit-appearance: none;
     appearance: none;
-    box-shadow: -405px 0 0 400px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
 }
 
 .slider::-moz-range-thumb {
@@ -44,5 +64,5 @@ body {
     @include border-radius(max);
     @include border(var(--w-slider-color));
 
-    box-shadow: -405px 0 0 400px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
 }
diff --git a/src/components/Slider/slider.ts b/src/components/Slider/slider.ts
index c617439..20b28e1 100644
--- a/src/components/Slider/slider.ts
+++ b/src/components/Slider/slider.ts
@@ -3,10 +3,11 @@ export type SliderProps = {
     max: number
     value?: number
     step?: number
-    id?: string
+    disabled?: boolean
     color?: string
     background?: string
     thumb?: string
+    id?: string
     className?: string
 }
 
diff --git a/src/pages/slider.astro b/src/pages/slider.astro
index 05691ff..eba4f2d 100644
--- a/src/pages/slider.astro
+++ b/src/pages/slider.astro
@@ -86,6 +86,15 @@ const sections = getSections({
                     className="labelled1"
                 />
             </ComponentWrapper>
+
+            <ComponentWrapper title="Disabled">
+                <section.component
+                    min={0}
+                    max={100}
+                    value={40}
+                    disabled={true}
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -101,5 +110,4 @@ const sections = getSections({
     slider2?.addEventListener('change', (e: any) => {
         e.target.previousElementSibling.innerText = e.target.value
     })
-
 </script>

From be43fe96547703810bdbe02733a2b3789839e38a Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 14:55:09 +0200
Subject: [PATCH 15/18] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Reorder=20mixins=20a?=
 =?UTF-8?q?lphabetically?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Checkbox/checkbox.module.scss |   4 +-
 src/scss/config/mixins.scss                  | 307 +++++++++----------
 2 files changed, 154 insertions(+), 157 deletions(-)

diff --git a/src/components/Checkbox/checkbox.module.scss b/src/components/Checkbox/checkbox.module.scss
index 07da0c6..d85aa39 100644
--- a/src/components/Checkbox/checkbox.module.scss
+++ b/src/components/Checkbox/checkbox.module.scss
@@ -34,8 +34,8 @@ body {
         }
 
         &:disabled + span {
-            @include background(primary-40);
-            @include border(primary-40);
+            @include background(primary-30);
+            @include border(primary-30);
             cursor: no-drop;
         }
     }
diff --git a/src/scss/config/mixins.scss b/src/scss/config/mixins.scss
index b2e2e5c..e1c08b9 100644
--- a/src/scss/config/mixins.scss
+++ b/src/scss/config/mixins.scss
@@ -3,27 +3,6 @@
 @use 'sass:list';
 @use 'sass:string';
 
-@mixin transition($args...) {
-    $property: all;
-    $speed: .3s;
-
-    @each $arg in $args {
-        @if (meta.type-of($arg) == 'number') {
-            $speed: $arg;
-        } @else {
-            $property: $arg;
-        }
-    }
-
-    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-@mixin media($breakpoint: 'xs') {
-    @media (min-width: #{map.get($breakpoints, $breakpoint)}) {
-        @content;
-    }
-}
-
 @mixin background($arg) {
     background: map.get($colorPalette, '#{$arg}') or $arg;
 }
@@ -71,122 +50,95 @@
 @mixin border-radius($args...) {
     $borderRadius: map.get($radius, 'md');
     $position: null;
-    $side: (
-        top: ('top-left', 'top-right'),
-        bottom: ('bottom-left', 'bottom-right'),
-        left: ('top-left', 'bottom-left'),
-        right: ('top-right', 'bottom-right')
-    );
-
+  
     @each $arg in $args {
-        @if (map.get($radius, $arg)) {
-            $borderRadius: map.get($radius, $arg);
-        }
-
-        @if (map.get($side, $arg)) {
-            $position: map.get($side, $arg);
-        }
+      @if (map.get($radius, $arg)) {
+        $borderRadius: map.get($radius, $arg);
+      }
+  
+      $side: (
+        top: $borderRadius $borderRadius 0 0,
+        bottom: 0 0 $borderRadius $borderRadius,
+        left: $borderRadius 0 0 $borderRadius,
+        right: 0 $borderRadius $borderRadius 0,
+        diagonal: $borderRadius 0,
+        reverse-diagonal: 0 $borderRadius
+      );
+  
+      @if (map.get($side, $arg)) {
+        $position: map.get($side, $arg);
+      }
     }
+  
+    border-radius: $position or $borderRadius;
+  }
 
-    @if ($position) {
-        @each $key in $position {
-            border-#{$key}-radius: $borderRadius;
-        }
-    } @else {
-        border-radius: $borderRadius;
-    }
+@mixin layer($stack: 'default') {
+    z-index: #{map.get($layers, $stack)};
 }
 
-@mixin visibility($args...) {        
+@mixin layout($args...) {
+    $layouts: (flex, inline-flex, grid, inline-grid);
+    $alignments: (
+        vertical: (
+            'v-center': center,
+            'v-start': flex-start,
+            'v-end': flex-end,
+            'v-baseline': baseline,
+            'v-stretch': stretch
+        ),
+        horizontal: (
+            'h-center': center,
+            'h-start': flex-start,
+            'h-end': flex-end,
+            'h-between': space-between,
+            'h-around': space-around,
+            'h-evenly': space-evenly,
+            'h-stretch': stretch
+        )
+    );
+
     @each $arg in $args {
-        @if list.index($displayValues, $arg) {
+        @if (list.index($layouts, $arg)) {
             display: $arg;
         }
 
-        @if list.index($overflowValues, $arg) {
-            overflow: $arg;
-        }
-
-        @if (meta.type-of($arg) == 'number') {
-            opacity: $arg;
+        @if (map.get($spacing, $arg)) {
+            gap: map.get($spacing, $arg);
         }
-    }
-}
-
-@mixin layer($stack: 'default') {
-    z-index: #{map.get($layers, $stack)};
-}
-
-@mixin size($args...) {
-    $singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
-    $isSingle: list.length($args) == 1
-        and $singlePrefix != 'w'
-        and $singlePrefix != 'h';
-
-    @if ($isSingle) {
-        width: $args;
-        height: $args;
-    } @else {
-        @each $arg in $args {
-            @if (meta.type-of($arg) == string) {
-                $prefix: string.slice($arg, 1, 1);
-                $value: string.slice($arg, 2, -1);
 
-                @if ($prefix == 'w') {
-                    width: string.unquote($value);
-                }
-
-                @if ($prefix == 'h') {
-                    height: string.unquote($value);
-                }
-            } @else {
-                @if (index($args, $arg) == 1) {
-                    width: $arg;
-                }
+        @if (meta.type-of($arg) == 'string') {
+            @if (string.index($arg, 'v-')) {
+                align-items: map.get(map.get($alignments, vertical), $arg)
+            }
     
-                @if (index($args, $arg) == 2) {
-                    height: $arg;
-                }
+            @if (string.index($arg, 'h-')) {
+                justify-content: map.get(map.get($alignments, horizontal), $arg)
             }
         }
-    }
-}
-
-@mixin typography($args...) {
-    @each $arg in $args {
-        $color: map.get($colorPalette, '#{$arg}');
-        $type: map.get($fontTypes, '#{$arg}');
-        $size: map.get($fontSizes, '#{$arg}');
-        $height: map.get($lineHeights, '#{$arg}');
-        $decoration: map.get($decorations, '#{$arg}');
-
-        @if ($color) {
-            color: $color;
-        }
-
-        @if ($type) {
-            font-family: $type;
-        }
 
-        @if ($size) {
-            font-size: $size;
+        @if ($arg == 'center') {
+            align-items: center;
+            justify-content: center;
         }
 
-        @if list.index($fontWeights, $arg) {
-            font-weight: $arg;
+        @if (list.index($flexDirectionValues, $arg)) {
+            flex-direction: $arg;
         }
 
-        @if list.index($textAlignValues, $arg) {
-            text-align: $arg;
+        @if (meta.type-of($arg) == 'number') {
+            grid-template-columns: repeat($arg, minmax(0, 1fr));
         }
 
-        @if ($decoration) {
-            text-decoration: $decoration;
+        @if (list.index($flexWrapValues, $arg)) {
+            flex-wrap: $arg;
         }
+    }
+}
 
-        @if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
-            line-height: $height or $arg;
-        }
+@mixin media($breakpoint: 'xs') {
+    @media (min-width: #{map.get($breakpoints, $breakpoint)}) {
+        @content;
     }
 }
 
@@ -230,6 +182,41 @@
     }
 }
 
+@mixin size($args...) {
+    $singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
+    $isSingle: list.length($args) == 1
+        and $singlePrefix != 'w'
+        and $singlePrefix != 'h';
+
+    @if ($isSingle) {
+        width: $args;
+        height: $args;
+    } @else {
+        @each $arg in $args {
+            @if (meta.type-of($arg) == string) {
+                $prefix: string.slice($arg, 1, 1);
+                $value: string.slice($arg, 2, -1);
+
+                @if ($prefix == 'w') {
+                    width: string.unquote($value);
+                }
+
+                @if ($prefix == 'h') {
+                    height: string.unquote($value);
+                }
+            } @else {
+                @if (index($args, $arg) == 1) {
+                    width: $arg;
+                }
+    
+                @if (index($args, $arg) == 2) {
+                    height: $arg;
+                }
+            }
+        }
+    }
+}
+
 @mixin spacing($args...) {
     $margin: (0 0 0 0);
     $padding: (0 0 0 0);
@@ -342,61 +329,71 @@
     }
 }
 
-@mixin layout($args...) {
-    $layouts: (flex, inline-flex, grid, inline-grid);
-    $alignments: (
-        vertical: (
-            'v-center': center,
-            'v-start': flex-start,
-            'v-end': flex-end,
-            'v-baseline': baseline,
-            'v-stretch': stretch
-        ),
-        horizontal: (
-            'h-center': center,
-            'h-start': flex-start,
-            'h-end': flex-end,
-            'h-between': space-between,
-            'h-around': space-around,
-            'h-evenly': space-evenly,
-            'h-stretch': stretch
-        )
-    );
+@mixin transition($args...) {
+    $property: all;
+    $speed: .3s;
 
     @each $arg in $args {
-        @if (list.index($layouts, $arg)) {
-            display: $arg;
+        @if (meta.type-of($arg) == 'number') {
+            $speed: $arg;
+        } @else {
+            $property: $arg;
         }
+    }
 
-        @if (map.get($spacing, $arg)) {
-            gap: map.get($spacing, $arg);
+    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@mixin typography($args...) {
+    @each $arg in $args {
+        $color: map.get($colorPalette, '#{$arg}');
+        $type: map.get($fontTypes, '#{$arg}');
+        $size: map.get($fontSizes, '#{$arg}');
+        $height: map.get($lineHeights, '#{$arg}');
+        $decoration: map.get($decorations, '#{$arg}');
+
+        @if ($color) {
+            color: $color;
         }
 
-        @if (meta.type-of($arg) == 'string') {
-            @if (string.index($arg, 'v-')) {
-                align-items: map.get(map.get($alignments, vertical), $arg)
-            }
-    
-            @if (string.index($arg, 'h-')) {
-                justify-content: map.get(map.get($alignments, horizontal), $arg)
-            }
+        @if ($type) {
+            font-family: $type;
         }
 
-        @if ($arg == 'center') {
-            align-items: center;
-            justify-content: center;
+        @if ($size) {
+            font-size: $size;
         }
 
-        @if (list.index($flexDirectionValues, $arg)) {
-            flex-direction: $arg;
+        @if list.index($fontWeights, $arg) {
+            font-weight: $arg;
         }
 
-        @if (meta.type-of($arg) == 'number') {
-            grid-template-columns: repeat($arg, minmax(0, 1fr));
+        @if list.index($textAlignValues, $arg) {
+            text-align: $arg;
         }
 
-        @if (list.index($flexWrapValues, $arg)) {
-            flex-wrap: $arg;
+        @if ($decoration) {
+            text-decoration: $decoration;
+        }
+
+        @if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
+            line-height: $height or $arg;
+        }
+    }
+}
+
+@mixin visibility($args...) {        
+    @each $arg in $args {
+        @if list.index($displayValues, $arg) {
+            display: $arg;
+        }
+
+        @if list.index($overflowValues, $arg) {
+            overflow: $arg;
+        }
+
+        @if (meta.type-of($arg) == 'number') {
+            opacity: $arg;
         }
     }
 }

From e93f27625781e4bf11d5bf57998bad6ef519e304 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 14:55:37 +0200
Subject: [PATCH 16/18] =?UTF-8?q?=E2=9C=A8=20Add=20support=20for=20scrolla?=
 =?UTF-8?q?ble=20tables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/Table.astro       |  7 +++++-
 src/components/Table/Table.svelte      |  4 +++-
 src/components/Table/Table.tsx         |  8 ++++++-
 src/components/Table/table.module.scss | 10 +++++++++
 src/components/Table/table.ts          |  1 +
 src/pages/table.astro                  | 31 ++++++++++++++++++++++++++
 6 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.astro b/src/components/Table/Table.astro
index d1435f0..3f01a49 100644
--- a/src/components/Table/Table.astro
+++ b/src/components/Table/Table.astro
@@ -12,6 +12,7 @@ const {
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 } = Astro.props
 
@@ -21,11 +22,15 @@ const classes = [
     striped && styles[`striped-${striped}s`],
     offsetStripe && styles.offset,
     compact && styles.compact,
+    maxHeight && styles.scroll,
     className
 ]
 ---
 
-<div class:list={classes}>
+<div
+    class:list={classes}
+    style={maxHeight ? `max-height:${maxHeight}` : undefined}
+>
     <table>
         {headings?.length && (
             <thead>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 292398a..67a1b81 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -11,6 +11,7 @@
     export let striped: TableProps['striped'] = null
     export let offsetStripe: TableProps['offsetStripe'] = false
     export let compact: TableProps['compact'] = false
+    export let maxHeight: TableProps['maxHeight'] = 0
     export let className: TableProps['className'] = ''
 
     const classes = classNames([
@@ -19,11 +20,12 @@
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 </script>
 
-<div class={classes}>
+<div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
     <table>
         {#if headings?.length}
             <thead>
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 5d60599..d86ac92 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -12,6 +12,7 @@ const Table = ({
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 }: TableProps) => {
     const classes = classNames([
@@ -20,11 +21,16 @@ const Table = ({
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 
+    const styleVariables = {
+        ...(maxHeight && { 'max-height': maxHeight })
+    } as React.CSSProperties
+
     return (
-        <div className={classes}>
+        <div className={classes} style={styleVariables}>
             <table>
                 {headings?.length && (
                     <thead>
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
index 63e10b1..2de6c62 100644
--- a/src/components/Table/table.module.scss
+++ b/src/components/Table/table.module.scss
@@ -57,4 +57,14 @@
             @include spacing(py-xxs, px-sm);
         }
     }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
+        }
+    }
 }
diff --git a/src/components/Table/table.ts b/src/components/Table/table.ts
index 947680b..dfe0e35 100644
--- a/src/components/Table/table.ts
+++ b/src/components/Table/table.ts
@@ -6,5 +6,6 @@ export type TableProps = {
     striped?: 'column' | 'row' | null
     offsetStripe?: boolean
     compact?: boolean
+    maxHeight?: number
     className?: string
 }
diff --git a/src/pages/table.astro b/src/pages/table.astro
index 144dd72..280b0de 100644
--- a/src/pages/table.astro
+++ b/src/pages/table.astro
@@ -46,6 +46,29 @@ const overflowTable = {
         '✅'
     ]),
 }
+
+const scrollTable = {
+    headings: ['Keyword', 'CSS'],
+    data: [
+        ['none', '0'],
+        ['xxs', '2px'],
+        ['xs', '5px'],
+        ['sm', '10px'],
+        ['md', '15px'],
+        ['default', '20px'],
+        ['lg', '25px'],
+        ['xl', '30px'],
+        ['2xl', '35px'],
+        ['3xl', '40px'],
+        ['4xl', '45px'],
+        ['5xl', '50px'],
+        ['6xl', '55px'],
+        ['7xl', '60px'],
+        ['8xl', '65px'],
+        ['9xl', '70px'],
+        ['10xl', '75px']
+    ]
+}
 ---
 
 <Layout>
@@ -148,6 +171,14 @@ const overflowTable = {
                     striped="column"
                 />
             </ComponentWrapper>
+
+            <ComponentWrapper title="Scroll table">
+                <section.component
+                    {...scrollTable}
+                    maxHeight="250px"
+                    striped="column"
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>

From c9f8f1fe463aee1392a6e8982e18869b848d80be Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 15:29:25 +0200
Subject: [PATCH 17/18] =?UTF-8?q?=E2=9C=A8=20Add=20Modal=20themes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.astro       | 24 ++++++++++-
 src/components/Modal/Modal.svelte      | 21 ++++++++-
 src/components/Modal/Modal.tsx         | 23 +++++++++-
 src/components/Modal/modal.module.scss | 38 +++++++++++++++-
 src/components/Modal/modal.ts          |  5 +++
 src/pages/modal.astro                  | 60 +++++++++++++++++++++++++-
 6 files changed, 165 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/Modal.astro b/src/components/Modal/Modal.astro
index e79dd4a..dbf5913 100644
--- a/src/components/Modal/Modal.astro
+++ b/src/components/Modal/Modal.astro
@@ -1,18 +1,32 @@
 ---
 import type { ModalProps } from './modal'
-import styles from './modal.module.scss'
 
 import Button from '../Button/Button.astro'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
 import closeIcon from '../../icons/close.svg?raw'
 
+import styles from './modal.module.scss'
+
 interface Props extends ModalProps {}
 
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
 const {
     title,
     subTitle,
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    theme,
     id,
     className
 } = Astro.props
@@ -25,6 +39,7 @@ const close = [
 
 const classes = [
     styles.modal,
+    theme && styles[theme],
     className
 ]
 ---
@@ -43,7 +58,12 @@ const classes = [
             <Fragment set:html={closeIcon} />
         </Button>
     )}
-    {title && <strong class={styles.title}>{title}</strong>}
+    {title && (
+        <strong class={styles.title}>
+            {theme && <Fragment set:html={iconMap[theme]} />}
+            {title}
+        </strong>
+    )}
     {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
     <slot />
 </dialog>
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
index 194d83c..a0dc022 100644
--- a/src/components/Modal/Modal.svelte
+++ b/src/components/Modal/Modal.svelte
@@ -5,6 +5,11 @@
     import { classNames } from '../../utils/classNames'
 
     import Button from '../Button/Button.svelte'
+
+    import info from '../../icons/info.svg?raw'
+    import success from '../../icons/circle-check.svg?raw'
+    import warning from '../../icons/warning.svg?raw'
+    import alert from '../../icons/alert.svg?raw'
     import closeIcon from '../../icons/close.svg?raw'
 
     export let title: ModalProps['title'] = ''
@@ -12,11 +17,20 @@
     export let showCloseIcon: ModalProps['showCloseIcon'] = true
     export let closeOnEsc: ModalProps['closeOnEsc'] = true
     export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let theme: ModalProps['theme'] = null
     export let id : ModalProps['className'] = ''
     export let className: ModalProps['className'] = ''
 
+    const iconMap = {
+        info,
+        success,
+        warning,
+        alert
+    }
+
     const classes = classNames([
         styles.modal,
+        theme && styles[theme],
         className
     ])
 
@@ -42,7 +56,12 @@
         </Button>
     {/if}
     {#if title}
-        <strong class={styles.title}>{title}</strong>
+        <strong class={styles.title}>
+            {#if theme}
+                {@html iconMap[theme]}
+            {/if}
+            {title}
+        </strong>
     {/if}
     {#if subTitle}
         <div class={styles.subTitle}>{subTitle}</div>
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 297f443..72959c6 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -5,20 +5,34 @@ import styles from './modal.module.scss'
 import { classNames } from '../../utils/classNames'
 
 import Button from '../Button/Button.tsx'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
 import closeIcon from '../../icons/close.svg?raw'
 
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
 const Modal = ({
     title,
     subTitle,
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    theme,
     id,
     className,
     children
 }: ReactModalProps) => {
     const classes = classNames([
         styles.modal,
+        theme && styles[theme],
         className
     ])
 
@@ -43,7 +57,14 @@ const Modal = ({
                         dangerouslySetInnerHTML={{ __html: closeIcon }}
                     />
                 )}
-                {title && <strong className={styles.title}>{title}</strong>}
+                {title && (
+                    <strong
+                        className={styles.title}
+                        dangerouslySetInnerHTML={{
+                            __html: theme ? iconMap[theme] + title : title
+                        }}
+                    />
+                )}
                 {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
                 {children}
             </dialog>
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 0170686..d799e4c 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -40,13 +40,49 @@
     .title {
         @include typography(lg);
         @include spacing(mb-xs);
-        display: block;
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
     }
 
     .subTitle {
         @include typography(primary-20);
         @include spacing(mb-xs);
     }
+
+    &.info {
+        @include border(info);
+
+        .title {
+            @include typography(info);
+        }
+    }
+
+    &.success {
+        @include border(success);
+
+        .title {
+            @include typography(success);
+        }
+    }
+
+    &.warning {
+        @include border(warning);
+
+        .title {
+            @include typography(warning);
+        }
+    }
+
+    &.alert {
+        @include border(alert);
+
+        .title {
+            @include typography(alert);
+        }
+    }
 }
 
 .overlay {
diff --git a/src/components/Modal/modal.ts b/src/components/Modal/modal.ts
index 59bbec6..1e522b6 100644
--- a/src/components/Modal/modal.ts
+++ b/src/components/Modal/modal.ts
@@ -6,6 +6,11 @@ export type ModalProps = {
     closeOnOverlay?: boolean
     id?: string
     className?: string
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
 }
 
 export type ReactModalProps = {
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
index a273eb4..5eefc05 100644
--- a/src/pages/modal.astro
+++ b/src/pages/modal.astro
@@ -47,6 +47,7 @@ const sections = getSections({
                 title="Svelte Modal"
                 subTitle="With a subtitle"
                 id="modal-svelte"
+                theme="alert"
             >
                 <p>
                     Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
@@ -67,6 +68,7 @@ const sections = getSections({
                 title="React Modal"
                 subTitle="With a subtitle"
                 id="modal-react"
+                theme="info"
             >
                 <p>
                     Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
@@ -157,6 +159,62 @@ const sections = getSections({
                     This modal doesn't have a close button. It can only be closed by clicking on the overlay or using the <code>esc</code> button.
                 </section.component>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Info modal">
+                <Button theme="info" id={`modal-btn-6${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-6${index}`}
+                    title="Information"
+                    subTitle="Before continuing, please read carefully"
+                    theme="info"
+                >
+                    This modal was created using the info theme
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Success modal">
+                <Button theme="success" id={`modal-btn-7${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-7${index}`}
+                    title="Success"
+                    subTitle="Before continuing, please read carefully"
+                    theme="success"
+                >
+                    This modal was created using the success theme
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Info modal">
+                <Button theme="warning" id={`modal-btn-8${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-8${index}`}
+                    title="Warning"
+                    subTitle="Before continuing, please read carefully"
+                    theme="warning"
+                >
+                    This modal was created using the warning theme
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Info modal">
+                <Button theme="alert" id={`modal-btn-9${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-9${index}`}
+                    title="Alert"
+                    subTitle="Before continuing, please read carefully"
+                    theme="alert"
+                >
+                    This modal was created using the alert theme
+                </section.component>
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -176,7 +234,7 @@ const sections = getSections({
         'react'
     ]
 
-    const ids = Array(5).fill(10).map((x, index) => x * (index + 1))
+    const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
     const variants = [
         '00',
         '01',

From ca2fc585fa8042febe6c7916ec096351f48d41f6 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 15:35:06 +0200
Subject: [PATCH 18/18] =?UTF-8?q?=F0=9F=92=84=20Improve=20amber=20theme's?=
 =?UTF-8?q?=20color=20palette?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/global/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/global/theme.scss b/src/scss/global/theme.scss
index 7666897..735256f 100644
--- a/src/scss/global/theme.scss
+++ b/src/scss/global/theme.scss
@@ -122,7 +122,7 @@
             --w-color-primary-30: #757575;
             --w-color-primary-40: #232323;
             --w-color-primary-50: #312e31;
-            --w-color-primary-60: #222;
+            --w-color-primary-60: #1b1b1b;
             --w-color-primary-70: #111;
 
             --w-color-info: #78dcdc;