@carbon/colors 11.21.0 → 11.22.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -66
- package/package.json +4 -4
- package/telemetry.yml +3 -0
package/README.md
CHANGED
|
@@ -28,56 +28,31 @@ Sass.
|
|
|
28
28
|
In Sass, you can import the files individual by doing:
|
|
29
29
|
|
|
30
30
|
```scss
|
|
31
|
-
@
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
This file automatically includes the `carbon--colors` mixin which initializes
|
|
35
|
-
all the color variables for the IBM Design Language.
|
|
36
|
-
|
|
37
|
-
These color variables follow the naming convention: `$carbon--<swatch>-<grade>`.
|
|
38
|
-
For example:
|
|
31
|
+
@use '@carbon/colors';
|
|
39
32
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
$carbon--cool-gray-10;
|
|
43
|
-
$carbon--black-100;
|
|
44
|
-
$carbon--white-0;
|
|
33
|
+
// Another way if using `@carbon/react
|
|
34
|
+
@use '@carbon/react/scss/colors';
|
|
45
35
|
```
|
|
46
36
|
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
These color variables follow the naming convention: `<swatch>-<grade>`. For
|
|
38
|
+
example:
|
|
49
39
|
|
|
50
40
|
```scss
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
_Note: the shorthand variables require that you do not have any other
|
|
58
|
-
conflicting variables in your setup. Namespaced variables are always preferred
|
|
59
|
-
for this reason, unless you are confident that no collisions will occur._
|
|
60
|
-
|
|
61
|
-
If you would like you choose when these variables are defined, then you can call
|
|
62
|
-
the `carbon--colors` mixin directly by importing the following file:
|
|
63
|
-
|
|
64
|
-
```scss
|
|
65
|
-
@import '@carbon/colors/scss/mixins';
|
|
66
|
-
|
|
67
|
-
// ...
|
|
68
|
-
@include carbon--colors();
|
|
41
|
+
colors.$blue-50;
|
|
42
|
+
colors.$cool-gray-10;
|
|
43
|
+
colors.$black-100;
|
|
44
|
+
colors.$white-0;
|
|
69
45
|
```
|
|
70
46
|
|
|
71
47
|
Alongside the color variables detailed above, we also provide a map of colors so
|
|
72
|
-
that you can programmatically use these values. This map is called
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
the following:
|
|
48
|
+
that you can programmatically use these values. This map is called `$colors` and
|
|
49
|
+
each key is the name of a swatch. The value of these swatches is also a map, but
|
|
50
|
+
each key is now the grade. In code, this looks like the following:
|
|
76
51
|
|
|
77
52
|
<!-- prettier-ignore-start -->
|
|
78
53
|
|
|
79
54
|
```scss
|
|
80
|
-
$
|
|
55
|
+
$colors: (
|
|
81
56
|
'blue': (
|
|
82
57
|
10: #edf4ff,
|
|
83
58
|
// ...
|
|
@@ -87,34 +62,6 @@ $carbon--colors: (
|
|
|
87
62
|
|
|
88
63
|
<!-- prettier-ignore-end -->
|
|
89
64
|
|
|
90
|
-
You can include this variable by including `@carbon/colors/scss/colors` or
|
|
91
|
-
calling the `carbon--colors()` mixin directly.
|
|
92
|
-
|
|
93
|
-
#### Migrating from previous versions
|
|
94
|
-
|
|
95
|
-
If you were originally using a project that had color variables defined as
|
|
96
|
-
`$ibm-color__<swatch>-<grade>`, or are relying on `$ibm-color-map`, you can also
|
|
97
|
-
use the entrypoint described above to access these colors. They are meant as an
|
|
98
|
-
easier way to help adopt these packages. However, these variables will be
|
|
99
|
-
removed in the next release of Carbon.
|
|
100
|
-
|
|
101
|
-
Similar to previous efforts, we also provide colors in the formats mentioned
|
|
102
|
-
above. For example:
|
|
103
|
-
|
|
104
|
-
```scss
|
|
105
|
-
$ibm-color__blue-50;
|
|
106
|
-
$ibm-color__warm-gray-100;
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
If you would like a mixin to conditionally include these variables, you can
|
|
110
|
-
include the mixin by using:
|
|
111
|
-
|
|
112
|
-
```scss
|
|
113
|
-
@import '@carbon/colors/scss/mixins';
|
|
114
|
-
|
|
115
|
-
@include ibm--colors();
|
|
116
|
-
```
|
|
117
|
-
|
|
118
65
|
### JavaScript
|
|
119
66
|
|
|
120
67
|
For JavaScript, you can import and use this module by doing the following in
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/colors",
|
|
3
3
|
"description": "Colors for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.22.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"postinstall": "ibmtelemetry --config=telemetry.yml"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@carbon/cli": "^11.
|
|
42
|
+
"@carbon/cli": "^11.17.0-rc.0",
|
|
43
43
|
"@carbon/cli-reporter": "^10.7.0",
|
|
44
44
|
"@carbon/scss-generator": "^10.18.0",
|
|
45
45
|
"@carbon/test-utils": "^10.30.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"needs": "^1.3.0"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@ibm/telemetry-js": "^1.
|
|
58
|
+
"@ibm/telemetry-js": "^1.5.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "401633ab2d5fdeaeb89f66bb9040cc1de008599d"
|
|
61
61
|
}
|