Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(@carbon/colors): Update carbon colors documentation #16193

Merged
merged 2 commits into from
Apr 15, 2024
Merged

docs(@carbon/colors): Update carbon colors documentation #16193

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
022f3f9
docs(@carbon/colors): update documentation for v11
tw15egan Apr 12, 2024
80afc34
docs(@carbon/colors): update more documentation
tw15egan Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 13 additions & 66 deletions packages/colors/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,56 +28,31 @@ Sass.
In Sass, you can import the files individual by doing:

```scss
@import '@carbon/colors/scss/colors';
```

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:
@use '@carbon/colors';

```scss
$carbon--blue-50;
$carbon--cool-gray-10;
$carbon--black-100;
$carbon--white-0;
// Another way if using `@carbon/react
@use '@carbon/react/scss/colors';
```

You can also use the shorthand form of these colors by dropping the `carbon--`
namespace:
These color variables follow the naming convention: `<swatch>-<grade>`. For
example:

```scss
$blue-50;
$cool-gray-10;
$black-100;
$white-0;
```

_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._

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:

```scss
@import '@carbon/colors/scss/mixins';

// ...
@include carbon--colors();
colors.$blue-50;
colors.$cool-gray-10;
colors.$black-100;
colors.$white-0;
```

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:
that you can programmatically use these values. This map is called `$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
$carbon--colors: (
$colors: (
'blue': (
10: #edf4ff,
// ...
Expand All @@ -87,34 +62,6 @@ $carbon--colors: (

<!-- prettier-ignore-end -->

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.

Similar to previous efforts, we also provide colors in the formats mentioned
above. For example:

```scss
$ibm-color__blue-50;
$ibm-color__warm-gray-100;
```

If you would like a mixin to conditionally include these variables, you can
include the mixin by using:

```scss
@import '@carbon/colors/scss/mixins';

@include ibm--colors();
```

### JavaScript

For JavaScript, you can import and use this module by doing the following in
Expand Down
Loading