@redhat-cloud-services/frontend-components 3.8.11 → 3.8.12

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.
Files changed (11) hide show
  1. package/InsightsLabel/InsightsLabel.js +5 -6
  2. package/InsightsLabel/InsightsLabel.js.map +1 -1
  3. package/InsightsLabel/labels.css +3 -37
  4. package/InsightsLabel/labels.scss +4 -39
  5. package/esm/InsightsLabel/InsightsLabel.js +5 -6
  6. package/esm/InsightsLabel/InsightsLabel.js.map +1 -1
  7. package/esm/InsightsLabel/labels.css +3 -37
  8. package/esm/InsightsLabel/labels.scss +4 -39
  9. package/esm/index.css +3 -37
  10. package/index.css +3 -37
  11. package/package.json +1 -1
package/InsightsLabel/InsightsLabel.js CHANGED
@@ -32,16 +32,15 @@ var react_icons_3 = require("@patternfly/react-icons");
32
32
  var react_icons_4 = require("@patternfly/react-icons");
33
33
  var react_core_1 = require("@patternfly/react-core");
34
34
  var react_1 = __importDefault(require("react"));
35
- var classnames_1 = __importDefault(require("classnames"));
36
35
  var VALUE_TO_STATE = {
37
- 1: { icon: react_1.default.createElement(react_icons_1.AngleDoubleDownIcon, null), text: 'Low' },
38
- 2: { icon: react_1.default.createElement(react_icons_4.EqualsIcon, null), text: 'Moderate' },
39
- 3: { icon: react_1.default.createElement(react_icons_2.AngleDoubleUpIcon, null), text: 'Important' },
40
- 4: { icon: react_1.default.createElement(react_icons_3.CriticalRiskIcon, null), text: 'Critical' },
36
+ 1: { icon: react_1.default.createElement(react_icons_1.AngleDoubleDownIcon, null), text: 'Low', color: 'blue' },
37
+ 2: { icon: react_1.default.createElement(react_icons_4.EqualsIcon, null), text: 'Moderate', color: undefined },
38
+ 3: { icon: react_1.default.createElement(react_icons_2.AngleDoubleUpIcon, null), text: 'Important', color: 'orange' },
39
+ 4: { icon: react_1.default.createElement(react_icons_3.CriticalRiskIcon, null), text: 'Critical', color: 'red' },
41
40
  };
42
41
  var InsightsLabel = function (_a) {
43
42
  var _b = _a.value, value = _b === void 0 ? 1 : _b, text = _a.text, hideIcon = _a.hideIcon, className = _a.className, rest = _a.rest, props = __rest(_a, ["value", "text", "hideIcon", "className", "rest"]);
44
- return (react_1.default.createElement(react_core_1.Label, __assign({}, rest, props, { className: (0, classnames_1.default)(className, "ins-c-label-".concat(value)), icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
43
+ return (react_1.default.createElement(react_core_1.Label, __assign({}, rest, props, { className: value === 2 ? 'ins-c-label-2' : '', color: VALUE_TO_STATE[value].color, icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
45
44
  };
46
45
  exports.default = InsightsLabel;
47
46
  //# sourceMappingURL=InsightsLabel.js.map
package/InsightsLabel/InsightsLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yBAAuB;AAEvB,uDAA8D;AAC9D,uDAA4D;AAC5D,uDAA2D;AAC3D,uDAAqD;AACrD,qDAA2D;AAC3D,gDAA0B;AAC1B,0DAAoC;AAQpC,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,iCAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,wBAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;IAC7C,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,+BAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE;IACrD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,8BAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;CACpD,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,8BAAC,kBAAK,eAAK,IAAI,EAAM,KAAK,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,sBAAe,KAAK,CAAE,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAChI,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yBAAuB;AAEvB,uDAA8D;AAC9D,uDAA4D;AAC5D,uDAA2D;AAC3D,uDAAqD;AACrD,qDAA2D;AAC3D,gDAA0B;AAS1B,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,iCAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;IAChE,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,wBAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;IAC/D,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,+BAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtE,CAAC,EAAE,EAAE,IAAI,EAAE,8BAAC,8BAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;CAClE,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,8BAAC,kBAAK,eACA,IAAI,EACJ,KAAK,IACT,SAAS,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7C,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,KAAK,EAClC,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAE5C,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}
package/InsightsLabel/labels.css CHANGED
@@ -1,36 +1,8 @@
1
1
  .pf-c-label {
2
- --ins-c-label--red-bg: #faeae8;
3
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
4
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
5
- --ins-c-label--orange-bg: #FFF5EC;
6
- --inc-c-label--content-orange: #773D00;
7
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
8
2
  --ins-c-label--gold-bg: #fdf7e7;
9
3
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
10
4
  --inc-c-label--icon-gold: #F4C145;
11
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
12
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
13
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
14
- }
15
-
16
- .ins-c-label-4.pf-c-label {
17
- background-color: var(--ins-c-label--red-bg);
18
- }
19
- .ins-c-label-4.pf-c-label .pf-c-label__content {
20
- color: var(--inc-c-label--content-red);
21
- }
22
- .ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
23
- color: var(--inc-c-label--icon-red);
24
- }
25
-
26
- .ins-c-label-3.pf-c-label {
27
- background-color: var(--ins-c-label--orange-bg);
28
- }
29
- .ins-c-label-3.pf-c-label .pf-c-label__content {
30
- color: var(--inc-c-label--content-orange);
31
- }
32
- .ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
33
- color: var(--inc-c-label--icon-orange);
5
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
34
6
  }
35
7
 
36
8
  .ins-c-label-2.pf-c-label {
@@ -43,12 +15,6 @@
43
15
  color: var(--inc-c-label--icon-gold);
44
16
  }
45
17
 
46
- .ins-c-label-1.pf-c-label {
47
- background-color: var(--ins-c-label--blue-bg);
48
- }
49
- .ins-c-label-1.pf-c-label .pf-c-label__content {
50
- color: var(--inc-c-label--content-blue);
51
- }
52
- .ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
53
- color: var(--inc-c-label--icon-blue);
18
+ .ins-c-label-2.pf-c-label .pf-c-label__content::before {
19
+ border: 1px solid var(--inc-c-label--border-gold);
54
20
  }
package/InsightsLabel/labels.scss CHANGED
@@ -1,36 +1,8 @@
1
1
  .pf-c-label {
2
- --ins-c-label--red-bg: #faeae8;
3
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
4
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
5
- --ins-c-label--orange-bg: #FFF5EC;
6
- --inc-c-label--content-orange: #773D00;
7
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
8
2
  --ins-c-label--gold-bg: #fdf7e7;
9
3
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
10
4
  --inc-c-label--icon-gold: #F4C145;
11
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
12
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
13
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
14
- }
15
-
16
- .ins-c-label-4.pf-c-label {
17
- background-color: var(--ins-c-label--red-bg);
18
- .pf-c-label__content {
19
- color: var(--inc-c-label--content-red);
20
- .pf-c-label__icon {
21
- color: var(--inc-c-label--icon-red);
22
- }
23
- }
24
- }
25
-
26
- .ins-c-label-3.pf-c-label {
27
- background-color: var(--ins-c-label--orange-bg);
28
- .pf-c-label__content {
29
- color: var(--inc-c-label--content-orange);
30
- .pf-c-label__icon {
31
- color: var(--inc-c-label--icon-orange);
32
- }
33
- }
5
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100)
34
6
  }
35
7
 
36
8
  .ins-c-label-2.pf-c-label {
@@ -42,13 +14,6 @@
42
14
  }
43
15
  }
44
16
  }
45
-
46
- .ins-c-label-1.pf-c-label {
47
- background-color: var(--ins-c-label--blue-bg);
48
- .pf-c-label__content {
49
- color: var(--inc-c-label--content-blue);
50
- .pf-c-label__icon {
51
- color: var(--inc-c-label--icon-blue);
52
- }
53
- }
54
- }
17
+ .ins-c-label-2.pf-c-label {.pf-c-label__content::before {
18
+ border: 1px solid var(--inc-c-label--border-gold);
19
+ }}
package/esm/InsightsLabel/InsightsLabel.js CHANGED
@@ -27,16 +27,15 @@ import { CriticalRiskIcon } from '@patternfly/react-icons';
27
27
  import { EqualsIcon } from '@patternfly/react-icons';
28
28
  import { Label } from '@patternfly/react-core';
29
29
  import React from 'react';
30
- import classNames from 'classnames';
31
30
  var VALUE_TO_STATE = {
32
- 1: { icon: React.createElement(AngleDoubleDownIcon, null), text: 'Low' },
33
- 2: { icon: React.createElement(EqualsIcon, null), text: 'Moderate' },
34
- 3: { icon: React.createElement(AngleDoubleUpIcon, null), text: 'Important' },
35
- 4: { icon: React.createElement(CriticalRiskIcon, null), text: 'Critical' },
31
+ 1: { icon: React.createElement(AngleDoubleDownIcon, null), text: 'Low', color: 'blue' },
32
+ 2: { icon: React.createElement(EqualsIcon, null), text: 'Moderate', color: undefined },
33
+ 3: { icon: React.createElement(AngleDoubleUpIcon, null), text: 'Important', color: 'orange' },
34
+ 4: { icon: React.createElement(CriticalRiskIcon, null), text: 'Critical', color: 'red' },
36
35
  };
37
36
  var InsightsLabel = function (_a) {
38
37
  var _b = _a.value, value = _b === void 0 ? 1 : _b, text = _a.text, hideIcon = _a.hideIcon, className = _a.className, rest = _a.rest, props = __rest(_a, ["value", "text", "hideIcon", "className", "rest"]);
39
- return (React.createElement(Label, __assign({}, rest, props, { className: classNames(className, "ins-c-label-".concat(value)), icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
38
+ return (React.createElement(Label, __assign({}, rest, props, { className: value === 2 ? 'ins-c-label-2' : '', color: VALUE_TO_STATE[value].color, icon: !hideIcon && VALUE_TO_STATE[value].icon }), text || VALUE_TO_STATE[value].text));
40
39
  };
41
40
  export default InsightsLabel;
42
41
  //# sourceMappingURL=InsightsLabel.js.map
package/esm/InsightsLabel/InsightsLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAc,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,UAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;IAC7C,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,iBAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE;IACrD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,gBAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE;CACpD,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,oBAAC,KAAK,eAAK,IAAI,EAAM,KAAK,IAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,sBAAe,KAAK,CAAE,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAChI,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"InsightsLabel.js","sourceRoot":"","sources":["../../src/InsightsLabel/InsightsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAc,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,IAAM,cAAc,GAA8B;IAChD,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;IAChE,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,UAAU,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;IAC/D,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,iBAAiB,OAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtE,CAAC,EAAE,EAAE,IAAI,EAAE,oBAAC,gBAAgB,OAAG,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;CAClE,CAAC;AAaF,IAAM,aAAa,GAAgD,UAAC,EAAwD;IAAtD,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAtD,kDAAwD,CAAF;IACxH,OAAO,CACL,oBAAC,KAAK,eACA,IAAI,EACJ,KAAK,IACT,SAAS,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7C,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,KAAK,EAClC,IAAI,EAAE,CAAC,QAAQ,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAE5C,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAC7B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/esm/InsightsLabel/labels.css CHANGED
@@ -1,36 +1,8 @@
1
1
  .pf-c-label {
2
- --ins-c-label--red-bg: #faeae8;
3
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
4
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
5
- --ins-c-label--orange-bg: #FFF5EC;
6
- --inc-c-label--content-orange: #773D00;
7
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
8
2
  --ins-c-label--gold-bg: #fdf7e7;
9
3
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
10
4
  --inc-c-label--icon-gold: #F4C145;
11
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
12
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
13
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
14
- }
15
-
16
- .ins-c-label-4.pf-c-label {
17
- background-color: var(--ins-c-label--red-bg);
18
- }
19
- .ins-c-label-4.pf-c-label .pf-c-label__content {
20
- color: var(--inc-c-label--content-red);
21
- }
22
- .ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
23
- color: var(--inc-c-label--icon-red);
24
- }
25
-
26
- .ins-c-label-3.pf-c-label {
27
- background-color: var(--ins-c-label--orange-bg);
28
- }
29
- .ins-c-label-3.pf-c-label .pf-c-label__content {
30
- color: var(--inc-c-label--content-orange);
31
- }
32
- .ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
33
- color: var(--inc-c-label--icon-orange);
5
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
34
6
  }
35
7
 
36
8
  .ins-c-label-2.pf-c-label {
@@ -43,12 +15,6 @@
43
15
  color: var(--inc-c-label--icon-gold);
44
16
  }
45
17
 
46
- .ins-c-label-1.pf-c-label {
47
- background-color: var(--ins-c-label--blue-bg);
48
- }
49
- .ins-c-label-1.pf-c-label .pf-c-label__content {
50
- color: var(--inc-c-label--content-blue);
51
- }
52
- .ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
53
- color: var(--inc-c-label--icon-blue);
18
+ .ins-c-label-2.pf-c-label .pf-c-label__content::before {
19
+ border: 1px solid var(--inc-c-label--border-gold);
54
20
  }
package/esm/InsightsLabel/labels.scss CHANGED
@@ -1,36 +1,8 @@
1
1
  .pf-c-label {
2
- --ins-c-label--red-bg: #faeae8;
3
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
4
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
5
- --ins-c-label--orange-bg: #FFF5EC;
6
- --inc-c-label--content-orange: #773D00;
7
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
8
2
  --ins-c-label--gold-bg: #fdf7e7;
9
3
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
10
4
  --inc-c-label--icon-gold: #F4C145;
11
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
12
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
13
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
14
- }
15
-
16
- .ins-c-label-4.pf-c-label {
17
- background-color: var(--ins-c-label--red-bg);
18
- .pf-c-label__content {
19
- color: var(--inc-c-label--content-red);
20
- .pf-c-label__icon {
21
- color: var(--inc-c-label--icon-red);
22
- }
23
- }
24
- }
25
-
26
- .ins-c-label-3.pf-c-label {
27
- background-color: var(--ins-c-label--orange-bg);
28
- .pf-c-label__content {
29
- color: var(--inc-c-label--content-orange);
30
- .pf-c-label__icon {
31
- color: var(--inc-c-label--icon-orange);
32
- }
33
- }
5
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100)
34
6
  }
35
7
 
36
8
  .ins-c-label-2.pf-c-label {
@@ -42,13 +14,6 @@
42
14
  }
43
15
  }
44
16
  }
45
-
46
- .ins-c-label-1.pf-c-label {
47
- background-color: var(--ins-c-label--blue-bg);
48
- .pf-c-label__content {
49
- color: var(--inc-c-label--content-blue);
50
- .pf-c-label__icon {
51
- color: var(--inc-c-label--icon-blue);
52
- }
53
- }
54
- }
17
+ .ins-c-label-2.pf-c-label {.pf-c-label__content::before {
18
+ border: 1px solid var(--inc-c-label--border-gold);
19
+ }}
package/esm/index.css CHANGED
@@ -238,38 +238,10 @@ i.ins-battery svg {
238
238
  }
239
239
 
240
240
  .pf-c-label {
241
- --ins-c-label--red-bg: #faeae8;
242
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
243
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
244
- --ins-c-label--orange-bg: #FFF5EC;
245
- --inc-c-label--content-orange: #773D00;
246
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
247
241
  --ins-c-label--gold-bg: #fdf7e7;
248
242
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
249
243
  --inc-c-label--icon-gold: #F4C145;
250
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
251
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
252
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
253
- }
254
-
255
- .ins-c-label-4.pf-c-label {
256
- background-color: var(--ins-c-label--red-bg);
257
- }
258
- .ins-c-label-4.pf-c-label .pf-c-label__content {
259
- color: var(--inc-c-label--content-red);
260
- }
261
- .ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
262
- color: var(--inc-c-label--icon-red);
263
- }
264
-
265
- .ins-c-label-3.pf-c-label {
266
- background-color: var(--ins-c-label--orange-bg);
267
- }
268
- .ins-c-label-3.pf-c-label .pf-c-label__content {
269
- color: var(--inc-c-label--content-orange);
270
- }
271
- .ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
272
- color: var(--inc-c-label--icon-orange);
244
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
273
245
  }
274
246
 
275
247
  .ins-c-label-2.pf-c-label {
@@ -282,14 +254,8 @@ i.ins-battery svg {
282
254
  color: var(--inc-c-label--icon-gold);
283
255
  }
284
256
 
285
- .ins-c-label-1.pf-c-label {
286
- background-color: var(--ins-c-label--blue-bg);
287
- }
288
- .ins-c-label-1.pf-c-label .pf-c-label__content {
289
- color: var(--inc-c-label--content-blue);
290
- }
291
- .ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
292
- color: var(--inc-c-label--icon-blue);
257
+ .ins-c-label-2.pf-c-label .pf-c-label__content::before {
258
+ border: 1px solid var(--inc-c-label--border-gold);
293
259
  }
294
260
 
295
261
  .Icon404 {
package/index.css CHANGED
@@ -238,38 +238,10 @@ i.ins-battery svg {
238
238
  }
239
239
 
240
240
  .pf-c-label {
241
- --ins-c-label--red-bg: #faeae8;
242
- --inc-c-label--content-red: var(--pf-global--palette--red-300);
243
- --inc-c-label--icon-red: var(--pf-global--palette--red-200);
244
- --ins-c-label--orange-bg: #FFF5EC;
245
- --inc-c-label--content-orange: #773D00;
246
- --inc-c-label--icon-orange: var(--pf-global--palette--orange-300);
247
241
  --ins-c-label--gold-bg: #fdf7e7;
248
242
  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
249
243
  --inc-c-label--icon-gold: #F4C145;
250
- --ins-c-label--blue-bg: var(--pf-global--palette--blue-50);
251
- --inc-c-label--content-blue: var(--pf-global--palette--blue-600);
252
- --inc-c-label--icon-blue: var(--pf-global--palette--blue-300);
253
- }
254
-
255
- .ins-c-label-4.pf-c-label {
256
- background-color: var(--ins-c-label--red-bg);
257
- }
258
- .ins-c-label-4.pf-c-label .pf-c-label__content {
259
- color: var(--inc-c-label--content-red);
260
- }
261
- .ins-c-label-4.pf-c-label .pf-c-label__content .pf-c-label__icon {
262
- color: var(--inc-c-label--icon-red);
263
- }
264
-
265
- .ins-c-label-3.pf-c-label {
266
- background-color: var(--ins-c-label--orange-bg);
267
- }
268
- .ins-c-label-3.pf-c-label .pf-c-label__content {
269
- color: var(--inc-c-label--content-orange);
270
- }
271
- .ins-c-label-3.pf-c-label .pf-c-label__content .pf-c-label__icon {
272
- color: var(--inc-c-label--icon-orange);
244
+ --inc-c-label--border-gold: var(--pf-global--palette--gold-100) ;
273
245
  }
274
246
 
275
247
  .ins-c-label-2.pf-c-label {
@@ -282,14 +254,8 @@ i.ins-battery svg {
282
254
  color: var(--inc-c-label--icon-gold);
283
255
  }
284
256
 
285
- .ins-c-label-1.pf-c-label {
286
- background-color: var(--ins-c-label--blue-bg);
287
- }
288
- .ins-c-label-1.pf-c-label .pf-c-label__content {
289
- color: var(--inc-c-label--content-blue);
290
- }
291
- .ins-c-label-1.pf-c-label .pf-c-label__content .pf-c-label__icon {
292
- color: var(--inc-c-label--icon-blue);
257
+ .ins-c-label-2.pf-c-label .pf-c-label__content::before {
258
+ border: 1px solid var(--inc-c-label--border-gold);
293
259
  }
294
260
 
295
261
  .Icon404 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redhat-cloud-services/frontend-components",
3
- "version": "3.8.11",
3
+ "version": "3.8.12",
4
4
  "description": "Common components for RedHat Cloud Services project.",
5
5
  "main": "index.js",
6
6
  "module": "esm/index.js",