@guebbit/css-toolkit 1.0.0

package/package.json

@@ -0,0 +1,326 @@
+{
+  "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"
+  }
+}

package/src/colors/_bootstrap.scss

@@ -0,0 +1,180 @@
+@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

@@ -0,0 +1,20 @@
+$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;
+$advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+$advanced-brand-tiktok: linear-gradient(90deg, #25f4ee 0%, #000 30%, #000 50%, #000 70%, #fe2c55 100%);

package/src/colors/_customs.scss

@@ -0,0 +1,53 @@
+@use "../functions/colors" as color-functions;
+
+$flatrica-green: #06a763 !default;
+$manga-red: #d41816 !default;
+
+$flatrica-green-100: color-functions.color-tint($flatrica-green, 80%);
+$flatrica-green-200: color-functions.color-tint($flatrica-green, 60%);
+$flatrica-green-300: color-functions.color-tint($flatrica-green, 40%);
+$flatrica-green-400: color-functions.color-tint($flatrica-green, 20%);
+$flatrica-green-500: $flatrica-green;
+$flatrica-green-600: color-functions.color-shade($flatrica-green, 20%);
+$flatrica-green-700: color-functions.color-shade($flatrica-green, 40%);
+$flatrica-green-800: color-functions.color-shade($flatrica-green, 60%);
+$flatrica-green-900: color-functions.color-shade($flatrica-green, 80%);
+
+$manga-red-100: color-functions.color-tint($manga-red, 80%);
+$manga-red-200: color-functions.color-tint($manga-red, 60%);
+$manga-red-300: color-functions.color-tint($manga-red, 40%);
+$manga-red-400: color-functions.color-tint($manga-red, 20%);
+$manga-red-500: $manga-red;
+$manga-red-600: color-functions.color-shade($manga-red, 20%);
+$manga-red-700: color-functions.color-shade($manga-red, 40%);
+$manga-red-800: color-functions.color-shade($manga-red, 60%);
+$manga-red-900: color-functions.color-shade($manga-red, 80%);
+
+$colors-collection: (
+        "core": (
+                "flatrica-green": $flatrica-green,
+                "manga-red": $manga-red,
+        ),
+        "flatrica-green": (
+                "100": $flatrica-green-100,
+                "200": $flatrica-green-200,
+                "300": $flatrica-green-300,
+                "400": $flatrica-green-400,
+                "500": $flatrica-green-500,
+                "600": $flatrica-green-600,
+                "700": $flatrica-green-700,
+                "800": $flatrica-green-800,
+                "900": $flatrica-green-900,
+        ),
+        "manga-red": (
+                "100": $manga-red-100,
+                "200": $manga-red-200,
+                "300": $manga-red-300,
+                "400": $manga-red-400,
+                "500": $manga-red-500,
+                "600": $manga-red-600,
+                "700": $manga-red-700,
+                "800": $manga-red-800,
+                "900": $manga-red-900,
+        ),
+);