@spaced-out/ui-design-system/lib/styles/typography.module.css

Sense UI components library

@value (
  colorTextPrimary,
  colorTextSecondary,
  colorTextTertiary,
  colorTextDisabled,
  colorTextClickable,
  colorTextNeutral,
  colorTextSuccess,
  colorTextInformation,
  colorTextWarning,
  colorTextDanger,
  colorTextInversePrimary,
  colorTextInverseSecondary,
  colorInformationLightest,
  colorTextFavorite,
  colorFocusPrimary
) from 'variables/_color.css';

@value (
  fontFamilyCentra,
  fontSize46,
  fontSize36,
  fontSize26,
  fontSize18,
  fontSize16,
  fontSize14,
  fontSize13,
  fontSize12,
  fontWeightMedium,
  fontWeightBook,
  fontLineHeight100,
  fontLineHeight120,
  fontLineHeight125,
  fontLineHeight130,
  fontLineHeight140,
  fontLineHeight150,
  fontLineHeight170,
  fontLetterSpacing0,
  fontLetterSpacingMinus1,
  fontLetterSpacingMinus2,
  fontLetterSpacingMinus3,
  fontLetterSpacingMinus4,
  fontLetterSpacing1,
  fontLetterSpacing2,
  fontLetterSpacing4
) from 'variables/_font.css';

@value (size36, size24, size18) from 'variables/_size.css';

@value (spaceXSmall, spaceXXSmall, spaceNone) from 'variables/_space.css';

@value (borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from 'variables/_border.css';

.baseType {
  /* Design system uses this font */
  font-family: 'Centra No 2';
  font-style: normal;
  line-height: fontLineHeight120;
  margin: 0;
  color: colorTextPrimary;
  letter-spacing: fontLetterSpacing0;
  font-weight: fontWeightMedium;
  display: flex;
  align-items: center;
}

.underline {
  text-decoration: underline;
}

.jumboLarge {
  composes: baseType;
  font-size: fontSize46;
  line-height: fontLineHeight100;
  letter-spacing: fontLetterSpacingMinus4;
}

.jumboMedium {
  composes: baseType;
  font-size: fontSize36;
  line-height: fontLineHeight100;
  letter-spacing: fontLetterSpacingMinus3;
}

.jumboSmall {
  composes: baseType;
  font-size: fontSize26;
  line-height: fontLineHeight100;
  letter-spacing: fontLetterSpacingMinus3;
}

.titleMedium {
  composes: baseType;
  font-size: fontSize26;
  letter-spacing: fontLetterSpacingMinus2;
}

.subTitleLarge {
  composes: baseType;
  font-size: fontSize18;
  letter-spacing: fontLetterSpacingMinus1;
}

.subTitleMedium {
  composes: baseType;
  font-size: fontSize16;
  letter-spacing: fontLetterSpacingMinus1;
}

.subTitleSmall {
  composes: baseType;
  font-size: fontSize14;
  letter-spacing: fontLetterSpacingMinus1;
}

.subTitleExtraSmall {
  composes: baseType;
  font-size: fontSize12;
  letter-spacing: fontLetterSpacing0;
  line-height: fontLineHeight140;
}

.buttonTextMedium {
  composes: baseType;
  font-size: fontSize14;
}

.buttonTextSmall {
  composes: baseType;
  font-size: fontSize13;
  letter-spacing: fontLetterSpacing1;
}

.buttonTextExtraSmall {
  composes: baseType;
  font-size: fontSize12;
  letter-spacing: fontLetterSpacing1;
}

.menuTextMedium {
  composes: buttonTextMedium;
  line-height: fontLineHeight130;
  letter-spacing: fontLetterSpacing0;
}

.menuTextSmall {
  composes: buttonTextSmall;
  letter-spacing: fontLetterSpacing0;
  line-height: fontLineHeight130;
}

.formInputMedium {
  composes: baseType;
  font-size: fontSize14;
  line-height: fontLineHeight150;
}

.formInputSmall {
  composes: baseType;
  font-size: fontSize13;
  line-height: fontLineHeight150;
  letter-spacing: fontLetterSpacing1;
}

.bodyLarge {
  composes: baseType;
  font-size: fontSize16;
  font-weight: fontWeightBook;
  line-height: fontLineHeight150;
}

.bodyMedium {
  composes: baseType;
  font-size: fontSize14;
  font-weight: fontWeightBook;
  line-height: fontLineHeight150;
}

.bodySmall {
  composes: baseType;
  font-size: fontSize12;
  font-weight: fontWeightBook;
  line-height: fontLineHeight130;
  letter-spacing: fontLetterSpacing4;
}

.formLabelMedium {
  composes: baseType;
  font-size: fontSize14;
  line-height: fontLineHeight140;
}

.formLabelSmall {
  composes: baseType;
  font-size: fontSize12;
  line-height: fontLineHeight140;
}

.bold {
  font-weight: fontWeightMedium;
}

.primary {
  color: colorTextPrimary;
}

.secondary {
  color: colorTextSecondary;
}

.tertiary {
  color: colorTextTertiary;
}

.disabled {
  color: colorTextDisabled;
}

.clickable {
  color: colorTextClickable;
}

.neutral {
  color: colorTextNeutral;
}

.success {
  color: colorTextSuccess;
}

.information {
  color: colorTextInformation;
}

.warning {
  color: colorTextWarning;
}

.danger {
  color: colorTextDanger;
}

.inversePrimary {
  color: colorTextInversePrimary;
}

.inverseSecondary {
  color: colorTextInverseSecondary;
}

.favorite {
  color: colorTextFavorite;
}

.smallIcon {
  font-size: fontSize14;
  height: size18;
  width: size18;
  min-width: size18;
  min-height: size18;
}

.mediumIcon {
  font-size: fontSize18;
  height: size24;
  width: size24;
  min-width: size24;
  min-height: size24;
}

.largeIcon {
  font-size: fontSize26;
  height: size36;
  width: size36;
  min-width: size36;
  min-height: size36;
}

.centerAlignFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.truncate {
  --line-clamp: 1;
  --word-break: break-all;
  -webkit-line-clamp: var(--line-clamp);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: var(--word-break);
}

.highlightText {
  color: colorTextInformation;
}

.bgHighlighting {
  background-color: colorInformationLightest;
  padding: spaceNone calc(spaceXXSmall / 4);
}

.link {
  border-radius: calc(borderRadiusXSmall / 2);
  cursor: pointer;
  width: fit-content;
  gap: spaceXSmall;
}

.underline {
  text-decoration: underline;
}

.link:focus {
  outline: none;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.disabled {
  pointer-events: none;
  color: colorTextDisabled;
}