Add theme settings (#2054)

.changeset/shy-mangos-sit.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add theme settings wizard

core/scss/_bootstrap-components.scss

@@ -29,8 +29,5 @@
 @import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/placeholders";
 
-// Helpers
-@import "bootstrap/scss/helpers";
-
 // Utilities
 @import "bootstrap/scss/utilities/api";

core/scss/_core.scss

@@ -1,6 +1,8 @@
 @import "config";
 @import "bootstrap-components";
 
+@import "props";
+
 @import "fonts/webfonts";
 
 @import "layout/root";
@@ -65,6 +67,8 @@
 @import "ui/chat";
 @import "ui/signature";
 
+@import "helpers/index";
+
 @import "utils/background";
 @import "utils/colors";
 @import "utils/scroll";

core/scss/_props.scss

@@ -0,0 +1,87 @@
+@import "config";
+
+:root,
+:host {
+  /** Fonts */
+  --#{$prefix}font-monospace: #{$font-family-monospace};
+  --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
+  --#{$prefix}font-serif: #{$font-family-serif};
+  --#{$prefix}font-comic: #{$font-family-comic};
+
+  /** Gray colors */
+  --#{$prefix}gray-50: #{$gray-50};
+  --#{$prefix}gray-100: #{$gray-100};
+  --#{$prefix}gray-200: #{$gray-200};
+  --#{$prefix}gray-300: #{$gray-300};
+  --#{$prefix}gray-400: #{$gray-400};
+  --#{$prefix}gray-500: #{$gray-500};
+  --#{$prefix}gray-600: #{$gray-600};
+  --#{$prefix}gray-700: #{$gray-700};
+  --#{$prefix}gray-800: #{$gray-800};
+  --#{$prefix}gray-900: #{$gray-900};
+  --#{$prefix}gray-950: #{$gray-950};
+
+  --#{$prefix}white: #{$white};
+  --#{$prefix}black: #{$black};
+  --#{$prefix}dark: #{$dark};
+  --#{$prefix}light: #{$light};
+
+  /** Brand colors */
+  --#{$prefix}brand: #{$primary};
+
+  /** Theme colors */
+  @each $name, $color in map-merge($theme-colors, $social-colors) {
+    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
+    --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+  }
+
+  /** Social colors */
+  @each $name, $color in $social-colors {
+    --#{$prefix}#{$name}: #{$color};
+  }
+
+  /** Spacers */
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+
+  /** Font sizes */
+  @each $name, $value in $font-weights {
+    --#{$prefix}font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $font-sizes {
+    --#{$prefix}font-size-h#{$name}: #{$value};
+  }
+
+  @each $name, $value in $line-heights {
+    --#{$prefix}line-height-#{$name}: #{$value};
+  }
+
+  /** Shadows */
+  @each $name, $value in $box-shadows {
+    --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
+  }
+
+  /** Border radiuses */
+  --#{$prefix}border-radius-scale: 1;
+  @each $name, $value in $border-radiuses {
+    --#{$prefix}border-radius#{if($name, '-#{$name}', '')}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
+  }
+
+  /** Backdrops */
+  --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
+  --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
+  @each $name, $value in $backdrops {
+    --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
+  }
+  --#{$prefix}backdrop-blur: #{$backdrop-blur};
+  --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
+}

core/scss/_variables.scss

@@ -24,8 +24,9 @@ $font-local: null !default;
 $font-icons: () !default;
 
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -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 !default;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
+$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
@@ -144,16 +145,17 @@ $border-light-opacity: 0.08 !default;
 $border-dark-opacity: 0.24 !default;
 $border-active-opacity: 0.58 !default;
 
-$gray-50:  #f6f8fb !default;
-$gray-100: #eef3f6 !default;
-$gray-200: #dce1e7 !default;
-$gray-300: #b8c4d4 !default;
-$gray-400: #8a97ab !default;
-$gray-500: #6c7a91 !default;
-$gray-600: #49566c !default;
-$gray-700: #3a4859 !default;
-$gray-800: #182433 !default;
-$gray-900: #040a11 !default;
+$gray-50:  #f9fafb !default;
+$gray-100: #f3f4f6 !default;
+$gray-200: #e5e7eb !default;
+$gray-300: #d1d5db !default;
+$gray-400: #9ca3af !default;
+$gray-500: #6b7280 !default;
+$gray-600: #4b5563 !default;
+$gray-700: #374151 !default;
+$gray-800: #1f2937 !default;
+$gray-900: #111827 !default;
+$gray-950: #030712 !default;
 
 $black: #000000 !default;
 $white: #ffffff !default;
@@ -186,19 +188,7 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #066fd1;
-$color-azure: #3586c9;
-$color-indigo: #4263eb;
-$color-purple: #ae3ec9;
-$color-pink: #d6336c;
-$color-red: #e73f3f;
-$color-orange: #f76707;
-$color-yellow: #f59f00;
-$color-lime: #74b816;
-$color-green: #2fb344;
-$color-teal: #0ca678;
-$color-cyan: #17a2b8;
-
+$text-muted: $gray-500 !default;
 $text-secondary: $gray-500 !default;
 $text-secondary-light: $gray-400 !default;
 $text-secondary-dark: $gray-600 !default;
@@ -223,6 +213,7 @@ $disabled-color: var(--#{$prefix}gray-300) !default;
 
 $primary: $blue !default;
 $secondary: $text-secondary !default;
+$muted: $text-secondary !default;
 $success: $green !default;
 $info: $azure !default;
 $warning: $orange !default;
@@ -232,14 +223,14 @@ $link-color: $primary !default;
 
 $theme-colors: (
   "primary": $primary,
-  "secondary": $text-secondary,
+  "secondary": $secondary,
   "success": $success,
   "info": $info,
   "warning": $warning,
   "danger": $danger,
   "light": $light,
   "dark": $dark,
-  "muted": $text-secondary,
+  "muted": $muted,
 ) !default;
 
 $extra-colors: (
@@ -289,7 +280,16 @@ $gray-colors: (
   gray-900: $gray-900,
 ) !default;
 
-$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
+$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
+
+// BACKDROPS
+$backdrop-opacity: 24% !default;
+$backdrop-blur: 4px !default;
+$backdrop-bg: var(--#{$prefix}gray-800) !default;
+$backdrops: (
+  dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
+  light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
+) !default;
 
 // Borders
 $border-width: 1px !default;
@@ -300,6 +300,15 @@ $border-radius: 6px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-radiuses: (
+  0: 0,
+  sm: $border-radius-sm,
+  md: $border-radius,
+  lg: $border-radius-lg,
+  pill: $border-radius-pill,
+  null: var(--#{$prefix}border-radius-md),
+) !default;
+
 $border-values: (
   null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
   wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
@@ -380,7 +389,7 @@ $avatar-sizes: (
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
-$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
 
 $link-decoration: none !default;
@@ -498,13 +507,13 @@ $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0
 $box-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1) !default;
 
 $box-shadows: (
-  box-shadow: $box-shadow,
-  box-shadow-border: $box-shadow-border,
-  box-shadow-transparent: $box-shadow-transparent,
-  box-shadow-input: $box-shadow-input,
-  box-shadow-card: $box-shadow-card,
-  box-shadow-card-hover: $box-shadow-card-hover,
-  box-shadow-dropdown: $box-shadow-dropdown,
+  null: $box-shadow,
+  border: $box-shadow-border,
+  transparent: $box-shadow-transparent,
+  input: $box-shadow-input,
+  card: $box-shadow-card,
+  card-hover: $box-shadow-card-hover,
+  dropdown: $box-shadow-dropdown,
 ) !default;
 
 $box-shadow-inset: 0 0 transparent !default;
@@ -569,7 +578,7 @@ $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 // Buttons
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
-$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
+$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
 $input-btn-padding-y: 0.5rem - 0.0625rem !default;
 $input-btn-icon-size: $icon-size !default;
 
@@ -594,7 +603,7 @@ $input-height-lg: null !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: var(--#{$prefix}body-color) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
-$input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$input-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Buttons
 $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
@@ -605,7 +614,7 @@ $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
-$btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$btn-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
@@ -677,16 +686,16 @@ $dropdown-max-width: 25rem !default;
 $dropdown-scrollable-height: 13rem !default;
 $dropdown-link-active-color: var(--#{$prefix}primary) !default;
 $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow-dropdown) !default;
+$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
 
 $dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 
 // Tooltip
-$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
-$tooltip-color: var(--#{$prefix}light) !default;
+$tooltip-bg: var(--#{$prefix}bg-surface-inverted) !default;
+$tooltip-color: var(--#{$prefix}text-inverted) !default;
 $tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
-$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
+$tooltip-padding-x: var(--#{$prefix}spacer-3) !default;
 
 // Loader
 $loader-size: 2.5rem !default;
@@ -701,7 +710,7 @@ $list-group-item-padding-x: $card-cap-padding-x !default;
 
 // Modals
 $modal-backdrop-opacity: 0.24 !default;
-$modal-backdrop-bg: $dark !default;
+$modal-backdrop-bg: $backdrop-bg !default;
 $modal-backdrop-blur: 4px !default;
 
 $modal-fade-transform: translate(0, -1rem) !default;
@@ -760,7 +769,7 @@ $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 $navbar-light-color: var(--#{$prefix}secondary) !default;
 
-$navbar-hover-color: $white !default;
+$navbar-hover-color: var(--#{$prefix}body-color) !default;
 
 $navbar-border-width: var(--#{$prefix}border-width) !default;
 $navbar-border-color: var(--#{$prefix}border-color) !default;
@@ -899,7 +908,7 @@ $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;
-$input-placeholder-color: $text-secondary-light !default;
+$input-placeholder-color: var(--#{$prefix}tertiary) !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $input-group-addon-color: var(--#{$prefix}gray-500) !default;
@@ -930,7 +939,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-label-disabled-opacity: $text-secondary-opacity;
 
 $form-select-indicator-color: $text-secondary-light !default;
-$form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$form-select-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
@@ -959,7 +968,7 @@ $form-feedback-icon-invalid: str-replace(
 $form-label-font-size: $h4-font-size !default;
 $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
-$form-secondary-color: var(--#{$prefix}gray-500) !default;
+$form-secondary-color: var(--#{$prefix}secondary) !default;
 
 // Legend
 $legend-bg: var(--#{$prefix}border-color) !default;
@@ -967,7 +976,7 @@ $legend-size: 0.75em !default;
 $legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 // Flags
-$flag-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$flag-box-shadow: var(--#{$prefix}shadow-border) !default;
 $flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;
 
@@ -977,6 +986,7 @@ $payment-sizes: $avatar-sizes !default;
 // Offcanvas
 $offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
 $offcanvas-border-color: var(--#{$prefix}border-color) !default;
+$offcanvas-backdrop-bg: $backdrop-bg !default;
 
 // Placeholder
 $placeholder-opacity-min: 0.1 !default;

core/scss/helpers/_index.scss

@@ -0,0 +1,143 @@
+//
+// Clearfix
+//
+.clearfix {
+  @include clearfix();
+}
+
+//
+// Text truncation
+//
+.text-truncate {
+  @include text-truncate();
+}
+
+//
+// Vertical rule
+//
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: $vr-border-width;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: $hr-opacity;
+}
+
+//
+// Stretched link
+//
+.stretched-link {
+  &::#{$stretched-link-pseudo-element} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $stretched-link-z-index;
+    content: "";
+  }
+}
+
+//
+// Visually hidden
+//
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  @include visually-hidden();
+}
+
+//
+// Stacks
+//
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+//
+// Position
+//
+// Shorthand
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+// Responsive sticky top and bottom
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .sticky#{$infix}-top {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-sticky;
+    }
+
+    .sticky#{$infix}-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: $zindex-sticky;
+    }
+  }
+}
+
+//
+// Aspect ratio
+//
+.ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    display: block;
+    padding-top: var(--#{$prefix}aspect-ratio);
+    content: "";
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@each $key, $ratio in $aspect-ratios {
+  .ratio-#{$key} {
+    --#{$prefix}aspect-ratio: #{$ratio};
+  }
+}
+
+//
+// Focus ring
+//
+.focus-ring:focus {
+  outline: 0;
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}
+

core/scss/layout/_dark.scss

@@ -2,53 +2,55 @@
 
 // stylelint-disable declaration-no-important
 
-body {
-  &:not(.theme-dark):not([data-bs-theme=dark]) {
-    .hide-theme-light {
-      display: none !important;
-    }
-
-    .img-dark {
-      display: none !important;
-    }
-  }
-
-  &.theme-dark,
-  &[data-bs-theme=dark] {
-    .hide-theme-dark {
-      display: none !important;
-    }
-
-    .img-light {
-      display: none !important;
-    }
-  }
-}
-
 @if $enable-dark-mode {
-  @include color-mode(dark, true) {
-    --#{$prefix}body-color: #{$body-color-dark};
-    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    --#{$prefix}muted: #{$text-secondary-dark};
+  :root {
+    &:not(.theme-dark):not([data-bs-theme="dark"]) {
+      .hide-theme-light {
+        display: none !important;
+      }
 
-    --#{$prefix}body-bg: #{$darken-dark};
-    --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+      .img-dark {
+        display: none !important;
+      }
+    }
+
+    &.theme-dark,
+    &[data-bs-theme="dark"] {
+      .hide-theme-dark {
+        display: none !important;
+      }
+
+      .img-light {
+        display: none !important;
+      }
+    }
+  }
+
+
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+    --#{$prefix}body-color: var(--#{$prefix}gray-200);
+    --#{$prefix}secondary: var(--#{$prefix}gray-400);
+
+    --#{$prefix}body-bg: var(--#{$prefix}gray-900);
     --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
     --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    --#{$prefix}bg-forms: #{$darken-dark};
-    --#{$prefix}bg-surface: #{$dark};
-    --#{$prefix}bg-surface-dark: #{$darken-dark};
-    --#{$prefix}bg-surface-secondary: #{$lighten-dark};
-    --#{$prefix}bg-surface-tertiary: #{$darken-dark};
+    --#{$prefix}bg-forms: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface: var(--#{$prefix}gray-800);
+    --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-100);
+    --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-800);
 
-    --#{$prefix}link-color: #{color.adjust($primary, $lightness: 8%)};
-    --#{$prefix}link-hover-color: #{$primary};
+    --#{$prefix}text-inverted: var(--#{$prefix}gray-800);
+
+    --#{$prefix}link-color: var(--#{$prefix}primary);
+    --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
 
     --#{$prefix}active-bg: #{$lighten-dark};
     --#{$prefix}disabled-color: var(--#{$prefix}gray-700);
 
-    --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
+    --#{$prefix}border-color: var(--#{$prefix}gray-700);
     --#{$prefix}border-color-translucent: var(
       --#{$prefix}dark-mode-border-color-translucent
     );
@@ -62,13 +64,6 @@ body {
     --#{$prefix}code-color: var(--#{$prefix}body-color);
     --#{$prefix}code-bg: #{$border-dark-color-dark};
 
-    @each $color, $value in $theme-colors {
-      --#{$prefix}#{$color}-lt: #{theme-color-lighter($value, $dark)};
-      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(
-          theme-color-lighter($value, $dark)
-        )};
-    }
-
     .navbar-brand-autodark {
       .navbar-brand-image {
         @include autodark-image;

core/scss/layout/_navbar.scss

@@ -83,6 +83,7 @@ Navbar
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
   --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
   align-items: stretch;
   min-height: $navbar-height;
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);

core/scss/layout/_root.scss

@@ -2,31 +2,34 @@
 :host {
   font-size: 16px;
   height: 100%;
+
 }
 
 :root,
 :host,
 [data-bs-theme="light"] {
-  @each $name, $color in map-merge($theme-colors, $gray-colors) {
-    --#{$prefix}#{$name}: #{$color};
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
-    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
-    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
-    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
-  }
+  color-scheme: light;
+  --#{$prefix}spacer: var(--#{$prefix}spacer-2);
 
-  @each $name, $value in $spacers {
-    --#{$prefix}spacer-#{$name}: #{$value};
-  }
-  --#{$prefix}spacer: #{$spacer};
-
-  --#{$prefix}bg-surface: #{$bg-surface};
-  --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
-  --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
-  --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
+  --#{$prefix}bg-surface: var(--#{$prefix}bg-surface-primary);
+  --#{$prefix}bg-surface-primary: var(--#{$prefix}white);
+  --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-50);
+  --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-50);
+  --#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
+  --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-900);
   --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
+  --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
+
+  --#{$prefix}body-color: var(--#{$prefix}gray-700);
+  --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
+
+  --#{$prefix}link-color: var(--#{$prefix}primary);
+  --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
+
+  --#{$prefix}secondary: var(--#{$prefix}gray-500);
+  --#{$prefix}tertiary: var(--#{$prefix}gray-400);
+
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   --#{$prefix}border-dark-color: #{$border-dark-color};
@@ -50,23 +53,8 @@
 
   --#{$prefix}page-padding: #{$page-padding};
   --#{$prefix}page-padding-y: #{$page-padding-y};
+
   @include media-breakpoint-down($cards-grid-breakpoint) {
     --#{$prefix}page-padding: #{$page-padding-sm};
   }
-
-  @each $name, $value in $font-weights {
-    --#{$prefix}font-weight-#{$name}: #{$value};
-  }
-
-  @each $name, $value in $font-sizes {
-    --#{$prefix}font-size-h#{$name}: #{$value};
-  }
-
-  @each $name, $value in $line-heights {
-    --#{$prefix}line-height-#{$name}: #{$value};
-  }
-
-  @each $name, $value in $box-shadows {
-    --#{$prefix}#{$name}: #{$value};
-  }
 }

core/scss/marketing/_core.scss

@@ -4,5 +4,5 @@
 }
 
 .body-gradient {
-  background: var(--tblr-bg-surface) linear-gradient(to bottom, var(--tblr-bg-surface-secondary) 12%, var(--tblr-bg-surface) 99%) repeat-x top center/100% 100vh;
+  background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
 }

core/scss/marketing/_pricing.scss

@@ -39,7 +39,7 @@ $pricing-card-width: 22rem;
 
   &.featured {
     z-index: 1;
-    border: 2px solid $primary;
+    border: 2px solid var(--#{$prefix}primary);
     order: -1;
 
     @include media-breakpoint-up(md) {

core/scss/tabler-props.scss

@@ -0,0 +1 @@
+@import "props"

core/scss/tabler-themes.scss

@@ -0,0 +1,121 @@
+@import "config";
+
+[data-bs-theme-base="slate"] {
+  --#{$prefix}gray-50: #f8fafc;
+  --#{$prefix}gray-100: #f1f5f9;
+  --#{$prefix}gray-200: #e2e8f0;
+  --#{$prefix}gray-300: #cbd5e1;
+  --#{$prefix}gray-400: #94a3b8;
+  --#{$prefix}gray-500: #64748b;
+  --#{$prefix}gray-600: #475569;
+  --#{$prefix}gray-700: #334155;
+  --#{$prefix}gray-800: #1e293b;
+  --#{$prefix}gray-900: #0f172a;
+  --#{$prefix}gray-950: #020617;
+}
+
+[data-bs-theme-base="gray"] {
+  --#{$prefix}gray-50: #f9fafb;
+  --#{$prefix}gray-100: #f3f4f6;
+  --#{$prefix}gray-200: #e5e7eb;
+  --#{$prefix}gray-300: #d1d5db;
+  --#{$prefix}gray-400: #9ca3af;
+  --#{$prefix}gray-500: #6b7280;
+  --#{$prefix}gray-600: #4b5563;
+  --#{$prefix}gray-700: #374151;
+  --#{$prefix}gray-800: #1f2937;
+  --#{$prefix}gray-900: #111827;
+  --#{$prefix}gray-950: #030712;
+}
+
+[data-bs-theme-base="zinc"] {
+  --#{$prefix}gray-50: #fafafa;
+  --#{$prefix}gray-100: #f4f4f5;
+  --#{$prefix}gray-200: #e4e4e7;
+  --#{$prefix}gray-300: #d4d4d8;
+  --#{$prefix}gray-400: #a1a1aa;
+  --#{$prefix}gray-500: #71717a;
+  --#{$prefix}gray-600: #52525b;
+  --#{$prefix}gray-700: #3f3f46;
+  --#{$prefix}gray-800: #27272a;
+  --#{$prefix}gray-900: #18181b;
+  --#{$prefix}gray-950: #09090b;
+}
+
+[data-bs-theme-base="neutral"] {
+  --#{$prefix}gray-50: #fafafa;
+  --#{$prefix}gray-100: #f5f5f5;
+  --#{$prefix}gray-200: #e5e5e5;
+  --#{$prefix}gray-300: #d4d4d4;
+  --#{$prefix}gray-400: #a3a3a3;
+  --#{$prefix}gray-500: #737373;
+  --#{$prefix}gray-600: #525252;
+  --#{$prefix}gray-700: #404040;
+  --#{$prefix}gray-800: #262626;
+  --#{$prefix}gray-900: #171717;
+  --#{$prefix}gray-950: #0a0a0a;
+}
+
+[data-bs-theme-base="stone"] {
+  --#{$prefix}gray-50: #fafaf9;
+  --#{$prefix}gray-100: #f5f5f4;
+  --#{$prefix}gray-200: #e7e5e4;
+  --#{$prefix}gray-300: #d6d3d1;
+  --#{$prefix}gray-400: #a8a29e;
+  --#{$prefix}gray-500: #78716c;
+  --#{$prefix}gray-600: #57534e;
+  --#{$prefix}gray-700: #44403c;
+  --#{$prefix}gray-800: #292524;
+  --#{$prefix}gray-900: #1c1917;
+  --#{$prefix}gray-950: #0c0a09;
+}
+
+[data-bs-theme-base="pink"] {
+  --#{$prefix}gray-50: #fdf2f8;
+  --#{$prefix}gray-100: #fce7f3;
+  --#{$prefix}gray-200: #fbcfe8;
+  --#{$prefix}gray-300: #f9a8d4;
+  --#{$prefix}gray-400: #f472b6;
+  --#{$prefix}gray-500: #ec4899;
+  --#{$prefix}gray-600: #db2777;
+  --#{$prefix}gray-700: #be185d;
+  --#{$prefix}gray-800: #9d174d;
+  --#{$prefix}gray-900: #831843;
+  --#{$prefix}gray-950: #500724;
+}
+
+@each $name, $value in $extra-colors {
+  [data-bs-theme-primary="#{$name}"] {
+    --#{$prefix}primary: #{$value};
+    --#{$prefix}primary-rgb: #{to-rgb($value)};
+  }
+}
+
+@each $value in (0, .5, 1, 1.5, 2) {
+  [data-bs-theme-radius="#{$value}"] {
+    --#{$prefix}border-radius-scale: #{$value};
+  }
+}
+
+[data-bs-theme-primary="inverted"] {
+  --#{$prefix}primary: var(--#{$prefix}gray-800);
+  --#{$prefix}primary-fg: var(--#{$prefix}light);
+  --#{$prefix}primary-rgb: #{to-rgb($dark)};
+
+  &[data-bs-theme="dark"],
+  [data-bs-theme="dark"] {
+    --#{$prefix}primary: #{$light};
+    --#{$prefix}primary-fg: var(--#{$prefix}dark);
+    --#{$prefix}primary-rgb: #{to-rgb($light)};
+  }
+}
+
+@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
+  [data-bs-theme-font="#{$name}"] {
+    --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+
+    @if $name == "monospace" {
+      --#{$prefix}body-font-size: 80%;
+    }
+  }
+}

core/scss/tabler.scss

@@ -1,3 +1,2 @@
 @import "core";
  
- 

core/scss/ui/_buttons.scss

@@ -10,7 +10,7 @@
   --#{$prefix}btn-border-color: #{$btn-border-color};
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
-  --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-bg};
   --#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -72,7 +72,7 @@
 //
 // Button color variations
 //
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == 'dark' {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
@@ -84,7 +84,7 @@
       --#{$prefix}btn-active-border-color: transparent;
     }
 
-    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg, #{$white});
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
@@ -92,7 +92,7 @@
     --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
   }
 
   .btn-outline-#{$color} {
@@ -107,21 +107,19 @@
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
-}
 
-@each $name, $color in $theme-colors {
-  .btn-ghost-#{$name} {
-    --#{$prefix}btn-color: var(--#{$prefix}#{$name});
+  .btn-ghost-#{$color} {
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-fg);
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
-    --#{$prefix}btn-active-color: var(--#{$prefix}#{$name}-fg);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-active-border-color: transparent;
     --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-bg: transparent;
     --#{$prefix}btn-disabled-border-color: transparent;
     --#{$prefix}gradient: none;
@@ -186,9 +184,9 @@
 .btn-floating {
   position: fixed;
   z-index: $zindex-fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
-  border-radius: $border-radius-pill;
+  bottom: 1rem;
+  left: 1rem;
+  box-shadow: var(--#{$prefix}shadow-dropdown);
 }
 
 //

core/scss/ui/_forms.scss

@@ -68,7 +68,7 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
+    box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
     color: var(--#{$prefix}body-color);
     -webkit-text-fill-color: var(--#{$prefix}body-color);
   }
@@ -125,7 +125,7 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: var(--#{$prefix}body-bg);
+  background: var(--#{$prefix}bg-surface-secondary);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }

core/scss/ui/_offcanvas.scss

@@ -1,5 +1,5 @@
 .offcanvas-header {
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 .offcanvas-footer {

core/scss/ui/_tags.scss

@@ -7,7 +7,7 @@
   border-radius: var(--#{$prefix}border-radius);
   padding: 0 0.5rem;
   background: var(--#{$prefix}bg-surface);
-  box-shadow: var(--#{$prefix}box-shadow-input);
+  box-shadow: var(--#{$prefix}shadow-input);
   gap: .5rem;
 
   .btn-close {

core/scss/ui/_type.scss

@@ -6,6 +6,11 @@
 
 a {
   text-decoration-skip-ink: auto;
+  color: color-mix(in srgb, transparent, var(--#{$prefix}link-color) var(--#{$prefix}link-opacity, 100%));
+
+  &:hover {
+    color: color-mix(in srgb, transparent, var(--#{$prefix}link-hover-color) var(--#{$prefix}link-opacity, 100%));
+  }
 }
 
 h1,

core/scss/utils/_colors.scss

@@ -1,20 +1,16 @@
 // All colors
-@each $color, $value in map-merge($theme-colors, ( white: $white )) {
+@each $color, $value in map-merge($theme-colors, ( white: $white)) {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    --#{$prefix}bg-opacity: 1;
-    --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-lt-rgb), var(--#{$prefix}bg-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .border-#{"" + $color} {
-    --#{$prefix}border-opacity: 1;
-    border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
+    border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
   }
 
   .bg-gradient-from-#{"" + $color} {
@@ -29,12 +25,31 @@
     --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
     --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
   }
+
+  .text-bg-#{"" + $color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+
+  .link-#{"" + $color} {
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
 }
 
 @each $color, $value in $theme-colors {
   .text-#{"" + $color} {
     --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -45,7 +60,7 @@
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
     --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -53,6 +68,21 @@
   }
 }
 
+@each $color, $value in $social-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: $value !important;
+  }
+}
+
+.bg-inverted {
+  --#{$prefix}bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+}
 .bg-surface {
   background-color: var(--#{$prefix}bg-surface) !important;
 }

core/scss/vendor/_coloris.scss

@@ -1,5 +1,5 @@
 .clr-picker {
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
 }
 

core/scss/vendor/_fslightbox.scss

@@ -1,6 +1,6 @@
 .fslightbox-container {
   font-family: inherit !important;
-  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  background: var(--#{$prefix}backdrop-bg) !important;
   backdrop-filter: blur($modal-backdrop-blur) !important;
 }
 

core/scss/vendor/_tom-select.scss

@@ -46,7 +46,7 @@ $input-border-width: 1px;
 .ts-dropdown {
   background: var(--#{$prefix}bg-surface);
   color: var(--#{$prefix}body-color);
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   z-index: $zindex-dropdown;
 
   .option {

pnpm-lock.yaml

@@ -114,8 +114,8 @@ importers:
         specifier: ^3.31.0
         version: 3.31.0
       apexcharts:
-        specifier: ^4.5.0
-        version: 4.5.0
+        specifier: 3.54.1
+        version: 3.54.1
       autosize:
         specifier: ^6.0.1
         version: 6.0.1
@@ -708,31 +708,6 @@ packages:
     resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
     engines: {node: '>=12'}
 
-  '@svgdotjs/svg.draggable.js@3.0.6':
-    resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
-  '@svgdotjs/svg.filter.js@3.0.9':
-    resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==}
-    engines: {node: '>= 0.8.0'}
-
-  '@svgdotjs/svg.js@3.2.4':
-    resolution: {integrity: sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==}
-
-  '@svgdotjs/svg.resize.js@2.0.5':
-    resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-      '@svgdotjs/svg.select.js': ^4.0.1
-
-  '@svgdotjs/svg.select.js@4.0.2':
-    resolution: {integrity: sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
   '@swc/helpers@0.2.14':
     resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
 
@@ -793,8 +768,8 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  apexcharts@4.5.0:
-    resolution: {integrity: sha512-E7ZkrVqPNBUWy/Rmg8DEIqHNBmElzICE/oxOX5Ekvs2ICQUOK/VkEkMH09JGJu+O/EA0NL31hxlmF+wrwrSLaQ==}
+  apexcharts@3.54.1:
+    resolution: {integrity: sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==}
 
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -2380,6 +2355,37 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg.draggable.js@2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.easing.js@2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.filter.js@2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.js@2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+
+  svg.pathmorphing.js@0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.resize.js@1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -3278,25 +3284,6 @@ snapshots:
     dependencies:
       escape-string-regexp: 5.0.0
 
-  '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.4)':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
-  '@svgdotjs/svg.filter.js@3.0.9':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
-  '@svgdotjs/svg.js@3.2.4': {}
-
-  '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4))':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-      '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/svg.js@3.2.4)
-
-  '@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4)':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
   '@swc/helpers@0.2.14': {}
 
   '@tabler/icons@3.31.0': {}
@@ -3343,14 +3330,15 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  apexcharts@4.5.0:
+  apexcharts@3.54.1:
     dependencies:
-      '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.4)
-      '@svgdotjs/svg.filter.js': 3.0.9
-      '@svgdotjs/svg.js': 3.2.4
-      '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.4)(@svgdotjs/svg.select.js@4.0.2(@svgdotjs/svg.js@3.2.4))
-      '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/svg.js@3.2.4)
       '@yr/monotone-cubic-spline': 1.0.3
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
 
   argparse@1.0.10:
     dependencies:
@@ -4882,6 +4870,37 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg.draggable.js@2.2.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.easing.js@2.0.0:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.filter.js@2.0.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.js@2.7.1: {}
+
+  svg.pathmorphing.js@0.1.3:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.resize.js@1.4.3:
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+
+  svg.select.js@2.1.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.select.js@3.0.1:
+    dependencies:
+      svg.js: 2.7.1
+
   term-size@2.2.1: {}
 
   terser@5.39.0:

preview/eleventy.config.mjs

@@ -118,7 +118,8 @@ export default function (eleventyConfig) {
 			"tabler-socials",
 			"tabler-payments",
 			"tabler-vendors",
-			"tabler-marketing"
+			"tabler-marketing",
+			"tabler-themes",
 		],
 
 		icons: {

preview/js/demo-theme.js

@@ -4,25 +4,35 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 
-const themeStorageKey = "tablerTheme"
-const defaultTheme = "light"
-let selectedTheme
+const themeConfig = {
+	"theme": "light",
+	"theme-base": "gray",
+	"theme-font": "sans-serif",
+	"theme-primary": "blue",
+	"theme-radius": "1",
+}
 
 // https://stackoverflow.com/a/901144
 const params = new Proxy(new URLSearchParams(window.location.search), {
 	get: (searchParams, prop) => searchParams.get(prop),
 })
 
-if (!!params.theme) {
-	localStorage.setItem(themeStorageKey, params.theme)
-	selectedTheme = params.theme
-} else {
-	const storedTheme = localStorage.getItem(themeStorageKey)
-	selectedTheme = storedTheme ? storedTheme : defaultTheme
-}
 
-if (selectedTheme === 'dark') {
-	document.body.setAttribute("data-bs-theme", selectedTheme)
-} else {
-	document.body.removeAttribute("data-bs-theme")
+for (const key in themeConfig) {
+	const param = params[key]
+	let selectedValue
+
+	if (!!param) {
+		localStorage.setItem('tabler-' + key, param)
+		selectedValue = param
+	} else {
+		const storedTheme = localStorage.getItem('tabler-' + key)
+		selectedValue = storedTheme ? storedTheme : themeConfig[key]
+	}
+
+	if (selectedValue !== themeConfig[key]) {
+		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+	} else {
+		document.documentElement.removeAttribute('data-bs-' + key)
+	}
 }

preview/package.json

@@ -35,7 +35,7 @@
     "@melloware/coloris": "^0.24.0",
     "@tabler/core": "workspace:*",
     "@tabler/icons": "^3.31.0",
-    "apexcharts": "^4.5.0",
+    "apexcharts": "3.54.1",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "countup.js": "^2.8.0",

preview/pages/_data/charts.json

@@ -128,13 +128,13 @@
       {
         "name": "Affilliate",
         "color": "primary",
-        "color-opacity": 0.8,
+        "color-opacity": "80%",
         "data": 55
       },
       {
         "name": "E-mail",
         "color": "primary",
-        "color-opacity": 0.6,
+        "color-opacity": "60%",
         "data": 12
       },
       {
@@ -596,7 +596,7 @@
           0
         ],
         "color": "primary",
-        "color-opacity": 0.8
+        "color-opacity": "80%"
       },
       {
         "name": "Other",
@@ -640,7 +640,7 @@
           6
         ],
         "color": "green",
-        "color-opacity": 0.8
+        "color-opacity": "80%"
       }
     ]
   },
@@ -817,13 +817,13 @@
       {
         "name": "Reached",
         "color": "primary",
-        "color-opacity": 0.8,
+        "color-opacity": "80%",
         "data": 36
       },
       {
         "name": "Opened",
         "color": "primary",
-        "color-opacity": 0.6,
+        "color-opacity": "60%",
         "data": 18
       }
     ]
@@ -1594,19 +1594,19 @@
       {
         "name": "B",
         "color": "primary",
-        "color-opacity": 0.8,
+        "color-opacity": "80%",
         "data": 44
       },
       {
         "name": "C",
         "color": "primary",
-        "color-opacity": 0.6,
+        "color-opacity": "60%",
         "data": 12
       },
       {
         "name": "D",
         "color": "primary",
-        "color-opacity": 0.4,
+        "color-opacity": "40%",
         "data": 14
       }
     ]
@@ -1623,7 +1623,7 @@
       {
         "name": "Minimum",
         "color": "green",
-        "color-opacity": 0.8,
+        "color-opacity": "80%",
         "data": 37
       }
     ]

preview/pages/_data/maps-vector.json

@@ -3,13 +3,379 @@
     "title": "World map",
     "map": "world",
     "color": "primary",
-    "values": "{ \"AF\": 16, \"AL\": 11, \"DZ\": 158, \"AO\": 85, \"AG\": 1, \"AR\": 351, \"AM\": 8, \"AU\": 1219, \"AT\": 366, \"AZ\": 52, \"BS\": 7, \"BH\": 21, \"BD\": 105, \"BB\": 3, \"BY\": 52, \"BE\": 461, \"BZ\": 1, \"BJ\": 6, \"BT\": 1, \"BO\": 19, \"BA\": 16, \"BW\": 12, \"BR\": 2023, \"BN\": 11, \"BG\": 44, \"BF\": 8, \"BI\": 1, \"KH\": 11, \"CM\": 21, \"CA\": 1563, \"CV\": 1, \"CF\": 2, \"TD\": 7, \"CL\": 199, \"CN\": 5745, \"CO\": 283, \"KM\": 0, \"CD\": 12, \"CG\": 11, \"CR\": 35, \"CI\": 22, \"HR\": 59, \"CY\": 22, \"CZ\": 195, \"DK\": 304, \"DJ\": 1, \"DM\": 0, \"DO\": 50, \"EC\": 61, \"EG\": 216, \"SV\": 21, \"GQ\": 14, \"ER\": 2, \"EE\": 19, \"ET\": 30, \"FJ\": 3, \"FI\": 231, \"FR\": 2555, \"GA\": 12, \"GM\": 1, \"GE\": 11, \"DE\": 3305, \"GH\": 18, \"GR\": 305, \"GD\": 0, \"GT\": 40, \"GN\": 4, \"GW\": 0, \"GY\": 2, \"HT\": 6, \"HN\": 15, \"HK\": 226, \"HU\": 132, \"IS\": 12, \"IN\": 1430, \"ID\": 695, \"IR\": 337, \"IQ\": 84, \"IE\": 204, \"IL\": 201, \"IT\": 2036, \"JM\": 13, \"JP\": 5390, \"JO\": 27, \"KZ\": 129, \"KE\": 32, \"KI\": 0, \"KR\": 986, \"KW\": 117, \"KG\": 4, \"LA\": 6, \"LV\": 23, \"LB\": 39, \"LS\": 1, \"LR\": 0, \"LY\": 77, \"LT\": 35, \"LU\": 52, \"MK\": 9, \"MG\": 8, \"MW\": 5, \"MY\": 218, \"MV\": 1, \"ML\": 9, \"MT\": 7, \"MR\": 3, \"MU\": 9, \"MX\": 1004, \"MD\": 5, \"MN\": 5, \"ME\": 3, \"MA\": 91, \"MZ\": 10, \"MM\": 35, \"NA\": 11, \"NP\": 15, \"NL\": 770, \"NZ\": 138, \"NI\": 6, \"NE\": 5, \"NG\": 206, \"NO\": 413, \"OM\": 53, \"PK\": 174, \"PA\": 27, \"PG\": 8, \"PY\": 17, \"PE\": 153, \"PH\": 189, \"PL\": 438, \"PT\": 223, \"QA\": 126, \"RO\": 158, \"RU\": 1476, \"RW\": 5, \"WS\": 0, \"ST\": 0, \"SA\": 434, \"SN\": 12, \"RS\": 38, \"SC\": 0, \"SL\": 1, \"SG\": 217, \"SK\": 86, \"SI\": 46, \"SB\": 0, \"ZA\": 354, \"ES\": 1374, \"LK\": 48, \"KN\": 0, \"LC\": 1, \"VC\": 0, \"SD\": 65, \"SR\": 3, \"SZ\": 3, \"SE\": 444, \"CH\": 522, \"SY\": 59, \"TW\": 426, \"TJ\": 5, \"TZ\": 22, \"TH\": 312, \"TL\": 0, \"TG\": 3, \"TO\": 0, \"TT\": 21, \"TN\": 43, \"TR\": 729, \"TM\": 0, \"UG\": 17, \"UA\": 136, \"AE\": 239, \"GB\": 2258, \"US\": 4624, \"UY\": 40, \"UZ\": 37, \"VU\": 0, \"VE\": 285, \"VN\": 101, \"YE\": 30, \"ZM\": 15, \"ZW\": 5 }"
+    "values": {
+      "AF": "scale2",
+      "AL": "scale2",
+      "DZ": "scale4",
+      "AO": "scale3",
+      "AG": "scale1",
+      "AR": "scale5",
+      "AM": "scale1",
+      "AU": "scale7",
+      "AT": "scale5",
+      "AZ": "scale3",
+      "BS": "scale1",
+      "BH": "scale2",
+      "BD": "scale4",
+      "BB": "scale1",
+      "BY": "scale3",
+      "BE": "scale5",
+      "BZ": "scale1",
+      "BJ": "scale1",
+      "BT": "scale1",
+      "BO": "scale2",
+      "BA": "scale2",
+      "BW": "scale2",
+      "BR": "scale8",
+      "BN": "scale2",
+      "BG": "scale2",
+      "BF": "scale1",
+      "BI": "scale1",
+      "KH": "scale2",
+      "CM": "scale2",
+      "CA": "scale7",
+      "CV": "scale1",
+      "CF": "scale1",
+      "TD": "scale1",
+      "CL": "scale4",
+      "CN": "scale9",
+      "CO": "scale5",
+      "KM": "scale1",
+      "CD": "scale2",
+      "CG": "scale2",
+      "CR": "scale2",
+      "CI": "scale2",
+      "HR": "scale3",
+      "CY": "scale2",
+      "CZ": "scale4",
+      "DK": "scale5",
+      "DJ": "scale1",
+      "DM": "scale1",
+      "DO": "scale3",
+      "EC": "scale3",
+      "EG": "scale5",
+      "SV": "scale2",
+      "GQ": "scale2",
+      "ER": "scale1",
+      "EE": "scale2",
+      "ET": "scale2",
+      "FJ": "scale1",
+      "FI": "scale5",
+      "FR": "scale8",
+      "GA": "scale2",
+      "GM": "scale1",
+      "GE": "scale2",
+      "DE": "scale8",
+      "GH": "scale2",
+      "GR": "scale5",
+      "GD": "scale1",
+      "GT": "scale2",
+      "GN": "scale1",
+      "GW": "scale1",
+      "GY": "scale1",
+      "HT": "scale1",
+      "HN": "scale2",
+      "HK": "scale5",
+      "HU": "scale4",
+      "IS": "scale2",
+      "IN": "scale7",
+      "ID": "scale6",
+      "IR": "scale5",
+      "IQ": "scale3",
+      "IE": "scale5",
+      "IL": "scale5",
+      "IT": "scale8",
+      "JM": "scale2",
+      "JP": "scale9",
+      "JO": "scale2",
+      "KZ": "scale4",
+      "KE": "scale2",
+      "KI": "scale1",
+      "KR": "scale6",
+      "KW": "scale4",
+      "KG": "scale1",
+      "LA": "scale1",
+      "LV": "scale2",
+      "LB": "scale2",
+      "LS": "scale1",
+      "LR": "scale1",
+      "LY": "scale3",
+      "LT": "scale2",
+      "LU": "scale3",
+      "MK": "scale1",
+      "MG": "scale1",
+      "MW": "scale1",
+      "MY": "scale5",
+      "MV": "scale1",
+      "ML": "scale1",
+      "MT": "scale1",
+      "MR": "scale1",
+      "MU": "scale1",
+      "MX": "scale7",
+      "MD": "scale1",
+      "MN": "scale1",
+      "ME": "scale1",
+      "MA": "scale3",
+      "MZ": "scale2",
+      "MM": "scale2",
+      "NA": "scale2",
+      "NP": "scale2",
+      "NL": "scale6",
+      "NZ": "scale4",
+      "NI": "scale1",
+      "NE": "scale1",
+      "NG": "scale5",
+      "NO": "scale5",
+      "OM": "scale3",
+      "PK": "scale4",
+      "PA": "scale2",
+      "PG": "scale1",
+      "PY": "scale2",
+      "PE": "scale4",
+      "PH": "scale4",
+      "PL": "scale10",
+      "PT": "scale5",
+      "QA": "scale4",
+      "RO": "scale4",
+      "RU": "scale7",
+      "RW": "scale1",
+      "WS": "scale1",
+      "ST": "scale1",
+      "SA": "scale5",
+      "SN": "scale2",
+      "RS": "scale2",
+      "SC": "scale1",
+      "SL": "scale1",
+      "SG": "scale5",
+      "SK": "scale3",
+      "SI": "scale2",
+      "SB": "scale1",
+      "ZA": "scale5",
+      "ES": "scale7",
+      "LK": "scale2",
+      "KN": "scale1",
+      "LC": "scale1",
+      "VC": "scale1",
+      "SD": "scale3",
+      "SR": "scale1",
+      "SZ": "scale1",
+      "SE": "scale5",
+      "CH": "scale6",
+      "SY": "scale3",
+      "TW": "scale5",
+      "TJ": "scale1",
+      "TZ": "scale2",
+      "TH": "scale5",
+      "TL": "scale1",
+      "TG": "scale1",
+      "TO": "scale1",
+      "TT": "scale2",
+      "TN": "scale2",
+      "TR": "scale6",
+      "TM": "scale1",
+      "UG": "scale2",
+      "UA": "scale4",
+      "AE": "scale5",
+      "GB": "scale8",
+      "US": "scale10",
+      "UY": "scale2",
+      "UZ": "scale2",
+      "VU": "scale1",
+      "VE": "scale5",
+      "VN": "scale4",
+      "YE": "scale2",
+      "ZM": "scale2",
+      "ZW": "scale1"
+    }
   },
   "world-merc": {
     "title": "World map",
     "map": "world_merc",
     "color": "primary",
-    "values": "{ \"AF\": 16, \"AL\": 11, \"DZ\": 158, \"AO\": 85, \"AG\": 1, \"AR\": 351, \"AM\": 8, \"AU\": 1219, \"AT\": 366, \"AZ\": 52, \"BS\": 7, \"BH\": 21, \"BD\": 105, \"BB\": 3, \"BY\": 52, \"BE\": 461, \"BZ\": 1, \"BJ\": 6, \"BT\": 1, \"BO\": 19, \"BA\": 16, \"BW\": 12, \"BR\": 2023, \"BN\": 11, \"BG\": 44, \"BF\": 8, \"BI\": 1, \"KH\": 11, \"CM\": 21, \"CA\": 1563, \"CV\": 1, \"CF\": 2, \"TD\": 7, \"CL\": 199, \"CN\": 5745, \"CO\": 283, \"KM\": 0, \"CD\": 12, \"CG\": 11, \"CR\": 35, \"CI\": 22, \"HR\": 59, \"CY\": 22, \"CZ\": 195, \"DK\": 304, \"DJ\": 1, \"DM\": 0, \"DO\": 50, \"EC\": 61, \"EG\": 216, \"SV\": 21, \"GQ\": 14, \"ER\": 2, \"EE\": 19, \"ET\": 30, \"FJ\": 3, \"FI\": 231, \"FR\": 2555, \"GA\": 12, \"GM\": 1, \"GE\": 11, \"DE\": 3305, \"GH\": 18, \"GR\": 305, \"GD\": 0, \"GT\": 40, \"GN\": 4, \"GW\": 0, \"GY\": 2, \"HT\": 6, \"HN\": 15, \"HK\": 226, \"HU\": 132, \"IS\": 12, \"IN\": 1430, \"ID\": 695, \"IR\": 337, \"IQ\": 84, \"IE\": 204, \"IL\": 201, \"IT\": 2036, \"JM\": 13, \"JP\": 5390, \"JO\": 27, \"KZ\": 129, \"KE\": 32, \"KI\": 0, \"KR\": 986, \"KW\": 117, \"KG\": 4, \"LA\": 6, \"LV\": 23, \"LB\": 39, \"LS\": 1, \"LR\": 0, \"LY\": 77, \"LT\": 35, \"LU\": 52, \"MK\": 9, \"MG\": 8, \"MW\": 5, \"MY\": 218, \"MV\": 1, \"ML\": 9, \"MT\": 7, \"MR\": 3, \"MU\": 9, \"MX\": 1004, \"MD\": 5, \"MN\": 5, \"ME\": 3, \"MA\": 91, \"MZ\": 10, \"MM\": 35, \"NA\": 11, \"NP\": 15, \"NL\": 770, \"NZ\": 138, \"NI\": 6, \"NE\": 5, \"NG\": 206, \"NO\": 413, \"OM\": 53, \"PK\": 174, \"PA\": 27, \"PG\": 8, \"PY\": 17, \"PE\": 153, \"PH\": 189, \"PL\": 438, \"PT\": 223, \"QA\": 126, \"RO\": 158, \"RU\": 1476, \"RW\": 5, \"WS\": 0, \"ST\": 0, \"SA\": 434, \"SN\": 12, \"RS\": 38, \"SC\": 0, \"SL\": 1, \"SG\": 217, \"SK\": 86, \"SI\": 46, \"SB\": 0, \"ZA\": 354, \"ES\": 1374, \"LK\": 48, \"KN\": 0, \"LC\": 1, \"VC\": 0, \"SD\": 65, \"SR\": 3, \"SZ\": 3, \"SE\": 444, \"CH\": 522, \"SY\": 59, \"TW\": 426, \"TJ\": 5, \"TZ\": 22, \"TH\": 312, \"TL\": 0, \"TG\": 3, \"TO\": 0, \"TT\": 21, \"TN\": 43, \"TR\": 729, \"TM\": 0, \"UG\": 17, \"UA\": 136, \"AE\": 239, \"GB\": 2258, \"US\": 4624, \"UY\": 40, \"UZ\": 37, \"VU\": 0, \"VE\": 285, \"VN\": 101, \"YE\": 30, \"ZM\": 15, \"ZW\": 5 }"
+    "values": {
+      "AF": "scale2",
+      "AL": "scale2",
+      "DZ": "scale4",
+      "AO": "scale3",
+      "AG": "scale1",
+      "AR": "scale5",
+      "AM": "scale1",
+      "AU": "scale7",
+      "AT": "scale5",
+      "AZ": "scale3",
+      "BS": "scale1",
+      "BH": "scale2",
+      "BD": "scale4",
+      "BB": "scale1",
+      "BY": "scale3",
+      "BE": "scale5",
+      "BZ": "scale1",
+      "BJ": "scale1",
+      "BT": "scale1",
+      "BO": "scale2",
+      "BA": "scale2",
+      "BW": "scale2",
+      "BR": "scale8",
+      "BN": "scale2",
+      "BG": "scale2",
+      "BF": "scale1",
+      "BI": "scale1",
+      "KH": "scale2",
+      "CM": "scale2",
+      "CA": "scale7",
+      "CV": "scale1",
+      "CF": "scale1",
+      "TD": "scale1",
+      "CL": "scale4",
+      "CN": "scale9",
+      "CO": "scale5",
+      "KM": "scale1",
+      "CD": "scale2",
+      "CG": "scale2",
+      "CR": "scale2",
+      "CI": "scale2",
+      "HR": "scale3",
+      "CY": "scale2",
+      "CZ": "scale4",
+      "DK": "scale5",
+      "DJ": "scale1",
+      "DM": "scale1",
+      "DO": "scale3",
+      "EC": "scale3",
+      "EG": "scale5",
+      "SV": "scale2",
+      "GQ": "scale2",
+      "ER": "scale1",
+      "EE": "scale2",
+      "ET": "scale2",
+      "FJ": "scale1",
+      "FI": "scale5",
+      "FR": "scale8",
+      "GA": "scale2",
+      "GM": "scale1",
+      "GE": "scale2",
+      "DE": "scale8",
+      "GH": "scale2",
+      "GR": "scale5",
+      "GD": "scale1",
+      "GT": "scale2",
+      "GN": "scale1",
+      "GW": "scale1",
+      "GY": "scale1",
+      "HT": "scale1",
+      "HN": "scale2",
+      "HK": "scale5",
+      "HU": "scale4",
+      "IS": "scale2",
+      "IN": "scale7",
+      "ID": "scale6",
+      "IR": "scale5",
+      "IQ": "scale3",
+      "IE": "scale5",
+      "IL": "scale5",
+      "IT": "scale8",
+      "JM": "scale2",
+      "JP": "scale9",
+      "JO": "scale2",
+      "KZ": "scale4",
+      "KE": "scale2",
+      "KI": "scale1",
+      "KR": "scale6",
+      "KW": "scale4",
+      "KG": "scale1",
+      "LA": "scale1",
+      "LV": "scale2",
+      "LB": "scale2",
+      "LS": "scale1",
+      "LR": "scale1",
+      "LY": "scale3",
+      "LT": "scale2",
+      "LU": "scale3",
+      "MK": "scale1",
+      "MG": "scale1",
+      "MW": "scale1",
+      "MY": "scale5",
+      "MV": "scale1",
+      "ML": "scale1",
+      "MT": "scale1",
+      "MR": "scale1",
+      "MU": "scale1",
+      "MX": "scale7",
+      "MD": "scale1",
+      "MN": "scale1",
+      "ME": "scale1",
+      "MA": "scale3",
+      "MZ": "scale2",
+      "MM": "scale2",
+      "NA": "scale2",
+      "NP": "scale2",
+      "NL": "scale6",
+      "NZ": "scale4",
+      "NI": "scale1",
+      "NE": "scale1",
+      "NG": "scale5",
+      "NO": "scale5",
+      "OM": "scale3",
+      "PK": "scale4",
+      "PA": "scale2",
+      "PG": "scale1",
+      "PY": "scale2",
+      "PE": "scale4",
+      "PH": "scale4",
+      "PL": "scale10",
+      "PT": "scale5",
+      "QA": "scale4",
+      "RO": "scale4",
+      "RU": "scale7",
+      "RW": "scale1",
+      "WS": "scale1",
+      "ST": "scale1",
+      "SA": "scale5",
+      "SN": "scale2",
+      "RS": "scale2",
+      "SC": "scale1",
+      "SL": "scale1",
+      "SG": "scale5",
+      "SK": "scale3",
+      "SI": "scale2",
+      "SB": "scale1",
+      "ZA": "scale5",
+      "ES": "scale7",
+      "LK": "scale2",
+      "KN": "scale1",
+      "LC": "scale1",
+      "VC": "scale1",
+      "SD": "scale3",
+      "SR": "scale1",
+      "SZ": "scale1",
+      "SE": "scale5",
+      "CH": "scale6",
+      "SY": "scale3",
+      "TW": "scale5",
+      "TJ": "scale1",
+      "TZ": "scale2",
+      "TH": "scale5",
+      "TL": "scale1",
+      "TG": "scale1",
+      "TO": "scale1",
+      "TT": "scale2",
+      "TN": "scale2",
+      "TR": "scale6",
+      "TM": "scale1",
+      "UG": "scale2",
+      "UA": "scale4",
+      "AE": "scale5",
+      "GB": "scale8",
+      "US": "scale10",
+      "UY": "scale2",
+      "UZ": "scale2",
+      "VU": "scale1",
+      "VE": "scale5",
+      "VN": "scale4",
+      "YE": "scale2",
+      "ZM": "scale2",
+      "ZW": "scale1"
+    }
   },
   "world-markers": {
     "title": "Map with markers",

preview/pages/_includes/layout/navbar.html

@@ -45,13 +45,30 @@
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
 				<div class="container-xl">
-					<div class="row flex-fill align-items-center">
+					<div class="row flex-column flex-md-row flex-fill align-items-center">
 						<div class="col">
 							{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
 						</div>
+						{% unless include.hide-search %}
 						<div class="col-2 d-none d-xxl-block">
 							{% include "layout/navbar-search.html" breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
 						</div>
+						{% endunless %}
+
+						<div class="col col-md-auto">
+							<ul class="navbar-nav">
+								<li class="nav-item">
+									<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
+										<span class="nav-link-icon d-md-none d-lg-inline-block">
+											{% include "ui/icon.html" icon="settings" %}
+										</span>
+										<span class="nav-link-title">
+											Settings
+										</span>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>

preview/pages/_includes/marketing/sections/companies.html

@@ -2,16 +2,16 @@
 	{% include "marketing/section-divider.html" divider=include.divider %}
 	<div class="container">
 		<div class="section-header mb-6">
-			<h2 class="section-title text-muted">Trusted by over 3,000 companies</h2>
+			<h2 class="section-title text-secondary">Trusted by over 3,000 companies</h2>
 		</div>
 		<div class="row g-8 align-items-center justify-content-center">
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/baremetrics.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/cgi.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/docplanner.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/flow.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/fubotv.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/six-flags.svg" %}</a></div>
-			<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/vocus.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/baremetrics.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/cgi.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/docplanner.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/flow.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/fubotv.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/six-flags.svg" %}</a></div>
+			<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/vocus.svg" %}</a></div>
 		</div>
 	</div>
 </section>

preview/pages/_includes/marketing/sections/faq-2.html

@@ -11,15 +11,15 @@
 				<div class="space-y-5">
 					<div>
 						<div class="h3 mb-1">Can I use Tabler in commercial projects?</div>
-						<div class="text-muted">Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler.</div>
+						<div class="text-secondary">Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler.</div>
 					</div>
 					<div>
 						<div class="h3 mb-1">How do I get notified of new Tabler versions?</div>
-						<div class="text-muted">You may watch the releases on GitHub or follow me on Twitter.</div>
+						<div class="text-secondary">You may watch the releases on GitHub or follow me on Twitter.</div>
 					</div>
 					<div>
 						<div class="h3 mb-1">Can Tabler be used with WordPress?</div>
-						<div class="text-muted">
+						<div class="text-secondary">
 							Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
 						</div>
 					</div>

preview/pages/_includes/marketing/sections/features-2.html

@@ -17,7 +17,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Designed with users in mind</h3>
-								<p class="text-muted m-0">
+								<p class="text-secondary m-0">
 									Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
 									attention to detail to make your interface beautiful!
 								</p>
@@ -31,7 +31,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Built for developers</h3>
-								<p class="text-muted m-0">
+								<p class="text-secondary m-0">
 									Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
 									browsers and fully responsive.
 								</p>
@@ -45,7 +45,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Fully customizable</h3>
-								<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
+								<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
 							</div>
 						</div>
 					</div>

preview/pages/_includes/marketing/sections/features-3.html

@@ -16,7 +16,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Designed with users in mind</h3>
-								<p class="text-muted m-0">
+								<p class="text-secondary m-0">
 									Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
 									attention to detail to make your interface beautiful!
 								</p>
@@ -30,7 +30,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Built for developers</h3>
-								<p class="text-muted m-0">
+								<p class="text-secondary m-0">
 									Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
 									browsers and fully responsive.
 								</p>
@@ -44,7 +44,7 @@
 							</div>
 							<div class="col">
 								<h3 class="h2 mb-2">Fully customizable</h3>
-								<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
+								<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
 							</div>
 						</div>
 					</div>

preview/pages/_includes/marketing/sections/features.html

@@ -5,17 +5,17 @@
 			<div class="col-md-6 col-lg">
 				{% include "ui/shape.html" icon="devices" class="mb-3" size="md" %}
 				<h2 class="h2">Mobile-optimized</h2>
-				<p class="text-muted">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
+				<p class="text-secondary">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
 			</div>
 			<div class="col-md-6 col-lg">
 				{% include "ui/shape.html" icon="mailbox" class="mb-3" size="md" %}
 				<h2 class="h2">Compatible with 90+ email clients</h2>
-				<p class="text-muted">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
+				<p class="text-secondary">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
 			</div>
 			<div class="col-md-6 col-lg">
 				{% include "ui/shape.html" icon="palette" class="mb-3" size="md" %}
 				<h2 class="h2">Unique, minimal design</h2>
-				<p class="text-muted">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
+				<p class="text-secondary">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
 			</div>
 		</div>
 	</div>

preview/pages/_includes/marketing/sections/testimonials.html

@@ -18,7 +18,7 @@
 					{% for testimonial in group %}
 					{% assign person = people[i] %}
 					<div class="col-12">
-						<a href="#" class="card bg-body">
+						<a href="#" class="card bg-surface-secondary">
 							<div class="card-body">
 								<div class="row mb-3">
 									<div class="col-auto">{% include "ui/avatar.html" person=person size="md" %}</div>

preview/pages/_includes/parts/tasks.html

@@ -57,7 +57,7 @@
 
 									{% if task.subtasks %}
 									<div class="col-auto">
-										<a href="#" class="link-muted">
+										<a href="#" class="link-secondary">
 											{% include "ui/icon.html" icon="activity" %}
 											1/{{ task.subtasks.size }}
 										</a>
@@ -65,11 +65,11 @@
 									{% endif %}
 									{% if task.comments %}
 									<div class="col-auto">
-										<a href="#" class="link-muted">{% include "ui/icon.html" icon="message" %} {{ task.comments }}</a>
+										<a href="#" class="link-secondary">{% include "ui/icon.html" icon="message" %} {{ task.comments }}</a>
 									</div>
 									{% endif %}
 									<div class="col-auto">
-										<a href="#" class="link-muted">{% include "ui/icon.html" icon="share" %}</a>
+										<a href="#" class="link-secondary">{% include "ui/icon.html" icon="share" %}</a>
 									</div>
 								</div>
 							</div>

preview/pages/_includes/settings.html

@@ -1,88 +1,167 @@
 <div class="settings">
+	<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"> {% include "ui/icon.html" icon="brush" %} </a>
 
-	<a href="#" class="btn btn-icon btn-lg settings-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
-		{% include "ui/icon.html" icon="settings" %}
-	</a>
-
-
-	<form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
+	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
 		<div class="offcanvas-header">
 			<h2 class="offcanvas-title">Theme Builder</h2>
 			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 		</div>
-		<div class="offcanvas-body">
-			<div class="mb-4">
-				<label class="form-label">Color scheme</label>
-				<p class="form-hint">The perfect color mode for your app.</p>
+		<div class="offcanvas-body d-flex flex-column">
+			<div>
+				<div class="mb-4">
+					<label class="form-label">Color mode</label>
+					<p class="form-hint">Choose the color mode for your app.</p>
+					{% assign modes = 'light,dark' | split: ',' %} {% for mode in modes %}
+					<label class="form-check">
+						<div class="form-selectgroup-item">
+							<input type="radio" name="theme" value="{{ mode }}" class="form-check-input"{% if mode == 'light' %} checked{% endif %} />
+							<div class="form-check-label">{{ mode | capitalize }}</div>
+						</div>
+					</label>
+					{% endfor %}
+				</div>
 
-				<div class="row g-2">
-					{% assign schemes = 'light,mixed,colored,dark,transparent' | split: ',' %}
-					{% for scheme in schemes %}
-					<div class="col-6">
-						<label class="form-selectgroup-item">
-							<input type="radio" name="settings-theme" value="{{ scheme }}" class="form-selectgroup-input" />
-							<div class="form-selectgroup-label text-center">
-								<span class="form-selectgroup-check form-selectgroup-check-floated"></span>
-								<div class="settings-scheme settings-scheme-{{ scheme }}"></div>
-								<div>{{ scheme | capitalize }}</div>
+				<div class="mb-4">
+					<label class="form-label">Color scheme</label>
+					<p class="form-hint">The perfect color mode for your app.</p>
+
+					<div class="row g-2">
+						{% for color in site.colors %}
+						<div class="col-auto">
+							<label class="form-colorinput">
+								<input name="theme-primary" type="radio" value="{{ color[0] }}" class="form-colorinput-input" />
+								<span class="form-colorinput-color bg-{{ color[0] }}"></span>
+							</label>
+						</div>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Font family</label>
+					<p class="form-hint">Choose the font family that fits your app.</p>
+
+					<div>
+						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
+						<label class="form-check">
+							<div class="form-selectgroup-item">
+								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
+								<div class="form-check-label">{{ font | capitalize }}</div>
 							</div>
 						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Theme base</label>
+					<p class="form-hint">Choose the gray shade for your app.</p>
+
+					<div>
+						{% assign bases = 'slate,gray,zinc,neutral,stone' | split: ',' %} {% for base in bases %}
+						<label class="form-check">
+							<div class="form-selectgroup-item">
+								<input type="radio" name="theme-base" value="{{ base }}" class="form-check-input"{% if base == 'gray' %} checked{% endif %} />
+								<div class="form-check-label">{{ base | capitalize }}</div>
+							</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Corner Radius</label>
+					<p class="form-hint">
+						Choose the border radius factory for your app.
+					</p>
+
+					<div>
+						{% assign radiuses = '0,0.5,1,1.5,2' | split: ',' %} {% for radius in radiuses %}
+						<label class="form-check">
+							<div class="form-selectgroup-item">
+								<input type="radio" name="theme-radius" value="{{ radius }}" class="form-check-input"{% if radius == "1" %} checked{% endif %} />
+								<div class="form-check-label">{{ radius }}</div>
+							</div>
+						</label>
+						{% endfor %}
 					</div>
-					{% endfor %}
 				</div>
 			</div>
 
-			<div class="mb-4">
-				<div class="form-label">Menu position</div>
-				<p class="form-hint">Toggle the position of the menu.</p>
-
-				<div>
-					{% assign positions = 'top,top-condensed,top-overlap,combo,left,right' | split: ',' %}
-					{% for position in positions %}
-					<label class="form-check">
-						<input class="form-check-input" name="settings-menu-position" value="{{ position }}" type="radio" />
-						<span class="form-check-label">{{ position | capitalize }}</span>
-					</label>
-					{% endfor %}
-				</div>
+			<div class="mt-auto space-y">
+				<button type="button" class="btn w-100" id="reset-changes">
+					{% include "ui/icon.html" icon="rotate" %}
+					Reset changes
+				</button>
+				<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
+					{% include "ui/icon.html" icon="settings" %}
+					Save settings
+				</a>
 			</div>
 
-			<div class="mb-4">
-				<div class="form-label">Menu behavior</div>
-				<p class="form-hint">Change the behavior of the menu.</p>
-
-				<div>
-					{% assign behaviors = 'sticky,fixed,compact' | split: ',' %}
-					{% for behavior in behaviors %}
-					<label class="form-check">
-						<input class="form-check-input" name="settings-menu-behavior" value="{{ behavior }}" type="radio" />
-						<span class="form-check-label">{{ behavior | capitalize }}</span>
-					</label>
-					{% endfor %}
-				</div>
-			</div>
-
-			<div class="mb-4">
-				<div class="form-label">Layout</div>
-				<p class="form-hint">Toggle container layout system.</p>
-
-				<div>
-					{% assign systems = 'boxed,fluid' | split: ',' %}
-					{% for system in systems %}
-					<label class="form-check">
-						<input class="form-check-input" name="settings-container-layout" value="{{ system }}" type="radio" />
-						<span class="form-check-label">{{ system | capitalize }}</span>
-					</label>
-					{% endfor %}
-				</div>
-			</div>
-
-		</div>
-		<div class="offcanvas-footer">
-			<button type="submit" class="btn btn-primary w-100">
-				{% include "ui/icon.html" icon="settings" %}
-				Save settings
-			</button>
 		</div>
 	</form>
 </div>
+
+<script>
+	document.addEventListener("DOMContentLoaded", function () {
+		var themeConfig = {
+			theme: "light",
+			"theme-base": "gray",
+			"theme-font": "sans-serif",
+			"theme-primary": "blue",
+			"theme-radius": "1",
+		}
+
+		var url = new URL(window.location)
+		var form = document.getElementById("offcanvasSettings")
+		var resetButton = document.getElementById("reset-changes")
+
+		var checkItems = function () {
+			for (var key in themeConfig) {
+				var value = window.localStorage["tabler-" + key] || themeConfig[key]
+
+				if (!!value) {
+					var radios = form.querySelectorAll(`[name="${key}"]`)
+
+					if (!!radios) {
+						radios.forEach((radio) => {
+							radio.checked = radio.value === value
+						})
+					}
+				}
+			}
+		}
+
+		form.addEventListener("change", function (event) {
+			var target = event.target,
+				name = target.name,
+				value = target.value
+
+			for (var key in themeConfig) {
+				if (name === key) {
+					document.documentElement.setAttribute("data-bs-" + key, value)
+					window.localStorage.setItem("tabler-" + key, value)
+					url.searchParams.set(key, value)
+				}
+			}
+
+			window.history.pushState({}, "", url)
+		})
+
+		resetButton.addEventListener("click", function () {
+			for (var key in themeConfig) {
+				var value = themeConfig[key]
+				document.documentElement.removeAttribute("data-bs-" + key)
+				window.localStorage.removeItem("tabler-" + key)
+				url.searchParams.delete(key)
+			}
+
+			checkItems()
+
+			window.history.pushState({}, "", url)
+		})
+
+		checkItems()
+	})
+</script>

preview/pages/_includes/ui/chart-sparkline.html

@@ -1,6 +1,6 @@
 {% assign type = include.type | default: 'bar' %}
 {% assign id = include.id %}
-{% assign color = include.color | default: 'blue' %}
+{% assign color = include.color | default: 'primary' %}
 {% assign height = include.height | default: 2.5 %}
 {% if include.small %}
 	{% assign height = include.height | default: 1.5 %}
@@ -70,11 +70,11 @@
 				{% endif %}
 
 				{% if type == 'donut' %}
-				colors: [tabler.getColor("{{ color | default: 'primary' }}")],
+				colors: ['var(--tblr-{{ color }})'],
 				series: [{{ data }}],
 				{% else %}
 				series: [{
-					color: tabler.getColor("{{ color | default: 'primary' }}"),
+					color: 'var(--tblr-{{ color }})',
 					data: [{{ data }}]
 				}],
 				{% endif %}

preview/pages/_includes/ui/chart.html

@@ -89,10 +89,15 @@
 			},
 			{% endif %}
 
+			{% if chart-type == 'area' %}
 			fill: {
-				opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
-				{% if chart-type == 'area' %}type: 'solid'{% endif %}
+				colors: [
+					'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
+					'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}80%{% endif %})',
+				],
+				type: 'solid'
 			},
+			{% endif %}
 
 			{% if data.title %}
 			title: {
@@ -214,7 +219,9 @@
 			{% endif %}
 
 			{% if data.series %}
-			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}tabler.getColor("{{ color }}"{% if serie.color-opacity %}, {{ serie.color-opacity }}{% endif %}){% unless forloop.last %}, {% endunless %}{% endfor %}],
+			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}
+				'color-mix(in srgb, transparent, var(--tblr-{{ color }}) {% if serie.color-opacity %}{{ serie.color-opacity }}{% else %}100%{% endif %})'{% unless forloop.last %}, {% endunless %}{% endfor %}
+			],
 			{% endif %}
 
 			legend: {

preview/pages/_includes/ui/map-vector.html

@@ -21,11 +21,11 @@
 				regionStyle: {
 					initial: {
 						{% unless data.filled %}
-						fill: tabler.getColor('body-bg'),
-						stroke: tabler.getColor('border-color'),
+						fill: 'var(--tblr-bg-surface-secondary)',
+						stroke: 'var(--tblr-border-color)',
 						strokeWidth: 2,
 						{% else %}
-						fill: tabler.getColor('body-bg'),
+						fill: 'var(--tblr-bg-surface-secondary)',
 						stroke: '#fff',
 						strokeWidth: 1,
 						{% endunless %}
@@ -34,11 +34,17 @@
 				zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
 				zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
 				{% if data.values %}
-				// -------- Series --------
-				visualizeData: {
-					scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
-					values: {{ data.values }},
-				},
+				series: {
+					regions: [{
+						attribute: "fill",
+						scale: {
+							{% for i in (1..10) %}
+							scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
+							{% endfor %}
+						},
+						values: {{ data.values | json }},
+					}]
+				}
 				{% endif %}
 				{% if data.markers %}
 				markers: [
@@ -56,11 +62,11 @@
 						opacity: 1,
 						strokeWidth: 3,
 						stokeOpacity: .5,
-						fill: tabler.getColor('{{ color }}')
+						fill: 'var(--tblr-{{ color }})'
 					},
 					hover: {
-						fill: tabler.getColor('{{ color }}'),
-						stroke: tabler.getColor('{{ color }}')
+						fill: 'var(--tblr-{{ color }})',
+						stroke: 'var(--tblr-{{ color }})'
 					}
 				},
 				markerLabelStyle: {

preview/pages/_layouts/base.html

@@ -1,7 +1,8 @@
+{% assign layout-dark = page.layout-dark | default: site.layout-dark -%}
 <!doctype html>
 {% include "layout/banner.html" %}
 {% assign title = page.title | default: layout.title %}
-<html lang="en"{% if layout-rtl %} dir="rtl" {% endif %}>
+<html lang="en"{% if layout-rtl %} dir="rtl" {% endif %}{% if layout.html-class or page.html-class %} class="{{ page.html-class | default: layout.html-class }}"{% endif %}>
 <head>
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
@@ -50,5 +51,7 @@
 	{% modals %}
 
 	{% include "layout/js.html" %}
+
+	{% include "settings.html" %}
 </body>
 </html>

preview/pages/_layouts/default.html

@@ -13,7 +13,7 @@ layout: base
 
 	{% unless layout-hide-topbar %}
 		<!-- BEGIN NAVBAR  -->
-		{% include "layout/navbar.html" condensed=layout-navbar-condensed overlap=layout-navbar-overlap dark=layout-navbar-dark hide-brand=layout-navbar-hide-brand hide-menu=layout-navbar-hide-menu sticky=layout-navbar-sticky transparent=layout-topbar-transparent class=layout-navbar-class %}
+		{% include "layout/navbar.html" condensed=layout-navbar-condensed overlap=layout-navbar-overlap dark=layout-navbar-dark hide-brand=layout-navbar-hide-brand hide-menu=layout-navbar-hide-menu sticky=layout-navbar-sticky transparent=layout-topbar-transparent class=layout-navbar-class hide-search=true %}
 		<!-- END NAVBAR  -->
 	{% endunless %}
 
@@ -40,5 +40,3 @@ layout: base
 		{% include "layout/footer.html" %}
 	</div>
 </div>
-
-{% comment %}{% include "settings.html" %}{% endcomment %}

preview/pages/_layouts/marketing.html

@@ -17,26 +17,26 @@ plugins: marketing
 						<div class="col-md">
 							<div class="subheader mb-3">Our products</div>
 							<ul class="list-unstyled list-separated gap-2">
-								<li><a class="link-muted" href="/">UI Kit</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">UI Kit</a></li>
 								<li>
-									<a class="link-muted" href="/icons">2664 open source icons</a>
+									<a class="link-secondary" href="{{ site.base }}">Open source icons</a>
 								</li>
 								<li>
-									<a class="link-muted" href="/emails">Email templates</a>
+									<a class="link-secondary" href="{{ site.base }}">Email templates</a>
 								</li>
-								<li><a class="link-muted" href="/pricing">Pricing</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Pricing</a></li>
 							</ul>
 						</div>
 						<div class="col-md">
 							<div class="subheader mb-3">Support</div>
 							<ul class="list-unstyled list-separated gap-2">
-								<li><a class="link-muted" href="/">Blog</a></li>
-								<li><a class="link-muted" href="/">Documentation</a></li>
-								<li><a class="link-muted" href="/">Support</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Documentation</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Support</a></li>
 								<li>
 									<a
 										href="https://status.tabler.io"
-										class="link-muted"
+										class="link-secondary"
 										target="_blank"
 										rel="noreferrer"
 										>Status</a
@@ -47,13 +47,13 @@ plugins: marketing
 						<div class="col-md">
 							<div class="subheader mb-3">Tabler</div>
 							<ul class="list-unstyled list-separated gap-2">
-								<li><a class="link-muted" href="/">About</a></li>
-								<li><a class="link-muted" href="/">Blog</a></li>
-								<li><a class="link-muted" href="/">Changelog</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">About</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
+								<li><a class="link-secondary" href="{{ site.base }}">Changelog</a></li>
 								<li>
 									<a
 										href="{{ site.githubUrl }}"
-										class="link-muted"
+										class="link-secondary"
 										target="_blank"
 										rel="noreferrer"
 										>Github</a
@@ -64,7 +64,7 @@ plugins: marketing
 					</div>
 				</div>
 				<div class="col-lg-4 ml-auto">
-					<div class="text-muted">
+					<div class="text-secondary">
 						Tabler comes with tons of well-designed components and features.
 						Start your adventure with Tabler and make your dashboard great
 						again. For free!
@@ -132,7 +132,7 @@ plugins: marketing
 						<div class="col-auto">
 							©<a
 								href="https://codecalm.net"
-								class="link-muted"
+								class="link-secondary"
 								target="_blank"
 								rel="noopener noreferrer"
 								>codecalm.net</a
@@ -141,12 +141,12 @@ plugins: marketing
 						<div class="col-auto">
 							<ul class="list-inline list-inline-dots">
 								<li class="list-inline-item">
-									<a class="link-muted" href="/terms-of-service"
+									<a class="link-secondary" href="/terms-of-service"
 										>Terms of service</a
 									>
 								</li>
 								<li class="list-inline-item">
-									<a class="link-muted" href="/privacy-policy"
+									<a class="link-secondary" href="/privacy-policy"
 										>Privacy policy</a
 									>
 								</li>

preview/pages/_layouts/settings.html

@@ -26,9 +26,7 @@ page-header: Account Settings
 			</div>
 		</div>
 		<div class="col-12 col-md-9 d-flex flex-column">
-
 			{{ content }}
-
 		</div>
 	</div>
 </div>

preview/pages/emails.html

@@ -56,7 +56,7 @@ permalink: emails.html
 			<div class="modal-body p-0">
 				<div class="row g-0">
 					<div class="col-6">
-						<div class="p-6 bg-body rounded-start">
+						<div class="p-6 bg-surface-secondary rounded-start">
 							<img src="" class="img-fluid rounded-left" data-email-image />
 						</div>
 					</div>

preview/pages/illustrations.html

@@ -14,7 +14,7 @@ permalink: illustrations.html
 {% assign skinColor = site.skinColors | first %} 
 {% assign color = site.colors | first %}
 
-<div class="mb-7" style="--tblr-illustrations-primary: {{ color.hex }}; --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
+<div class="mb-7" style="--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
 	<div class="row row-cards">
 		<div class="col-12">
 			<div class="row row-cards row-deck g-4">
@@ -33,10 +33,22 @@ permalink: illustrations.html
 									<div>
 										<div class="form-label">Primary color</div>
 										<div class="row g-2">
+											<div class="col-auto">
+												<label class="form-colorinput">
+													<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
+													<span class="form-colorinput-color bg-primary"></span>
+												</label>
+											</div>
+											<div class="col-auto">
+												<label class="form-colorinput">
+													<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
+													<span class="form-colorinput-color bg-inverted"></span>
+												</label>
+											</div>
 											{% for color in site.colors %}
 											<div class="col-auto">
 												<label class="form-colorinput">
-													<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} />
+													<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
 													<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
 												</label>
 											</div>

preview/scss/demo.scss

@@ -2,12 +2,6 @@ $prefix: "tblr-";
 
 @import "highlight";
 
-.card-sponsor {
-  background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;
-  border-color: var(--#{$prefix}primary);
-  min-height: 316px;
-}
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;

src/js/src/countup.js

@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-countup]');
+
+if (elements.length) {
+	elements.forEach(function (element) {
+		let options = {};
+		try {
+			options = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+		} catch (error) {}
+
+		const value = parseInt(element.innerHTML, 10);
+
+		const countUp = new window.countUp.CountUp(element, value, options);
+		if (!countUp.error) {
+			countUp.start();
+		}
+	});
+}