@carbon/themes 10.51.0 → 10.52.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/docs/sass.md +110 -15
- package/package.json +6 -6
package/docs/sass.md
CHANGED
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
# `@carbon/themes`
|
|
2
2
|
|
|
3
|
+
> Sass documentation for `@carbon/themes`
|
|
4
|
+
|
|
3
5
|
_Note: this documentation is used with the next version of `@carbon/themes`
|
|
4
6
|
which uses Sass Modules. It will not work in the current stable version of this
|
|
5
7
|
package_
|
|
6
8
|
|
|
7
|
-
<!-- prettier-ignore-start -->
|
|
8
|
-
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
9
|
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
10
|
-
## Table of Contents
|
|
11
|
-
|
|
12
|
-
- [Usage](#usage)
|
|
13
|
-
- [FAQ](#faq)
|
|
14
|
-
- [Why are the themes not exported in `@carbon/themes`?](#why-are-the-themes-not-exported-in-carbonthemes)
|
|
15
|
-
|
|
16
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
17
|
-
<!-- prettier-ignore-end -->
|
|
18
|
-
|
|
19
9
|
## Usage
|
|
20
10
|
|
|
21
11
|
There are several entrypoints that you can use with `@carbon/themes`, including:
|
|
@@ -74,9 +64,114 @@ You can also extend the theme with your own custom tokens:
|
|
|
74
64
|
);
|
|
75
65
|
```
|
|
76
66
|
|
|
77
|
-
##
|
|
78
|
-
|
|
79
|
-
|
|
67
|
+
## API
|
|
68
|
+
|
|
69
|
+
| Import | Export | Description | !default |
|
|
70
|
+
| :--------------------------- | :--------------------------- | :------------------------------------------------------------------------------------ | :------- |
|
|
71
|
+
| `@carbon/themes/scss/themes` | | | |
|
|
72
|
+
| | `$white` | | ✅ |
|
|
73
|
+
| | `$g10` | | ✅ |
|
|
74
|
+
| | `$g90` | | ✅ |
|
|
75
|
+
| | `$g100` | | ✅ |
|
|
76
|
+
| `@carbon/themes` | | The default entrypoint which re-exports values from all other modules in this package | |
|
|
77
|
+
| | `$fallback` | | ✅ |
|
|
78
|
+
| | `$theme` | | ✅ |
|
|
79
|
+
| | `$background` | | ✅ |
|
|
80
|
+
| | `$background-active` | | ✅ |
|
|
81
|
+
| | `$background-selected` | | ✅ |
|
|
82
|
+
| | `$background-selected-hover` | | ✅ |
|
|
83
|
+
| | `$background-hover` | | ✅ |
|
|
84
|
+
| | `$background-brand` | | ✅ |
|
|
85
|
+
| | `$background-inverse` | | ✅ |
|
|
86
|
+
| | `$background-inverse-hover` | | ✅ |
|
|
87
|
+
| | `$layer-01` | | ✅ |
|
|
88
|
+
| | `$layer-active-01` | | ✅ |
|
|
89
|
+
| | `$layer-hover-01` | | ✅ |
|
|
90
|
+
| | `$layer-selected-01` | | ✅ |
|
|
91
|
+
| | `$layer-selected-hover-01` | | ✅ |
|
|
92
|
+
| | `$layer-02` | | ✅ |
|
|
93
|
+
| | `$layer-active-02` | | ✅ |
|
|
94
|
+
| | `$layer-hover-02` | | ✅ |
|
|
95
|
+
| | `$layer-selected-02` | | ✅ |
|
|
96
|
+
| | `$layer-selected-hover-02` | | ✅ |
|
|
97
|
+
| | `$layer-03` | | ✅ |
|
|
98
|
+
| | `$layer-active-03` | | ✅ |
|
|
99
|
+
| | `$layer-hover-03` | | ✅ |
|
|
100
|
+
| | `$layer-selected-03` | | ✅ |
|
|
101
|
+
| | `$layer-selected-hover-03` | | ✅ |
|
|
102
|
+
| | `$layer-selected-inverse` | | ✅ |
|
|
103
|
+
| | `$layer-selected-disabled` | | ✅ |
|
|
104
|
+
| | `$layer-accent-01` | | ✅ |
|
|
105
|
+
| | `$layer-accent-active-01` | | ✅ |
|
|
106
|
+
| | `$layer-accent-hover-01` | | ✅ |
|
|
107
|
+
| | `$layer-accent-02` | | ✅ |
|
|
108
|
+
| | `$layer-accent-active-02` | | ✅ |
|
|
109
|
+
| | `$layer-accent-hover-02` | | ✅ |
|
|
110
|
+
| | `$layer-accent-03` | | ✅ |
|
|
111
|
+
| | `$layer-accent-active-03` | | ✅ |
|
|
112
|
+
| | `$layer-accent-hover-03` | | ✅ |
|
|
113
|
+
| | `$field-01` | | ✅ |
|
|
114
|
+
| | `$field-hover-01` | | ✅ |
|
|
115
|
+
| | `$field-02` | | ✅ |
|
|
116
|
+
| | `$field-hover-02` | | ✅ |
|
|
117
|
+
| | `$field-03` | | ✅ |
|
|
118
|
+
| | `$field-hover-03` | | ✅ |
|
|
119
|
+
| | `$interactive` | | ✅ |
|
|
120
|
+
| | `$border-subtle-00` | | ✅ |
|
|
121
|
+
| | `$border-subtle-01` | | ✅ |
|
|
122
|
+
| | `$border-subtle-selected-01` | | ✅ |
|
|
123
|
+
| | `$border-subtle-02` | | ✅ |
|
|
124
|
+
| | `$border-subtle-selected-02` | | ✅ |
|
|
125
|
+
| | `$border-subtle-03` | | ✅ |
|
|
126
|
+
| | `$border-subtle-selected-03` | | ✅ |
|
|
127
|
+
| | `$border-strong-01` | | ✅ |
|
|
128
|
+
| | `$border-strong-02` | | ✅ |
|
|
129
|
+
| | `$border-strong-03` | | ✅ |
|
|
130
|
+
| | `$border-inverse` | | ✅ |
|
|
131
|
+
| | `$border-interactive` | | ✅ |
|
|
132
|
+
| | `$border-disabled` | | ✅ |
|
|
133
|
+
| | `$text-primary` | | ✅ |
|
|
134
|
+
| | `$text-secondary` | | ✅ |
|
|
135
|
+
| | `$text-placeholder` | | ✅ |
|
|
136
|
+
| | `$text-helper` | | ✅ |
|
|
137
|
+
| | `$text-error` | | ✅ |
|
|
138
|
+
| | `$text-inverse` | | ✅ |
|
|
139
|
+
| | `$text-on-color` | | ✅ |
|
|
140
|
+
| | `$text-on-color-disabled` | | ✅ |
|
|
141
|
+
| | `$text-disabled` | | ✅ |
|
|
142
|
+
| | `$link-primary` | | ✅ |
|
|
143
|
+
| | `$link-primary-hover` | | ✅ |
|
|
144
|
+
| | `$link-secondary` | | ✅ |
|
|
145
|
+
| | `$link-inverse` | | ✅ |
|
|
146
|
+
| | `$link-visited` | | ✅ |
|
|
147
|
+
| | `$icon-primary` | | ✅ |
|
|
148
|
+
| | `$icon-secondary` | | ✅ |
|
|
149
|
+
| | `$icon-inverse` | | ✅ |
|
|
150
|
+
| | `$icon-on-color` | | ✅ |
|
|
151
|
+
| | `$icon-on-color-disabled` | | ✅ |
|
|
152
|
+
| | `$icon-disabled` | | ✅ |
|
|
153
|
+
| | `$support-error` | | ✅ |
|
|
154
|
+
| | `$support-success` | | ✅ |
|
|
155
|
+
| | `$support-warning` | | ✅ |
|
|
156
|
+
| | `$support-info` | | ✅ |
|
|
157
|
+
| | `$support-error-inverse` | | ✅ |
|
|
158
|
+
| | `$support-success-inverse` | | ✅ |
|
|
159
|
+
| | `$support-warning-inverse` | | ✅ |
|
|
160
|
+
| | `$support-info-inverse` | | ✅ |
|
|
161
|
+
| | `$support-caution-major` | | ✅ |
|
|
162
|
+
| | `$support-caution-minor` | | ✅ |
|
|
163
|
+
| | `$support-caution-undefined` | | ✅ |
|
|
164
|
+
| | `$highlight` | | ✅ |
|
|
165
|
+
| | `$overlay` | | ✅ |
|
|
166
|
+
| | `$toggle-off` | | ✅ |
|
|
167
|
+
| | `$shadow` | | ✅ |
|
|
168
|
+
| | `$focus` | | ✅ |
|
|
169
|
+
| | `$focus-inset` | | ✅ |
|
|
170
|
+
| | `$focus-inverse` | | ✅ |
|
|
171
|
+
| | `$skeleton-background` | | ✅ |
|
|
172
|
+
| | `$skeleton-element` | | ✅ |
|
|
173
|
+
|
|
174
|
+
### Configuration
|
|
80
175
|
|
|
81
176
|
## FAQ
|
|
82
177
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/themes",
|
|
3
3
|
"description": "Themes for applying color in the Carbon Design System",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.52.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@carbon/colors": "^10.
|
|
33
|
-
"@carbon/layout": "^10.
|
|
34
|
-
"@carbon/type": "^10.
|
|
32
|
+
"@carbon/colors": "^10.37.0-rc.0",
|
|
33
|
+
"@carbon/layout": "^10.37.0-rc.0",
|
|
34
|
+
"@carbon/type": "^10.42.0-rc.0",
|
|
35
35
|
"color": "^3.1.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@babel/node": "^7.16.7",
|
|
39
39
|
"@babel/preset-env": "^7.16.7",
|
|
40
|
-
"@carbon/cli": "^10.
|
|
40
|
+
"@carbon/cli": "^10.34.0-rc.0",
|
|
41
41
|
"@carbon/cli-reporter": "^10.5.0",
|
|
42
42
|
"@carbon/scss-generator": "^10.13.0",
|
|
43
43
|
"@carbon/test-utils": "^10.21.0",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"rimraf": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"sideEffects": false,
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
|
|
53
53
|
}
|