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-dark.scss

@@ -11,7 +11,7 @@ $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
 //new bootsrap variables
-$body-color-dark: $gray-200 !default;
+$body-color-dark: $gray-200 !default; 
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;

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;
-    }
+@if $enable-dark-mode {
+  :root {
+    &:not(.theme-dark):not([data-bs-theme="dark"]) {
+      .hide-theme-light {
+        display: none !important;
+      }
 
-    .img-dark {
-      display: none !important;
+      .img-dark {
+        display: none !important;
+      }
     }
-  }
 
-  &.theme-dark,
-  &[data-bs-theme=dark] {
-    .hide-theme-dark {
-      display: none !important;
-    }
+    &.theme-dark,
+    &[data-bs-theme="dark"] {
+      .hide-theme-dark {
+        display: none !important;
+      }
 
-    .img-light {
-      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};
+    color-scheme: dark;
+    --#{$prefix}body-color: var(--#{$prefix}gray-200);
+    --#{$prefix}secondary: var(--#{$prefix}gray-400);
 
-    --#{$prefix}body-bg: #{$darken-dark};
-    --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+    --#{$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,30 +2,33 @@
 :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);
+
+  --#{$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);
 
-  @each $name, $value in $spacers {
-    --#{$prefix}spacer-#{$name}: #{$value};
-  }
-  --#{$prefix}spacer: #{$spacer};
+  --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
 
-  --#{$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-forms: var(--#{$prefix}bg-surface);
+  --#{$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};
@@ -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,18 @@
 @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 {
+    color: $value !important;
+  }
+}
+
+@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 {
@@ -53,6 +79,10 @@
   }
 }
 
+.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/[email protected]':
-    resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
-  '@svgdotjs/[email protected]':
-    resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==}
-    engines: {node: '>= 0.8.0'}
-
-  '@svgdotjs/[email protected]':
-    resolution: {integrity: sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==}
-
-  '@svgdotjs/[email protected]':
-    resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-      '@svgdotjs/svg.select.js': ^4.0.1
-
-  '@svgdotjs/[email protected]':
-    resolution: {integrity: sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
   '@swc/[email protected]':
     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==}
 
   [email protected]:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -2380,6 +2355,37 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  [email protected]:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+
+  [email protected]:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+
   [email protected]:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -3278,25 +3284,6 @@ snapshots:
     dependencies:
       escape-string-regexp: 5.0.0
 
-  '@svgdotjs/[email protected](@svgdotjs/[email protected])':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
-  '@svgdotjs/[email protected]':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
-  '@svgdotjs/[email protected]': {}
-
-  '@svgdotjs/[email protected](@svgdotjs/[email protected])(@svgdotjs/[email protected](@svgdotjs/[email protected]))':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-      '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/[email protected])
-
-  '@svgdotjs/[email protected](@svgdotjs/[email protected])':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.4
-
   '@swc/[email protected]': {}
 
   '@tabler/[email protected]': {}
@@ -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/[email protected])
-      '@svgdotjs/svg.filter.js': 3.0.9
-      '@svgdotjs/svg.js': 3.2.4
-      '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/[email protected])(@svgdotjs/[email protected](@svgdotjs/[email protected]))
-      '@svgdotjs/svg.select.js': 4.0.2(@svgdotjs/[email protected])
       '@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
 
   [email protected]:
     dependencies:
@@ -4882,6 +4870,37 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
+  [email protected]:
+    dependencies:
+      svg.js: 2.7.1
+
   [email protected]: {}
 
   [email protected]:

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/_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="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="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="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>
-					{% 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 class="mb-4">
+					<label class="form-label">Theme base</label>
+					<p class="form-hint">Choose the gray shade for your app.</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>
+						{% 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>
 
-			<div class="mb-4">
-				<div class="form-label">Menu behavior</div>
-				<p class="form-hint">Change the behavior of the menu.</p>
+				<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 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>
+						{% 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>
 				</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 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>
-		<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>
+</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 %}
 
@@ -39,6 +39,4 @@ layout: base
 
 		{% include "layout/footer.html" %}
 	</div>
-</div>
-
-{% comment %}{% include "settings.html" %}{% endcomment %}
+</div>

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();
+		}
+	});
+}