@inera/ids-design 5.3.0 → 5.4.0

package/src/global/form/time.scss

@@ -0,0 +1,44 @@
+@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

@@ -0,0 +1,119 @@
+@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

@@ -0,0 +1,52 @@
+@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

@@ -0,0 +1,25 @@
+// 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

@@ -0,0 +1,240 @@
+@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

@@ -0,0 +1,89 @@
+@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

@@ -0,0 +1,100 @@
+@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;
+  }
+}