Merge remote-tracking branch 'origin/card' into card

# Conflicts: # src/scss/layout/_dark.scss
2026-08-14 07:12:22 +04:00 · 2022-09-01 18:33:14 +07:00
parent df06dcaea7 82830448ec
commit bb92c7f941
68 changed files with 790 additions and 713 deletions
@@ -285,6 +285,10 @@ gulp.task('js-demo', () => {
 	return compileJs('demo')
 })

+gulp.task('js-demo-theme', () => {
+	 return compileJs('demo-theme')
+})
+
 /**
 * Compile JS module files to dist directory
 */
@@ -416,7 +420,7 @@ gulp.task('build-critical', (cb) => {
 */
 gulp.task('watch', (cb) => {
 	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
-	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', 'js-demo'))
+	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', gulp.parallel('js-demo', 'js-demo-theme')))
 	cb()
 })

@@ -516,8 +520,8 @@ gulp.task('add-banner', () => {

 gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))

-gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
+gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))

-gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
+gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
 gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
 gulp.task('build', gulp.series('build-core', 'build-demo'))
@@ -10,25 +10,25 @@
      "license": "MIT",
      "dependencies": {
        "@popperjs/core": "^2.11.6",
-        "@tabler/icons": "^1.91.0",
+        "@tabler/icons": "^1.91.1",
        "bootstrap": "5.2.0",
        "node-sass": "^7.0.1"
      },
      "devDependencies": {
-        "@babel/core": "^7.18.10",
+        "@babel/core": "^7.18.13",
        "@babel/preset-env": "^7.18.10",
        "@rollup/plugin-commonjs": "^22.0.2",
        "@rollup/plugin-node-resolve": "^13.3.0",
        "@rollup/plugin-replace": "^4.0.0",
        "@rollup/pluginutils": "^4.2.1",
        "@rollup/stream": "^2.0.0",
-        "apexcharts": "^3.35.4",
+        "apexcharts": "^3.35.5",
        "autoprefixer": "^10.4.8",
        "autosize": "^5.0.1",
        "browser-sync": "^2.27.10",
        "bundlewatch": "^0.3.3",
        "choices.js": "^10.1.0",
-        "chromatic": "^6.7.4",
+        "chromatic": "^6.8.0",
        "countup.js": "^2.3.2",
        "critical": "^4.0.1",
        "cross-spawn": "^7.0.3",
@@ -53,11 +53,11 @@
        "nouislider": "^15.6.1",
        "plyr": "^3.7.2",
        "postcss": "^8.4.16",
-        "release-it": "^15.3.0",
-        "rollup": "^2.78.1",
+        "release-it": "^15.4.1",
+        "rollup": "^2.79.0",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-cleanup": "^3.2.1",
-        "sass": "^1.54.4",
+        "sass": "^1.54.7",
        "tinymce": "^6.1.2",
        "tom-select": "^2.1.0",
        "vinyl-buffer": "^1.0.1",
@@ -73,7 +73,7 @@
        "url": "https://github.com/sponsors/codecalm"
      },
      "peerDependencies": {
-        "apexcharts": "^3.35.4",
+        "apexcharts": "^3.35.5",
        "autosize": "^5.0.1",
        "choices.js": "^10.1.0",
        "countup.js": "^2.3.2",
@@ -171,21 +171,21 @@
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
-      "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
      "dev": true,
      "dependencies": {
        "@ampproject/remapping": "^2.1.0",
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
        "@babel/helper-compilation-targets": "^7.18.9",
        "@babel/helper-module-transforms": "^7.18.9",
        "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.10",
+        "@babel/parser": "^7.18.13",
        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -201,12 +201,12 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.10.tgz",
-      "integrity": "sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
      "dev": true,
      "dependencies": {
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.18.13",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
@@ -574,9 +574,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.10.tgz",
-      "integrity": "sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -1698,19 +1698,19 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.10.tgz",
-      "integrity": "sha512-J7ycxg0/K9XCtLyHf0cz2DqDihonJeIo+z+HEdRe9YuT8TY4A66i+Ab2/xZCEW7Ro60bPCBBfqqboHSamoV3+g==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
        "@babel/helper-environment-visitor": "^7.18.9",
        "@babel/helper-function-name": "^7.18.9",
        "@babel/helper-hoist-variables": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -1719,9 +1719,9 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.10.tgz",
-      "integrity": "sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.18.10",
@@ -1934,28 +1934,28 @@
      }
    },
    "node_modules/@octokit/auth-token": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
-      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.1.tgz",
+      "integrity": "sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==",
      "dev": true,
      "dependencies": {
-        "@octokit/types": "^6.0.3"
+        "@octokit/types": "^7.0.0"
      },
      "engines": {
        "node": ">= 14"
      }
    },
    "node_modules/@octokit/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.5.tgz",
+      "integrity": "sha512-4R3HeHTYVHCfzSAi0C6pbGXV8UDI5Rk+k3G7kLVNckswN9mvpOzW9oENfjfH3nEmzg8y3AmKmzs8Sg6pLCeOCA==",
      "dev": true,
      "dependencies": {
        "@octokit/auth-token": "^3.0.0",
        "@octokit/graphql": "^5.0.0",
        "@octokit/request": "^6.0.0",
        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "before-after-hook": "^2.2.0",
        "universal-user-agent": "^6.0.0"
      },
@@ -1964,12 +1964,12 @@
      }
    },
    "node_modules/@octokit/endpoint": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
-      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.1.tgz",
+      "integrity": "sha512-/wTXAJwt0HzJ2IeE4kQXO+mBScfzyCkI0hMtkIaqyXd9zg76OpOfNQfHL9FlaxAV2RsNiOXZibVWloy8EexENg==",
      "dev": true,
      "dependencies": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "is-plain-object": "^5.0.0",
        "universal-user-agent": "^6.0.0"
      },
@@ -1978,13 +1978,13 @@
      }
    },
    "node_modules/@octokit/graphql": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
-      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.1.tgz",
+      "integrity": "sha512-sxmnewSwAixkP1TrLdE6yRG53eEhHhDTYUykUwdV9x8f91WcbhunIHk9x1PZLALdBZKRPUO2HRcm4kezZ79HoA==",
      "dev": true,
      "dependencies": {
        "@octokit/request": "^6.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "universal-user-agent": "^6.0.0"
      },
      "engines": {
@@ -1992,18 +1992,18 @@
      }
    },
    "node_modules/@octokit/openapi-types": {
-      "version": "12.11.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
-      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.6.0.tgz",
+      "integrity": "sha512-bxftLwoZ2J6zsU1rzRvk0O32j7lVB0NWWn+P5CDHn9zPzytasR3hdAeXlTngRDkqv1LyEeuy5psVnDkmOSwrcQ==",
      "dev": true
    },
    "node_modules/@octokit/plugin-paginate-rest": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
-      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-4.2.0.tgz",
+      "integrity": "sha512-8otLCIK9esfmOCY14CBnG/xPqv0paf14rc+s9tHpbOpeFwrv5CnECKW1qdqMAT60ngAa9eB1bKQ+l2YCpi0HPQ==",
      "dev": true,
      "dependencies": {
-        "@octokit/types": "^6.41.0"
+        "@octokit/types": "^7.2.0"
      },
      "engines": {
        "node": ">= 14"
@@ -2022,12 +2022,12 @@
      }
    },
    "node_modules/@octokit/plugin-rest-endpoint-methods": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.2.0.tgz",
-      "integrity": "sha512-PZ+yfkbZAuRUtqu6Y191/V3eM0KBPx+Yq7nh+ONPdpm3EX4pd5UnK2y2XgO/0AtNum5a4aJCDjqsDuUZ2hWRXw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.4.0.tgz",
+      "integrity": "sha512-YP4eUqZ6vORy/eZOTdil1ZSrMt0kv7i/CVw+HhC2C0yJN+IqTc/rot957JQ7JfyeJD6HZOjLg6Jp1o9cPhI9KA==",
      "dev": true,
      "dependencies": {
-        "@octokit/types": "^6.41.0",
+        "@octokit/types": "^7.2.0",
        "deprecation": "^2.3.1"
      },
      "engines": {
@@ -2038,14 +2038,14 @@
      }
    },
    "node_modules/@octokit/request": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
-      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.1.tgz",
+      "integrity": "sha512-gYKRCia3cpajRzDSU+3pt1q2OcuC6PK8PmFIyxZDWCzRXRSIBH8jXjFJ8ZceoygBIm0KsEUg4x1+XcYBz7dHPQ==",
      "dev": true,
      "dependencies": {
        "@octokit/endpoint": "^7.0.0",
        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.16.1",
+        "@octokit/types": "^7.0.0",
        "is-plain-object": "^5.0.0",
        "node-fetch": "^2.6.7",
        "universal-user-agent": "^6.0.0"
@@ -2055,12 +2055,12 @@
      }
    },
    "node_modules/@octokit/request-error": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
-      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.1.tgz",
+      "integrity": "sha512-ym4Bp0HTP7F3VFssV88WD1ZyCIRoE8H35pXSKwLeMizcdZAYc/t6N9X9Yr9n6t3aG9IH75XDnZ6UeZph0vHMWQ==",
      "dev": true,
      "dependencies": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "deprecation": "^2.0.0",
        "once": "^1.4.0"
      },
@@ -2111,13 +2111,13 @@
      }
    },
    "node_modules/@octokit/rest": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
-      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.4.tgz",
+      "integrity": "sha512-LwG668+6lE8zlSYOfwPj4FxWdv/qFXYBpv79TWIQEpBLKA9D/IMcWsF/U9RGpA3YqMVDiTxpgVpEW3zTFfPFTA==",
      "dev": true,
      "dependencies": {
        "@octokit/core": "^4.0.0",
-        "@octokit/plugin-paginate-rest": "^3.0.0",
+        "@octokit/plugin-paginate-rest": "^4.0.0",
        "@octokit/plugin-request-log": "^1.0.4",
        "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
      },
@@ -2126,12 +2126,12 @@
      }
    },
    "node_modules/@octokit/types": {
-      "version": "6.41.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
-      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==",
      "dev": true,
      "dependencies": {
-        "@octokit/openapi-types": "^12.11.0"
+        "@octokit/openapi-types": "^13.6.0"
      }
    },
    "node_modules/@orchidjs/sifter": {
@@ -2398,9 +2398,9 @@
      }
    },
    "node_modules/@tabler/icons": {
-      "version": "1.91.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.0.tgz",
-      "integrity": "sha512-hh3ly553MhAXvwU4rWwlvIKGKI2/Y9pqKUWHUpZF4hEa06DGjXUA4fJKwyf9TNq3xa2tcvD8J0tG3TaP18ZCtw==",
+      "version": "1.91.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
+      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/codecalm"
@@ -2793,9 +2793,9 @@
      }
    },
    "node_modules/apexcharts": {
-      "version": "3.35.4",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.4.tgz",
-      "integrity": "sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==",
+      "version": "3.35.5",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.5.tgz",
+      "integrity": "sha512-Bi3aq35xWntI71JlywXTBBAOhuKTbB4wijKw4ClkIAFV904YDkHPIJ8N9LcZq9fvVb0VX1AEmyOFBOB2Vwsuew==",
      "dev": true,
      "dependencies": {
        "svg.draggable.js": "^2.2.2",
@@ -4275,9 +4275,9 @@
      }
    },
    "node_modules/chromatic": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.7.4.tgz",
-      "integrity": "sha512-QW4i8RQsON0JVnFnRf+8y70aIJptvC0Oi/26YJ669Dl03WmJRpobNO5qWFPTiv3KFKMc1Qf6/qFsRVZCtn+bfA==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
+      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
      "dev": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.7",
@@ -7326,22 +7326,22 @@
      }
    },
    "node_modules/git-up": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/git-up/-/git-up-6.0.0.tgz",
-      "integrity": "sha512-6RUFSNd1c/D0xtGnyWN2sxza2bZtZ/EmI9448n6rCZruFwV/ezeEn2fJP7XnUQGwf0RAtd/mmUCbtH6JPYA2SA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
+      "integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
      "dev": true,
      "dependencies": {
        "is-ssh": "^1.4.0",
-        "parse-url": "^7.0.2"
+        "parse-url": "^8.1.0"
      }
    },
    "node_modules/git-url-parse": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-12.0.0.tgz",
-      "integrity": "sha512-I6LMWsxV87vysX1WfsoglXsXg6GjQRKq7+Dgiseo+h0skmp5Hp2rzmcEIRQot9CPA+uzU7x1x7jZdqvTFGnB+Q==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.0.0.tgz",
+      "integrity": "sha512-X1kozCqKL82dMrCLi4vie9SHDC+QugKskAMs4VUbIkhURKg5yDwxDmf6Ixg73J+/xVgK5TXKhzn8a94nHJHpnA==",
      "dev": true,
      "dependencies": {
-        "git-up": "^6.0.0"
+        "git-up": "^7.0.0"
      }
    },
    "node_modules/glob": {
@@ -12515,24 +12515,21 @@
      }
    },
    "node_modules/parse-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-5.0.0.tgz",
-      "integrity": "sha512-qOpH55/+ZJ4jUu/oLO+ifUKjFPNZGfnPJtzvGzKN/4oLMil5m9OH4VpOj6++9/ytJcfks4kzH2hhi87GL/OU9A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
+      "integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
      "dev": true,
      "dependencies": {
        "protocols": "^2.0.0"
      }
    },
    "node_modules/parse-url": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-7.0.2.tgz",
-      "integrity": "sha512-PqO4Z0eCiQ08Wj6QQmrmp5YTTxpYfONdOEamrtvK63AmzXpcavIVQubGHxOEwiIoDZFb8uDOoQFS0NCcjqIYQg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
+      "integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
      "dev": true,
      "dependencies": {
-        "is-ssh": "^1.4.0",
-        "normalize-url": "^6.1.0",
-        "parse-path": "^5.0.0",
-        "protocols": "^2.0.1"
+        "parse-path": "^7.0.0"
      }
    },
    "node_modules/parse5": {
@@ -13635,19 +13632,19 @@
      }
    },
    "node_modules/release-it": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.3.0.tgz",
-      "integrity": "sha512-MI4EBGca+y4SskgBkWNIakFp/GvXfpZEMWkmqmsysPcou/L+E+sKd0oy33ovGCyLic+9SI2rv/lQ3ACgonmqdQ==",
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.4.1.tgz",
+      "integrity": "sha512-w6adXfE+bN/fdcG1KehgS7gYcTfZLYIPml4jPOUEtYQ6NJyaiCtCF/ks032w1jf6EUgvGgWruRP+2TyyyDDBgA==",
      "dev": true,
      "dependencies": {
        "@iarna/toml": "2.2.5",
-        "@octokit/rest": "19.0.3",
+        "@octokit/rest": "19.0.4",
        "async-retry": "1.3.3",
        "chalk": "5.0.1",
        "cosmiconfig": "7.0.1",
        "execa": "6.1.0",
        "form-data": "4.0.0",
-        "git-url-parse": "12.0.0",
+        "git-url-parse": "13.0.0",
        "globby": "13.1.2",
        "got": "12.3.1",
        "inquirer": "9.1.0",
@@ -14211,9 +14208,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "2.78.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-      "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+      "version": "2.79.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
+      "integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
@@ -14356,9 +14353,9 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "node_modules/sass": {
-      "version": "1.54.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
-      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -17470,21 +17467,21 @@
      "dev": true
    },
    "@babel/core": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
-      "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
      "dev": true,
      "requires": {
        "@ampproject/remapping": "^2.1.0",
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
        "@babel/helper-compilation-targets": "^7.18.9",
        "@babel/helper-module-transforms": "^7.18.9",
        "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.10",
+        "@babel/parser": "^7.18.13",
        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -17493,12 +17490,12 @@
      }
    },
    "@babel/generator": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.10.tgz",
-      "integrity": "sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.18.13",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
@@ -17772,9 +17769,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.10.tgz",
-      "integrity": "sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
      "dev": true
    },
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -18524,27 +18521,27 @@
      }
    },
    "@babel/traverse": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.10.tgz",
-      "integrity": "sha512-J7ycxg0/K9XCtLyHf0cz2DqDihonJeIo+z+HEdRe9YuT8TY4A66i+Ab2/xZCEW7Ro60bPCBBfqqboHSamoV3+g==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
        "@babel/helper-environment-visitor": "^7.18.9",
        "@babel/helper-function-name": "^7.18.9",
        "@babel/helper-hoist-variables": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      }
    },
    "@babel/types": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.10.tgz",
-      "integrity": "sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
      "dev": true,
      "requires": {
        "@babel/helper-string-parser": "^7.18.10",
@@ -18715,64 +18712,64 @@
      }
    },
    "@octokit/auth-token": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
-      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.1.tgz",
+      "integrity": "sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==",
      "dev": true,
      "requires": {
-        "@octokit/types": "^6.0.3"
+        "@octokit/types": "^7.0.0"
      }
    },
    "@octokit/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.5.tgz",
+      "integrity": "sha512-4R3HeHTYVHCfzSAi0C6pbGXV8UDI5Rk+k3G7kLVNckswN9mvpOzW9oENfjfH3nEmzg8y3AmKmzs8Sg6pLCeOCA==",
      "dev": true,
      "requires": {
        "@octokit/auth-token": "^3.0.0",
        "@octokit/graphql": "^5.0.0",
        "@octokit/request": "^6.0.0",
        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "before-after-hook": "^2.2.0",
        "universal-user-agent": "^6.0.0"
      }
    },
    "@octokit/endpoint": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
-      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.1.tgz",
+      "integrity": "sha512-/wTXAJwt0HzJ2IeE4kQXO+mBScfzyCkI0hMtkIaqyXd9zg76OpOfNQfHL9FlaxAV2RsNiOXZibVWloy8EexENg==",
      "dev": true,
      "requires": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "is-plain-object": "^5.0.0",
        "universal-user-agent": "^6.0.0"
      }
    },
    "@octokit/graphql": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
-      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.1.tgz",
+      "integrity": "sha512-sxmnewSwAixkP1TrLdE6yRG53eEhHhDTYUykUwdV9x8f91WcbhunIHk9x1PZLALdBZKRPUO2HRcm4kezZ79HoA==",
      "dev": true,
      "requires": {
        "@octokit/request": "^6.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "universal-user-agent": "^6.0.0"
      }
    },
    "@octokit/openapi-types": {
-      "version": "12.11.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
-      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.6.0.tgz",
+      "integrity": "sha512-bxftLwoZ2J6zsU1rzRvk0O32j7lVB0NWWn+P5CDHn9zPzytasR3hdAeXlTngRDkqv1LyEeuy5psVnDkmOSwrcQ==",
      "dev": true
    },
    "@octokit/plugin-paginate-rest": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
-      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-4.2.0.tgz",
+      "integrity": "sha512-8otLCIK9esfmOCY14CBnG/xPqv0paf14rc+s9tHpbOpeFwrv5CnECKW1qdqMAT60ngAa9eB1bKQ+l2YCpi0HPQ==",
      "dev": true,
      "requires": {
-        "@octokit/types": "^6.41.0"
+        "@octokit/types": "^7.2.0"
      }
    },
    "@octokit/plugin-request-log": {
@@ -18783,24 +18780,24 @@
      "requires": {}
    },
    "@octokit/plugin-rest-endpoint-methods": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.2.0.tgz",
-      "integrity": "sha512-PZ+yfkbZAuRUtqu6Y191/V3eM0KBPx+Yq7nh+ONPdpm3EX4pd5UnK2y2XgO/0AtNum5a4aJCDjqsDuUZ2hWRXw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.4.0.tgz",
+      "integrity": "sha512-YP4eUqZ6vORy/eZOTdil1ZSrMt0kv7i/CVw+HhC2C0yJN+IqTc/rot957JQ7JfyeJD6HZOjLg6Jp1o9cPhI9KA==",
      "dev": true,
      "requires": {
-        "@octokit/types": "^6.41.0",
+        "@octokit/types": "^7.2.0",
        "deprecation": "^2.3.1"
      }
    },
    "@octokit/request": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
-      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.1.tgz",
+      "integrity": "sha512-gYKRCia3cpajRzDSU+3pt1q2OcuC6PK8PmFIyxZDWCzRXRSIBH8jXjFJ8ZceoygBIm0KsEUg4x1+XcYBz7dHPQ==",
      "dev": true,
      "requires": {
        "@octokit/endpoint": "^7.0.0",
        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.16.1",
+        "@octokit/types": "^7.0.0",
        "is-plain-object": "^5.0.0",
        "node-fetch": "^2.6.7",
        "universal-user-agent": "^6.0.0"
@@ -18840,35 +18837,35 @@
      }
    },
    "@octokit/request-error": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
-      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.1.tgz",
+      "integrity": "sha512-ym4Bp0HTP7F3VFssV88WD1ZyCIRoE8H35pXSKwLeMizcdZAYc/t6N9X9Yr9n6t3aG9IH75XDnZ6UeZph0vHMWQ==",
      "dev": true,
      "requires": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
        "deprecation": "^2.0.0",
        "once": "^1.4.0"
      }
    },
    "@octokit/rest": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
-      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.4.tgz",
+      "integrity": "sha512-LwG668+6lE8zlSYOfwPj4FxWdv/qFXYBpv79TWIQEpBLKA9D/IMcWsF/U9RGpA3YqMVDiTxpgVpEW3zTFfPFTA==",
      "dev": true,
      "requires": {
        "@octokit/core": "^4.0.0",
-        "@octokit/plugin-paginate-rest": "^3.0.0",
+        "@octokit/plugin-paginate-rest": "^4.0.0",
        "@octokit/plugin-request-log": "^1.0.4",
        "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
      }
    },
    "@octokit/types": {
-      "version": "6.41.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
-      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==",
      "dev": true,
      "requires": {
-        "@octokit/openapi-types": "^12.11.0"
+        "@octokit/openapi-types": "^13.6.0"
      }
    },
    "@orchidjs/sifter": {
@@ -19083,9 +19080,9 @@
      }
    },
    "@tabler/icons": {
-      "version": "1.91.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.0.tgz",
-      "integrity": "sha512-hh3ly553MhAXvwU4rWwlvIKGKI2/Y9pqKUWHUpZF4hEa06DGjXUA4fJKwyf9TNq3xa2tcvD8J0tG3TaP18ZCtw==",
+      "version": "1.91.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
+      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
      "requires": {}
    },
    "@tootallnate/once": {
@@ -19396,9 +19393,9 @@
      }
    },
    "apexcharts": {
-      "version": "3.35.4",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.4.tgz",
-      "integrity": "sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==",
+      "version": "3.35.5",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.5.tgz",
+      "integrity": "sha512-Bi3aq35xWntI71JlywXTBBAOhuKTbB4wijKw4ClkIAFV904YDkHPIJ8N9LcZq9fvVb0VX1AEmyOFBOB2Vwsuew==",
      "dev": true,
      "requires": {
        "svg.draggable.js": "^2.2.2",
@@ -20498,9 +20495,9 @@
      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
    },
    "chromatic": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.7.4.tgz",
-      "integrity": "sha512-QW4i8RQsON0JVnFnRf+8y70aIJptvC0Oi/26YJ669Dl03WmJRpobNO5qWFPTiv3KFKMc1Qf6/qFsRVZCtn+bfA==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
+      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
      "dev": true,
      "requires": {
        "@discoveryjs/json-ext": "^0.5.7",
@@ -22912,22 +22909,22 @@
      }
    },
    "git-up": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/git-up/-/git-up-6.0.0.tgz",
-      "integrity": "sha512-6RUFSNd1c/D0xtGnyWN2sxza2bZtZ/EmI9448n6rCZruFwV/ezeEn2fJP7XnUQGwf0RAtd/mmUCbtH6JPYA2SA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
+      "integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
      "dev": true,
      "requires": {
        "is-ssh": "^1.4.0",
-        "parse-url": "^7.0.2"
+        "parse-url": "^8.1.0"
      }
    },
    "git-url-parse": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-12.0.0.tgz",
-      "integrity": "sha512-I6LMWsxV87vysX1WfsoglXsXg6GjQRKq7+Dgiseo+h0skmp5Hp2rzmcEIRQot9CPA+uzU7x1x7jZdqvTFGnB+Q==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.0.0.tgz",
+      "integrity": "sha512-X1kozCqKL82dMrCLi4vie9SHDC+QugKskAMs4VUbIkhURKg5yDwxDmf6Ixg73J+/xVgK5TXKhzn8a94nHJHpnA==",
      "dev": true,
      "requires": {
-        "git-up": "^6.0.0"
+        "git-up": "^7.0.0"
      }
    },
    "glob": {
@@ -26880,24 +26877,21 @@
      "dev": true
    },
    "parse-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-5.0.0.tgz",
-      "integrity": "sha512-qOpH55/+ZJ4jUu/oLO+ifUKjFPNZGfnPJtzvGzKN/4oLMil5m9OH4VpOj6++9/ytJcfks4kzH2hhi87GL/OU9A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
+      "integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
      "dev": true,
      "requires": {
        "protocols": "^2.0.0"
      }
    },
    "parse-url": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-7.0.2.tgz",
-      "integrity": "sha512-PqO4Z0eCiQ08Wj6QQmrmp5YTTxpYfONdOEamrtvK63AmzXpcavIVQubGHxOEwiIoDZFb8uDOoQFS0NCcjqIYQg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
+      "integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
      "dev": true,
      "requires": {
-        "is-ssh": "^1.4.0",
-        "normalize-url": "^6.1.0",
-        "parse-path": "^5.0.0",
-        "protocols": "^2.0.1"
+        "parse-path": "^7.0.0"
      }
    },
    "parse5": {
@@ -27734,19 +27728,19 @@
      }
    },
    "release-it": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.3.0.tgz",
-      "integrity": "sha512-MI4EBGca+y4SskgBkWNIakFp/GvXfpZEMWkmqmsysPcou/L+E+sKd0oy33ovGCyLic+9SI2rv/lQ3ACgonmqdQ==",
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.4.1.tgz",
+      "integrity": "sha512-w6adXfE+bN/fdcG1KehgS7gYcTfZLYIPml4jPOUEtYQ6NJyaiCtCF/ks032w1jf6EUgvGgWruRP+2TyyyDDBgA==",
      "dev": true,
      "requires": {
        "@iarna/toml": "2.2.5",
-        "@octokit/rest": "19.0.3",
+        "@octokit/rest": "19.0.4",
        "async-retry": "1.3.3",
        "chalk": "5.0.1",
        "cosmiconfig": "7.0.1",
        "execa": "6.1.0",
        "form-data": "4.0.0",
-        "git-url-parse": "12.0.0",
+        "git-url-parse": "13.0.0",
        "globby": "13.1.2",
        "got": "12.3.1",
        "inquirer": "9.1.0",
@@ -28167,9 +28161,9 @@
      }
    },
    "rollup": {
-      "version": "2.78.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-      "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+      "version": "2.79.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
+      "integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
      "dev": true,
      "requires": {
        "fsevents": "~2.3.2"
@@ -28274,9 +28268,9 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "sass": {
-      "version": "1.54.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
-      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -57,20 +57,20 @@
  "main": "dist/js/tabler.js",
  "homepage": "https://tabler.io",
  "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/pluginutils": "^4.2.1",
    "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.35.4",
+    "apexcharts": "^3.35.5",
    "autoprefixer": "^10.4.8",
    "autosize": "^5.0.1",
    "browser-sync": "^2.27.10",
    "bundlewatch": "^0.3.3",
    "choices.js": "^10.1.0",
-    "chromatic": "^6.7.4",
+    "chromatic": "^6.8.0",
    "countup.js": "^2.3.2",
    "critical": "^4.0.1",
    "cross-spawn": "^7.0.3",
@@ -95,11 +95,11 @@
    "nouislider": "^15.6.1",
    "plyr": "^3.7.2",
    "postcss": "^8.4.16",
-    "release-it": "^15.3.0",
-    "rollup": "^2.78.1",
+    "release-it": "^15.4.1",
+    "rollup": "^2.79.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.54.4",
+    "sass": "^1.54.7",
    "tinymce": "^6.1.2",
    "tom-select": "^2.1.0",
    "vinyl-buffer": "^1.0.1",
@@ -109,12 +109,12 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.91.0",
+    "@tabler/icons": "^1.91.1",
    "bootstrap": "5.2.0",
    "node-sass": "^7.0.1"
  },
  "peerDependencies": {
-    "apexcharts": "^3.35.4",
+    "apexcharts": "^3.35.5",
    "autosize": "^5.0.1",
    "choices.js": "^10.1.0",
    "countup.js": "^2.3.2",
@@ -0,0 +1,25 @@
+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+
+const themeStorageKey = 'tablerTheme'
+const defaultTheme = 'light'
+let selectedTheme
+
+// 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
+}
+
+document.body.classList.remove('theme-dark', 'theme-light');
+document.body.classList.add(`theme-${selectedTheme}`);
@@ -1,6 +1,5 @@
 // Setting items
 const items = {
-	'theme': { localStorage: 'tablerTheme', default: 'light' },
 	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
 	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
 	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
@@ -44,16 +43,6 @@ const toggleFormControls = (form) => {
 	}
 }

-// Update body classes
-const updateBodyClasses = () => {
-	document.body.classList.remove('theme-dark', 'theme-light');
-	document.body.classList.add(`theme-${config.theme}`);
-
-	// for (const [key, params] of Object.entries(items)) {
-	// 	document.body.setAttribute(`data-${key}`, config[key]);
-	// }
-}
-
 // Submit form
 const submitForm = (form) => {
 	// Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
 		config[key] = value
 	}

-	// Update body classes
-	updateBodyClasses();
-
 	window.dispatchEvent(new Event('resize'));

 	(new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
 // Parse url
 parseUrl()

-// Update body classes
-updateBodyClasses();
-
 // Elements
 const form = document.querySelector('#offcanvasSettings')

@@ -0,0 +1,17 @@
+export const prefix = 'tblr-'
+
+export const hexToRgba = (hex, opacity) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
+}
+
+export const getColor = (color, opacity = 1) => {
+  const c = getComputedStyle(document.documentElement).getPropertyValue(`--${prefix}${color}`).trim()
+
+  if (opacity !== 1) {
+	 return hexToRgba(c, opacity)
+  }
+
+  return c
+}
@@ -9,5 +9,7 @@ import './src/switch-icon';
 import './src/tab';
 import './src/toast';
 import * as bootstrap from 'bootstrap';
+import * as tabler from './src/tabler';

 window.bootstrap = bootstrap;
+window.tabler = tabler;
@@ -4,7 +4,7 @@ active-users-2:
  datetime: true
  series:
    - name: Mobile
-      color: blue
+      color: primary
      data: [ 4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430 ]
    - name: Desktop
      color: azure
@@ -20,13 +20,15 @@ demo-pie:
  legend: true
  series:
    - name: Direct
-      color: blue
+      color: primary
      data: 44
    - name: Affilliate
-      color: blue-300
+      color: primary
+      color-opacity: .8
      data: 55
    - name: E-mail
-      color: blue-100
+      color: primary
+      color-opacity: .6
      data: 12
    - name: Other
      color: gray-300
@@ -53,7 +55,7 @@ demo-bar:
      color: red
      data: [ 9, 7, 5, 8, 6, 9, 4 ]
    - name: Magical notebook
-      color: blue
+      color: primary
      data: [ 25, 12, 19, 32, 25, 24, 10 ]

 demo-area:
@@ -62,7 +64,7 @@ demo-area:
  datetime: true
  series:
    - name: series1
-      color: blue
+      color: primary
      data: [ 56, 40, 39, 47, 34, 48, 44 ]
    - name: series2
      color: purple
@@ -81,7 +83,7 @@ demo-line:
      color: green
      data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ]
    - name: Total Visits
-      color: blue
+      color: primary
      data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ]

 social-referrals:
@@ -111,13 +113,15 @@ mentions:
  series:
    - name: Web
      data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
-      color: blue
+      color: primary
    - name: Social
      data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
-      color: blue-300
+      color: primary
+      color-opacity: .8
    - name: Other
      data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
-      color: green-200
+      color: green
+      color-opacity: .8

 completion-tasks:
  demo: true
@@ -201,13 +205,15 @@ campaigns:
  sparkline: true
  series:
    - name: Total Sent
-      color: blue
+      color: primary
      data: 44
    - name: Reached
-      color: blue-300
+      color: primary
+      color-opacity: .8
      data: 36
    - name: Opened
-      color: blue-100
+      color: primary
+      color-opacity: .6
      data: 18

 tasks:
@@ -221,7 +227,7 @@ tasks:
  hide-tooltip: true
  series:
    - name: 'New'
-      color: blue
+      color: primary
      data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
    - name: 'Completed'
      color: lime
@@ -239,7 +245,7 @@ development-activity:
  datetime: true
  series:
    - name: 'Purchases'
-      color: blue
+      color: primary
      data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]

 uptime:
@@ -247,7 +253,7 @@ uptime:
  datetime: true
  series:
    - name: 'Uptime'
-      color: blue
+      color: primary
      data: [ 150, 160, 170, 161, 167, 162, 161, 152, 141, 144, 154, 166, 176, 187, 198, 210, 196, 207, 200, 187, 192, 204, 193, 204, 208, 196, 193, 178, 191, 204, 218, 211, 218, 216, 201, 197, 190, 179, 172, 158, 159, 147, 152, 152, 144, 137, 136, 123, 112, 99, 100, 95, 105, 116, 125, 124, 133, 129, 116, 119, 109, 114, 115, 111, 96, 104, 104, 102, 116, 126, 117, 130, 124, 126, 131, 143, 130, 116, 118, 122, 132, 126, 136, 123, 112, 116, 113, 113, 109, 99, 100, 95, 83, 79, 64, 79, 81, 94, 99, 97, 83, 71, 75, 69, 71, 75, 84, 90, 100, 96, 108, 102, 116, 112, 112, 102, 115, 120, 118, 118 ]

 uptime-incidents:
@@ -267,7 +273,7 @@ line:
      color: orange
      data: [2, 8, 6, 7, 14, 11]
    - name: Marketing
-      color: blue
+      color: primary
      data: [5, 15, 11, 15, 21, 25]
    - name: Sales
      color: green
@@ -283,7 +289,7 @@ line-stroke:
      color: orange
      data: [8, 10, 11, 12, 20, 27, 30]
    - name: Marketing
-      color: blue
+      color: primary
      data: [3, 16, 17, 19, 20, 30, 30]
    - name: Sales
      color: green
@@ -307,7 +313,7 @@ temperature:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  series:
    - name: Tokyo
-      color: blue
+      color: primary
      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    - name: London
      color: green
@@ -320,7 +326,7 @@ area:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
-      color: blue
+      color: primary
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
@@ -334,7 +340,7 @@ area-spline:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
-      color: blue
+      color: primary
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
@@ -349,7 +355,7 @@ area-spline-stacked:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
-      color: blue
+      color: primary
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
@@ -364,7 +370,7 @@ spline:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Hestavollane
-      color: blue
+      color: primary
      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
    - name: Vik
      color: green
@@ -376,16 +382,19 @@ pie:
  sparkline: true
  series:
    - name: A
-      color: blue-700
+      color: primary
      data: 63
    - name: B
-      color: blue
+      color: primary
+      color-opacity: .8
      data: 44
    - name: C
-      color: blue-300
+      color: primary
+      color-opacity: .6
      data: 12
    - name: D
-      color: blue-100
+      color: primary
+      color-opacity: .4
      data: 14

 donut:
@@ -396,7 +405,8 @@ donut:
      color: green
      data: 63
    - name: Minimum
-      color: green-300
+      color: green
+      color-opacity: .8
      data: 37


@@ -406,7 +416,7 @@ scatter:
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
-      color: blue
+      color: primary
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
@@ -432,7 +442,7 @@ combination:
      color: green
      data: [300, 200, 160, 400, 250, 250]
    - name: Sales
-      color: blue
+      color: primary
      data: [200, 130, 90, 240, 130, 220]

 revenue-bg:
@@ -451,7 +461,7 @@ new-clients:
  stroke-dash: [0, 3]
  series:
    - name: May
-      color: blue
+      color: primary
      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
    - name: April
      color: gray-600
@@ -1,145 +1,145 @@
-blue: '#206bc4'
-blue-100: '#d2e1f3'
-blue-200: '#a6c4e7'
-blue-300: '#79a6dc'
-blue-400: '#4d89d0'
-blue-500: '#206bc4'
-blue-600: '#1a569d'
-blue-700: '#134076'
-blue-800: '#0d2b4e'
-blue-900: '#061527'
-
-azure: '#45aaf2'
-azure-100: '#daeefc'
-azure-200: '#b5ddfa'
-azure-300: '#8fccf7'
-azure-400: '#6abbf5'
-azure-500: '#45aaf2'
-azure-600: '#3788c2'
-azure-700: '#296691'
-azure-800: '#1c4461'
-azure-900: '#0e2230'
-
-indigo: '#6574cd'
-indigo-100: '#e0e3f5'
-indigo-200: '#c1c7eb'
-indigo-300: '#a3ace1'
-indigo-400: '#8490d7'
-indigo-500: '#6574cd'
-indigo-600: '#515da4'
-indigo-700: '#3d467b'
-indigo-800: '#282e52'
-indigo-900: '#141729'
-
-purple: '#a55eea'
-purple-100: '#eddffb'
-purple-200: '#dbbff7'
-purple-300: '#c99ef2'
-purple-400: '#b77eee'
-purple-500: '#a55eea'
-purple-600: '#844bbb'
-purple-700: '#63388c'
-purple-800: '#42265e'
-purple-900: '#21132f'
-
-pink: '#f66d9b'
-pink-100: '#fde2eb'
-pink-200: '#fbc5d7'
-pink-300: '#faa7c3'
-pink-400: '#f88aaf'
-pink-500: '#f66d9b'
-pink-600: '#c5577c'
-pink-700: '#94415d'
-pink-800: '#622c3e'
-pink-900: '#31161f'
-
-red: '#cd201f'
-red-100: '#f5d2d2'
-red-200: '#eba6a5'
-red-300: '#e17979'
-red-400: '#d74d4c'
-red-500: '#cd201f'
-red-600: '#a41a19'
-red-700: '#7b1313'
-red-800: '#520d0c'
-red-900: '#290606'
-
-orange: '#ff922b'
-orange-100: '#ffe9d5'
-orange-200: '#ffd3aa'
-orange-300: '#ffbe80'
-orange-400: '#ffa855'
-orange-500: '#ff922b'
-orange-600: '#cc7522'
-orange-700: '#99581a'
-orange-800: '#663a11'
-orange-900: '#331d09'
-
-yellow: '#fab005'
-yellow-100: '#feefcd'
-yellow-200: '#fddf9b'
-yellow-300: '#fcd069'
-yellow-400: '#fbc037'
-yellow-500: '#fab005'
-yellow-600: '#c88d04'
-yellow-700: '#966a03'
-yellow-800: '#644602'
-yellow-900: '#322301'
-
-lime: '#94d82d'
-lime-100: '#eaf7d5'
-lime-200: '#d4efab'
-lime-300: '#bfe881'
-lime-400: '#a9e057'
-lime-500: '#94d82d'
-lime-600: '#76ad24'
-lime-700: '#59821b'
-lime-800: '#3b5612'
-lime-900: '#1e2b09'
-
-green: '#5eba00'
-green-100: '#dff1cc'
-green-200: '#bfe399'
-green-300: '#9ed666'
-green-400: '#7ec833'
-green-500: '#5eba00'
-green-600: '#4b9500'
-green-700: '#387000'
-green-800: '#264a00'
-green-900: '#132500'
-
-teal: '#2bcbba'
-teal-100: '#d5f5f1'
-teal-200: '#aaeae3'
-teal-300: '#80e0d6'
-teal-400: '#55d5c8'
-teal-500: '#2bcbba'
-teal-600: '#22a295'
-teal-700: '#1a7a70'
-teal-800: '#11514a'
-teal-900: '#092925'
-
-cyan: '#17a2b8'
-cyan-100: '#d1ecf1'
-cyan-200: '#a2dae3'
-cyan-300: '#74c7d4'
-cyan-400: '#45b5c6'
-cyan-500: '#17a2b8'
-cyan-600: '#128293'
-cyan-700: '#0e616e'
-cyan-800: '#09414a'
-cyan-900: '#052025'
-
-gray: '#cbcfd6'
-gray-100: '#f5f7fb'
-gray-200: '#f1f3f8'
-gray-300: '#e9ecf1'
-gray-400: '#dee1e7'
-gray-500: '#cbcfd6'
-gray-600: '#a8aeb7'
-gray-700: '#7a828f'
-gray-800: '#545d6d'
-gray-900: '#354052'
+#blue: '#206bc4'
+#blue-100: '#d2e1f3'
+#blue-200: '#a6c4e7'
+#blue-300: '#79a6dc'
+#blue-400: '#4d89d0'
+#blue-500: '#206bc4'
+#blue-600: '#1a569d'
+#blue-700: '#134076'
+#blue-800: '#0d2b4e'
+#blue-900: '#061527'
+#
+#azure: '#45aaf2'
+#azure-100: '#daeefc'
+#azure-200: '#b5ddfa'
+#azure-300: '#8fccf7'
+#azure-400: '#6abbf5'
+#azure-500: '#45aaf2'
+#azure-600: '#3788c2'
+#azure-700: '#296691'
+#azure-800: '#1c4461'
+#azure-900: '#0e2230'
+#
+#indigo: '#6574cd'
+#indigo-100: '#e0e3f5'
+#indigo-200: '#c1c7eb'
+#indigo-300: '#a3ace1'
+#indigo-400: '#8490d7'
+#indigo-500: '#6574cd'
+#indigo-600: '#515da4'
+#indigo-700: '#3d467b'
+#indigo-800: '#282e52'
+#indigo-900: '#141729'
+#
+#purple: '#a55eea'
+#purple-100: '#eddffb'
+#purple-200: '#dbbff7'
+#purple-300: '#c99ef2'
+#purple-400: '#b77eee'
+#purple-500: '#a55eea'
+#purple-600: '#844bbb'
+#purple-700: '#63388c'
+#purple-800: '#42265e'
+#purple-900: '#21132f'
+#
+#pink: '#f66d9b'
+#pink-100: '#fde2eb'
+#pink-200: '#fbc5d7'
+#pink-300: '#faa7c3'
+#pink-400: '#f88aaf'
+#pink-500: '#f66d9b'
+#pink-600: '#c5577c'
+#pink-700: '#94415d'
+#pink-800: '#622c3e'
+#pink-900: '#31161f'
+#
+#red: '#cd201f'
+#red-100: '#f5d2d2'
+#red-200: '#eba6a5'
+#red-300: '#e17979'
+#red-400: '#d74d4c'
+#red-500: '#cd201f'
+#red-600: '#a41a19'
+#red-700: '#7b1313'
+#red-800: '#520d0c'
+#red-900: '#290606'
+#
+#orange: '#ff922b'
+#orange-100: '#ffe9d5'
+#orange-200: '#ffd3aa'
+#orange-300: '#ffbe80'
+#orange-400: '#ffa855'
+#orange-500: '#ff922b'
+#orange-600: '#cc7522'
+#orange-700: '#99581a'
+#orange-800: '#663a11'
+#orange-900: '#331d09'
+#
+#yellow: '#fab005'
+#yellow-100: '#feefcd'
+#yellow-200: '#fddf9b'
+#yellow-300: '#fcd069'
+#yellow-400: '#fbc037'
+#yellow-500: '#fab005'
+#yellow-600: '#c88d04'
+#yellow-700: '#966a03'
+#yellow-800: '#644602'
+#yellow-900: '#322301'
+#
+#lime: '#94d82d'
+#lime-100: '#eaf7d5'
+#lime-200: '#d4efab'
+#lime-300: '#bfe881'
+#lime-400: '#a9e057'
+#lime-500: '#94d82d'
+#lime-600: '#76ad24'
+#lime-700: '#59821b'
+#lime-800: '#3b5612'
+#lime-900: '#1e2b09'
+#
+#green: '#5eba00'
+#green-100: '#dff1cc'
+#green-200: '#bfe399'
+#green-300: '#9ed666'
+#green-400: '#7ec833'
+#green-500: '#5eba00'
+#green-600: '#4b9500'
+#green-700: '#387000'
+#green-800: '#264a00'
+#green-900: '#132500'
+#
+#teal: '#2bcbba'
+#teal-100: '#d5f5f1'
+#teal-200: '#aaeae3'
+#teal-300: '#80e0d6'
+#teal-400: '#55d5c8'
+#teal-500: '#2bcbba'
+#teal-600: '#22a295'
+#teal-700: '#1a7a70'
+#teal-800: '#11514a'
+#teal-900: '#092925'
+#
+#cyan: '#17a2b8'
+#cyan-100: '#d1ecf1'
+#cyan-200: '#a2dae3'
+#cyan-300: '#74c7d4'
+#cyan-400: '#45b5c6'
+#cyan-500: '#17a2b8'
+#cyan-600: '#128293'
+#cyan-700: '#0e616e'
+#cyan-800: '#09414a'
+#cyan-900: '#052025'
+#
+#gray: '#cbcfd6'
+#gray-100: '#f5f7fb'
+#gray-200: '#f1f3f8'
+#gray-300: '#e9ecf1'
+#gray-400: '#dee1e7'
+#gray-500: '#cbcfd6'
+#gray-600: '#a8aeb7'
+#gray-700: '#7a828f'
+#gray-800: '#545d6d'
+#gray-900: '#354052'

 border-color: 'rgba(110, 117, 130, 0.2)'
 text-muted: '#6e7582'
@@ -3408,12 +3408,11 @@ brand-monday: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
  icon-tabler-brand-monday" width="24" height="24" viewBox="0 0 24 24"
  stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
-  fill="none"/><circle fill="#D8D8D8" cx="19.5" cy="15.5" r="1.5" /><path
-  d="M9.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305
-  .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z"
-  /><path d="M16.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749
-  -1.305 .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365
-  -.876z" /></svg>
+  fill="none"/><circle cx="19.5" cy="15.5" r="1.5" /><path d="M9.5 7a1.5 1.5 0 0
+  1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0 0 1
+  -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" /><path d="M16.5 7a1.5
+  1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0
+  0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" /></svg>
 brand-netbeans: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
  icon-tabler-brand-netbeans" width="24" height="24" viewBox="0 0 24 24"
  stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -3578,7 +3577,7 @@ brand-react: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
  fill="none"/><ellipse cx="12" cy="12" rx="4" ry="10" /><ellipse
  transform="rotate(60 12 12)" cx="12" cy="12" rx="4" ry="10" /><ellipse
  transform="rotate(-60 12 12)" cx="12" cy="12" rx="4" ry="10" /><circle
-  fill="#D8D8D8" cx="12" cy="12" r="1" /></svg>
+  fill="currentColor" cx="12" cy="12" r="1" /></svg>
 brand-reddit: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
  icon-tabler-brand-reddit" width="24" height="24" viewBox="0 0 24 24"
  stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -5101,9 +5100,9 @@ chess: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
  stroke="currentColor" fill="none" stroke-linecap="round"
  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
  fill="none"/><path d="M12 3a3 3 0 0 1 3 3c0 1.113 -.6 2.482 -1.5 3l1.5
-  7h-6l1.5 -7c-.9 -.518 -1.5 -1.887 -1.5 -3a3 3 0 0 1 3 -3z" /><path
-  fill="#D8D8D8" d="M8 9h8" /><path d="M9 16l-2.316 .772a1 1 0 0 0 -.684
-  .949v2.279h12v-2.28a1 1 0 0 0 -.684 -.948l-2.316 -.772h-6z" /></svg>
+  7h-6l1.5 -7c-.9 -.518 -1.5 -1.887 -1.5 -3a3 3 0 0 1 3 -3z" /><path d="M8 9h8"
+  /><path d="M9 16l-2.316 .772a1 1 0 0 0 -.684 .949v2.279h12v-2.28a1 1 0 0 0
+  -.684 -.948l-2.316 -.772h-6z" /></svg>
 chevron-down-left: <svg xmlns="http://www.w3.org/2000/svg" class="icon
  icon-tabler icon-tabler-chevron-down-left" width="24" height="24" viewBox="0 0
  24 24" stroke-width="2" stroke="currentColor" fill="none"
@@ -1,13 +1,13 @@
 world:
  title: World map
  map: world
-  color: blue
+  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 }'

 world-merc:
  title: World map
  map: world_merc
-  color: blue
+  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 }'


@@ -39,7 +39,7 @@ world-markers:
 world-lines:
  title: Map with markers
  map: world_merc
-  color: blue
+  color: primary
  lines:
    - from: Russia
      to: Greenland
@@ -63,7 +63,7 @@ Customize the color of the avatars' background. You can click [here]({% docs_url
 {% include ui/avatar.html placeholder="AB" color="green" %}
 {% include ui/avatar.html placeholder="CD" color="red" %}
 {% include ui/avatar.html placeholder="EF" color="yellow" %}
-{% include ui/avatar.html placeholder="GH" color="blue" %}
+{% include ui/avatar.html placeholder="GH" color="primary" %}
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
@@ -10,7 +10,7 @@ banner: icons
 To replace the icons, all should add `active` class to the `switch-icon` component.

 {% capture code %}
-{% include ui/switch-icon.html icon="circle" icon-b="square" icon-b-color="blue"  %}
+{% include ui/switch-icon.html icon="circle" icon-b="square" icon-b-color="primary"  %}
 {% endcapture %}
 {% include example.html code=code wrapper="d-flex space-x-2" %}

@@ -19,7 +19,7 @@ To replace the icons, all should add `active` class to the `switch-icon` compone
 You can also add a fancy animation to add variety to your button. See demo below:

 {% capture code %}
-{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="blue"  %}
+{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="primary"  %}
 {% include ui/switch-icon.html variant="fade" icon-b-class="icon-filled"  %}
 {% include ui/switch-icon.html variant="scale" icon="star" icon-b-class="icon-filled" icon-b-color="yellow" %}
 {% include ui/switch-icon.html variant="flip" icon="thumb-up" icon-b-color="facebook" %}
@@ -11,6 +11,6 @@
 			<div>Conversion rate</div>
 			<div class="ms-auto">{% include ui/trending.html value=7 %}</div>
 		</div>
-		{% include ui/progress.html value=75 color="blue" size="sm" %}
+		{% include ui/progress.html value=75 color="primary" size="sm" %}
 	</div>
 </div>
@@ -4,6 +4,6 @@
 		{% if include.title %}
 			<h3 class="card-title">{{ include.title }}</h3>
 		{% endif %}
-		{% include ui/map-vector.html map-id=map color="blue" ratio="21x9" %}
+		{% include ui/map-vector.html map-id=map color="primary" ratio="21x9" %}
 	</div>
 </div>
@@ -24,9 +24,9 @@
 				</td>
 				<td class="text-muted">{{ page.visitors | format_number }}</td>
 				<td class="text-muted">{{ page.unique | format_number }}</td>
-				<td class="text-muted">{{ page.bounce-rate }}</td>
+				<td class="text-muted">{{ page.bounce }}</td>
 				<td class="text-end w-1">
-					{% include ui/chart-sparkline.html type="line" data=data id=id small=true %}
+					{% include ui/chart-sparkline.html type="line" data=data id=id small=true color="primary" %}
 				</td>
 			</tr>
 			{% endfor %}
@@ -53,7 +53,7 @@
 				<td class="text-center">
 					{% assign percentage = forloop.index | random_number: 0, 100 %}
 <!--					<div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
-<!--					     data-thickness="3" data-color="blue">-->
+<!--					     data-thickness="3" data-color="primary">-->
 <!--						<div class="chart-circle-value">{{ percentage }}%</div>-->
 <!--					</div>-->
 					{% include ui/chart-sparkline.html percentage=percentage type="donut" %}
@@ -19,7 +19,7 @@
 			{{ item.title }}

 			{% if item.show-version %}
-				<span class="badge bg-blue-lt ms-auto">{{ site.data.package.version }}</span>
+				<span class="badge bg-primary-lt ms-auto">{{ site.data.package.version }}</span>
 			{% endif %}

 			{% if item.children %}
@@ -16,7 +16,7 @@
 	<div class="col-12">
 		<div class="row row-cards">
 			<div class="col-sm-6 col-lg-3">
-				{% include cards/small-stats.html color="blue" icon="currency-dollar" title="132 Sales" description="12 waiting payments" %}
+				{% include cards/small-stats.html color="primary" icon="currency-dollar" title="132 Sales" description="12 waiting payments" %}
 			</div>
 			<div class="col-sm-6 col-lg-3">
 				{% include cards/small-stats.html color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" %}
@@ -8,77 +8,84 @@
 {% capture script %}
 {% assign colors = include.colors | default: 1 %}
 <script>
-	var options = {
-		chart: {
-			height: {{ height | times: 16 }},
-			type: "heatmap",
-			toolbar: {
-				show: false,
-			},
-		},
-		dataLabels: {
-			enabled: {% if include.labels %}true{% else %}false{% endif %}
-		},
-		{% if include.scale %}
-		plotOptions: {
-			heatmap: {
-				enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
-				colorScale: {
-					ranges: [{
-						from: 0,
-						to: 20,
-						name: "Low",
-						color: "{{ "green" | tabler_color }}"
-					}, {
-						from: 21,
-						to: 50,
-						name: "Medium",
-						color: "{{ "blue" | tabler_color }}"
-					}, {
-						from: 51,
-						to: 75,
-						name: "High",
-						color: "{{ "yellow" | tabler_color }}"
-					}, {
-						from: 76,
-						to: 100,
-						name: "Extreme",
-						color: "{{ "red" | tabler_color }}"
-					}]
-				}
-			}
-		},
-		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
+	 // @formatter:off
+	 document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
 		{% endif %}
-		series: [
-		{% for i in site.months-short limit: 12 %}
-			{% assign month-i = forloop.index %}
-			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },{% endfor %}
-		],
-		xaxis: {
-			type: "category"
-		},
-		legend: {
-			{% if include.legend %}
-			show: true,
-			position: 'bottom',
-			offsetY: 8,
-			markers: {
-				width: 10,
-				height: 10,
-				radius: 100,
+
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+			chart: {
+				height: {{ height | times: 16 }},
+				type: "heatmap",
+				toolbar: {
+					show: false,
+				},
 			},
-			itemMargin: {
-				horizontal: 8,
+			dataLabels: {
+				enabled: {% if include.labels %}true{% else %}false{% endif %}
+			},
+			{% if include.scale %}
+			plotOptions: {
+				heatmap: {
+					enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
+					colorScale: {
+						ranges: [{
+							from: 0,
+							to: 20,
+							name: "Low",
+							color: tabler.getColor("green")
+						}, {
+							from: 21,
+							to: 50,
+							name: "Medium",
+							color: tabler.getColor("blue")
+						}, {
+							from: 51,
+							to: 75,
+							name: "High",
+							color: tabler.getColor("yellow")
+						}, {
+							from: 76,
+							to: 100,
+							name: "Extreme",
+							color: tabler.getColor("red")
+						}]
+					}
+	 			}
 			},
 			{% else %}
-			show: false,
+			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
 			{% endif %}
-		},
-	};
-
-	(new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render();
+			series: [
+				{% for i in site.months-short limit: 12 %}
+				{% assign month-i = forloop.index %}
+		  		{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
+				{% endfor %}
+			],
+			xaxis: {
+				type: "category"
+			},
+			legend: {
+				{% if include.legend %}
+				show: true,
+				position: 'bottom',
+				offsetY: 8,
+				markers: {
+					width: 10,
+					height: 10,
+					radius: 100,
+				},
+				itemMargin: {
+					horizontal: 8,
+				},
+				{% else %}
+				show: false,
+				{% endif %}
+			},
+		})).render();
+	 });
+	 // @formatter:on
 </script>
 {% endcapture %}

@@ -71,11 +71,11 @@
 				{% endif %}

 				{% if type == 'donut' %}
-				colors: ["{{ color | default: 'blue' | tabler_color }}"],
+				colors: [tabler.getColor("{{ color | default: 'primary' }}")],
 				series: [{{ data }}],
 				{% else %}
 				series: [{
-					color: "{{ color | default: 'blue' | tabler_color }}",
+					color: tabler.getColor("{{ color | default: 'primary' }}"),
 					data: [{{ data }}]
 				}],
 				{% endif %}
@@ -195,7 +195,7 @@
 			{% endif %}

 			{% if data.series %}
-			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
+			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 %}],
 			{% endif %}

 			legend: {
@@ -37,7 +37,7 @@
 				{% if data.values %}
 				// -------- Series --------
 				visualizeData: {
-					scale: ['#F8FAFC', '{{ data.color | tabler_color }}'],
+					scale: ['#F8FAFC', tabler.getColor('{{ data.color }}')],
 					values: {{ data.values }},
 				},
 				{% endif %}
@@ -57,11 +57,11 @@
 						opacity: 1,
 						strokeWidth: 3,
 						stokeOpacity: .5,
-						fill: '{{ color | tabler_color }}'
+						fill: tabler.getColor('{{ color }}')
 					},
 					hover: {
-						fill: '{{ color | tabler_color }}',
-						stroke: '{{ color | tabler_color }}'
+						fill: tabler.getColor('{{ color }}'),
+						stroke: tabler.getColor('{{ color }}')
 					}
 				},
 				markerLabelStyle: {
@@ -28,7 +28,7 @@

 			{% for marker in data.markers %}

-			new mapboxgl.Marker({ color: "{{ 'blue' | tabler_color }}" }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
+			new mapboxgl.Marker({ color: tabler.getColor("{{ 'primary' }}") }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
 			{% endfor %}

 			{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
@@ -40,7 +40,7 @@
 					{% elsif include.indicator == 'label' %}
 						{% capture indicator-html %}
 							{% assign label = option[1].label %}
-							<span class="badge bg-blue-lt">{{ label }}</span>
+							<span class="badge bg-primary-lt">{{ label }}</span>
 						{% endcapture %}
 					{% endif %}

@@ -31,18 +31,19 @@
 		{% include layout/og.html %}
 	{% endif %}

+	{% include layout/css.html %}
+
 	<style>
 		@import url('https://rsms.me/inter/inter.css');
 		:root {
-			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif !important;
+			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
 		}
 	</style>
-
-	{% include layout/css.html %}
 </head>

 {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
 <body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
+<script src="{{ site.base }}/dist/js/demo-theme{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}"></script>

 	{{ content }}

@@ -26,7 +26,7 @@ page-header: Documentation
 							{% if page.bootstrap-link %}
 							<p class="ms-auto">
 								<a href="https://getbootstrap.com/docs/5.0/{{ page.bootstrap-link }}" target="_blank" class="d-flex align-items-center">
-									{% include ui/icon.html icon="external-link" color="blue" class="pe-1" %}
+									{% include ui/icon.html icon="external-link" color="primary" class="pe-1" %}
 									Bootstrap documentation
 								</a>
 							</p>
@@ -91,13 +91,13 @@ module Jekyll
      object
    end

-    def tabler_color(color, variation = false)
-      if variation
-        color = color + '-' + variation.to_s
-      end
-
-      Jekyll.sites.first.data['colors'][color]
-    end
+    # def tabler_color(color, variation = false)
+    #   if variation
+    #     color = color + '-' + variation.to_s
+    #   end
+    #
+    #   Jekyll.sites.first.data['colors'][color]
+    # end

    def seconds_to_minutes(seconds)
      seconds = seconds.to_i.round
@@ -1,6 +1,7 @@
 ---
 title: Activity
 page-header: Activity
+menu: extra.activity
 ---

 <div class="row justify-content-center">
@@ -37,7 +37,7 @@ libs: apexcharts
 	</div>

 	<div class="col-md-6 col-xl-3">
-		{% include cards/small-stats.html id="currency" icon="currency-dollar" color="blue" title="132 Sales" description="12 waiting payments" %}
+		{% include cards/small-stats.html id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" %}
 	</div>
 	<div class="col-md-6 col-xl-3">
 		{% include cards/small-stats.html id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" %}
@@ -49,7 +49,7 @@ libs: apexcharts
 		{% include cards/small-stats.html id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" %}
 	</div>

-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="sales" chart-position="left" chart-type="donut" chart-data="56" color="blue" title="132 Sales" description="12 waiting payments" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="sales" chart-position="left" chart-type="donut" chart-data="56" color="primary" title="132 Sales" description="12 waiting payments" %}
 	</div>
 	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
 	</div>
@@ -47,29 +47,29 @@
  // Override bootstrap core
 }

-//@mixin button-variant(
-//  $background: null,
-//  $border: null,
-//  $color: null,
-//  $hover-background: null,
-//  $hover-border: null,
-//  $hover-color: null,
-//  $active-background: null,
-//  $active-border: null,
-//  $active-color: null,
-//  $disabled-background: null,
-//  $disabled-border: null,
-//  $disabled-color: null
-//) {
-//  // Override bootstrap core
-//}
-//
-//@mixin button-outline-variant(
-//  $color: null,
-//  $color-hover: null,
-//  $active-background: null,
-//  $active-border: null,
-//  $active-color: null
-//) {
-//  // Override bootstrap core
-//}
+@mixin button-variant(
+  $background: null,
+  $border: null,
+  $color: null,
+  $hover-background: null,
+  $hover-border: null,
+  $hover-color: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null,
+  $disabled-background: null,
+  $disabled-border: null,
+  $disabled-color: null
+) {
+  // Override bootstrap core
+}
+
+@mixin button-outline-variant(
+  $color: null,
+  $color-hover: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null
+) {
+  // Override bootstrap core
+}
@@ -1,8 +1,8 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));

 $border-values: (
-  null: $border-width solid $border-color-transparent,
-  wide: $border-width-wide solid $border-color-transparent,
+  null: $border-width solid $border-color-translucent,
+  wide: $border-width-wide solid $border-color-translucent,
  0: 0,
 );

@@ -97,7 +97,7 @@ $gray-800: #1d273b !default;
 $gray-900: #0f172a !default;

 $light: $gray-50 !default;
-$dark: $gray-800 !default;
+$dark: $gray-900 !default;

 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
@@ -125,19 +125,23 @@ $text-muted-light: mix($body-color, #ffffff, percentage($text-muted-light-opacit
 $text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)) !default;

 $border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
-$border-color-transparent: rgba($text-muted, $border-opacity) !default;
+$border-color-translucent: rgba($text-muted, $border-opacity) !default;

 $border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
-$border-color-light-transparent: rgba($text-muted, $border-light-opacity) !default;
+$border-color-light-translucent: rgba($text-muted, $border-light-opacity) !default;

 $border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
-$border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
+$border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default;

 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
-$border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
+$border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;

 $active-bg: rgba($blue, .04) !default;
 $hover-bg: rgba($text-muted, .04) !default;
+$disabled-bg: var(--#{$prefix}gray-100) !default;
+
+$link-color: var(--#{$prefix}primary) !default;
+$link-hover-color: var(--#{$prefix}primary-darken) !default;

 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -148,7 +152,7 @@ $danger: $red !default;

 $theme-colors: (
  "primary": $primary,
-  "secondary": $secondary,
+  "secondary": $text-muted,
  "success": $success,
  "info": $info,
  "warning": $warning,
@@ -222,13 +226,17 @@ $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;

+// Icons
+$icon-color: var(--#{$prefix}gray-500) !default;
+
 // Code
-$code-color: $text-muted-dark !default;
+$code-color: var(--#{$prefix}gray-600) !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
+$code-bg: var(--#{$prefix}gray-100) !default;

 $pre-padding: 1rem !default;
-$pre-bg: $gray-100 !default;
+$pre-bg: $code-bg !default;

 // Avatars
 $avatar-size: 2.5rem !default;
@@ -240,7 +248,7 @@ $avatar-sizes: (
  "xl": 7rem,
  "2xl": 11rem,
 ) !default;
-$avatar-border-radius: $border-radius !default;
+$avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size;

 $link-decoration: none !default;
@@ -318,7 +326,7 @@ $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6
 //accordion
 $accordion-bg: transparent !default;
 $accordion-color: var(--#{$prefix}body-color) !default;
-$accordion-border-color: $border-color-transparent !default;
+$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
 $accordion-icon-width: 1rem !default;

 $accordion-button-bg: transparent !default;
@@ -332,11 +340,11 @@ $alert-padding-y: 1rem !default;
 $alert-link-font-weight: $font-weight-bold !default;

 $alert-border-width: 1px !default;
-$alert-border-color: $border-color-transparent !default;
+$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;

 //breadcrumb
-$breadcrumb-divider-color: $text-muted !default;
+$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
 $breadcrumb-active-color: inherit !default;

 $breadcrumb-variants: (
@@ -356,6 +364,7 @@ $badge-empty-size: .5rem !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-family) !default;
 $input-btn-padding-y: .5rem - .0625rem !default;

 $input-btn-font-size-sm: $h5-font-size !default;
@@ -368,16 +377,18 @@ $input-btn-padding-y-lg: .5rem !default;

 $input-btn-focus-width: .25rem !default;

+// inputs
 $input-height: null !default;
 $input-height-sm: null !default;
 $input-height-lg: null !default;
+$input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: inherit !default;
 $input-focus-color: inherit !default;

-//buttons
+// buttons
 $btn-padding-x: 1rem !default;
 $btn-font-weight: $font-weight-medium !default;
-$btn-border-radius: $border-radius !default;
+$btn-border-radius: var(--#{$prefix}border-radius) !default;

 //cards
 $card-title-spacer-y: 1.25rem !default;
@@ -386,9 +397,9 @@ $card-bg: $light !default;
 $card-bg-hover: $white !default;
 $card-color: $dark !default;

-$card-border-width: $border-width !default;
-$card-border-color: $border-color-transparent !default;
-$card-border-radius: $border-radius !default;
+$card-border-width: var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color) !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;

 $card-spacer-x: 1.25rem !default;
 $card-spacer-y: 1rem !default;
@@ -432,7 +443,7 @@ $datagrid-item-width: 15rem !default;
 $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
 $dropdown-font-size: $font-size-base !default;
-$dropdown-border-color: $border-color-transparent !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
 $dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-padding-y: .25rem !default;
 $dropdown-link-color: inherit !default;
@@ -444,7 +455,7 @@ $dropdown-max-width: 25rem !default;

 $dropdown-scrollable-height: 13rem !default;

-$dropdown-link-active-color: $primary !default;
+$dropdown-link-active-color: var(--#{$prefix}primary)  !default;
 $dropdown-link-active-bg: $active-bg !default;


@@ -452,9 +463,10 @@ $dropdown-link-active-bg: $active-bg !default;
 $loader-size: 2.5rem !default;

 //lists
-$list-group-header-bg: $light !default;
+$list-group-header-bg: var(--#{$prefix}light) !default;
+$list-group-header-color: var(--#{$prefix}muted) !default;

-$list-group-border-color: $border-color !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
 $list-group-item-padding-x: $card-cap-padding-x !default;

@@ -467,12 +479,12 @@ $modal-fade-transform: translate(0, -1rem) !default;

 $modal-content-border-color: transparent !default;
 $modal-content-bg: $gray-50 !default;
-$modal-content-border-radius: $border-radius !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius) !default;

 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
 $modal-header-border-width: 1px !default;
-$modal-header-border-color: $border-color !default;
+$modal-header-border-color: var(--#{$prefix}border-color) !default;
 $modal-header-bg: $white !default;
 $modal-inner-padding: 1.5rem !default;
 $modal-footer-border-width: 0 !default;
@@ -486,17 +498,19 @@ $modal-md: 540px !default;
 $modal-sm: 380px !default;

 //nav
-$nav-link-color: inherit !default;
 $nav-link-padding-y: .5rem !default;
 $nav-link-padding-x: .75rem !default;
+$nav-link-color: inherit !default;
+$nav-link-icon-size: $icon-size !default;
+$nav-link-icon-color: var(--#{$prefix}icon-color) !default;

-$nav-pills-link-active-color: $primary !default;
+$nav-pills-link-active-color: var(--#{$prefix}primary)  !default;
 $nav-pills-link-active-bg: $active-bg !default;

-$nav-bordered-border-color: $border-color !default;
-$nav-bordered-border-width: $border-width !default;
-$nav-bordered-link-active-color: $primary !default;
-$nav-bordered-link-active-border-color: $primary !default;
+$nav-bordered-border-color: var(--#{$prefix}border-color) !default;
+$nav-bordered-border-width: var(--#{$prefix}border-width) !default;
+$nav-bordered-link-active-color: var(--#{$prefix}primary)  !default;
+$nav-bordered-link-active-border-color: var(--#{$prefix}primary)  !default;
 $nav-bordered-link-active-border-width: 2 * $border-width !default;
 $nav-bordered-margin-x: 1.25rem !default;

@@ -505,19 +519,19 @@ $nav-bordered-margin-x: 1.25rem !default;
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: .25rem !default;

-$navbar-light-color: $body-color !default;
-$navbar-light-brand-color: $body-color !default;
-$navbar-light-border-color: $border-color-transparent !default;
-$navbar-light-active-color: $body-color !default;
+$navbar-border-width: var(--#{$prefix}border-width) !default;
+$navbar-border-color: var(--#{$prefix}border-color) !default;
+
+$navbar-light-color: var(--#{$prefix}body-color) !default;
+$navbar-light-brand-color: var(--#{$prefix}body-color) !default;
+$navbar-light-active-color: var(--#{$prefix}body-color)color !default;
 $navbar-light-disabled-color: rgba($body-color, .3) !default;

 $navbar-dark-color: rgba($white, $text-muted-opacity) !default;
 $navbar-dark-brand-color: $white !default;
-$navbar-dark-border-color: $border-color-transparent !default;
 $navbar-dark-active-color: $white !default;
 $navbar-dark-disabled-color: rgba($white, .3) !default;

-
 $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
@@ -532,30 +546,35 @@ $navbar-toggler-focus-width: 0 !default;

 $navbar-nav-link-padding-x: $nav-link-padding-x !default;

+$navbar-active-border-color: var(--#{$prefix}primary) !default;
+
 $navbar-overlap-height: 9rem !default;

 //sidebar
 $sidebar-width: 15rem !default;

 //popover
-$popover-border-color: $border-color !default;
+$popover-border-color: var(--#{$prefix}border-color) !default;

 //footer
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
-$footer-border-color: $border-color !default;
-$footer-border-color: $border-color !default;
+$footer-border-color: var(--#{$prefix}border-color) !default;
+$footer-color: var(--#{$prefix}muted) !default;


 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
 $pagination-padding-x: .25rem !default;
-$pagination-color: $text-muted !default;
+$pagination-color: var(--#{$prefix}muted) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;

+$pagination-active-bg: var(--#{$prefix}primary) !default;
+$pagination-active-border-color: var(--#{$prefix}primary) !default;
+
 //statuses
 $status-dot-size: .5rem !default;
 $status-height: 1.5rem !default;
@@ -570,32 +589,35 @@ $spinner-height: 1.5rem !default;
 $spinner-width-sm: 1rem !default;
 $spinner-height-sm: 1rem !default;
 $spinner-border-width: 2px !default;
+$spinner-border-width-sm: 1px !default;

 //tables
 $table-bg-scale-dark: 40% !default;
 $table-color: inherit !default;
 $table-cell-padding-x: .75rem !default;
 $table-cell-padding-y: .75rem !default;
-$table-border-color: $border-color-transparent !default;
-$table-th-border-color: $border-color-transparent !default;
+$table-border-color: var(--#{$prefix}border-color-translucent) !default;
+$table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: .5rem !default;
-$table-th-color: $text-muted !default;
+$table-th-color: var(--#{$prefix}muted) !default;
 $table-th-bg: var(--#{$prefix}gray-50) !default;
 $table-striped-order: even !default;
-$table-striped-bg: var(--#{$prefix}border-color-light) !default;
-$table-group-separator-color: $border-color-transparent !default;
+$table-striped-bg: var(--#{$prefix}gray-50) !default;
+$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;

 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
 $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;

 //toasts
-$toast-border-color: $border-color !default;
-$toast-header-color: $text-muted !default;
+$toast-border-color: var(--#{$prefix}border-color) !default;
+$toast-header-color: var(--#{$prefix}muted) !default;

 //progress
-$progress-bg: $border-color !default;
+$progress-bg: var(--#{$prefix}gray-200) !default;
+$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-bar-bg: var(--#{$prefix}primary) !default;
 $progress-height: .5rem !default;

 //ribbons
@@ -603,7 +625,7 @@ $ribbon-margin: .25rem !default;


 $list-group-bg: inherit !default;
-$list-group-border-color: $border-color !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-action-color: inherit !default;
 $list-group-hover-bg: $hover-bg !default;
 $list-group-active-bg: $active-bg !default;
@@ -611,15 +633,15 @@ $list-group-active-border-color: $list-group-border-color !default;
 $list-group-active-color: inherit !default;

 $input-bg: $white !default;
-$input-disabled-bg: $gray-50 !default;
-$input-border-color: $border-color-dark !default;
-$input-border-color-transparent: $border-color-dark-transparent !default;
+$input-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-muted-light !default;

 $input-group-addon-bg: $light !default;
-$input-group-addon-color: $text-muted !default;
+$input-group-addon-color: var(--#{$prefix}muted) !default;

-$input-border-radius: $border-radius !default;
+$input-border-radius: var(--#{$prefix}border-radius) !default;


 //Forms
@@ -627,9 +649,10 @@ $form-check-margin-bottom: .5rem !default;
 $form-check-input-width: 1rem !default;
 $form-check-padding-start: $form-check-input-width + .5rem !default;
 $form-check-input-bg: $white !default;
-$form-check-input-border: 1px solid $input-border-color-transparent !default;
-$form-check-input-border-radius: $border-radius !default;
+$form-check-input-border: 1px solid $input-border-color-translucent !default;
+$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-checked-bg-size: 1rem !default;
+$form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;

 $form-check-input-checked-color: $white !default;
 $form-check-input-checked-bg-repeat: repeat !default;
@@ -637,7 +660,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !default;

-$form-check-input-checked-border-color: $input-border-color-transparent !default;
+$form-check-input-checked-border-color: $input-border-color-translucent !default;

 $form-check-label-disabled-opacity: $text-muted-opacity;

@@ -650,8 +673,9 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;

 $form-range-track-height: .25rem !default;
-$form-range-track-bg: var(--#{$prefix}bg-100) !default;
-$form-range-thumb-border: 2px solid $form-range-track-bg !default;
+$form-range-track-bg: var(--#{$prefix}gray-200) !default;
+$form-range-thumb-border: 2px solid $white !default;
+$form-range-thumb-bg: var(--#{$prefix}primary) !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;

@@ -663,14 +687,22 @@ $form-label-font-weight: $font-weight-medium !default;

 $caret-width: .36em !default;

+// Legend
+$legend-bg: var(--#{$prefix}gray-50) !default;
+$legend-size: .75em !default;
+$legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
+
 //Flags
+$flag-border-size: var(--#{$prefix}border-size) !default;
+$flag-border-color: var(--#{$prefix}border-color) !default;
+$flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;

 //Payments
 $payment-sizes: $avatar-sizes !default;

 // Offcanvas
-$offcanvas-border-color: $border-color-transparent !default;
+$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;

 // Placeholder
 $placeholder-opacity-min: .1 !default;
@@ -21,7 +21,7 @@ body.no-transitions * {
  width: 100%;
  position: relative;
  top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1rem !important;
 }

 .demo-icon-preview {
@@ -11,7 +11,7 @@ pre.highlight,
  max-height: 30rem;
  margin: 1.5rem 0;
  overflow: auto;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
  @include scrollbar;
 }

@@ -3,22 +3,20 @@
  font-size: 16px;
  height: 100%;

-  @each $name, $color in $gray-colors {
+  @each $name, $color in $theme-colors {
    --#{$prefix}#{$name}: #{$color};
-  }
-
-  @each $name, $color in $gray-colors {
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-light: #{theme-color-lighter($color)};
+    //--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
  }

  --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-bg-rgb: #{to-rgb($card-bg)};

  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-rgb: #{to-rgb($border-color)};
-
  --#{$prefix}border-color-light: #{$border-color-light};
-  --#{$prefix}border-color-light-rgb: #{to-rgb($border-color-light)};
+
+  --#{$prefix}icon-color: #{$icon-color};
+  --#{$prefix}disabled-bg: #{$disabled-bg};
 }

 body {
@@ -2,7 +2,7 @@
  border-top: 1px solid $footer-border-color;
  background-color: $footer-bg;
  padding: $footer-padding-y 0;
-  color: $text-muted;
+  color: $footer-color;
  margin-top: auto;
 }

@@ -143,6 +143,8 @@
 Navbar
 */
 .navbar {
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
  align-items: stretch;
  min-height: $navbar-height;

@@ -173,7 +175,7 @@ Navbar
      min-width: 2rem;
      min-height: 2rem;
      justify-content: center;
-      border-radius: $border-radius;
+      border-radius: var(--#{$prefix}border-radius);

      .badge {
        position: absolute;
@@ -226,16 +228,16 @@ Navbar
              left: 0;
              right: 0;
              bottom: -.25rem;
-              border: 0 solid $primary;
+              border: 0 solid var(--#{$prefix}navbar-active-border-color);
              border-bottom-width: 2px;
            }
          }

          &.navbar-vertical {
-            box-shadow: inset -1px 0 0 0 $navbar-light-border-color;
+            box-shadow: inset calc(-1 * #{$navbar-border-width}) 0 0 0 var(--#{$prefix}navbar-border-color);

            &.navbar-right {
-              box-shadow: inset 1px 0 0 0 $navbar-light-border-color;
+              box-shadow: inset calc(1 * #{$navbar-border-width}) 0 0 0 var(--#{$prefix}navbar-border-color);
            }
          }
        }
@@ -336,7 +338,7 @@ Navbar toggler
 Navbar light
 */
 .navbar-light {
-  box-shadow: inset 0 -1px 0 0 $navbar-light-border-color;
+  box-shadow: inset 0 calc(-1 * #{$navbar-border-width}) 0 0 var(--#{$prefix}navbar-border-color);
  background-color: $white;
 }

@@ -85,7 +85,7 @@
 }

 .page-header-border {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: 1px solid $border-color-translucent;
  padding-bottom: $content-padding-y;
 }

@@ -94,8 +94,8 @@
  }

  &:hover {
-    border-color: $primary;
-    color: $primary;
+    border-color: var(--#{$prefix}primary);
+    color: var(--#{$prefix}primary);
    text-decoration: none;
  }
 }
@@ -13,15 +13,6 @@
  justify-content: center;
  white-space: nowrap;

-  //&:hover {
-  //  color: var(--#{$prefix}btn-color-text);
-  //  border-color: rgba(var(--#{$prefix}btn-color-text-rgb), #{$border-active-opacity});
-  //}
-  //
-  //&:focus:not([disabled]):not(.disabled) {
-  //  border-color: var(--#{$prefix}btn-color, #{$primary});
-  //}
-
  .icon {
    width: var(--#{$prefix}btn-icon-size);
    height: var(--#{$prefix}btn-icon-size);
@@ -73,6 +64,10 @@
  .btn-#{$color} {
    --#{$prefix}btn-border-color: transparent;
    --#{$prefix}btn-color: #{color-contrast($value)};
+    --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
+    --#{$prefix}btn-hover-color: #{color-contrast($value)};
+    --#{$prefix}btn-hover-border-color: transparent;
  }
 }

@@ -193,7 +188,7 @@
  height: 2rem;
  align-items: center;
  justify-content: center;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);

  &:after {
    content: none;
@@ -211,7 +206,7 @@
  }

  &.show {
-    color: $primary;
+    color: var(--#{$prefix}primary);
  }

  .icon {
@@ -2,7 +2,7 @@
  display: block;
  font-size: $font-size-sm;
  border: 1px solid $border-color;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }

 .calendar-nav {
@@ -58,7 +58,7 @@
    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);

    &:hover {
-      color: $primary;
+      color: var(--#{$prefix}primary);
      text-decoration: none;
      background: #fefeff;
      border-color: $border-color;
@@ -66,7 +66,7 @@
  }

  .date-today {
-    color: $primary;
+    color: var(--#{$prefix}primary);
    border-color: $border-color;
  }
 }
@@ -89,8 +89,8 @@
  &.range-end {
    .date-item {
      color: $white;
-      background: $primary;
-      border-color: $primary;
+      background: var(--#{$prefix}primary);
+      border-color: var(--#{$prefix}primary);
    }
  }

@@ -120,7 +120,7 @@
    bottom: -1px;
    left: -1px;
    content: "";
-    border: 1px solid $primary;
+    border: 1px solid var(--#{$prefix}primary);
    border-radius: inherit;
  }
 }
@@ -34,7 +34,7 @@
    height: auto;
    background: no-repeat center/cover;
    border: 0;
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
    box-shadow: $shadow;
    margin: 0 $carousel-indicator-spacer;
    opacity: $carousel-indicator-thumb-opacity;
@@ -61,5 +61,5 @@

 .empty-bordered {
  border: 1px solid $border-color;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }
@@ -24,8 +24,8 @@ $countries: (
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-  border: 1px solid var(--#{$prefix}border-color);
-  border-radius: 3px;
+  border: $flag-border-size solid $flag-border-color;
+  border-radius: $flag-border-radius;
 }

@each $country in $countries {
@@ -141,7 +141,7 @@ Form control
  margin-bottom: 1rem;
  background: var(--#{$prefix}body-bg);
  border: 1px solid var(--#{$prefix}border-color);
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }

 /**
@@ -167,7 +167,7 @@ Form help
  &:hover,
  &[aria-describedby] {
    color: $white;
-    background: $primary;
+    background: var(--#{$prefix}primary);
  }
 }

@@ -90,7 +90,7 @@

  .divide-y#{$name-prefixed} {
    > :not(template) ~ :not(template) {
-      border-top: 1px solid $border-color-transparent !important;
+      border-top: 1px solid $border-color-translucent !important;
    }

    > :not(template):not(:first-child) {
@@ -104,7 +104,7 @@

  .divide-x#{$name-prefixed} {
    > :not(template) ~ :not(template) {
-      border-left: 1px solid $border-color-transparent !important;
+      border-left: 1px solid $border-color-translucent !important;
    }

    > :not(template):not(:first-child) {
@@ -1,7 +1,11 @@
+/**
+Legend
+ */
 .legend {
+  --#{$prefix}legend-size: #{$legend-size};
  display: inline-block;
-  background: var(--#{$prefix}gray-100);
-  width: .75em;
-  height: .75em;
-  border-radius: $border-radius;
+  background: $legend-bg;
+  width: var(--#{$prefix}legend-size);
+  height: var(--#{$prefix}legend-size);
+  border-radius: $legend-border-radius;
 }
@@ -10,7 +10,7 @@
  font-weight: $font-weight-medium;
  line-height: 1;
  text-transform: uppercase;
-  color: $text-muted;
+  color: $list-group-header-color;
  border-bottom: 1px solid var(--#{$prefix}border-color);

  .list-group-flush > & {
@@ -25,16 +25,16 @@
 }

 .list-group-item.active {
-  background-color: rgba(27,125,241,0.02);
-  border-left-color: $yellow;
+  background-color: $dropdown-link-hover-bg;
+  border-left-color: $component-active-bg;
  border-left-width: $border-width-wide;
 }

 .list-group-item {
  &:active,
  &:focus,
-  &:hover{
-    background-color: rgba(27,125,241,0.02);
+  &:hover {
+    background-color: $dropdown-link-hover-bg;
  }
 }

@@ -42,7 +42,7 @@
  &.disabled,
  &:disabled {
    color: $gray-500;
-    background-color: rgba(27,125,241,0.02);
+    background-color: $dropdown-link-hover-bg;
  }
 }

@@ -69,6 +69,9 @@
  }
 }

+/**
+Timeline
+ */
 .list-timeline {
  position: relative;
  padding: 0;
@@ -38,6 +38,6 @@ Markdown
  }

  > img {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
  }
 }
@@ -80,10 +80,10 @@
 }

 .nav-link-icon {
-  width: 1.5rem;
-  height: $icon-size;
-  margin-right: .25rem;
-  opacity: $text-muted-opacity;
+  width: $nav-link-icon-size;
+  height: $nav-link-icon-size;
+  margin-right: .5rem;
+  color: $nav-link-icon-color;

  svg {
    display: block;
@@ -3,7 +3,7 @@
 }

 .offcanvas-header {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: 1px solid $border-color-translucent;
 }

 .offcanvas-footer {
@@ -4,7 +4,7 @@

 .page-link {
  min-width: 1.75rem;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }

 .page-item {
@@ -4,6 +4,6 @@
  }

  &:not(.avatar):not([class*="card-img-"]), {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
  }
 }
@@ -19,22 +19,21 @@ Progress
  width: 100%;
  line-height: $progress-height;
  appearance: none;
-  background: var(--#{$prefix}gray-100);

  &::-webkit-progress-bar {
-    background: $gray-100;
+    background: var(--#{$prefix}progress-bg);
  }

  &::-webkit-progress-value {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
  }

  &::-moz-progress-bar {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
  }

  &::-ms-fill {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
    border: none;
  }
 }
@@ -12,8 +12,8 @@
  color: $white;
  text-align: center;
  text-transform: uppercase;
-  background: $primary;
-  border-color: $primary;
+  background: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
@@ -37,11 +37,11 @@
  @if $enable-extra-colors {
    @each $color, $value in $extra-colors {
      &.bg-#{$color} {
-        border-color: $value;
+        border-color: var(--#{$prefix}#{$color});
      }

      &.bg-#{$color}-lt {
-        border-color: theme-color-lighter($value) !important;
+        border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
      }
    }
  }
@@ -39,7 +39,7 @@
  margin: 2rem 0;
  list-style: none;
  @include step-size(2px, .5rem);
-  @include step-color($primary);
+  @include step-color( var(--#{$prefix}primary) );
 }

@each $color, $value in $extra-colors {
@@ -113,7 +113,7 @@ code {
 //  padding: 2px 4px;
 //  background: rgba($code-color, .03);
 //  border: 1px solid rgba($code-color, .064);
-//  border-radius: $border-radius;
+//  border-radius: var(--#{$prefix}border-radius);
 //  font-weight: $font-weight-normal;
 //}

@@ -125,10 +125,10 @@ code {
 //  hyphens: none;
 //  line-height: $code-line-height;
 //  tab-size: 3;
-//  border-radius: $border-radius;
+//  border-radius: var(--#{$prefix}border-radius);
 //  white-space: pre-wrap;
 //  background: mix($light, #ffffff, 50%);
-//  border: 1px solid $border-color-transparent;
+//  border: 1px solid $border-color-translucent;
 //  -webkit-font-smoothing: auto;
 //
 //  code {
@@ -20,7 +20,7 @@ Color Input
  width: 1.5rem;
  height: 1.5rem;
  color: $white;
-  border: 1px solid $border-color-transparent;
+  border: 1px solid $input-border-color-translucent;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

@@ -42,7 +42,7 @@ Color Input
  }

  .form-colorinput-input:focus ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
    box-shadow: $input-btn-focus-box-shadow;
  }

@@ -24,7 +24,7 @@ Icon input
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
-  color: $text-muted;
+  color: var(--#{$prefix}icon-color);
  pointer-events: none;
  font-size: 1.2em;

@@ -22,12 +22,12 @@ Image check
  border-radius: 3px;

  .form-imagecheck-input:focus ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
    box-shadow: $input-btn-focus-box-shadow;
  }

  .form-imagecheck-input:checked ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
  }

  &:before {
@@ -94,15 +94,15 @@ Select group

 .form-selectgroup-input:checked + .form-selectgroup-label {
  z-index: 1;
-  color: $primary;
+  color: var(--#{$prefix}primary);
  background: rgba($primary, .04);
-  border-color: $primary;
+  border-color: var(--#{$prefix}primary);
 }

 .form-selectgroup-input:focus + .form-selectgroup-label {
  z-index: 2;
-  color: $primary;
-  border-color: $primary;
+  color: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
  box-shadow: $input-btn-focus-box-shadow;
 }

@@ -124,7 +124,7 @@ Alternate version of form select group
      color: inherit;

      .form-selectgroup-title {
-        color: $primary;
+        color: var(--#{$prefix}primary);
      }

      .form-selectgroup-label-content {
@@ -3,13 +3,12 @@
 // All colors
@each $color, $value in $theme-colors {
  .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: var(--#{$prefix}#{$color}) !important;
  }

  .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !important;
+    color: var(--#{$prefix}#{$color}) !important;
+    background: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
  }
 }

@@ -17,7 +17,7 @@
    margin: .5rem;

    .dz-image {
-      border-radius: $border-radius;
+      border-radius: var(--#{$prefix}border-radius);
    }

    .dz-success-mark {
@@ -2,12 +2,12 @@
  --litepicker-month-weekday-color: #{$text-muted};
  --litepicker-button-prev-month-color: #{$text-muted};
  --litepicker-button-next-month-color: #{$text-muted};
-  --litepicker-button-prev-month-color-hover: #{$primary};
-  --litepicker-button-next-month-color-hover: #{$primary};
+  --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
+  --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
  --litepicker-day-color: var(--#{$prefix}body-color);
-  --litepicker-day-color-hover: #{$primary};
-  --litepicker-is-end-color-bg: #{$primary};
-  --litepicker-is-today-color: #{$primary};
+  --litepicker-day-color-hover: #{ var(--#{$prefix}primary) };
+  --litepicker-is-end-color-bg: #{ var(--#{$prefix}primary) };
+  --litepicker-is-today-color: #{ var(--#{$prefix}primary) };
  --litepicker-month-header-color: var(--#{$prefix}body-color);
  --litepicker-container-months-color-bg: var(--#{$prefix}card-bg);
  font: inherit;
@@ -19,7 +19,7 @@

  .container__main {
    border: 1px solid var(--#{$prefix}border-color);
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
    box-shadow: $dropdown-box-shadow;
  }

@@ -1,3 +1,3 @@
 body {
-  --plyr-color-main: #{$primary};
+  --plyr-color-main: #{var(--#{$prefix}primary)};
 }
@@ -1,3 +1,5 @@
+$select-color-dropdown-border-top: red;
+
@import "~tom-select/src/scss/tom-select.bootstrap5.scss";

 .ts-input {