Develop

__tests__/_config.scss

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

__tests__/_tokens.scss

@@ -1,3 +1,15 @@
+$color: (
+    "primary": darkcyan,
+    "secondary": darkorange,
+    "tertiary": darkgreen
+);
+
+$shape: (
+    "small": 4px,
+    "medium": 6px,
+    "large": 8px
+);
+
 $button: (
     "text-color": var(--mg-color-primary, darkcyan),
     "text-size": 16px,

package.json

@@ -19,6 +19,9 @@
         },
         "./color": {
             "sass": "./color.scss"
+        },
+        "./shape": {
+            "sass": "./shape.scss"
         }
     },
     "devDependencies": {
@@ -44,7 +47,7 @@
         "@unsass/string": "^1.4.1",
         "@unsass/types": "^1.0.1",
         "@unsass/var": "^1.0.2",
-        "sass": "^1.75.0"
+        "sass": "^1.77.6"
     },
     "keywords": [
         "sass",

shape.scss

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

src/_mixins.scss

@@ -120,14 +120,19 @@
 ///   @include theme.config("foo");
 ///
 /// @param {String} $prefix - The custom property prefix.
-/// @param {String} $color - The custom color module.
+/// @param {String} $color - The custom config of color component.
+/// @param {String} $shape - The custom config of shape component.
 ///
-@mixin config($prefix: null, $color: null) {
+@mixin config($prefix: null, $color: null, $shape: null) {
     @if $prefix {
         variables.$prefix: $prefix;
     }
 
     @if $color {
         variables.$color: $color;
     }
+
+    @if $shape {
+        variables.$shape: $shape;
+    }
 }

src/_variables.scss

@@ -13,15 +13,22 @@ $_default-color: (
     "tokens": ()
 ) !default;
 
+$_default-shape: (
+    "prefix": "shape",
+    "tokens": ()
+) !default;
+
 // ------------------------------------------------------------------------- //
 // Public variables
 // ------------------------------------------------------------------------- //
 
 $prefix: "mg" !default;
 $color: () !default;
+$shape: () !default;
 
 ///
 /// Extend options.
 ///
 
 $color: map.deep-merge($_default-color, $color);
+$shape: map.deep-merge($_default-shape, $shape);

src/color/__tests__/config.spec.scss

@@ -0,0 +1,31 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "pkg:sass-true" as *;
+@use "../../../__tests__/config";
+@use "../mixins";
+
+@include describe("color") {
+    @include describe("config()") {
+        @include it("Should return theme custom properties declarations.") {
+            @include assert {
+                @include output(false) {
+                    .test {
+                        @include mixins.theme((
+                            "primary": #36454f,
+                            "secondary": #353839
+                        ));
+                    }
+                }
+
+                @include expect(false) {
+                    .test {
+                        --md-sys-color-primary: #36454f;
+                        --md-sys-color-secondary: #353839;
+                    }
+                }
+            }
+        }
+    }
+}

src/color/__tests__/mixins.spec.scss

@@ -3,12 +3,11 @@
 // ============================================================================================= //
 
 @use "pkg:sass-true" as *;
+@use "../../../__tests__/tokens";
 @use "../../../index" with (
     $color: (
-        "tokens": (
-            "primary",
-            "secondary"
-        )
+        "prefix": "sys-color",
+        "tokens": tokens.$color
     )
 );
 @use "../mixins";
@@ -20,16 +19,16 @@
                 @include output(false) {
                     .test {
                         @include mixins.theme((
-                            "primary": darkcyan,
-                            "secondary": darkorange
+                            "primary": #36454f,
+                            "secondary": #353839
                         ));
                     }
                 }
 
                 @include expect(false) {
                     .test {
-                        --mg-color-primary: darkcyan;
-                        --mg-color-secondary: darkorange;
+                        --mg-sys-color-primary: #36454f;
+                        --mg-sys-color-secondary: #353839;
                     }
                 }
             }

src/color/_mixins.scss

@@ -7,8 +7,9 @@
 @use "../mixins";
 @use "../variables";
 
-$_custom-property-prefix: map.get(variables.$color, "prefix");
-$_tokens: functions.create-theme-vars(map.get(variables.$color, "tokens"), $_custom-property-prefix);
+$_custom-property-prefix: if(map.get(variables.$color, "prefix") == null, "color", map.get(variables.$color, "prefix"));
+$_tokens: map.get(variables.$color, "tokens");
+$_tokens: functions.create-theme-vars($_tokens, $_custom-property-prefix);
 
 ///
 /// Generates user-provided theme's tokens for the color component management with tokens validation.

src/shape/__tests__/config.spec.scss

@@ -0,0 +1,29 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "pkg:sass-true" as *;
+@use "../../../__tests__/config";
+@use "../mixins";
+
+@include describe("shape") {
+    @include describe("config()") {
+        @include it("Should return theme custom properties declarations.") {
+            @include assert {
+                @include output(false) {
+                    .test {
+                        @include mixins.theme((
+                            "medium": 8px
+                        ));
+                    }
+                }
+
+                @include expect(false) {
+                    .test {
+                        --md-sys-shape-medium: 8px;
+                    }
+                }
+            }
+        }
+    }
+}

src/shape/__tests__/mixins.spec.scss

@@ -0,0 +1,35 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "pkg:sass-true" as *;
+@use "../../../__tests__/tokens";
+@use "../../../index" with (
+    $shape: (
+        "prefix": "sys-shape",
+        "tokens": tokens.$shape
+    )
+);
+@use "../mixins";
+
+@include describe("shape") {
+    @include describe("theme()") {
+        @include it("Should return custom theme declarations.") {
+            @include assert {
+                @include output(false) {
+                    .test {
+                        @include mixins.theme((
+                            "medium": 8px
+                        ));
+                    }
+                }
+
+                @include expect(false) {
+                    .test {
+                        --mg-sys-shape-medium: 8px;
+                    }
+                }
+            }
+        }
+    }
+}

src/shape/_index.scss

@@ -0,0 +1,5 @@
+// ============================================================================================= //
+//                                             INDEX                                             //
+// ============================================================================================= //
+
+@forward "./mixins" show theme;

src/shape/_mixins.scss

@@ -0,0 +1,37 @@
+// ============================================================================================= //
+//                                            MIXINS                                             //
+// ============================================================================================= //
+
+@use "sass:map";
+@use "../functions";
+@use "../mixins";
+@use "../variables";
+
+$_custom-property-prefix: if(map.get(variables.$shape, "prefix") == null, "shape", map.get(variables.$shape, "prefix"));
+$_tokens: map.get(variables.$shape, "tokens");
+$_tokens: functions.create-theme-vars($_tokens, $_custom-property-prefix);
+
+///
+/// Generates user-provided theme's tokens for the shape component management with tokens validation.
+///
+/// @example - scss
+///   $theme: (
+///     "medium": 6px
+///   );
+///
+///   .foo {
+///     @include shape.theme($theme);
+///   }
+///
+/// @example - css
+///   .foo {
+///     --mg-shape-medium: 8px;
+///   }
+///
+/// @param {Map} $theme - The theme tokens map.
+///
+@mixin theme($theme) {
+    $tokens: functions.validation($_tokens, $theme, $_custom-property-prefix);
+
+    @include mixins.emit-custom-props($tokens, $_custom-property-prefix);
+}