@tabler/core 1.0.0-alpha.24 → 1.0.0-beta11

package/src/scss/_variables.scss

@@ -1,4 +1,4 @@
-$variable-prefix: "tblr-" !default;
+$prefix: "tblr-" !default;
 
 // BASE CONFIG
 $enable-social-colors: true !default;
@@ -7,20 +7,21 @@ $enable-gradients: false !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
+$enable-rfs: false !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Inter' !default;
-$google-font-monospaced: null !default;
+$font-google: null !default;
+$font-google-monospaced: null !default;
+$font-local: null !default;
+$font-icons: () !default;
 
-$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}")-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
-// EXTERNAL FONTS
-$icon-fonts: () !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
@@ -35,27 +36,29 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$line-height-base: (1.25rem/$font-size-base) !default;
-$line-height-sm: (1rem/$font-size-base) !default;
-$line-height-lg: (1.5rem/$font-size-base) !default;
+$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: (24rem / 16) !default;
-$h1-line-height: (2rem/$h1-font-size) !default;
+$h1-font-size: divide(24rem, 16) !default;
+$h1-line-height: divide(2rem, $h1-font-size) !default;
 
-$h2-font-size: (18rem / 16) !default;
-$h2-line-height: (1.75rem/$h2-font-size) !default;
+$h2-font-size: divide(20rem, 16) !default;
+$h2-line-height: divide(1.75rem, $h2-font-size) !default;
 
-$h3-font-size: (16rem / 16) !default;
-$h3-line-height: (1.5rem/$h3-font-size) !default;
+$h3-font-size: divide(16rem, 16) !default;
+$h3-line-height: divide(1.5rem, $h3-font-size) !default;
 
 $h4-font-size: $font-size-base !default;
-$h4-line-height: (1.25rem/$h4-font-size) !default;
+$h4-line-height: divide(1.25rem, $h4-font-size) !default;
 
-$h5-font-size: (12rem / 16) !default;
-$h5-line-height: (1rem/$h5-font-size) !default;
+$h5-font-size: divide(12rem, 16) !default;
+$h5-line-height: divide(1rem, $h5-font-size) !default;
 
-$h6-font-size: (10rem / 16) !default;
-$h6-line-height: (1rem/$h6-font-size) !default;
+$h6-font-size: divide(10rem, 16) !default;
+$h6-line-height: divide(1rem, $h6-font-size) !default;
+
+$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
 
 $display-font-sizes: (
   1: 5rem,
@@ -63,13 +66,9 @@ $display-font-sizes: (
   3: 4rem,
   4: 3.5rem,
   5: 3rem,
-  6: 2.5rem
+  6: 2rem
 ) !default;
 
-$small-font-size: percentage($h5-font-size/$font-size-base) !default;
-$code-font-size: $small-font-size !default;
-$code-line-height: 1.25rem !default;
-
 $lead-font-size: $font-size-base !default;
 $lead-font-weight: $font-weight-normal !default;
 
@@ -82,35 +81,30 @@ $text-muted-light-opacity: .4 !default;
 $text-muted-dark-opacity: .8 !default;
 
 $border-opacity: .16 !default;
+$border-light-opacity: .08 !default;
 $border-dark-opacity: .24 !default;
-
-$light: #f4f6fa !default;
-$dark: #232e3c !default;
-
-$body-bg: $light !default;
+$border-active-opacity: .48 !default;
+
+$gray-50: #fafbfc !default;
+$gray-100: #f1f5f9 !default;
+$gray-200: #e2e8f0 !default;
+$gray-300: #cbd5e1 !default;
+$gray-400: #94a3b8 !default;
+$gray-500: #64748b !default;
+$gray-600: #475569 !default;
+$gray-700: #334155 !default;
+$gray-800: #1e293b !default;
+$gray-900: #0f172a !default;
+
+$light: $gray-50 !default;
+$dark: $gray-800 !default;
+
+$body-bg: #f5f7fb !default;
 $body-color: $dark !default;
 
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;
 
-$light-black: rgba($dark, .24) !default;
-$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
-$light-white: rgba($light, .24) !default;
-
-$min-black: rgba($dark, .024) !default;
-$min-white: rgba(mix($light, $dark, 48%), .1) !default;
-
-$gray-50: #fbfbfb !default;
-$gray-100: $light !default;
-$gray-200: mix($light, $dark, 98%) !default;
-$gray-300: mix($light, $dark, 94%) !default;
-$gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 16%) !default;
-$gray-900: $dark !default;
-
 $blue: #206bc4 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
@@ -133,11 +127,17 @@ $text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)
 $border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
 $border-color-transparent: rgba($text-muted, $border-opacity) !default;
 
+$border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
+$border-color-light-transparent: rgba($text-muted, $border-light-opacity) !default;
+
 $border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
 $border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
 
-$active-bg: rgba($blue, .06) !default;
-$hover-bg: rgba($text-muted, .06) !default;
+$border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
+$border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
+
+$active-bg: rgba($blue, .04) !default;
+$hover-bg: rgba($text-muted, .04) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -146,11 +146,37 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
-$code-color: $primary !default;
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark":  $dark,
+  "muted": $text-muted
+) !default;
+
+$extra-colors: (
+  "blue": $blue,
+  "azure": $azure,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "lime": $lime,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+) !default;
 
 $social-colors: (
   "facebook": #3b5998,
   "twitter": #1da1f2,
+  "linkedin": #0a66c2,
   "google": #dc4e41,
   "youtube": #ff0000,
   "vimeo": #1ab7ea,
@@ -165,25 +191,13 @@ $social-colors: (
   "tabler": #206bc4
 ) !default;
 
-$colors: (
-  "blue": $blue,
-  "azure": $azure,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "lime": $lime,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan,
-) !default;
-
+$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-light: lighten($dark, 4%) !default;
 $dark-mode-text: $light;
 
 // Borders
@@ -193,16 +207,22 @@ $border-width-wide: 2px !default;
 $border-radius-sm: 2px !default;
 $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
-$border-radius-pill: 50% !default;
+$border-radius-pill: 100rem !default;
+
+// Code
+$code-color: $text-muted-dark !default;
+$code-font-size: $small-font-size !default;
+$code-line-height: 1.25rem !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (
-  "xs": 1.25rem,
+  "xs": 1.5rem,
   "sm": 2rem,
   "md": 3.75rem,
   "lg": 5rem,
-  "xl": 7rem
+  "xl": 7rem,
+  "2xl": 11rem,
 ) !default;
 $avatar-border-radius: $border-radius !default;
 $avatar-font-size: $h4-font-size;
@@ -211,7 +231,7 @@ $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
 //Typography
-$headings-font-weight: $font-weight-medium !default;
+$headings-font-weight: $font-weight-bold !default;
 
 $hr-opacity: $border-opacity !default;
 $hr-margin-y: 2rem !default;
@@ -225,8 +245,8 @@ $container-padding-x: 1.5rem !default;
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: $spacer * .25,
+  2: $spacer * .5,
   3: $spacer,
   4: $spacer * 2,
   5: $spacer * 4,
@@ -243,7 +263,9 @@ $size-spacers: (
 
 $size-values: map-merge($spacers, (
   25: 25%,
+  33: 33.33333%,
   50: 50%,
+  66: 66.66666%,
   75: 75%,
   100: 100%,
   auto: auto
@@ -257,13 +279,35 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
+// Acpect ratios
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "3x4": calc(4 / 3 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "9x16": calc(16 / 9 * 100%),
+  "21x9": calc(9 / 21 * 100%),
+  "9x21": calc(21 / 9 * 100%),
+) !default;
+
+// Shadows
+$shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+
+// Transitions
+$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-bg: transparent !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
 $accordion-border-color: $border-color-transparent !default;
 $accordion-icon-width: 1rem !default;
 
+$accordion-button-bg: transparent !default;
 $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
-
 $accordion-button-focus-border-color: $accordion-border-color !default;
 
 //alerts
@@ -276,6 +320,9 @@ $alert-border-color: $border-color-transparent !default;
 $alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 
 //breadcrumb
+$breadcrumb-divider-color: $text-muted !default;
+$breadcrumb-active-color: inherit !default;
+
 $breadcrumb-variants: (
   dots: "·",
   arrows: "›",
@@ -286,10 +333,11 @@ $breadcrumb-variants: (
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: $font-weight-medium !default;
+$badge-padding-y: .25em !default;
+$badge-padding-x: .5em !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
-$input-color: $body-color !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-padding-y: .5rem - .0625rem !default;
@@ -313,26 +361,31 @@ $input-focus-color: inherit !default;
 //buttons
 $btn-padding-x: 1rem !default;
 $btn-font-weight: $font-weight-medium !default;
-$btn-border-radius: 3px !default;
+$btn-border-radius: $border-radius !default;
 
 //cards
+$card-title-spacer-y: 1.25rem !default;
+
 $card-border-width: $border-width !default;
 $card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 
-$card-cap-bg: $light !default;
-$card-cap-color: $text-muted !default;
-$card-cap-padding-x: 1rem !default;
-$card-cap-padding-y: .75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-spacer-y: 1rem !default;
 
-$card-spacer-x: 1rem !default;
+$card-cap-bg: $gray-50 !default;
+$card-cap-color: $text-muted !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-padding-y: $card-spacer-y !default;
 
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
 
-$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+$card-shadow: $shadow !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
+$card-stamp-opacity: .2 !default;
+
 $cards-grid-gap: 1rem !default;
 $cards-grid-breakpoint: lg !default;
 
@@ -342,11 +395,19 @@ $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;
 $carousel-control-next-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='9 18 15 12 9 6'></polyline></svg>") !default;
 
+$carousel-indicator-thumb-opacity: .75 !default;
+$carousel-indicator-thumb-width: 4rem !default;
+
+$carousel-indicator-dot-width: .5rem !default;
 
 //close
 $btn-close-width: .75rem !default;
 $btn-close-opacity: .3 !default;
 
+// datagrid
+$datagrid-padding: 1.5rem !default;
+$datagrid-item-width: 15rem !default;
+
 //dropdown
 $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
@@ -412,12 +473,19 @@ $nav-link-padding-x: .75rem !default;
 $nav-pills-link-active-color: $primary !default;
 $nav-pills-link-active-bg: $active-bg !default;
 
+$nav-bordered-border-color: $border-color !default;
+$nav-bordered-border-width: $border-width !default;
+$nav-bordered-link-active-color: $primary !default;
+$nav-bordered-link-active-border-color: $primary !default;
+$nav-bordered-link-active-border-width: 2 * $border-width !default;
+$nav-bordered-margin-x: 1.25rem !default;
+
 
 //navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: .25rem !default;
 
-$navbar-light-color: rgba($body-color, $text-muted-opacity) !default;
+$navbar-light-color: $body-color !default;
 $navbar-light-brand-color: $body-color !default;
 $navbar-light-border-color: $border-color-transparent !default;
 $navbar-light-active-color: $body-color !default;
@@ -453,6 +521,7 @@ $sidebar-width: 15rem !default;
 $popover-border-color: $border-color !default;
 
 //footer
+$footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: $border-color !default;
 $footer-border-color: $border-color !default;
@@ -467,6 +536,9 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;
 
+//statuses
+$status-dot-size: .5rem !default;
+$status-height: 1.5rem !default;
 
 //steps
 $steps-border-width: 2px !default;
@@ -478,20 +550,25 @@ $spinner-height: 1.5rem !default;
 $spinner-width-sm: 1rem !default;
 $spinner-height-sm: 1rem !default;
 $spinner-border-width: 2px !default;
-$spinner-border-width-sm: 1px !default;
 
 //tables
 $table-color: inherit !default;
+$table-cell-padding-x: .75rem !default;
+$table-cell-padding-y: .75rem !default;
 $table-border-color: $border-color-transparent !default;
-$table-head-border-color: $border-color-transparent !default;
-$table-head-padding-y: .5rem !default;
-$table-head-color: $text-muted !default;
-$table-head-bg: $light !default;
+$table-th-border-color: $border-color-transparent !default;
+$table-th-padding-x: $table-cell-padding-x !default;
+$table-th-padding-y: .5rem !default;
+$table-th-color: $text-muted !default;
+$table-th-bg: var(--#{$prefix}border-color-light) !default;
 $table-striped-order: even !default;
-$table-striped-bg: $light !default;
-$table-accent-bg: $light !default;
+$table-striped-bg: var(--#{$prefix}border-color-light) !default;
 $table-group-separator-color: $border-color-transparent !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
 $toast-border-color: $border-color !default;
 $toast-header-color: $text-muted !default;
@@ -504,11 +581,16 @@ $progress-height: .5rem !default;
 $ribbon-margin: .25rem !default;
 
 
+$list-group-bg: inherit !default;
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
-$list-group-bg: inherit !default;
+$list-group-hover-bg: $hover-bg !default;
+$list-group-active-bg: $active-bg !default;
+$list-group-active-border-color: $list-group-border-color !default;
+$list-group-active-color: inherit !default;
 
-$input-disabled-bg: $gray-100 !default;
+$input-bg: $white !default;
+$input-disabled-bg: $gray-50 !default;
 $input-border-color: $border-color-dark !default;
 $input-border-color-transparent: $border-color-dark-transparent !default;
 $input-placeholder-color: $text-muted-light !default;
@@ -538,7 +620,7 @@ $form-check-input-checked-border-color: $input-border-color-transparent !default
 
 $form-check-label-disabled-opacity: $text-muted-opacity;
 
-$form-select-indicator-color: $border-color-dark !default;
+$form-select-indicator-color: $text-muted-light !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.125rem !default;
@@ -547,8 +629,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: $light-mix !default;
-$form-range-thumb-border: 2px solid $white !default;
+$form-range-track-bg: var(--#{$prefix}border-color-light) !default;
+$form-range-thumb-border: 2px solid $form-range-track-bg !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
 
@@ -566,3 +648,9 @@ $flag-sizes: $avatar-sizes !default;
 //Payments
 $payment-sizes: $avatar-sizes !default;
 
+// Offcanvas
+$offcanvas-border-color: $border-color-transparent !default;
+
+// Placeholder
+$placeholder-opacity-min: .1 !default;
+$placeholder-opacity-max: .2 !default;

package/src/scss/demo/_examples.scss

@@ -1,6 +1,6 @@
 .example {
   padding: 2rem;
-  margin: 2rem 0;
+  margin: 1rem 0 2rem;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
   position: relative;
@@ -79,8 +79,17 @@
 }
 
 @include dark-mode {
+  .example {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .example-content {
+    color: $dark-mode-text;
+  }
+
   .example-code {
-    border: 1px solid $border-color;
+    border-color: $dark-mode-border-color;
     border-top: none;
   }
 }

package/src/scss/demo/_highlight.scss

@@ -11,7 +11,6 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: $code-font-size;
   border-radius: $border-radius;
   @include scrollbar;
 }

package/src/scss/demo.scss

@@ -60,7 +60,7 @@ body.no-transitions * {
 }
 
 
-$demo-icon-size: 7rem;
+$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -82,11 +82,11 @@ $demo-icon-size: 7rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: $demo-icon-size;
+  aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-right: 1px solid var(--#{$prefix}border-color);
+  border-bottom: 1px solid var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,3 +101,32 @@ $demo-icon-size: 7rem;
   }
 }
 
+
+//
+// Settings
+//
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: $shadow;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--#{$prefix}border-color);
+  box-shadow: $shadow;
+
+  &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
+  &-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
+  &-transparent { background: $light; }
+  &-dark { background: $dark; }
+  &-colored { background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%); }
+}

package/src/scss/fonts/_webfonts.scss

@@ -1,15 +1,65 @@
-@if $google-font {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google {
+  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-url);
+} @else if $font-local {
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff') format('woff');
+  }
 }
 
-@if $google-font-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google-monospaced {
+  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-monospaced-url);
 }
 
-@if $icon-fonts {
-  @each $icon-font in $icon-fonts {
+@if $font-icons {
+  @each $icon-font in $font-icons {
     @import url($icon-font);
   }
 }