@patternfly/react-styles 4.58.0 → 4.58.1

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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/css/components/Topology/topology-components.css +410 -117
  3. package/css/components/Topology/topology-components.d.ts +4 -2
  4. package/css/components/Topology/topology-components.js +4 -2
  5. package/css/components/Topology/topology-components.mjs +4 -2
  6. package/package.json +2 -2
  7. package/src/css/components/Topology/topology-components.css +410 -117
package/src/css/components/Topology/topology-components.css CHANGED
@@ -1,13 +1,250 @@
1
1
  :root {
2
+ --pf-topology-visualization-surface--BackgroundColor: transparent;
3
+
4
+ --pf-topology__node--Color: #393f44;
5
+
6
+ /* Create connector */
7
+ /* Remove --pf-topology-create-connector-color at a breaking change */
2
8
  --pf-topology-create-connector-color: var(--pf-global--secondary-color--100);
9
+ --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, --pf-global--secondary-color--100);
10
+ --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, --pf-global--secondary-color--100);
11
+
12
+ /* node */
13
+ --pf-topology__node__background--Fill: var(--pf-global--BackgroundColor--100);
14
+ --pf-topology__node__background--Stroke: var(--pf-global--BorderColor--100);
15
+ --pf-topology__node__background--StrokeWidth: 1px;
16
+ --pf-topology__node--m-dragging--background--StrokeWidth: 1px;
17
+
18
+ --pf-topology__node--m-hover--background--Stroke: unset;
19
+ --pf-topology__node--m-hover--label__background--Stroke: unset;
20
+
21
+ --pf-topology__node--m-disabled--Background--Fill: var(--pf-global--BackgroundColor--200);
22
+ --pf-topology__node--m-disabled--Background--Stroke: var(--pf-global--BorderColor--100);
23
+ --pf-topology__node--m-info--Background--Fill: var(--pf-global--primary-color--light-100);
24
+ --pf-topology__node--m-success--Background--Fill: var(--pf-global--success-color--100);
25
+ --pf-topology__node--m-warning--Background--Fill: var(--pf-global--warning-color--100);
26
+ --pf-topology__node--m-danger--Background--Fill: var(--pf-global--danger-color--100);
27
+ --pf-topology__node--m-selected--Background--Fill: var(--pf-global--active-color--100);
28
+
29
+ --pf-topology__node--m-selected--node__background--Stroke: var(--pf-global--active-color--100);
30
+ --pf-topology__node--m-info--node__background--Stroke: var(--pf-global--primary-color--light-100);
31
+ --pf-topology__node--m-success--node__background--Stroke: var(--pf-global--success-color--100);
32
+ --pf-topology__node--m-warning--node__background--Stroke: var(--pf-global--warning-color--100);
33
+ --pf-topology__node--m-danger--node__background--Stroke: var(--pf-global--danger-color--100);
34
+
35
+ /* node decorators */
36
+ --pf-topology__node_decorator--Color: var(--pf-global--Color--200);
37
+ --pf-topology__node__decorator__bg--Fill: var(--pf-global--BackgroundColor--light-100);
38
+ --pf-topology__node__decorator__bg--Stroke: var(--pf-global--BorderColor--100);
39
+
40
+ --pf-topology__node__decorator__status--m-info--Color: var(--pf-global--primary-color--light-100);
41
+ --pf-topology__node__decorator__status--m-danger--Color: var(--pf-global--danger-color--100);
42
+ --pf-topology__node__decorator__status--m-warning--Color: var(--pf-global--warning-color--100);
43
+ --pf-topology__node__decorator__status--m-success--Color: var(--pf-global--success-color--100);
44
+
45
+ /* node labels */
46
+ --pf-topology__node__label__text--Fill: var(--pf-global--palette--black-1000);
47
+ --pf-topology__node__label__text--m-secondary--Fill: var(--pf-global--Color--200);
48
+
49
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-global--Color--light-100);
50
+ --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-global--Color--light-100);
51
+ --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-global--Color--light-100);
52
+ --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-global--Color--light-100);
53
+ --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-global--Color--light-100);
54
+ --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-global--Color--light-100);
55
+
56
+ --pf-topology__node__label__background--Fill: var(--pf-global--BackgroundColor--100);
57
+ --pf-topology__node__label__background--Stroke: var(--pf-global--BorderColor--100);
58
+
59
+ --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-global--active-color--100);
60
+ --pf-topology__node--m-info--node__label__background--Stroke: var(--pf-global--primary-color--light-100);
61
+ --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-global--success-color--100);
62
+ --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-global--warning-color--100);
63
+ --pf-topology__node--m-danger--node__label__background--Stroke: var(--pf-global--danger-color--100);
64
+ --pf-topology__node__label__background--StrokeWidth: 1px;
65
+ --pf-topology__node__label--m-dragging--background--StrokeWidth: 1px;
66
+
67
+ --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-global--active-color--100);
68
+ --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-global--primary-color--light-100);
69
+ --pf-topology__node--m-selected--m-danger--node__label__background--Fill: var(--pf-global--danger-color--100);
70
+ --pf-topology__node--m-selected--m-warning--node__label__background--Fill: var(--pf-global--warning-color--100);
71
+ --pf-topology__node--m-selected--m-success--node__label__background--Fill: var(--pf-global--success-color--100);
72
+
73
+ /* node label icon */
74
+ --pf-topology__node__label__icon--Color: var(--pf-global--Color--200);
75
+
76
+ --pf-topology__node__label__icon__background--Fill: var(--pf-global--palette--white);
77
+ --pf-topology__node__label__icon__background--Stroke: var(--pf-global--palette--black-300);
78
+
79
+ --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-global--active-color--100);
80
+ --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-global--primary-color--light-100);
81
+ --pf-topology__node--m-success--label__icon__background--Stroke: var(--pf-global--success-color--100);
82
+ --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-global--warning-color--100);
83
+ --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-global--danger-color--100);
84
+
85
+
86
+ --pf-topology__node__separator--Stroke: var(--pf-global--palette--black-300);
87
+ --pf-topology__node--m-selected--separator--Stroke: var(--pf-global--palette--black-300);
88
+
89
+ --pf-topology__node__action-icon__icon--Color: var(--pf-global--palette--black-1000);
90
+ --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-global--Color--light-100);
91
+
92
+ /* group */
93
+ --pf-topology__group--m-selected--topology__node__action-icon__icon--Color: var(--pf-global--palette--white);
94
+
95
+ --pf-topology__group__background--Fill: var(--pf-global--BackgroundColor--light-300);
96
+ --pf-topology__group__background--Stroke: var(--pf-global--palette--white);
97
+
98
+ --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-global--palette--white);
99
+ --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--palette--blue-50);
100
+
101
+ --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-global--active-color--100);
102
+ --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--BackgroundColor--dark-400);
103
+ --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-global--palette--blue-50);
104
+ --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-global--active-color--100);
105
+ --pf-topology__group__collapsed-badge__node__label__badge__rect--Fill: var(--pf-global--palette--white);
106
+ --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-global--palette--black-300);
107
+ --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-global--palette--black-800);
108
+
109
+ --pf-topology__group__label__node__label__background--Fill: var(--pf-global--BackgroundColor--dark-300);
110
+ --pf-topology__group__label__node__label__background--StrokeWidth: 1px;
111
+ --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
112
+ --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-global--palette--white);
113
+ --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--active-color--100);
114
+
115
+ /* edge */
116
+ --pf-topology__edge--Stroke: var(--pf-global--secondary-color--100);
117
+ --pf-topology__edge--StrokeWidth: 1px;
118
+ --pf-topology__edge--HoverStroke: var(--pf-global--Color--100);
119
+ --pf-topology__edge--ActiveStroke: var(--pf-global--active-color--100);
120
+ --pf-topology__edge--ActiveStrokeWidth: 2px;
121
+ --pf-topology__edge--InteractiveStroke: var(--pf-global--active-color--100);
122
+
123
+ --pf-topology__edge--m-info--EdgeStroke: var(--pf-global--primary-color--light-100);
124
+ --pf-topology__edge--m-success--EdgeStroke: var(--pf-global--success-color--100);
125
+ --pf-topology__edge--m-warning--EdgeStroke: var(--pf-global--warning-color--100);
126
+ --pf-topology__edge--m-danger--EdgeStroke: var(--pf-global--danger-color--100);
127
+
128
+ --pf-topology__edge--m-selected--background--Stroke: var(--pf-global--active-color--200);
129
+ --pf-topology__edge--m-hover--background--Stroke: var(--pf-global--BorderColor--100);
130
+
131
+ --pf-topology__edge__tag__text--Fill: var(--pf-global--palette--white);
132
+ --pf-topology__edge__tag__text--Stroke: var(--pf-global--palette--white);
133
+
134
+ --pf-topology__edge__tag__background--Fill: var(--pf-global--secondary-color--100);
135
+ --pf-topology__edge__tag--m-info--background--Fill: var(--pf-global--primary-color--light-100);
136
+ --pf-topology__edge__tag--m-success--background--Fill: var(--pf-global--success-color--100);
137
+ --pf-topology__edge__tag--m-warning--background--Fill: var(--pf-global--warning-color--100);
138
+
139
+ --pf-topology__edge__tag--m-warning--text--Fill: var(--pf-global--palette--black-1000);
140
+ --pf-topology__edge__tag--m-warning--text--Stroke: var(--pf-global--palette--black-1000);
141
+
142
+ --pf-topology__edge__tag--m-danger--background--Fill: var(--pf-global--danger-color--100);
143
+
144
+ /* connectors */
145
+ --pf-topology-connector-arrow--m-alt-connector-arrow--Fill: var(--pf-global--palette--white);
146
+
147
+ --pf-topology__connector-square--m-source--Fill: var(--pf-global--BackgroundColor--100);
148
+
149
+ --pf-topology-default-create-connector__arrow--Fill: var(--pf-global--Color--light-200);
150
+
151
+ --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-global--Color--100);
152
+ --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-global--Color--100);
153
+ --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-global--Color--100);
154
+ }
155
+
156
+ /* DARK THEME OVERRIDES */
157
+ :root:where(.pf-theme-dark) {
158
+ --pf-topology-visualization-surface--BackgroundColor: var(--pf-global--BackgroundColor--200);
159
+
160
+ --pf-topology__node--Color: var(--pf-global--Color--100);
161
+
162
+ /* dark create connector */
163
+ --pf-topology__create-connector-color--Stroke: var(--pf-global--palette--black-300);
164
+ --pf-topology__create-connector-color--Fill: var(--pf-global--palette--black-100);
165
+ --pf-topology-default-create-connector__arrow--Fill: var(--pf-global--BackgroundColor--100);
166
+ --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-global--palette--black-100);
167
+ --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-global--palette--black-100);
168
+ --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-global--palette--black-100);
169
+
170
+ /* dark node */
171
+ --pf-topology__node__background--Fill: var(--pf-global--BackgroundColor--300);
172
+ --pf-topology__node__background--Stroke: var(--pf-global--palette--black-300);
173
+
174
+ --pf-topology__node--m-disabled--Background--Fill: var(--pf-topology__node__background--Fill);
175
+ --pf-topology__node--m-disabled--Background--Stroke: var(--pf-global--palette--black-500);
176
+
177
+ --pf-topology__node--m-dragging--background--StrokeWidth: 2px;
178
+
179
+ --pf-topology__node--m-hover--background--Stroke: var(--pf-global--palette--black-100);
180
+ --pf-topology__node--m-hover--label__background--Stroke: var(--pf-global--palette--black-100);
181
+
182
+ /* dark node labels */
183
+ --pf-topology__node__label__background--Fill: var(--pf-global--BackgroundColor--300);
184
+ --pf-topology__node__label__background--Stroke: var(--pf-global--BorderColor--300);
185
+ --pf-topology__node__label--m-dragging--background--StrokeWidth: 2px;
186
+ --pf-topology__node__label__text--Fill: var(--pf-global--Color--100);
187
+
188
+ /* dark selected nodes */
189
+ --pf-topology__node--m-selected--node__background--Stroke: var(--pf-global--palette--blue-300);
190
+ --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-global--palette--blue-400);
191
+ --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-global--palette--blue-400);
192
+ --pf-topology__node--m-selected--separator--Stroke: var(--pf-global--palette--blue-300);
193
+
194
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-global--Color--100);
195
+ --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-global--palette--black-900);
196
+ --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-global--palette--black-900);
197
+ --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-global--palette--black-900);
198
+ --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-global--palette--black-900);
199
+
200
+ --pf-topology__node__label__icon--Color: var(--pf-global--palette--black-600);
201
+
202
+ --pf-topology__node__action-icon__icon--Color: var(--pf-global--Color--100);
203
+
204
+ /* dark group */
205
+ --pf-topology__group__background--Fill: var(--pf-global--BackgroundColor--300);
206
+ --pf-topology__group__background--Stroke: var(--pf-global--palette--black-300);
207
+ --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-global--palette--black-500);
208
+ --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-global--BorderColor--100);
209
+ --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--palette--black-700);
210
+ --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-global--active-color--300);
211
+ --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-800);
212
+ --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-100);
213
+ --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-global--palette--blue-300);
214
+
215
+ --pf-topology__group__label__node__label__background--StrokeWidth: 2px;
216
+ --pf-topology__group__label__node__label__background--Stroke: var(--pf-global--palette--black-300);
217
+ --pf-topology__group--m-hover--label__node__label__background--Stroke: var(--pf-global--palette--black-100);
218
+ --pf-topology__group--m-selected--label__node__label__background--Stroke: var(--pf-global--primary-color--300);
219
+
220
+ --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--primary-color--300);
221
+
222
+ /* dark edge */
223
+ --pf-topology__edge--HoverStroke: var(--pf-global--palette--black-300);
224
+ --pf-topology__edge--m-hover--background--Stroke: var(--pf-global--palette--black-600);
225
+
226
+ --pf-topology__edge--ActiveStroke: var(--pf-global--palette--blue-300);
227
+ --pf-topology__edge--m-selected--background--Stroke: var(--pf-global--palette--black-600);
228
+
229
+ --pf-topology__edge__tag__background--Fill: var(--pf-global--palette--black-300);
230
+ --pf-topology__edge__tag__text--Fill: var(--pf-global--palette--black-900);
231
+ --pf-topology__edge__tag__text--Stroke: var(--pf-global--palette--black-900);
232
+
233
+ }
234
+
235
+ :root:where(.pf-theme-dark) .pfext-catalog-item-icon__img--large {
236
+ /* Not perfect, but gives a better result for colors than just inverting
237
+ by inverts to switch b/w, then rotates to get colors approximately back */
238
+ filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
3
239
  }
4
240
 
5
241
  .pf-topology-visualization-surface {
242
+ background-color: var(--pf-topology-visualization-surface--BackgroundColor);
6
243
  height: 100%;
7
244
  flex-grow: 1;
8
245
  flex-shrink: 1;
9
246
  overflow: hidden;
10
- position: relative;
247
+ position: relative;
11
248
  }
12
249
 
13
250
  .pf-topology-visualization-surface__svg {
@@ -36,38 +273,57 @@
36
273
  transform: translateY(-50%);
37
274
  }
38
275
 
276
+ /* Node */
39
277
  .pf-topology__node {
40
278
  outline: none;
279
+ color: var(--pf-topology__node--Color);
280
+ }
281
+
282
+ /* Color is defined in the svg but fill will override it */
283
+ .pf-topology__node svg,
284
+ .pf-topology__group svg {
285
+ fill: var(--pf-topology__node--Color);
286
+ }
287
+
288
+ .pf-topology__node.pf-m-hover {
289
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-hover--background--Stroke);
290
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-hover--label__background--Stroke);
41
291
  }
42
292
 
43
293
  .pf-topology__node__background {
44
- fill: var(--pf-global--palette--white);
45
- stroke-width: 1px;
46
- stroke: var(--pf-global--palette--black-300);
294
+ fill: var(--pf-topology__node__background--Fill);
295
+ stroke-width: var(--pf-topology__node__background--StrokeWidth);
296
+ stroke: var(--pf-topology__node__background--Stroke);
47
297
  }
48
298
 
49
299
  .pf-topology__node__background.pf-m-disabled {
50
- fill: var(--pf-global--BackgroundColor--200);
300
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-disabled--Background--Fill);
301
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-disabled--Background--Stroke);
51
302
  }
52
303
 
53
304
  .pf-topology__node__background.pf-m-info {
54
- fill: var(--pf-global--primary-color--light-100);
305
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-info--Background--Fill);
55
306
  }
56
307
 
57
308
  .pf-topology__node__background.pf-m-success {
58
- fill: var(--pf-global--success-color--100);
309
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-success--Background--Fill);
59
310
  }
60
311
 
61
312
  .pf-topology__node__background.pf-m-warning {
62
- fill: var(--pf-global--warning-color--100);
313
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-warning--Background--Fill);
63
314
  }
64
315
 
65
316
  .pf-topology__node__background.pf-m-danger {
66
- fill: var(--pf-global--danger-color--100);
317
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-danger--Background--Fill);
67
318
  }
68
319
 
69
320
  .pf-topology__node__background.pf-m-selected {
70
- fill: var(--pf-global--active-color--100);
321
+ --pf-topology__node__background--Fill: var(--pf-topology__node--m-selected--Background--Fill);
322
+ }
323
+
324
+ .pf-topology__node.pf-m-dragging {
325
+ --pf-topology__node__background--StrokeWidth: var(--pf-topology__node--m-dragging--background--StrokeWidth);
326
+ --pf-topology__node__label__background--StrokeWidth: var(--pf-topology__node__label--m-dragging--background--StrokeWidth);
71
327
  }
72
328
 
73
329
  .pf-topology__node.pf-m-dragging .pf-topology__node__background {
@@ -76,120 +332,134 @@
76
332
 
77
333
  .pf-topology__node.pf-m-selected .pf-topology__node__background {
78
334
  stroke-width: 2px;
79
- stroke: var(--pf-global--active-color--100);
335
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--node__background--Stroke);
80
336
  }
81
337
 
82
338
  .pf-topology__node.pf-m-info .pf-topology__node__background {
83
- stroke: var(--pf-global--primary-color--light-100);
339
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--node__background--Stroke);
84
340
  }
85
341
 
86
342
  .pf-topology__node.pf-m-success .pf-topology__node__background {
87
- stroke: var(--pf-global--success-color--100);
343
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-success--node__background--Stroke);
88
344
  }
89
345
 
90
346
  .pf-topology__node.pf-m-warning .pf-topology__node__background {
91
- stroke: var(--pf-global--warning-color--100);
347
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-warning--node__background--Stroke);
92
348
  }
93
349
 
94
350
  .pf-topology__node.pf-m-danger .pf-topology__node__background {
95
- stroke: var(--pf-global--danger-color--100);
96
- }
97
-
98
- .pf-topology__node.pf-m-drop-target .pf-topology__node__background {
351
+ --pf-topology__node__background--Stroke: var(--pf-topology__node--m-danger--node__background--Stroke);
99
352
  }
100
353
 
354
+ /* Node decorator */
101
355
  .pf-topology__node__decorator {
102
- color: var(--pf-global--Color--200);
356
+ --pf-topology__node--Color: var(--pf-topology__node_decorator--Color);
103
357
  transition: color 0.2s ease;
104
358
  outline: none;
105
359
  }
106
360
 
361
+ .pf-topology__node__decorator svg {
362
+ fill: var(--pf-topology__node_decorator--Color);
363
+ }
364
+
107
365
  .pf-topology__node__decorator__bg {
108
- fill: var(--pf-global--BackgroundColor--light-100);
109
- stroke: var(--pf-global--palette--black-300);
366
+ fill: var(--pf-topology__node__decorator__bg--Fill);
367
+ stroke: var(--pf-topology__node__decorator__bg--Stroke);
110
368
  stroke-width: 1px;
111
369
  }
112
370
 
113
371
  .pf-topology__node__decorator__icon {
114
372
  font-size: var(--pf-global--icon--FontSize--sm);
373
+ color: var(--pf-topology__node_decorator--Color);
374
+ }
375
+
376
+ .pf-topology__node__decorator__status {
377
+ color: var(--pf-topology__node_decorator--Color);
115
378
  }
116
379
 
117
380
  .pf-topology__node__decorator__status .pf-m-info {
118
- color: var(--pf-global--primary-color--light-100);
381
+ --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-info--Color);
119
382
  }
120
383
  .pf-topology__node__decorator__status .pf-m-danger {
121
- color: var(--pf-global--danger-color--100);
384
+ --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-danger--Color);
122
385
  }
123
386
  .pf-topology__node__decorator__status .pf-m-warning {
124
- color: var(--pf-global--warning-color--100);
387
+ --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-warning--Color);
125
388
  }
126
389
  .pf-topology__node__decorator__status .pf-m-success {
127
- color: var(--pf-global--success-color--100);
390
+ --pf-topology__node_decorator--Color: var(--pf-topology__node__decorator__status--m-success--Color);
128
391
  }
129
392
 
393
+ /* Node label */
130
394
  .pf-topology__node__label > text {
131
- fill: var(--pf-global--palette--black-1000);
395
+ fill: var(--pf-topology__node__label__text--Fill);
132
396
  font-size: var(--pf-global--FontSize--sm);
133
397
  pointer-events: none;
134
398
  }
135
399
 
136
400
  .pf-topology__node__label > text.pf-m-secondary {
137
- fill: var(--pf-global--secondary-color--100);
401
+ fill: var(--pf-topology__node__label__text--m-secondary--Fill);
138
402
  font-size: var(--pf-global--FontSize--xs);
139
403
  }
140
404
 
141
405
  .pf-topology__node.pf-m-selected .pf-topology__node__label > text {
142
- fill: var(--pf-global--palette--white);
406
+ --pf-topology__node__label__text--Fill: var(--pf-topology__node--m-selected--node__label__text--Fill);
407
+ --pf-topology__node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill);
143
408
  }
144
409
 
145
410
  .pf-topology__node__label__background {
146
- fill: var(--pf-global--palette--white);
147
- stroke-width: 1px;
148
- stroke: var(--pf-global--palette--black-300);
411
+ fill: var(--pf-topology__node__label__background--Fill);
412
+ stroke-width: var(--pf-topology__node__label__background--StrokeWidth);
413
+ stroke: var(--pf-topology__node__label__background--Stroke);
149
414
  }
150
415
 
151
- .pf-topology__node.pf-m-selected .pf-topology__node__label__background {
416
+ .pf-topology__node.pf-m-selected {
152
417
  stroke-width: 2px;
153
- stroke: var(--pf-global--active-color--100);
418
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-selected--node__label__background--Stroke);
419
+ --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--node__label__background--Fill);
420
+ --pf-topology__node__separator--Stroke: var(--pf-topology__node--m-selected--separator--Stroke);
421
+ --pf-topology__node__action-icon__icon--Color: var(--pf-topology__node--m-selected--action-icon__icon--Color);
154
422
  }
155
423
 
156
- .pf-topology__node.pf-m-info .pf-topology__node__label__background {
157
- stroke: var(--pf-global--primary-color--light-100);
424
+ .pf-topology__node.pf-m-info {
425
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-info--node__label__background--Stroke);
158
426
  }
159
427
 
160
- .pf-topology__node.pf-m-success .pf-topology__node__label__background {
161
- stroke: var(--pf-global--success-color--100);
428
+ .pf-topology__node.pf-m-success {
429
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-success--node__label__background--Stroke);
162
430
  }
163
431
 
164
- .pf-topology__node.pf-m-warning .pf-topology__node__label__background {
165
- stroke: var(--pf-global--warning-color--100);
432
+ .pf-topology__node.pf-m-warning {
433
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-warning--node__label__background--Stroke);
166
434
  }
167
435
 
168
- .pf-topology__node.pf-m-danger .pf-topology__node__label__background {
169
- stroke: var(--pf-global--danger-color--100);
436
+ .pf-topology__node.pf-m-danger {
437
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-danger--node__label__background--Stroke);
170
438
  }
171
439
 
172
- .pf-topology__node.pf-m-selected .pf-topology__node__label__background {
173
- fill: var(--pf-global--active-color--100);
440
+ .pf-topology__node.pf-m-selected.pf-m-info {
441
+ --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-info--node__label__background--Fill);
442
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-info--node__label__text--Fill);
174
443
  }
175
444
 
176
- .pf-topology__node.pf-m-selected.pf-m-info .pf-topology__node__label__background {
177
- fill: var(--pf-global--primary-color--light-100);
445
+ .pf-topology__node.pf-m-selected.pf-m-danger {
446
+ --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-danger--node__label__background--Fill);
447
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-danger--node__label__text--Fill);
178
448
  }
179
449
 
180
- .pf-topology__node.pf-m-selected.pf-m-danger .pf-topology__node__label__background {
181
- fill: var(--pf-global--danger-color--100);
450
+ .pf-topology__node.pf-m-selected.pf-m-warning {
451
+ --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__background--Fill);
452
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__text--Fill);
182
453
  }
183
454
 
184
- .pf-topology__node.pf-m-selected.pf-m-warning .pf-topology__node__label__background {
185
- fill: var(--pf-global--warning-color--100);
186
- }
187
-
188
- .pf-topology__node.pf-m-selected.pf-m-success .pf-topology__node__label__background {
189
- fill: var(--pf-global--success-color--100);
455
+ .pf-topology__node.pf-m-selected.pf-m-success {
456
+ --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-success--node__label__background--Fill);
457
+ --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-success--node__label__text--Fill);
190
458
  }
191
459
 
460
+ /* Node label badge */
192
461
  .pf-topology__node__label__badge > rect {
462
+ /* TODO Color is hard coded in the badge. */
193
463
  stroke-width: 1px;
194
464
  }
195
465
 
@@ -198,40 +468,45 @@
198
468
  pointer-events: none;
199
469
  }
200
470
 
471
+ .pf-topology__node__label__icon {
472
+ color: var(--pf-topology__node__label__icon--Color);
473
+ }
474
+
201
475
  .pf-topology__node__label__icon > svg {
202
476
  height: 100%;
203
477
  width: 100%;
478
+ fill: currentColor;
204
479
  }
205
480
 
206
481
  .pf-topology__node__label__icon__background {
207
- fill: var(--pf-global--palette--white);
482
+ fill: var(--pf-topology__node__label__icon__background--Fill);
208
483
  stroke-width: 1px;
209
- stroke: var(--pf-global--palette--black-300);
484
+ stroke: var(--pf-topology__node__label__icon__background--Stroke);
210
485
  }
211
486
 
212
487
  .pf-topology__node.pf-m-selected .pf-topology__node__label__icon__background {
213
488
  stroke-width: 2px;
214
- stroke: var(--pf-global--active-color--100);
489
+ stroke: var(--pf-topology__node--m-selected--label__icon__background--Stroke);
215
490
  }
216
491
 
217
492
  .pf-topology__node.pf-m-info .pf-topology__node__label__icon__background {
218
- stroke: var(--pf-global--primary-color--light-100);
493
+ stroke: var(--pf-topology__node--m-info--label__icon__background--Stroke);
219
494
  }
220
495
 
221
496
  .pf-topology__node.pf-m-success .pf-topology__node__label__icon__background {
222
- stroke: var(--pf-global--success-color--100);
497
+ stroke: var(--pf-topology__node--m-success--label__icon__background--Stroke);
223
498
  }
224
499
 
225
500
  .pf-topology__node.pf-m-warning .pf-topology__node__label__icon__background {
226
- stroke: var(--pf-global--warning-color--100);
501
+ stroke: var(--pf-topology__node--m-warning--label__icon__background--Stroke);
227
502
  }
228
503
 
229
504
  .pf-topology__node.pf-m-danger .pf-topology__node__label__icon__background {
230
- stroke: var(--pf-global--danger-color--100);
505
+ stroke: var(--pf-topology__node--m-danger--label__icon__background--Stroke);
231
506
  }
232
507
 
233
508
  .pf-topology__node__separator {
234
- stroke: var(--pf-global--palette--black-300);
509
+ stroke: var(--pf-topology__node__separator--Stroke);
235
510
  stroke-width: 1;
236
511
  }
237
512
 
@@ -245,83 +520,98 @@
245
520
  }
246
521
 
247
522
  .pf-topology__node__action-icon__icon {
248
- color: var(--pf-global--palette--black-1000);
523
+ color: var(--pf-topology__node__action-icon__icon--Color);
524
+ }
525
+
526
+ .pf-topology__node__action-icon__icon svg {
527
+ fill: currentColor;
249
528
  }
250
529
 
251
530
  .pf-topology__group.pf-m-selected .pf-topology__node__action-icon__icon {
252
- color: var(--pf-global--palette--white);
531
+ color: var(--pf-topology__group--m-selected--topology__node__action-icon__icon--Color);
253
532
  }
254
533
 
255
534
  .pf-topology__group {
256
535
  outline: none;
257
536
  }
258
537
 
538
+ /* Group background */
259
539
  .pf-topology__group__background {
260
- fill: var(--pf-global--BackgroundColor--light-300);
261
- stroke: var(--pf-global--palette--white);
540
+ fill: var(--pf-topology__group__background--Fill);
541
+ stroke: var(--pf-topology__group__background--Stroke);
262
542
  stroke-width: 5px;
263
543
  }
264
544
 
265
545
  .pf-topology__group.pf-m-alt-group .pf-topology__group__background {
266
- fill: var(--pf-global--palette--white);
546
+ --pf-topology__group__background--Fill: var(--pf-topology__group--m-alt-group--topology__group__background--Fill);
547
+ --pf-topology__group__background--Stroke: var(--pf-topology__group--m-alt-group--topology__group__background--Stroke);
267
548
  }
268
549
 
269
550
  .pf-topology__group.pf-m-selected .pf-topology__group__background {
270
- fill: var(--pf-global--palette--blue-50);
271
- stroke: var(--pf-global--active-color--100);
551
+ --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
552
+ --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--topology__group__background--Stroke);
272
553
  }
273
554
 
274
555
  .pf-topology__group.pf-m-hover .pf-topology__group__background {
275
- stroke: var(--pf-global--BackgroundColor--dark-400);
556
+ --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
557
+ --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
276
558
  }
277
559
 
278
560
  .pf-topology__group.pf-m-drop-target .pf-topology__group__background {
279
- fill: var(--pf-global--palette--blue-50);
280
- stroke: var(--pf-global--active-color--100);
561
+ --pf-topology__group__background--Stroke: var(--pf-topology__group--m-drop-target--topology__group__background--Stroke);
281
562
  stroke-dasharray: 12;
282
563
  }
283
564
 
565
+ /* Collapsed group badge */
284
566
  .pf-topology__group__collapsed-badge.pf-topology__node__label__badge > rect {
285
- fill: var(--pf-global--palette--white);
286
- stroke: var(--pf-global--palette--black-300);
567
+ fill: var(--pf-topology__group__collapsed-badge__node__label__badge__rect--Fill);
568
+ stroke: var(--pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke);
287
569
  }
288
570
 
289
571
  .pf-topology__group__collapsed-badge.pf-topology__node__label__badge > text {
290
572
  font-size: var(--pf-global--FontSize--xs);
291
573
  pointer-events: none;
292
- fill: var(--pf-global--palette--black-800);
574
+ fill: var(--pf-topology__group__collapsed-badge__node__label__badge__text--Fill);
293
575
  }
294
576
 
577
+ /* Group label */
295
578
  .pf-topology__group__label .pf-topology__node__label__background {
296
- fill: var(--pf-global--BackgroundColor--dark-300);
579
+ fill: var(--pf-topology__group__label__node__label__background--Fill);
580
+ --pf-topology__node__label__background--Stroke: var(--pf-topology__group__label__node__label__background--Stroke);
581
+ --pf-topology__node__label__background--StrokeWidth: var(--pf-topology__group__label__node__label__background--StrokeWidth);
297
582
  }
298
583
 
299
584
  .pf-topology__group__label > text {
300
- fill: var(--pf-global--palette--white);
585
+ fill: var(--pf-topology__group__label__text--Fill);
301
586
  font-size: var(--pf-global--FontSize--sm);
302
587
  pointer-events: none;
303
588
  }
304
589
 
305
590
  .pf-topology__group__label .pf-topology__node__action-icon__icon {
306
- color: var(--pf-global--palette--white);
591
+ color: var(--pf-topology__group__label__node__action-icon__icon--Color);
307
592
  }
308
593
 
309
594
  .pf-topology__group.pf-m-selected .pf-topology__group__label .pf-topology__node__label__background {
310
- fill: var(--pf-global--active-color--100);
595
+ fill: var(--pf-topology__group--m-selected--group__label__node__label__background--Fill);
596
+ --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-selected--label__node__label__background--Stroke);
311
597
  }
312
598
 
599
+ /* Edge */
313
600
  .pf-topology__edge {
314
- --edge--stroke-width: 2px;
601
+ --edge--stroke-width: var(--pf-topology__edge--StrokeWidth);
315
602
  --edge--stroke-dasharray: 0;
316
- --edge--stroke: var(--pf-global--secondary-color--100);
603
+ --edge--stroke: var(--pf-topology__edge--Stroke);
317
604
  --edge--fill: var(--edge--stroke);
318
605
  --edge--opacity: 1;
319
606
  --edge--cursor: pointer;
320
- --edge--active--stroke: var(--pf-global--active-color--100);
607
+ --edge--hover--stroke: var(--pf-topology__edge--HoverStroke);
608
+ --edge--hover--fill: var(--edge--hover--stroke);
609
+ --edge--active--stroke: var(--pf-topology__edge--ActiveStroke);
610
+ --edge--active--stroke-width: var(--pf-topology__edge--ActiveStrokeWidth);
321
611
  --edge--active--fill: var(--edge--active--stroke);
322
612
  --edge--drag-active--opacity: 0.4;
323
613
  --edge__arrow--cursor: default;
324
- --edge--interactive--stroke: var(--pf-global--active-color--100);
614
+ --edge--interactive--stroke: var(--pf-topology__edge--InteractiveStroke);
325
615
  --edge--interactive--fill: var(--edge--interactive--stroke);
326
616
 
327
617
  cursor: var(--edge--cursor);
@@ -331,19 +621,18 @@
331
621
  }
332
622
 
333
623
  .pf-topology__edge.pf-m-info {
334
- --edge--stroke: var(--pf-global--primary-color--light-100);
624
+ --edge--stroke: var(--pf-topology__edge--m-info--EdgeStroke);
335
625
  }
336
626
 
337
627
  .pf-topology__edge.pf-m-success {
338
- --edge--stroke: var(--pf-global--success-color--100);
628
+ --edge--stroke: var(--pf-topology__edge--m-success--EdgeStroke);
339
629
  }
340
-
341
630
  .pf-topology__edge.pf-m-warning {
342
- --edge--stroke: var(--pf-global--warning-color--100);
631
+ --edge--stroke: var(--pf-topology__edge--m-warning--EdgeStroke);
343
632
  }
344
633
 
345
634
  .pf-topology__edge.pf-m-danger {
346
- --edge--stroke: var(--pf-global--danger-color--100);
635
+ --edge--stroke: var(--pf-topology__edge--m-danger--EdgeStroke);
347
636
  }
348
637
 
349
638
  .pf-topology__edge__background {
@@ -352,18 +641,19 @@
352
641
  fill: none;
353
642
  }
354
643
  .pf-topology__edge.pf-m-selected .pf-topology__edge__background {
355
- stroke: var(--pf-global--active-color--200);
644
+ stroke: var(--pf-topology__edge--m-selected--background--Stroke);
356
645
  }
357
646
  .pf-topology__edge.pf-m-hover .pf-topology__edge__background {
358
- stroke: var(--pf-global--BorderColor--100);
647
+ stroke: var(--pf-topology__edge--m-hover--background--Stroke);
359
648
  }
360
649
 
361
650
  .pf-topology__edge__link {
362
- stroke-width: var(--edge--stroke-width);
363
- stroke-dasharray: var(--edge--stroke-dasharray);
651
+ stroke-width: var(--edge--stroke-width);
652
+ stroke-dasharray: var(--edge--stroke-dasharray);
364
653
  fill-opacity: 0;
365
- animation: pf-topology__edge__dash 0s linear infinite forwards;
654
+ animation: pf-topology__edge__dash 0s linear infinite forwards;
366
655
  }
656
+
367
657
  .pf-topology__edge__link.pf-m-dotted {
368
658
  stroke-dasharray: 2;
369
659
  stroke-dashoffset: 2;
@@ -391,16 +681,11 @@
391
681
  }
392
682
  }
393
683
 
394
- .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
395
- .pf-topology__edge.pf-m-hover .pf-topology__connector-arrow {
396
- fill: var(--pf-global--Color--100);
397
- stroke: var(--pf-global--Color--100);
398
- }
399
-
400
684
  .pf-topology__edge.pf-m-selected .pf-topology__edge__link,
401
685
  .pf-topology__edge.pf-m-selected .pf-topology-connector-arrow {
402
686
  fill: var(--edge--active--fill);
403
687
  stroke: var(--edge--active--stroke);
688
+ stroke-width: var(--edge--active--stroke-width);
404
689
  }
405
690
 
406
691
  .pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology__edge__link,
@@ -412,10 +697,16 @@
412
697
  .pf-topology__edge.pf-m-dragging {
413
698
  pointer-events: none;
414
699
  }
700
+ .pf-topology__edge.pf-m-hover .pf-topology__edge__link,
701
+ .pf-topology__edge.pf-m-hover .pf-topology-connector-arrow {
702
+ fill: var(--edge--hover--fill);
703
+ stroke: var(--edge--hover--stroke);
704
+ }
705
+
415
706
  .pf-topology__edge.pf-m-dragging .pf-topology__edge__link,
416
707
  .pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow {
417
- stroke: var(--edge--interactive--stroke);
418
708
  fill: var(--edge--interactive--fill);
709
+ stroke: var(--edge--interactive--stroke);
419
710
  }
420
711
 
421
712
  .pf-topology__edge .pf-topology-connector-arrow {
@@ -428,45 +719,47 @@
428
719
  }
429
720
 
430
721
  .pf-topology__edge__tag__background {
431
- fill: var(--edge--stroke);
722
+ fill: var(--pf-topology__edge__tag__background--Fill);
432
723
  stroke-width: 0;
433
724
  }
434
725
 
435
726
  .pf-topology__edge__tag > text {
436
- stroke: var(--pf-global--palette--white);
727
+ fill: var(--pf-topology__edge__tag__text--Fill);
728
+ stroke: var(--pf-topology__edge__tag__text--Stroke);
437
729
  stroke-width: 0.5;
438
730
  font-size: 10px;
439
731
  pointer-events: none;
440
- fill: var(--pf-global--palette--white);
441
732
  }
442
733
 
443
734
  .pf-topology__edge__tag.pf-m-info .pf-topology__edge__tag__background {
444
- fill: var(--pf-global--primary-color--light-100);
735
+ fill: var(--pf-topology__edge__tag--m-info--background--Fill);
445
736
  }
446
737
 
447
738
  .pf-topology__edge__tag.pf-m-success .pf-topology__edge__tag__background {
448
- fill: var(--pf-global--success-color--100);
739
+ fill: var(--pf-topology__edge__tag--m-success--background--Fill);
449
740
  }
450
741
 
451
742
  .pf-topology__edge__tag.pf-m-warning .pf-topology__edge__tag__background {
452
- fill: var(--pf-global--warning-color--100);
743
+ fill: var(--pf-topology__edge__tag--m-warning--background--Fill);
453
744
  }
745
+
454
746
  .pf-topology__edge__tag.pf-m-warning > text {
455
- stroke: var(--pf-global--palette--black-1000);
456
- fill: var(--pf-global--palette--black-1000);
747
+ fill: var(--pf-topology__edge__tag--m-warning--text--Fill);
748
+ stroke: var(--pf-topology__edge__tag--m-warning--text--Stroke);
457
749
  }
458
750
 
459
751
  .pf-topology__edge__tag.pf-m-danger .pf-topology__edge__tag__background {
460
- fill: var(--pf-global--danger-color--100);
752
+ fill: var(--pf-topology__edge__tag--m-danger--background--Fill);
461
753
  }
462
754
 
755
+ /* Connectors */
463
756
  .pf-topology-connector-arrow {
464
757
  stroke-width: 1;
465
758
  stroke: var(--edge--stroke);
466
759
  }
467
760
 
468
761
  .pf-topology-connector-arrow.pf-m-alt-connector-arrow {
469
- fill: var(--pf-global--palette--white);
762
+ fill: var(--pf-topology-connector-arrow--m-alt-connector-arrow--Fill);
470
763
  }
471
764
 
472
765
  .pf-topology__connector-cross {
@@ -484,7 +777,7 @@
484
777
  }
485
778
 
486
779
  .pf-topology__connector-square.pf-m-source, .pf-topology__connector-circle.pf-m-source {
487
- fill: var(--pf-global--palette--white);
780
+ fill: var(--pf-topology__connector-square--m-source--Fill);
488
781
  }
489
782
 
490
783
  .pf-topology__connector-x {
@@ -497,23 +790,23 @@
497
790
  }
498
791
 
499
792
  .pf-topology-default-create-connector__line {
500
- stroke: var(--pf-topology-create-connector-color);
793
+ stroke: var(--pf-topology__create-connector-color--Stroke);
501
794
  stroke-width: 2px;
502
795
  stroke-dasharray: 3px, 3px;
503
796
  }
504
797
 
505
798
  .pf-topology-default-create-connector__arrow {
506
- fill: var(--pf-global--Color--light-200);
507
- stroke: var(--pf-topology-create-connector-color);
799
+ fill: var(--pf-topology-default-create-connector__arrow--Fill);
800
+ stroke: var(--pf-topology__create-connector-color--Stroke);
508
801
  }
509
802
 
510
803
  .pf-topology-default-create-connector.pf-m-hover .pf-topology-default-create-connector__line {
511
- stroke: var(--pf-global--Color--100);
804
+ stroke: var(--pf-topology-default-create-connector--m-hover--line--Stroke);
512
805
  }
513
806
 
514
807
  .pf-topology-default-create-connector.pf-m-hover .pf-topology-default-create-connector__arrow {
515
- fill: var(--pf-global--Color--100);
516
- stroke: var(--pf-global--Color--100);
808
+ fill: var(--pf-topology-default-create-connector--m-hover--arrow--Fill);
809
+ stroke: var(--pf-topology-default-create-connector--m-hover--arrow--Stroke);
517
810
  }
518
811
 
519
812
  .pf-topology-default-create-connector__create {
@@ -526,6 +819,6 @@
526
819
  }
527
820
 
528
821
  .pf-topology-default-create-connector__create__cursor {
529
- fill: var(--pf-topology-create-connector-color);
822
+ fill: var(--pf-topology__create-connector-color--Fill);
530
823
  }
531
824