Refactor scripts and styles for improved organization and consistency

package.json

@@ -8,21 +8,19 @@
     "start": "gulp start",
     "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
-    "build-docs": "mkdir public && touch public/index.html && echo 'ok'",
     "preview": "gulp build --preview",
-    "svg-optimize": "svgo -f svg/brand --pretty",
     "unused-files": "node .build/unused-files.js",
     "release": "release-it",
     "svg-icons": "node .build/import-icons.js",
     "bundlewatch": "bundlewatch",
-    "storybook": "start-storybook -p 6006",
-    "changelog": "node .build/changelog.js",
-    "icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
+    "import-icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
+    "import-illustrations": "node .build/import-illustrations.js",
     "download-images": "node .build/download-images.js",
+    "optimize": "pnpm run optimize-images && pnpm run optimize-svg",
     "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
+    "optimize-svg": "svgo -f svg/brand --pretty",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
     "format:write": "prettier --write src/**/*.{js,scss} --cache",
-    "illustrations": "node .build/import-illustrations.js",
     "build:html": "eleventy",
     "watch:html": "eleventy --watch"
   },
@@ -106,6 +104,14 @@
         "path": "./dist/css/tabler-socials.min.css",
         "maxSize": "2 kB"
       },
+      {
+        "path": "./dist/css/tabler-marketing.css",
+        "maxSize": "9 kB"
+      },
+      {
+        "path": "./dist/css/tabler-marketing.min.css",
+        "maxSize": "8 kB"
+      },
       {
         "path": "./dist/css/tabler-vendors.css",
         "maxSize": "7.5 kB"

src/js/demo-theme.js

@@ -21,8 +21,8 @@ if (!!params.theme) {
 	selectedTheme = storedTheme ? storedTheme : defaultTheme
 }
 
-if (selectedTheme === 'dark') {
+if (selectedTheme === "dark") {
 	document.body.setAttribute("data-bs-theme", selectedTheme)
 } else {
 	document.body.removeAttribute("data-bs-theme")
-}
+}

src/js/demo.js

@@ -38,9 +38,7 @@ 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

src/scss/_bootstrap-override.scss

@@ -60,13 +60,7 @@
   // Override bootstrap core
 }
 
-@mixin button-outline-variant(
-  $color: null,
-  $color-hover: null,
-  $active-background: null,
-  $active-border: null,
-  $active-color: null
-) {
+@mixin button-outline-variant($color: null, $color-hover: null, $active-background: null, $active-border: null, $active-color: null) {
   // Override bootstrap core
 }
 

src/scss/_core.scss

@@ -73,5 +73,4 @@
 
 @import "debug";
 
-
-@import "debug";
+@import "debug";

src/scss/_utilities-marketing.scss

@@ -1,8 +1,4 @@
-$negative-spacers-extra: if(
-  $enable-negative-margins,
-  negativify-map(map-merge($spacers, $spacers-extra)),
-  null
-);
+$negative-spacers-extra: if($enable-negative-margins, negativify-map(map-merge($spacers, $spacers-extra)), null);
 
 $utilities: (
   // Margin utilities

src/scss/_utilities.scss

@@ -1,15 +1,18 @@
 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color-translucent),
-  wide: $border-width-wide var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color-translucent),
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+  wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
   0: 0,
 );
 
-$utilities-border-colors: map-loop((
-  "red": red,
-  "green": green,
-), rgba-css-var, "$key", "border") !default;
+$utilities-border-colors: map-loop(
+  (
+    "red": red,
+    "green": green,
+  ),
+  rgba-css-var,
+  "$key",
+  "border"
+) !default;
 
 //Utilities
 $utilities: (

src/scss/_variables-dark.scss

@@ -6,7 +6,7 @@
 $darken-dark: color.adjust($dark, $lightness: -2%) !default;
 $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
 $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
@@ -16,4 +16,3 @@ $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;
 $text-secondary-dark: rgba(153, 159, 164, 1) !default;
- 

src/scss/_variables.scss

@@ -53,9 +53,9 @@ $line-height-700: 3rem !default;
 
 $font-size-base: 0.875rem !default;
 
-$spacing-wide: .04em !default;
+$spacing-wide: 0.04em !default;
 $spacing-normal: 0 !default;
-$spacing-tight: -.04em !default;
+$spacing-tight: -0.04em !default;
 
 $body-letter-spacing: 0 !default;
 
@@ -69,12 +69,12 @@ $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
-  'light': $font-weight-light,
-  'normal': $font-weight-normal,
-  'medium': $font-weight-medium,
-  'bold': $font-weight-bold,
-  'black': $font-weight-black,
-  'headings': $headings-font-weight,
+  "light": $font-weight-light,
+  "normal": $font-weight-normal,
+  "medium": $font-weight-medium,
+  "bold": $font-weight-bold,
+  "black": $font-weight-black,
+  "headings": $headings-font-weight,
 ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
@@ -144,7 +144,7 @@ $border-light-opacity: 0.08 !default;
 $border-dark-opacity: 0.24 !default;
 $border-active-opacity: 0.58 !default;
 
-$gray-50:  #f6f8fb !default;
+$gray-50: #f6f8fb !default;
 $gray-100: #eef3f6 !default;
 $gray-200: #dce1e7 !default;
 $gray-300: #b8c4d4 !default;
@@ -330,52 +330,52 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
-$avatar-status-size: .75rem !default;
+$avatar-status-size: 0.75rem !default;
 $avatar-font-size: 1rem !default;
 $avatar-icon-size: 1.5rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
   "xxs": (
     size: 1rem,
-    font-size: .5rem,
-    icon-size: .75rem,
-    status-size: .25rem
+    font-size: 0.5rem,
+    icon-size: 0.75rem,
+    status-size: 0.25rem,
   ),
   "xs": (
     size: 1.25rem,
     font-size: $h6-font-size,
-    icon-size: .75rem,
-    status-size: .375rem
+    icon-size: 0.75rem,
+    status-size: 0.375rem,
   ),
   "sm": (
     size: 2rem,
     font-size: $h5-font-size,
     icon-size: 1.5rem,
-    status-size: .5rem
+    status-size: 0.5rem,
   ),
   "md": (
     size: 2.5rem,
     font-size: $h4-font-size,
     icon-size: 1.5rem,
-    status-size: .75rem
+    status-size: 0.75rem,
   ),
   "lg": (
     size: 3rem,
     font-size: $h2-font-size,
     icon-size: 2rem,
-    status-size: .75rem
+    status-size: 0.75rem,
   ),
   "xl": (
     size: 5rem,
     font-size: 2rem,
     icon-size: 3rem,
-    status-size: 1rem
+    status-size: 1rem,
   ),
   "2xl": (
     size: 7rem,
     font-size: 3rem,
     icon-size: 5rem,
-    status-size: 1rem
+    status-size: 1rem,
   ),
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
@@ -598,7 +598,7 @@ $input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
 
-$btn-disabled-opacity: .4 !default;
+$btn-disabled-opacity: 0.4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
@@ -865,7 +865,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
 $toast-header-color: var(--#{$prefix}gray-500) !default;
-$toast-background-color: var(--#{$prefix}bg-surface) !default; 
+$toast-background-color: var(--#{$prefix}bg-surface) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;

src/scss/demo.scss

@@ -76,10 +76,8 @@ $demo-icon-size: 4rem;
   aspect-ratio: 1;
   text-align: center;
   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);
+  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;
 
@@ -113,8 +111,7 @@ $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: $box-shadow;
 
   &-light {
@@ -132,12 +129,8 @@ $demo-icon-size: 4rem;
   &-dark {
     background: $dark;
   }
-  
+
   &-colored {
-    background-image: linear-gradient(
-      135deg,
-      var(--#{$prefix}primary) 50%,
-      $light 50%
-    );
+    background-image: linear-gradient(135deg, var(--#{$prefix}primary) 50%, $light 50%);
   }
 }

src/scss/tabler-socials.scss

@@ -1,2 +1,2 @@
 @import "config";
-@import "ui/social";
+@import "ui/social";