@carbon/colors
Advanced tools
Comparing version
{ | ||
"name": "@carbon/colors", | ||
"description": "Colors for digital and software products using the Carbon Design System", | ||
"version": "10.0.0", | ||
"version": "10.1.0", | ||
"license": "Apache-2.0", | ||
@@ -28,7 +28,7 @@ "main": "lib/index.js", | ||
"scripts": { | ||
"build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js && bundler check 'scss/*.scss'", | ||
"build": "yarn clean && bundler bundle src/index.js --name CarbonColors && node tasks/build.js && bundler check 'scss/*.scss' && bundler sassdoc 'scss'", | ||
"clean": "rimraf css es lib umd scss" | ||
}, | ||
"devDependencies": { | ||
"@carbon/bundler": "10.0.0", | ||
"@carbon/bundler": "10.1.0", | ||
"@carbon/cli-reporter": "10.0.0", | ||
@@ -48,3 +48,3 @@ "@carbon/test-utils": "10.0.0", | ||
}, | ||
"gitHead": "dc500192d7844e5948e62c9fd8d49bfce0f27cb9" | ||
"gitHead": "ed0a7fd543348777a3ca09a9e0588714b792b006" | ||
} |
@@ -35,7 +35,6 @@ # @carbon/colors | ||
This file automatically includes the `carbon--colors` mixin which initializes | ||
all the color variables for the IBM Design Language. | ||
This file automatically includes the `carbon--colors` mixin which | ||
initializes all the color variables for the IBM Design Language. | ||
These color variables follow the naming convention: `$carbon--<swatch>-<grade>`. | ||
For example: | ||
These color variables follow the naming convention: `$carbon--<swatch>-<grade>`. For example: | ||
@@ -49,4 +48,3 @@ ```scss | ||
You can also use the shorthand form of these colors by dropping the `carbon--` | ||
namespace: | ||
You can also use the shorthand form of these colors by dropping the `carbon--` namespace: | ||
@@ -61,7 +59,9 @@ ```scss | ||
_Note: the shorthand variables require that you do not have any other | ||
conflicting variables in your setup. Namespaced variables are always preferred | ||
for this reason, unless you are confident that no collisions will occur._ | ||
conflicting variables in your setup. Namespaced variables are always | ||
preferred for this reason, unless you are confident that no collisions | ||
will occur._ | ||
If you would like you choose when these variables are defined, then you can call | ||
the `carbon--colors` mixin directly by importing the following file: | ||
If you would like you choose when these variables are defined, then | ||
you can call the `carbon--colors` mixin directly by importing the | ||
following file: | ||
@@ -75,9 +75,10 @@ ```scss | ||
Alongside the color variables detailed above, we also provide a map of colors so | ||
that you can programmatically use these values. This map is called | ||
`$carbon--colors` and each key is the name of a swatch. The value of these | ||
swatches is also a map, but each key is now the grade. In code, this looks like | ||
the following: | ||
Alongside the color variables detailed above, we also provide a map of | ||
colors so that you can programmatically use these values. This map is | ||
called `$carbon--colors` and each key is the name of a swatch. The | ||
value of these swatches is also a map, but each key is now the grade. | ||
In code, this looks like the following: | ||
<!-- prettier-ignore-start --> | ||
```scss | ||
@@ -91,17 +92,18 @@ $carbon--colors: ( | ||
``` | ||
<!-- prettier-ignore-end --> | ||
You can include this variable by including `@carbon/colors/scss/colors` or | ||
calling the `carbon--colors()` mixin directly. | ||
You can include this variable by including `@carbon/colors/scss/colors` | ||
or calling the `carbon--colors()` mixin directly. | ||
#### Migrating from previous versions | ||
If you were originally using a project that had color variables defined as | ||
`$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also | ||
use the entrypoint described above to access these colors. They are meant as an | ||
easier way to help adopt these packages. However, these variables will be removed | ||
in the next release of Carbon. | ||
If you were originally using a project that had color variables | ||
defined as `$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also use the entrypoint described above to | ||
access these colors. They are meant as an easier way to help adopt | ||
these packages. However, these variables will be removed in the next | ||
release of Carbon. | ||
Similar to previous efforts, we also provide colors in the formats mentioned | ||
above. For example: | ||
Similar to previous efforts, we also provide colors in the formats | ||
mentioned above. For example: | ||
@@ -145,2 +147,8 @@ ```scss | ||
## 📖 API Documentation | ||
If you're looking for `@carbon/colors` API documentation, check out: | ||
- [Sass](./docs/sass.md) | ||
## 🙌 Contributing | ||
@@ -147,0 +155,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
77926
26.39%9
12.5%158
5.33%