package.components.Title.title.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
@use '../../sass-utilities' as *;

@include pf-root($title) {
  --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);

  // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
  // 4xl
  --#{$title}--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
  --#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // 3xl
  --#{$title}--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
  --#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // 2xl
  --#{$title}--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
  --#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // xl
  --#{$title}--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
  --#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // lg
  --#{$title}--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
  --#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // md
  --#{$title}--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
  --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // HEADING modifiers
  // h1
  --#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
  --#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // h2
  --#{$title}--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
  --#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // h3
  --#{$title}--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
  --#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // h4
  --#{$title}--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
  --#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // h5
  --#{$title}--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
  --#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // h6
  --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
  --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
}

.#{$title} {
  font-family: var(--#{$title}--FontFamily);
  word-break: break-word;

  &.pf-m-4xl {
    font-size: var(--#{$title}--m-4xl--FontSize);
    font-weight: var(--#{$title}--m-4xl--FontWeight);
    line-height: var(--#{$title}--m-4xl--LineHeight);
  }

  &.pf-m-3xl {
    font-size: var(--#{$title}--m-3xl--FontSize);
    font-weight: var(--#{$title}--m-3xl--FontWeight);
    line-height: var(--#{$title}--m-3xl--LineHeight);
  }

  &.pf-m-2xl {
    font-size: var(--#{$title}--m-2xl--FontSize);
    font-weight: var(--#{$title}--m-2xl--FontWeight);
    line-height: var(--#{$title}--m-2xl--LineHeight);
  }

  &.pf-m-xl {
    font-size: var(--#{$title}--m-xl--FontSize);
    font-weight: var(--#{$title}--m-xl--FontWeight);
    line-height: var(--#{$title}--m-xl--LineHeight);
  }

  &.pf-m-lg {
    font-size: var(--#{$title}--m-lg--FontSize);
    font-weight: var(--#{$title}--m-lg--FontWeight);
    line-height: var(--#{$title}--m-lg--LineHeight);
  }

  &.pf-m-md {
    font-size: var(--#{$title}--m-md--FontSize);
    font-weight: var(--#{$title}--m-md--FontWeight);
    line-height: var(--#{$title}--m-md--LineHeight);
  }

  &.pf-m-h1 {
    font-size: var(--#{$title}--m-h1--FontSize);
    font-weight: var(--#{$title}--m-h1--FontWeight);
    line-height: var(--#{$title}--m-h1--LineHeight);
  }

  &.pf-m-h2 {
    font-size: var(--#{$title}--m-h2--FontSize);
    font-weight: var(--#{$title}--m-h2--FontWeight);
    line-height: var(--#{$title}--m-h2--LineHeight);
  }

  &.pf-m-h3 {
    font-size: var(--#{$title}--m-h3--FontSize);
    font-weight: var(--#{$title}--m-h3--FontWeight);
    line-height: var(--#{$title}--m-h3--LineHeight);
  }

  &.pf-m-h4 {
    font-size: var(--#{$title}--m-h4--FontSize);
    font-weight: var(--#{$title}--m-h4--FontWeight);
    line-height: var(--#{$title}--m-h4--LineHeight);
  }

  &.pf-m-h5 {
    font-size: var(--#{$title}--m-h5--FontSize);
    font-weight: var(--#{$title}--m-h5--FontWeight);
    line-height: var(--#{$title}--m-h5--LineHeight);
  }

  &.pf-m-h6 {
    font-size: var(--#{$title}--m-h6--FontSize);
    font-weight: var(--#{$title}--m-h6--FontWeight);
    line-height: var(--#{$title}--m-h6--LineHeight);
  }
}