Replace typography source to monday-ui-style font variables (#521)

* add css variables for typography * remove use on old less variables * fix typography * fix typography description * add argument to font mixins * update monday-ui-style
mondaycom · Feb 8, 2022 · cdbbb9b · cdbbb9b
1 parent fdd19db
commit cdbbb9b
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 128 deletions.
diff --git a/src/components/AttentionBox/AttentionBox.scss b/src/components/AttentionBox/AttentionBox.scss
@@ -4,9 +4,9 @@
 
 .monday-style-attention-box-component {
   position: relative;
-  padding: $spacing-large;
-  border-radius: $border-radius-medium;
-  font-size: $font-size-input;
+  padding: var(--spacing-large);
+  border-radius: var(--border-radius-medium);
+  font-size: var(--font-size-general-label);
   width: fit-content;
   height: fit-content;
   @include theme-prop(color, dark-color);
@@ -69,7 +69,7 @@
     margin-bottom: var(--spacing-small);
 
     &__icon {
-      margin-right: $spacing-small;
+      margin-right: var(--spacing-small);
     }
 
     &__title {
@@ -79,7 +79,7 @@
   }
 
   &.with-close {
-    padding: $spacing-large $spacing-xxl $spacing-large $spacing-large;
+    padding: var(--spacing-large) var(--spacing-xxl) var(--spacing-large) var(--spacing-large);
   }
 
   &__close-icon {

diff --git a/src/components/Avatar/AvatarContent.scss b/src/components/Avatar/AvatarContent.scss
@@ -3,6 +3,9 @@
 $avatar-icon-large: 28px;
 $avatar-icon-medium: 18px;
 $avatar-icon-small: 12px;
+$font-size-avatar-large: 18px;
+$font-size-avatar-medium: 14px;
+$font-size-avatar-small: 12px;
 
 .monday-style-avatar-content {
   &_img {
@@ -12,9 +15,9 @@ $avatar-icon-small: 12px;
   }
 
   &_text {
-    font-family: $primary-font;
-    font-weight: $font-weight-normal;
-    line-height: $line-height-for-size-18;
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    line-height: 21px;
     letter-spacing: -0.5px;
     display: flex;
     justify-content: center;

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -8,7 +8,6 @@
   outline: none;
   border: none;
   height: auto;
-  font-family: Roboto, sans-serif;
   border-radius: $border-radius-small;
   cursor: pointer;
   white-space: nowrap;

diff --git a/src/components/FieldLabel/FieldLabel.scss b/src/components/FieldLabel/FieldLabel.scss
@@ -7,9 +7,9 @@
   padding-bottom: $spacing-small;
   align-items: center;
   .label-component--icon {
-    margin: 0 $spacing-small 0 $spacing-xs;
+    margin: 0 var(--spacing-small) 0 var(--spacing-xs);
     line-height: 24px;
-    font-size: $font-size-input;
+    font-size: var(--font-size-general-label);
     @include theme-prop(color, icon-color);
   }
   .label-component--text {

diff --git a/src/components/FormattedNumber/FormattedNumber.scss b/src/components/FormattedNumber/FormattedNumber.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  font-family: $primary-font;
+  font-family: var(--font-family);
   width: 100%;
 
   &__prefix {

diff --git a/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.scss b/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.scss
@@ -3,7 +3,7 @@
 
 .monday-style-step-indicator-component {
   @include theme-prop(color, text-color-on-primary);
-  font-size: $font-size-input;
+  font-size: var(--font-size-general-label);
   display: flex;
   margin: 0;
   padding: 0;
@@ -30,7 +30,7 @@
 
     &__subtitle__text {
       width: 100%;
-      font-size: $font-size-default;
+      font-size: var(--font-size-general-label);
       @include theme-prop(color, disabled-text-color);
     }
   }

diff --git a/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.scss b/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.scss
@@ -7,12 +7,12 @@
   flex-direction: row;
   justify-content: center;
   width: 100%;
-  font-family: $primary-font;
-  font-size: $font-size-input;
+  font-family: var(--font-family);
+  font-size: var(--font-size-general-label);
   @include theme-prop(color, secondary-text-color);
 
   .linear-progress-bar__label {
-    padding-left: $spacing-xs;
+    padding-left: var(--spacing-xs)
   }
 
   &__large {

diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
@@ -6,7 +6,7 @@
 .input-component {
   position: relative;
   box-sizing: border-box;
-  font-family: Roboto, sans-serif;
+  font-family: var(--font-family);
   width: 100%;
 
   & * {
@@ -227,7 +227,7 @@
         outline: none;
 
         .input-component__icon {
-          font-size: $font-size-paragraph;
+          font-size: var(--font-size-paragraph);
         }
 
         &:hover + .input-component__icon--container + .input-component__input {
@@ -251,7 +251,7 @@
         height: 40px;
         width: 40px;
         .input-component__icon {
-          font-size: $font-size-paragraph;
+          font-size: var(--font-size-paragraph);
         }
       }
     }

diff --git a/src/components/storybook-helpers/description-label/description-label.scss b/src/components/storybook-helpers/description-label/description-label.scss
@@ -2,8 +2,8 @@
 
 .description-label{
   color: var(--secondary-text-color);
-  font-family: $primary-font;
-  font-weight: $font-weight-normal;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
   line-height: 24px;
   padding: 8px;
   white-space: pre-line;

diff --git a/src/storybook/stand-alone-documentaion/typography/text-styles/text-styles.jsx b/src/storybook/stand-alone-documentaion/typography/text-styles/text-styles.jsx
@@ -30,7 +30,7 @@ export const TextStyles = () => {
         className="monday-storybook-text-description"
         ariaLabel="H2"
         title="Secondary heading (Roboto 24px bold)"
-        description="Use as main header on a page"
+        description="Use as secondary header on a page"
       >
         <Heading
           type={Heading.types.h2}
@@ -46,7 +46,7 @@ export const TextStyles = () => {
         className={CSS_BASE_CLASS}
         ariaLabel="H3"
         title="Tertiary heading (Roboto 24px light)"
-        description="Use as main header on a page"
+        description="Use after heading, profile page headings"
       >
         <Heading
           type={Heading.types.h3}
@@ -61,7 +61,7 @@ export const TextStyles = () => {
         className={CSS_BASE_CLASS}
         ariaLabel="H4"
         title="Fourth heading (Roboto 18px bold)"
-        description="Use as main header on a page"
+        description="Use for subtitles, group name, subheading in admin"
       >
         <Heading
           type={Heading.types.h4}
@@ -74,9 +74,9 @@ export const TextStyles = () => {
       </VisualDescription>
       <VisualDescription
         ariaLabel="H5"
-        title="Fourth heading (Roboto 18px bold)"
+        title="Fourth heading (Roboto 16px bold)"
         className={CSS_BASE_CLASS}
-        description="Use as main header on a page"
+        description="Use as subtitles for paragraphs"
       >
         <Heading
           type={Heading.types.h5}
@@ -90,7 +90,7 @@ export const TextStyles = () => {
       <VisualDescription
         ariaLabel="text"
         title="UI labels / General text (Roboto 14px normal)"
-        description="Use as main header on a page"
+        description="Use for general text or labels"
         className={CSS_BASE_CLASS}
       >
         <span

diff --git a/src/storybook/styles/typography.scss b/src/storybook/styles/typography.scss
@@ -2,7 +2,7 @@
 
 // font family
 $header-primary-font: "Sofia Pro", Roboto, sans-serif;
-$text-primary-font: Roboto, sans-serif;
+$text-primary-font: var(--font-family);
 
 // sizes
 $h1-font-size: 40px;

diff --git a/src/styles/typography.scss b/src/styles/typography.scss
@@ -1,25 +1,5 @@
 @import "./theme-mixin";
 
-$primary-font: Roboto, sans-serif;
-$font-weight-bold: 500;
-$font-weight-normal: 400;
-$font-weight-light: 300;
-$font-weight-very-light: 200;
-$font-size-caption: 14px;
-$font-size-input: 14px;
-$font-size-text: 14px;
-$font-size-paragraph: 16px;
-$font-size-subtitle: 18px;
-$font-size-secondary: 24px;
-$font-size-header: 32px;
-$font-size-avatar-large: 18px;
-$font-size-avatar-medium: 14px;
-$font-size-avatar-small: 12px;
-$line-height-for-size-32: 52px;
-$line-height-for-size-24: 32px;
-$line-height-for-size-18: 21px;
-$font-size-default: 14px;
-
 $h1-empty-state-height: 32px;
 $h2-empty-state-height: 24px;
 $h3-empty-state-height: 24px;
@@ -29,129 +9,74 @@ $p-empty-state-height: 16px;
 $h6-empty-state-height: 12px;
 $small-empty-state-height: 12px;
 
+@mixin base-font($font-variable) {
+  @include theme-prop(color, primary-text-color);
+  -webkit-font-smoothing: var(--font-smoothing-webkit);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz);
+  font: $font-variable;
+}
+
 // Main Heading (h1)
 @mixin font-main {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-bold;
-  font-size: $font-size-header;
+  @include base-font(var(--font-h1));
   letter-spacing: -1px;
-  line-height: $line-height-for-size-32;
-  @include theme-prop(color, primary-text-color);
 }
 
 // Secondary Heading (h2)
 @mixin font-title {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-bold;
-  font-size: $font-size-secondary;
+  @include base-font(var(--font-h2));
   letter-spacing: -0.2px;
-  line-height: $line-height-for-size-24;
-  @include theme-prop(color, primary-text-color);
 }
 
 // Tertiary Heading (h3)
 @mixin font-title-secondary {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-light;
-  font-size: $font-size-secondary;
+  @include base-font(var(--font-h3));
   letter-spacing: -0.2px;
-  line-height: $line-height-for-size-24;
   @include theme-prop(color, primary-text-color);
 }
 
 // Fourth Heading (h4)
 @mixin font-subtitle {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-bold;
-  font-size: $font-size-subtitle;
-  line-height: 24px;
-  @include theme-prop(color, primary-text-color);
+  @include base-font(var(--font-h4));
 }
 
 // Paragraph Bold (h5)
 @mixin font-paragraph-bold {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-size: $font-size-paragraph;
-  font-weight: $font-weight-bold;
-  line-height: 24px;
-  @include theme-prop(color, primary-text-color);
+  @include base-font(var(--font-h5));
 }
 
 // UI lables / General text (h6)
 @mixin font-general-text {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-normal;
-  font-size: $font-size-text;
-  line-height: 24px;
-  @include theme-prop(color, primary-text-color);
+  @include base-font(var(--font-general-label));
 }
 
 // Paragraph text (p)
 @mixin font-paragraph {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-weight: $font-weight-normal;
-  font-size: $font-size-paragraph;
-  line-height: 24px;
-  @include theme-prop(color, primary-text-color);
+  @include base-font(var(--font-paragraph));
+}
+
+// Please use general text instead of this
+@mixin font-default {
+  @include font-general-text;
+  line-height: 22px;
 }
 
 // Caption / Subtext (small)
 @mixin font-caption {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-size: $font-size-caption;
-  font-weight: $font-weight-normal;
-  @include theme-prop(color, secondary-text-color);
-  line-height: 18px;
+  @include base-font(var(--font-subtext));
 }
 
 @mixin font-input {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-size: $font-size-input;
-  font-weight: $font-weight-normal;
-  line-height: 22px;
-  @include theme-prop(color, primary-text-color);
+  @include font-default;
 }
 
 @mixin font-link {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-size: $font-size-text;
-  font-weight: $font-weight-normal;
-  line-height: 22px;
+  @include font-default;
   text-decoration: none;
   @include theme-prop(color, link-color);
 }
 
-@mixin font-default {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: $primary-font;
-  font-size: $font-size-input;
-  font-weight: $font-weight-normal;
-  line-height: 22px;
-  @include theme-prop(color, primary-text-color);
-}
-
-@mixin line-clamp($lines: 1) {
+@mixin line-clamp($lines: 1le) {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: $lines;