@patternfly/react-styles 4.74.13 → 4.75.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 (25) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/css/components/Topology/topology-components.css +15 -9
  3. package/css/components/Topology/topology-pipelines.css +364 -0
  4. package/css/components/Topology/topology-pipelines.d.ts +26 -0
  5. package/css/components/Topology/topology-pipelines.js +27 -0
  6. package/css/components/Topology/topology-pipelines.mjs +25 -0
  7. package/css/utilities/BackgroundColor/BackgroundColor.css +100 -0
  8. package/css/utilities/BackgroundColor/BackgroundColor.d.ts +2 -1
  9. package/css/utilities/BackgroundColor/BackgroundColor.js +2 -1
  10. package/css/utilities/BackgroundColor/BackgroundColor.mjs +2 -1
  11. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  12. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.d.ts +3 -0
  13. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.js +4 -0
  14. package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.mjs +2 -0
  15. package/css/utilities/Text/text.css +173 -0
  16. package/css/utilities/Text/text.d.ts +1 -0
  17. package/css/utilities/Text/text.js +1 -0
  18. package/css/utilities/Text/text.mjs +1 -0
  19. package/css/utilities/Text/themes/dark/text.css +0 -0
  20. package/css/utilities/Text/themes/dark/text.d.ts +3 -0
  21. package/css/utilities/Text/themes/dark/text.js +4 -0
  22. package/css/utilities/Text/themes/dark/text.mjs +2 -0
  23. package/package.json +3 -3
  24. package/src/css/components/Topology/topology-components.css +15 -9
  25. package/src/css/components/Topology/topology-pipelines.css +364 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 4.75.0 (2022-07-14)
7
+
8
+
9
+ ### Features
10
+
11
+ * **Topology:** Add Topology pipeline support ([#7609](https://github.com/patternfly/patternfly-react/issues/7609)) ([4fb563f](https://github.com/patternfly/patternfly-react/commit/4fb563fb8651c0386f7cc59fd9c736af6fb683ec))
12
+
13
+
14
+
15
+
16
+
17
+ ## 4.74.15 (2022-07-12)
18
+
19
+ **Note:** Version bump only for package @patternfly/react-styles
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.74.14 (2022-07-11)
26
+
27
+ **Note:** Version bump only for package @patternfly/react-styles
28
+
29
+
30
+
31
+
32
+
6
33
  ## 4.74.13 (2022-07-11)
7
34
 
8
35
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/Topology/topology-components.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --pf-topology__node__background--Stroke: var(--pf-global--BorderColor--100);
15
15
  --pf-topology__node__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
16
16
  --pf-topology__node--m-dragging--background--StrokeWidth: var(--pf-global--BorderWidth--sm);
17
-
17
+
18
18
  --pf-topology__node--m-hover--background--Stroke: unset;
19
19
  --pf-topology__node--m-hover--label__background--Stroke: unset;
20
20
 
@@ -46,7 +46,7 @@
46
46
  /* node labels */
47
47
  --pf-topology__node__label__text--Fill: var(--pf-global--palette--black-1000);
48
48
  --pf-topology__node__label__text--m-secondary--Fill: var(--pf-global--Color--200);
49
-
49
+
50
50
  --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-global--Color--light-100);
51
51
  --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-global--Color--light-100);
52
52
  --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-global--Color--light-100);
@@ -111,7 +111,7 @@
111
111
 
112
112
  --pf-topology__group__label__node__label__background--Fill: var(--pf-global--BackgroundColor--dark-300);
113
113
  --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
114
- --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
114
+ --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
115
115
  --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-global--palette--white);
116
116
  --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--active-color--100);
117
117
 
@@ -160,7 +160,7 @@
160
160
  :root:where(.pf-theme-dark) {
161
161
  --pf-topology-visualization-surface--BackgroundColor: var(--pf-global--BackgroundColor--200);
162
162
 
163
- --pf-topology__node--Color: var(--pf-global--Color--100);
163
+ --pf-topology__node--Color: var(--pf-global--Color--100);
164
164
 
165
165
  /* dark create connector */
166
166
  --pf-topology__create-connector-color--Stroke: var(--pf-global--palette--black-300);
@@ -176,9 +176,9 @@
176
176
 
177
177
  --pf-topology__node--m-disabled--Background--Fill: var(--pf-topology__node__background--Fill);
178
178
  --pf-topology__node--m-disabled--Background--Stroke: var(--pf-global--palette--black-500);
179
-
179
+
180
180
  --pf-topology__node--m-dragging--background--StrokeWidth: 2px;
181
-
181
+
182
182
  --pf-topology__node--m-hover--background--Stroke: var(--pf-global--palette--black-100);
183
183
  --pf-topology__node--m-hover--label__background--Stroke: var(--pf-global--palette--black-100);
184
184
 
@@ -199,7 +199,7 @@
199
199
  --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-global--palette--black-900);
200
200
  --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-global--palette--black-900);
201
201
  --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-global--palette--black-900);
202
-
202
+
203
203
  --pf-topology__node__label__icon--Color: var(--pf-global--palette--black-600);
204
204
 
205
205
  --pf-topology__node__action-icon__icon--Color: var(--pf-global--Color--100);
@@ -209,7 +209,7 @@
209
209
  --pf-topology__group__background--Stroke: var(--pf-global--palette--black-300);
210
210
  --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-global--palette--black-500);
211
211
  --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-global--BorderColor--100);
212
- --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--palette--black-700);
212
+ --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--primary-color--300);
213
213
  --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-global--active-color--300);
214
214
  --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-800);
215
215
  --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-100);
@@ -247,7 +247,7 @@
247
247
  flex-grow: 1;
248
248
  flex-shrink: 1;
249
249
  overflow: hidden;
250
- position: relative;
250
+ position: relative;
251
251
  }
252
252
 
253
253
  .pf-topology-visualization-surface__svg {
@@ -560,6 +560,12 @@
560
560
  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
561
561
  }
562
562
 
563
+ .pf-topology__group.pf-m-hover.pf-m-selected .pf-topology__group__background {
564
+ --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
565
+ --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
566
+ --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
567
+ }
568
+
563
569
  .pf-topology__group.pf-m-drop-target .pf-topology__group__background {
564
570
  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-drop-target--topology__group__background--Stroke);
565
571
  stroke-dasharray: 12;
package/css/components/Topology/topology-pipelines.css ADDED
@@ -0,0 +1,364 @@
1
+ :root {
2
+
3
+ /* pill */
4
+ --pf-topology-pipelines__pill--Color: var(--pf-global--Color--100);
5
+ --pf-topology-pipelines__pill-text--FontSize: var(--pf-global--FontSize--sm);
6
+ --pf-topology-pipelines__pill-text--FontFamily: var(--pf-global--FontFamily--sans-serif);
7
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-global--BackgroundColor--100);
8
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-global--BorderColor--100);
9
+ --pf-topology-pipelines__pill-background--StrokeWidth: 1px;
10
+
11
+ /* pill with status */
12
+ --pf-topology-pipelines__pill-background--m-danger--Fill: var(--pf-global--danger-color--100);
13
+ --pf-topology-pipelines__pill-background--m-success--Fill: var(--pf-global--success-color--100);
14
+ --pf-topology-pipelines__pill-background--m-warning--Fill: var(--pf-global--warning-color--100);
15
+ --pf-topology-pipelines__pill-background--m-in-progress--Fill: var(--pf-global--info-color--100);
16
+ --pf-topology-pipelines__pill-background--m-pending--Fill: var(--pf-global--BackgroundColor--100);
17
+ --pf-topology-pipelines__pill-background--m-running--Fill: var(--pf-global--BackgroundColor--100);
18
+ --pf-topology-pipelines__pill-background--m-idle--Fill: var(--pf-global--BackgroundColor--100);
19
+
20
+ --pf-topology-pipelines__pill-background--m-danger--Stroke: var(--pf-global--danger-color--100);
21
+ --pf-topology-pipelines__pill-background--m-success--Stroke: var(--pf-global--success-color--100);
22
+ --pf-topology-pipelines__pill-background--m-warning--Stroke: var(--pf-global--warning-color--100);
23
+ --pf-topology-pipelines__pill-background--m-in-progress--Stroke: var(--pf-global--info-color--100);
24
+ --pf-topology-pipelines__pill-background--m-pending--Stroke: var(--pf-global--BorderColor--100);
25
+ --pf-topology-pipelines__pill-background--m-running--Stroke: var(--pf-global--BorderColor--100);
26
+ --pf-topology-pipelines__pill-background--m-idle--Stroke: var(--pf-global--BorderColor--100);
27
+
28
+ /* selected pill */
29
+ --pf-topology-pipelines__pill-background--m-selected--Fill: var(--pf-global--active-color--100);
30
+ --pf-topology-pipelines__pill-background--m-selected--Stroke: var(--pf-global--active-color--100);
31
+ --pf-topology-pipelines__pill-background--m-selected__text--Color: var(--pf-global--Color--light-100);
32
+
33
+ /* selected pill with status */
34
+ --pf-topology-pipelines__pill-background--m-selected--m-danger--Fill: var(--pf-global--Color--light-100);
35
+ --pf-topology-pipelines__pill-background--m-selected--m-success--Fill: var(--pf-global--Color--light-100);
36
+ --pf-topology-pipelines__pill-background--m-selected--m-warning--Fill: var(--pf-global--Color--100);
37
+ --pf-topology-pipelines__pill-background--m-selected--m-in-progress--Fill: var(--pf-global--Color--light-100);
38
+ --pf-topology-pipelines__pill-background--m-selected--m-pending--Fill: var(--pf-global--active-color--100);
39
+ --pf-topology-pipelines__pill-background--m-selected--m-running--Fill: var(--pf-global--active-color--100);
40
+ --pf-topology-pipelines__pill-background--m-selected--m-idle--Fill: var(--pf-global--active-color--100);
41
+
42
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill--Color);
43
+
44
+ --pf-topology-pipelines__pill-text--m-selected--Color: var(--pf-global--Color--light-100);
45
+ --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-global--Color--light-100);
46
+ --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-global--Color--light-100);
47
+ --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-global--Color--100);
48
+ --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-global--Color--light-100);
49
+ --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--Color--light-100);
50
+ --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--Color--light-100);
51
+ --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-global--Color--light-100);
52
+
53
+ /* pill status icon */
54
+ --pf-topology-pipelines__pill-status--color: var(--pf-global--BorderColor--100);
55
+ --pf-topology-pipelines__pill-status--m-danger--color: var(--pf-global--danger-color--100);
56
+ --pf-topology-pipelines__pill-status--m-success--color: var(--pf-global--success-color--100);
57
+ --pf-topology-pipelines__pill-status--m-warning--color: var(--pf-global--warning-color--100);
58
+ --pf-topology-pipelines__pill-status--m-in-progress--color: var(--pf-global--info-color--100);
59
+ --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-global--Color--100);
60
+ --pf-topology-pipelines__pill-status--m-running--color: var(--pf-global--Color--100);
61
+ --pf-topology-pipelines__pill-status--m-idle--color: var(--pf-global--Color--100);
62
+
63
+ /* selected pill status icon */
64
+ --pf-topology-pipelines__pill-status--m-selected--color: var(--pf-global--active-color--100);
65
+ --pf-topology-pipelines__pill-status--m-selected--m-danger--color: var(--pf-global--Color--light-100);
66
+ --pf-topology-pipelines__pill-status--m-selected--m-success--color: var(--pf-global--Color--light-100);
67
+ --pf-topology-pipelines__pill-status--m-selected--m-warning--color: var(--pf-global--Color--light-100);
68
+ --pf-topology-pipelines__pill-status--m-selected--m-in-progress--color: var(--pf-global--Color--light-100);
69
+ --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-global--Color--light-100);
70
+ --pf-topology-pipelines__pill-status--m-selected--m-running--color: var(--pf-global--Color--light-100);
71
+ --pf-topology-pipelines__pill-status--m-selected--m-idle--color: var(--pf-global--Color--light-100);
72
+
73
+ /* when expression */
74
+ --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-global--BorderColor--200);
75
+ --pf-topology-pipelines__when-expression-background--Fill: var(--pf-global--BorderColor--200);
76
+ --pf-topology-pipelines__when-expression--connector--Stroke: var(--pf-global--BorderColor--100);
77
+
78
+ /* when expression with status */
79
+ --pf-topology-pipelines__when-expression--m-danger--color: var(--pf-global--danger-color--100);
80
+ --pf-topology-pipelines__when-expression--m-success--color: var(--pf-global--success-color--100);
81
+ --pf-topology-pipelines__when-expression--m-warning--color: var(--pf-global--BorderColor--200);
82
+ --pf-topology-pipelines__when-expression--m-in-progress--color: var(--pf-global--info-color--100);
83
+
84
+ /* selected when expression */
85
+ --pf-topology-pipelines__when-expression--m-selected--color: var(--pf-global--active-color--100);
86
+ }
87
+
88
+
89
+ /* DARK THEME OVERRIDES */
90
+ :root:where(.pf-theme-dark) {
91
+
92
+ /* dark pill */
93
+ --pf-topology-pipelines__pill--Color: var(--pf-global--Color--100);
94
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-global--BackgroundColor--300);
95
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-global--palette--black-300);
96
+
97
+ /* dark node labels */
98
+ --pf-topology-pipelines__pill-text--Color: var(--pf-global--Color--100);
99
+
100
+ /* dark selected nodes */
101
+ --pf-topology-pipelines__pill-text--m-selected--Color: var(--pf-global--Color--100);
102
+ --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-global--palette--black-900);
103
+ --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-global--palette--black-900);
104
+ --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-global--palette--black-900);
105
+ --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-global--palette--black-900);
106
+ --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-global--Color--100);
107
+ --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-global--Color--100);
108
+ --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-global--Color--100);
109
+
110
+ --pf-topology-pipelines__pill__label__icon--Color: var(--pf-global--palette--black-600);
111
+
112
+ --pf-topology-pipelines__pill__action-icon__icon--Color: var(--pf-global--Color--100);
113
+ }
114
+
115
+ .pf-topology-pipelines__pill {
116
+ fill: var(--pf-topology-pipelines__pill--Color);
117
+ }
118
+
119
+ .pf-topology-pipelines__pill-background {
120
+ fill: var(--pf-topology-pipelines__pill-background--Fill);
121
+ stroke-width: var(--pf-topology-pipelines__pill-background--StrokeWidth);
122
+ stroke: var(--pf-topology-pipelines__pill-background--Stroke);
123
+ }
124
+
125
+ .pf-topology-pipelines__pill.pf-m-danger .pf-topology-pipelines__pill-background {
126
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-danger--Fill);
127
+ }
128
+
129
+ .pf-topology-pipelines__pill.pf-m-success .pf-topology-pipelines__pill-background {
130
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-success--Fill);
131
+ }
132
+
133
+ .pf-topology-pipelines__pill.pf-m-warning .pf-topology-pipelines__pill-background {
134
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-warning--Fill);
135
+ }
136
+
137
+ .pf-topology-pipelines__pill.pf-m-in-progress .pf-topology-pipelines__pill-background {
138
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-in-progress--Fill);
139
+ }
140
+
141
+ .pf-topology-pipelines__pill.pf-m-running .pf-topology-pipelines__pill-background {
142
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-global--BorderColor--100);
143
+ }
144
+
145
+ .pf-topology-pipelines__pill.pf-m-idle .pf-topology-pipelines__pill-background {
146
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-global--BorderColor--100);
147
+ }
148
+
149
+ .pf-topology-pipelines__pill.pf-m-pending .pf-topology-pipelines__pill-background {
150
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-global--BorderColor--100);
151
+ }
152
+
153
+ .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__pill-background {
154
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-selected--Fill);
155
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-selected--Stroke);
156
+ }
157
+
158
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-danger .pf-topology-pipelines__pill-background {
159
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-danger--Fill);
160
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-danger--Stroke);
161
+ }
162
+
163
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-success .pf-topology-pipelines__pill-background {
164
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-success--Fill);
165
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-success--Stroke);
166
+ }
167
+
168
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-warning .pf-topology-pipelines__pill-background {
169
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-warning--Fill);
170
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-warning--Stroke);
171
+ }
172
+
173
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-in-progress .pf-topology-pipelines__pill-background {
174
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-in-progress--Fill);
175
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-in-progress--Stroke);
176
+ }
177
+
178
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-pending .pf-topology-pipelines__pill-background {
179
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-selected--m-pending--Fill);
180
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-pending--Stroke);
181
+ }
182
+
183
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-running .pf-topology-pipelines__pill-background {
184
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-selected--m-running--Fill);
185
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-running--Stroke);
186
+ }
187
+
188
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-idle .pf-topology-pipelines__pill-background {
189
+ --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-selected--m-idle--Fill);
190
+ --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-idle--Stroke);
191
+ }
192
+
193
+ .pf-topology-pipelines__pill.pf-m-hover.pf-m-danger .pf-topology-pipelines__pill-background {
194
+ --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-global--BorderWidth--md);
195
+ }
196
+ .pf-topology-pipelines__pill.pf-m-hover.pf-m-success .pf-topology-pipelines__pill-background {
197
+ --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-global--BorderWidth--md);
198
+ }
199
+ .pf-topology-pipelines__pill.pf-m-hover.pf-m-warning .pf-topology-pipelines__pill-background {
200
+ --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-global--BorderWidth--md);
201
+ }
202
+ .pf-topology-pipelines__pill.pf-m-hover.pf-m-in-progress .pf-topology-pipelines__pill-background {
203
+ --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-global--BorderWidth--md);
204
+ }
205
+
206
+ /* Node label */
207
+ .pf-topology-pipelines__pill-text {
208
+ font-size: var(--pf-topology-pipelines__pill-text--FontSize);
209
+ font-family: var(--pf-topology-pipelines__pill-text--FontFamily);
210
+ fill: var(--pf-topology-pipelines__pill-text--Color);
211
+ }
212
+
213
+ .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__pill-text {
214
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--Color);
215
+ }
216
+
217
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-danger .pf-topology-pipelines__pill-text {
218
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-danger--Color);
219
+ }
220
+
221
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-success .pf-topology-pipelines__pill-text {
222
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-success--Color);
223
+ }
224
+
225
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-warning .pf-topology-pipelines__pill-text {
226
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-warning--Color);
227
+ }
228
+
229
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-in-progress .pf-topology-pipelines__pill-text {
230
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color);
231
+ }
232
+
233
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-pending .pf-topology-pipelines__pill-text {
234
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-pending--Color);
235
+ }
236
+
237
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-running .pf-topology-pipelines__pill-text {
238
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-running--Color);
239
+ }
240
+
241
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-idle .pf-topology-pipelines__pill-text {
242
+ --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-idle--Color);
243
+ }
244
+
245
+ .pf-topology-pipelines__pill-status {
246
+ color: var(--pf-topology-pipelines__pill-status--color);
247
+ }
248
+ .pf-topology-pipelines__pill-status.pf-m-selected {
249
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--color);
250
+ }
251
+ .pf-topology-pipelines__pill-status.pf-m-selected {
252
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--color);
253
+ }
254
+ .pf-topology-pipelines__pill-status.pf-m-danger {
255
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-danger--color);
256
+ }
257
+ .pf-topology-pipelines__pill-status.pf-m-success {
258
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-success--color);
259
+ }
260
+ .pf-topology-pipelines__pill-status.pf-m-warning {
261
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-warning--color);
262
+ }
263
+ .pf-topology-pipelines__pill-status.pf-m-in-progress {
264
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-in-progress--color);
265
+ }
266
+ .pf-topology-pipelines__pill-status.pf-m-pending {
267
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-pending--color);
268
+ }
269
+ .pf-topology-pipelines__pill-status.pf-m-running {
270
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-running--color);
271
+ }
272
+ .pf-topology-pipelines__pill-status.pf-m-idle {
273
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-idle--color);
274
+ }
275
+
276
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-danger {
277
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-danger--color);
278
+ }
279
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-success {
280
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-success--color);
281
+ }
282
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-warning {
283
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-warning--color);
284
+ }
285
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-in-progress {
286
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-in-progress--color);
287
+ }
288
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-pending {
289
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-pending--color);
290
+ }
291
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-running {
292
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-running--color);
293
+ }
294
+ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-idle {
295
+ --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-idle--color);
296
+ }
297
+ .pf-topology-pipelines__pill-status.pf-m-spin {
298
+ filter: blur(0);
299
+ -webkit-filter: blur(0);
300
+ transform-box: fill-box;
301
+ transform-origin: center;
302
+ animation: status-spin 2s infinite linear;
303
+ }
304
+ @keyframes status-spin {
305
+ 0% {
306
+ -webkit-transform: rotate(0deg);
307
+ transform: rotate(0deg);
308
+ }
309
+ 100% {
310
+ -webkit-transform: rotate(359deg);
311
+ transform: rotate(359deg);
312
+ }}
313
+
314
+ .pf-topology-pipelines__pill.pf-m-selectable {
315
+ cursor: pointer;
316
+ }
317
+ .pf-topology-pipelines__pill.pf-m-selected .pf-topology__node__action-icon__icon {
318
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--Color);
319
+ }
320
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-danger .pf-topology__node__action-icon__icon {
321
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-danger--Color);
322
+ }
323
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-success .pf-topology__node__action-icon__icon {
324
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-success--Color);
325
+ }
326
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-warning .pf-topology__node__action-icon__icon {
327
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-warning--Color);
328
+ }
329
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-in-progress .pf-topology__node__action-icon__icon {
330
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color);
331
+ }
332
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-pending .pf-topology__node__action-icon__icon {
333
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-pending--Color);
334
+ }
335
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-running .pf-topology__node__action-icon__icon {
336
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-running--Color);
337
+ }
338
+ .pf-topology-pipelines__pill.pf-m-selected.pf-m-idle .pf-topology__node__action-icon__icon {
339
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-idle--Color);
340
+ }
341
+
342
+ .pf-topology-pipelines__when-expression-background {
343
+ stroke: var(--pf-topology-pipelines__when-expression-background--Stroke);
344
+ fill: var(--pf-topology-pipelines__when-expression-background--Fill);
345
+ }
346
+ .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__when-expression-background {
347
+ --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-selected--color);
348
+ }
349
+ .pf-topology-pipelines__when-expression-background.pf-m-success {
350
+ --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-success--color);
351
+ --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-success--color);
352
+ }
353
+ .pf-topology-pipelines__when-expression-background.pf-m-unmet {
354
+ --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-warning--color);
355
+ --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-warning--color);
356
+ }
357
+ .pf-topology-pipelines__when-expression-background.pf-m-in-progress {
358
+ --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-in-progress--color);
359
+ --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-in-progress--color);
360
+ }
361
+
362
+ .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__when-expression-edge {
363
+ stroke: var(--pf-topology-pipelines__when-expression--m-selected--color);
364
+ }
package/css/components/Topology/topology-pipelines.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import './topology-pipelines.css';
2
+ declare const _default: {
3
+ "modifiers": {
4
+ "danger": "pf-m-danger",
5
+ "success": "pf-m-success",
6
+ "warning": "pf-m-warning",
7
+ "inProgress": "pf-m-in-progress",
8
+ "running": "pf-m-running",
9
+ "idle": "pf-m-idle",
10
+ "pending": "pf-m-pending",
11
+ "selected": "pf-m-selected",
12
+ "hover": "pf-m-hover",
13
+ "spin": "pf-m-spin",
14
+ "selectable": "pf-m-selectable",
15
+ "unmet": "pf-m-unmet"
16
+ },
17
+ "themeDark": "pf-theme-dark",
18
+ "topologyNodeActionIconIcon": "pf-topology__node__action-icon__icon",
19
+ "topologyPipelinesPill": "pf-topology-pipelines__pill",
20
+ "topologyPipelinesPillBackground": "pf-topology-pipelines__pill-background",
21
+ "topologyPipelinesPillStatus": "pf-topology-pipelines__pill-status",
22
+ "topologyPipelinesPillText": "pf-topology-pipelines__pill-text",
23
+ "topologyPipelinesWhenExpressionBackground": "pf-topology-pipelines__when-expression-background",
24
+ "topologyPipelinesWhenExpressionEdge": "pf-topology-pipelines__when-expression-edge"
25
+ };
26
+ export default _default;
package/css/components/Topology/topology-pipelines.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./topology-pipelines.css');
4
+ exports.default = {
5
+ "modifiers": {
6
+ "danger": "pf-m-danger",
7
+ "success": "pf-m-success",
8
+ "warning": "pf-m-warning",
9
+ "inProgress": "pf-m-in-progress",
10
+ "running": "pf-m-running",
11
+ "idle": "pf-m-idle",
12
+ "pending": "pf-m-pending",
13
+ "selected": "pf-m-selected",
14
+ "hover": "pf-m-hover",
15
+ "spin": "pf-m-spin",
16
+ "selectable": "pf-m-selectable",
17
+ "unmet": "pf-m-unmet"
18
+ },
19
+ "themeDark": "pf-theme-dark",
20
+ "topologyNodeActionIconIcon": "pf-topology__node__action-icon__icon",
21
+ "topologyPipelinesPill": "pf-topology-pipelines__pill",
22
+ "topologyPipelinesPillBackground": "pf-topology-pipelines__pill-background",
23
+ "topologyPipelinesPillStatus": "pf-topology-pipelines__pill-status",
24
+ "topologyPipelinesPillText": "pf-topology-pipelines__pill-text",
25
+ "topologyPipelinesWhenExpressionBackground": "pf-topology-pipelines__when-expression-background",
26
+ "topologyPipelinesWhenExpressionEdge": "pf-topology-pipelines__when-expression-edge"
27
+ };
package/css/components/Topology/topology-pipelines.mjs ADDED
@@ -0,0 +1,25 @@
1
+ import('./topology-pipelines.css');
2
+ export default {
3
+ "modifiers": {
4
+ "danger": "pf-m-danger",
5
+ "success": "pf-m-success",
6
+ "warning": "pf-m-warning",
7
+ "inProgress": "pf-m-in-progress",
8
+ "running": "pf-m-running",
9
+ "idle": "pf-m-idle",
10
+ "pending": "pf-m-pending",
11
+ "selected": "pf-m-selected",
12
+ "hover": "pf-m-hover",
13
+ "spin": "pf-m-spin",
14
+ "selectable": "pf-m-selectable",
15
+ "unmet": "pf-m-unmet"
16
+ },
17
+ "themeDark": "pf-theme-dark",
18
+ "topologyNodeActionIconIcon": "pf-topology__node__action-icon__icon",
19
+ "topologyPipelinesPill": "pf-topology-pipelines__pill",
20
+ "topologyPipelinesPillBackground": "pf-topology-pipelines__pill-background",
21
+ "topologyPipelinesPillStatus": "pf-topology-pipelines__pill-status",
22
+ "topologyPipelinesPillText": "pf-topology-pipelines__pill-text",
23
+ "topologyPipelinesWhenExpressionBackground": "pf-topology-pipelines__when-expression-background",
24
+ "topologyPipelinesWhenExpressionEdge": "pf-topology-pipelines__when-expression-edge"
25
+ };
package/css/utilities/BackgroundColor/BackgroundColor.css CHANGED
@@ -311,4 +311,104 @@
311
311
  .pf-u-background-color-danger-on-2xl {
312
312
  background-color: var(--pf-global--palette--red-50) !important;
313
313
  }
314
+ }
315
+ :where(.pf-theme-dark) .pf-u-background-color-default {
316
+ background-color: var(--pf-global--BackgroundColor--100) !important;
317
+ }
318
+ :where(.pf-theme-dark) .pf-u-background-color-success {
319
+ background-color: var(--pf-global--BackgroundColor--100) !important;
320
+ }
321
+ :where(.pf-theme-dark) .pf-u-background-color-info {
322
+ background-color: var(--pf-global--BackgroundColor--100) !important;
323
+ }
324
+ :where(.pf-theme-dark) .pf-u-background-color-warning {
325
+ background-color: var(--pf-global--BackgroundColor--100) !important;
326
+ }
327
+ :where(.pf-theme-dark) .pf-u-background-color-danger {
328
+ background-color: var(--pf-global--BackgroundColor--100) !important;
329
+ }
330
+ @media screen and (min-width: 576px) {
331
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-sm {
332
+ background-color: var(--pf-global--BackgroundColor--100) !important;
333
+ }
334
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-sm {
335
+ background-color: var(--pf-global--BackgroundColor--100) !important;
336
+ }
337
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-sm {
338
+ background-color: var(--pf-global--BackgroundColor--100) !important;
339
+ }
340
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-sm {
341
+ background-color: var(--pf-global--BackgroundColor--100) !important;
342
+ }
343
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-sm {
344
+ background-color: var(--pf-global--BackgroundColor--100) !important;
345
+ }
346
+ }
347
+ @media screen and (min-width: 768px) {
348
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-md {
349
+ background-color: var(--pf-global--BackgroundColor--100) !important;
350
+ }
351
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-md {
352
+ background-color: var(--pf-global--BackgroundColor--100) !important;
353
+ }
354
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-md {
355
+ background-color: var(--pf-global--BackgroundColor--100) !important;
356
+ }
357
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-md {
358
+ background-color: var(--pf-global--BackgroundColor--100) !important;
359
+ }
360
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-md {
361
+ background-color: var(--pf-global--BackgroundColor--100) !important;
362
+ }
363
+ }
364
+ @media screen and (min-width: 992px) {
365
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-lg {
366
+ background-color: var(--pf-global--BackgroundColor--100) !important;
367
+ }
368
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-lg {
369
+ background-color: var(--pf-global--BackgroundColor--100) !important;
370
+ }
371
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-lg {
372
+ background-color: var(--pf-global--BackgroundColor--100) !important;
373
+ }
374
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-lg {
375
+ background-color: var(--pf-global--BackgroundColor--100) !important;
376
+ }
377
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-lg {
378
+ background-color: var(--pf-global--BackgroundColor--100) !important;
379
+ }
380
+ }
381
+ @media screen and (min-width: 1200px) {
382
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-xl {
383
+ background-color: var(--pf-global--BackgroundColor--100) !important;
384
+ }
385
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-xl {
386
+ background-color: var(--pf-global--BackgroundColor--100) !important;
387
+ }
388
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-xl {
389
+ background-color: var(--pf-global--BackgroundColor--100) !important;
390
+ }
391
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-xl {
392
+ background-color: var(--pf-global--BackgroundColor--100) !important;
393
+ }
394
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-xl {
395
+ background-color: var(--pf-global--BackgroundColor--100) !important;
396
+ }
397
+ }
398
+ @media screen and (min-width: 1450px) {
399
+ :where(.pf-theme-dark) .pf-u-background-color-default-on-2xl {
400
+ background-color: var(--pf-global--BackgroundColor--100) !important;
401
+ }
402
+ :where(.pf-theme-dark) .pf-u-background-color-success-on-2xl {
403
+ background-color: var(--pf-global--BackgroundColor--100) !important;
404
+ }
405
+ :where(.pf-theme-dark) .pf-u-background-color-info-on-2xl {
406
+ background-color: var(--pf-global--BackgroundColor--100) !important;
407
+ }
408
+ :where(.pf-theme-dark) .pf-u-background-color-warning-on-2xl {
409
+ background-color: var(--pf-global--BackgroundColor--100) !important;
410
+ }
411
+ :where(.pf-theme-dark) .pf-u-background-color-danger-on-2xl {
412
+ background-color: var(--pf-global--BackgroundColor--100) !important;
413
+ }
314
414
  }