@itwin/core-react 5.0.0-dev.2 → 5.0.0-dev.3

package/lib/esm/core-react/settings/SettingsContainer.scss

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+div.core-settings-container {
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  .core-settings-container-left {
+    min-width: 15em;
+    height: 100%;
+    overflow: auto;
+    border-right: 2px solid var(--iui-color-border);
+
+    > .uicore-tabs-vertical {
+      font-size: 16px;
+    }
+  }
+  .core-settings-container-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--iui-color-background);
+    align-content: center;
+
+    .core-settings-container-right-header {
+      display: flex;
+      width: 100%;
+      height: calc(var(--iui-font-size-4) * 2);
+      font-size: var(--iui-font-size-4);
+      font-weight: var(--iui-font-weight-semibold);
+      padding-left: 15px;
+      align-items: center;
+
+      .core-settings-container-main-sub-header {
+        position: relative;
+        padding-left: 20px;
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 10px;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .core-settings-container-right-contents {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}

package/lib/esm/core-react/style/baseline.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$uicore-baseline: var(--iui-size-s);
+$uicore-line-height: var(--iui-size-l); ///  22px; /// ~1.618;
+
+$uicore-bordered-padding: calc(var(--iui-size-s) - 1px);
+$uicore-bordered-padding-large: calc(var(--iui-size-s) * 2 - 1px);
+$uicore-unbordered-padding: var(--iui-size-s);
+$uicore-unbordered-padding-large: calc(var(--iui-size-s) * 2);

package/lib/esm/core-react/style/breakpoints.scss

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Breakpoints */
+@mixin for-phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-down {
+  @media (max-width: 799px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 800px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-down {
+  @media (max-width: 1099px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1100px) {
+    @content;
+  }
+}
+
+@mixin for-small-desktop-down {
+  @media (max-width: 1299px) {
+    @content;
+  }
+}
+
+@mixin for-medium-desktop-up {
+  @media (min-width: 1300px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}

package/lib/esm/core-react/style/colors.scss

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/// Variables ------------------------------------------------------------------
+
+/// Primary colors:
+
+$uicore-green: #56aa1c;
+$uicore-blue: #008be1;
+$uicore-gray: #9ba5ae;
+$uicore-text-color: #2a2f34;
+
+/// Other colors:
+
+$uicore-black: #000;
+$uicore-white: #fff;
+$uicore-yellow: #ffcf00;
+$uicore-orange: #ff6600;
+$uicore-red: #cc0000;
+$uicore-teal: #2b9b7f;
+
+/// Highlights:
+
+$uicore-blue-highlight: #e5f5fd;
+$uicore-green-highlight: #eef6e8;
+$uicore-red-highlight: #fae5e5;
+
+/// Gray:
+
+$uicore-gray-1: #070809;
+$uicore-gray-3: #3c434a;
+$uicore-gray-4: #4d575f;
+$uicore-gray-5: #677480;
+$uicore-gray-6: #85929d;
+$uicore-gray-8: #a6afb7;
+$uicore-gray-9: #c7ccd1;
+$uicore-gray-a: #dce0e3;
+$uicore-gray-b: #eef0f3;
+$uicore-gray-c: #f8f9fb;
+
+/// Blue:
+
+$uicore-blue-3: #00426b;
+$uicore-blue-4: #005a92;
+$uicore-blue-5: #0073ba;
+$uicore-blue-6: $uicore-blue;
+$uicore-blue-8: #58bfff;
+$uicore-blue-a: #a6ddff;
+
+/// Green:
+
+$uicore-green-3: #23450b;
+$uicore-green-4: #346711;
+$uicore-green-5: #448615;
+
+$uicore-green-new: #53a21a;
+
+/// Teal:
+
+$uicore-teal-0: $uicore-green;
+$uicore-teal-1: #2b9b1b;
+$uicore-teal-2: #2b9b2f;
+$uicore-teal-3: #2b9b43;
+$uicore-teal-4: #2b9b57;
+$uicore-teal-5: #2b9b6b;
+$uicore-teal-6: #2b9b7f;
+$uicore-teal-7: #2b9b93;
+$uicore-teal-8: #2b9ba7;
+$uicore-teal-9: #2b9bbb;
+$uicore-teal-a: #2b9bcf;
+$uicore-teal-b: #2b9be3;
+$uicore-teal-c: $uicore-blue-6;
+$uicore-teal-d: $uicore-blue-5;
+$uicore-teal-e: $uicore-blue-4;
+$uicore-teal-f: $uicore-blue-3;

package/lib/esm/core-react/style/index.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./baseline";
+@forward "./breakpoints";
+@forward "./themecolors";
+@forward "./colors";
+@forward "./mixins";
+@forward "./opacity";

package/lib/esm/core-react/style/mixins.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+@mixin no-link {
+  text-decoration: none;
+  color: var(--iui-color-text);
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: var(--iui-color-text);
+    text-decoration: none;
+  }
+}
+
+@mixin firefox-only {
+  @supports (-moz-appearance: none) {
+    @content;
+  }
+}

package/lib/esm/core-react/style/opacity.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/// Opacity stops:
+
+$uicore-opacity-1: var(--iui-opacity-1);
+$uicore-opacity-2: var(--iui-opacity-2);
+$uicore-opacity-3: var(--iui-opacity-3);
+$uicore-opacity-4: var(--iui-opacity-4);
+$uicore-opacity-5: var(--iui-opacity-5);
+$uicore-opacity-6: var(--iui-opacity-6);
+
+$uicore-opacity-muted: $uicore-opacity-3;
+$uicore-opacity-disabled: $uicore-opacity-4;
+$uicore-opacity-boxshadow: $uicore-opacity-4;

package/lib/esm/core-react/style/themecolors.scss

@@ -0,0 +1,133 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+// cspell:ignore scrollbar titlebar toolbutton outoffocus boxshadow mediumgray
+
+$buic-background-1: var(--buic-background-1);
+$buic-background-2: var(--buic-background-2);
+$buic-background-3: var(--buic-background-3);
+$buic-background-4: var(--buic-background-4);
+$buic-background-5: var(--buic-background-5);
+
+/* Backgrounds and strokes */
+$buic-background-primary: var(--buic-background-primary);
+$buic-background-scrollbar: var(--buic-background-scrollbar);
+$buic-background-scrollbar-hover: var(--buic-background-scrollbar-hover);
+
+$buic-background-titlebar: var(--buic-background-titlebar);
+$buic-background-dialog-stroke: var(--buic-background-dialog-stroke);
+$buic-background-widget-stroke: var(--buic-background-widget-stroke);
+$buic-background-widget-panel: var(--buic-background-widget-panel);
+$buic-background-panel-stroke: var(--buic-background-panel-stroke);
+$buic-background-tooltip: var(--buic-background-tooltip);
+$buic-background-statusbar: var(--buic-background-statusbar);
+$buic-background-control-stroke: var(--buic-background-control-stroke);
+$buic-background-toolbutton-stroke: var(--buic-background-toolbutton-stroke);
+
+$buic-background-titlebar-outoffocus: var(
+  --buic-background-titlebar-outoffocus
+);
+$buic-background-divider: var(--buic-background-divider);
+$buic-background-widget-element-stroke: var(
+  --buic-background-widget-element-stroke
+);
+$buic-background-control-disabled: var(--buic-background-control-disabled);
+$buic-background-table-header: var(--buic-background-table-header);
+$buic-background-control-stroke-disabled: var(
+  --buic-background-control-stroke-disabled
+);
+
+$buic-background-tab-inactive: var(--buic-background-tab-inactive);
+$buic-background-toolbutton-inactive: var(
+  --buic-background-toolbutton-inactive
+);
+$buic-background-context-menu: var(--buic-background-context-menu);
+$buic-background-panel: var(--buic-background-panel);
+$buic-background-placeholder: var(--buic-background-placeholder);
+$buic-background-striped_row: var(--buic-background-striped_row);
+
+$buic-background-tab-active: var(--buic-background-tab-active);
+$buic-background-dialog: var(--buic-background-dialog);
+$buic-background-widget: var(--buic-background-widget);
+$buic-background-window: var(--buic-background-window);
+$buic-background-toolbar: var(--buic-background-toolbar);
+
+$buic-background-card: var(--buic-background-card);
+$buic-background-control: var(--buic-background-control);
+
+$buic-background-focus-overlay: var(--buic-background-focus-overlay);
+$buic-background-hover-overlay: var(--buic-background-hover-overlay);
+$buic-background-active-overlay: var(--buic-background-active-overlay);
+$buic-background-pressed-overlay: var(--buic-background-pressed-overlay);
+
+/** Text and icons */
+$buic-foreground-body-rgb: var(--buic-foreground-body-rgb);
+$buic-foreground-body-reverse-rgb: var(--buic-foreground-body-reverse-rgb);
+
+$buic-foreground-body: var(--buic-foreground-body);
+$buic-foreground-body-reverse: var(--buic-foreground-body-reverse);
+$buic-foreground-disabled: var(--buic-foreground-disabled);
+$buic-foreground-muted: var(--buic-foreground-muted);
+$buic-foreground-activehover: var(--buic-foreground-activehover);
+
+$buic-text-color: var(--buic-foreground-body); // 0.85 opacity
+$buic-text-color-disabled: var(
+  --buic-foreground-disabled
+); // 0.45 opacity (Note: 0.25 is too much)
+$buic-text-color-muted: var(--buic-foreground-muted); // 0.65 opacity
+$buic-text-color-reverse: var(--buic-foreground-body-reverse); // 0.85 opacity
+$buic-text-color-hover: var(--buic-foreground-activehover); // 1.00 opacity
+$buic-text-color-highlight: var(--buic-foreground-primary); // themed
+
+$buic-icon-color: var(--buic-foreground-body);
+$buic-icon-color-disabled: var(--buic-foreground-disabled);
+$buic-icon-color-reverse: var(--buic-foreground-body-reverse);
+
+$buic-background-editable: var(--buic-background-editable);
+$buic-row-selection: var(--buic-row-selection);
+$buic-row-hover: var(--buic-row-hover);
+
+$buic-button-gradient1: var(--buic-button-gradient1);
+$buic-button-gradient2: var(--buic-button-gradient2);
+
+$buic-foreground-focus-border: var(--buic-foreground-focus-border);
+$buic-inputs-border: var(--buic-inputs-border);
+$buic-focus-boxshadow: var(--buic-focus-boxshadow);
+$buic-inputs-boxshadow: var(--buic-inputs-boxshadow);
+$buic-popup-boxshadow: var(--buic-popup-boxshadow);
+
+/** Themed colors */
+$buic-foreground-accessory: var(--buic-foreground-accessory);
+$buic-foreground-primary-rgb: var(--buic-foreground-primary-rgb);
+$buic-foreground-primary: var(--buic-foreground-primary);
+$buic-foreground-primary-tone: var(--buic-foreground-primary-tone);
+$buic-foreground-positive: var(--buic-foreground-positive);
+$buic-foreground-positive-rgb: var(--buic-foreground-positive-rgb);
+$buic-foreground-success: var(--buic-foreground-positive);
+$buic-foreground-negative: var(--buic-foreground-negative);
+$buic-foreground-negative-rgb: var(--buic-foreground-negative-rgb);
+$buic-foreground-alert: var(--buic-foreground-negative);
+$buic-foreground-error: var(--buic-foreground-negative);
+$buic-foreground-warning: var(--buic-foreground-warning);
+$buic-foreground-warning-rgb: var(--buic-foreground-warning-rgb);
+$buic-foreground-focus: var(--buic-foreground-focus);
+
+/** Static colors */
+// NEEDSWORK - Need to deprecate
+$buic-accessory-hollow: var(--buic-accessory-hollow);
+$buic-accessory-primary: var(--buic-accessory-primary);
+$buic-accessory-success: var(--buic-accessory-success);
+$buic-accessory-alert: var(--buic-accessory-alert);
+$buic-accessory-warning: var(--buic-accessory-warning);
+$buic-accessory-primary-tint: var(--buic-accessory-primary-tint);
+$buic-accessory-success-tint: var(--buic-accessory-success-tint);
+$buic-accessory-alert-tint: var(--buic-accessory-alert-tint);
+$buic-accessory-warning-tint: var(--buic-accessory-warning-tint);
+
+/** Widget Opacity */
+$buic-widget-opacity: var(--buic-widget-opacity, 0.9);
+
+/** Toolbar Opacity */
+$buic-toolbar-opacity: var(--buic-toolbar-opacity, 0.5);

package/lib/esm/core-react/tabs/classes.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-tabs-vertical {
+  @include uicore-tabs-vertical;
+}

package/lib/esm/core-react/tabs/index.scss

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./vertical";

package/lib/esm/core-react/tabs/tabs.scss

@@ -0,0 +1,99 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../style/baseline";
+@use "../icons/variables";
+
+@forward "../style/index";
+@forward "../icons/variables";
+
+@mixin uicore-tabs {
+  display: block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+
+  > li {
+    display: block;
+    position: relative;
+    padding: 0;
+    margin: 0;
+
+    &.core-tab-item-disabled {
+      pointer-events: none;
+    }
+
+    > a {
+      display: block;
+      position: relative;
+      padding: baseline.$uicore-bordered-padding
+        calc(var(--iui-font-size-1) - 1px) baseline.$uicore-unbordered-padding;
+      margin: 0;
+      line-height: var(--iui-size-l);
+      color: var(--iui-color-text);
+      cursor: pointer;
+
+      .uicore-tabs-inline-label {
+        &.core-tab-item-disabled {
+          color: var(--iui-color-text-disabled);
+
+          .uicore-tabs-subLabel {
+            color: var(--iui-color-text-disabled);
+          }
+        }
+
+        .uicore-tabs-icon {
+          width: (variables.$uicore-icons-small + 12px);
+          height: (variables.$uicore-icons-small + 12px);
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        transition: all var(--iui-duration-1);
+        top: 0;
+        right: 0;
+        background: var(--iui-color-border-accent);
+        opacity: 0;
+      }
+
+      &:hover {
+        text-decoration: none;
+        background-color: var(--iui-color-background-hover);
+        color: var(--iui-color-text-hover);
+      }
+    }
+
+    &.core-active a::after {
+      opacity: 1;
+    }
+
+    .uicore-tabs-label-subLabel-container {
+      display: flex;
+      flex-direction: column;
+      .uicore-tabs-subLabel {
+        font-size: var(--iui-font-size-0);
+      }
+    }
+    &:not(.core-active) {
+      .uicore-tabs-label-subLabel-container {
+        .uicore-tabs-subLabel {
+          color: var(--iui-color-text-muted);
+          font-weight: var(--iui-font-weight-light);
+        }
+      }
+    }
+  }
+
+  &.uicore-tabs-green > li > a::after {
+    background-color: var(--iui-color-text-positive);
+  }
+}

package/lib/esm/core-react/tabs/vertical.scss

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./tabs";
+
+@forward "../style/index";
+@forward "./tabs";
+
+@mixin uicore-tabs-vertical {
+  @include tabs.uicore-tabs;
+
+  > li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    > a {
+      line-height: var(--iui-size-l);
+      padding: 14px 20px;
+      border-width: 0;
+
+      $bar-size: 2px;
+
+      .uicore-tabs-inline-label {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      &::after {
+        height: 100%;
+        width: $bar-size;
+        left: $bar-size;
+        padding-top: $bar-size;
+        padding-bottom: $bar-size;
+        background-clip: content-box;
+        box-sizing: border-box;
+      }
+
+      &:focus-visible {
+        outline: 1px solid var(--iui-color-border-accent);
+        outline-offset: -1px;
+      }
+    }
+
+    &.core-active a {
+      color: var(--iui-color-text-accent);
+      background-color: var(--iui-color-background-accent-muted);
+    }
+  }
+}

package/lib/esm/core-react/text/FilteredText.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uicore-filtered-text-match {
+  color: var(--iui-color-icon-accent);
+  font-weight: bold;
+}

package/lib/esm/core-react/text/block.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin uicore-text-block {
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: baseline;
+  font-size: var(--iui-font-size-1);
+  font-weight: var(--iui-font-weight-normal);
+  line-height: var(--iui-size-l);
+
+  margin: 0 0 var(--iui-size-l);
+}

package/lib/esm/core-react/text/body.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin uicore-text-body {
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: baseline;
+  font-size: var(--iui-font-size-1);
+  font-weight: var(--iui-font-weight-normal);
+  line-height: var(--iui-size-l);
+}

package/lib/esm/core-react/text/classes.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-text-body {
+  @include uicore-text-body;
+}
+.uicore-text-block {
+  @include uicore-text-block;
+}
+.uicore-text-disabled {
+  @include uicore-text-disabled;
+}
+.uicore-text-muted {
+  @include uicore-text-muted;
+}

package/lib/esm/core-react/text/disabled.scss

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin uicore-text-disabled {
+  color: var(--iui-color-text-disabled);
+}

package/lib/esm/core-react/text/index.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./mixins";
+
+@forward "./body";
+@forward "./block";
+@forward "./disabled";
+@forward "./muted";

package/lib/esm/core-react/text/mixins.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:map";
+
+@forward "../style/themecolors";
+
+@mixin uicore-text-block-spacing {
+  padding: 0;
+  margin: 0 0 var(--iui-size-l);
+}
+
+@mixin uicore-text($type: body) {
+  $sizes: (
+    body: var(--iui-font-size-1),
+    small: var(--iui-font-size-0),
+  );
+
+  $type: if(map.has-key($sizes, $type), $type, body);
+
+  font-size: map.get($sizes, $type);
+  font-weight: var(--iui-font-weight-normal);
+  line-height: var(--iui-size-l);
+  color: var(--iui-color-text);
+}