{"id":18254279,"url":"https://github.com/brikcss/colors","last_synced_at":"2025-04-08T21:47:27.981Z","repository":{"id":143745453,"uuid":"136046463","full_name":"brikcss/colors","owner":"brikcss","description":"Colors component to make managing colors in CSS easier.","archived":false,"fork":false,"pushed_at":"2018-11-08T20:42:38.000Z","size":219,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T13:18:45.424Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brikcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-04T15:34:41.000Z","updated_at":"2018-06-06T16:39:35.000Z","dependencies_parsed_at":"2023-07-01T08:16:39.233Z","dependency_job_id":null,"html_url":"https://github.com/brikcss/colors","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcolors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcolors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcolors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcolors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/colors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934808,"owners_count":21020724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T10:11:21.903Z","updated_at":"2025-04-08T21:47:27.962Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Colors\n\n\u003c!-- Shields. --\u003e\n\u003cp\u003e\n\t\u003c!-- NPM version. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/colors\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/colors.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- NPM downloads/month. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/colors\"\u003e\n\t\t\u003cimg alt=\"NPM downloads per month\" src=\"https://img.shields.io/npm/dm/@brikcss/colors.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Travis branch. --\u003e\n\t\u003ca href=\"https://github.com/brikcss/colors/tree/master\"\u003e\n\t\t\u003cimg alt=\"Travis branch\" src=\"https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Codacy. --\u003e\n\t\u003ca href=\"https://www.codacy.com/app/thezimmee/colors\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/codacy/grade/06fcf37293d24f0ab692ed946d6072ee/master.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Coveralls --\u003e\n\t\u003ca href='https://coveralls.io/github/brikcss/colors?branch=master'\u003e\n\t\t\u003cimg src='https://img.shields.io/coveralls/github/brikcss/colors/master.svg?style=flat-square' alt='Coverage Status' /\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Commitizen friendly. --\u003e\n\t\u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n\t\t\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Semantic release. --\u003e\n\t\u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n\t\t\u003cimg alt=\"semantic release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Prettier code style. --\u003e\n\t\u003ca href=\"https://prettier.io/\"\u003e\n\t\t\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- MIT License. --\u003e\n\t\u003c!-- \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n\t\t\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/express.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\nColors component to make creating and managing color class and variables in CSS easier.\n\n---\n\n## Environment and browser support\n\n| Node   | CLI   | UMD   | ES Module | Browser   |\n|:------:|:-----:|:-----:|:---------:|:---------:|\n| x      | x     | x     | x         | ✓         |\n\n| Chrome | Firefox | Safari | Edge | IE  | iOS | Android |\n|:------:|:-------:|:------:|:----:|:---:|:---:|:-------:|\n| ✓      | ✓       | ✓      | ✓    | 11  | ✓   | ✓       |\n\n\\* _Note: Since uses [CSS Variables](https://caniuse.com/#search=css%20variables) are used, IE11 is supported with the use of a custom variables polyfill, such as [postcss-var-shim](https://github.com/luwes/postcss-var-shim)._\n\n## Install\n\n1. Install:\n\n\t```sh\n\tnpm i -D @brikcss/colors\n\t```\n\n2. Include file(s) in your app:\n\n\t- _PostCSS:_ `@import '@brikcss/colors';` with [postcss-import](https://github.com/postcss/postcss-import).\n\t- _Precompiled:_ Include `./dist/colors.min.css` for the precompiled version (i.e., no PostCSS required).\n\t- _Custom:_ To generate your own color variables and classes, use the [colors @mixin](./src/mixins/colors.js) and follow the [source CSS](./src/colors.css).\n\n## Colors mixin usage\n\nThe [colors mixin](./src/mixins/colors.js) allows you to generate your own custom color variables and classes in one easy step. _See [postcss-mixins](https://github.com/postcss/postcss-mixins) for documentation on how to configure and use PostCSS mixins._\n\nSample input:\n\n```css\n@mixin colors {\n\t/* CSS variables are created for each color value. */\n\tbrand1: red;\n\tbrand2: blue;\n\ttext: white;\n\n\t/* Rules are created for each value in its `colors` property. */\n\t.color- {\n\t\tcolors: text;\n\t\tcolor: color();\n\t}\n\t.bg- {\n\t\tcolors: brand1 brand2;\n\t\tbackground-color: color();\n\t\tfill: color();\n\t\tcolor: var(--color__text);\n\t}\n}\n```\n\nOutput:\n\n```css\n:root {\n\t--color__brand1: red;\n\t--color__brand2: blue;\n\t--color__text: white;\n}\n\n.color-text {\n\tcolor: var(--color__text);\n}\n\n.bg-brand1 {\n\tbackground-color: var(--color__brand1);\n\tfill: var(--color__brand1);\n\tcolor: var(--color__text);\n}\n\n.bg-brand2 {\n\tbackground-color: var(--color__brand2);\n\tfill: var(--color__brand2);\n\tcolor: var(--color__text);\n}\n```\n\n### Options\n\n- *addVariables*  _{Boolean|String}_  `true`  Set to `false` to disable adding CSS variables and only add rules. You may also pass a String to change the default `color__` CSS variable prefix. For example:\n\n\t```\n\t@mixin colors my-color- {...}\n\t```\n\n\twill generate CSS variables like this:\n\n\t```\n\t--my-color-\u003ccolor-name\u003e: \u003ccolor-value\u003e;\n\t```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fcolors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Fcolors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fcolors/lists"}