✨ Add support for CSS customization

Author: Frontendland

README.md

@@ -79,11 +79,11 @@ yarn add webcoreui
 
 ### Setup
 
-Setup default styles and fonts by calling the following in your global SCSS file:
+Create an empty `webcore.config.scss` file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
-@include Setup((
+@include setup((
     // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
     fontBold: '/fonts/Inter-Bold.woff2'
@@ -100,14 +100,13 @@ The `Setup` mixin can also accept the following options:
 |-----------|---------------|---------|
 | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
 | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
-| `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`.
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
 
 Default component styles can be changed by overriding the following CSS variables:
 
-```css
-body {
+```scss
+html body {
     --w-avatar-border: var(--w-color-primary-70);
     --w-checkbox-color: var(--w-color-primary);
     --w-progress-color: var(--w-color-primary);
@@ -134,6 +133,12 @@ body {
     --w-timeline-counter: decimal;
     --w-tooltip-background: var(--w-color-primary);
     --w-tooltip-color: var(--w-color-primary-70);
+
+    // Override border-radius
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
 }
 ```
 

package.json

@@ -36,6 +36,8 @@
         "utils",
         "astro.d.ts",
         "astro.js",
+        "icons.d.ts",
+        "icons.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",

scripts/build.js

@@ -15,6 +15,8 @@ const files = {
     'package.json': 'dist/package.json'
 }
 
+const sassConfig = 'dist/scss/config.scss'
+
 console.log('🚀 Preparing package build')
 
 if (!fs.existsSync('dist')) {
@@ -26,6 +28,12 @@ Object.keys(folders).forEach(key => {
         if (error) {
             console.error('🚨 error copying directory', error)
         }
+
+        if (key.includes('scss')) {
+            const configFile = fs.readFileSync(sassConfig, 'utf-8')
+
+            fs.writeFileSync(sassConfig, configFile.replace('../../webcore', '../webcore'))
+        }
     })
 })
 
@@ -49,5 +57,4 @@ fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
 fs.writeFileSync('dist/icons.d.ts', buildTypes('icons'))
 
-
 console.log('✅ Package built')

src/components/Accordion/accordion.module.scss

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

src/components/Alert/alert.module.scss

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

src/components/Avatar/avatar.module.scss

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

src/components/Badge/badge.module.scss

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