wix-storybook-utils/src/Foundation/typography.st.css

Utilities for automated component documentation within Storybook

:vars {
  /* Fonts */
  wsr-font-family: 'Madefor,"Helvetica Neue",Helvetica,Arial,"メイリオ","meiryo","ヒラギノ角ゴ pro w3","hiragino kaku gothic pro", sans-serif';

  /** Font Weight **/
  wsr-font-weight-regular: 400;
  wsr-font-weight-medium: 530;
  wsr-font-weight-bold: 700;

  /** Text Font Sizes **/
  wsr-text-font-size-tiny: 12px;
  wsr-text-font-size-small: 14px;
  wsr-text-font-size-medium: 16px;

  /** Text Line Height **/
  wsr-text-line-height-tiny: 15px;
  wsr-text-line-height-small: 18px;
  wsr-text-line-height-medium: 24px;

  /** Heading Font Sizes */
  wsr-heading-font-size-h1: 36px;
  wsr-heading-font-size-h2: 28px; 
  wsr-heading-font-size-h3: 20px;
  wsr-heading-font-size-h4: 16px;
  wsr-heading-font-size-h5: 12px;
 

  /** Heading Line Height **/
  wsr-heading-line-height-h1: 48px;
  wsr-heading-line-height-h2: 36px;
  wsr-heading-line-height-h3: 24px;
  wsr-heading-line-height-h4: 24px;
  wsr-heading-line-height-h5: 24px;
}


.text-tiny-thin {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-tiny);
  font-weight: value(wsr-font-weight-regular);
  line-height: value(wsr-text-line-height-tiny);
}

.text-tiny-normal {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-tiny);
  font-weight: value(wsr-font-weight-medium);
  line-height: value(wsr-text-line-height-tiny);
}

.text-tiny-bold {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-tiny);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-text-line-height-tiny);
}

.text-small-thin {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-small);
  font-weight: value(wsr-font-weight-regular);
  line-height:  value(wsr-text-line-height-small);
}

.text-small-normal {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-small);
  font-weight: value(wsr-font-weight-medium);
  line-height: value(wsr-text-line-height-small);
}

.text-small-bold {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-small);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-text-line-height-small);
}

.text-medium-thin {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-medium);
  font-weight: value(wsr-font-weight-regular);
  line-height: value(wsr-text-line-height-medium);
}

.text-medium-normal {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-medium);
  font-weight: value(wsr-font-weight-medium);
  line-height: value(wsr-text-line-height-medium);
}

.text-medium-bold {
  font-family: value(wsr-font-family);
  font-size: value(wsr-text-font-size-medium);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-text-line-height-medium);
}


.heading-h1 {
  font-family: value(wsr-font-family);
  font-size: value(wsr-heading-font-size-h1);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-heading-line-height-h1);
}

.heading-h2 {
  font-family: value(wsr-font-family);
  font-size: value(wsr-heading-font-size-h2);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-heading-line-height-h2);
}

.heading-h3 {
  font-family: value(wsr-font-family);
  font-size:  value(wsr-heading-font-size-h3);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-heading-line-height-h3);
}

.heading-h4 {
  font-family: value(wsr-font-family);
  font-size:  value(wsr-heading-font-size-h4);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-heading-line-height-h4);
}

.heading-h5 {
  font-family: value(wsr-font-family);
  font-size:  value(wsr-heading-font-size-h5);
  font-weight: value(wsr-font-weight-bold);
  line-height: value(wsr-heading-line-height-h5);
}