@carbon/themes 11.47.0-rc.0 → 11.48.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/es/index.js +12 -2
- package/lib/index.js +11 -1
- package/package.json +6 -6
- package/scss/generated/_status-tokens.scss +10 -0
- package/src/component-tokens/status/tokens.js +12 -0
- package/src/tokens/components.js +2 -0
- package/umd/index.js +11 -1
package/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, purple40, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, rgba, blue10, black, blue100, gray90, gray70Hover, gray60Hover, gray50Hover, red30, red40, purple50, gray90Hover, blue80, blue90, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta20Hover, magenta70Hover, purple20, purple70, purple20Hover, purple70Hover, blue20Hover, blue70Hover, cyan20, cyan70, cyan20Hover, cyan70Hover, teal20, teal70, teal20Hover, teal70Hover, green20, green70, green20Hover, green70Hover, coolGray20, coolGray70, coolGray100, coolGray10, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray100, warmGray10, warmGray20Hover, warmGray70Hover, cyan40, cyan50, teal40, teal50, magenta40, magenta50, coolGray40, coolGray50, warmGray40, warmGray50, red10, green10, yellow10, white0 } from '@carbon/colors';
|
|
1
|
+
import { white as white$2, gray80, blue60, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray50, gray40, gray70, gray60, red60, blue70, blue40, purple60, purple40, blue30, green50, yellow30, red50, green40, blue50, orange40, blue20, rgba, blue10, black, blue100, gray90, gray70Hover, gray60Hover, gray50Hover, red30, red40, purple50, gray90Hover, blue80, blue90, green60, red80, red20, red70, red20Hover, red70Hover, magenta20, magenta70, magenta20Hover, magenta70Hover, purple20, purple70, purple20Hover, purple70Hover, blue20Hover, blue70Hover, cyan20, cyan70, cyan20Hover, cyan70Hover, teal20, teal70, teal20Hover, teal70Hover, green20, green70, green20Hover, green70Hover, coolGray20, coolGray70, coolGray100, coolGray10, coolGray20Hover, coolGray70Hover, warmGray20, warmGray70, warmGray100, warmGray10, warmGray20Hover, warmGray70Hover, cyan40, cyan50, teal40, teal50, magenta40, magenta50, coolGray40, coolGray50, warmGray40, warmGray50, red10, green10, yellow10, white0, orange60, yellow60 } from '@carbon/colors';
|
|
2
2
|
import Color from 'color';
|
|
3
3
|
import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
|
|
4
4
|
export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
|
|
@@ -4647,12 +4647,20 @@ var statusOrange = {
|
|
|
4647
4647
|
g90: orange40,
|
|
4648
4648
|
g100: orange40
|
|
4649
4649
|
};
|
|
4650
|
+
var statusOrangeOutline = {
|
|
4651
|
+
whiteTheme: orange60,
|
|
4652
|
+
g10: orange60
|
|
4653
|
+
};
|
|
4650
4654
|
var statusYellow = {
|
|
4651
4655
|
whiteTheme: yellow30,
|
|
4652
4656
|
g10: yellow30,
|
|
4653
4657
|
g90: yellow30,
|
|
4654
4658
|
g100: yellow30
|
|
4655
4659
|
};
|
|
4660
|
+
var statusYellowOutline = {
|
|
4661
|
+
whiteTheme: yellow60,
|
|
4662
|
+
g10: yellow60
|
|
4663
|
+
};
|
|
4656
4664
|
var statusPurple = {
|
|
4657
4665
|
whiteTheme: purple60,
|
|
4658
4666
|
g10: purple60,
|
|
@@ -4688,7 +4696,9 @@ var tokens = /*#__PURE__*/Object.freeze({
|
|
|
4688
4696
|
__proto__: null,
|
|
4689
4697
|
statusRed: statusRed,
|
|
4690
4698
|
statusOrange: statusOrange,
|
|
4699
|
+
statusOrangeOutline: statusOrangeOutline,
|
|
4691
4700
|
statusYellow: statusYellow,
|
|
4701
|
+
statusYellowOutline: statusYellowOutline,
|
|
4692
4702
|
statusPurple: statusPurple,
|
|
4693
4703
|
statusGreen: statusGreen,
|
|
4694
4704
|
statusBlue: statusBlue,
|
|
@@ -5242,7 +5252,7 @@ var tag = TokenGroup.create({
|
|
|
5242
5252
|
var status = TokenGroup.create({
|
|
5243
5253
|
name: 'Status',
|
|
5244
5254
|
properties: [],
|
|
5245
|
-
tokens: ['status-red', 'status-orange', 'status-yellow', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5255
|
+
tokens: ['status-red', 'status-orange', 'status-orange-outline', 'status-yellow', 'status-yellow-outline', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5246
5256
|
});
|
|
5247
5257
|
|
|
5248
5258
|
var components = /*#__PURE__*/Object.freeze({
|
package/lib/index.js
CHANGED
|
@@ -4653,12 +4653,20 @@ var statusOrange = {
|
|
|
4653
4653
|
g90: colors$1.orange40,
|
|
4654
4654
|
g100: colors$1.orange40
|
|
4655
4655
|
};
|
|
4656
|
+
var statusOrangeOutline = {
|
|
4657
|
+
whiteTheme: colors$1.orange60,
|
|
4658
|
+
g10: colors$1.orange60
|
|
4659
|
+
};
|
|
4656
4660
|
var statusYellow = {
|
|
4657
4661
|
whiteTheme: colors$1.yellow30,
|
|
4658
4662
|
g10: colors$1.yellow30,
|
|
4659
4663
|
g90: colors$1.yellow30,
|
|
4660
4664
|
g100: colors$1.yellow30
|
|
4661
4665
|
};
|
|
4666
|
+
var statusYellowOutline = {
|
|
4667
|
+
whiteTheme: colors$1.yellow60,
|
|
4668
|
+
g10: colors$1.yellow60
|
|
4669
|
+
};
|
|
4662
4670
|
var statusPurple = {
|
|
4663
4671
|
whiteTheme: colors$1.purple60,
|
|
4664
4672
|
g10: colors$1.purple60,
|
|
@@ -4694,7 +4702,9 @@ var tokens = /*#__PURE__*/Object.freeze({
|
|
|
4694
4702
|
__proto__: null,
|
|
4695
4703
|
statusRed: statusRed,
|
|
4696
4704
|
statusOrange: statusOrange,
|
|
4705
|
+
statusOrangeOutline: statusOrangeOutline,
|
|
4697
4706
|
statusYellow: statusYellow,
|
|
4707
|
+
statusYellowOutline: statusYellowOutline,
|
|
4698
4708
|
statusPurple: statusPurple,
|
|
4699
4709
|
statusGreen: statusGreen,
|
|
4700
4710
|
statusBlue: statusBlue,
|
|
@@ -5248,7 +5258,7 @@ var tag = TokenGroup.create({
|
|
|
5248
5258
|
var status = TokenGroup.create({
|
|
5249
5259
|
name: 'Status',
|
|
5250
5260
|
properties: [],
|
|
5251
|
-
tokens: ['status-red', 'status-orange', 'status-yellow', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5261
|
+
tokens: ['status-red', 'status-orange', 'status-orange-outline', 'status-yellow', 'status-yellow-outline', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5252
5262
|
});
|
|
5253
5263
|
|
|
5254
5264
|
var components = /*#__PURE__*/Object.freeze({
|
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.48.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
"postinstall": "ibmtelemetry --config=telemetry.yml"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@carbon/colors": "^11.30.0
|
|
35
|
-
"@carbon/layout": "^11.30.0
|
|
36
|
-
"@carbon/type": "^11.36.0
|
|
34
|
+
"@carbon/colors": "^11.30.0",
|
|
35
|
+
"@carbon/layout": "^11.30.0",
|
|
36
|
+
"@carbon/type": "^11.36.0",
|
|
37
37
|
"@ibm/telemetry-js": "^1.5.0",
|
|
38
38
|
"color": "^4.0.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@babel/node": "^7.24.7",
|
|
42
42
|
"@babel/preset-env": "^7.24.7",
|
|
43
|
-
"@carbon/cli": "^11.24.0
|
|
43
|
+
"@carbon/cli": "^11.24.0",
|
|
44
44
|
"@carbon/cli-reporter": "^10.7.0",
|
|
45
45
|
"@carbon/scss-generator": "^10.19.0",
|
|
46
46
|
"@carbon/test-utils": "^10.35.0",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"rimraf": "^6.0.0"
|
|
52
52
|
},
|
|
53
53
|
"sideEffects": false,
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "9134345acdba15a2406b4a7df9781bccf0a32ab6"
|
|
55
55
|
}
|
|
@@ -43,6 +43,11 @@ $status-orange: (
|
|
|
43
43
|
g-100: #ff832b,
|
|
44
44
|
) !default;
|
|
45
45
|
|
|
46
|
+
$status-orange-outline: (
|
|
47
|
+
white-theme: #ba4e00,
|
|
48
|
+
g-10: #ba4e00,
|
|
49
|
+
) !default;
|
|
50
|
+
|
|
46
51
|
$status-purple: (
|
|
47
52
|
white-theme: #8a3ffc,
|
|
48
53
|
g-10: #8a3ffc,
|
|
@@ -63,3 +68,8 @@ $status-yellow: (
|
|
|
63
68
|
g-90: #f1c21b,
|
|
64
69
|
g-100: #f1c21b,
|
|
65
70
|
) !default;
|
|
71
|
+
|
|
72
|
+
$status-yellow-outline: (
|
|
73
|
+
white-theme: #8e6a00,
|
|
74
|
+
g-10: #8e6a00,
|
|
75
|
+
) !default;
|
|
@@ -2,7 +2,9 @@ import {
|
|
|
2
2
|
red50,
|
|
3
3
|
red60,
|
|
4
4
|
orange40,
|
|
5
|
+
orange60,
|
|
5
6
|
yellow30,
|
|
7
|
+
yellow60,
|
|
6
8
|
purple50,
|
|
7
9
|
purple60,
|
|
8
10
|
green40,
|
|
@@ -29,6 +31,11 @@ export const statusOrange = {
|
|
|
29
31
|
g100: orange40,
|
|
30
32
|
};
|
|
31
33
|
|
|
34
|
+
export const statusOrangeOutline = {
|
|
35
|
+
whiteTheme: orange60,
|
|
36
|
+
g10: orange60,
|
|
37
|
+
};
|
|
38
|
+
|
|
32
39
|
export const statusYellow = {
|
|
33
40
|
whiteTheme: yellow30,
|
|
34
41
|
g10: yellow30,
|
|
@@ -36,6 +43,11 @@ export const statusYellow = {
|
|
|
36
43
|
g100: yellow30,
|
|
37
44
|
};
|
|
38
45
|
|
|
46
|
+
export const statusYellowOutline = {
|
|
47
|
+
whiteTheme: yellow60,
|
|
48
|
+
g10: yellow60,
|
|
49
|
+
};
|
|
50
|
+
|
|
39
51
|
export const statusPurple = {
|
|
40
52
|
whiteTheme: purple60,
|
|
41
53
|
g10: purple60,
|
package/src/tokens/components.js
CHANGED
package/umd/index.js
CHANGED
|
@@ -4650,12 +4650,20 @@
|
|
|
4650
4650
|
g90: colors$1.orange40,
|
|
4651
4651
|
g100: colors$1.orange40
|
|
4652
4652
|
};
|
|
4653
|
+
var statusOrangeOutline = {
|
|
4654
|
+
whiteTheme: colors$1.orange60,
|
|
4655
|
+
g10: colors$1.orange60
|
|
4656
|
+
};
|
|
4653
4657
|
var statusYellow = {
|
|
4654
4658
|
whiteTheme: colors$1.yellow30,
|
|
4655
4659
|
g10: colors$1.yellow30,
|
|
4656
4660
|
g90: colors$1.yellow30,
|
|
4657
4661
|
g100: colors$1.yellow30
|
|
4658
4662
|
};
|
|
4663
|
+
var statusYellowOutline = {
|
|
4664
|
+
whiteTheme: colors$1.yellow60,
|
|
4665
|
+
g10: colors$1.yellow60
|
|
4666
|
+
};
|
|
4659
4667
|
var statusPurple = {
|
|
4660
4668
|
whiteTheme: colors$1.purple60,
|
|
4661
4669
|
g10: colors$1.purple60,
|
|
@@ -4691,7 +4699,9 @@
|
|
|
4691
4699
|
__proto__: null,
|
|
4692
4700
|
statusRed: statusRed,
|
|
4693
4701
|
statusOrange: statusOrange,
|
|
4702
|
+
statusOrangeOutline: statusOrangeOutline,
|
|
4694
4703
|
statusYellow: statusYellow,
|
|
4704
|
+
statusYellowOutline: statusYellowOutline,
|
|
4695
4705
|
statusPurple: statusPurple,
|
|
4696
4706
|
statusGreen: statusGreen,
|
|
4697
4707
|
statusBlue: statusBlue,
|
|
@@ -5245,7 +5255,7 @@
|
|
|
5245
5255
|
var status = TokenGroup.create({
|
|
5246
5256
|
name: 'Status',
|
|
5247
5257
|
properties: [],
|
|
5248
|
-
tokens: ['status-red', 'status-orange', 'status-yellow', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5258
|
+
tokens: ['status-red', 'status-orange', 'status-orange-outline', 'status-yellow', 'status-yellow-outline', 'status-purple', 'status-green', 'status-blue', 'status-gray']
|
|
5249
5259
|
});
|
|
5250
5260
|
|
|
5251
5261
|
var components = /*#__PURE__*/Object.freeze({
|