@carbon/themes 10.27.0-rc.0 → 10.27.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 +4 -3
- package/index.scss +9 -0
- package/package.json +9 -8
- package/scss/modules/_theme.scss +50 -0
- package/scss/modules/_themes.scss +8 -0
- package/scss/modules/_utilities.scss +18 -0
- package/scss/modules/generated/_themes.scss +244 -0
- package/docs/sass.md +0 -6135
package/README.md
CHANGED
|
@@ -108,11 +108,12 @@ import {
|
|
|
108
108
|
} from '@carbon/themes';
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
-
##
|
|
111
|
+
## 📚 Examples
|
|
112
112
|
|
|
113
|
-
If you're looking for `@carbon/themes
|
|
113
|
+
If you're looking for more examples on how to use `@carbon/themes`, we have some
|
|
114
|
+
examples that you can check out:
|
|
114
115
|
|
|
115
|
-
- [
|
|
116
|
+
- [sass-modules](./examples/sass-modules)
|
|
116
117
|
|
|
117
118
|
## 🙌 Contributing
|
|
118
119
|
|
package/index.scss
ADDED
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.27.0
|
|
4
|
+
"version": "10.27.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -24,19 +24,20 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
|
+
"ci-check": "carbon-cli check \"scss/**/*.scss\" -i \"**/generated/**\"",
|
|
27
28
|
"clean": "rimraf es lib umd scss/generated",
|
|
28
|
-
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\"
|
|
29
|
+
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\""
|
|
29
30
|
},
|
|
30
31
|
"dependencies": {
|
|
31
|
-
"@carbon/colors": "^10.20.0
|
|
32
|
-
"@carbon/layout": "^10.18.0
|
|
33
|
-
"@carbon/type": "^10.21.0
|
|
32
|
+
"@carbon/colors": "^10.20.0",
|
|
33
|
+
"@carbon/layout": "^10.18.0",
|
|
34
|
+
"@carbon/type": "^10.21.0",
|
|
34
35
|
"color": "^3.1.2"
|
|
35
36
|
},
|
|
36
37
|
"devDependencies": {
|
|
37
|
-
"@carbon/cli": "^10.19.0
|
|
38
|
+
"@carbon/cli": "^10.19.0",
|
|
38
39
|
"@carbon/cli-reporter": "^10.4.0",
|
|
39
|
-
"@carbon/scss-generator": "^10.
|
|
40
|
+
"@carbon/scss-generator": "^10.13.0",
|
|
40
41
|
"@carbon/test-utils": "^10.14.0",
|
|
41
42
|
"change-case": "^4.1.1",
|
|
42
43
|
"core-js": "^3.6.5",
|
|
@@ -45,5 +46,5 @@
|
|
|
45
46
|
"node-sass": "^4.13.1",
|
|
46
47
|
"rimraf": "^3.0.0"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "79db5535fee7f58e0fe21bac154b638cd17f659e"
|
|
49
50
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:map';
|
|
9
|
+
@use 'sass:meta';
|
|
10
|
+
@use 'themes';
|
|
11
|
+
|
|
12
|
+
$theme: themes.$white !default;
|
|
13
|
+
$-custom-property-prefix: 'cds';
|
|
14
|
+
|
|
15
|
+
/// @access public
|
|
16
|
+
/// @group @carbon/themes
|
|
17
|
+
@mixin theme($active-theme: $theme) {
|
|
18
|
+
$parent-theme: $theme;
|
|
19
|
+
$theme: $active-theme !global;
|
|
20
|
+
|
|
21
|
+
@each $token, $value in $theme {
|
|
22
|
+
@include -custom-property($token, $value);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@content;
|
|
26
|
+
|
|
27
|
+
$theme: $parent-theme !global;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/// @access public
|
|
31
|
+
/// @group @carbon/themes
|
|
32
|
+
@mixin set($active-theme) {
|
|
33
|
+
$theme: $active-theme !global;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/// @access private
|
|
37
|
+
/// @group @carbon/themes
|
|
38
|
+
@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
|
|
39
|
+
@if meta.type-of($value) == map {
|
|
40
|
+
@each $property, $property-value in $value {
|
|
41
|
+
// Only support one-level of depth for values that are maps. This is to
|
|
42
|
+
// avoid bringing properties like `breakpoints` on type tokens
|
|
43
|
+
@if type-of($property-value) != map {
|
|
44
|
+
@include -custom-property('#{$name}-#{$property}', $property-value);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
} @else {
|
|
48
|
+
--#{$prefix}-#{$name}: #{$value};
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:map';
|
|
9
|
+
|
|
10
|
+
/// @access private
|
|
11
|
+
/// @group @carbon/themes
|
|
12
|
+
@function merge($map, $maps...) {
|
|
13
|
+
$result: $map;
|
|
14
|
+
@each $map in $maps {
|
|
15
|
+
$result: map.merge($result, $map);
|
|
16
|
+
}
|
|
17
|
+
@return $result;
|
|
18
|
+
}
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
// Code generated by @carbon/themes. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2019
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@use 'sass:map';
|
|
10
|
+
@use '@carbon/layout';
|
|
11
|
+
@use '@carbon/type';
|
|
12
|
+
@use '../utilities';
|
|
13
|
+
|
|
14
|
+
$white: utilities.merge(
|
|
15
|
+
layout.$spacing,
|
|
16
|
+
layout.$fluid-spacing,
|
|
17
|
+
type.$tokens,
|
|
18
|
+
(
|
|
19
|
+
interactive-01: #0f62fe,
|
|
20
|
+
interactive-02: #393939,
|
|
21
|
+
interactive-03: #0f62fe,
|
|
22
|
+
interactive-04: #0f62fe,
|
|
23
|
+
ui-background: #ffffff,
|
|
24
|
+
ui-01: #f4f4f4,
|
|
25
|
+
ui-02: #ffffff,
|
|
26
|
+
ui-03: #e0e0e0,
|
|
27
|
+
ui-04: #8d8d8d,
|
|
28
|
+
ui-05: #161616,
|
|
29
|
+
text-01: #161616,
|
|
30
|
+
text-02: #525252,
|
|
31
|
+
text-03: #a8a8a8,
|
|
32
|
+
text-04: #ffffff,
|
|
33
|
+
text-05: #6f6f6f,
|
|
34
|
+
text-error: #da1e28,
|
|
35
|
+
icon-01: #161616,
|
|
36
|
+
icon-02: #525252,
|
|
37
|
+
icon-03: #ffffff,
|
|
38
|
+
link-01: #0f62fe,
|
|
39
|
+
inverse-link: #78a9ff,
|
|
40
|
+
field-01: #f4f4f4,
|
|
41
|
+
field-02: #ffffff,
|
|
42
|
+
inverse-01: #ffffff,
|
|
43
|
+
inverse-02: #393939,
|
|
44
|
+
support-01: #da1e28,
|
|
45
|
+
support-02: #24a148,
|
|
46
|
+
support-03: #f1c21b,
|
|
47
|
+
support-04: #0043ce,
|
|
48
|
+
inverse-support-01: #fa4d56,
|
|
49
|
+
inverse-support-02: #42be65,
|
|
50
|
+
inverse-support-03: #f1c21b,
|
|
51
|
+
inverse-support-04: #4589ff,
|
|
52
|
+
overlay-01: rgba(22, 22, 22, 0.5),
|
|
53
|
+
danger-01: #da1e28,
|
|
54
|
+
danger-02: #da1e28,
|
|
55
|
+
focus: #0f62fe,
|
|
56
|
+
inverse-focus-ui: #ffffff,
|
|
57
|
+
hover-primary: #0353e9,
|
|
58
|
+
active-primary: #002d9c,
|
|
59
|
+
hover-primary-text: #0043ce,
|
|
60
|
+
hover-secondary: #4c4c4c,
|
|
61
|
+
active-secondary: #6f6f6f,
|
|
62
|
+
hover-tertiary: #0353e9,
|
|
63
|
+
active-tertiary: #002d9c,
|
|
64
|
+
hover-ui: #e5e5e5,
|
|
65
|
+
hover-light-ui: #e5e5e5,
|
|
66
|
+
active-ui: #c6c6c6,
|
|
67
|
+
active-light-ui: #c6c6c6,
|
|
68
|
+
selected-ui: #e0e0e0,
|
|
69
|
+
selected-light-ui: #e0e0e0,
|
|
70
|
+
inverse-hover-ui: #4c4c4c,
|
|
71
|
+
hover-selected-ui: #cacaca,
|
|
72
|
+
hover-danger: #b81921,
|
|
73
|
+
active-danger: #750e13,
|
|
74
|
+
hover-row: #e5e5e5,
|
|
75
|
+
visited-link: #8a3ffc,
|
|
76
|
+
disabled-01: #f4f4f4,
|
|
77
|
+
disabled-02: #c6c6c6,
|
|
78
|
+
disabled-03: #8d8d8d,
|
|
79
|
+
highlight: #d0e2ff,
|
|
80
|
+
decorative-01: #e0e0e0,
|
|
81
|
+
button-separator: #e0e0e0,
|
|
82
|
+
skeleton-01: #e5e5e5,
|
|
83
|
+
skeleton-02: #c6c6c6,
|
|
84
|
+
brand-01: #0f62fe,
|
|
85
|
+
brand-02: #393939,
|
|
86
|
+
brand-03: #0f62fe,
|
|
87
|
+
active-01: #c6c6c6,
|
|
88
|
+
hover-field: #e5e5e5,
|
|
89
|
+
danger: #da1e28,
|
|
90
|
+
)
|
|
91
|
+
) !default;
|
|
92
|
+
|
|
93
|
+
/// Carbon's g10 color theme
|
|
94
|
+
/// @type Map
|
|
95
|
+
/// @access public
|
|
96
|
+
/// @group @carbon/themes
|
|
97
|
+
$g10: map.merge(
|
|
98
|
+
$white,
|
|
99
|
+
(
|
|
100
|
+
ui-background: #f4f4f4,
|
|
101
|
+
ui-01: #ffffff,
|
|
102
|
+
ui-02: #f4f4f4,
|
|
103
|
+
field-01: #ffffff,
|
|
104
|
+
field-02: #f4f4f4,
|
|
105
|
+
disabled-01: #ffffff,
|
|
106
|
+
highlight: #edf5ff,
|
|
107
|
+
)
|
|
108
|
+
) !default;
|
|
109
|
+
|
|
110
|
+
/// Carbon's g90 color theme
|
|
111
|
+
/// @type Map
|
|
112
|
+
/// @access public
|
|
113
|
+
/// @group @carbon/themes
|
|
114
|
+
$g90: map.merge(
|
|
115
|
+
$white,
|
|
116
|
+
(
|
|
117
|
+
interactive-02: #6f6f6f,
|
|
118
|
+
interactive-03: #ffffff,
|
|
119
|
+
interactive-04: #4589ff,
|
|
120
|
+
ui-background: #262626,
|
|
121
|
+
ui-01: #393939,
|
|
122
|
+
ui-02: #525252,
|
|
123
|
+
ui-03: #525252,
|
|
124
|
+
ui-05: #f4f4f4,
|
|
125
|
+
text-01: #f4f4f4,
|
|
126
|
+
text-02: #c6c6c6,
|
|
127
|
+
text-03: #6f6f6f,
|
|
128
|
+
text-05: #8d8d8d,
|
|
129
|
+
text-error: #ffb3b8,
|
|
130
|
+
icon-01: #f4f4f4,
|
|
131
|
+
icon-02: #c6c6c6,
|
|
132
|
+
link-01: #78a9ff,
|
|
133
|
+
inverse-link: #0f62fe,
|
|
134
|
+
field-01: #393939,
|
|
135
|
+
field-02: #525252,
|
|
136
|
+
inverse-01: #161616,
|
|
137
|
+
inverse-02: #f4f4f4,
|
|
138
|
+
support-01: #ff8389,
|
|
139
|
+
support-02: #42be65,
|
|
140
|
+
support-04: #4589ff,
|
|
141
|
+
inverse-support-01: #da1e28,
|
|
142
|
+
inverse-support-02: #24a148,
|
|
143
|
+
inverse-support-04: #0f62fe,
|
|
144
|
+
overlay-01: rgba(22, 22, 22, 0.7),
|
|
145
|
+
danger-02: #ff8389,
|
|
146
|
+
focus: #ffffff,
|
|
147
|
+
inverse-focus-ui: #0f62fe,
|
|
148
|
+
hover-primary-text: #a6c8ff,
|
|
149
|
+
hover-secondary: #606060,
|
|
150
|
+
active-secondary: #393939,
|
|
151
|
+
hover-tertiary: #f4f4f4,
|
|
152
|
+
active-tertiary: #c6c6c6,
|
|
153
|
+
hover-ui: #4c4c4c,
|
|
154
|
+
hover-light-ui: #656565,
|
|
155
|
+
active-ui: #6f6f6f,
|
|
156
|
+
active-light-ui: #8d8d8d,
|
|
157
|
+
selected-ui: #525252,
|
|
158
|
+
selected-light-ui: #6f6f6f,
|
|
159
|
+
inverse-hover-ui: #e5e5e5,
|
|
160
|
+
hover-selected-ui: #656565,
|
|
161
|
+
hover-row: #4c4c4c,
|
|
162
|
+
visited-link: #be95ff,
|
|
163
|
+
disabled-01: #393939,
|
|
164
|
+
disabled-02: #6f6f6f,
|
|
165
|
+
disabled-03: #a8a8a8,
|
|
166
|
+
highlight: #0043ce,
|
|
167
|
+
decorative-01: #6f6f6f,
|
|
168
|
+
button-separator: #161616,
|
|
169
|
+
skeleton-01: #353535,
|
|
170
|
+
skeleton-02: #525252,
|
|
171
|
+
brand-02: #6f6f6f,
|
|
172
|
+
brand-03: #ffffff,
|
|
173
|
+
active-01: #6f6f6f,
|
|
174
|
+
hover-field: #4c4c4c,
|
|
175
|
+
)
|
|
176
|
+
) !default;
|
|
177
|
+
|
|
178
|
+
/// Carbon's g100 color theme
|
|
179
|
+
/// @type Map
|
|
180
|
+
/// @access public
|
|
181
|
+
/// @group @carbon/themes
|
|
182
|
+
$g100: map.merge(
|
|
183
|
+
$white,
|
|
184
|
+
(
|
|
185
|
+
interactive-02: #6f6f6f,
|
|
186
|
+
interactive-03: #ffffff,
|
|
187
|
+
interactive-04: #4589ff,
|
|
188
|
+
ui-background: #161616,
|
|
189
|
+
ui-01: #262626,
|
|
190
|
+
ui-02: #393939,
|
|
191
|
+
ui-03: #393939,
|
|
192
|
+
ui-04: #6f6f6f,
|
|
193
|
+
ui-05: #f4f4f4,
|
|
194
|
+
text-01: #f4f4f4,
|
|
195
|
+
text-02: #c6c6c6,
|
|
196
|
+
text-03: #6f6f6f,
|
|
197
|
+
text-05: #8d8d8d,
|
|
198
|
+
text-error: #ff8389,
|
|
199
|
+
icon-01: #f4f4f4,
|
|
200
|
+
icon-02: #c6c6c6,
|
|
201
|
+
link-01: #78a9ff,
|
|
202
|
+
inverse-link: #0f62fe,
|
|
203
|
+
field-01: #262626,
|
|
204
|
+
field-02: #393939,
|
|
205
|
+
inverse-01: #161616,
|
|
206
|
+
inverse-02: #f4f4f4,
|
|
207
|
+
support-01: #fa4d56,
|
|
208
|
+
support-02: #42be65,
|
|
209
|
+
support-04: #4589ff,
|
|
210
|
+
inverse-support-01: #da1e28,
|
|
211
|
+
inverse-support-02: #24a148,
|
|
212
|
+
inverse-support-04: #0f62fe,
|
|
213
|
+
overlay-01: rgba(22, 22, 22, 0.7),
|
|
214
|
+
danger-02: #fa4d56,
|
|
215
|
+
focus: #ffffff,
|
|
216
|
+
inverse-focus-ui: #0f62fe,
|
|
217
|
+
hover-primary-text: #a6c8ff,
|
|
218
|
+
hover-secondary: #606060,
|
|
219
|
+
active-secondary: #393939,
|
|
220
|
+
hover-tertiary: #f4f4f4,
|
|
221
|
+
active-tertiary: #c6c6c6,
|
|
222
|
+
hover-ui: #353535,
|
|
223
|
+
hover-light-ui: #4c4c4c,
|
|
224
|
+
active-ui: #525252,
|
|
225
|
+
active-light-ui: #6f6f6f,
|
|
226
|
+
selected-ui: #393939,
|
|
227
|
+
selected-light-ui: #525252,
|
|
228
|
+
inverse-hover-ui: #e5e5e5,
|
|
229
|
+
hover-selected-ui: #4c4c4c,
|
|
230
|
+
hover-row: #353535,
|
|
231
|
+
visited-link: #be95ff,
|
|
232
|
+
disabled-01: #262626,
|
|
233
|
+
disabled-02: #525252,
|
|
234
|
+
highlight: #002d9c,
|
|
235
|
+
decorative-01: #525252,
|
|
236
|
+
button-separator: #161616,
|
|
237
|
+
skeleton-01: #353535,
|
|
238
|
+
skeleton-02: #393939,
|
|
239
|
+
brand-02: #6f6f6f,
|
|
240
|
+
brand-03: #ffffff,
|
|
241
|
+
active-01: #525252,
|
|
242
|
+
hover-field: #353535,
|
|
243
|
+
)
|
|
244
|
+
) !default;
|