@tabler/core 1.0.0-beta12 → 1.0.0-beta14

package/src/scss/_variables.scss

@@ -37,8 +37,6 @@ $font-size-500: 1.75rem !default;
 $font-size-600: 2rem !default;
 $font-size-700: 2.5rem !default;
 
-
-
 $line-height-100: 1rem !default;
 $line-height-200: 1.25rem !default;
 $line-height-300: 1.5rem !default;
@@ -47,8 +45,6 @@ $line-height-500: 2rem !default;
 $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
-
-
 $font-size-base: .875rem !default;
 $body-letter-spacing: 0 !default;
 
@@ -57,7 +53,7 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
 $font-weights: (
   light: $font-weight-light,
@@ -71,25 +67,25 @@ $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
 $line-height-lg: divide(1.5rem, $font-size-base) !default;
 
-$h1-font-size: divide(24rem, 16) !default;
-$h1-line-height: divide(2rem, $h1-font-size) !default;
+$h1-font-size: 1.5rem !default;
+$h1-line-height: 2rem !default;
 
-$h2-font-size: divide(20rem, 16) !default;
-$h2-line-height: divide(1.75rem, $h2-font-size) !default;
+$h2-font-size: 1.25rem !default;
+$h2-line-height: 1.75rem !default;
 
-$h3-font-size: divide(16rem, 16) !default;
-$h3-line-height: divide(1.5rem, $h3-font-size) !default;
+$h3-font-size: 1rem !default;
+$h3-line-height: 1.5rem !default;
 
-$h4-font-size: $font-size-base !default;
-$h4-line-height: divide(1.25rem, $h4-font-size) !default;
+$h4-font-size: .875rem !default;
+$h4-line-height: 1.25rem !default;
 
-$h5-font-size: divide(12rem, 16) !default;
-$h5-line-height: divide(1rem, $h5-font-size) !default;
+$h5-font-size: .75rem !default;
+$h5-line-height: 1rem !default;
 
-$h6-font-size: divide(10rem, 16) !default;
-$h6-line-height: divide(1rem, $h6-font-size) !default;
+$h6-font-size: .625rem !default;
+$h6-line-height: 1rem !default;
 
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
+$small-font-size: 85.714285% !default;
 
 $font-sizes: (
   h1: $h1-font-size,
@@ -151,8 +147,9 @@ $white: #ffffff !default;
 $light: $gray-50 !default;
 $dark: $gray-800 !default;
 
-$bg-surface: $white !default;
-$bg-surface-dark: $dark !default;
+$bg-surface: var(--#{$prefix}white) !default;
+$bg-surface-secondary: var(--#{$prefix}light) !default;
+$bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
@@ -183,15 +180,15 @@ $border-color-translucent: rgba($text-muted, $border-opacity) !default;
 $border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
 $border-color-light-translucent: rgba($text-muted, $border-light-opacity) !default;
 
-$border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
-$border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default;
-
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$active-bg: var(--#{$prefix}gray-100) !default;
+
 $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
+
 $disabled-bg: var(--#{$prefix}gray-100) !default;
+$disabled-color: var(--#{$prefix}gray-300) !default;
 
 $link-color: var(--#{$prefix}primary) !default;
 $link-hover-color: var(--#{$prefix}primary-darken) !default;
@@ -263,11 +260,14 @@ $gray-colors: (
 
 $theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
 
+//
 // Dark mode
+//
 $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
-$dark-mode-border-color: lighten($dark, 8%) !default;
+$dark-mode-border-color: lighten($dark, 4%) !default;
 $dark-mode-border-color-light: lighten($dark, 4%) !default;
+$dark-mode-border-color-active: lighten($dark, 12%) !default;
 $dark-mode-text: $light;
 
 // Borders
@@ -289,7 +289,13 @@ $code-line-height: 1.25rem !default;
 $code-bg: var(--#{$prefix}gray-100) !default;
 
 $pre-padding: 1rem !default;
-$pre-bg: $code-bg !default;
+$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
+$pre-color: var(--#{$prefix}light) !default;
+
+$kbd-padding-y: 2px !default;
+$kbd-color: var(--#{$prefix}muted) !default;
+$kbd-bg: transparent !default;
+$kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
@@ -307,17 +313,26 @@ $avatar-font-size: $h4-font-size;
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
-//Typography
-
+// Typography
 $hr-opacity: $border-opacity !default;
 $hr-margin-y: 2rem !default;
 
+// Caret
+$caret-width: .36em !default;
 $caret-spacing: .4em !default;
 
-//Sizing
+// Grid
 $grid-gutter-width: 1rem !default;
 $container-padding-x: 1.5rem !default;
 
+$container-variations: (
+  tight: 30rem,
+  narrow: 45rem,
+) !default;
+
+$content-padding-y: 1.25rem !default;
+
+// Spacers
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
@@ -330,13 +345,13 @@ $spacers: (
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
+// Sizes
 $size-spacers: (
   auto: auto,
   px: 1px,
   full: 100%
 ) !default;
 
-
 $size-values: map-merge($spacers, (
   25: 25%,
   33: 33.33333%,
@@ -347,14 +362,6 @@ $size-values: map-merge($spacers, (
   auto: auto
 )) !default;
 
-
-$container-variations: (
-  tight: 30rem,
-  narrow: 45rem,
-) !default;
-
-$content-padding-y: 1.25rem !default;
-
 // Aspect ratios
 $aspect-ratios: (
   "1x1": 100%,
@@ -389,7 +396,7 @@ $transition-time: .3s !default;
 // Overlay
 $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
 
-//accordion
+// Accordion
 $accordion-bg: transparent !default;
 $accordion-color: var(--#{$prefix}body-color) !default;
 $accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -400,7 +407,7 @@ $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
 $accordion-button-focus-border-color: $accordion-border-color !default;
 
-//alerts
+// Alerts
 $alert-padding-x: 1rem !default;
 $alert-padding-y: 1rem !default;
 $alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -409,7 +416,7 @@ $alert-border-width: 1px !default;
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 
-//breadcrumb
+// Breadcrumb
 $breadcrumb-divider-color: var(--#{$prefix}muted) !default;
 $breadcrumb-active-color: inherit !default;
 
@@ -419,7 +426,7 @@ $breadcrumb-variants: (
   bullets: "\02022",
 ) !default;
 
-//badges
+// Badges
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
@@ -427,10 +434,10 @@ $badge-padding-y: .25em !default;
 $badge-padding-x: .5em !default;
 $badge-empty-size: .5rem !default;
 
-//buttons
+// Buttons
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
-$input-btn-font-family: var(--#{$prefix}font-family) !default;
+$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
 $input-btn-padding-y: .5rem - .0625rem !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
@@ -443,7 +450,7 @@ $input-btn-padding-y-lg: .5rem !default;
 
 $input-btn-focus-width: .25rem !default;
 
-// inputs
+// Inputs
 $input-height: null !default;
 $input-height-sm: null !default;
 $input-height-lg: null !default;
@@ -451,19 +458,20 @@ $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: inherit !default;
 $input-focus-color: inherit !default;
 
-// buttons
+// Buttons
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
 
-//cards
+// Cards
 $card-title-spacer-y: 1.25rem !default;
 $card-box-shadow: var(--#{$prefix}shadow-card) !default;
 $card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
-$card-color: var(--#{$prefix}bg-surface) !default;
+$card-color: inherit !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color) !default;
@@ -472,7 +480,7 @@ $card-border-radius: var(--#{$prefix}border-radius) !default;
 $card-spacer-x: 1.5rem !default;
 $card-spacer-y: 1rem !default;
 
-$card-cap-bg: var(--#{$prefix}gray-50) !default;
+$card-cap-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $card-cap-color: inherit !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-padding-y: $card-spacer-y !default;
@@ -482,10 +490,17 @@ $card-group-margin: 1.5rem !default;
 
 $card-stamp-opacity: .2 !default;
 
+$card-ribbon-margin: .25rem !default;
+$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
+$card-ribbon-font-size: $h6-font-size !default;
+
+$card-header-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;
+
 $cards-grid-gap: 1rem !default;
 $cards-grid-breakpoint: lg !default;
 
-//carousel
+
+// Carousel
 $carousel-control-color: $white !default;
 $carousel-control-icon-width: 1.5rem !default;
 $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
@@ -493,18 +508,17 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w
 
 $carousel-indicator-thumb-opacity: .75 !default;
 $carousel-indicator-thumb-width: 4rem !default;
-
 $carousel-indicator-dot-width: .5rem !default;
 
-//close
+// Close
 $btn-close-width: .75rem !default;
 $btn-close-opacity: .3 !default;
 
-//datagrid
+// Datagrid
 $datagrid-padding: 1.5rem !default;
 $datagrid-item-width: 15rem !default;
 
-//dropdown
+// Dropdown
 $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
 $dropdown-font-size: $font-size-base !default;
@@ -517,17 +531,18 @@ $dropdown-link-hover-color: inherit !default;
 $dropdown-spacer: 1px !default;
 $dropdown-min-width: 11rem !default;
 $dropdown-max-width: 25rem !default;
-
 $dropdown-scrollable-height: 13rem !default;
-
 $dropdown-link-active-color: var(--#{$prefix}primary)  !default;
-$dropdown-link-active-bg: $active-bg !default;
+$dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
 
+// Tooltip
+$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
+$tooltip-color: var(--#{$prefix}light) !default;
 
-//loader
+// Loader
 $loader-size: 2.5rem !default;
 
-//lists
+// Lists
 $list-group-header-bg: var(--#{$prefix}light) !default;
 $list-group-header-color: var(--#{$prefix}muted) !default;
 
@@ -535,7 +550,7 @@ $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
 $list-group-item-padding-x: $card-cap-padding-x !default;
 
-//modals
+// Modals
 $modal-backdrop-opacity: .24 !default;
 $modal-backdrop-bg: $dark !default;
 $modal-backdrop-blur: 4px !default;
@@ -543,8 +558,9 @@ $modal-backdrop-blur: 4px !default;
 $modal-fade-transform: translate(0, -1rem) !default;
 
 $modal-content-border-color: transparent !default;
-$modal-content-bg: $gray-50 !default;
-$modal-content-border-radius: var(--#{$prefix}border-radius) !default;
+$modal-content-bg: var(--#{$prefix}bg-surface) !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
 
 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
@@ -562,15 +578,16 @@ $modal-lg: 720px !default;
 $modal-md: 540px !default;
 $modal-sm: 380px !default;
 
-//nav
+// Nav
 $nav-link-padding-y: .5rem !default;
 $nav-link-padding-x: .75rem !default;
-$nav-link-color: inherit !default;
+$nav-link-color: var(--#{$prefix}muted) !default;
+$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
 $nav-link-icon-color: var(--#{$prefix}icon-color) !default;
 
 $nav-pills-link-active-color: var(--#{$prefix}primary)  !default;
-$nav-pills-link-active-bg: $active-bg !default;
+$nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
 
 $nav-bordered-border-color: var(--#{$prefix}border-color) !default;
 $nav-bordered-border-width: var(--#{$prefix}border-width) !default;
@@ -579,8 +596,15 @@ $nav-bordered-link-active-border-color: var(--#{$prefix}primary)  !default;
 $nav-bordered-link-active-border-width: 2 * $border-width !default;
 $nav-bordered-margin-x: 1.25rem !default;
 
+$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
+$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;
 
-//navbar
+
+// Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: .25rem !default;
 
@@ -590,12 +614,14 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color)color !default;
-$navbar-light-disabled-color: rgba($body-color, .3) !default;
+$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
+$navbar-light-active-bg: rgba(0, 0, 0, .06) !default;
 
 $navbar-dark-color: rgba($white, $text-muted-opacity) !default;
 $navbar-dark-brand-color: $white !default;
 $navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .3) !default;
+$navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
+$navbar-dark-active-bg: rgba(255, 255, 255, .06) !default;
 
 $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
@@ -608,47 +634,50 @@ $navbar-toggler-padding-x: 0 !default;
 $navbar-toggler-padding-y: 0 !default;
 $navbar-toggler-animation-time: .2s !default;
 $navbar-toggler-focus-width: 0 !default;
+$navbar-overlap-height: 9rem !default;
 
 $navbar-nav-link-padding-x: $nav-link-padding-x !default;
 
 $navbar-active-border-color: var(--#{$prefix}primary) !default;
 
-$navbar-overlap-height: 9rem !default;
 
-//sidebar
+// Sidebar
 $sidebar-width: 15rem !default;
 
-//popover
+// Popover
+$popover-bg: var(--#{$prefix}bg-surface) !default;
+$popover-header-bg: transparent !default;
 $popover-border-color: var(--#{$prefix}border-color) !default;
+$popover-body-color: inherit !default;
 
-//footer
+// Footer
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}muted) !default;
 
 
-//pagination
+// Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
 $pagination-padding-x: .25rem !default;
 $pagination-color: var(--#{$prefix}muted) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
-$pagination-disabled-color: rgba($text-muted, .5) !default;
+$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $pagination-active-bg: var(--#{$prefix}primary) !default;
 $pagination-active-border-color: var(--#{$prefix}primary) !default;
 
-//statuses
+// Statuses
 $status-dot-size: .5rem !default;
 $status-height: 1.5rem !default;
 
-//steps
+// Steps
 $steps-border-width: 2px !default;
 $steps-color-inactive: #f3f5f5 !default;
 
-//spinner
+// Spinner
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;
 $spinner-width-sm: 1rem !default;
@@ -656,7 +685,7 @@ $spinner-height-sm: 1rem !default;
 $spinner-border-width: 2px !default;
 $spinner-border-width-sm: 1px !default;
 
-//tables
+// Tables
 $table-bg-scale-dark: 40% !default;
 $table-color: inherit !default;
 $table-cell-padding-x: .75rem !default;
@@ -668,36 +697,38 @@ $table-th-padding-y: .5rem !default;
 $table-th-color: var(--#{$prefix}muted) !default;
 $table-th-bg: var(--#{$prefix}gray-50) !default;
 $table-striped-order: even !default;
-$table-striped-bg: var(--#{$prefix}gray-50) !default;
+$table-striped-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
 $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
 
-//toasts
+// Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
 $toast-header-color: var(--#{$prefix}muted) !default;
 
-//progress
-$progress-bg: var(--#{$prefix}gray-200) !default;
+// Tracking
+$tracking-height: 1.5rem !default;
+$tracking-gap-width: .125rem !default;
+$tracking-border-radius: var(--#{$prefix}border-radius) !default;
+
+// Progress
+$progress-bg: var(--#{$prefix}border-color) !default;
 $progress-border-radius: var(--#{$prefix}border-radius) !default;
 $progress-bar-bg: var(--#{$prefix}primary) !default;
 $progress-height: .5rem !default;
 
-//ribbons
-$ribbon-margin: .25rem !default;
-
-
+// Lists
 $list-group-bg: inherit !default;
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-action-color: inherit !default;
 $list-group-hover-bg: $hover-bg !default;
-$list-group-active-bg: $active-bg !default;
+$list-group-active-bg: var(--#{$prefix}active-bg) !default;
 $list-group-active-border-color: $list-group-border-color !default;
 $list-group-active-color: inherit !default;
 
-$input-bg: $white !default;
+$input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
@@ -709,24 +740,25 @@ $input-group-addon-color: var(--#{$prefix}muted) !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 
-//Forms
+// Forms
 $form-check-margin-bottom: .5rem !default;
 $form-check-input-width: 1rem !default;
 $form-check-padding-start: $form-check-input-width + .5rem !default;
-$form-check-input-bg: $white !default;
-$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color-translucent !default;
+
+$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
+$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
+
 $form-check-input-checked-bg-size: 1rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
-
-$form-check-input-checked-color: $white !default;
+$form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
 $form-check-input-checked-bg-repeat: repeat !default;
-$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
-$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
-$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !default;
-
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
 $form-check-input-checked-border-color: $input-border-color-translucent !default;
 
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !default;
+
 $form-check-label-disabled-opacity: $text-muted-opacity;
 
 $form-select-indicator-color: $text-muted-light !default;
@@ -738,8 +770,8 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
-$form-range-track-bg: var(--#{$prefix}gray-200) !default;
-$form-range-thumb-border: 2px solid $white !default;
+$form-range-track-bg: var(--#{$prefix}border-color) !default;
+$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
 $form-range-thumb-bg: var(--#{$prefix}primary) !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
@@ -750,24 +782,23 @@ $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='htt
 $form-label-font-size: $h4-font-size !default;
 $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
-$caret-width: .36em !default;
-
 // Legend
-$legend-bg: var(--#{$prefix}gray-50) !default;
+$legend-bg: var(--#{$prefix}border-color) !default;
 $legend-size: .75em !default;
 $legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
-//Flags
+// Flags
 $flag-border-size: var(--#{$prefix}border-size) !default;
 $flag-border-color: var(--#{$prefix}border-color) !default;
 $flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;
 
-//Payments
+// Payments
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
-$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
+$offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
+$offcanvas-border-color: var(--#{$prefix}border-color) !default;
 
 // Placeholder
 $placeholder-opacity-min: .1 !default;

package/src/scss/demo/_examples.scss

@@ -1,7 +1,7 @@
 .example {
   padding: 2rem;
   margin: 1rem 0 2rem;
-  border: var(--#{$prefix}border-width) solid $border-color;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: 3px 3px 0 0;
   position: relative;
 
@@ -37,7 +37,7 @@
 
 .example-code {
   margin: 2rem 0;
-  border: var(--#{$prefix}border-width) solid $border-color;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-top: none;
 
   pre {