refactor: use mixin based typography

Author: abelflopes

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

@@ -1,7 +1,39 @@
 @import "@react-ck/theme";
+@import "variables";
+
+@mixin text-variant($key, $map) {
+  $props: map-get-strict($map, $key);
+  $defaultProps: map-get-strict($props, default);
+  $hoverProps: map-get-strict($props, hover);
+
+  @each $propName, $propValue in $defaultProps {
+    @include define-css-var(text, $propName, $propValue);
+  }
+
+  &:hover {
+    @each $propName, $propValue in $hoverProps {
+      @include define-css-var(text, $propName, $propValue);
+    }
+  }
+}
+
+@mixin text-variation($key) {
+  @include text-variant($key, $text-variations);
+}
+
+@mixin text-type($key) {
+  @include text-variant($key, $text-types);
+}
 
-// TODO: move to typography
 @mixin font-base {
-  font-family: get-css-var(font, family);
-  font-size: get-css-var(font, base-size);
+  @include text-type(p);
+  @include define-css-var(text, color, get-color(neutral-900));
+  @include define-css-var(text, text-decoration, none);
+
+  font-family: get-css-var(text, font-family);
+  font-size: get-css-var(text, font-size);
+  font-weight: get-css-var(text, font-weight);
+  line-height: get-css-var(text, line-height);
+  text-decoration: get-css-var(text, text-decoration);
+  color: get-css-var(text, color);
 }

packages/components/text/src/styles/_variables.scss

@@ -0,0 +1,106 @@
+@import "@react-ck/theme";
+@import "@react-ck/scss-utils";
+
+$text-types: (
+  p: (
+    default: (
+      font-family: get-css-var(font, family),
+      font-size: get-css-var(font, base-size),
+      line-height: 24px,
+      font-weight: 500,
+      color: get-color(neutral-900),
+    ),
+    hover: (),
+  ),
+  huge: (
+    default: (
+      font-size: 60px,
+      font-weight: 700,
+      line-height: 60px,
+    ),
+    hover: (),
+  ),
+  soft: (
+    default: (
+      color: #718096,
+    ),
+    hover: (),
+  ),
+  h1: (
+    default: (
+      font-size: 29px,
+      font-weight: 500,
+      line-height: 36px,
+    ),
+    hover: (),
+  ),
+  h2: (
+    default: (
+      font-size: 24px,
+      font-weight: 500,
+      line-height: 36px,
+      color: #1a202c,
+    ),
+    hover: (),
+  ),
+  h3: (
+    default: (
+      font-size: 20px,
+      font-weight: 500,
+      line-height: 24px,
+    ),
+    hover: (),
+  ),
+  h4: (
+    default: (),
+    hover: (),
+  ),
+  h5: (
+    default: (),
+    hover: (),
+  ),
+  h6: (
+    default: (),
+    hover: (),
+  ),
+);
+
+$text-variations: (
+  small: (
+    default: (
+      font-size: 14px,
+      font-weight: 400,
+      line-height: 21px,
+    ),
+    hover: (),
+  ),
+  bold: (
+    default: (
+      font-weight: 700,
+    ),
+    hover: (),
+  ),
+  link: (
+    default: (
+      color: #0052cc,
+    ),
+    hover: (
+      color: #003e99,
+    ),
+  ),
+  link_hidden: (
+    default: (
+      text-decoration: none,
+    ),
+    hover: (
+      color: #003e99,
+      text-decoration: underline,
+    ),
+  ),
+  inverted: (
+    default: (
+      color: get-color(neutral-0),
+    ),
+    hover: (),
+  ),
+);

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

@@ -1,21 +1,15 @@
 @import "@react-ck/theme";
 @import "@react-ck/scss-utils";
+@import "mixins";
+@import "variables";
 
 .root {
-  @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 font-base;
   @include define-css-var(text, margin-top, 0);
   @include define-css-var(text, margin-bottom, 0);
-  @include define-css-var(text, color, get-color(neutral-900));
 
-  color: get-css-var(text, color);
-  font-family: sans-serif;
-  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) {
@@ -40,64 +34,16 @@
   display: block;
 }
 
-.h1 {
-  @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(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);
-}
-
-.h3 {
-  @include define-css-var(text, font-size, 20px);
-  @include define-css-var(text, font-weight, 500);
-  @include define-css-var(text, line-height, 24px);
-}
-
-.huge {
-  @include define-css-var(text, font-size, 60px);
-  @include define-css-var(text, line-height, 60px);
-  @include define-css-var(text, font-weight, 700);
-}
-
-.soft {
-  @include define-css-var(text, color, #718096);
-}
-
-// Variations
-
-.small {
-  @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(text, font-weight, 700);
-}
-
-.link {
-  @include define-css-var(text, color, #0052cc);
-
-  &:hover {
-    @include define-css-var(text, color, #003e99);
+@each $type in map-keys($text-types) {
+  .#{$type} {
+    @include text-type($type);
   }
 }
 
-.link_hidden {
-  text-decoration: none;
+// Variations
 
-  &:hover {
-    @include define-css-var(text, color, #003e99);
-    text-decoration: underline;
+@each $variation in map-keys($text-variations) {
+  .#{$variation} {
+    @include text-variation($variation);
   }
 }
-
-.inverted {
-  @include define-css-var(text, color, get-color(neutral-0));
-}