♻️ #20 - refactor: refactor typogrpahy styling

maykinmedia · Feb 8, 2024 · 9e35b91 · 9e35b91
1 parent 948c34a
commit 9e35b91
Show file tree

Hide file tree

Showing 20 changed files with 64 additions and 33 deletions.
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
@@ -3,7 +3,7 @@
   align-items: center;
   border-radius: var(--border-radius-m);
   display: inline-flex;
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-xs);
   font-weight: var(--typography-font-weight-normal);
   height: var(--typography-line-height-body-s);

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -27,7 +27,7 @@
   display: inline-flex;
   gap: 0.5em;
   height: var(--mykn-button-height);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--mykn-button-font-size);
   font-weight: var(--mykn-button-font-weight);
   justify-content: center;

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -2,7 +2,6 @@
   background-color: var(--typography-color-background);
   border-radius: var(--border-radius-l);
   box-sizing: border-box;
-  padding: var(--spacing-v-xxl) var(--spacing-h-xxl);
 
   & + & {
     margin-top: var(--spacing-v-m);

diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { Page } from "../page";
+import { Body, P } from "../typography";
 import { Card } from "./card";
 
 const meta = {
@@ -24,6 +25,10 @@ type Story = StoryObj<typeof meta>;
 
 export const CardComponent: Story = {
   args: {
-    children: "The quick brown fox jumps over the lazy dog.",
+    children: (
+      <Body>
+        <P>The quick brown fox jumps over the lazy dog.</P>
+      </Body>
+    ),
   },
 };
diff --git a/src/components/form/input/input.scss b/src/components/form/input/input.scss
@@ -6,7 +6,7 @@
   border-radius: var(--border-radius-m);
   box-sizing: border-box;
   color: var(--typography-color-body);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-s);
   font-weight: var(--typography-font-weight-normal);
   line-height: var(--typography-line-height-body-s);

diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss
@@ -8,7 +8,7 @@
   cursor: pointer;
   display: inline-flex;
   justify-content: space-between;
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-s);
   font-weight: var(--typography-font-weight-normal);
   line-height: var(--typography-line-height-body-s);
@@ -76,7 +76,7 @@
   box-sizing: border-box;
   color: var(--mykn-option-color-body);
   cursor: pointer;
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-s);
   font-weight: var(--mykn-option-font-weight);
   line-height: var(--typography-line-height-body-s);

diff --git a/src/components/typography/a/a.scss b/src/components/typography/a/a.scss
@@ -1,7 +1,6 @@
-@use "../p/p";
-
 .mykn-a {
-  @extend .mykn-p;
+  font-family: inherit;
+  line-height: var(--typography-line-height-body-s);
   align-items: center;
   color: var(--theme-color-primary-800);
   display: inline-flex;
@@ -24,7 +23,7 @@
   }
 
   &#{&}--muted {
-    @extend .mykn-p--muted;
+    color: var(--typography-color-muted);
   }
 
   &[aria-current] {

diff --git a/src/components/typography/body/body.scss b/src/components/typography/body/body.scss
@@ -1,13 +1,20 @@
+@use "../../../settings/constants";
+
 .mykn-body {
+  padding: var(--spacing-v-xl) var(--spacing-h-xl);
+
   .mykn-h1,
   .mykn-h2,
   .mykn-h3,
-  .mykn-hr,
   .mykn-p,
   .mykn-ol,
   .mykn-ul {
     &:not(:last-child) {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-v-l);
     }
   }
+
+  @media screen and (min-width: constants.$breakpoint-desktop) {
+    padding: var(--spacing-v-xxxl) var(--spacing-h-xxxl);
+  }
 }
diff --git a/src/components/typography/body/body.tsx b/src/components/typography/body/body.tsx
@@ -7,7 +7,8 @@ export type BodyProps = React.PropsWithChildren<{
 }>;
 
 /**
- * Provides styling (e.g. margins) for a group of typographic components.
+ * Provides styling (e.g. margins) for a group of (typographic) components.
+ * Can be used in various components to provide padding.
  * @param children
  * @param props
  * @constructor

diff --git a/src/components/typography/h1/h1.scss b/src/components/typography/h1/h1.scss
@@ -1,6 +1,6 @@
 .mykn-h1 {
   color: var(--typography-color-h);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-h);
   font-size: var(--typography-font-size-h1);
   font-weight: var(--typography-font-weight-bold);
   line-height: var(--typography-line-height-h1);

diff --git a/src/components/typography/h2/h2.scss b/src/components/typography/h2/h2.scss
@@ -1,6 +1,6 @@
 .mykn-h2 {
   color: var(--typography-color-h);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-h);
   font-size: var(--typography-font-size-h2);
   font-weight: var(--typography-font-weight-bold);
   line-height: var(--typography-line-height-h2);

diff --git a/src/components/typography/h3/h3.scss b/src/components/typography/h3/h3.scss
@@ -1,6 +1,6 @@
 .mykn-h3 {
   color: var(--typography-color-h);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-h);
   font-size: var(--typography-font-size-h3);
   font-weight: var(--typography-font-weight-bold);
   line-height: var(--typography-line-height-h3);

diff --git a/src/components/typography/hr/hr.scss b/src/components/typography/hr/hr.scss
@@ -1,5 +1,9 @@
 .mykn-hr {
   border: 0;
   border-bottom: 1px solid var(--typography-color-border);
-  margin: 0;
+  margin: var(--spacing-v-l) 0;
+
+  &--size-xxl {
+    margin: var(--spacing-v-xxl) 0;
+  }
 }
diff --git a/src/components/typography/hr/hr.tsx b/src/components/typography/hr/hr.tsx
@@ -1,14 +1,19 @@
+import clsx from "clsx";
 import React from "react";
 
 import "./hr.scss";
 
-export type HrProps = React.HTMLAttributes<HTMLHRElement>;
+export type HrProps = React.ComponentProps<"hr"> & {
+  /** The size of the margin. */
+  size?: "l" | "xxl";
+};
 
 /**
  * Hr component
+ * @param size
  * @param props
  * @constructor
  */
-export const Hr: React.FC<HrProps> = ({ ...props }) => (
-  <hr className="mykn-hr" {...props} />
+export const Hr: React.FC<HrProps> = ({ size = "l", ...props }) => (
+  <hr className={clsx("mykn-hr", `mykn-hr--size-${size}`)} {...props} />
 );
diff --git a/src/components/typography/index.ts b/src/components/typography/index.ts
@@ -3,4 +3,5 @@ export * from "./body";
 export * from "./h1";
 export * from "./h2";
 export * from "./h3";
+export * from "./hr";
 export * from "./p";
diff --git a/src/components/typography/li/li.scss b/src/components/typography/li/li.scss
@@ -1,9 +1,12 @@
-@use "../p/p";
-
 .mykn-li {
-  @extend .mykn-p;
+  color: var(--typography-color-body);
+  font-family: var(--typography-font-family-body);
+  font-size: var(--typography-font-size-body-s);
+  font-weight: var(--typography-font-weight-normal);
+  line-height: var(--typography-line-height-body-s);
 
   &--size-xs {
-    @extend .mykn-p--size-xs;
+    font-size: var(--typography-font-size-body-xs);
+    line-height: var(--typography-line-height-body-xs);
   }
 }
diff --git a/src/components/typography/ol/ol.scss b/src/components/typography/ol/ol.scss
@@ -1,7 +1,9 @@
-@use "../p/p";
-
 .mykn-ol {
-  @extend .mykn-p;
+  color: var(--typography-color-body);
+  font-family: var(--typography-font-family-body);
+  font-size: var(--typography-font-size-body-s);
+  font-weight: var(--typography-font-weight-normal);
+  line-height: var(--typography-line-height-body-s);
   list-style-position: inside;
   padding-inline-start: 0;
 

diff --git a/src/components/typography/p/p.scss b/src/components/typography/p/p.scss
@@ -1,6 +1,6 @@
 .mykn-p {
   color: var(--typography-color-body);
-  font-family: Inter, sans-serif;
+  font-family: var(--typography-font-family-body);
   font-size: var(--typography-font-size-body-s);
   font-weight: var(--typography-font-weight-normal);
   line-height: var(--typography-line-height-body-s);

diff --git a/src/components/typography/ul/ul.scss b/src/components/typography/ul/ul.scss
@@ -1,7 +1,9 @@
-@use "../p/p";
-
 .mykn-ul {
-  @extend .mykn-p;
+  color: var(--typography-color-body);
+  font-family: var(--typography-font-family-body);
+  font-size: var(--typography-font-size-body-s);
+  font-weight: var(--typography-font-weight-normal);
+  line-height: var(--typography-line-height-body-s);
   list-style-position: inside;
   padding-inline-start: 0;
 

diff --git a/src/settings/tokens.css b/src/settings/tokens.css
@@ -66,7 +66,7 @@
   --spacing-v-xxl: 32px;
 
   --spacing-h-xxxl: 40px;
-  --spacing-v-xxxl: 40px;
+  --spacing-v-xxxl: 20px;
 
   /* FORM */
   --form-color-border: var(--theme-shade-300);
@@ -79,6 +79,9 @@
   --typography-color-border: var(--theme-shade-300);
   --typography-color-muted: var(--theme-shade-600);
 
+  --typography-font-family-h: Inter, sans-serif;
+  --typography-font-family-body: Inter, sans-serif;
+
   --typography-font-size-h1: 24px;
   --typography-font-size-h2: 20px;
   --typography-font-size-h3: 16px;