@inera/ids-design 5.4.0 → 5.5.0

package/src/global/form/time.scss

@@ -1,44 +0,0 @@
-@use "../partials";
-
-.ids-time {
-  .ids-time__input-wrapper {
-    position: relative;
-  }
-
-  .ids-input__icon {
-    @include partials.ids-input-icon();
-  }
-
-  ::slotted(input),
-  input {
-    cursor: pointer;
-  }
-
-  ::slotted(input:disabled),
-  input:disabled {
-    cursor: default;
-  }
-}
-
-input.ids-time__input {
-  @include partials.ids-form-input-base();
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
-
-  &::-webkit-calendar-picker-indicator {
-    opacity: 0;
-    appearance: none;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-}

package/src/global/form/toggle.scss

@@ -1,119 +0,0 @@
-@use "../partials";
-
-.ids-toggle {
-  @include partials.ids-label-wrapper(0);
-  label {
-    position: relative;
-    top: 0.375rem;
-    flex-shrink: 100;
-  }
-
-  .ids-label-tooltip-wrapper {
-    position: relative;
-    top: 0.375rem;
-    label {
-      top: -0.25rem;
-      margin-right: 0.5rem;
-    }
-  }
-
-  input[type="checkbox"],
-  input {
-    position: relative;
-    margin: 0;
-    height: 2rem;
-    width: 3.9375rem;
-    border: 0.063rem solid transparent;
-    border-radius: 6.25rem;
-    appearance: none;
-
-    &:before {
-      content: "";
-      position: absolute;
-      cursor: pointer;
-      background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
-      border-radius: 6.25rem;
-      height: 1.875rem;
-      width: 3.75rem;
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-
-      input:focus + & {
-        outline: var(--IDS-FOCUS__OUTLINE);
-        outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-      }
-    }
-
-    &:after {
-      content: "";
-      display: inline-block;
-      position: absolute;
-      cursor: pointer;
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 100%;
-      background-image: var(--IDS-TOGGLE__KNOB-BACKGROUND-IMAGE);
-      background-position: center center;
-      background-size: 0.625rem 0.625rem;
-      background-repeat: no-repeat;
-      top: 0.188rem;
-      left: .25rem;
-      -webkit-transition: 0.3s;
-      transition: all 0.3s;
-    }
-
-    &:checked {
-      &:before {
-        background-color: var(--IDS-TOGGLE--CHECKED__BACKGROUND-COLOR);
-      }
-
-      &:after {
-        content: "";
-        background-image: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE);
-        top: 0.188rem;
-        left: calc(100% - 1.875rem);
-        -webkit-transition: 0.3s;
-        transition: all 0.3s;
-      }
-    }
-
-    &:disabled + label {
-      cursor: default;
-      font-style: italic;
-      color: var(--IDS-FORM-LABEL--DISABLED__COLOR);
-    }
-
-    &:disabled {
-      &:before {
-        cursor: default;
-        background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
-        border: var(--IDS-TOGGLE--DISABLED__BORDER);
-      }
-
-      &:after {
-        cursor: default;
-        background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
-        background-image: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE);
-      }
-
-      &:checked {
-        &:before {
-          cursor: default;
-          background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
-          border: var(--IDS-TOGGLE--DISABLED__BORDER);
-        }
-
-        &:after {
-          cursor: default;
-          background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
-          background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
-        }
-      }
-    }
-  }
-
-  @media (max-width: 300px) {
-    flex-wrap: wrap;
-  }
-}

package/src/global/global.scss

@@ -1,52 +0,0 @@
-@use "../layout/breakpoints.scss";
-
-//Utilities
-@use "./util/util.scss";
-//Light dom:
-@use "./components/link.scss";
-//Form
-@use "./form/button.scss";
-@use "./form/radio.scss";
-@use "./form/checkbox.scss";
-@use "./form/input.scss";
-@use "./form/range.scss";
-@use "./form/select.scss";
-@use "./form/textarea.scss";
-@use "./form/time.scss";
-@use "./form/toggle.scss";
-@use "../components/form/group/group.scss";
-@use "./typography/typography.scss";
-
-:root {
-  --IDS__MAX-WIDTH: 1280px;
-  --IDS__FONT-FAMILY: Open sans;
-  --IDS__FONT-COLOR: black;
-}
-
-.ids input:focus,
-.ids select:focus,
-.ids textarea:focus,
-.ids ids-button:focus,
-.ids a:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-}
-
-input::placeholder,
-textarea::placeholder,
-select::placeholder {
-  color: var(--IDS-FORM-PLACEHOLDER__COLOR);
-}
-
-[tabindex="0"]:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}

package/src/global/icons/close.scss

@@ -1,25 +0,0 @@
-// TODO remove when we get the icon font
-
-@mixin ids-icon-close-svg($color) {
-  background-color: var($color);
-  mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z' fill='black'/%3E%3C/svg%3E");
-  mask-size: cover;
-}
-
-@mixin ids-icon-close {
-  @include ids-icon-close-svg(--IDS-ICON__COLOR);
-}
-
-@mixin ids-icon-close-active {
-  @include ids-icon-close-svg(--IDS-ICON--ACTIVE__COLOR);
-}
-
-@mixin ids-icon-close-interactive {
-  @include ids-icon-close-svg(--IDS-ICON__COLOR);
-
-  &:hover,
-  &:focus,
-  &:active {
-    @include ids-icon-close-svg(--IDS-ICON--ACTIVE__COLOR);
-  }
-}

package/src/global/typography/_typography-partials.scss

@@ -1,240 +0,0 @@
-@use "../../layout/breakpoints.scss";
-
-@mixin ids-heading-xxl {
-  font-style: normal;
-  color: var(--IDS-HEADING-XXL__COLOR);
-  font-family: var(--IDS-HEADING-XXL__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XXL__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XXL__FONT-WEIGHT);
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-XXL__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP);
-  }
-}
-
-@mixin ids-heading-xl {
-  font-style: normal;
-  color: var(--IDS-HEADING-XL__COLOR);
-  font-family: var(--IDS-HEADING-XL__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XL__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XL__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XL__FONT-WEIGHT);
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-XL__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING-DESKTOP);
-  }
-}
-
-@mixin ids-heading-l {
-  font-style: normal;
-  color: var(--IDS-HEADING-L__COLOR);
-  font-family: var(--IDS-HEADING-L__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-L__FONT-SIZE);
-  line-height: var(--IDS-HEADING-L__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-L__FONT-WEIGHT);
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-L__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-L__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING-DESKTOP);
-  }
-}
-
-@mixin ids-heading-m {
-  font-style: normal;
-  color: var(--IDS-HEADING-M__COLOR);
-  font-family: var(--IDS-HEADING-M__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-M__FONT-SIZE);
-  line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
-  }
-}
-
-@mixin ids-heading-m-important {
-  font-style: normal !important;
-  color: var(--IDS-HEADING-M__COLOR);
-  font-family: var(--IDS-HEADING-M__FONT-FAMILY) !important;
-  font-size: var(--IDS-HEADING-M__FONT-SIZE) !important;
-  line-height: var(--IDS-HEADING-M__LINE-HEIGHT) !important;
-  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING) !important;
-  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT) !important;
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP) !important;
-    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP) !important;
-    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP) !important;
-  }
-}
-
-@mixin ids-heading-s {
-  font-style: normal;
-  color: var(--IDS-HEADING-S__COLOR);
-  font-family: var(--IDS-HEADING-S__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-S__FONT-SIZE);
-  line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-S__FONT-WEIGHT);
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP);
-    letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
-  }
-}
-
-@mixin ids-heading-s-important {
-  font-style: normal !important;
-  color: var(--IDS-HEADING-S__COLOR);
-  font-family: var(--IDS-HEADING-S__FONT-FAMILY) !important;
-  font-size: var(--IDS-HEADING-S__FONT-SIZE) !important;
-  line-height: var(--IDS-HEADING-S__LINE-HEIGHT) !important;
-  letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING) !important;
-  font-weight: var(--IDS-HEADING-S__FONT-WEIGHT) !important;
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP) !important;
-    line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP) !important;
-    letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP) !important;
-  }
-}
-
-@mixin ids-heading-xs {
-  font-style: normal;
-  color: var(--IDS-HEADING-XS__COLOR);
-  font-family: var(--IDS-HEADING-XS__FONT-FAMILY);
-  font-size: var(--IDS-HEADING-XS__FONT-SIZE);
-  line-height: var(--IDS-HEADING-XS__LINE-HEIGHT);
-  letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING);
-  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
-}
-
-@mixin ids-heading-xs-important {
-  font-style: normal !important;
-  color: var(--IDS-HEADING-XS__COLOR);
-  font-family: var(--IDS-HEADING-XS__FONT-FAMILY) !important;
-  font-size: var(--IDS-HEADING-XS__FONT-SIZE) !important;
-  line-height: var(--IDS-HEADING-XS__LINE-HEIGHT) !important;
-  letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING) !important;
-  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT) !important;
-}
-
-@mixin ids-preamble {
-  font-style: normal;
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--IDS-PREAMBLE__FONT-FAMILY);
-  font-size: var(--IDS-PREAMBLE__FONT-SIZE);
-  line-height: var(--IDS-PREAMBLE__LINE-HEIGHT);
-  font-weight: 300;
-  letter-spacing: 0;
-  @media (min-width: breakpoints.$medium) {
-    font-size: var(--IDS-PREAMBLE__FONT-SIZE-DESKTOP);
-    line-height: var(--IDS-PREAMBLE__LINE-HEIGHT-DESKTOP);
-  }
-}
-
-@mixin ids-body {
-  font-style: normal;
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--IDS-BODY__FONT-FAMILY);
-  font-size: var(--IDS-BODY__FONT-SIZE);
-  line-height: var(--IDS-BODY__LINE-HEIGHT);
-  font-weight: 400;
-  letter-spacing: 0;
-}
-
-@mixin ids-small {
-  font-style: normal;
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0rem;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
-}
-
-@mixin ids-anchor($underline: false) {
-  .ids-anchor {
-    color: var(--IDS-ANCHOR__COLOR);
-    text-decoration: none;
-
-    &:visited {
-      color: var(--IDS-ANCHOR__COLOR);
-    }
-
-    @if $underline {
-      &:link {
-        text-decoration: underline;
-      }
-      &:active,
-      &:hover {
-        color: var(--IDS-ANCHOR__HOVER-COLOR);
-        text-decoration: underline;
-      }
-    } @else {
-      &:link {
-        text-decoration: none;
-      }
-      &:active,
-      &:hover {
-        color: var(--IDS-ANCHOR__HOVER-COLOR);
-      }
-    }
-  }
-}
-
-@mixin ids-pagelist {
-  font-style: normal;
-  color: var(--IDS-PAGE-LIST__COLOR);
-  font-family: var(--IDS-PAGE-LIST__FONT-FAMILY);
-  font-size: var(--IDS-PAGE-LIST__FONT-SIZE);
-  line-height: var(--IDS-PAGE-LIST__LINE-HEIGHT);
-  font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
-  letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
-}
-
-@mixin ids-bullet-list {
-  list-style: disc;
-  margin-left: 1.5rem;
-  li {
-    margin-bottom: 1rem;
-    padding-left: 0.5rem;
-    display: list-item;
-    color: var(--IDS-COLOR-NEUTRAL-20);
-    font-family: var(--IDS-FONT-FAMILY-BASE);
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
-    &::marker {
-      color: var(--IDS-BULLET-LIST__MARKER-COLOR);
-    }
-  }
-}
-
-@mixin ids-numbered-list {
-  list-style-type: decimal;
-  margin-left: 1.5rem;
-  li {
-    margin-bottom: 1rem;
-    padding-left: 0.5rem;
-    display: list-item;
-    color: var(--IDS-COLOR-NEUTRAL-20);
-    font-family: var(--IDS-FONT-FAMILY-BASE);
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
-    &::marker {
-      font-weight: var(--IDS-BULLET-LIST__MARKER-FONT-WEIGHT);
-    }
-  }
-}

package/src/global/typography/description-list.scss

@@ -1,89 +0,0 @@
-@use "../../layout/breakpoints";
-
-.ids-description-list {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  border: var(--IDS-DESCRIPTION-LIST__BORDER);
-  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
-  display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
-  flex-direction: column;
-  grid-template-columns: auto 1fr;
-
-  .ids-description-list__term {
-    border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
-    border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
-    padding: var(--IDS-DESCRIPTION-LIST__PADDING);
-    background-color: var(--IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR);
-    color: var(--IDS-COLOR-NEUTRAL-20);
-    font-family: var(--IDS-FONT-FAMILY-BASE);
-    font-size: 1rem;
-    font-style: normal;
-    font-weight:  var(--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT);
-    line-height: 1.5rem;
-    overflow-wrap: break-word;
-
-    &:first-child {
-      border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
-    }
-
-    &:nth-last-child(2) {
-      border-bottom: 0;
-      border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
-    }
-  }
-
-  .ids-description-list__description {
-    color: var(--IDS-COLOR-NEUTRAL-20);
-    border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
-    padding: var(--IDS-DESCRIPTION-LIST__PADDING);
-    margin-bottom: var(--IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM);
-
-    &:first-child {
-      border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
-    }
-
-    &:last-child {
-      border-bottom: 0;
-      border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
-    }
-  }
-
-  &.ids-description-list--column {
-    border: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
-    border-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
-    display: var(--IDS-DESCRIPTION-LIST--COLUMN__DISPLAY);
-
-    .ids-description-list__term {
-      border-right: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
-      border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
-      padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
-      background-color: var(--IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR);
-
-      &:first-child {
-        border-top-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
-      }
-
-      &:nth-last-child(2) {
-        border-bottom: 0;
-        border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
-      }
-    }
-
-    .ids-description-list__description {
-      border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
-      padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
-      margin-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM);
-      background-color: var(--IDS-COLOR-NEUTRAL-100);
-
-      &:nth-child(2) {
-        border-top-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
-      }
-
-      &:last-child {
-        border-bottom: 0;
-        border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
-      }
-    }
-  }
-}

package/src/global/typography/typography.scss

@@ -1,100 +0,0 @@
-@use "../partials";
-@use "./typography-partials" as typography;
-@use "./description-list.scss";
-
-.ids {
-  .ids-heading-xxl {
-    @include typography.ids-heading-xxl();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-heading-xl {
-    @include typography.ids-heading-xl();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-heading-l {
-    @include typography.ids-heading-l();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-heading-m {
-    @include typography.ids-heading-m();
-    @include typography.ids-anchor();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-heading-s {
-    @include typography.ids-heading-s();
-    @include typography.ids-anchor();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-heading-xs {
-    @include typography.ids-heading-xs();
-    @include typography.ids-anchor();
-    @include partials.ids-no-focus-visible();
-  }
-
-  .ids-preamble {
-    @include typography.ids-preamble();
-    @include typography.ids-anchor($underline: true);
-  }
-
-  .ids-body {
-    @include typography.ids-body();
-    @include typography.ids-anchor($underline: true);
-
-    &.ids-disabled {
-      color: var(---IDS-BODY--DISABLED__COLOR);
-      font-style: italic;
-    }
-  }
-
-  .ids-small {
-    @include typography.ids-small();
-    @include typography.ids-anchor($underline: true);
-  }
-
-  .ids-pagelist {
-    @include typography.ids-pagelist();
-  }
-
-  ul.ids-bullet-list,
-  .ids-bullet-list {
-    @include typography.ids-bullet-list();
-  }
-
-  ol.ids-numbered-list,
-  .ids-numbered-list {
-    @include typography.ids-numbered-list();
-  }
-}
-
-.ids-content {
-  .ids-heading-xxl {
-    margin-bottom: var(--IDS-HEADING-XXL__MARGIN-BOTTOM);
-  }
-
-  .ids-heading-xl {
-    margin-bottom: var(--IDS-HEADING-XL__MARGIN-BOTTOM);
-  }
-
-  .ids-heading-l {
-    margin-bottom: var(--IDS-HEADING-L__MARGIN-BOTTOM);
-  }
-
-  .ids-heading-m,
-  .ids-heading-s,
-  .ids-heading-xs {
-    margin-bottom: 0.625rem;
-  }
-
-  .ids-preamble {
-    margin-bottom: 2.5rem;
-  }
-
-  .ids-body {
-    margin-bottom: 1.875rem;
-  }
-}