@rossigee/clarity-ui 18.2.1-fixed

package/styles/core/typography/_legacy-typography.scss

@@ -0,0 +1,328 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../mixins';
+@use '../typography/mixins.typography' as typography-mixins;
+
+$typography-h0-font-size: 2rem;
+$typography-h0-font-size-static: 2rem;
+$typography-h0-font-weight: 200;
+$typography-h0-font-weight-static: 200;
+$typography-h0-letter-spacing: -0.0125em;
+$typography-h0-letter-spacing-static: -0.0125em;
+$typography-h0-line-height: 1.2em;
+$typography-h0-line-height-static: 1.2em;
+$typography-h1-font-size: 1.6rem;
+$typography-h1-font-size-static: 1.6rem;
+$typography-h1-font-weight: 200;
+$typography-h1-font-weight-static: 200;
+$typography-h1-letter-spacing: -0.0156em;
+$typography-h1-letter-spacing-static: -0.0156em;
+$typography-h1-line-height: 1.5em;
+$typography-h1-line-height-static: 1.5em;
+$typography-h2-font-size: 1.4rem;
+$typography-h2-font-size-static: 1.4rem;
+$typography-h2-font-weight: 200;
+$typography-h2-font-weight-static: 200;
+$typography-h2-letter-spacing: -0.017857em;
+$typography-h2-letter-spacing-static: -0.017857em;
+$typography-h2-line-height: 1.7143em;
+$typography-h2-line-height-static: 1.7143em;
+$typography-h3-font-size: 1.1rem;
+$typography-h3-font-size-static: 1.1rem;
+$typography-h3-font-weight: 200;
+$typography-h3-font-weight-static: 200;
+$typography-h3-letter-spacing: -0.013636em;
+$typography-h3-letter-spacing-static: -0.013636em;
+$typography-h3-line-height: 1.0909em;
+$typography-h3-line-height-static: 1.0909em;
+$typography-h4-font-size: 0.9rem;
+$typography-h4-font-size-static: 0.9rem;
+$typography-h4-font-weight: 200;
+$typography-h4-font-weight-static: 200;
+$typography-h4-letter-spacing: -0.011111em;
+$typography-h4-letter-spacing-static: -0.011111em;
+$typography-h4-line-height: 1.333333em;
+$typography-h4-line-height-static: 1.333333em;
+$typography-h5-font-size: 0.8rem;
+$typography-h5-font-size-static: 0.8rem;
+$typography-h5-font-weight: 400;
+$typography-h5-font-weight-static: 400;
+$typography-h5-letter-spacing: -0.0125em;
+$typography-h5-letter-spacing-static: -0.0125em;
+$typography-h5-line-height: 1.5em;
+$typography-h5-line-height-static: 1.5em;
+$typography-h6-font-size: 0.7rem;
+$typography-h6-font-size-static: 0.7rem;
+$typography-h6-font-weight: 500;
+$typography-h6-font-weight-static: 500;
+$typography-h6-letter-spacing: -0.03125em;
+$typography-h6-letter-spacing-static: -0.03125em;
+$typography-h6-line-height: 1.5em;
+$typography-h6-line-height-static: 1.5em;
+$typography-header-font-family: var(
+  --cds-alias-typography-header-font-family,
+  'Clarity City',
+  'Avenir Next',
+  sans-serif
+);
+$typography-p0-font-size: 1.2rem;
+$typography-p0-font-size-static: 1.2rem;
+$typography-p0-font-weight: 400;
+$typography-p0-font-weight-static: 400;
+$typography-p0-letter-spacing: -0.008333em;
+$typography-p0-letter-spacing-static: -0.008333em;
+$typography-p0-line-height: 1.16667em;
+$typography-p0-line-height-static: 1.16667em;
+$typography-p1-font-size: 0.7rem;
+$typography-p1-font-size-static: 0.7rem;
+$typography-p1-font-weight: 400;
+$typography-p1-font-weight-static: 400;
+$typography-p1-letter-spacing: -0.014286em;
+$typography-p1-letter-spacing-static: -0.014286em;
+$typography-p1-line-height: 1.71429em;
+$typography-p1-line-height-static: 1.71429em;
+$typography-p2-font-size: 0.65rem;
+$typography-p2-font-size-static: 0.65rem;
+$typography-p2-font-weight: 500;
+$typography-p2-font-weight-static: 500;
+$typography-p2-letter-spacing: -0.007692em;
+$typography-p2-letter-spacing-static: -0.007692em;
+$typography-p2-line-height: 1.84615em;
+$typography-p2-line-height-static: 1.84615em;
+$typography-p3-font-size: 0.65rem;
+$typography-p3-font-size-static: 0.65rem;
+$typography-p3-font-weight: 400;
+$typography-p3-font-weight-static: 400;
+$typography-p3-letter-spacing: -0.007692em;
+$typography-p3-letter-spacing-static: -0.007692em;
+$typography-p3-line-height: 1.84615em;
+$typography-p3-line-height-static: 1.84615em;
+$typography-p4-font-size: 0.6rem;
+$typography-p4-font-size-static: 0.6rem;
+$typography-p4-font-weight: 600;
+$typography-p4-font-weight-static: 600;
+$typography-p4-letter-spacing: -0.008333em;
+$typography-p4-letter-spacing-static: -0.008333em;
+$typography-p4-line-height: 2em;
+$typography-p4-line-height-static: 2em;
+$typography-p5-font-size: 0.6rem;
+$typography-p5-font-size-static: 0.6rem;
+$typography-p5-font-weight: 400;
+$typography-p5-font-weight-static: 400;
+$typography-p5-letter-spacing: -0.008333em;
+$typography-p5-letter-spacing-static: -0.008333em;
+$typography-p5-line-height: 2em;
+$typography-p5-line-height-static: 2em;
+$typography-p6-font-size: 0.55rem;
+$typography-p6-font-size-static: 0.55rem;
+$typography-p6-font-weight: 600;
+$typography-p6-font-weight-static: 600;
+$typography-p6-letter-spacing: 0.018182em;
+$typography-p6-letter-spacing-static: 0.018182em;
+$typography-p6-line-height: 1.090909em;
+$typography-p6-line-height-static: 1.090909em;
+$typography-p7-font-size: 0.55rem;
+$typography-p7-font-size-static: 0.55rem;
+$typography-p7-font-weight: 400;
+$typography-p7-font-weight-static: 400;
+$typography-p7-letter-spacing: 0.018182em;
+$typography-p7-letter-spacing-static: 0.018182em;
+$typography-p7-line-height: 1.090909em;
+$typography-p7-line-height-static: 1.090909em;
+$typography-p8-font-size: 0.5rem;
+$typography-p8-font-size-static: 0.5rem;
+$typography-p8-font-weight: 400;
+$typography-p8-font-weight-static: 400;
+$typography-p8-letter-spacing: 0.02em;
+$typography-p8-letter-spacing-static: 0.02em;
+$typography-p8-line-height: 1.2em;
+$typography-p8-line-height-static: 1.2em;
+
+// LEGACY FONT STYLES
+[cds-text*='h0'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h0-line-height-static, $typography-h0-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h0-font-size;
+  font-weight: $typography-h0-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h0-line-height;
+  letter-spacing: $typography-h0-letter-spacing;
+}
+
+[cds-text*='h1'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h1-line-height-static, $typography-h1-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h1-font-size;
+  font-weight: $typography-h1-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h1-line-height;
+  letter-spacing: $typography-h1-letter-spacing;
+}
+
+[cds-text*='h2'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h2-line-height-static, $typography-h2-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h2-font-size;
+  font-weight: $typography-h2-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h2-line-height;
+  letter-spacing: $typography-h2-letter-spacing;
+}
+
+[cds-text*='h3'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h3-line-height-static, $typography-h3-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h3-font-size;
+  font-weight: $typography-h3-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h3-line-height;
+  letter-spacing: $typography-h3-letter-spacing;
+}
+
+[cds-text*='h4'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h4-line-height-static, $typography-h4-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h4-font-size;
+  font-weight: $typography-h4-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h4-line-height;
+  letter-spacing: $typography-h4-letter-spacing;
+}
+
+[cds-text*='h5'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h5-line-height-static, $typography-h5-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h5-font-size;
+  font-weight: $typography-h5-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h5-line-height;
+  letter-spacing: $typography-h5-letter-spacing;
+}
+
+[cds-text*='h6'] {
+  $lh-gap: mixins.getLineHeightGap($typography-h6-line-height-static, $typography-h6-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-family: $typography-header-font-family;
+  font-size: $typography-h6-font-size;
+  font-weight: $typography-h6-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-h6-line-height;
+  letter-spacing: $typography-h6-letter-spacing;
+}
+
+[cds-text*='p0'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p0-line-height-static, $typography-p0-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p0-font-size;
+  font-weight: $typography-p0-font-weight;
+  color: var(--cds-alias-typography-color-500);
+  line-height: $typography-p0-line-height;
+  letter-spacing: $typography-p0-letter-spacing;
+}
+
+[cds-text*='p1'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p1-line-height-static, $typography-p1-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p1-font-size;
+  font-weight: $typography-p1-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p1-line-height;
+  letter-spacing: $typography-p1-letter-spacing;
+}
+
+[cds-text*='p2'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p2-line-height-static, $typography-p2-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p2-font-size;
+  font-weight: $typography-p2-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p2-line-height;
+  letter-spacing: $typography-p2-letter-spacing;
+}
+
+[cds-text*='p3'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p3-line-height-static, $typography-p3-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p3-font-size;
+  font-weight: $typography-p3-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p3-line-height;
+  letter-spacing: $typography-p3-letter-spacing;
+}
+
+[cds-text*='p4'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p4-line-height-static, $typography-p4-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p4-font-size;
+  font-weight: $typography-p4-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p4-line-height;
+  letter-spacing: $typography-p4-letter-spacing;
+}
+
+[cds-text*='p5'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p5-line-height-static, $typography-p5-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p5-font-size;
+  font-weight: $typography-p5-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p5-line-height;
+  letter-spacing: $typography-p5-letter-spacing;
+}
+
+[cds-text*='p6'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p6-line-height-static, $typography-p6-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p6-font-size;
+  font-weight: $typography-p6-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p6-line-height;
+  letter-spacing: $typography-p6-letter-spacing;
+}
+
+[cds-text*='p7'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p7-line-height-static, $typography-p7-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p7-font-size;
+  font-weight: $typography-p7-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p7-line-height;
+  letter-spacing: $typography-p7-letter-spacing;
+}
+
+[cds-text*='p8'] {
+  $lh-gap: mixins.getLineHeightGap($typography-p8-line-height-static, $typography-p8-line-height);
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: $typography-p8-font-size;
+  font-weight: $typography-p8-font-weight;
+  color: var(--cds-alias-typography-color-400);
+  line-height: $typography-p8-line-height;
+  letter-spacing: $typography-p8-letter-spacing;
+}

package/styles/core/typography/_mixins.typography.scss

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../tokens/variables.tokens' as tokens;
+@use '../../mixins';
+
+@mixin LHE($lh-gap: 0.5em) {
+  @include mixins.line-height-eraser(
+    $lh-gap,
+    tokens.$cds-alias-typography-top-gap-height,
+    tokens.$cds-alias-typography-ascender-height,
+    tokens.$cds-alias-typography-x-height
+  );
+}

package/styles/core/typography/_typography.scss

@@ -0,0 +1,321 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../tokens/variables.tokens' as tokens;
+@use '../../mixins';
+@use 'mixins.typography' as typography-mixins;
+
+[cds-text] {
+  font-family: tokens.$cds-alias-typography-font-family;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  // remove as they cause excess gap when combined with cds-layout on the same element
+  &[cds-layout~='vertical'],
+  &[cds-layout~='horizontal'],
+  &[cds-layout~='grid'] {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+[cds-text*='display'],
+[cds-text*='headline'],
+[cds-text*='title'],
+[cds-text*='section'],
+[cds-text*='subsection'] {
+  font-family: tokens.$cds-alias-typography-header-font-family;
+  color: tokens.$cds-alias-typography-color-400;
+}
+
+[cds-text*='body'],
+[cds-text*='message'],
+[cds-text*='secondary'],
+[cds-text*='caption'],
+[cds-text*='smallcaption'] {
+  color: tokens.$cds-alias-typography-color-500;
+}
+
+[cds-text*='inline'] {
+  width: auto !important;
+  display: inline-block !important;
+}
+
+[cds-text*='display'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-display-line-height-static,
+    tokens.$cds-alias-typography-display-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-display-font-size;
+  font-weight: tokens.$cds-alias-typography-display-font-weight;
+  line-height: tokens.$cds-alias-typography-display-line-height;
+  letter-spacing: tokens.$cds-alias-typography-display-letter-spacing;
+}
+
+[cds-text*='headline'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-heading-line-height-static,
+    tokens.$cds-alias-typography-heading-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-heading-font-size;
+  font-weight: tokens.$cds-alias-typography-heading-font-weight;
+  line-height: tokens.$cds-alias-typography-heading-line-height;
+  letter-spacing: tokens.$cds-alias-typography-heading-letter-spacing;
+}
+
+[cds-text*='title'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-title-line-height-static,
+    tokens.$cds-alias-typography-title-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-title-font-size;
+  font-weight: tokens.$cds-alias-typography-title-font-weight;
+  line-height: tokens.$cds-alias-typography-title-line-height;
+  letter-spacing: tokens.$cds-alias-typography-title-letter-spacing;
+}
+
+[cds-text*='section'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-section-line-height-static,
+    tokens.$cds-alias-typography-section-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-section-font-size;
+  font-weight: tokens.$cds-alias-typography-section-font-weight;
+  line-height: tokens.$cds-alias-typography-section-line-height;
+  letter-spacing: tokens.$cds-alias-typography-section-letter-spacing;
+}
+
+[cds-text*='subsection'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-subsection-line-height-static,
+    tokens.$cds-alias-typography-subsection-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-subsection-font-size;
+  font-weight: tokens.$cds-alias-typography-subsection-font-weight;
+  line-height: tokens.$cds-alias-typography-subsection-line-height;
+  letter-spacing: tokens.$cds-alias-typography-subsection-letter-spacing;
+}
+
+[cds-text*='body'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-body-line-height-static,
+    tokens.$cds-alias-typography-body-line-height
+  );
+  @include mixins.line-height-eraser(
+    $lh-gap,
+    tokens.$cds-alias-typography-top-gap-height,
+    tokens.$cds-alias-typography-ascender-height,
+    tokens.$cds-alias-typography-x-height,
+    0.1em
+  );
+
+  font-weight: tokens.$cds-alias-typography-body-font-weight;
+  font-size: tokens.$cds-alias-typography-body-font-size;
+  letter-spacing: tokens.$cds-alias-typography-body-letter-spacing;
+  line-height: tokens.$cds-alias-typography-body-line-height;
+}
+
+// remove extra margin on the body tag to avoid an unnecessary scrollbar
+body[cds-text*='body'] {
+  @include mixins.remove-line-height-erasers;
+}
+
+[cds-text*='message'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-message-line-height-static,
+    tokens.$cds-alias-typography-message-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-message-font-size;
+  font-weight: tokens.$cds-alias-typography-message-font-weight;
+  line-height: tokens.$cds-alias-typography-message-line-height;
+  letter-spacing: tokens.$cds-alias-typography-message-letter-spacing;
+}
+
+[cds-text*='secondary'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-secondary-line-height-static,
+    tokens.$cds-alias-typography-secondary-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-secondary-font-size;
+  font-weight: tokens.$cds-alias-typography-secondary-font-weight;
+  line-height: tokens.$cds-alias-typography-secondary-line-height;
+  letter-spacing: tokens.$cds-alias-typography-secondary-letter-spacing;
+}
+
+[cds-text*='caption'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-caption-line-height-static,
+    tokens.$cds-alias-typography-caption-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-caption-font-size;
+  font-weight: tokens.$cds-alias-typography-caption-font-weight;
+  line-height: tokens.$cds-alias-typography-caption-line-height;
+  letter-spacing: tokens.$cds-alias-typography-caption-letter-spacing;
+}
+
+[cds-text*='smallcaption'] {
+  $lh-gap: mixins.getLineHeightGap(
+    tokens.$cds-alias-typography-smallcaption-line-height-static,
+    tokens.$cds-alias-typography-smallcaption-line-height
+  );
+  @include typography-mixins.LHE($lh-gap);
+
+  font-size: tokens.$cds-alias-typography-smallcaption-font-size;
+  font-weight: tokens.$cds-alias-typography-smallcaption-font-weight;
+  line-height: tokens.$cds-alias-typography-smallcaption-line-height;
+  letter-spacing: tokens.$cds-alias-typography-smallcaption-letter-spacing;
+}
+
+[cds-text~='link'] {
+  color: tokens.$cds-alias-typography-link-color !important;
+  text-decoration: underline !important;
+  line-height: inherit !important;
+  font-size: inherit !important;
+
+  &:focus {
+    outline: #{tokens.$cds-alias-object-interaction-outline};
+    outline-offset: #{tokens.$cds-alias-object-interaction-outline-offset};
+  }
+
+  &:hover {
+    color: tokens.$cds-alias-typography-link-color-hover !important;
+  }
+
+  &:visited:not([cds-text~='static']),
+  &[cds-text~='visited'] {
+    color: tokens.$cds-alias-typography-link-color-visited !important;
+
+    &:hover {
+      color: tokens.$cds-alias-typography-link-color-visited-hover !important;
+    }
+  }
+}
+
+[cds-text='link']:focus {
+  outline: #{tokens.$cds-alias-object-interaction-outline-webkit};
+}
+
+[cds-text~='code'] {
+  color: tokens.$cds-alias-status-danger;
+  font-family: monospace;
+}
+
+// font-weight
+
+[cds-text~='extrabold'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-extrabold !important;
+}
+
+[cds-text~='bold'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-bold !important;
+}
+
+[cds-text~='semibold'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-semibold !important;
+}
+
+[cds-text~='medium'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-medium !important;
+}
+
+[cds-text~='regular'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-regular !important;
+}
+
+[cds-text~='light'] {
+  font-weight: tokens.$cds-alias-typography-font-weight-light !important;
+}
+
+// transforms
+
+[cds-text~='capitalize'] {
+  text-transform: capitalize !important;
+}
+
+[cds-text~='uppercase'] {
+  text-transform: uppercase !important;
+}
+
+[cds-text~='lowercase'] {
+  text-transform: lowercase !important;
+}
+
+// truncation
+
+[cds-text~='truncate'] {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  @include mixins.remove-line-height-erasers;
+}
+
+// alignment
+
+[cds-text~='justify'] {
+  text-align: justify !important;
+}
+
+[cds-text~='left'] {
+  text-align: left !important;
+}
+
+[cds-text~='right'] {
+  text-align: right !important;
+}
+
+[cds-text~='center'] {
+  text-align: center !important;
+}
+
+// monospace
+[cds-text~='monospace'] {
+  font-family: tokens.$cds-alias-typography-monospace-font-family;
+}
+
+// https://seek-oss.github.io/capsize/
+[cds-text~='lhe'] {
+  /* stylelint-disable-next-line meowtec/no-px */
+  padding: 0.05px 0;
+
+  &::before {
+    content: '';
+    margin-top: -0.124em;
+    display: block;
+    height: 0;
+  }
+
+  &::after {
+    content: '';
+    margin-bottom: -0.221em;
+    display: block;
+    height: 0;
+  }
+}
+
+// remove line-height eraser from element
+[cds-layout~='disable-lhe'],
+[cds-text~='disable-lhe'] {
+  @include mixins.remove-line-height-erasers;
+}