Merge branch 'dev' of https://github.com/tabler/tabler into dev-icons-2.18

.changeset/slow-buses-breathe.md

+---
+"@tabler/core": patch
+---
+
+Switch from `npm` to `pnpm` for faster package installation

.changeset/thick-apples-punch.md

+---
+"@tabler/core": patch
+---
+
+Add Prettier to project for consistent code formatting

.github/workflows/bundlewatch.yml

@@ -23,7 +23,9 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "${{ env.NODE }}"
-          cache: npm
+     
+      - name: Install PNPM
+        run: npm i -g pnpm
 
       - name: Set up Bundler
         uses: ruby/setup-ruby@v1
@@ -31,14 +33,14 @@ jobs:
           ruby-version: 2.6
           bundler-cache: true
 
-      - name: Install npm dependencies
-        run: npm install
+      - name: Install pnpm dependencies
+        run: pnpm install
 
       - name: Run build
-        run: npm run build
+        run: pnpm run build
 
       - name: Run bundlewatch
-        run: npm run bundlewatch
+        run: pnpm run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
           CI_BRANCH_BASE: dev

.github/workflows/lockfiles.yaml

@@ -22,5 +22,5 @@ jobs:
               uses: xalvarez/prevent-file-change-action@v1
               with:
                   githubToken: ${{ secrets.GITHUB_TOKEN }}
-                  pattern: Gemfile.lock|package-lock.json
+                  pattern: Gemfile.lock|pnpm-lock.json
                   trustedAuthors: codecalm, dependabot

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "${{ env.NODE }}"
-          cache: npm
+          cache: pnpm
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -32,8 +32,8 @@ jobs:
       - run: ruby --version
       - run: node --version
 
-      - name: Install npm dependencies
-        run: npm install
+      - name: Install pnpm dependencies
+        run: pnpm install
 
       - name: Build
-        run: npm run build
+        run: pnpm run build

.gitignore

@@ -30,3 +30,4 @@ node_modules/
 .yarn
 .next
 .vercel
+package-lock.json
\ No newline at end of file

.gitpod.yml

 tasks:
-  - init: npm install && npm run build
-    command: npm run start
+  - init: pnpm install && pnpm run build
+    command: pnpm run start

.prettierignore

+dist
+.tmp
+.vscode
+.cache
+node_modules
\ No newline at end of file

.prettierrc

+{
+	"bracketSpacing": true,
+	"jsxSingleQuote": false,
+	"printWidth": 80,
+	"proseWrap": "always",
+	"semi": false,
+	"singleQuote": false,
+	"tabWidth": 2,
+	"trailingComma": "all"
+}

Dockerfile

-FROM ruby:2.7-alpine
-
-RUN apk add --no-cache nodejs npm && \
-    apk add --no-cache --virtual build-dependencies build-base
-
-WORKDIR /app
-
-ADD package.json /app/
-ADD package-lock.json /app/
-ADD package.json /app/
-ADD Gemfile /app/
-ADD Gemfile.lock /app/
-ADD _config.yml /app/
-ADD gulpfile.js /app/
-
-# RUN apk update && apk add --virtual build-dependencies build-base
-RUN npm install
-RUN bundle config --global silence_root_warning 1 && bundler install --verbose
-
-# website
-EXPOSE 3000
-
-# website management (browser auto reload)
-EXPOSE 3001
-
-# run tabler
-ENTRYPOINT [ "npm", "run", "start-plugins" ]
\ No newline at end of file
+FROM ruby:2.7-alpine
+
+RUN apk add --no-cache nodejs pnpm && \
+    apk add --no-cache --virtual build-dependencies build-base
+
+WORKDIR /app
+
+ADD package.json /app/
+ADD package-lock.json /app/
+ADD package.json /app/
+ADD Gemfile /app/
+ADD Gemfile.lock /app/
+ADD _config.yml /app/
+ADD gulpfile.js /app/
+
+# RUN apk update && apk add --virtual build-dependencies build-base
+RUN pnpm install
+RUN bundle config --global silence_root_warning 1 && bundler install --verbose
+
+# website
+EXPOSE 3000
+
+# website management (browser auto reload)
+EXPOSE 3001
+
+# run tabler
+ENTRYPOINT [ "pnpm", "run", "start-plugins" ]
\ No newline at end of file

README.md

@@ -75,13 +75,13 @@ Support this project by becoming a sponsor. Your logo will show up in this READM
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
+2. Navigate to the root `/tabler` directory and run `pnpm install` to install our local dependencies listed in `package.json`.
 3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
 4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **OSX users**:
 
-1. NPM ```npm install```
+1. NPM ```pnpm install```
 2. install Ruby (2.5.* recommended)
 	```brew install ruby @2.5```
 3. install bundler
@@ -108,17 +108,17 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 ## Build locally
 
-You need to have `npm` and `bundler` installed.
+You need to have `pnpm` and `bundler` installed.
 
 1. From the root `/tabler` directory, run installation in the command line:
-  - `npm install` 
+  - `pnpm install` 
   - `bundler install` 
-2. Then execute `npm run start-plugins` to start up the application stack.
+2. Then execute `pnpm run start-plugins` to start up the application stack.
 3. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
 4. Any change in the `/src` directory will build the application and refresh the page.
 
 **Note**:
-Run `npm run build` for reforms a one off build application without refresh.
+Run `pnpm run build` for reforms a one off build application without refresh.
 Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
 
 ## Installation

package-lock.json

@@ -21,7 +21,7 @@
         "@rollup/plugin-replace": "^5.0.2",
         "@rollup/pluginutils": "^5.0.2",
         "@rollup/stream": "^2.0.0",
-        "@tabler/icons": "^2.18.0",
+        "@tabler/icons": "^2.17.0",
         "all-contributors-cli": "^6.25.0",
         "apexcharts": "^3.40.0",
         "autoprefixer": "^10.4.14",
@@ -68,7 +68,7 @@
         "yargs": "^17.7.2"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=16"
       },
       "funding": {
         "type": "github",
@@ -3004,9 +3004,9 @@
       }
     },
     "node_modules/@tabler/icons": {
-      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.18.0.tgz",
-      "integrity": "sha512-N7a20mwbhrFXNqvd8Rxa0Btwu1Li5rQbqdIi3mzt5HRjP25PbyYuTU2BXbu8yMEnUk018Gi13gpS/jlMgXFuOw==",
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.17.0.tgz",
+      "integrity": "sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==",
       "dev": true,
       "funding": {
         "type": "github",
@@ -20338,9 +20338,9 @@
       }
     },
     "@tabler/icons": {
-      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.18.0.tgz",
-      "integrity": "sha512-N7a20mwbhrFXNqvd8Rxa0Btwu1Li5rQbqdIi3mzt5HRjP25PbyYuTU2BXbu8yMEnUk018Gi13gpS/jlMgXFuOw==",
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.17.0.tgz",
+      "integrity": "sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==",
       "dev": true
     },
     "@tootallnate/once": {

package.json

@@ -18,9 +18,11 @@
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
     "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
+    "icons": "ncu -u @tabler/icons && pnpm install && gulp svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push",
     "download-images": "node build/download-images.js",
-    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
+    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
+    "format:check": "prettier --check src/**/*.{js,scss} --cache",
+    "format:write": "prettier --write src/**/*.{js,scss} --cache"
   },
   "repository": {
     "type": "git",
@@ -130,11 +132,13 @@
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
+    "@changesets/cli": "^2.26.1",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
+    "@shopify/prettier-plugin-liquid": "^1.0.6",
     "@tabler/icons": "^2.18.0",
     "all-contributors-cli": "^6.25.0",
     "apexcharts": "^3.40.0",
@@ -168,6 +172,7 @@
     "nouislider": "^15.7.0",
     "plyr": "^3.7.8",
     "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
     "release-it": "^15.10.3",
     "request": "^2.88.2",
     "rollup": "2.79.1",
@@ -182,7 +187,6 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@changesets/cli": "^2.26.1",
     "@popperjs/core": "^2.11.7",
     "bootstrap": "5.3.0-alpha3"
   },

src/js/demo-theme.js

@@ -4,22 +4,22 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 
-const themeStorageKey = 'tablerTheme'
-const defaultTheme = 'light'
+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),
-});
+	get: (searchParams, prop) => searchParams.get(prop),
+})
 
 if (!!params.theme) {
-	 localStorage.setItem(themeStorageKey, params.theme)
-	 selectedTheme = params.theme
+	localStorage.setItem(themeStorageKey, params.theme)
+	selectedTheme = params.theme
 } else {
-	 const storedTheme = localStorage.getItem(themeStorageKey)
-	 selectedTheme = storedTheme ? storedTheme : defaultTheme
+	const storedTheme = localStorage.getItem(themeStorageKey)
+	selectedTheme = storedTheme ? storedTheme : defaultTheme
 }
 
-document.body.classList.remove('theme-dark', 'theme-light');
-document.body.classList.add(`theme-${selectedTheme}`);
\ No newline at end of file
+document.body.classList.remove("theme-dark", "theme-light")
+document.body.classList.add(`theme-${selectedTheme}`)

src/js/demo.js

 // Setting items
 const items = {
-	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
-	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
-	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
+	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
+	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
+	"container-layout": {
+		localStorage: "tablerContainerLayout",
+		default: "boxed",
+	},
 }
 
 // Theme config
 const config = {}
 for (const [key, params] of Object.entries(items)) {
-   const lsParams = localStorage.getItem(params.localStorage)
-   config[key] = lsParams ? lsParams : params.default
+	const lsParams = localStorage.getItem(params.localStorage)
+	config[key] = lsParams ? lsParams : params.default
 }
 
 // Parse url params
 const parseUrl = () => {
 	const search = window.location.search.substring(1)
-	const params = search.split('&')
+	const params = search.split("&")
 
 	for (let i = 0; i < params.length; i++) {
-		const arr = params[i].split('=')
+		const arr = params[i].split("=")
 		const key = arr[0]
 		const value = arr[1]
 
@@ -35,7 +38,9 @@ const parseUrl = () => {
 // Toggle form controls
 const toggleFormControls = (form) => {
 	for (const [key, params] of Object.entries(items)) {
-		const elem = form.querySelector(`[name="settings-${key}"][value="${config[key]}"]`)
+		const elem = form.querySelector(
+			`[name="settings-${key}"][value="${config[key]}"]`,
+		)
 
 		if (elem) {
 			elem.checked = true
@@ -55,26 +60,24 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	window.dispatchEvent(new Event('resize'));
+	window.dispatchEvent(new Event("resize"))
 
-	(new bootstrap.Offcanvas(form)).hide()
+	new bootstrap.Offcanvas(form).hide()
 }
 
-
 // Parse url
 parseUrl()
 
 // Elements
-const form = document.querySelector('#offcanvasSettings')
+const form = document.querySelector("#offcanvasSettings")
 
 // Toggle form controls
 if (form) {
-
-	form.addEventListener('submit', function (e) {
+	form.addEventListener("submit", function (e) {
 		e.preventDefault()
 
 		submitForm(form)
 	})
 
 	toggleFormControls(form)
-}
\ No newline at end of file
+}

src/js/tabler.esm.js

 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/toast';
-
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/toast"

src/js/tabler.js

 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/tab';
-import './src/toast';
-import * as bootstrap from 'bootstrap';
-import * as tabler from './src/tabler';
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/tab"
+import "./src/toast"
+import * as bootstrap from "bootstrap"
+import * as tabler from "./src/tabler"
 
-globalThis.bootstrap = bootstrap;
-globalThis.tabler = tabler;
+globalThis.bootstrap = bootstrap
+globalThis.tabler = tabler

src/scss/_bootstrap-components.scss

@@ -35,4 +35,4 @@
 @import "bootstrap/scss/helpers";
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
\ No newline at end of file
+@import "bootstrap/scss/utilities/api";

src/scss/_bootstrap-config.scss

@@ -4,4 +4,4 @@
 @import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
\ No newline at end of file
+@import "bootstrap/scss/utilities";

src/scss/_bootstrap-override.scss

 @mixin caret($direction: down) {
-  $selector: 'after';
+  $selector: "after";
 
-  @if $direction == 'left' {
-    $selector: 'before'
+  @if $direction == "left" {
+    $selector: "before";
   }
 
   &:#{$selector} {
@@ -13,9 +13,9 @@
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
     border-left: 1px var(--#{$prefix}border-style);
-    margin-right: .1em;
+    margin-right: 0.1em;
 
-    @if $direction != 'left' {
+    @if $direction != "left" {
       margin-left: $caret-spacing;
     } @else {
       margin-right: $caret-spacing;
@@ -32,18 +32,14 @@
     }
   }
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     &:after {
       content: none;
     }
   }
 }
 
-@mixin alert-variant(
-  $background: null,
-  $border: null,
-  $color: null
-) {
+@mixin alert-variant($background: null, $border: null, $color: null) {
   // Override bootstrap core
 }
 
@@ -79,4 +75,4 @@
 //
 @function opaque($background, $foreground) {
   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
\ No newline at end of file
+}

src/scss/_core.scss

@@ -69,4 +69,4 @@
 @import "utils/shadow";
 @import "utils/text";
 
-@import "debug";
\ No newline at end of file
+@import "debug";

src/scss/_debug.scss

 $debug: false;
 
 @if $debug {
-	$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "lime": $lime, "green": $green, "teal": $teal, "cyan": $cyan);
+  $colors: (
+    "blue": $blue,
+    "azure": $azure,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "lime": $lime,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+  );
 
-	@each $name, $color in $colors {
-		@debug ("#{$name}: '#{$color}'");
-		@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
-		@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
-		@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
-		@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
-		@debug ("#{$name}-500: '#{$color}'");
-		@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
-		@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
-		@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
-		@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
-	}
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
 
-	@debug ("gray: '#{$gray-500}'");
-	@debug ("gray-100: '#{$gray-100}'");
-	@debug ("gray-200: '#{$gray-200}'");
-	@debug ("gray-300: '#{$gray-300}'");
-	@debug ("gray-400: '#{$gray-400}'");
-	@debug ("gray-500: '#{$gray-500}'");
-	@debug ("gray-600: '#{$gray-600}'");
-	@debug ("gray-700: '#{$gray-700}'");
-	@debug ("gray-800: '#{$gray-800}'");
-	@debug ("gray-900: '#{$gray-900}'");
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
 
-	@debug ("border-color: '#{$border-color}'");
-	@debug ("text-muted: '#{$text-muted}'");
+  @debug ("border-color: '#{$border-color}'");
+  @debug ("text-muted: '#{$text-muted}'");
 
-	@each $name, $color in $social-colors {
-     @debug ("#{$name}: '#{$color}'");
-   }
+  @each $name, $color in $social-colors {
+    @debug ("#{$name}: '#{$color}'");
+  }
 }
-
-

src/scss/_utilities.scss

 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
-  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style)
+    $border-color-translucent,
   0: 0,
 );
 
@@ -15,16 +17,16 @@ $utilities: (
       fill: fill,
       scale-down: scale-down,
       none: none,
-    )
+    ),
   ),
   "spacing": (
     property: letter-spacing,
     class: tracking,
     values: (
-      tight: -.05em,
+      tight: -0.05em,
       normal: 0,
-      wide: .05em,
-    )
+      wide: 0.05em,
+    ),
   ),
   "cursor": (
     property: cursor,
@@ -45,54 +47,54 @@ $utilities: (
       v-text: vertical-text,
       grab: grab,
       grabbing: grabbing,
-    )
+    ),
   ),
   "border": (
     property: border,
-    values: $border-values
+    values: $border-values,
   ),
   "border-top": (
     property: border-top,
-    values: $border-values
+    values: $border-values,
   ),
   "border-end": (
     class: border-end,
     property: border-right,
-    values: $border-values
+    values: $border-values,
   ),
   "border-bottom": (
     property: border-bottom,
-    values: $border-values
+    values: $border-values,
   ),
   "border-start": (
     class: border-start,
     property: border-left,
-    values: $border-values
+    values: $border-values,
   ),
   "border-x": (
     class: border-x,
     property: border-left border-right,
-    values: $border-values
+    values: $border-values,
   ),
   "border-y": (
     class: border-y,
     property: border-top border-bottom,
-    values: $border-values
+    values: $border-values,
   ),
   "width": (
     property: width,
     class: w,
-    values: $size-values
+    values: $size-values,
   ),
   "height": (
     property: height,
     class: h,
-    values: $size-values
+    values: $size-values,
   ),
   "columns": (
     property: columns,
     class: columns,
     responsive: true,
-    values: 2 3 4
-  )
-) !default;
\ No newline at end of file
+    values: 2 3 4,
+  ),
+) !default;

src/scss/_variables.scss

@@ -20,7 +20,9 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
+/* prettier-ignore */
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+/* prettier-ignore */
 $font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 

src/scss/demo.scss

-
-
 @import "config";
 @import "demo/highlight";
 @import "demo/examples";
 
-
 .card-sponsor {
   background: #dbe7f6 no-repeat center/100% 100%;
   border-color: #548ed2;
@@ -15,7 +12,6 @@ body.no-transitions * {
   transition: none !important;
 }
 
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -53,13 +49,12 @@ body.no-transitions * {
 }
 
 .demo-dividers {
-  >p {
-    opacity: .2;
+  > p {
+    opacity: 0.2;
     user-select: none;
   }
 }
 
-
 $demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
@@ -68,7 +63,7 @@ $demo-icon-size: 4rem;
   margin: 0 -2px -1px 0;
   list-style: none;
 
-  >* {
+  > * {
     flex: 1 0 $demo-icon-size;
   }
 }
@@ -84,9 +79,11 @@ $demo-icon-size: 4rem;
   justify-content: center;
   aspect-ratio: 1;
   text-align: center;
-  padding: .5rem;
-  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  padding: 0.5rem;
+  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,7 +98,6 @@ $demo-icon-size: 4rem;
   }
 }
 
-
 //
 // Settings
 //
@@ -121,12 +117,27 @@ $demo-icon-size: 4rem;
   height: 3rem;
   width: 3rem;
   position: relative;
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
   box-shadow: $shadow;
 
-  &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
-  &-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
-  &-transparent { background: $light; }
-  &-dark { background: $dark; }
-  &-colored { background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%); }
-}
\ No newline at end of file
+  &-light {
+    background: linear-gradient(135deg, $white 50%, $light 50%);
+  }
+  &-mixed {
+    background-image: linear-gradient(135deg, $dark 50%, #fff 50%);
+  }
+  &-transparent {
+    background: $light;
+  }
+  &-dark {
+    background: $dark;
+  }
+  &-colored {
+    background-image: linear-gradient(
+      135deg,
+      var(--#{$prefix}primary) 50%,
+      $light 50%
+    );
+  }
+}

src/scss/tabler-social.scss

 @import "config";
-

src/scss/tabler.scss

 @import "core";
-