@rossigee/clarity-ui 18.2.1-fixed

package/styles/_components.clarity.scss

@@ -0,0 +1,183 @@
+/*
+ * 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.
+ */
+
+// Clarity Internal Dependencies
+
+@forward '../styles/normalize'; // TODO: upgrade to latest normalize, once updated clr-ui can import core as is.
+@forward '../styles/mixins';
+@forward '../styles/variables/variables';
+@forward '../styles/variables/properties';
+@forward '../styles/core/global.scss';
+
+// Layout/Grid
+
+@forward '../layout/grid/grid';
+@forward '../typography/typography';
+
+// Component variables
+
+@forward '../styles/variables.clarity';
+
+//Reboot
+
+@forward '../styles/reboot.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+@forward '../styles/a11y';
+
+//Icons & Images
+
+@forward '../image/icons.clarity'; // depends on variables.clarity
+@forward '../image/images.clarity'; // depends on variables.clarity, mixins.clarity, icons.clarity
+
+//Popover
+
+@forward '../popover/common/popover.clarity';
+
+//Buttons
+
+@forward '../button/buttons.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity
+@forward '../button/button-group/button-group.clarity'; // depends on variables.clarity, mixins.clarity
+@forward '../styles/close.clarity'; //depends on variables.clarity, mixins.clarity
+
+//Alerts
+//depends on variables.clarity, mixins.clarity, color.clarity, icons.clarity, buttons.clarity
+
+@forward '../emphasis/alert/alert.clarity';
+
+//Cards
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, list-group.clarity, buttons.clarity
+
+@forward '../layout/card.clarity';
+
+//Dropdowns
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+
+@forward '../popover/dropdown/dropdown.clarity';
+
+//Login
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, icons.clarity
+
+@forward '../layout/login.clarity';
+
+//Layout
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@forward '../layout/main-container/layout.clarity';
+
+//Modal
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@forward '../modal/modal.clarity';
+
+//Nav
+
+@forward '../layout/nav/header.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@forward '../layout/nav/links.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+@forward '../layout/nav/nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@forward '../layout/nav/subnav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@forward '../layout/vertical-nav/vertical-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+@forward '../layout/nav/responsive-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+//Badges
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity
+
+@forward '../emphasis/badge/badges.clarity';
+
+//Labels
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity, badges.clarity
+
+@forward '../emphasis/label/labels.clarity';
+
+//Progress Bars
+//depends on variables.clarity, helpers.clarity, color.clarity, cards.clarity
+
+@forward '../progress/progress-bars/progress-bars.clarity';
+
+//Spinners
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, icons.clarity
+
+@forward '../progress/spinner/spinner.clarity';
+
+//Tables
+//depends on variables.clarity, mixins.clarity, helpers.clarity, typography.clarity
+
+@forward '../data/tables.clarity';
+
+//Tooltips
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+
+@forward '../popover/tooltip/tooltips.clarity';
+
+//Forms
+
+@forward '../forms/styles/mixins.forms';
+@forward '../forms/styles/properties.forms';
+@forward '../forms/styles/containers.clarity';
+@forward '../forms/styles/form.clarity';
+@forward '../forms/styles/checkbox.clarity';
+@forward '../forms/styles/file.clarity';
+@forward '../forms/styles/file-input.clarity';
+@forward '../forms/styles/input.clarity';
+@forward '../forms/styles/input-group.clarity';
+@forward '../forms/styles/radio.clarity';
+@forward '../forms/styles/select.clarity';
+@forward '../forms/styles/textarea.clarity';
+@forward '../forms/styles/toggles.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+@forward '../forms/styles/range.clarity';
+@forward '../forms/styles/datalist.clarity';
+@forward '../forms/styles/password.clarity';
+@forward '../forms/styles/number-input.clarity';
+@forward '../forms/datepicker/datepicker.clarity';
+@forward '../forms/combobox/combobox.clarity';
+
+//Stack View
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, forms.clarity
+
+@forward '../data/stack-view/stack-view.clarity';
+
+//Tree View
+//depends on variables.clarity, mixins.clarity, helpers.clarity, forms.clarity
+
+@forward '../data/tree-view/tree-view.clarity';
+
+//Datagrid
+//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity, forms.clarity
+
+@forward '../data/datagrid/datagrid.clarity';
+
+//Animations
+// no dependencies on other clarity scss
+
+@forward '../utils/animations/animations.clarity';
+
+//Tabs
+
+@forward '../layout/tabs/tabs.clarity'; // no dependencies on other clarity scss
+
+//Wizards
+// depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@forward '../wizard/wizard.clarity';
+
+// Signposts
+
+@forward '../popover/signpost/signposts.clarity';
+
+// Accordion
+
+@forward '../accordion/accordion.clarity';
+
+// Stepper
+
+@forward '../stepper/stepper.clarity';
+
+// Timeline
+
+@forward '../timeline/timeline.clarity';
+
+// Breadcrumbs
+
+@forward '../layout/breadcrumbs/breadcrumbs.clarity';

package/styles/_mixins.scss

@@ -0,0 +1,478 @@
+/*
+ * 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 'sass:list';
+@use 'sass:map';
+@use 'sass:selector';
+@use 'variables/variables';
+
+//Credit: Zurb Foundation for Apps https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
+//Keep track of modules that have been imported, so we don't import more than once
+$imported-modules: () !default;
+
+@mixin exports($name) {
+  //check if they have been imported
+
+  @if (not list.index($imported-modules, $name)) {
+    $imported-modules: list.append($imported-modules, $name) !global;
+    @content;
+  }
+}
+@mixin include-outline-style-form-fields($offset: var(--cds-alias-object-interaction-outline-offset)) {
+  outline: var(--cds-alias-object-interaction-outline);
+  outline-color: -webkit-focus-ring-color;
+  outline-offset: $offset;
+}
+@mixin include-slim-outline-style-form-fields($width: var(--cds-global-space-2)) {
+  outline-color: Highlight;
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+  outline-width: $width;
+}
+@mixin overflow-ellipsis($leftAlignment: false) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @if $leftAlignment == true {
+    text-align: left;
+    justify-content: start;
+  }
+}
+@mixin off-screen-styles() {
+  position: fixed !important;
+  border: none !important;
+  height: 1px !important;
+  width: 1px !important;
+  left: 0 !important;
+  top: calc(-1 * var(--cds-global-space-1)) !important;
+  overflow: hidden !important;
+  visibility: hidden !important;
+  padding: 0 !important;
+  margin: 0 0 calc(-1 * var(--cds-global-space-1)) !important;
+}
+@mixin focus-within() {
+  &:focus-within,
+  &.focus-within {
+    outline: var(--cds-global-space-2) solid Highlight;
+  }
+
+  @media (-min-device-pixel-ratio: 0) {
+    &:focus-within,
+    &.focus-within {
+      outline: baselinePx(5) auto -webkit-focus-ring-color;
+    }
+  }
+}
+@mixin equilateral($size: 1.2rem) {
+  height: $size;
+  width: $size;
+}
+@mixin min-equilateral($size: 1.2rem) {
+  @include equilateral($size);
+
+  min-height: $size;
+  min-width: $size;
+}
+@mixin max-equilateral($size: 1.2rem) {
+  @include equilateral($size);
+
+  max-height: $size;
+  max-width: $size;
+}
+@mixin clr-appearance-normal() {
+  appearance: none;
+  background: none;
+}
+@mixin clr-no-styles-button {
+  @include clr-appearance-normal();
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+
+  @at-root button#{&} {
+    cursor: pointer;
+  }
+}
+
+//Dropdowns & Tooltips
+$opp-directions: (
+  top: bottom,
+  bottom: top,
+  left: right,
+  right: left,
+);
+
+@mixin clr-container() {
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+// Moves styles outside of any parent selector conditionally,
+// while allowing an additional selector to be appended.
+
+@mixin optional-at-root($selector) {
+  // Check if parent selector exists
+
+  @if & {
+    // Append the additional selector to the parent selector
+
+    @at-root #{selector.append(&, $selector)} {
+      @content;
+    }
+  } @else {
+    // Use the parent selector with the additional selector
+
+    @at-root #{$selector} {
+      @content;
+    }
+  }
+}
+
+// Declaring CSS in :root or :host depending which is available
+// Enabling tokens to work under Global DOM or Shadow DOM
+@mixin root-or-host() {
+  :where(:root, :host) {
+    @content;
+  }
+}
+@mixin input-placeholder-wrapper() {
+  @include optional-at-root('::-webkit-input-placeholder') {
+    @content;
+  }
+
+  @include optional-at-root('::placeholder') {
+    @content;
+  }
+}
+
+@function baselinePx($pixels: 0) {
+  @return calc($pixels * (1rem / var(--cds-global-base)));
+}
+
+$typography-tokens: (
+  'DISPLAY-40': (
+    // H1, Login Header
+    font-size: #{variables.$clr-base-typography-font-size-display},
+    font-weight: var(--cds-alias-typography-display-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-44},
+    letter-spacing: #{baselinePx(-0.5)},
+  ),
+  'HEADLINE-32': (
+    // H2, Page Header
+    font-size: #{variables.$clr-base-typography-font-size-headline},
+    font-weight: var(--cds-alias-typography-headline-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-36},
+    letter-spacing: #{baselinePx(-0.4)},
+  ),
+  'TITLE-24-EXP': (
+    // H3, Modal, Wizard Heading
+    font-size: #{variables.$clr-base-typography-font-size-heading},
+    font-weight: var(--cds-alias-typography-title-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-32},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'SECTION-20-STD': (
+    // H4, Card, Signpost Heading, Wizard Sidenav Title
+    font-size: #{variables.$clr-base-typography-font-size-section},
+    font-weight: var(--cds-alias-typography-section-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'SECTION-12-SB-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-button},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'SUBSECTION-16-EXP': (
+    // H5, Stack View Heading
+    font-size: #{variables.$clr-base-typography-font-size-sub-section},
+    font-weight: var(--cds-alias-typography-subsection-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'SUBSECTION-16-SB': (
+    font-size: #{variables.$clr-base-typography-font-size-sub-section},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'MESSAGE-16-EXP': (
+    // H6, Heading
+    font-size: #{variables.$clr-base-typography-font-size-sub-section},
+    font-weight: var(--cds-alias-typography-message-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.2)},
+  ),
+  'BODY-14-SB-STD': (
+    // Not used yet
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-20},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'BODY-14-MD-STD': (
+    // Wizard sidenav link
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-font-weight-medium),
+    line-height: #{variables.$clr-base-typography-line-height-20},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'BODY-14-RG-STD': (
+    // P0, P1, Body text
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-body-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-20},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'BODY-14-RG-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-body-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'BODY-14-RG-EXP': (
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-body-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'BODY-14-SB-EXP': (
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-14-RG-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-default},
+    font-weight: var(--cds-alias-typography-secondary-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-MD-EXP': (
+    // P2, Section Header
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-font-weight-medium),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-RG-CPT': (
+    // Checkbox and radio labels, Spinner
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-secondary-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-RG-EXP': (
+    // P3, Form Labels and Column Headers
+    // P5, Table footer and chart data
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-secondary-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-24},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-RG-STD': (
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-secondary-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-20},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-SB-STD': (
+    // P4, Form Labels and Column Headers
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-20},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-MD-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-font-weight-medium),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'SECONDARY-13-SB-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-inline},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(-0.1)},
+  ),
+  'CAPTION-LG-11-STD': (
+    // P6, Small Headers
+    font-size: #{variables.$clr-base-typography-font-size-caption},
+    font-weight: var(--cds-alias-typography-caption-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(0.2)},
+  ),
+  'CAPTION-LG-11-CPT': (
+    // Badges, Tag and Labels
+    font-size: #{variables.$clr-base-typography-font-size-caption},
+    font-weight: var(--cds-alias-typography-caption-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-12},
+    letter-spacing: #{baselinePx(0.2)},
+  ),
+  'ColumnHeader-11-SB-CPT': (
+    font-size: #{variables.$clr-base-typography-font-size-caption},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(0.2)},
+  ),
+  'CAPTION-SM-10': (
+    // P7, P8
+    font-size: #{variables.$clr-base-typography-font-size-caption-small},
+    font-weight: var(--cds-alias-typography-smallcaption-font-weight),
+    line-height: #{variables.$clr-base-typography-line-height-12},
+    letter-spacing: #{baselinePx(0.5)},
+  ),
+  'BUTTON-12': (
+    // Buttons
+    font-size: #{variables.$clr-base-typography-font-size-button},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: var(--cds-global-space-1),
+    text-transform: uppercase,
+  ),
+  'BUTTON-11-SMALL': (
+    // Small Buttons
+    font-size: #{variables.$clr-base-typography-font-size-caption},
+    font-weight: var(--cds-alias-typography-font-weight-semibold),
+    line-height: #{variables.$clr-base-typography-line-height-16},
+    letter-spacing: #{baselinePx(0.2)},
+    text-transform: uppercase,
+  ),
+);
+
+@mixin setValue($key, $map: (), $value) {
+  @if (map.has-key($map, $key)) {
+    #{$key}: map.get($map, $key);
+  } @else {
+    #{$key}: $value;
+  }
+}
+@mixin generate-typography-header-token($name, $fallbacks: (), $addFontFamily: true, $addColor: true) {
+  @if ($addFontFamily) {
+    @include setValue(
+      font-family,
+      $fallbacks,
+      variables.$clr-font
+    ); // tokens.$cds-alias-typography-header-font-family);
+  }
+  @if ($addColor) {
+    @include setValue(color, $fallbacks, var(--cds-alias-typography-color-300));
+  }
+
+  @include generate-typography-token($name, $fallbacks);
+}
+@mixin generate-typography-body-token($name, $fallbacks: (), $addFontFamily: true, $addColor: true) {
+  @if ($addFontFamily) {
+    @include setValue(font-family, $fallbacks, variables.$clr-font); // tokens.$cds-alias-typography-font-family);
+  }
+  @if ($addColor) {
+    @include setValue(color, $fallbacks, var(--cds-alias-typography-color-450));
+  }
+
+  @include generate-typography-token($name, $fallbacks);
+}
+@mixin generate-typography-token($name, $fallbacks: ()) {
+  @each $key, $value in map.get($typography-tokens, $name) {
+    @include setValue($key, $fallbacks, $value);
+  }
+}
+@mixin cell-children-aligment() {
+  cds-icon,
+  clr-icon {
+    margin-top: calc((-1 * var(--cds-global-space-3)) - var(--cds-global-space-1));
+    margin-bottom: calc(-1 * var(--cds-global-space-3));
+  }
+
+  .badge {
+    margin-top: calc(-1 * var(--cds-global-space-3));
+    margin-bottom: calc(-1 * var(--cds-global-space-1));
+  }
+}
+
+// a11y
+@mixin screen-reader-only() {
+  position: absolute;
+  clip-path: inset(50%);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+}
+
+// default are for metropolis/clarity-city
+@mixin line-height-eraser(
+  $line-height-gap-em: 0.6em,
+  $font-top-gap-em: 0.1475em,
+  $font-ascender-height-em: 0.1703em,
+  $font-x-height-em: 0.517em,
+  $pull-nudge: 0.037em,
+  $push-nudge: 0.044em
+) {
+  &::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: pullUp($line-height-gap-em, $font-top-gap-em, $pull-nudge);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: pushDown(
+      $line-height-gap-em,
+      $font-top-gap-em,
+      $font-ascender-height-em,
+      $font-x-height-em,
+      $push-nudge
+    );
+  }
+}
+@mixin remove-line-height-erasers() {
+  &::before,
+  &::after {
+    content: none;
+  }
+}
+
+@function getLineHeightGap($line-height-value: 1.2, $line-height-token: null) {
+  @if (not $line-height-token) or ($line-height-value < 1) {
+    @return 0;
+  }
+  @return calc((#{$line-height-token} - 1em) / 2);
+}
+@function pullUp($line-height-gap: 1.2em, $font-top-gap: 0.1475em, $pull-nudge: 0.037em) {
+  @return calc(((#{$font-top-gap} + #{$line-height-gap}) * -1) + #{$pull-nudge});
+}
+@function pushDown(
+  $line-height-gap: 0.6em,
+  $font-top-gap: 0.1475em,
+  $font-ascender-height: 0.1703,
+  $font-x-height: 0.517,
+  $push-nudge: 0.044em
+) {
+  @return calc(
+    (((1em - #{$font-top-gap} - #{$font-ascender-height} - #{$font-x-height}) + #{$line-height-gap}) * -1) -
+      #{$push-nudge}
+  );
+}