@dynamic-framework/ui-react 1.17.1 → 1.19.0

package/src/style/abstracts/variables/_progress.scss

@@ -1,7 +1,7 @@
 // Progress bars
 
 // scss-docs-start progress-variables
-$progress-font-size: var(--#{$prefix}ref-fs-small) !default;
+$progress-font-size: var(--#{$prefix}fs-small) !default;
 $progress-bg: var(--#{$prefix}secondary-100) !default;
 $progress-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $progress-box-shadow: none !default;
@@ -9,6 +9,6 @@ $progress-bar-color: var(--#{$prefix}white) !default;
 $progress-bar-bg: var(--#{$prefix}secondary) !default;
 
 // custom
-$progress-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$progress-font-weight: var(--#{$prefix}fw-bold) !default;
 // end custom
 // scss-docs-end progress-variables

package/src/style/abstracts/variables/_quick-action-button.scss

@@ -5,12 +5,12 @@ $quick-action-button-border: 1px solid var(--#{$prefix}secondary-100) !default;
 $quick-action-button-border-radius: var(--#{$prefix}border-radius) !default;
 $quick-action-button-box-shadow: none !default;
 
-$quick-action-button-line1-font-size: var(--#{$prefix}ref-fs-6) !default;
-$quick-action-button-line1-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-button-line1-font-size: var(--#{$prefix}fs-6) !default;
+$quick-action-button-line1-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-button-line1-color: var(--#{$prefix}body-color) !default;
 
-$quick-action-button-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-button-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-button-line2-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-button-line2-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-button-line2-color: var(--#{$prefix}gray-500) !default;
 
 $quick-action-button-representative-image-size: var(--#{$prefix}ref-spacer-9) !default;

package/src/style/abstracts/variables/_quick-action-check.scss

@@ -4,15 +4,15 @@ $quick-action-check-bg: var(--#{$prefix}white) !default;
 $quick-action-check-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $quick-action-check-line1-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line1-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-check-line1-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-check-line1-color: var(--#{$prefix}gray-900) !default;
 
-$quick-action-check-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-check-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-check-line2-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-check-line2-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-check-line2-color: var(--#{$prefix}gray) !default;
 
 $quick-action-check-line3-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line3-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-check-line3-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-check-line3-color: var(--#{$prefix}gray) !default;
 
 $quick-action-check-hover-bg: var(--#{$prefix}gray-100) !default;

package/src/style/abstracts/variables/_quick-action-select.scss

@@ -2,12 +2,12 @@ $quick-action-select-padding: var(--#{$prefix}ref-spacer-4) !default;
 $quick-action-select-bg: var(--#{$prefix}gray-100) !default;
 $quick-action-select-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
-$quick-action-select-line1-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-select-line1-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-select-line1-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-select-line1-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-select-line1-color: var(--#{$prefix}secondary) !default;
 
 $quick-action-select-line2-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-select-line2-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$quick-action-select-line2-font-weight: var(--#{$prefix}fw-bold) !default;
 $quick-action-select-line2-color: var(--#{$prefix}light-text-emphasis) !default;
 
 $quick-action-select-hover-bg: var(--#{$prefix}gray-200) !default;

package/src/style/abstracts/variables/_quick-action-switch.scss

@@ -9,8 +9,8 @@ $quick-action-switch-label-font-size: $font-size-base !default;
 $quick-action-switch-label-font-weight: $form-label-font-weight !default;
 $quick-action-switch-label-color: $form-switch-label-color !default;
 
-$quick-action-switch-hint-font-size: var(--#{$prefix}ref-fs-small) !default;
-$quick-action-switch-hint-font-weight: var(--#{$prefix}ref-fw-normal) !default;
+$quick-action-switch-hint-font-size: var(--#{$prefix}fs-small) !default;
+$quick-action-switch-hint-font-weight: var(--#{$prefix}fw-normal) !default;
 $quick-action-switch-hint-color: var(--#{$prefix}gray-400) !default;
 
 $quick-action-switch-hover-bg: var(--#{$prefix}secondary-soft) !default;

package/src/style/abstracts/variables/_tooltip.scss

@@ -0,0 +1,16 @@
+// scss-docs-start tooltip-variables
+$tooltip-font-size: var(--#{$prefix}tooltip-component-font-size, var(--#{$prefix}body-font-size)) !default;
+$tooltip-max-width: var(--#{$prefix}tooltip-component-max-width, 300px) !default;
+$tooltip-color: var(--#{$prefix}tooltip-component-color, var(--#{$prefix}body-bg)) !default;
+$tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}emphasis-color)) !default;
+$tooltip-border-radius: var(--#{$prefix}tooltip-component-border-radius, var(--#{$prefix}ref-spacer-1)) !default;
+$tooltip-opacity: 1 !default;
+$tooltip-padding-y: var(--#{$prefix}ref-spacer-1) !default;
+$tooltip-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+
+// custom
+$tooltip-font-size-sm: var(--#{$prefix}fs-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-6) !default;
+// end custom
+
+// scss-docs-end tooltip-variables

package/src/style/abstracts/variables/_typography.scss

@@ -9,29 +9,63 @@ $font-family-sans-serif: "Source Sans 3", sans-serif !default;
 // $font-size-base affects the font size of the body text
 $font-size-root: 16px !default;
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm: $font-size-base * .875 !default;   // 14px
+
+// custom
+$font-size-sm: var(--#{$prefix}fs-small) !default;
+$font-size-sm-value: .875em !default;
+// end custom
+
 $font-size-lg: $font-size-base * 1.125 !default;  // 18px
 
-$font-weight-lighter: lighter !default;
-$font-weight-light: 200 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: 800 !default;
+// custom
+$font-weight-lighter-value: lighter !default;
+$font-weight-light-value: 200 !default;
+$font-weight-normal-value: 400 !default;
+$font-weight-semibold-value: 600 !default;
+$font-weight-bold-value: 700 !default;
+$font-weight-bolder-value: 800 !default;
+
+$font-weight-lighter: var(--#{$prefix}fw-lighter) !default;
+$font-weight-light: var(--#{$prefix}fw-light) !default;
+$font-weight-normal: var(--#{$prefix}fw-normal) !default;
+$font-weight-semibold: var(--#{$prefix}fw-semibold) !default;
+$font-weight-bold: var(--#{$prefix}fw-bold) !default;
+$font-weight-bolder: var(--#{$prefix}fw-bolder) !default;
+// end custom
 
 $font-weight-base: $font-weight-normal !default;
 
 $line-height-base: 1.5 !default;
 
-$h1-font-size: $font-size-base * 4 !default;
-$h2-font-size: $font-size-base * 3.5 !default;
-$h3-font-size: $font-size-base * 3 !default;
-$h4-font-size: $font-size-base * 2 !default;
-$h5-font-size: $font-size-base * 1.5 !default;
-$h6-font-size: $font-size-base * 1.125 !default;
+// custom
+$h1-font-size-value: $font-size-base * 4 !default;
+$h2-font-size-value: $font-size-base * 3.5 !default;
+$h3-font-size-value: $font-size-base * 3 !default;
+$h4-font-size-value: $font-size-base * 2 !default;
+$h5-font-size-value: $font-size-base * 1.5 !default;
+$h6-font-size-value: $font-size-base * 1.125 !default;
+
+$h1-font-size: var(--#{$prefix}fs-1) !default;
+$h2-font-size: var(--#{$prefix}fs-2) !default;
+$h3-font-size: var(--#{$prefix}fs-3) !default;
+$h4-font-size: var(--#{$prefix}fs-4) !default;
+$h5-font-size: var(--#{$prefix}fs-5) !default;
+$h6-font-size: var(--#{$prefix}fs-6) !default;
+// end custom
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
+// custom
+$font-size-values: (
+  1: $h1-font-size-value,
+  2: $h2-font-size-value,
+  3: $h3-font-size-value,
+  4: $h4-font-size-value,
+  5: $h5-font-size-value,
+  6: $h6-font-size-value
+) !default;
+// end custom
+
 $font-sizes: (
   1: $h1-font-size,
   2: $h2-font-size,
@@ -45,16 +79,35 @@ $font-sizes: (
 // scss-docs-start headings-variables
 $headings-margin-bottom: 0 !default;
 $headings-font-weight: $font-weight-bold !default;
-$headings-line-height: 1.2 !default;
+$headings-line-height-value: 1.2 !default;
+$headings-line-height: var(--#{$prefix}heading-line-height) !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
-$display1-font-size: 7.5rem !default;
-$display2-font-size: 4.5rem !default;
-$display3-font-size: 4rem !default;
-$display4-font-size: 3.5rem !default;
-$display5-font-size: 3rem !default;
-$display6-font-size: 2.5rem !default;
+// custom
+$display1-font-size-value: 7.5rem !default;
+$display2-font-size-value: 4.5rem !default;
+$display3-font-size-value: 4rem !default;
+$display4-font-size-value: 3.5rem !default;
+$display5-font-size-value: 3rem !default;
+$display6-font-size-value: 2.5rem !default;
+
+$display1-font-size: var(--#{$prefix}fs-display-1) !default;
+$display2-font-size: var(--#{$prefix}fs-display-2) !default;
+$display3-font-size: var(--#{$prefix}fs-display-3) !default;
+$display4-font-size: var(--#{$prefix}fs-display-4) !default;
+$display5-font-size: var(--#{$prefix}fs-display-5) !default;
+$display6-font-size: var(--#{$prefix}fs-display-6) !default;
+
+$display-font-size-values: (
+  1: $display1-font-size-value,
+  2: $display2-font-size-value,
+  3: $display3-font-size-value,
+  4: $display4-font-size-value,
+  5: $display5-font-size-value,
+  6: $display6-font-size-value
+) !default;
+// end custom
 
 $display-font-sizes: (
   1: $display1-font-size,
@@ -72,7 +125,10 @@ $display-line-height: $headings-line-height !default;
 // scss-docs-start type-variables
 $lead-font-weight: $font-weight-normal !default;
 
+// custom
 $small-font-size: $font-size-sm !default;
+$small-font-size-value: $font-size-sm-value !default;
+// end custom
 
 $sub-sup-font-size: .75em !default;
 

package/src/style/abstracts/variables/_z-index.scss

@@ -0,0 +1,11 @@
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-offcanvas-backdrop: 1050 !default;
+$zindex-offcanvas: 1055 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+// scss-docs-end zindex-stack

package/src/style/base/_+import.scss

@@ -1,6 +1,6 @@
 @import "bootstrap/scss/reboot";
 
-@import "bootstrap/scss/type";
+// @import "bootstrap/scss/type"; we use our own bootstrap based implementation
 
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
@@ -34,6 +34,7 @@
 @import "bootstrap/scss/placeholders";
 @import "bootstrap/scss/badge";
 
+@import "type";
 @import "body";
 @import "accordion";
 @import "form-switch";
@@ -41,7 +42,8 @@
 @import "form-control";
 @import "form-text";
 @import "input-group";
-@import "button";
+@import "buttons";
+@import "button-group";
 @import "progress";
 @import "alert";
 @import "collapse";
@@ -49,3 +51,6 @@
 @import "breadcrumb";
 @import "dropdown";
 @import "label";
+@import "avatar";
+@import "backdrop";
+@import "tooltip";

package/src/style/base/_avatar.scss

@@ -0,0 +1,61 @@
+.avatar {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-8);
+  --#{$prefix}avatar-title-bg: var(--#{$prefix}gray-500);
+  --#{$prefix}avatar-title-color: var(--#{$prefix}white);
+  --#{$prefix}avatar-radius: var(--#{$prefix}border-radius-pill);
+
+  position: relative;
+  display: inline-block;
+  width: var(--#{$prefix}avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  font-size: calc(var(--#{$prefix}avatar-size) / 3);
+
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--#{$prefix}avatar-radius);
+  }
+
+  .avatar-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--#{$prefix}avatar-title-color);
+    white-space: pre-wrap;
+    background-color: var(--#{$prefix}avatar-title-bg);
+    border-radius: var(--#{$prefix}avatar-radius);
+  }
+}
+
+.avatar-xs {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-4);
+}
+
+.avatar-sm {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-6);
+}
+
+.avatar-lg {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-10);
+}
+
+.avatar-xl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
+}
+
+.avatar-xxl {
+  --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-14);
+}
+
+.avatar-group {
+  .avatar-img {
+    box-shadow: -2px 0 2px rgba(0, 0, 0, .1);
+  }
+
+  .avatar + .avatar {
+    margin-left: calc(var(--#{$prefix}avatar-size) * -.25);
+  }
+}

package/src/style/base/_backdrop.scss

@@ -0,0 +1,9 @@
+.backdrop {
+  // scss-docs-start modal-backdrop-css-vars
+  --#{$prefix}backdrop-zindex: #{$zindex-modal};
+  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
+  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+  // scss-docs-end modal-backdrop-css-vars
+
+  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+}

package/src/style/base/_button-group.scss

@@ -0,0 +1,13 @@
+.btn-group-vertical {
+  .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius-sm);
+  }
+
+  &.btn-group-lg .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius);
+  }
+
+  &.btn-group-sm .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius-sm);
+  }
+}

package/src/style/base/{_button.scss → _buttons.scss}

@@ -9,22 +9,17 @@
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-border-radius: var(--#{$prefix}btn-component-border-radius, #{$btn-border-radius});
   --#{$prefix}btn-hover-border-color: transparent;
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
   --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
   --#{$prefix}btn–text-decoration: if($link-decoration == none, null, none);
-
   --#{$prefix}btn-lg-padding-y: #{$btn-padding-y-lg};
   --#{$prefix}btn-lg-padding-x: #{$btn-padding-x-lg};
   --#{$prefix}btn-lg-font-size: #{$btn-font-size-lg};
-  --#{$prefix}btn-lg-border-radius: var(--#{$prefix}btn-component-lg-border-radius, #{$btn-border-radius-lg});
-
   --#{$prefix}btn-sm-padding-y: #{$btn-padding-y-sm};
   --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
-  --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
 
   display: inline-flex;
   flex-direction: row;
@@ -44,7 +39,7 @@
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-  @include border-radius(var(--#{$prefix}btn-border-radius));
+  border-radius: var(--#{$prefix}btn-border-radius);
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
@@ -71,14 +66,18 @@
 
   // focus selectors
   .btn-check:focus-visible + &,
-  &:focus-visible,
-  &.focus-visible {
+  &:focus-visible:not(:hover),
+  &.focus-visible:not(:hover) {
     // copy of .btn:focus bootstrap + focus var
     color: var(--#{$prefix}btn-focus-color, var(--#{$prefix}btn-hover-color));
     @include gradient-bg(var(--#{$prefix}btn-focus-bg, var(--#{$prefix}btn-hover-bg)));
     border-color: var(--#{$prefix}btn-focus-border-color, var(--#{$prefix}btn-hover-border-color));
     // end copy
+  }
 
+  .btn-check:focus-visible + &,
+  &:focus-visible,
+  &.focus-visible {
     outline: var(--#{$prefix}btn-focus-border-width, var(--#{$prefix}btn-border-width)) solid var(--#{$prefix}btn-focus-outline-color, var(--#{$prefix}focus-ring-color));
     outline-offset: var(--#{$prefix}btn-focus-outline-offset, var(--#{$prefix}btn-border-width));
   }
@@ -124,57 +123,15 @@
 
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @if $color == "light" { // default bootstrap style
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
-        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
-        $active-background: shade-color($value, $btn-active-bg-shade-amount),
-        $active-border: shade-color($value, $btn-active-border-shade-amount)
-      );
-    } @else if $color == "dark" { // default bootstrap style
-      @include button-variant(
-        $value,
-        $value,
-        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
-        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
-        $active-background: tint-color($value, $btn-active-bg-tint-amount),
-        $active-border: tint-color($value, $btn-active-border-tint-amount)
-      );
-    } @else {
-      @include df-button-variant($color);
-    }
+    @include df-button-variant-mapper($color);
   }
 
   .btn-outline-#{$color} {
-    @if $color == "light" or $color == "dark" { // default bootstrap style
-      @include button-outline-variant($value);
-    } @else {
-      @include df-button-outline-variant($color);
-    }
+    @include df-button-variant-mapper($color, "outline");
   }
 
   .btn-link-#{$color} {
-    span {
-      text-decoration: underline;
-    }
-
-    @if $color == "light" {
-      @include df-button-link-variant(
-        "gray",
-        $default-color: $value,
-        $hover-bg-color: var(--#{$prefix}gray-300),
-        $active-bg-color: var(--#{$prefix}gray-500)
-      );
-    } @else if $color == "dark" {
-      @include df-button-link-variant(
-        "gray",
-        $default-color: $value
-      );
-    } @else {
-      @include df-button-link-variant($color);
-    }
+    @include df-button-variant-mapper($color, "link");
   }
 }
 
@@ -199,6 +156,10 @@
 [class*="btn-link-"] {
   --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
+  span {
+    text-decoration: underline;
+  }
+
   @if $enable-gradients {
     background-image: none;
   }

package/src/style/base/_form-check.scss

@@ -13,8 +13,9 @@
     border-color: $form-check-input-checked-border-color;
   }
 
-  &:disabled {
+  &:disabled:not(:checked, :indeterminate) {
     background-color: $form-check-input-disabled-bg;
     border-color: $form-check-input-disabled-border-color;
+    opacity: 1;
   }
 }

package/src/style/base/_input-group.scss

@@ -1,12 +1,12 @@
 // bootstrap reset layer
+.input-group-text + .form-control {
+  padding-left: 0;
+}
+
 .input-group > .form-select,
 .input-group > .form-control {
   border: 0;
 
-  &:not(:first-child) {
-    padding-left: 0;
-  }
-
   &:focus {
     border: 0;
     box-shadow: none;
@@ -18,7 +18,7 @@
   background-position: right 0 center;
 }
 
-.input-group > .form-control:not(:last-child) {
+.form-control:has(~ .input-group-text) {
   padding-right: 0;
 }
 
@@ -62,7 +62,6 @@
   --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
   --#{$prefix}input-disabled-color: #{$input-disabled-color};
 
-
   border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
   @include border-radius(var(--#{$prefix}input-border-radius), 0);
 
@@ -111,4 +110,10 @@
   button:disabled .d-icon {
     --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
   }
+
+  > .btn {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}input-border-radius);
+
+    margin: -1px;
+  }
 }

package/src/style/base/_tooltip.scss

@@ -0,0 +1,23 @@
+.tooltip {
+  --#{$prefix}tooltip-sm-font-size: #{$tooltip-font-size-sm};
+  --#{$prefix}tooltip-lg-font-size: #{$tooltip-font-size-lg};
+
+  fill: var(--#{$prefix}tooltip-bg);
+
+  &.tooltip-sm {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
+  }
+
+  &.tooltip-lg {
+    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-lg-font-size);
+  }
+
+  @each $theme, $value in $theme-colors {
+    $color: color-contrast-var($value);
+
+    &.tooltip-#{$theme} {
+      --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, #{$color});
+      --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}#{$theme}));
+    }
+  }
+}

package/src/style/base/_type.scss

@@ -0,0 +1,104 @@
+//
+// Headings
+//
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
+
+.h6 {
+  @extend h6;
+}
+
+
+.lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
+}
+
+// Type display classes
+[class*="display-"] {
+  font-family: $display-font-family;
+  font-size: var(--#{$prefix}display-font-size);
+  font-style: $display-font-style;
+  font-weight: $display-font-weight;
+  line-height: $display-line-height;
+}
+
+//
+// Emphasis
+//
+.small {
+  @extend small;
+}
+
+.mark {
+  @extend mark;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+  @include font-size($initialism-font-size);
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.blockquote-footer {
+  margin-top: -$blockquote-margin-y;
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  color: $blockquote-footer-color;
+
+  &::before {
+    content: "\2014\00A0"; // em dash, nbsp
+  }
+}

package/src/style/components/_+import.scss

@@ -20,5 +20,4 @@
 @import "d-stepper-desktop";
 @import "d-stepper-mobile";
 @import "d-card-account";
-@import "d-tooltip";
 @import "d-select";