@carbon/themes 11.4.0 → 11.6.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 +11 -12
- package/es/index.js +1187 -54
- package/lib/index.js +1953 -819
- package/package.json +6 -6
- package/src/index.js +2 -1
- package/src/tokens/components.js +84 -0
- package/src/tokens/index.js +54 -1
- package/src/tokens/layout.js +39 -0
- package/src/tokens/type.js +49 -0
- package/src/tokens/v10.js +188 -0
- package/src/tokens/v11TokenGroup.js +20 -0
- package/umd/index.js +1952 -818
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": "11.
|
|
4
|
+
"version": "11.6.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": "^11.
|
|
33
|
-
"@carbon/layout": "^11.
|
|
34
|
-
"@carbon/type": "^11.
|
|
32
|
+
"@carbon/colors": "^11.4.0-rc.0",
|
|
33
|
+
"@carbon/layout": "^11.5.0-rc.0",
|
|
34
|
+
"@carbon/type": "^11.6.0-rc.0",
|
|
35
35
|
"color": "^3.1.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@babel/node": "^7.17.10",
|
|
39
39
|
"@babel/preset-env": "^7.18.2",
|
|
40
|
-
"@carbon/cli": "^11.
|
|
40
|
+
"@carbon/cli": "^11.3.0-rc.0",
|
|
41
41
|
"@carbon/cli-reporter": "^10.5.0",
|
|
42
42
|
"@carbon/scss-generator": "^10.14.0",
|
|
43
43
|
"@carbon/test-utils": "^10.25.0",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"rimraf": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": false,
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "5a23e3960d9bf5b652b96b6a051ae2b04cfa9a08"
|
|
52
52
|
}
|
package/src/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import * as g10 from './g10';
|
|
|
10
10
|
import * as g90 from './g90';
|
|
11
11
|
import * as g100 from './g100';
|
|
12
12
|
import * as v10 from './v10';
|
|
13
|
+
import { unstable_metadata } from './tokens';
|
|
13
14
|
|
|
14
15
|
const themes = {
|
|
15
16
|
white,
|
|
@@ -19,4 +20,4 @@ const themes = {
|
|
|
19
20
|
};
|
|
20
21
|
|
|
21
22
|
export * from './white';
|
|
22
|
-
export { white, g10, g90, g100, themes, v10 };
|
|
23
|
+
export { white, g10, g90, g100, themes, v10, unstable_metadata };
|
|
@@ -0,0 +1,84 @@
|
|
|
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
|
+
import { TokenGroup } from './TokenGroup';
|
|
9
|
+
|
|
10
|
+
export const button = TokenGroup.create({
|
|
11
|
+
name: 'Button',
|
|
12
|
+
properties: [],
|
|
13
|
+
tokens: [
|
|
14
|
+
'button-separator',
|
|
15
|
+
'button-primary',
|
|
16
|
+
'button-secondary',
|
|
17
|
+
'button-tertiary',
|
|
18
|
+
'button-danger-primary',
|
|
19
|
+
'button-danger-secondary',
|
|
20
|
+
'button-danger-active',
|
|
21
|
+
'button-primary-active',
|
|
22
|
+
'button-secondary-active',
|
|
23
|
+
'button-tertiary-active',
|
|
24
|
+
'button-danger-hover',
|
|
25
|
+
'button-primary-hover',
|
|
26
|
+
'button-secondary-hover',
|
|
27
|
+
'button-tertiary-hover',
|
|
28
|
+
'button-disabled',
|
|
29
|
+
],
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
export const notification = TokenGroup.create({
|
|
33
|
+
name: 'Notification',
|
|
34
|
+
properties: [],
|
|
35
|
+
tokens: [
|
|
36
|
+
'notification-background-error',
|
|
37
|
+
'notification-background-success',
|
|
38
|
+
'notification-background-info',
|
|
39
|
+
'notification-background-warning',
|
|
40
|
+
'notification-action-hover',
|
|
41
|
+
'notification-action-tertiary-inverse',
|
|
42
|
+
'notification-action-tertiary-inverse-active',
|
|
43
|
+
'notification-action-tertiary-inverse-hover',
|
|
44
|
+
'notification-action-tertiary-inverse-text',
|
|
45
|
+
'notification-action-tertiary-inverse-text-on-color-disabled',
|
|
46
|
+
],
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
export const tag = TokenGroup.create({
|
|
50
|
+
name: 'Tag',
|
|
51
|
+
properties: [],
|
|
52
|
+
tokens: [
|
|
53
|
+
'tag-background-red',
|
|
54
|
+
'tag-color-red',
|
|
55
|
+
'tag-hover-red',
|
|
56
|
+
'tag-background-magenta',
|
|
57
|
+
'tag-color-magenta',
|
|
58
|
+
'tag-hover-magenta',
|
|
59
|
+
'tag-background-purple',
|
|
60
|
+
'tag-color-purple',
|
|
61
|
+
'tag-hover-purple',
|
|
62
|
+
'tag-background-blue',
|
|
63
|
+
'tag-color-blue',
|
|
64
|
+
'tag-hover-blue',
|
|
65
|
+
'tag-background-cyan',
|
|
66
|
+
'tag-color-cyan',
|
|
67
|
+
'tag-hover-cyan',
|
|
68
|
+
'tag-background-teal',
|
|
69
|
+
'tag-color-teal',
|
|
70
|
+
'tag-hover-teal',
|
|
71
|
+
'tag-background-green',
|
|
72
|
+
'tag-color-green',
|
|
73
|
+
'tag-hover-green',
|
|
74
|
+
'tag-background-gray',
|
|
75
|
+
'tag-color-gray',
|
|
76
|
+
'tag-hover-gray',
|
|
77
|
+
'tag-background-cool-gray',
|
|
78
|
+
'tag-color-cool-gray',
|
|
79
|
+
'tag-hover-cool-gray',
|
|
80
|
+
'tag-background-warm-gray',
|
|
81
|
+
'tag-color-warm-gray',
|
|
82
|
+
'tag-hover-warm-gray',
|
|
83
|
+
],
|
|
84
|
+
});
|
package/src/tokens/index.js
CHANGED
|
@@ -9,7 +9,60 @@ import { Token } from './Token';
|
|
|
9
9
|
import { TokenFormat } from './TokenFormat';
|
|
10
10
|
import { TokenGroup } from './TokenGroup';
|
|
11
11
|
import { TokenSet } from './TokenSet';
|
|
12
|
-
import { group } from './v11TokenGroup';
|
|
12
|
+
import { group, contextual } from './v11TokenGroup';
|
|
13
13
|
import { set } from './v11TokenSet';
|
|
14
|
+
import * as components from './components';
|
|
15
|
+
import { type } from './type';
|
|
16
|
+
import { layout } from './layout';
|
|
17
|
+
import { v10 } from './v10';
|
|
14
18
|
|
|
15
19
|
export { Token, TokenFormat, TokenGroup, TokenSet, group, set };
|
|
20
|
+
|
|
21
|
+
const v11 = [
|
|
22
|
+
// Base color tokens
|
|
23
|
+
...group.getTokens().map((token) => {
|
|
24
|
+
return {
|
|
25
|
+
name: token.name,
|
|
26
|
+
type: 'color',
|
|
27
|
+
};
|
|
28
|
+
}),
|
|
29
|
+
|
|
30
|
+
// Contextual tokens
|
|
31
|
+
...contextual.getTokens().map((token) => {
|
|
32
|
+
return {
|
|
33
|
+
name: token.name,
|
|
34
|
+
type: 'color',
|
|
35
|
+
};
|
|
36
|
+
}),
|
|
37
|
+
|
|
38
|
+
// Component tokens
|
|
39
|
+
...Object.values(components).flatMap((group) => {
|
|
40
|
+
return group.getTokens().map((token) => {
|
|
41
|
+
return {
|
|
42
|
+
name: token.name,
|
|
43
|
+
type: 'color',
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
}),
|
|
47
|
+
|
|
48
|
+
// Typography
|
|
49
|
+
...type.getTokens().map((token) => {
|
|
50
|
+
return {
|
|
51
|
+
name: token.name,
|
|
52
|
+
type: 'type',
|
|
53
|
+
};
|
|
54
|
+
}),
|
|
55
|
+
|
|
56
|
+
// Layout (spacing)
|
|
57
|
+
...layout.getTokens().map((token) => {
|
|
58
|
+
return {
|
|
59
|
+
name: token.name,
|
|
60
|
+
type: 'layout',
|
|
61
|
+
};
|
|
62
|
+
}),
|
|
63
|
+
];
|
|
64
|
+
|
|
65
|
+
export const unstable_metadata = {
|
|
66
|
+
v11,
|
|
67
|
+
v10,
|
|
68
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
import { TokenGroup } from './TokenGroup';
|
|
9
|
+
|
|
10
|
+
export const layout = TokenGroup.create({
|
|
11
|
+
name: 'Layout',
|
|
12
|
+
properties: [],
|
|
13
|
+
tokens: [
|
|
14
|
+
'spacing-01',
|
|
15
|
+
'spacing-02',
|
|
16
|
+
'spacing-03',
|
|
17
|
+
'spacing-04',
|
|
18
|
+
'spacing-05',
|
|
19
|
+
'spacing-06',
|
|
20
|
+
'spacing-07',
|
|
21
|
+
'spacing-08',
|
|
22
|
+
'spacing-09',
|
|
23
|
+
'spacing-10',
|
|
24
|
+
'spacing-11',
|
|
25
|
+
'spacing-12',
|
|
26
|
+
'spacing-13',
|
|
27
|
+
'fluid-spacing-01',
|
|
28
|
+
'fluid-spacing-02',
|
|
29
|
+
'fluid-spacing-03',
|
|
30
|
+
'fluid-spacing-04',
|
|
31
|
+
'container-01',
|
|
32
|
+
'container-02',
|
|
33
|
+
'container-03',
|
|
34
|
+
'container-04',
|
|
35
|
+
'container-05',
|
|
36
|
+
'icon-size-01',
|
|
37
|
+
'icon-size-02',
|
|
38
|
+
],
|
|
39
|
+
});
|
|
@@ -0,0 +1,49 @@
|
|
|
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
|
+
import { TokenGroup } from './TokenGroup';
|
|
9
|
+
|
|
10
|
+
export const type = TokenGroup.create({
|
|
11
|
+
name: 'Type',
|
|
12
|
+
properties: [],
|
|
13
|
+
tokens: [
|
|
14
|
+
'caption-01',
|
|
15
|
+
'caption-02',
|
|
16
|
+
'label-01',
|
|
17
|
+
'label-02',
|
|
18
|
+
'helper-text-01',
|
|
19
|
+
'helper-text-02',
|
|
20
|
+
'body-short-01',
|
|
21
|
+
'body-long-01',
|
|
22
|
+
'body-short-02',
|
|
23
|
+
'body-long-02',
|
|
24
|
+
'code-01',
|
|
25
|
+
'code-02',
|
|
26
|
+
'heading-01',
|
|
27
|
+
'productive-heading-01',
|
|
28
|
+
'heading-02',
|
|
29
|
+
'productive-Heading-02',
|
|
30
|
+
'productive-heading-03',
|
|
31
|
+
'productive-heading-04',
|
|
32
|
+
'productive-heading-05',
|
|
33
|
+
'productive-heading-06',
|
|
34
|
+
'productive-heading-07',
|
|
35
|
+
'expressive-heading-01',
|
|
36
|
+
'expressive-heading-02',
|
|
37
|
+
'expressive-heading-03',
|
|
38
|
+
'expressive-heading-04',
|
|
39
|
+
'expressive-heading-05',
|
|
40
|
+
'expressive-heading-06',
|
|
41
|
+
'expressive-paragraph-01',
|
|
42
|
+
'quotation-01',
|
|
43
|
+
'quotation-02',
|
|
44
|
+
'display-01',
|
|
45
|
+
'display-02',
|
|
46
|
+
'display-03',
|
|
47
|
+
'display-04',
|
|
48
|
+
],
|
|
49
|
+
});
|
|
@@ -0,0 +1,188 @@
|
|
|
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
|
+
import { TokenGroup } from './TokenGroup';
|
|
9
|
+
|
|
10
|
+
const color = TokenGroup.create({
|
|
11
|
+
name: 'Color',
|
|
12
|
+
properties: [],
|
|
13
|
+
tokens: [
|
|
14
|
+
'interactive-01',
|
|
15
|
+
'interactive-02',
|
|
16
|
+
'interactive-03',
|
|
17
|
+
'interactive-04',
|
|
18
|
+
'ui-background',
|
|
19
|
+
'ui-01',
|
|
20
|
+
'ui-02',
|
|
21
|
+
'ui-03',
|
|
22
|
+
'ui-04',
|
|
23
|
+
'ui-05',
|
|
24
|
+
'text-01',
|
|
25
|
+
'text-02',
|
|
26
|
+
'text-03',
|
|
27
|
+
'text-04',
|
|
28
|
+
'text-05',
|
|
29
|
+
'text-error',
|
|
30
|
+
'icon-01',
|
|
31
|
+
'icon-02',
|
|
32
|
+
'icon-03',
|
|
33
|
+
'link-01',
|
|
34
|
+
'link-02',
|
|
35
|
+
'inverse-link',
|
|
36
|
+
'field-01',
|
|
37
|
+
'field-02',
|
|
38
|
+
'inverse-01',
|
|
39
|
+
'inverse-02',
|
|
40
|
+
'support-01',
|
|
41
|
+
'support-02',
|
|
42
|
+
'support-03',
|
|
43
|
+
'support-04',
|
|
44
|
+
'inverse-support-01',
|
|
45
|
+
'inverse-support-02',
|
|
46
|
+
'inverse-support-03',
|
|
47
|
+
'inverse-support-04',
|
|
48
|
+
'overlay-01',
|
|
49
|
+
'danger-01',
|
|
50
|
+
'danger-02',
|
|
51
|
+
'focus',
|
|
52
|
+
'inverse-focus-ui',
|
|
53
|
+
'hover-primary',
|
|
54
|
+
'active-primary',
|
|
55
|
+
'hover-primary-text',
|
|
56
|
+
'hover-secondary',
|
|
57
|
+
'active-secondary',
|
|
58
|
+
'hover-tertiary',
|
|
59
|
+
'active-tertiary',
|
|
60
|
+
'hover-ui',
|
|
61
|
+
'hover-light-ui',
|
|
62
|
+
'hover-selected-ui',
|
|
63
|
+
'active-ui',
|
|
64
|
+
'active-light-ui',
|
|
65
|
+
'selected-ui',
|
|
66
|
+
'selected-light-ui',
|
|
67
|
+
'inverse-hover-ui',
|
|
68
|
+
'hover-danger',
|
|
69
|
+
'active-danger',
|
|
70
|
+
'hover-row',
|
|
71
|
+
'visited-link',
|
|
72
|
+
'disabled-01',
|
|
73
|
+
'disabled-02',
|
|
74
|
+
'disabled-03',
|
|
75
|
+
'highlight',
|
|
76
|
+
'decorative-01',
|
|
77
|
+
'button-separator',
|
|
78
|
+
'skeleton-01',
|
|
79
|
+
'skeleton-02',
|
|
80
|
+
// deprecated
|
|
81
|
+
'brand-01',
|
|
82
|
+
'brand-02',
|
|
83
|
+
'brand-03',
|
|
84
|
+
'active-01',
|
|
85
|
+
'hover-field',
|
|
86
|
+
'danger',
|
|
87
|
+
],
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
const type = TokenGroup.create({
|
|
91
|
+
name: 'Type',
|
|
92
|
+
properties: [],
|
|
93
|
+
tokens: [
|
|
94
|
+
'caption-01',
|
|
95
|
+
'caption-02',
|
|
96
|
+
'label-01',
|
|
97
|
+
'label-02',
|
|
98
|
+
'helper-text-01',
|
|
99
|
+
'helper-text-02',
|
|
100
|
+
'body-short-01',
|
|
101
|
+
'body-long-01',
|
|
102
|
+
'body-short-02',
|
|
103
|
+
'body-long-02',
|
|
104
|
+
'code-01',
|
|
105
|
+
'code-02',
|
|
106
|
+
'heading-01',
|
|
107
|
+
'productive-heading-01',
|
|
108
|
+
'heading-02',
|
|
109
|
+
'productive-Heading-02',
|
|
110
|
+
'productive-heading-03',
|
|
111
|
+
'productive-heading-04',
|
|
112
|
+
'productive-heading-05',
|
|
113
|
+
'productive-heading-06',
|
|
114
|
+
'productive-heading-07',
|
|
115
|
+
'expressive-heading-01',
|
|
116
|
+
'expressive-heading-02',
|
|
117
|
+
'expressive-heading-03',
|
|
118
|
+
'expressive-heading-04',
|
|
119
|
+
'expressive-heading-05',
|
|
120
|
+
'expressive-heading-06',
|
|
121
|
+
'expressive-paragraph-01',
|
|
122
|
+
'quotation-01',
|
|
123
|
+
'quotation-02',
|
|
124
|
+
'display-01',
|
|
125
|
+
'display-02',
|
|
126
|
+
'display-03',
|
|
127
|
+
'display-04',
|
|
128
|
+
],
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
const layout = TokenGroup.create({
|
|
132
|
+
name: 'Layout',
|
|
133
|
+
properties: [],
|
|
134
|
+
tokens: [
|
|
135
|
+
'spacing-01',
|
|
136
|
+
'spacing-02',
|
|
137
|
+
'spacing-03',
|
|
138
|
+
'spacing-04',
|
|
139
|
+
'spacing-05',
|
|
140
|
+
'spacing-06',
|
|
141
|
+
'spacing-07',
|
|
142
|
+
'spacing-08',
|
|
143
|
+
'spacing-09',
|
|
144
|
+
'spacing-10',
|
|
145
|
+
'spacing-11',
|
|
146
|
+
'spacing-12',
|
|
147
|
+
'spacing-13',
|
|
148
|
+
'layout-01',
|
|
149
|
+
'layout-02',
|
|
150
|
+
'layout-03',
|
|
151
|
+
'layout-04',
|
|
152
|
+
'layout-05',
|
|
153
|
+
'layout-06',
|
|
154
|
+
'layout-07',
|
|
155
|
+
'fluid-spacing-01',
|
|
156
|
+
'fluid-spacing-02',
|
|
157
|
+
'fluid-spacing-03',
|
|
158
|
+
'fluid-spacing-04',
|
|
159
|
+
'container-01',
|
|
160
|
+
'container-02',
|
|
161
|
+
'container-03',
|
|
162
|
+
'container-04',
|
|
163
|
+
'container-05',
|
|
164
|
+
'icon-size-01',
|
|
165
|
+
'icon-size-02',
|
|
166
|
+
],
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
export const v10 = [
|
|
170
|
+
...color.getTokens().map((token) => {
|
|
171
|
+
return {
|
|
172
|
+
name: token.name,
|
|
173
|
+
type: 'color',
|
|
174
|
+
};
|
|
175
|
+
}),
|
|
176
|
+
...type.getTokens().map((token) => {
|
|
177
|
+
return {
|
|
178
|
+
name: token.name,
|
|
179
|
+
type: 'type',
|
|
180
|
+
};
|
|
181
|
+
}),
|
|
182
|
+
...layout.getTokens().map((token) => {
|
|
183
|
+
return {
|
|
184
|
+
name: token.name,
|
|
185
|
+
type: 'layout',
|
|
186
|
+
};
|
|
187
|
+
}),
|
|
188
|
+
];
|
|
@@ -314,6 +314,26 @@ export const skeleton = TokenGroup.create({
|
|
|
314
314
|
tokens: ['skeleton-background', 'skeleton-element'],
|
|
315
315
|
});
|
|
316
316
|
|
|
317
|
+
export const contextual = TokenGroup.create({
|
|
318
|
+
name: 'Contextual',
|
|
319
|
+
properties: [],
|
|
320
|
+
tokens: [
|
|
321
|
+
'layer',
|
|
322
|
+
'layer-active',
|
|
323
|
+
'layer-hover',
|
|
324
|
+
'layer-selected',
|
|
325
|
+
'layer-selected-hover',
|
|
326
|
+
'layer-accent',
|
|
327
|
+
'layer-accent-hover',
|
|
328
|
+
'layer-accent-active',
|
|
329
|
+
'field',
|
|
330
|
+
'field-hover',
|
|
331
|
+
'border-subtle',
|
|
332
|
+
'border-subtle-selected',
|
|
333
|
+
'border-strong',
|
|
334
|
+
],
|
|
335
|
+
});
|
|
336
|
+
|
|
317
337
|
export const group = TokenGroup.create({
|
|
318
338
|
name: 'All',
|
|
319
339
|
tokens: [
|