refactor: add scoping to css var names

Author: abelflopes

packages/components/all/src/container/index.module.scss

@@ -1,28 +1,28 @@
 @import "@rck/scss-utils";
 
 .root {
-  @include define-css-var(spacing-y, 0);
-  @include define-css-var(spacing-x, 0);
+  @include define-css-var(container, spacing-y, 0);
+  @include define-css-var(container, spacing-x, 0);
 
   box-sizing: border-box;
-  max-width: get-css-var(max-width);
-  padding: get-css-var(spacing-y) get-css-var(spacing-x);
+  max-width: get-css-var(container, max-width);
+  padding: get-css-var(container, spacing-y) get-css-var(spacing-x);
   margin: 0 auto;
 }
 
 .horizontal {
-  @include define-css-var(max-width, 1300px);
-  @include define-css-var(spacing-x, 50px);
+  @include define-css-var(container, max-width, 1300px);
+  @include define-css-var(container, spacing-x, 50px);
 
   .small {
     color: red;
   }
 }
 
 .vertical {
-  @include define-css-var(spacing-y, 30px);
+  @include define-css-var(container, spacing-y, 30px);
 
   .small {
-    @include define-css-var(spacing-y, 16px);
+    @include define-css-var(container, spacing-y, 16px);
   }
 }

packages/components/all/src/divider/styles/index.module.scss

@@ -4,16 +4,16 @@
 .root {
   background-color: get-color(neutral-200);
   border: none;
-  height: get-css-var(height);
-  width: get-css-var(width);
+  height: get-css-var(divider, height);
+  width: get-css-var(divider, width);
 }
 
 .horizontal {
-  @include define-css-var(width, 100%);
-  @include define-css-var(height, 1px);
+  @include define-css-var(divider, width, 100%);
+  @include define-css-var(divider, height, 1px);
 }
 
 .vertical {
-  @include define-css-var(width, 1px);
-  @include define-css-var(height, 100%);
+  @include define-css-var(divider, width, 1px);
+  @include define-css-var(divider, height, 100%);
 }

packages/components/all/src/list/styles/index.module.scss

@@ -2,12 +2,12 @@
 @import "@rck/scss-utils";
 
 .root {
-  @include define-css-var(border-color, transparent);
+  @include define-css-var(divider, border-color, transparent);
 
   margin: 0;
   padding: 0;
   list-style: none;
-  border: solid 1px get-css-var(border-color);
+  border: solid 1px get-css-var(divider, border-color);
   border-radius: get-spacing(2);
   overflow: hidden;
 }
@@ -16,7 +16,7 @@
   padding: get-spacing(2);
 
   &:not(:first-child) {
-    border-top: solid 1px get-css-var(border-color);
+    border-top: solid 1px get-css-var(divider, border-color);
   }
 }
 

packages/components/all/src/text/styles/index.module.scss

@@ -2,28 +2,28 @@
 @import "@rck/scss-utils";
 
 .root {
-  @include define-css-var(font-size, 16px);
-  @include define-css-var(line-height, 24px);
-  @include define-css-var(font-weight, 500);
-  @include define-css-var(margin-top, 0);
-  @include define-css-var(margin-bottom, 0);
-  @include define-css-var(color, get-color(text));
-
-  color: get-css-var(color);
+  @include define-css-var(text, font-size, 16px);
+  @include define-css-var(text, line-height, 24px);
+  @include define-css-var(text, font-weight, 500);
+  @include define-css-var(text, margin-top, 0);
+  @include define-css-var(text, margin-bottom, 0);
+  @include define-css-var(text, color, get-color(text));
+
+  color: get-css-var(text, color);
   font-family: sans-serif;
-  font-size: get-css-var(font-size);
-  font-weight: get-css-var(font-weight);
-  margin-top: get-css-var(margin-top);
-  margin-bottom: get-css-var(margin-bottom);
-  line-height: get-css-var(line-height);
+  font-size: get-css-var(text, font-size);
+  font-weight: get-css-var(text, font-weight);
+  margin-top: get-css-var(text, margin-top);
+  margin-bottom: get-css-var(text, margin-bottom);
+  line-height: get-css-var(text, line-height);
 
   &:not(:only-child).margin {
     &:not(.p, a) {
-      @include define-css-var(margin-bottom, calc(#{get-css-var(font-size)} * 0.75));
+      @include define-css-var(text, margin-bottom, calc(#{get-css-var(text, font-size)} * 0.75));
     }
 
     & + & {
-      @include define-css-var(margin-top, get-css-var(font-size));
+      @include define-css-var(text, margin-top, get-css-var(text, font-size));
     }
   }
 }
@@ -41,51 +41,51 @@
 }
 
 .h1 {
-  @include define-css-var(font-size, 29px);
-  @include define-css-var(font-weight, 500);
-  @include define-css-var(line-height, 36px);
+  @include define-css-var(text, font-size, 29px);
+  @include define-css-var(text, font-weight, 500);
+  @include define-css-var(text, line-height, 36px);
 }
 
 .h2 {
-  @include define-css-var(font-size, 24px);
-  @include define-css-var(font-weight, 500);
-  @include define-css-var(line-height, 36px);
-  @include define-css-var(color, #1a202c);
+  @include define-css-var(text, font-size, 24px);
+  @include define-css-var(text, font-weight, 500);
+  @include define-css-var(text, line-height, 36px);
+  @include define-css-var(text, color, #1a202c);
 }
 
 .huge {
-  @include define-css-var(font-size, 60px);
+  @include define-css-var(text, font-size, 60px);
 }
 
 .soft {
-  @include define-css-var(color, #718096);
+  @include define-css-var(text, color, #718096);
 }
 
 // Variations
 
 .small {
-  @include define-css-var(font-size, 14px);
-  @include define-css-var(font-weight, 400);
-  @include define-css-var(line-height, 21px);
+  @include define-css-var(text, font-size, 14px);
+  @include define-css-var(text, font-weight, 400);
+  @include define-css-var(text, line-height, 21px);
 }
 
 .bold {
-  @include define-css-var(font-weight, 700);
+  @include define-css-var(text, font-weight, 700);
 }
 
 .link {
-  @include define-css-var(color, #0052cc);
+  @include define-css-var(text, color, #0052cc);
 
   &:hover {
-    @include define-css-var(color, #003e99);
+    @include define-css-var(text, color, #003e99);
   }
 }
 
 .link_hidden {
   text-decoration: none;
 
   &:hover {
-    @include define-css-var(color, #003e99);
+    @include define-css-var(text, color, #003e99);
     text-decoration: underline;
   }
 }

packages/components/theme/src/styles/_functions.scss

@@ -4,10 +4,10 @@
 @function get-color($name) {
   $colors: map-get-strict($theme-type, "color");
   @if validate-map-key($colors, $name) {
-    @return get-css-var(color-#{$name});
+    @return get-css-var(color, $name);
   }
 }
 
 @function get-spacing($multi: 1) {
-  @return calc(#{get-css-var(spacing-base)} * $multi);
+  @return calc(#{get-css-var(spacing, base)} * $multi);
 }

packages/components/theme/src/styles/_mixins.scss

@@ -2,6 +2,6 @@
 
 // TODO: move to typography
 @mixin font-base {
-  font-family: get-css-var(font-family);
-  font-size: get-css-var(font-base-size);
+  font-family: get-css-var(font, family);
+  font-size: get-css-var(font, base-size);
 }

packages/utils/scss/src/_functions.scss

@@ -24,6 +24,6 @@
 // themeCssVars
 // and /packages/utils/scss/src/_mixins.scss
 // define-css-var
-@function get-css-var($name) {
-  @return var(--rck-#{$name});
+@function get-css-var($scope, $name) {
+  @return var(--rck-#{$scope}-#{$name});
 }

packages/utils/scss/src/_mixins.scss

@@ -1,5 +1,5 @@
 // and /packages/utils/scss/src/_functions.scss
 // get-css-var
-@mixin define-css-var($name, $value) {
-  --rck-#{$name}: #{$value};
+@mixin define-css-var($scope, $name, $value) {
+  --rck-#{$scope}-#{$name}: #{$value};
 }