{"_id":"@edwin-coder-arquitech/colors","name":"@edwin-coder-arquitech/colors","dist-tags":{"latest":"11.29.0"},"versions":{"11.29.0":{"name":"@edwin-coder-arquitech/colors","description":"Colors for digital and software products using the Carbon Design System","version":"11.29.0","license":"Apache-2.0","main":"lib/index.js","module":"es/index.js","repository":{"type":"git","url":"git+https://github.com/carbon-design-system/carbon.git","directory":"packages/colors"},"bugs":{"url":"https://github.com/carbon-design-system/carbon/issues"},"keywords":["eyeglass-module","ibm","elements","carbon","carbon-elements","carbon-design-system","components","react"],"publishConfig":{"access":"public","provenance":true},"scripts":{"build":"yarn clean && carbon-cli bundle src/index.js --name CarbonColors && node tasks/build.js && carbon-cli check \"scss/*.scss\"","clean":"rimraf css es lib umd scss index.scss","postinstall":"ibmtelemetry --config=telemetry.yml"},"devDependencies":{"@edwin-coder-arquitech/cli":"^11.23.0","@edwin-coder-arquitech/cli-reporter":"^10.7.0","@edwin-coder-arquitech/scss-generator":"^10.19.0","@edwin-coder-arquitech/test-utils":"^10.35.0","change-case":"^4.1.1","fs-extra":"^11.0.0","rimraf":"^6.0.0"},"sideEffects":false,"eyeglass":{"exports":false,"name":"@edwin-coder-arquitech/colors","sassDir":"scss","needs":"^1.3.0"},"dependencies":{"@ibm/telemetry-js":"^1.5.0"},"_id":"@edwin-coder-arquitech/colors@11.29.0","gitHead":"fd1b7ab668473833c250488e0f7fc4feb55f1d88","homepage":"https://github.com/carbon-design-system/carbon#readme","_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-8oVKj12Y7m8+mT7YvIZbxC1koevh+D8XrP4L3vi1ZvLaXQihruI6f28tupq9T8Z5VRPk2D90DHjZGXZEklebvQ==","shasum":"d0d2e1c6a12896f6c40bbb5adcc0c212bc2b7153","tarball":"https://registry.npmjs.org/@edwin-coder-arquitech/colors/-/colors-11.29.0.tgz","fileCount":3,"unpackedSize":5445,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICS0gjmY9Poe1MsNGfUFPixCEhH365sY7I2ZF0gWA+ZCAiBem/AEzEVyEmTe6dvamOREfMfYl80DEUZ4VlViZ3Vl5w=="}]},"_npmUser":{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"},"directories":{},"maintainers":[{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/colors_11.29.0_1739621868317_0.4732079411405501"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-15T12:17:48.195Z","11.29.0":"2025-02-15T12:17:48.507Z","modified":"2025-02-15T12:17:48.807Z"},"maintainers":[{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"}],"description":"Colors for digital and software products using the Carbon Design System","homepage":"https://github.com/carbon-design-system/carbon#readme","keywords":["eyeglass-module","ibm","elements","carbon","carbon-elements","carbon-design-system","components","react"],"repository":{"type":"git","url":"git+https://github.com/carbon-design-system/carbon.git","directory":"packages/colors"},"bugs":{"url":"https://github.com/carbon-design-system/carbon/issues"},"license":"Apache-2.0","readme":"# @carbon/colors\r\n\r\n> Colors for digital and software products using the Carbon Design System\r\n\r\n## Getting started\r\n\r\nTo install `@carbon/colors` in your project, you will need to run the following\r\ncommand using [npm](https://www.npmjs.com/):\r\n\r\n```bash\r\nnpm install -S @carbon/colors\r\n```\r\n\r\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command\r\ninstead:\r\n\r\n```bash\r\nyarn add @carbon/colors\r\n```\r\n\r\n## Usage\r\n\r\nYou can use the `@carbon/colors` module in your JavaScript, in addition to your\r\nSass.\r\n\r\n### Sass\r\n\r\nIn Sass, you can import the files individual by doing:\r\n\r\n```scss\r\n@use '@carbon/colors';\r\n\r\n// Another way if using `@carbon/react\r\n@use '@carbon/react/scss/colors';\r\n```\r\n\r\nThese color variables follow the naming convention: `<swatch>-<grade>`. For\r\nexample:\r\n\r\n```scss\r\ncolors.$blue-50;\r\ncolors.$cool-gray-10;\r\ncolors.$black-100;\r\ncolors.$white-0;\r\n```\r\n\r\nAlongside the color variables detailed above, we also provide a map of colors so\r\nthat you can programmatically use these values. This map is called `$colors` and\r\neach key is the name of a swatch. The value of these swatches is also a map, but\r\neach key is now the grade. In code, this looks like the following:\r\n\r\n<!-- prettier-ignore-start -->\r\n\r\n```scss\r\n$colors: (\r\n  'blue': (\r\n    10: #edf4ff,\r\n    // ...\r\n  )\r\n);\r\n```\r\n\r\n<!-- prettier-ignore-end -->\r\n\r\n### JavaScript\r\n\r\nFor JavaScript, you can import and use this module by doing the following in\r\nyour code:\r\n\r\n```js\r\n// ESM\r\nimport { black, blue, warmGray } from '@carbon/colors';\r\n\r\n// CommonJS\r\nconst { black, blue, warmGray } = require('@carbon/colors');\r\n```\r\n\r\nEach color swatch is exported as a variable, and each color name is also\r\nexported as an object that can be called by specifying grade, for example:\r\n\r\n```js\r\nblack;\r\nblue[50]; // Using the `blue` object.\r\nwarmGray100; // Using the `warmGray100` variable.\r\n```\r\n\r\n## 📚 Examples\r\n\r\nIf you're looking for more examples on how to use `@carbon/colors`, we have some\r\nexamples that you can check out:\r\n\r\n- [sass-modules](./examples/sass-modules)\r\n\r\n## 🙌 Contributing\r\n\r\nWe're always looking for contributors to help us fix bugs, build new features,\r\nor help us improve the project documentation. If you're interested, definitely\r\ncheck out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀\r\n\r\n## 📝 License\r\n\r\nLicensed under the [Apache 2.0 License](/LICENSE).\r\n\r\n## <picture><source height=\"20\" width=\"20\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg\"><source height=\"20\" width=\"20\" media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"><img height=\"20\" width=\"20\" alt=\"IBM Telemetry\" src=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"></picture> IBM Telemetry\r\n\r\nThis package uses IBM Telemetry to collect de-identified and anonymized metrics\r\ndata. By installing this package as a dependency you are agreeing to telemetry\r\ncollection. To opt out, see\r\n[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).\r\nFor more information on the data being collected, please see the\r\n[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).\r\n","readmeFilename":"README.md"}