Made CSS properties relatives to a root property, by type

Author: alotropico

.prettierrc

@@ -1,7 +1,7 @@
 {
     "semi": true,
     "singleQuote": false,
-    "tabWidth": 4,
+    "tabWidth": 2,
     "jsxSingleQuote": false,
     "bracketSameLine": true,
     "printWidth": 150,

src/style/themes/common.scss

@@ -27,4 +27,6 @@
   --color-blue: #{$blue-light-500};
   --color-red: rgba(252, 93, 93, 0.88);
   --color-yellow: rgba(248, 203, 44, 0.88);
+
+  --importer-link: #2275d7e6;
 }

src/style/vars.scss

@@ -2,38 +2,42 @@
   // DIMENSIONS
 
   // margins and paddings
-  --m-xxxxs: 4px;
-  --m-xxxs: 6px;
-  --m-xxs: 8px;
-  --m-xs: 12px;
-  --m-s: 16px;
-  --m: 24px;
-  --m-mm: 32px;
-  --m-l: 40px;
-  --m-xl: 48px;
-  --m-xxl: 60px;
+  --base-spacing: 24px;
+  --m-xxxxs: calc(var(--base-spacing) / 5);
+  --m-xxxs: calc(var(--base-spacing) / 4);
+  --m-xxs: calc(var(--base-spacing) / 3);
+  --m-xs: calc(var(--base-spacing) / 2);
+  --m-s: calc(var(--base-spacing) * 2 / 3);
+  --m: var(--base-spacing);
+  --m-mm: calc(var(--base-spacing) * 3 / 2);
+  --m-l: calc(var(--base-spacing) * 5 / 3);
+  --m-xl: calc(var(--base-spacing) * 2);
+  --m-xxl: calc(var(--base-spacing) * 5 / 2);
+  --m-xxxl: calc(var(--base-spacing) * 3);
 
   // FONTS
 
-  --font-size-xs: 0.8rem;
-  --font-size-s: 0.8125rem;
+  --font-size-xs: calc(var(--font-size) * 16 / 17);
+  --font-size-s: calc(var(--font-size) * 13 / 14);
   --font-size: 0.875rem;
-  --font-size-l: 1rem;
-  --font-size-xl: 1.125rem;
-  --font-size-xxl: 1.5rem;
-  --font-size-xxxl: 2.25rem;
-  --font-size-h: 3rem;
-
-  --font-family-1: "Inter", sans-serif;
+  --font-size-l: calc(var(--font-size) * 8 / 7);
+  --font-size-xl: calc(var(--font-size) * 9 / 7);
+  --font-size-xxl: calc(var(--font-size) * 12 / 7);
+  --font-size-xxxl: calc(var(--font-size) * 18 / 7);
+  --font-size-h: calc(var(--font-size) * 24 / 7);
+
+  --font-family: "Inter", sans-serif;
+  --font-family-1: var(--font-family);
   --font-family-2: "Laxan", sans-serif;
 
   // BORDERS
 
-  --border-radius-1: 4px;
-  --border-radius-2: 8px;
-  --border-radius-3: 12px;
-  --border-radius-4: 16px;
-  --border-radius-5: 20px;
+  --border-radius: 4px;
+  --border-radius-1: var(--border-radius);
+  --border-radius-2: calc(var(--border-radius) * 2);
+  --border-radius-3: calc(var(--border-radius) * 3);
+  --border-radius-4: calc(var(--border-radius) * 4);
+  --border-radius-5: calc(var(--border-radius) * 5);
   --border-radius-r: 50%;
 
   // TRANSITIONS