@guebbit/css-toolkit 1.0.0 → 1.1.0

package/README.md

@@ -2,4 +2,5 @@
 A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development 
 
 # TODO
-create an automatic functions for gradients
+ - create an automatic functions for gradients
+ - More tests. For every function or mixin.

package/package.json

@@ -1,326 +1,57 @@
-{
-  "name": "@guebbit/css-toolkit",
-  "type": "module",
-  "version": "1.0.0",
-  "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
-  "main": "vite.config.js",
-  "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": "^20.11.0",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "autoprefixer": "^10.4.16",
-    "breakpoint-sass": "^3.0.0",
-    "css-loader": "^6.9.0",
-    "cssnano": "^6.0.3",
-    "mocha": "^10.1.0",
-    "postcss": "^8.4.33",
-    "postcss-loader": "^7.3.4",
-    "postcss-prefix-selector": "^1.16.0",
-    "sass": "^1.69.7",
-    "style-loader": "^3.3.4",
-    "stylelint": "^16.1.0",
-    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-scss": "^6.0.0",
-    "vite": "^5.0.11",
-    "vitepress": "^1.0.0-rc.36"
-  },
-  "directories": {
-    "doc": "docs",
-    "test": "test"
-  },
-  "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": {
-    "acorn": "^8.11.3",
-    "acorn-import-assertions": "^1.9.0",
-    "ajv": "^8.12.0",
-    "algoliasearch": "^4.22.1",
-    "ansi-colors": "^4.1.1",
-    "ansi-regex": "^6.0.1",
-    "ansi-styles": "^4.3.0",
-    "anymatch": "^3.1.3",
-    "argparse": "^2.0.1",
-    "array-union": "^2.1.0",
-    "astral-regex": "^2.0.0",
-    "balanced-match": "^1.0.2",
-    "binary-extensions": "^2.2.0",
-    "boolbase": "^1.0.0",
-    "brace-expansion": "^2.0.1",
-    "braces": "^3.0.2",
-    "browser-stdout": "^1.3.1",
-    "browserslist": "^4.23.0",
-    "buffer-from": "^1.1.2",
-    "callsites": "^3.1.0",
-    "camelcase": "^6.3.0",
-    "caniuse-api": "^3.0.0",
-    "caniuse-lite": "^1.0.30001588",
-    "chalk": "^4.1.2",
-    "chokidar": "^3.5.3",
-    "chrome-trace-event": "^1.0.3",
-    "cliui": "^7.0.4",
-    "color-convert": "^2.0.1",
-    "color-name": "^1.1.4",
-    "colord": "^2.9.3",
-    "commander": "^7.2.0",
-    "cosmiconfig": "^8.3.6",
-    "cross-spawn": "^7.0.3",
-    "css-declaration-sorter": "^7.1.1",
-    "css-functions-list": "^3.2.1",
-    "css-select": "^5.1.0",
-    "css-tree": "^2.3.1",
-    "css-what": "^6.1.0",
-    "cssesc": "^3.0.0",
-    "cssnano-preset-default": "^6.0.3",
-    "cssnano-utils": "^4.0.1",
-    "csso": "^5.0.5",
-    "csstype": "^3.1.3",
-    "debug": "^4.3.4",
-    "decamelize": "^4.0.0",
-    "diff": "^5.0.0",
-    "dir-glob": "^3.0.1",
-    "dom-serializer": "^2.0.0",
-    "domelementtype": "^2.3.0",
-    "domhandler": "^5.0.3",
-    "domutils": "^3.1.0",
-    "eastasianwidth": "^0.2.0",
-    "electron-to-chromium": "^1.4.674",
-    "emoji-regex": "^8.0.0",
-    "enhanced-resolve": "^5.15.0",
-    "entities": "^4.5.0",
-    "env-paths": "^2.2.1",
-    "error-ex": "^1.3.2",
-    "es-module-lexer": "^1.4.1",
-    "esbuild": "^0.19.12",
-    "escalade": "^3.1.2",
-    "escape-string-regexp": "^4.0.0",
-    "eslint-scope": "^5.1.1",
-    "esrecurse": "^4.3.0",
-    "estraverse": "^4.3.0",
-    "estree-walker": "^2.0.2",
-    "events": "^3.3.0",
-    "fast-deep-equal": "^3.1.3",
-    "fast-glob": "^3.3.2",
-    "fast-json-stable-stringify": "^2.1.0",
-    "fastest-levenshtein": "^1.0.16",
-    "fastq": "^1.17.1",
-    "file-entry-cache": "^8.0.0",
-    "fill-range": "^7.0.1",
-    "find-up": "^5.0.0",
-    "flat": "^5.0.2",
-    "flat-cache": "^4.0.0",
-    "flatted": "^3.2.9",
-    "focus-trap": "^7.5.4",
-    "foreground-child": "^3.1.1",
-    "fraction.js": "^4.3.7",
-    "fs.realpath": "^1.0.0",
-    "get-caller-file": "^2.0.5",
-    "glob": "^8.1.0",
-    "glob-parent": "^5.1.2",
-    "glob-to-regexp": "^0.4.1",
-    "global-modules": "^2.0.0",
-    "global-prefix": "^3.0.0",
-    "globby": "^11.1.0",
-    "globjoin": "^0.1.4",
-    "graceful-fs": "^4.2.11",
-    "has-flag": "^4.0.0",
-    "he": "^1.2.0",
-    "hookable": "^5.5.3",
-    "html-tags": "^3.3.1",
-    "icss-utils": "^5.1.0",
-    "ignore": "^5.3.1",
-    "immutable": "^4.3.5",
-    "import-fresh": "^3.3.0",
-    "imurmurhash": "^0.1.4",
-    "inflight": "^1.0.6",
-    "inherits": "^2.0.4",
-    "ini": "^1.3.8",
-    "is-arrayish": "^0.2.1",
-    "is-binary-path": "^2.1.0",
-    "is-extglob": "^2.1.1",
-    "is-fullwidth-code-point": "^3.0.0",
-    "is-glob": "^4.0.3",
-    "is-number": "^7.0.0",
-    "is-plain-obj": "^2.1.0",
-    "is-plain-object": "^5.0.0",
-    "is-unicode-supported": "^0.1.0",
-    "isexe": "^2.0.0",
-    "jackspeak": "^2.3.6",
-    "jest-worker": "^27.5.1",
-    "jiti": "^1.21.0",
-    "js-tokens": "^4.0.0",
-    "js-yaml": "^4.1.0",
-    "json-buffer": "^3.0.1",
-    "json-parse-even-better-errors": "^2.3.1",
-    "json-schema-traverse": "^1.0.0",
-    "keyv": "^4.5.4",
-    "kind-of": "^6.0.3",
-    "known-css-properties": "^0.29.0",
-    "lilconfig": "^3.1.1",
-    "lines-and-columns": "^1.2.4",
-    "loader-runner": "^4.3.0",
-    "locate-path": "^6.0.0",
-    "lodash.memoize": "^4.1.2",
-    "lodash.truncate": "^4.4.2",
-    "lodash.uniq": "^4.5.0",
-    "log-symbols": "^4.1.0",
-    "lru-cache": "^6.0.0",
-    "magic-string": "^0.30.7",
-    "mark.js": "^8.11.1",
-    "mathml-tag-names": "^2.1.3",
-    "mdn-data": "^2.0.30",
-    "meow": "^13.2.0",
-    "merge-stream": "^2.0.0",
-    "merge2": "^1.4.1",
-    "micromatch": "^4.0.5",
-    "mime-db": "^1.52.0",
-    "mime-types": "^2.1.35",
-    "minimatch": "^5.0.1",
-    "minipass": "^7.0.4",
-    "minisearch": "^6.3.0",
-    "mitt": "^3.0.1",
-    "ms": "^2.1.3",
-    "nanoid": "^3.3.7",
-    "neo-async": "^2.6.2",
-    "node-releases": "^2.0.14",
-    "normalize-path": "^3.0.0",
-    "normalize-range": "^0.1.2",
-    "nth-check": "^2.1.1",
-    "once": "^1.4.0",
-    "p-limit": "^3.1.0",
-    "p-locate": "^5.0.0",
-    "parent-module": "^1.0.1",
-    "parse-json": "^5.2.0",
-    "path-exists": "^4.0.0",
-    "path-key": "^3.1.1",
-    "path-scurry": "^1.10.1",
-    "path-type": "^4.0.0",
-    "perfect-debounce": "^1.0.0",
-    "picocolors": "^1.0.0",
-    "picomatch": "^2.3.1",
-    "postcss-calc": "^9.0.1",
-    "postcss-colormin": "^6.0.2",
-    "postcss-convert-values": "^6.0.2",
-    "postcss-discard-comments": "^6.0.1",
-    "postcss-discard-duplicates": "^6.0.1",
-    "postcss-discard-empty": "^6.0.1",
-    "postcss-discard-overridden": "^6.0.1",
-    "postcss-media-query-parser": "^0.2.3",
-    "postcss-merge-longhand": "^6.0.2",
-    "postcss-merge-rules": "^6.0.3",
-    "postcss-minify-font-values": "^6.0.1",
-    "postcss-minify-gradients": "^6.0.1",
-    "postcss-minify-params": "^6.0.2",
-    "postcss-minify-selectors": "^6.0.2",
-    "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.4",
-    "postcss-modules-scope": "^3.1.1",
-    "postcss-modules-values": "^4.0.0",
-    "postcss-normalize-charset": "^6.0.1",
-    "postcss-normalize-display-values": "^6.0.1",
-    "postcss-normalize-positions": "^6.0.1",
-    "postcss-normalize-repeat-style": "^6.0.1",
-    "postcss-normalize-string": "^6.0.1",
-    "postcss-normalize-timing-functions": "^6.0.1",
-    "postcss-normalize-unicode": "^6.0.2",
-    "postcss-normalize-url": "^6.0.1",
-    "postcss-normalize-whitespace": "^6.0.1",
-    "postcss-ordered-values": "^6.0.1",
-    "postcss-reduce-initial": "^6.0.2",
-    "postcss-reduce-transforms": "^6.0.1",
-    "postcss-resolve-nested-selector": "^0.1.1",
-    "postcss-safe-parser": "^7.0.0",
-    "postcss-scss": "^4.0.9",
-    "postcss-selector-parser": "^6.0.15",
-    "postcss-svgo": "^6.0.2",
-    "postcss-unique-selectors": "^6.0.2",
-    "postcss-value-parser": "^4.2.0",
-    "preact": "^10.19.5",
-    "punycode": "^2.3.1",
-    "queue-microtask": "^1.2.3",
-    "randombytes": "^2.1.0",
-    "readdirp": "^3.6.0",
-    "require-directory": "^2.1.1",
-    "require-from-string": "^2.0.2",
-    "resolve-from": "^4.0.0",
-    "reusify": "^1.0.4",
-    "rfdc": "^1.3.1",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.12.0",
-    "run-parallel": "^1.2.0",
-    "safe-buffer": "^5.2.1",
-    "schema-utils": "^3.3.0",
-    "search-insights": "^2.13.0",
-    "semver": "^7.6.0",
-    "serialize-javascript": "^6.0.0",
-    "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
-    "shiki": "^1.1.5",
-    "signal-exit": "^4.1.0",
-    "slash": "^3.0.0",
-    "slice-ansi": "^4.0.0",
-    "source-map": "^0.6.1",
-    "source-map-js": "^1.0.2",
-    "source-map-support": "^0.5.21",
-    "speakingurl": "^14.0.1",
-    "string-width": "^4.2.3",
-    "string-width-cjs": "^4.2.3",
-    "strip-ansi": "^7.1.0",
-    "strip-ansi-cjs": "^6.0.1",
-    "strip-json-comments": "^3.1.1",
-    "stylehacks": "^6.0.2",
-    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard": "^36.0.0",
-    "supports-color": "^8.1.1",
-    "supports-hyperlinks": "^3.0.0",
-    "svg-tags": "^1.0.0",
-    "svgo": "^3.2.0",
-    "tabbable": "^6.2.0",
-    "table": "^6.8.1",
-    "tapable": "^2.2.1",
-    "terser": "^5.27.2",
-    "terser-webpack-plugin": "^5.3.10",
-    "to-regex-range": "^5.0.1",
-    "undici-types": "^5.26.5",
-    "update-browserslist-db": "^1.0.13",
-    "uri-js": "^4.4.1",
-    "util-deprecate": "^1.0.2",
-    "vue": "^3.4.19",
-    "watchpack": "^2.4.0",
-    "webpack": "^5.90.3",
-    "webpack-sources": "^3.2.3",
-    "which": "^1.3.1",
-    "workerpool": "^6.2.1",
-    "wrap-ansi": "^7.0.0",
-    "wrap-ansi-cjs": "^7.0.0",
-    "wrappy": "^1.0.2",
-    "write-file-atomic": "^5.0.1",
-    "y18n": "^5.0.8",
-    "yallist": "^4.0.0",
-    "yargs": "^16.2.0",
-    "yargs-parser": "^20.2.4",
-    "yargs-unparser": "^2.0.0",
-    "yocto-queue": "^0.1.0"
-  }
-}
+{
+  "name": "@guebbit/css-toolkit",
+  "type": "module",
+  "version": "1.1.0",
+  "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
+  "main": "vite.config.js",
+  "files": [
+    "index.scss",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG"
+  ],
+  "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": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "autoprefixer": "^10.4.16",
+    "breakpoint-sass": "^3.0.0",
+    "chai": "^5.1.1",
+    "css-loader": "^6.9.0",
+    "cssnano": "^6.0.3",
+    "mocha": "^10.1.0",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^7.3.4",
+    "postcss-prefix-selector": "^1.16.0",
+    "sass": "^1.69.7",
+    "style-loader": "^3.3.4",
+    "stylelint": "^16.1.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-scss": "^6.0.0",
+    "vite": "^5.0.11",
+    "vitepress": "^1.0.0-rc.36"
+  },
+  "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"
+}

package/.stylelintignore

@@ -1,2 +0,0 @@
-docs/workbench.scss
-docs/workbench.md

package/.stylelintrc.json

@@ -1,23 +0,0 @@
-{
-  "customSyntax": "postcss-scss",
-  "plugins": [
-    "stylelint-scss"
-  ],
-  "reporters": [
-    {
-      "formatter": "stylelint-mocha-formatter"
-    }
-  ],
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier-scss"
-  ],
-  "rules": {
-    "scss/no-global-function-names": null,
-    "scss/double-slash-comment-empty-line-before": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "no-descending-specificity": null,
-    "scss/at-extend-no-missing-placeholder": null,
-    "scss/percent-placeholder-pattern": null
-  }
-}

package/docs/.postcssrc.cjs

@@ -1,12 +0,0 @@
-module.exports = {
-    plugins: {
-        'postcss-prefix-selector': {
-            prefix: ':not(:where(.vp-raw *))',
-            includeFiles: [/vp-doc\.css/],
-            transform(prefix, _selector) {
-                const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
-                return selector + prefix + pseudo
-            }
-        }
-    }
-}

package/docs/.vitepress/config.ts

@@ -1,89 +0,0 @@
-import { defineConfig } from 'vitepress';
-
-export default defineConfig({
-    lang: "en-US",
-    title: "Guebbit SCSS Library",
-    titleTemplate: ":title - base SCSS plus components",
-    description: "Guebbit's personal SCSS Library (MIT license, free to use).",
-    themeConfig: {
-        logo: "/logotype.svg",
-        siteTitle: "SCSS Library",
-        search: {
-            provider: 'local'
-        },
-        nav: [
-            {
-                text: 'Github',
-                link: 'https://github.com/Guebbit/css-toolkit',
-            },
-        ],
-        sidebar: [
-            {
-                text: 'Colors',
-                collapsed: false,
-                items: [
-                    {
-                        text: 'Bootstrap',
-                        link: '/colors/bootstrap.md',
-                    },
-                    {
-                        text: 'Brands',
-                        link: '/colors/brands.md',
-                    },
-                    {
-                        text: 'Gradients',
-                        link: '/colors/customs.md',
-                    }
-                ]
-            },
-            {
-                text: 'Functions',
-                collapsed: false,
-                items: [
-                    {
-                        text: 'Colors',
-                        link: '/functions/colors.md',
-                    },
-                    {
-                        text: 'Helpers',
-                        link: '/functions/helpers.md',
-                    }
-                ]
-            },
-            {
-                text: 'Mixins',
-                collapsed: false,
-                items: [
-                    {
-                        text: 'Build Aspect Ratio',
-                        link: '/mixins/build-aspect-ratio.md',
-                    },
-                    {
-                        text: 'Build Compatibility',
-                        link: '/mixins/build-compatibility.md',
-                    },
-                    {
-                        text: 'Build Scrollbar',
-                        link: '/mixins/build-scrollbar.md',
-                    },
-                    {
-                        text: 'Create Colors',
-                        link: '/mixins/create-colors.md',
-                    },
-                    {
-                        text: 'Create Size instruction',
-                        link: '/mixins/create-instruction.md',
-                    },
-                    {
-                        text: 'Create Margin helper',
-                        link: '/mixins/create-helper-margin.md',
-                    },
-                    {
-                        text: 'Create Padding helper',
-                        link: '/mixins/create-helper-padding.md',
-                    }
-                ]
-            },
-        ]
-    }
-})

package/docs/.vitepress/theme/index.js

@@ -1,12 +0,0 @@
-import DefaultTheme from "vitepress/theme";
-
-export default {
-    ...DefaultTheme,
-    /*
-    Layout() {
-        return h(DefaultTheme.Layout, null, {
-            'aside-outline-before': () => h(MyComponent)
-        })
-    }
-    */
-}

package/docs/colors/bootstrap.md

@@ -1 +0,0 @@
-# TODO

package/docs/colors/brands.md

@@ -1 +0,0 @@
-# TODO

package/docs/colors/customs.md

@@ -1 +0,0 @@
-# TODO

package/docs/functions/colors.md

@@ -1,66 +0,0 @@
-# Colors
-
-https://blog.logrocket.com/using-hsl-colors-css/#what-hsl
-https://blog.logrocket.com/building-color-palette-css/#60-30-10-design-rule
-
-## color-brightness
-
-Gives %, less than 50 darker is better, less than 50, lighter.
-
-```scss
-@if(color-brightness($color) > 50)
-```
-
-```scss
-@function color-brightness($color) {
-  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
-}
-```
-
-| Variable  | Description    | Accepted Values | Default |
-|:----------|:---------------|:----------------|:--------|
-| `$color`  | Color to check | `color`         | `none`  |
-
-
-
-## color-contrast
-
-Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
-
-```scss
-background-color: $background;
-color: color-contrast($background);
-```
-
-```scss
-@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
-  $color-brightness: color-brightness($color);
-  $light-text-brightness: color-brightness($light);
-  $dark-text-brightness: color-brightness($dark);
-
-  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
-}
-```
-
-## color-hex2rgba
-
-Convert HEX color to RGBA color
-
-```scss
-color: color-hex2rgba(#00ff00, 0.5);
-```
-
-## color-hex2rgbcore
-
-Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
-
-```scss
---custom-var: color-hex2rgbcore(#00ff00);
-```
-
-
-| Variable | Description          | Accepted Values | Default |
-|:---------|:---------------------|:----------------|:--------|
-| `$color` | Color to check       | `color`         | `4px`   |
-| `$dark`  | Dark color to apply  | `color`         | `#000`  |
-| `$light` | White color to apply | `color`         | `#fff`  |

package/docs/functions/helpers.md

@@ -1 +0,0 @@
-# TODO

package/docs/functions/strings.md

@@ -1 +0,0 @@
-# TODO

package/docs/index.md

@@ -1 +0,0 @@
-<!-- @include: ../README.md -->