@patternfly/react-styles 4.63.3 → 4.63.6

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 (4) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/css/components/Topology/topology-components.css +18 -15
  3. package/package.json +3 -3
  4. package/src/css/components/Topology/topology-components.css +18 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,36 @@
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.63.6 (2022-05-11)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
14
+ ## 4.63.5 (2022-05-11)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **charts:** support customizing tooltip border for dark theme ([#7393](https://github.com/patternfly/patternfly-react/issues/7393)) ([7168a1d](https://github.com/patternfly/patternfly-react/commit/7168a1dc7f3a1302d719a32bcd32dcdb9ad8fb86))
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.63.4 (2022-05-11)
26
+
27
+
28
+ ### Bug Fixes
29
+
30
+ * **topology:** fix variables ([#7364](https://github.com/patternfly/patternfly-react/issues/7364)) ([2dec22e](https://github.com/patternfly/patternfly-react/commit/2dec22eec0f2fb8a634108e6995f747f61fa7d93))
31
+
32
+
33
+
34
+
35
+
6
36
  ## 4.63.3 (2022-05-10)
7
37
 
8
38
 
package/css/components/Topology/topology-components.css CHANGED
@@ -6,14 +6,14 @@
6
6
  /* Create connector */
7
7
  /* Remove --pf-topology-create-connector-color at a breaking change */
8
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);
9
+ --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, var(--pf-global--secondary-color--100));
10
+ --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, var(--pf-global--secondary-color--100));
11
11
 
12
12
  /* node */
13
13
  --pf-topology__node__background--Fill: var(--pf-global--BackgroundColor--100);
14
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;
15
+ --pf-topology__node__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
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;
@@ -36,6 +36,7 @@
36
36
  --pf-topology__node_decorator--Color: var(--pf-global--Color--200);
37
37
  --pf-topology__node__decorator__bg--Fill: var(--pf-global--BackgroundColor--light-100);
38
38
  --pf-topology__node__decorator__bg--Stroke: var(--pf-global--BorderColor--100);
39
+ --pf-topology__node__decorator__bg--StrokeWidth: var(--pf-global--BorderWidth--sm);
39
40
 
40
41
  --pf-topology__node__decorator__status--m-info--Color: var(--pf-global--primary-color--light-100);
41
42
  --pf-topology__node__decorator__status--m-danger--Color: var(--pf-global--danger-color--100);
@@ -61,8 +62,8 @@
61
62
  --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-global--success-color--100);
62
63
  --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-global--warning-color--100);
63
64
  --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;
65
+ --pf-topology__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
66
+ --pf-topology__node__label--m-dragging--background--StrokeWidth: var(--pf-global--BorderWidth--sm);
66
67
 
67
68
  --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-global--active-color--100);
68
69
  --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-global--primary-color--light-100);
@@ -74,7 +75,8 @@
74
75
  --pf-topology__node__label__icon--Color: var(--pf-global--Color--200);
75
76
 
76
77
  --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
+ --pf-topology__node__label__icon__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
79
+ --pf-topology__node__label__icon__background--Stroke: var(--pf-global--BorderColor--100);
78
80
 
79
81
  --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-global--active-color--100);
80
82
  --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-global--primary-color--light-100);
@@ -82,9 +84,10 @@
82
84
  --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-global--warning-color--100);
83
85
  --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-global--danger-color--100);
84
86
 
87
+ --pf-topology__node__label__badge__rect--StrokeWidth: var(--pf-global--BorderWidth--sm);
85
88
 
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);
89
+ --pf-topology__node__separator--Stroke: var(--pf-global--BorderColor--100);
90
+ --pf-topology__node--m-selected--separator--Stroke: var(--pf-global--BorderColor--100);
88
91
 
89
92
  --pf-topology__node__action-icon__icon--Color: var(--pf-global--palette--black-1000);
90
93
  --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-global--Color--light-100);
@@ -103,18 +106,18 @@
103
106
  --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-global--palette--blue-50);
104
107
  --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-global--active-color--100);
105
108
  --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);
109
+ --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-global--BorderColor--100);
107
110
  --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-global--palette--black-800);
108
111
 
109
112
  --pf-topology__group__label__node__label__background--Fill: var(--pf-global--BackgroundColor--dark-300);
110
- --pf-topology__group__label__node__label__background--StrokeWidth: 1px;
113
+ --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
111
114
  --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
112
115
  --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-global--palette--white);
113
116
  --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--active-color--100);
114
117
 
115
118
  /* edge */
116
119
  --pf-topology__edge--Stroke: var(--pf-global--secondary-color--100);
117
- --pf-topology__edge--StrokeWidth: 1px;
120
+ --pf-topology__edge--StrokeWidth: var(--pf-global--BorderWidth--sm);
118
121
  --pf-topology__edge--HoverStroke: var(--pf-global--Color--100);
119
122
  --pf-topology__edge--ActiveStroke: var(--pf-global--active-color--100);
120
123
  --pf-topology__edge--ActiveStrokeWidth: 2px;
@@ -365,7 +368,7 @@
365
368
  .pf-topology__node__decorator__bg {
366
369
  fill: var(--pf-topology__node__decorator__bg--Fill);
367
370
  stroke: var(--pf-topology__node__decorator__bg--Stroke);
368
- stroke-width: 1px;
371
+ stroke-width: var(--pf-topology__node__decorator__bg--StrokeWidth);
369
372
  }
370
373
 
371
374
  .pf-topology__node__decorator__icon {
@@ -460,7 +463,7 @@
460
463
  /* Node label badge */
461
464
  .pf-topology__node__label__badge > rect {
462
465
  /* TODO Color is hard coded in the badge. */
463
- stroke-width: 1px;
466
+ stroke-width: var(--pf-topology__node__label__badge__rect--StrokeWidth);
464
467
  }
465
468
 
466
469
  .pf-topology__node__label__badge > text {
@@ -480,7 +483,7 @@
480
483
 
481
484
  .pf-topology__node__label__icon__background {
482
485
  fill: var(--pf-topology__node__label__icon__background--Fill);
483
- stroke-width: 1px;
486
+ stroke-width: var(--pf-topology__node__label__icon__background--StrokeWidth);
484
487
  stroke: var(--pf-topology__node__label__icon__background--Stroke);
485
488
  }
486
489
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.63.3",
3
+ "version": "4.63.6",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "4.194.2",
22
+ "@patternfly/patternfly": "4.194.4",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.0.0"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "ac145c98fef36357752cd28ffd81f3fcd4ba2cb5"
32
+ "gitHead": "0d7581349fd030239e357bb9db425a961bea5763"
33
33
  }
package/src/css/components/Topology/topology-components.css CHANGED
@@ -6,14 +6,14 @@
6
6
  /* Create connector */
7
7
  /* Remove --pf-topology-create-connector-color at a breaking change */
8
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);
9
+ --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, var(--pf-global--secondary-color--100));
10
+ --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, var(--pf-global--secondary-color--100));
11
11
 
12
12
  /* node */
13
13
  --pf-topology__node__background--Fill: var(--pf-global--BackgroundColor--100);
14
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;
15
+ --pf-topology__node__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
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;
@@ -36,6 +36,7 @@
36
36
  --pf-topology__node_decorator--Color: var(--pf-global--Color--200);
37
37
  --pf-topology__node__decorator__bg--Fill: var(--pf-global--BackgroundColor--light-100);
38
38
  --pf-topology__node__decorator__bg--Stroke: var(--pf-global--BorderColor--100);
39
+ --pf-topology__node__decorator__bg--StrokeWidth: var(--pf-global--BorderWidth--sm);
39
40
 
40
41
  --pf-topology__node__decorator__status--m-info--Color: var(--pf-global--primary-color--light-100);
41
42
  --pf-topology__node__decorator__status--m-danger--Color: var(--pf-global--danger-color--100);
@@ -61,8 +62,8 @@
61
62
  --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-global--success-color--100);
62
63
  --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-global--warning-color--100);
63
64
  --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;
65
+ --pf-topology__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
66
+ --pf-topology__node__label--m-dragging--background--StrokeWidth: var(--pf-global--BorderWidth--sm);
66
67
 
67
68
  --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-global--active-color--100);
68
69
  --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-global--primary-color--light-100);
@@ -74,7 +75,8 @@
74
75
  --pf-topology__node__label__icon--Color: var(--pf-global--Color--200);
75
76
 
76
77
  --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
+ --pf-topology__node__label__icon__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
79
+ --pf-topology__node__label__icon__background--Stroke: var(--pf-global--BorderColor--100);
78
80
 
79
81
  --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-global--active-color--100);
80
82
  --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-global--primary-color--light-100);
@@ -82,9 +84,10 @@
82
84
  --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-global--warning-color--100);
83
85
  --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-global--danger-color--100);
84
86
 
87
+ --pf-topology__node__label__badge__rect--StrokeWidth: var(--pf-global--BorderWidth--sm);
85
88
 
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);
89
+ --pf-topology__node__separator--Stroke: var(--pf-global--BorderColor--100);
90
+ --pf-topology__node--m-selected--separator--Stroke: var(--pf-global--BorderColor--100);
88
91
 
89
92
  --pf-topology__node__action-icon__icon--Color: var(--pf-global--palette--black-1000);
90
93
  --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-global--Color--light-100);
@@ -103,18 +106,18 @@
103
106
  --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-global--palette--blue-50);
104
107
  --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-global--active-color--100);
105
108
  --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);
109
+ --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-global--BorderColor--100);
107
110
  --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-global--palette--black-800);
108
111
 
109
112
  --pf-topology__group__label__node__label__background--Fill: var(--pf-global--BackgroundColor--dark-300);
110
- --pf-topology__group__label__node__label__background--StrokeWidth: 1px;
113
+ --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
111
114
  --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
112
115
  --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-global--palette--white);
113
116
  --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--active-color--100);
114
117
 
115
118
  /* edge */
116
119
  --pf-topology__edge--Stroke: var(--pf-global--secondary-color--100);
117
- --pf-topology__edge--StrokeWidth: 1px;
120
+ --pf-topology__edge--StrokeWidth: var(--pf-global--BorderWidth--sm);
118
121
  --pf-topology__edge--HoverStroke: var(--pf-global--Color--100);
119
122
  --pf-topology__edge--ActiveStroke: var(--pf-global--active-color--100);
120
123
  --pf-topology__edge--ActiveStrokeWidth: 2px;
@@ -365,7 +368,7 @@
365
368
  .pf-topology__node__decorator__bg {
366
369
  fill: var(--pf-topology__node__decorator__bg--Fill);
367
370
  stroke: var(--pf-topology__node__decorator__bg--Stroke);
368
- stroke-width: 1px;
371
+ stroke-width: var(--pf-topology__node__decorator__bg--StrokeWidth);
369
372
  }
370
373
 
371
374
  .pf-topology__node__decorator__icon {
@@ -460,7 +463,7 @@
460
463
  /* Node label badge */
461
464
  .pf-topology__node__label__badge > rect {
462
465
  /* TODO Color is hard coded in the badge. */
463
- stroke-width: 1px;
466
+ stroke-width: var(--pf-topology__node__label__badge__rect--StrokeWidth);
464
467
  }
465
468
 
466
469
  .pf-topology__node__label__badge > text {
@@ -480,7 +483,7 @@
480
483
 
481
484
  .pf-topology__node__label__icon__background {
482
485
  fill: var(--pf-topology__node__label__icon__background--Fill);
483
- stroke-width: 1px;
486
+ stroke-width: var(--pf-topology__node__label__icon__background--StrokeWidth);
484
487
  stroke: var(--pf-topology__node__label__icon__background--Stroke);
485
488
  }
486
489