@guebbit/css-toolkit 1.3.2 → 1.4.0

package/package.json

@@ -1,61 +1,67 @@
-{
-  "name": "@guebbit/css-toolkit",
-  "type": "module",
-  "version": "1.3.2",
-  "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
-  "main": "vite.config.js",
-  "files": [
-    "docs",
-    "src",
-    "test",
-    "index.scss",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG",
-    "vite.config.ts"
-  ],
-  "scripts": {
-    "test": "mocha",
-    "lint": "stylelint \"**/*.scss\" --fix",
-    "docs:dev": "vitepress dev docs --port 8080",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs --port 8080",
-    "prepublish": "npm run lint && npm run test && npm run docs:build",
-    "publish:public": "npm publish --access public"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.8",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "breakpoint-sass": "^3.0.0",
-    "chai": "^5.2.0",
-    "css-loader": "^7.1.2",
-    "cssnano": "^7.0.6",
-    "mocha": "^11.1.0",
-    "postcss": "^8.5.3",
-    "postcss-loader": "^8.1.1",
-    "postcss-prefix-selector": "^2.1.0",
-    "sass": "^1.85.1",
-    "style-loader": "^4.0.0",
-    "stylelint": "^16.15.0",
-    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "stylelint-scss": "^6.11.1",
-    "vite": "^6.2.0",
-    "vitepress": "^1.6.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Guebbit/css-toolkit.git"
-  },
-  "keywords": [
-    "SCSS",
-    "Library"
-  ],
-  "author": "Guebbit <guerzoni.andrea91@gmail.com> (https://guebbit.com/)",
-  "license": "AGPL-3.0-or-later",
-  "bugs": {
-    "url": "https://github.com/Guebbit/css-toolkit/issues"
-  },
-  "homepage": "https://github.com/Guebbit/css-toolkit#readme"
-}
+{
+  "name": "@guebbit/css-toolkit",
+  "type": "module",
+  "version": "1.4.0",
+  "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
+  "main": "vite.config.js",
+  "files": [
+    "docs",
+    "src",
+    "test",
+    "index.scss",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG",
+    "vite.config.ts"
+  ],
+  "scripts": {
+    "test": "mocha",
+    "sass:check": "sass src/index.scss",
+    "lint": "stylelint \"**/*.scss\" --fix",
+    "prettier": "npx prettier . --write",
+    "docs:dev": "vitepress dev docs --port 8080",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs --port 8080",
+    "update:all": "npx npm-check-updates -u",
+    "complete": "npm run sass:check && npm run lint && npm run prettier && npm run test && npm run docs:build",
+    "publish:public": "npm publish --access public"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "autoprefixer": "^10.4.27",
+    "breakpoint-sass": "^3.0.0",
+    "chai": "^6.2.2",
+    "css-loader": "^7.1.4",
+    "cssnano": "^7.1.4",
+    "mocha": "^11.7.5",
+    "postcss": "^8.5.8",
+    "postcss-loader": "^8.2.1",
+    "postcss-prefix-selector": "^2.1.1",
+    "sass": "^1.99.0",
+    "style-loader": "^4.0.0",
+    "stylelint": "^17.6.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
+    "vite": "^8.0.3",
+    "vitepress": "^1.6.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Guebbit/css-toolkit.git"
+  },
+  "keywords": [
+    "SCSS",
+    "Library"
+  ],
+  "author": "Guebbit <guerzoni.andrea91@gmail.com> (https://guebbit.com/)",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/Guebbit/css-toolkit/issues"
+  },
+  "homepage": "https://github.com/Guebbit/css-toolkit#readme",
+  "dependencies": {
+    "prettier": "^3.8.1"
+  }
+}

package/src/colors/_bootstrap.scss

@@ -1,180 +1,179 @@
-@use "../functions/colors" as color-functions;
-
-// Material colors by Bootstrap
-// https://github.com/twbs/bootstrap
-// https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-
-// scss-docs-start gray-color-variables
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-// scss-docs-end gray-color-variables
-
-// fusv-disable
-// scss-docs-start gray-colors-map
-$grays: (
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $gray-500,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
-) !default;
-// scss-docs-end gray-colors-map
-// fusv-enable
-
-// scss-docs-start color-variables
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-// scss-docs-end color-variables
-
-// scss-docs-start colors-map
-$colors: (
-        "blue":       $blue,
-        "indigo":     $indigo,
-        "purple":     $purple,
-        "pink":       $pink,
-        "red":        $red,
-        "orange":     $orange,
-        "yellow":     $yellow,
-        "green":      $green,
-        "teal":       $teal,
-        "cyan":       $cyan,
-        "black":      $black,
-        "white":      $white,
-        "gray":       $gray-600,
-        "gray-dark":  $gray-800
-) !default;
-// scss-docs-end colors-map
-
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio:   4.5 !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:      $black !default;
-$color-contrast-light:     $white !default;
-
-// fusv-disable
-$blue-100: color-functions.color-tint($blue, 80%) !default;
-$blue-200: color-functions.color-tint($blue, 60%) !default;
-$blue-300: color-functions.color-tint($blue, 40%) !default;
-$blue-400: color-functions.color-tint($blue, 20%) !default;
-$blue-500: $blue !default;
-$blue-600: color-functions.color-shade($blue, 20%) !default;
-$blue-700: color-functions.color-shade($blue, 40%) !default;
-$blue-800: color-functions.color-shade($blue, 60%) !default;
-$blue-900: color-functions.color-shade($blue, 80%) !default;
-
-$indigo-100: color-functions.color-tint($indigo, 80%) !default;
-$indigo-200: color-functions.color-tint($indigo, 60%) !default;
-$indigo-300: color-functions.color-tint($indigo, 40%) !default;
-$indigo-400: color-functions.color-tint($indigo, 20%) !default;
-$indigo-500: $indigo !default;
-$indigo-600: color-functions.color-shade($indigo, 20%) !default;
-$indigo-700: color-functions.color-shade($indigo, 40%) !default;
-$indigo-800: color-functions.color-shade($indigo, 60%) !default;
-$indigo-900: color-functions.color-shade($indigo, 80%) !default;
-
-$purple-100: color-functions.color-tint($purple, 80%) !default;
-$purple-200: color-functions.color-tint($purple, 60%) !default;
-$purple-300: color-functions.color-tint($purple, 40%) !default;
-$purple-400: color-functions.color-tint($purple, 20%) !default;
-$purple-500: $purple !default;
-$purple-600: color-functions.color-shade($purple, 20%) !default;
-$purple-700: color-functions.color-shade($purple, 40%) !default;
-$purple-800: color-functions.color-shade($purple, 60%) !default;
-$purple-900: color-functions.color-shade($purple, 80%) !default;
-
-$pink-100: color-functions.color-tint($pink, 80%) !default;
-$pink-200: color-functions.color-tint($pink, 60%) !default;
-$pink-300: color-functions.color-tint($pink, 40%) !default;
-$pink-400: color-functions.color-tint($pink, 20%) !default;
-$pink-500: $pink !default;
-$pink-600: color-functions.color-shade($pink, 20%) !default;
-$pink-700: color-functions.color-shade($pink, 40%) !default;
-$pink-800: color-functions.color-shade($pink, 60%) !default;
-$pink-900: color-functions.color-shade($pink, 80%) !default;
-
-$red-100: color-functions.color-tint($red, 80%) !default;
-$red-200: color-functions.color-tint($red, 60%) !default;
-$red-300: color-functions.color-tint($red, 40%) !default;
-$red-400: color-functions.color-tint($red, 20%) !default;
-$red-500: $red !default;
-$red-600: color-functions.color-shade($red, 20%) !default;
-$red-700: color-functions.color-shade($red, 40%) !default;
-$red-800: color-functions.color-shade($red, 60%) !default;
-$red-900: color-functions.color-shade($red, 80%) !default;
-
-$orange-100: color-functions.color-tint($orange, 80%) !default;
-$orange-200: color-functions.color-tint($orange, 60%) !default;
-$orange-300: color-functions.color-tint($orange, 40%) !default;
-$orange-400: color-functions.color-tint($orange, 20%) !default;
-$orange-500: $orange !default;
-$orange-600: color-functions.color-shade($orange, 20%) !default;
-$orange-700: color-functions.color-shade($orange, 40%) !default;
-$orange-800: color-functions.color-shade($orange, 60%) !default;
-$orange-900: color-functions.color-shade($orange, 80%) !default;
-
-$yellow-100: color-functions.color-tint($yellow, 80%) !default;
-$yellow-200: color-functions.color-tint($yellow, 60%) !default;
-$yellow-300: color-functions.color-tint($yellow, 40%) !default;
-$yellow-400: color-functions.color-tint($yellow, 20%) !default;
-$yellow-500: $yellow !default;
-$yellow-600: color-functions.color-shade($yellow, 20%) !default;
-$yellow-700: color-functions.color-shade($yellow, 40%) !default;
-$yellow-800: color-functions.color-shade($yellow, 60%) !default;
-$yellow-900: color-functions.color-shade($yellow, 80%) !default;
-
-$green-100: color-functions.color-tint($green, 80%) !default;
-$green-200: color-functions.color-tint($green, 60%) !default;
-$green-300: color-functions.color-tint($green, 40%) !default;
-$green-400: color-functions.color-tint($green, 20%) !default;
-$green-500: $green !default;
-$green-600: color-functions.color-shade($green, 20%) !default;
-$green-700: color-functions.color-shade($green, 40%) !default;
-$green-800: color-functions.color-shade($green, 60%) !default;
-$green-900: color-functions.color-shade($green, 80%) !default;
-
-$teal-100: color-functions.color-tint($teal, 80%) !default;
-$teal-200: color-functions.color-tint($teal, 60%) !default;
-$teal-300: color-functions.color-tint($teal, 40%) !default;
-$teal-400: color-functions.color-tint($teal, 20%) !default;
-$teal-500: $teal !default;
-$teal-600: color-functions.color-shade($teal, 20%) !default;
-$teal-700: color-functions.color-shade($teal, 40%) !default;
-$teal-800: color-functions.color-shade($teal, 60%) !default;
-$teal-900: color-functions.color-shade($teal, 80%) !default;
-
-$cyan-100: color-functions.color-tint($cyan, 80%) !default;
-$cyan-200: color-functions.color-tint($cyan, 60%) !default;
-$cyan-300: color-functions.color-tint($cyan, 40%) !default;
-$cyan-400: color-functions.color-tint($cyan, 20%) !default;
-$cyan-500: $cyan !default;
-$cyan-600: color-functions.color-shade($cyan, 20%) !default;
-$cyan-700: color-functions.color-shade($cyan, 40%) !default;
-$cyan-800: color-functions.color-shade($cyan, 60%) !default;
-$cyan-900: color-functions.color-shade($cyan, 80%) !default;
+@use "../functions/colors" as color-functions;
+
+// Material colors by Bootstrap
+// https://github.com/twbs/bootstrap
+// https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss
+
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900,
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "black": $black,
+  "white": $white,
+  "gray": $gray-600,
+  "gray-dark": $gray-800,
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: color-functions.color-tint($blue, 80%) !default;
+$blue-200: color-functions.color-tint($blue, 60%) !default;
+$blue-300: color-functions.color-tint($blue, 40%) !default;
+$blue-400: color-functions.color-tint($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: color-functions.color-shade($blue, 20%) !default;
+$blue-700: color-functions.color-shade($blue, 40%) !default;
+$blue-800: color-functions.color-shade($blue, 60%) !default;
+$blue-900: color-functions.color-shade($blue, 80%) !default;
+
+$indigo-100: color-functions.color-tint($indigo, 80%) !default;
+$indigo-200: color-functions.color-tint($indigo, 60%) !default;
+$indigo-300: color-functions.color-tint($indigo, 40%) !default;
+$indigo-400: color-functions.color-tint($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: color-functions.color-shade($indigo, 20%) !default;
+$indigo-700: color-functions.color-shade($indigo, 40%) !default;
+$indigo-800: color-functions.color-shade($indigo, 60%) !default;
+$indigo-900: color-functions.color-shade($indigo, 80%) !default;
+
+$purple-100: color-functions.color-tint($purple, 80%) !default;
+$purple-200: color-functions.color-tint($purple, 60%) !default;
+$purple-300: color-functions.color-tint($purple, 40%) !default;
+$purple-400: color-functions.color-tint($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: color-functions.color-shade($purple, 20%) !default;
+$purple-700: color-functions.color-shade($purple, 40%) !default;
+$purple-800: color-functions.color-shade($purple, 60%) !default;
+$purple-900: color-functions.color-shade($purple, 80%) !default;
+
+$pink-100: color-functions.color-tint($pink, 80%) !default;
+$pink-200: color-functions.color-tint($pink, 60%) !default;
+$pink-300: color-functions.color-tint($pink, 40%) !default;
+$pink-400: color-functions.color-tint($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: color-functions.color-shade($pink, 20%) !default;
+$pink-700: color-functions.color-shade($pink, 40%) !default;
+$pink-800: color-functions.color-shade($pink, 60%) !default;
+$pink-900: color-functions.color-shade($pink, 80%) !default;
+
+$red-100: color-functions.color-tint($red, 80%) !default;
+$red-200: color-functions.color-tint($red, 60%) !default;
+$red-300: color-functions.color-tint($red, 40%) !default;
+$red-400: color-functions.color-tint($red, 20%) !default;
+$red-500: $red !default;
+$red-600: color-functions.color-shade($red, 20%) !default;
+$red-700: color-functions.color-shade($red, 40%) !default;
+$red-800: color-functions.color-shade($red, 60%) !default;
+$red-900: color-functions.color-shade($red, 80%) !default;
+
+$orange-100: color-functions.color-tint($orange, 80%) !default;
+$orange-200: color-functions.color-tint($orange, 60%) !default;
+$orange-300: color-functions.color-tint($orange, 40%) !default;
+$orange-400: color-functions.color-tint($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: color-functions.color-shade($orange, 20%) !default;
+$orange-700: color-functions.color-shade($orange, 40%) !default;
+$orange-800: color-functions.color-shade($orange, 60%) !default;
+$orange-900: color-functions.color-shade($orange, 80%) !default;
+
+$yellow-100: color-functions.color-tint($yellow, 80%) !default;
+$yellow-200: color-functions.color-tint($yellow, 60%) !default;
+$yellow-300: color-functions.color-tint($yellow, 40%) !default;
+$yellow-400: color-functions.color-tint($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: color-functions.color-shade($yellow, 20%) !default;
+$yellow-700: color-functions.color-shade($yellow, 40%) !default;
+$yellow-800: color-functions.color-shade($yellow, 60%) !default;
+$yellow-900: color-functions.color-shade($yellow, 80%) !default;
+
+$green-100: color-functions.color-tint($green, 80%) !default;
+$green-200: color-functions.color-tint($green, 60%) !default;
+$green-300: color-functions.color-tint($green, 40%) !default;
+$green-400: color-functions.color-tint($green, 20%) !default;
+$green-500: $green !default;
+$green-600: color-functions.color-shade($green, 20%) !default;
+$green-700: color-functions.color-shade($green, 40%) !default;
+$green-800: color-functions.color-shade($green, 60%) !default;
+$green-900: color-functions.color-shade($green, 80%) !default;
+
+$teal-100: color-functions.color-tint($teal, 80%) !default;
+$teal-200: color-functions.color-tint($teal, 60%) !default;
+$teal-300: color-functions.color-tint($teal, 40%) !default;
+$teal-400: color-functions.color-tint($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: color-functions.color-shade($teal, 20%) !default;
+$teal-700: color-functions.color-shade($teal, 40%) !default;
+$teal-800: color-functions.color-shade($teal, 60%) !default;
+$teal-900: color-functions.color-shade($teal, 80%) !default;
+
+$cyan-100: color-functions.color-tint($cyan, 80%) !default;
+$cyan-200: color-functions.color-tint($cyan, 60%) !default;
+$cyan-300: color-functions.color-tint($cyan, 40%) !default;
+$cyan-400: color-functions.color-tint($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: color-functions.color-shade($cyan, 20%) !default;
+$cyan-700: color-functions.color-shade($cyan, 40%) !default;
+$cyan-800: color-functions.color-shade($cyan, 60%) !default;
+$cyan-900: color-functions.color-shade($cyan, 80%) !default;

package/src/colors/_brands.scss

@@ -1,20 +1,34 @@
-$brand-facebook: #3b5998;
-$brand-youtube: #cc181e;
-$brand-twitter: #3cf;
-$brand-skype: #00aff0;
-$brand-linkedin: #1565c0;
-$brand-whatsapp: #4ac959;
-$brand-telegram: #08c;
-$brand-twitch: #6441a4;
-$brand-pinterest: #e60023;
-$brand-reddit: #ff4301;
-$brand-tumblr: #35465c;
-$brand-patreon: #f96854;
-$brand-kickstarter: #05ce78;
-$brand-instagram: #f09433;
-$brand-tiktok: #25f4ee;
-$brand-google: #dc4a38;
-$brand-paypal: #003087;
-$brand-paypal2: #f2b938;
-$gradient-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
-$gradient-brand-tiktok: linear-gradient(90deg, #25f4ee 0%, #000 30%, #000 50%, #000 70%, #fe2c55 100%);
+$brand-facebook: #3b5998;
+$brand-youtube: #cc181e;
+$brand-twitter: #3cf;
+$brand-skype: #00aff0;
+$brand-linkedin: #1565c0;
+$brand-whatsapp: #4ac959;
+$brand-telegram: #08c;
+$brand-twitch: #6441a4;
+$brand-pinterest: #e60023;
+$brand-reddit: #ff4301;
+$brand-tumblr: #35465c;
+$brand-patreon: #f96854;
+$brand-kickstarter: #05ce78;
+$brand-instagram: #f09433;
+$brand-tiktok: #25f4ee;
+$brand-google: #dc4a38;
+$brand-paypal: #003087;
+$brand-paypal2: #f2b938;
+$gradient-brand-instagram: linear-gradient(
+  45deg,
+  #f09433 0%,
+  #e6683c 25%,
+  #dc2743 50%,
+  #cc2366 75%,
+  #bc1888 100%
+);
+$gradient-brand-tiktok: linear-gradient(
+  90deg,
+  #25f4ee 0%,
+  #000 30%,
+  #000 50%,
+  #000 70%,
+  #fe2c55 100%
+);