feat(google): use global variables

allegorylabs · Apr 20, 2022 · 9f846d9 · 9f846d9
1 parent 37a56f9
commit 9f846d9
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 16 deletions.
diff --git a/packages/google/README.md b/packages/google/README.md
@@ -63,17 +63,17 @@ public mixin `custom-properties`.
 
 ### Variables
 
-| Variable | Value |
-| --- | --- |
-| `$primary` | Return hex value color. |
-| `$primary-rgb` | Return `rgb` color. |
-| `$blue` | Return hex value color. |
-| `$green` | Return hex value color. |
-| `$yellow` | Return hex value color. |
-| `$red` | Return hex value color. |
+| Variable       | Value                   |
+|----------------|-------------------------|
+| `$primary`     | Return hex value color. |
+| `$primary-rgb` | Return `rgb` color.     |
+| `$blue`        | Return hex value color. |
+| `$green`       | Return hex value color. |
+| `$yellow`      | Return hex value color. |
+| `$red`         | Return hex value color. |
 
 ### Mixins
 
-| Mixin | Description |
-| --- | --- |
+| Mixin                           | Description                                                                                               |
+|---------------------------------|-----------------------------------------------------------------------------------------------------------|
 | `custom-properties($values...)` | Create dedicated custom property. If the `$values` is empty, the mixin will create all styles by default. |
diff --git a/packages/google/_variables.scss b/packages/google/_variables.scss
@@ -2,13 +2,16 @@
 //                                           VARIABLES                                           //
 // ============================================================================================= //
 
+@use "sass:color";
+@use "brandcolors/variables";
+
 $primary: #4285f4;
-$primary-rgb: rgb(66, 133, 244);
+$primary-rgb: rgb(color.red($primary), color.green($primary), color.blue($primary));
 
-$blue: $primary;
-$green: #0f9d58;
-$yellow: #f4b400;
-$red: #db4437;
+$blue: variables.$google;
+$green: variables.$google-2;
+$yellow: variables.$google-3;
+$red: variables.$google-4;
 
 // ------------------------------------------------------------------------- //
 // PROPERTY VALUES

diff --git a/packages/google/package.json b/packages/google/package.json
@@ -3,6 +3,9 @@
     "version": "1.3.0",
     "description": "Google Brand Colors.",
     "main": "_index.scss",
+    "dependencies": {
+        "brandcolors": "1.3.0"
+    },
     "files": [
         "*.scss"
     ],

diff --git a/packages/google/test/test.spec.scss b/packages/google/test/test.spec.scss
@@ -0,0 +1,40 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "true" as *;
+@use "../index" as google;
+
+@include describe("google") {
+    @include it("Should return hex color declaration.") {
+        @include assert {
+            @include output(false) {
+                .test {
+                    color: google.$primary;
+                }
+            }
+
+            @include expect(false) {
+                .test {
+                    color: #4285f4;
+                }
+            }
+        }
+    }
+
+    @include it("Should return rgb color declaration.") {
+        @include assert {
+            @include output(false) {
+                .test {
+                    color: google.$primary-rgb;
+                }
+            }
+
+            @include expect(false) {
+                .test {
+                    color: rgb(66, 133, 244);
+                }
+            }
+        }
+    }
+}
diff --git a/tests/scss.spec.js b/tests/scss.spec.js
@@ -35,7 +35,7 @@ describe('Sass', () => {
             file,
             includePaths: [
                 './node_modules',
-                './packages/**/node_modules',
+                './packages/google/node_modules',
             ]
         }, {
             describe,