refactor: use scoped css variables

abelflopes · Nov 3, 2023 · 16782d5 · 16782d5
1 parent 3b2f5cc
commit 16782d5
Show file tree

Hide file tree

Showing 16 changed files with 94 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/all/package.json b/packages/components/all/package.json
@@ -23,6 +23,10 @@
     "@rck/webpack-config": "^1.0.0",
     "@types/react": "^18.2.33"
   },
+  "dependencies": {
+    "@rck/scss-utils": "^1.0.0",
+    "@rck/theme": "^1.0.0"
+  },
   "peerDependencies": {
     "react": "^18.2.0"
   }

diff --git a/packages/components/all/src/card/index.module.scss b/packages/components/all/src/card/index.module.scss
@@ -3,6 +3,6 @@
 .root {
   border-radius: get-spacing(2);
   padding: get-spacing(4) get-spacing(3);
-  border: solid 0 #e2e8f0;
+  border: solid 0 get-color(neutral-100);
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
 }
diff --git a/packages/components/all/src/container/index.module.scss b/packages/components/all/src/container/index.module.scss
@@ -1,26 +1,28 @@
+@import "@rck/scss-utils";
+
 .root {
-  --spacing-y: 0;
-  --spacing-x: 0;
+  @include define-css-var(spacing-y, 0);
+  @include define-css-var(spacing-x, 0);
 
   box-sizing: border-box;
-  max-width: var(--max-width);
-  padding: var(--spacing-y) var(--spacing-x);
+  max-width: get-css-var(max-width);
+  padding: get-css-var(spacing-y) get-css-var(spacing-x);
   margin: 0 auto;
 }
 
 .horizontal {
-  --max-width: 1300px;
-  --spacing-x: 50px;
+  @include define-css-var(max-width, 1300px);
+  @include define-css-var(spacing-x, 50px);
 
   .small {
     color: red;
   }
 }
 
 .vertical {
-  --spacing-y: 30px;
+  @include define-css-var(spacing-y, 30px);
 
   .small {
-    --spacing-y: 16px;
+    @include define-css-var(spacing-y, 16px);
   }
 }
diff --git a/packages/components/all/src/divider/styles/index.module.scss b/packages/components/all/src/divider/styles/index.module.scss
@@ -1,18 +1,19 @@
 @import "@rck/theme";
+@import "@rck/scss-utils";
 
 .root {
-  background-color: get-color("neutral-200");
+  background-color: get-color(neutral-200);
   border: none;
-  height: var(--height);
-  width: var(--width);
+  height: get-css-var(height);
+  width: get-css-var(width);
 }
 
 .horizontal {
-  --width: 100%;
-  --height: 1px;
+  @include define-css-var(width, 100%);
+  @include define-css-var(height, 1px);
 }
 
 .vertical {
-  --width: 1px;
-  --height: 100%;
+  @include define-css-var(width, 1px);
+  @include define-css-var(height, 100%);
 }
diff --git a/packages/components/all/src/list/styles/index.module.scss b/packages/components/all/src/list/styles/index.module.scss
@@ -1,12 +1,13 @@
 @import "@rck/theme";
+@import "@rck/scss-utils";
 
 .root {
-  --border-color: transparent;
+  @include define-css-var(border-color, transparent);
 
   margin: 0;
   padding: 0;
   list-style: none;
-  border: solid 1px var(--border-color);
+  border: solid 1px get-css-var(border-color);
   border-radius: get-spacing(2);
   overflow: hidden;
 }
@@ -15,7 +16,7 @@
   padding: get-spacing(2);
 
   &:not(:first-child) {
-    border-top: solid 1px var(--border-color);
+    border-top: solid 1px get-css-var(border-color);
   }
 }
 

diff --git a/packages/components/all/src/text/styles/index.module.scss b/packages/components/all/src/text/styles/index.module.scss
@@ -1,28 +1,29 @@
 @import "@rck/theme";
+@import "@rck/scss-utils";
 
 .root {
-  --font-size: 16px;
-  --line-height: 24px;
-  --font-weight: 500;
-  --margin-top: 0;
-  --margin-bottom: 0;
-  --color: get-color(text);
-
-  color: var(--color);
+  @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);
   font-family: sans-serif;
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  margin-top: var(--margin-top);
-  margin-bottom: var(--margin-bottom);
-  line-height: var(--line-height);
+  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);
 
   &:not(:only-child).margin {
     &:not(.p, a) {
-      --margin-bottom: calc(var(--font-size) * 0.75);
+      @include define-css-var(margin-bottom, calc(#{get-css-var(font-size)} * 0.75));
     }
 
     & + & {
-      --margin-top: var(--font-size);
+      @include define-css-var(margin-top, get-css-var(font-size));
     }
   }
 }
@@ -40,51 +41,51 @@
 }
 
 .h1 {
-  --font-size: 29px;
-  --font-weight: 500;
-  --line-height: 36px;
+  @include define-css-var(font-size, 29px);
+  @include define-css-var(font-weight, 500);
+  @include define-css-var(line-height, 36px);
 }
 
 .h2 {
-  --font-size: 24px;
-  --font-weight: 500;
-  --line-height: 36px;
-  --color: #1a202c;
+  @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);
 }
 
 .huge {
-  --font-size: 60px;
+  @include define-css-var(font-size, 60px);
 }
 
 .soft {
-  --color: #718096;
+  @include define-css-var(color, #718096);
 }
 
 // Variations
 
 .small {
-  --font-size: 14px;
-  --font-weight: 400;
-  --line-height: 21px;
+  @include define-css-var(font-size, 14px);
+  @include define-css-var(font-weight, 400);
+  @include define-css-var(line-height, 21px);
 }
 
 .bold {
-  --font-weight: 700;
+  @include define-css-var(font-weight, 700);
 }
 
 .link {
-  --color: #0052cc;
+  @include define-css-var(color, #0052cc);
 
   &:hover {
-    --color: #003e99;
+    @include define-css-var(color, #003e99);
   }
 }
 
 .link_hidden {
   text-decoration: none;
 
   &:hover {
-    --color: #003e99;
+    @include define-css-var(color, #003e99);
     text-decoration: underline;
   }
 }
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
@@ -29,6 +29,8 @@
     "react": "^18.2.0"
   },
   "dependencies": {
+    "@rck/scss-utils": "^1.0.0",
+    "@rck/theme": "^1.0.0",
     "classnames": "^2.3.2"
   }
 }
diff --git a/packages/components/input/src/styles/index.module.scss b/packages/components/input/src/styles/index.module.scss
@@ -1,23 +1,21 @@
 @import "@rck/theme";
+@import "@rck/scss-utils";
 
 .root {
   @include font-base;
 
-  background: var(--color-neutral-200);
-  color: var(--color-text);
-  font: inherit;
-  font-family: var(--font-family);
-  font-size: var(--font-base-size);
+  background: get-color(neutral-200);
+  color: get-color(text);
   border: none;
   width: 100%;
-  padding: var(--spacing-base) calc(var(--spacing-base) * 2);
+  padding: get-spacing(1) get-spacing(2);
   border: none;
   outline: none;
   box-sizing: border-box;
-  border-radius: var(--spacing-base);
+  border-radius: get-spacing(1);
 
   &::placeholder {
-    color: var(--color-text-alt);
+    color: get-color(text-alt);
   }
 
   &:disabled {

diff --git a/packages/components/theme/package.json b/packages/components/theme/package.json
@@ -27,7 +27,6 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@rck/scss-utils": "^1.0.0",
-    "change-case": "^5.1.2"
+    "@rck/scss-utils": "^1.0.0"
   }
 }
diff --git a/packages/components/theme/src/provider.tsx b/packages/components/theme/src/provider.tsx
@@ -3,7 +3,6 @@ import React, { useMemo } from "react";
 import type { Theme } from "./types";
 import { defaultTheme } from "./themes/default";
 import { ThemeContext } from "./context";
-import { kebabCase } from "change-case";
 
 export interface ThemeProviderProps {
   target?: HTMLElement;
@@ -21,10 +20,9 @@ export const ThemeProvider = ({
   const themeCssVars = useMemo<React.CSSProperties>(() => {
     return Object.fromEntries(
       Object.entries(theme as unknown as MappedTheme).flatMap(([context, data]) =>
-        Object.entries(data).map(([key, value]) => [
-          "--" + kebabCase(context) + "-" + kebabCase(key),
-          value,
-        ]),
+        // Sync prefixing with /packages/utils/scss/src/_functions.scss
+        // get-css-var
+        Object.entries(data).map(([key, value]) => ["--rck-" + context + "-" + key, value]),
       ),
     );
   }, [theme]);

diff --git a/packages/components/theme/src/styles/_functions.scss b/packages/components/theme/src/styles/_functions.scss
@@ -1,10 +1,6 @@
 @import "theme-type";
 @import "@rck/scss-utils";
 
-@function get-css-var($name) {
-  @return var(--#{$name});
-}
-
 @function get-color($name) {
   $colors: map-get-strict($theme-type, "color");
   @if validate-map-key($colors, $name) {

diff --git a/packages/utils/scss/shared.scss b/packages/utils/scss/shared.scss
diff --git a/packages/utils/scss/src/_functions.scss b/packages/utils/scss/src/_functions.scss
@@ -19,3 +19,11 @@
     }
   }
 }
+
+// Sync prefixing with /packages/components/theme/src/provider.tsx
+// themeCssVars
+// and /packages/utils/scss/src/_mixins.scss
+// define-css-var
+@function get-css-var($name) {
+  @return var(--rck-#{$name});
+}
diff --git a/packages/utils/scss/src/_mixins.scss b/packages/utils/scss/src/_mixins.scss
@@ -0,0 +1,5 @@
+// and /packages/utils/scss/src/_functions.scss
+// get-css-var
+@mixin define-css-var($name, $value) {
+  --rck-#{$name}: #{$value};
+}
diff --git a/packages/utils/scss/src/index.scss b/packages/utils/scss/src/index.scss
@@ -1 +1,3 @@
 @import "functions";
+
+@import "mixins";