@patternfly/patternfly 4.192.5 → 4.194.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.
Files changed (24) hide show
  1. package/base/_chart-globals.scss +131 -0
  2. package/components/Label/label.css +5 -3
  3. package/components/Label/label.scss +3 -1
  4. package/components/Spinner/spinner.css +12 -12
  5. package/components/Spinner/spinner.scss +12 -12
  6. package/components/Tabs/tabs.css +2 -0
  7. package/components/Tabs/tabs.scss +2 -0
  8. package/docs/components/Label/examples/Label.md +13 -1
  9. package/docs/components/LabelGroup/examples/LabelGroup.md +52 -5
  10. package/docs/demos/Card/examples/Card.md +4 -1
  11. package/docs/demos/Dashboard/examples/Dashboard.md +4 -1
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -10
  13. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  14. package/package.json +1 -1
  15. package/patternfly-charts-theme-dark.css +69 -0
  16. package/patternfly-charts-theme-dark.scss +8 -0
  17. package/patternfly-charts.css +109 -0
  18. package/patternfly-charts.scss +131 -0
  19. package/patternfly-no-reset.css +19 -15
  20. package/patternfly.css +19 -15
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
  23. package/themes/dark/_chart-globals.scss +39 -0
  24. package/themes/dark/_patternfly-charts-theme-dark.scss +98 -0
package/themes/dark/_chart-globals.scss ADDED
@@ -0,0 +1,39 @@
1
+ @import "../../sass-utilities/colors";
2
+ @import "../../sass-utilities/scss-variables";
3
+
4
+ // Chart colors
5
+
6
+ // blue
7
+ $pf-chart-color-blue-100: #add6ff;
8
+ $pf-chart-color-blue-200: #85c2ff;
9
+ $pf-chart-color-blue-300: #47a3ff;
10
+ $pf-chart-color-blue-400: #0a85ff;
11
+ $pf-chart-color-blue-500: $pf-color-blue-400;
12
+
13
+ // green
14
+ $pf-chart-color-green-100: #d6eed3;
15
+ $pf-chart-color-green-200: #aedca7;
16
+ $pf-chart-color-green-300: #85cb7c;
17
+ $pf-chart-color-green-400: #5cb950;
18
+ $pf-chart-color-green-500: $pf-color-green-500;
19
+
20
+ // cyan
21
+ $pf-chart-color-cyan-100: #b9feff;
22
+ $pf-chart-color-cyan-200: #86fdff;
23
+ $pf-chart-color-cyan-300: #00b5b8;
24
+ $pf-chart-color-cyan-400: #008c8f;
25
+ $pf-chart-color-cyan-500: $pf-color-cyan-400;
26
+
27
+ // purple
28
+ $pf-chart-color-purple-100: #cec8e4;
29
+ $pf-chart-color-purple-200: #a99fd1;
30
+ $pf-chart-color-purple-300: #9183c3;
31
+ $pf-chart-color-purple-400: #7968b6;
32
+ $pf-chart-color-purple-500: $pf-color-purple-500;
33
+
34
+ // red
35
+ $pf-chart-color-red-100: #ffadad;
36
+ $pf-chart-color-red-200: #ff7070;
37
+ $pf-chart-color-red-300: #ff4747;
38
+ $pf-chart-color-red-400: #ff0a0a;
39
+ $pf-chart-color-red-500: $pf-color-red-200;
package/themes/dark/_patternfly-charts-theme-dark.scss ADDED
@@ -0,0 +1,98 @@
1
+ @import "chart-globals";
2
+
3
+ @mixin pf-charts-theme-dark($pf-charts-theme-dark-class: "") {
4
+ // stylelint-disable
5
+ .pf-c-chart {
6
+ svg g[clip-path] {
7
+ mix-blend-mode: normal;
8
+ }
9
+ }
10
+
11
+ @at-root :root#{&} {
12
+ // colors
13
+ --pf-chart-color-blue-100: #{$pf-chart-color-blue-100};
14
+ --pf-chart-color-blue-200: #{$pf-chart-color-blue-200};
15
+ --pf-chart-color-blue-300: #{$pf-chart-color-blue-300};
16
+ --pf-chart-color-blue-400: #{$pf-chart-color-blue-400};
17
+ --pf-chart-color-blue-500: #{$pf-chart-color-blue-500};
18
+ --pf-chart-color-green-100: #{$pf-chart-color-green-100};
19
+ --pf-chart-color-green-200: #{$pf-chart-color-green-200};
20
+ --pf-chart-color-green-300: #{$pf-chart-color-green-300};
21
+ --pf-chart-color-green-400: #{$pf-chart-color-green-400};
22
+ --pf-chart-color-green-500: #{$pf-chart-color-green-500};
23
+ --pf-chart-color-cyan-100: #{$pf-chart-color-cyan-100};
24
+ --pf-chart-color-cyan-200: #{$pf-chart-color-cyan-200};
25
+ --pf-chart-color-cyan-300: #{$pf-chart-color-cyan-300};
26
+ --pf-chart-color-cyan-400: #{$pf-chart-color-cyan-400};
27
+ --pf-chart-color-cyan-500: #{$pf-chart-color-cyan-500};
28
+ --pf-chart-color-purple-100: #{$pf-chart-color-purple-100};
29
+ --pf-chart-color-purple-200: #{$pf-chart-color-purple-200};
30
+ --pf-chart-color-purple-300: #{$pf-chart-color-purple-300};
31
+ --pf-chart-color-purple-400: #{$pf-chart-color-purple-400};
32
+ --pf-chart-color-purple-500: #{$pf-chart-color-purple-500};
33
+ --pf-chart-color-red-100: #{$pf-chart-color-red-100};
34
+ --pf-chart-color-red-200: #{$pf-chart-color-red-200};
35
+ --pf-chart-color-red-300: #{$pf-chart-color-red-300};
36
+ --pf-chart-color-red-400: #{$pf-chart-color-red-400};
37
+ --pf-chart-color-red-500: #{$pf-chart-color-red-500};
38
+
39
+ // globals
40
+ --pf-chart-global--BorderColor: var(--pf-global--BorderColor--100);
41
+ --pf-chart-global--BorderColor--accent: var(--pf-global--BorderColor--400);
42
+ --pf-chart-global--label--Fill: var(--pf-global--Color--100);
43
+ --pf-chart-global--title--Fill: var(--pf-global--Color--100);
44
+ --pf-chart-global--subtitle--Fill: var(--pf-global--Color--200);
45
+ --pf-chart-global--tooltip--Fill: var(--pf-global--Color--100);
46
+ --pf-chart-global--tooltip--bg--Fill: var(--pf-global--BackgroundColor--300);
47
+
48
+ // axis
49
+ --pf-chart-axis--axis--stroke--Color: var(--pf-chart-global--BorderColor);
50
+ --pf-chart-axis--grid--stroke--Color: var(--pf-chart-global--BorderColor);
51
+ --pf-chart-axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
52
+ --pf-chart-axis--axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
53
+ --pf-chart-axis--grid--Fill: var(--pf-chart-global--BorderColor);
54
+ --pf-chart-axis--tick-label--Fill: var(--pf-chart-global--label--Fill);
55
+
56
+ // bullet
57
+ --pf-chart-bullet--label--title--Fill: var(--pf-chart-global--title--Fill);
58
+ --pf-chart-bullet--label--grouptitle--Fill: var(--pf-chart-bullet--label--title--Fill); // shares title styles
59
+ --pf-chart-bullet--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
60
+ --pf-chart-bullet--negative-measure--ColorScale--100: var(--pf-global--palette--red-400);
61
+ --pf-chart-bullet--negative-measure--ColorScale--200: var(--pf-global--palette--red-300);
62
+ --pf-chart-bullet--negative-measure--ColorScale--300: var(--pf-global--palette--red-200);
63
+ --pf-chart-bullet--negative-measure--ColorScale--400: var(--pf-global--palette--red-100);
64
+ --pf-chart-bullet--negative-measure--ColorScale--500: var(--pf-global--palette--red-9999);
65
+ --pf-chart-bullet--qualitative-range--ColorScale--100: var(--pf-global--palette--black-600);
66
+ --pf-chart-bullet--qualitative-range--ColorScale--200: var(--pf-global--palette--black-500);
67
+ --pf-chart-bullet--qualitative-range--ColorScale--300: var(--pf-global--palette--black-400);
68
+ --pf-chart-bullet--qualitative-range--ColorScale--400: var(--pf-global--palette--black-300);
69
+ --pf-chart-bullet--qualitative-range--ColorScale--500: var(--pf-global--palette--black-200);
70
+
71
+ // container
72
+ --pf-chart-container--cursor--line--Fill: var(--pf-chart-global--BorderColor--accent);
73
+
74
+ // donut
75
+ --pf-chart-donut--label--title--Fill: var(--pf-chart-global--title--Fill);
76
+ --pf-chart-donut--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
77
+
78
+ // lines
79
+ --pf-chart-line--data--stroke--Color: var(--pf-chart-global--BorderColor);
80
+
81
+ // Tooltips
82
+
83
+ // text color
84
+ --pf-chart-tooltip--Fill: var(--pf-chart-global--tooltip--Fill);
85
+ --pf-chart-voronoi--labels--Fill: var(--pf-chart-global--tooltip--Fill);
86
+ // background color
87
+ --pf-chart-tooltip--flyoutStyle--Fill: var(--pf-chart-global--tooltip--bg--Fill);
88
+ --pf-chart-voronoi--flyout--stroke--Fill: var(--pf-chart-global--tooltip--bg--Fill);
89
+ // border
90
+ --pf-chart-voronoi--flyout--stroke--Color: var(--pf-chart-global--tooltip--bg--Fill);;
91
+ }
92
+
93
+ // workspace - remove before commit
94
+ .ws-preview {
95
+ background: var(--pf-global--BackgroundColor--100);
96
+ }
97
+ // stylelint-enable
98
+ }