Develop

.github/workflows/node.js.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [ 18.x, 20.x ]
+        node-version: [ '20.x' ]
 
     steps:
       - uses: actions/checkout@v4
@@ -39,13 +39,15 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     needs: test
-    if: ${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta' }}
+    if: ${{ github.ref == 'refs/heads/main' }}
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: '20'
 
       - name: Install Dependencies
         run: npm ci --ignore-scripts --no-audit
@@ -55,3 +57,25 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish_beta:
+    runs-on: ubuntu-latest
+    needs: test
+    if: ${{ github.ref == 'refs/heads/beta' }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Dependencies
+        run: npm ci --ignore-scripts --no-audit
+
+      - name: Release
+        run: npm run release:beta
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,7 +1,7 @@
 ## Files
+*.log
 *.map
 *.orig
-*.log
 junit.xml
 
 ## Folders

.release-it.json

@@ -0,0 +1,64 @@
+{
+    "git": {
+        "requireBranch": [
+            "main",
+            "beta",
+            "+([0-9])?(.{+([0-9]),x}).x"
+        ],
+        "commitMessage": "chore(release): publish version ${version}"
+    },
+    "github": {
+        "release": true,
+        "releaseName": "v${version}"
+    },
+    "npm": {
+        "publish": true
+    },
+    "plugins": {
+        "@release-it/conventional-changelog": {
+            "infile": "CHANGELOG.md",
+            "preset": {
+                "name": "conventionalcommits",
+                "header": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.",
+                "types": [
+                    {
+                        "type": "feat",
+                        "section": "Features"
+                    },
+                    {
+                        "type": "fix",
+                        "section": "Bug Fixes"
+                    },
+                    {
+                        "type": "chore",
+                        "hidden": true
+                    },
+                    {
+                        "type": "build",
+                        "section": "Build System"
+                    },
+                    {
+                        "type": "docs",
+                        "hidden": true
+                    },
+                    {
+                        "type": "style",
+                        "hidden": true
+                    },
+                    {
+                        "type": "refactor",
+                        "section": "Code Refactoring"
+                    },
+                    {
+                        "type": "perf",
+                        "hidden": true
+                    },
+                    {
+                        "type": "test",
+                        "hidden": true
+                    }
+                ]
+            }
+        }
+    }
+}

README.md

@@ -37,7 +37,7 @@ user-provided theme's tokens map.
 
 ## Mixins
 
-### `emit-custom-props($theme, $prefix)`
+### `emit-custom-props($tokens, $prefix)`
 
 Emits CSS custom properties declarations from a user-provided theme's.
 
@@ -63,7 +63,7 @@ $theme: (
 
 ## Functions
 
-### `emit-variable($theme, $token, $fallback, $prefix)`
+### `emit-variable($tokens, $token, $fallback, $prefix)`
 
 Emits CSS variable declaration from a user-provided theme's.
 

__tests__/_config-variables.scss

@@ -0,0 +1,11 @@
+@use "./tokens";
+
+$color: (
+    "prefix": "sys-color",
+    "tokens": tokens.$color
+);
+
+$shape: (
+    "prefix": "sys-shape",
+    "tokens": tokens.$shape
+);

__tests__/_config.scss

@@ -1,14 +1,4 @@
-@use "./tokens";
+@use "./config-variables" as config;
 @use "../src/mixins";
 
-$color: (
-    "prefix": "sys-color",
-    "tokens": tokens.$color
-);
-
-$shape: (
-    "prefix": "sys-shape",
-    "tokens": tokens.$shape
-);
-
-@include mixins.config("md", $color, $shape);
+@include mixins.config("md", config.$color, config.$shape);

__tests__/_tokens.scss

@@ -11,7 +11,7 @@ $shape: (
 );
 
 $button: (
-    "text-color": var(--mg-color-primary, darkcyan),
+    "text-color": darkcyan,
     "text-size": 16px,
     "padding": (
         "top": 12px

__tests__/config.spec.scss

@@ -0,0 +1,52 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "pkg:sass-true" as *;
+@use "./config";
+@use "./tokens";
+@use "../src/mixins";
+
+@include describe("core") {
+    @include describe("config") {
+        @include describe("mixins") {
+            @include describe("emit-custom-props()") {
+                @include it("Should return theme custom properties declarations.") {
+                    @include assert {
+                        @include output(false) {
+                            .test {
+                                @include mixins.emit-custom-props(tokens.$button, "button");
+                            }
+                        }
+
+                        @include expect(false) {
+                            .test {
+                                --md-button-text-color: darkcyan;
+                                --md-button-text-size: 16px;
+                                --md-button-padding-top: 12px;
+                            }
+                        }
+                    }
+                }
+
+                @include it("Should return theme custom properties declarations without component name.") {
+                    @include assert {
+                        @include output(false) {
+                            .test {
+                                @include mixins.emit-custom-props(tokens.$button);
+                            }
+                        }
+
+                        @include expect(false) {
+                            .test {
+                                --md-text-color: darkcyan;
+                                --md-text-size: 16px;
+                                --md-padding-top: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

__tests__/functions.spec.scss

@@ -25,19 +25,19 @@
         }
 
         @include describe("create-theme-vars()") {
-            @include it("Should return a map of tokens with custom properties.") {
+            @include it("Should return a map of tokens with `var()` CSS function.") {
                 @include assert-equal(functions.create-theme-vars(tokens.$button, "button"), (
-                    "text-color": var(--mg-button-text-color, var(--mg-color-primary, darkcyan)),
+                    "text-color": var(--mg-button-text-color, darkcyan),
                     "text-size": var(--mg-button-text-size, 16px),
                     "padding": (
                         "top": var(--mg-button-padding-top, 12px)
                     )
                 ));
             }
 
-            @include it("Should return a map of tokens with custom properties without component name prefix.") {
+            @include it("Should return a map of tokens with `var()` CSS function without component name.") {
                 @include assert-equal(functions.create-theme-vars(tokens.$button, null), (
-                    "text-color": var(--mg-text-color, var(--mg-color-primary, darkcyan)),
+                    "text-color": var(--mg-text-color, darkcyan),
                     "text-size": var(--mg-text-size, 16px),
                     "padding": (
                         "top": var(--mg-padding-top, 12px)
@@ -52,7 +52,7 @@
             }
 
             @include it("Should return validated theme tokens with fallback.") {
-                @include assert-equal(functions.emit-variable(tokens.$button, "text-color", true, "button"), var(--mg-button-text-color, var(--mg-color-primary, darkcyan)));
+                @include assert-equal(functions.emit-variable(tokens.$button, "text-color", true, "button"), var(--mg-button-text-color, darkcyan));
             }
         }
     }

__tests__/mixins.spec.scss

@@ -20,15 +20,15 @@
 
                     @include expect(false) {
                         .test {
-                            --mg-button-text-color: var(--mg-color-primary, darkcyan);
+                            --mg-button-text-color: darkcyan;
                             --mg-button-text-size: 16px;
                             --mg-button-padding-top: 12px;
                         }
                     }
                 }
             }
 
-            @include it("Should return theme custom properties declarations without prefix.") {
+            @include it("Should return theme custom properties declarations without component name.") {
                 @include assert {
                     @include output(false) {
                         .test {
@@ -38,7 +38,7 @@
 
                     @include expect(false) {
                         .test {
-                            --mg-text-color: var(--mg-color-primary, darkcyan);
+                            --mg-text-color: darkcyan;
                             --mg-text-size: 16px;
                             --mg-padding-top: 12px;
                         }
@@ -60,7 +60,7 @@
 
                     @include expect(false) {
                         .test {
-                            --mg-button-text-color: var(--mg-color-primary, darkcyan);
+                            --mg-button-text-color: darkcyan;
                             --mg-button-text-size: 16px;
                             --mg-button-padding-top: 12px;
                         }

color.scss

@@ -1,5 +1,5 @@
 // ============================================================================================= //
-//                                             INDEX                                             //
+//                                             COLOR                                             //
 // ============================================================================================= //
 
-@forward "./src/color" show theme;
+@forward "./src/color";