wix-style-react/dist/src/Foundation/stylable/typography.st.css

wix-style-react

@st-namespace "StylableTypography";

@property st-global(--wsr-font-family); 
@property st-global(--wsr-font-weight-regular); 
@property st-global(--wsr-font-weight-medium); 
@property st-global(--wsr-font-weight-bold);
@property st-global(--wsr-text-font-size-tiny); 
@property st-global(--wsr-text-font-size-small); 
@property st-global(--wsr-text-font-size-medium);
@property st-global(--wsr-text-line-height-tiny); 
@property st-global(--wsr-text-line-height-small); 
@property st-global(--wsr-text-line-height-medium);
@property st-global(--wsr-heading-font-size-h1); 
@property st-global(--wsr-heading-font-size-h2); 
@property st-global(--wsr-heading-font-size-h3); 
@property st-global(--wsr-heading-font-size-h4);
@property st-global(--wsr-heading-font-size-h5); 
@property st-global(--wsr-heading-font-size-h6); 
@property st-global(--wsr-heading-line-height-h1);
@property st-global(--wsr-heading-line-height-h2);
@property st-global(--wsr-heading-line-height-h3); 
@property st-global(--wsr-heading-line-height-h4);
@property st-global(--wsr-heading-line-height-h5);
@property st-global(--wsr-heading-line-height-h6); 
@property st-global(--wsr-caption-font-size-1);
@property st-global(--wsr-caption-line-height-1); 
@property st-global(--wsr-heading-font-size-xl); 
@property st-global(--wsr-heading-font-size-l); 
@property st-global(--wsr-heading-font-size-m);
@property st-global(--wsr-heading-font-size-s); 
@property st-global(--wsr-heading-font-size-t); 
@property st-global(--wsr-heading-font-size-xt); 
@property st-global(--wsr-heading-line-height-xl);
@property st-global(--wsr-heading-line-height-l); 
@property st-global(--wsr-heading-line-height-m); 
@property st-global(--wsr-heading-line-height-s);
@property st-global(--wsr-heading-line-height-t);
@property st-global(--wsr-heading-line-height-xt);


@st-import [
  --wds-font-family-default, 
  --wds-font-size-body-extra-tiny,
  --wds-font-size-body-tiny, 
  --wds-font-size-body-small,
  --wds-font-size-body-medium,
  --wds-font-size-heading-1,
  --wds-font-size-heading-2,
  --wds-font-size-heading-3,
  --wds-font-size-heading-4,
  --wds-font-size-heading-5,
  --wds-font-size-heading-6,
  --wds-font-weight-bold,
  --wds-font-weight-medium,
  --wds-font-weight-regular,
  --wds-font-line-height-heading-1,
  --wds-font-line-height-heading-2,
  --wds-font-line-height-heading-3,
  --wds-font-line-height-heading-4,
  --wds-font-line-height-heading-5,
  --wds-font-line-height-heading-6,
  --wds-font-line-height-body-medium,
  --wds-font-line-height-body-small,
  --wds-font-line-height-body-tiny, 
  --wds-font-line-height-body-extra-tiny,
  --wds-font-weight-heading-1,
  --wds-font-weight-heading-2,
  --wds-font-weight-heading-3,
  --wds-font-weight-heading-4,
  --wds-font-weight-heading-5,
  --wds-font-weight-heading-6,
  --wds-font-letter-spacing-heading-1,
  --wds-font-letter-spacing-heading-2,
  --wds-font-letter-spacing-heading-3,
  --wds-font-letter-spacing-heading-4,
  --wds-font-letter-spacing-heading-5,
  --wds-font-letter-spacing-heading-6,
  --wds-font-letter-spacing-0,
  ] from "@wix/design-system-tokens/all.st.css";

: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: 32px;
  wsr-heading-font-size-h2: 24px;
  wsr-heading-font-size-h3: 20px;
  wsr-heading-font-size-h4: 18px;
  wsr-heading-font-size-h5: 12px;
  wsr-heading-font-size-h6: 10px;

  wsr-heading-font-size-xl: 28px;
  wsr-heading-font-size-l: 21px;
  wsr-heading-font-size-m: 18px;
  wsr-heading-font-size-s: 18px;
  wsr-heading-font-size-t: 15px;
  wsr-heading-font-size-xt: 12px;

  /** Heading Line Height **/
  wsr-heading-line-height-h1: 42px;
  wsr-heading-line-height-h2: 30px;
  wsr-heading-line-height-h3: 24px;
  wsr-heading-line-height-h4: 24px;
  wsr-heading-line-height-h5: 24px;
  wsr-heading-line-height-h6: 18px;

  wsr-heading-line-height-xl: 36px;
  wsr-heading-line-height-l: 28px;
  wsr-heading-line-height-m: 24px;
  wsr-heading-line-height-s: 24px;
  wsr-heading-line-height-t: 24px;
  wsr-heading-line-height-xt: 15px;

  /** Caption Font Sizes */
  wsr-caption-font-size-1: 10px;

  /** Caption Font Sizes */
  wsr-caption-line-height-1: 12px;
}

/* Text Typography API */
.text-extra-tiny-thin {
  font-family: var(--wds-font-family-default);
  font-size: var(--wds-font-size-body-extra-tiny);
  font-weight: var(--wds-font-weight-regular);
  line-height: var(--wds-font-line-height-body-extra-tiny);
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-extra-tiny-normal {
  font-family: var(--wds-font-family-default);
  font-size: var(--wds-font-size-body-extra-tiny);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-font-line-height-body-extra-tiny);
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-extra-tiny-bold {
  font-family: var(--wds-font-family-default);
  font-size: var(--wds-font-size-body-extra-tiny);
  font-weight: var(--wds-font-weight-bold);
  line-height: var(--wds-font-line-height-body-extra-tiny);
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-tiny-thin {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, value(wsr-text-font-size-tiny)));
  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, value(wsr-font-weight-regular)));
  line-height: var(--wds-font-line-height-body-tiny , var(--wsr-text-line-height-tiny, value(wsr-text-line-height-tiny)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-tiny-normal {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, value(wsr-text-font-size-tiny)));
  font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-body-tiny , var(--wsr-text-line-height-tiny, value(wsr-text-line-height-tiny)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-tiny-bold {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, value(wsr-text-font-size-tiny)));
  font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-body-tiny , var(--wsr-text-line-height-tiny, value(wsr-text-line-height-tiny)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-small-thin {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, value(wsr-text-font-size-small)));
  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, value(wsr-font-weight-regular)));
  line-height: var(--wds-font-line-height-body-small , var(--wsr-text-line-height-small, value(wsr-text-line-height-small)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-small-normal {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, value(wsr-text-font-size-small)));
  font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-body-small , var(--wsr-text-line-height-small, value(wsr-text-line-height-small)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-small-bold {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, value(wsr-text-font-size-small)));
  font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-body-small , var(--wsr-text-line-height-small, value(wsr-text-line-height-small)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-medium-thin {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, value(wsr-text-font-size-medium)));
  font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, value(wsr-font-weight-regular)));
  line-height: var(--wds-font-line-height-body-medium , var(--wsr-text-line-height-medium, value(wsr-text-line-height-medium)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-medium-normal {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, value(wsr-text-font-size-medium)));
  font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-body-medium , var(--wsr-text-line-height-medium, value(wsr-text-line-height-medium)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

.text-medium-bold {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, value(wsr-text-font-size-medium)));
  font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-body-medium , var(--wsr-text-line-height-medium, value(wsr-text-line-height-medium)));
  letter-spacing: var(--wds-font-letter-spacing-0, unset);
}

/* Heading Typography API */

.heading-h1 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-1, var(--wsr-heading-font-size-h1, value(wsr-heading-font-size-h1)));
  font-weight: var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-1, var(--wsr-heading-line-height-h1, value(wsr-heading-line-height-h1)));
  letter-spacing: var(--wds-font-letter-spacing-heading-1, unset);

}

.heading-h2 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-2, var(--wsr-heading-font-size-h2, value(wsr-heading-font-size-h2)));
  font-weight: var(--wds-font-weight-heading-2, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-h2, value(wsr-heading-line-height-h2)));
  letter-spacing: var(--wds-font-letter-spacing-heading-2, unset);
}

.heading-h3 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-3, var(--wsr-heading-font-size-h3, value(wsr-heading-font-size-h3)));
  font-weight: var(--wds-font-weight-heading-3, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-3, var(--wsr-heading-line-height-h3, value(wsr-heading-line-height-h3)));
  letter-spacing: var(--wds-font-letter-spacing-heading-3, unset);
}

.heading-h4 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-4, var(--wsr-heading-font-size-h4, value(wsr-heading-font-size-h4)));
  font-weight: var(--wds-font-weight-heading-4, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-heading-4, var(--wsr-heading-line-height-h4, value(wsr-heading-line-height-h4)));
  letter-spacing: var(--wds-font-letter-spacing-heading-4, unset);
}

.heading-h5 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-5, var(--wsr-heading-font-size-h5, value(wsr-heading-font-size-h5)));
  font-weight: var(--wds-font-weight-heading-5, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-5, var(--wsr-heading-line-height-h5, value(wsr-heading-line-height-h5)));
  letter-spacing: var(--wds-font-letter-spacing-heading-5, unset);
}

.heading-h6 {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-6, var(--wsr-heading-font-size-h6, value(wsr-heading-font-size-h6)));
  font-weight: var(--wds-font-weight-heading-6, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-6, var(--wsr-heading-line-height-h6, value(wsr-heading-line-height-h6)));
  letter-spacing: var(--wds-font-letter-spacing-heading-6, unset);
}

.heading-xl {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-1, var(--wsr-heading-font-size-xl, value(wsr-heading-font-size-xl)));
  font-weight: var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-1, var(--wsr-heading-line-height-xl, value(wsr-heading-line-height-xl)));
  letter-spacing: var(--wds-font-letter-spacing-heading-1, unset);
}

.heading-l {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-2, var(--wsr-heading-font-size-l, value(wsr-heading-font-size-l)));
  font-weight: var(--wds-font-weight-heading-2, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-l, value(wsr-heading-line-height-l)));
  letter-spacing: var(--wds-font-letter-spacing-heading-2, unset);
}

.heading-m {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-3, var(--wsr-heading-font-size-m, value(wsr-heading-font-size-m)));
  font-weight: var(--wds-font-weight-heading-3, var(--wsr-font-weight-bold, value(wsr-font-weight-bold)));
  line-height: var(--wds-font-line-height-heading-3, var(--wsr-heading-line-height-m, value(wsr-heading-line-height-m)));
  letter-spacing: var(--wds-font-letter-spacing-heading-3, unset);
}

.heading-s {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-4, var(--wsr-heading-font-size-s, value(wsr-heading-font-size-s)));
  font-weight: var(--wds-font-weight-heading-4, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-heading-4, var(--wsr-heading-line-height-s, value(wsr-heading-line-height-s)));
  letter-spacing: var(--wds-font-letter-spacing-heading-4, unset);
}

.heading-t {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-5, var(--wsr-heading-font-size-t, value(wsr-heading-font-size-t)));
  font-weight: var(--wds-font-weight-heading-5, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-heading-5, var(--wsr-heading-line-height-t, value(wsr-heading-line-height-t)));
  letter-spacing: var(--wds-font-letter-spacing-heading-5, unset);
}

.heading-xt {
  font-family: var(--wds-font-family-default, var(--wsr-font-family, value(wsr-font-family)));
  font-size: var(--wds-font-size-heading-6, var(--wsr-heading-font-size-xt, value(wsr-heading-font-size-xt)));
  font-weight: var(--wds-font-weight-heading-6, var(--wsr-font-weight-medium, value(wsr-font-weight-medium)));
  line-height: var(--wds-font-line-height-heading-6, var(--wsr-heading-line-height-xt, value(wsr-heading-line-height-xt)));
  letter-spacing: var(--wds-font-letter-spacing-heading-6, unset);
}

/* Caption */

.caption-1 {
  font-family: var(--wsr-font-family, value(wsr-font-family));
  font-weight: var(--wsr-font-weight-bold, value(wsr-font-weight-bold));
  font-size: var(--wsr-caption-font-size-1, value(wsr-caption-font-size-1));
  line-height: var(--wsr-caption-line-height-1, value(wsr-caption-line-height-1));
}

/* st-namespace-reference="../../../../src/Foundation/stylable/typography.st.css" */