From 9bbcb99b901196d9e4947902ecda6fddebccd93c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sun, 23 Mar 2025 20:52:06 +0100 Subject: [PATCH] Add theme settings (#2054) --- .changeset/shy-mangos-sit.md | 5 + core/scss/_bootstrap-components.scss | 3 - core/scss/_core.scss | 4 + core/scss/_props.scss | 87 ++++ core/scss/_variables-dark.scss | 2 +- core/scss/_variables.scss | 106 ++--- core/scss/helpers/_index.scss | 143 +++++++ core/scss/layout/_dark.scss | 83 ++-- core/scss/layout/_navbar.scss | 1 + core/scss/layout/_root.scss | 56 ++- core/scss/marketing/_core.scss | 2 +- core/scss/marketing/_pricing.scss | 2 +- core/scss/tabler-props.scss | 1 + core/scss/tabler-themes.scss | 121 ++++++ core/scss/tabler.scss | 1 - core/scss/ui/_buttons.scss | 32 +- core/scss/ui/_forms.scss | 4 +- core/scss/ui/_offcanvas.scss | 2 +- core/scss/ui/_tags.scss | 2 +- core/scss/ui/_type.scss | 5 + core/scss/utils/_colors.scss | 52 ++- core/scss/vendor/_coloris.scss | 2 +- core/scss/vendor/_fslightbox.scss | 2 +- core/scss/vendor/_tom-select.scss | 2 +- pnpm-lock.yaml | 127 +++--- preview/eleventy.config.mjs | 3 +- preview/js/demo-theme.js | 38 +- preview/package.json | 2 +- preview/pages/_data/charts.json | 20 +- preview/pages/_data/maps-vector.json | 370 +++++++++++++++++- preview/pages/_includes/cards/sponsor.html | 80 +++- preview/pages/_includes/layout/navbar.html | 19 +- .../marketing/sections/companies.html | 16 +- .../_includes/marketing/sections/faq-2.html | 6 +- .../marketing/sections/features-2.html | 6 +- .../marketing/sections/features-3.html | 6 +- .../marketing/sections/features.html | 6 +- .../marketing/sections/testimonials.html | 2 +- preview/pages/_includes/parts/tasks.html | 6 +- preview/pages/_includes/settings.html | 221 +++++++---- .../pages/_includes/ui/chart-sparkline.html | 6 +- preview/pages/_includes/ui/chart.html | 13 +- preview/pages/_includes/ui/map-vector.html | 28 +- preview/pages/_layouts/base.html | 5 +- preview/pages/_layouts/default.html | 6 +- preview/pages/_layouts/marketing.html | 32 +- preview/pages/_layouts/settings.html | 2 - preview/pages/emails.html | 2 +- preview/pages/illustrations.html | 16 +- preview/scss/demo.scss | 6 - preview/static/sponsor-banner-homepage.svg | 363 ++++------------- src/js/src/countup.js | 17 + 52 files changed, 1459 insertions(+), 685 deletions(-) create mode 100644 .changeset/shy-mangos-sit.md create mode 100644 core/scss/_props.scss create mode 100644 core/scss/helpers/_index.scss create mode 100644 core/scss/tabler-props.scss create mode 100644 core/scss/tabler-themes.scss create mode 100644 src/js/src/countup.js diff --git a/.changeset/shy-mangos-sit.md b/.changeset/shy-mangos-sit.md new file mode 100644 index 000000000..bf94f57ce --- /dev/null +++ b/.changeset/shy-mangos-sit.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Add theme settings wizard diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss index fca753b95..71037d485 100644 --- a/core/scss/_bootstrap-components.scss +++ b/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"; diff --git a/core/scss/_core.scss b/core/scss/_core.scss index 3e3db378e..ea1e6f872 100644 --- a/core/scss/_core.scss +++ b/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"; diff --git a/core/scss/_props.scss b/core/scss/_props.scss new file mode 100644 index 000000000..054f1e0e7 --- /dev/null +++ b/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)); +} diff --git a/core/scss/_variables-dark.scss b/core/scss/_variables-dark.scss index 9ebd8fbbb..baf386b5d 100644 --- a/core/scss/_variables-dark.scss +++ b/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; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 150e28b9c..628177d75 100644 --- a/core/scss/_variables.scss +++ b/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,=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: diff --git a/preview/eleventy.config.mjs b/preview/eleventy.config.mjs index 60a2dd61e..c1163c262 100644 --- a/preview/eleventy.config.mjs +++ b/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: { diff --git a/preview/js/demo-theme.js b/preview/js/demo-theme.js index bc258915e..6c09ffca0 100644 --- a/preview/js/demo-theme.js +++ b/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) + } } \ No newline at end of file diff --git a/preview/package.json b/preview/package.json index 89ca4c96f..194426098 100644 --- a/preview/package.json +++ b/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", diff --git a/preview/pages/_data/charts.json b/preview/pages/_data/charts.json index 71fabce53..e825b36d2 100644 --- a/preview/pages/_data/charts.json +++ b/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 } ] diff --git a/preview/pages/_data/maps-vector.json b/preview/pages/_data/maps-vector.json index cead2e404..2fe690c1f 100644 --- a/preview/pages/_data/maps-vector.json +++ b/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", diff --git a/preview/pages/_includes/cards/sponsor.html b/preview/pages/_includes/cards/sponsor.html index 6d1340079..299e3aa1a 100644 --- a/preview/pages/_includes/cards/sponsor.html +++ b/preview/pages/_includes/cards/sponsor.html @@ -1,3 +1,79 @@ - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
Help Tabler Grow and Thrive
+

Sponsor Tabler and help us make a difference!

+
+ +
+
+
+
\ No newline at end of file diff --git a/preview/pages/_includes/layout/navbar.html b/preview/pages/_includes/layout/navbar.html index 51fce53d1..7049146b6 100644 --- a/preview/pages/_includes/layout/navbar.html +++ b/preview/pages/_includes/layout/navbar.html @@ -45,13 +45,30 @@

Designed with users in mind

-

+

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!

@@ -30,7 +30,7 @@

Built for developers

-

+

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.

@@ -44,7 +44,7 @@

Fully customizable

-

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!

+

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!

diff --git a/preview/pages/_includes/marketing/sections/features.html b/preview/pages/_includes/marketing/sections/features.html index 50cf049d3..07749fe9e 100644 --- a/preview/pages/_includes/marketing/sections/features.html +++ b/preview/pages/_includes/marketing/sections/features.html @@ -5,17 +5,17 @@
{% include "ui/shape.html" icon="devices" class="mb-3" size="md" %}

Mobile-optimized

-

Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.

+

Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.

{% include "ui/shape.html" icon="mailbox" class="mb-3" size="md" %}

Compatible with 90+ email clients

-

Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.

+

Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.

{% include "ui/shape.html" icon="palette" class="mb-3" size="md" %}

Unique, minimal design

-

Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.

+

Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.

diff --git a/preview/pages/_includes/marketing/sections/testimonials.html b/preview/pages/_includes/marketing/sections/testimonials.html index 036f2074d..416585f93 100644 --- a/preview/pages/_includes/marketing/sections/testimonials.html +++ b/preview/pages/_includes/marketing/sections/testimonials.html @@ -18,7 +18,7 @@ {% for testimonial in group %} {% assign person = people[i] %}
- +
{% include "ui/avatar.html" person=person size="md" %}
diff --git a/preview/pages/_includes/parts/tasks.html b/preview/pages/_includes/parts/tasks.html index 9c65bee25..a119d3cf1 100644 --- a/preview/pages/_includes/parts/tasks.html +++ b/preview/pages/_includes/parts/tasks.html @@ -57,7 +57,7 @@ {% if task.subtasks %}
- + {% include "ui/icon.html" icon="activity" %} 1/{{ task.subtasks.size }} @@ -65,11 +65,11 @@ {% endif %} {% if task.comments %}
- {% include "ui/icon.html" icon="message" %} {{ task.comments }} + {% include "ui/icon.html" icon="message" %} {{ task.comments }}
{% endif %}
- {% include "ui/icon.html" icon="share" %} + {% include "ui/icon.html" icon="share" %}
diff --git a/preview/pages/_includes/settings.html b/preview/pages/_includes/settings.html index 0199db4d5..242295363 100644 --- a/preview/pages/_includes/settings.html +++ b/preview/pages/_includes/settings.html @@ -1,88 +1,167 @@
+ {% include "ui/icon.html" icon="brush" %} - - {% include "ui/icon.html" icon="settings" %} - - - -
+

Theme Builder

-
-
- -

The perfect color mode for your app.

+
+
+
+ +

Choose the color mode for your app.

+ {% assign modes = 'light,dark' | split: ',' %} {% for mode in modes %} + + {% endfor %} +
-
- {% assign schemes = 'light,mixed,colored,dark,transparent' | split: ',' %} - {% for scheme in schemes %} -
-
\ No newline at end of file +
+ + diff --git a/preview/pages/_includes/ui/chart-sparkline.html b/preview/pages/_includes/ui/chart-sparkline.html index 55d59b358..02ec18cae 100644 --- a/preview/pages/_includes/ui/chart-sparkline.html +++ b/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 %} diff --git a/preview/pages/_includes/ui/chart.html b/preview/pages/_includes/ui/chart.html index 7dc8eb40b..80c68e783 100644 --- a/preview/pages/_includes/ui/chart.html +++ b/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: { diff --git a/preview/pages/_includes/ui/map-vector.html b/preview/pages/_includes/ui/map-vector.html index 9fb756370..262a21094 100644 --- a/preview/pages/_includes/ui/map-vector.html +++ b/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: { diff --git a/preview/pages/_layouts/base.html b/preview/pages/_layouts/base.html index c23dafff6..27d6547fd 100644 --- a/preview/pages/_layouts/base.html +++ b/preview/pages/_layouts/base.html @@ -1,7 +1,8 @@ +{% assign layout-dark = page.layout-dark | default: site.layout-dark -%} {% include "layout/banner.html" %} {% assign title = page.title | default: layout.title %} - + @@ -50,5 +51,7 @@ {% modals %} {% include "layout/js.html" %} + + {% include "settings.html" %} diff --git a/preview/pages/_layouts/default.html b/preview/pages/_layouts/default.html index 6001e74a2..c73b96572 100644 --- a/preview/pages/_layouts/default.html +++ b/preview/pages/_layouts/default.html @@ -13,7 +13,7 @@ layout: base {% unless layout-hide-topbar %} - {% 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 %} {% endunless %} @@ -39,6 +39,4 @@ layout: base {% include "layout/footer.html" %}
-
- -{% comment %}{% include "settings.html" %}{% endcomment %} \ No newline at end of file +
\ No newline at end of file diff --git a/preview/pages/_layouts/marketing.html b/preview/pages/_layouts/marketing.html index 920e3d9e1..ae80f3b31 100644 --- a/preview/pages/_layouts/marketing.html +++ b/preview/pages/_layouts/marketing.html @@ -17,26 +17,26 @@ plugins: marketing
Our products
Support
-
+
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
©codecalm.net
  • - Terms of service
  • - Privacy policy
    • diff --git a/preview/pages/_layouts/settings.html b/preview/pages/_layouts/settings.html index e79c97371..247417962 100644 --- a/preview/pages/_layouts/settings.html +++ b/preview/pages/_layouts/settings.html @@ -26,9 +26,7 @@ page-header: Account Settings
- {{ content }} -
\ No newline at end of file diff --git a/preview/pages/emails.html b/preview/pages/emails.html index e0c0eca58..5b668b634 100644 --- a/preview/pages/emails.html +++ b/preview/pages/emails.html @@ -56,7 +56,7 @@ permalink: emails.html
-
+
diff --git a/preview/pages/illustrations.html b/preview/pages/illustrations.html index 07eac6278..b15101f21 100644 --- a/preview/pages/illustrations.html +++ b/preview/pages/illustrations.html @@ -14,7 +14,7 @@ permalink: illustrations.html {% assign skinColor = site.skinColors | first %} {% assign color = site.colors | first %} -
+
@@ -33,10 +33,22 @@ permalink: illustrations.html
Primary color
+
+ +
+
+ +
{% for color in site.colors %}
diff --git a/preview/scss/demo.scss b/preview/scss/demo.scss index e1af683d4..645e48aad 100644 --- a/preview/scss/demo.scss +++ b/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%; diff --git a/preview/static/sponsor-banner-homepage.svg b/preview/static/sponsor-banner-homepage.svg index 990036688..716e03e5b 100644 --- a/preview/static/sponsor-banner-homepage.svg +++ b/preview/static/sponsor-banner-homepage.svg @@ -1,288 +1,75 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/src/countup.js b/src/js/src/countup.js new file mode 100644 index 000000000..edc132bda --- /dev/null +++ b/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(); + } + }); +} \ No newline at end of file