@patternfly/patternfly 6.0.0-alpha.58 → 6.0.0-alpha.59

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 (10) hide show
  1. package/components/DragDrop/drag-drop.css +18 -14
  2. package/components/DragDrop/drag-drop.scss +18 -17
  3. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +18 -18
  6. package/patternfly-theme-dark-unversioned.css +18 -18
  7. package/patternfly.css +18 -18
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
package/components/DragDrop/drag-drop.css CHANGED
@@ -1,11 +1,15 @@
1
- .pf-v5-c-draggable {
1
+ :where(:root), :where(.pf-v5-c-draggable) {
2
2
  --pf-v5-c-draggable--Cursor: auto;
3
3
  --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
4
- --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
5
- --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
6
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
4
+ --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5
+ --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
6
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
7
+ --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
7
8
  --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
8
- --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
9
+ --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10
+ }
11
+
12
+ .pf-v5-c-draggable {
9
13
  cursor: var(--pf-v5-c-draggable--Cursor);
10
14
  }
11
15
  .pf-v5-c-draggable.pf-m-dragging {
@@ -22,23 +26,26 @@
22
26
  inset-inline-end: 0;
23
27
  content: "";
24
28
  border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
29
+ border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
25
30
  }
26
31
  .pf-v5-c-draggable.pf-m-drag-outside {
27
32
  --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
28
33
  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
29
34
  }
30
35
 
31
- .pf-v5-c-droppable {
36
+ :where(:root), :where(.pf-v5-c-droppable) {
32
37
  --pf-v5-c-droppable--before--BackgroundColor: transparent;
33
38
  --pf-v5-c-droppable--before--Opacity: 0;
34
39
  --pf-v5-c-droppable--after--BorderWidth: 0;
35
40
  --pf-v5-c-droppable--after--BorderColor: transparent;
36
- --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
41
+ --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
37
42
  --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
38
- --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
39
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
40
- --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
43
+ --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
44
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
45
+ --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
46
+ --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
41
47
  }
48
+
42
49
  .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
43
50
  position: absolute;
44
51
  inset-block-start: 0;
@@ -54,6 +61,7 @@
54
61
  }
55
62
  .pf-v5-c-droppable::after {
56
63
  border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
64
+ border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
57
65
  }
58
66
  .pf-v5-c-droppable.pf-m-dragging {
59
67
  --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -64,8 +72,4 @@
64
72
  }
65
73
  .pf-v5-c-droppable.pf-m-drag-outside {
66
74
  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
67
- }
68
-
69
- :where(.pf-v5-theme-dark) .pf-v5-c-droppable {
70
- --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
71
75
  }
package/components/DragDrop/drag-drop.scss CHANGED
@@ -1,14 +1,17 @@
1
1
  // @debug $draggable; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$draggable} {
3
+ :where(:root), :where(.#{$draggable}) {
4
4
  --#{$draggable}--Cursor: auto;
5
5
  --#{$draggable}--m-dragging--Cursor: grabbing;
6
- --#{$draggable}--m-dragging--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
7
- --#{$draggable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
8
- --#{$draggable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
6
+ --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
7
+ --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
8
+ --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
9
+ --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
9
10
  --#{$draggable}--m-drag-outside--Cursor: not-allowed;
10
- --#{$draggable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
11
+ --#{$draggable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ }
11
13
 
14
+ .#{$draggable} {
12
15
  cursor: var(--#{$draggable}--Cursor);
13
16
 
14
17
  &.pf-m-dragging {
@@ -26,6 +29,7 @@
26
29
  inset-inline-end: 0;
27
30
  content: "";
28
31
  border: var(--#{$draggable}--m-dragging--after--BorderWidth) solid var(--#{$draggable}--m-dragging--after--BorderColor);
32
+ border-radius: var(--#{$draggable}--m-dragging--after--BorderRadius);
29
33
  }
30
34
  }
31
35
 
@@ -35,17 +39,20 @@
35
39
  }
36
40
  }
37
41
 
38
- .#{$droppable} {
42
+ :where(:root), :where(.#{$droppable}) {
39
43
  --#{$droppable}--before--BackgroundColor: transparent;
40
44
  --#{$droppable}--before--Opacity: 0;
41
45
  --#{$droppable}--after--BorderWidth: 0;
42
46
  --#{$droppable}--after--BorderColor: transparent;
43
- --#{$droppable}--m-dragging--before--BackgroundColor: var(--#{$pf-global}--palette--white);
47
+ --#{$droppable}--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
44
48
  --#{$droppable}--m-dragging--before--Opacity: .6;
45
- --#{$droppable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
46
- --#{$droppable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
47
- --#{$droppable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
49
+ --#{$droppable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
50
+ --#{$droppable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
51
+ --#{$droppable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
52
+ --#{$droppable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
53
+ }
48
54
 
55
+ .#{$droppable} {
49
56
  &::before,
50
57
  &::after {
51
58
  position: absolute;
@@ -64,6 +71,7 @@
64
71
 
65
72
  &::after {
66
73
  border: var(--#{$droppable}--after--BorderWidth, 0) solid var(--#{$droppable}--after--BorderColor, transparent);
74
+ border-radius: var(--#{$droppable}--m-dragging--after--BorderRadius);
67
75
  }
68
76
 
69
77
  &.pf-m-dragging {
@@ -79,10 +87,3 @@
79
87
  --#{$droppable}--m-dragging--after--BorderColor: var(--#{$droppable}--m-drag-outside--after--BorderColor);
80
88
  }
81
89
  }
82
-
83
- // stylelint-disable no-invalid-position-at-import-rule
84
- @import "themes/dark/drag-drop";
85
-
86
- @include pf-v5-theme-dark {
87
- @include pf-v5-theme-dark-drag-drop;
88
- }
package/docs/components/DragDrop/examples/DragDrop.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .pf-v5-c-draggable.pf-m-dragging {
6
- --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
6
+ --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
7
 
8
8
  position: absolute;
9
9
  inset-block-start: 23%;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.58",
4
+ "version": "6.0.0-alpha.59",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11299,14 +11299,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11299
11299
  }
11300
11300
  }
11301
11301
 
11302
- .pf-v5-c-draggable {
11302
+ :where(:root), :where(.pf-v5-c-draggable) {
11303
11303
  --pf-v5-c-draggable--Cursor: auto;
11304
11304
  --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
11305
- --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
11306
- --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11307
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11305
+ --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
11306
+ --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11307
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11308
+ --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11308
11309
  --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
11309
- --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11310
+ --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11311
+ }
11312
+
11313
+ .pf-v5-c-draggable {
11310
11314
  cursor: var(--pf-v5-c-draggable--Cursor);
11311
11315
  }
11312
11316
  .pf-v5-c-draggable.pf-m-dragging {
@@ -11323,23 +11327,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11323
11327
  inset-inline-end: 0;
11324
11328
  content: "";
11325
11329
  border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
11330
+ border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
11326
11331
  }
11327
11332
  .pf-v5-c-draggable.pf-m-drag-outside {
11328
11333
  --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
11329
11334
  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
11330
11335
  }
11331
11336
 
11332
- .pf-v5-c-droppable {
11337
+ :where(:root), :where(.pf-v5-c-droppable) {
11333
11338
  --pf-v5-c-droppable--before--BackgroundColor: transparent;
11334
11339
  --pf-v5-c-droppable--before--Opacity: 0;
11335
11340
  --pf-v5-c-droppable--after--BorderWidth: 0;
11336
11341
  --pf-v5-c-droppable--after--BorderColor: transparent;
11337
- --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
11342
+ --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11338
11343
  --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
11339
- --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11340
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11341
- --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11344
+ --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11345
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11346
+ --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11347
+ --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11342
11348
  }
11349
+
11343
11350
  .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
11344
11351
  position: absolute;
11345
11352
  inset-block-start: 0;
@@ -11355,6 +11362,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11355
11362
  }
11356
11363
  .pf-v5-c-droppable::after {
11357
11364
  border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
11365
+ border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
11358
11366
  }
11359
11367
  .pf-v5-c-droppable.pf-m-dragging {
11360
11368
  --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -11367,14 +11375,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11367
11375
  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
11368
11376
  }
11369
11377
 
11370
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11371
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
11372
- }
11373
-
11374
- :where(.pf-v5-theme-dark) .pf-v5-c-droppable {
11375
- --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
11376
- }
11377
-
11378
11378
  .pf-v5-c-dual-list-selector {
11379
11379
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
11380
11380
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -11416,14 +11416,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11416
11416
  }
11417
11417
  }
11418
11418
 
11419
- .pf-v5-c-draggable {
11419
+ :where(:root), :where(.pf-v5-c-draggable) {
11420
11420
  --pf-v5-c-draggable--Cursor: auto;
11421
11421
  --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
11422
- --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
11423
- --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11424
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11422
+ --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
11423
+ --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11424
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11425
+ --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11425
11426
  --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
11426
- --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11427
+ --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11428
+ }
11429
+
11430
+ .pf-v5-c-draggable {
11427
11431
  cursor: var(--pf-v5-c-draggable--Cursor);
11428
11432
  }
11429
11433
  .pf-v5-c-draggable.pf-m-dragging {
@@ -11440,23 +11444,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11440
11444
  inset-inline-end: 0;
11441
11445
  content: "";
11442
11446
  border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
11447
+ border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
11443
11448
  }
11444
11449
  .pf-v5-c-draggable.pf-m-drag-outside {
11445
11450
  --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
11446
11451
  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
11447
11452
  }
11448
11453
 
11449
- .pf-v5-c-droppable {
11454
+ :where(:root), :where(.pf-v5-c-droppable) {
11450
11455
  --pf-v5-c-droppable--before--BackgroundColor: transparent;
11451
11456
  --pf-v5-c-droppable--before--Opacity: 0;
11452
11457
  --pf-v5-c-droppable--after--BorderWidth: 0;
11453
11458
  --pf-v5-c-droppable--after--BorderColor: transparent;
11454
- --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
11459
+ --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11455
11460
  --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
11456
- --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11457
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11458
- --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11461
+ --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11462
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11463
+ --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11464
+ --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11459
11465
  }
11466
+
11460
11467
  .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
11461
11468
  position: absolute;
11462
11469
  inset-block-start: 0;
@@ -11472,6 +11479,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11472
11479
  }
11473
11480
  .pf-v5-c-droppable::after {
11474
11481
  border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
11482
+ border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
11475
11483
  }
11476
11484
  .pf-v5-c-droppable.pf-m-dragging {
11477
11485
  --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -11484,14 +11492,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11484
11492
  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
11485
11493
  }
11486
11494
 
11487
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11488
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
11489
- }
11490
-
11491
- :where(.pf-theme-dark) .pf-v5-c-droppable {
11492
- --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
11493
- }
11494
-
11495
11495
  .pf-v5-c-dual-list-selector {
11496
11496
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
11497
11497
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
package/patternfly.css CHANGED
@@ -11416,14 +11416,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11416
11416
  }
11417
11417
  }
11418
11418
 
11419
- .pf-v5-c-draggable {
11419
+ :where(:root), :where(.pf-v5-c-draggable) {
11420
11420
  --pf-v5-c-draggable--Cursor: auto;
11421
11421
  --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
11422
- --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
11423
- --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11424
- --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11422
+ --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
11423
+ --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11424
+ --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11425
+ --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11425
11426
  --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
11426
- --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11427
+ --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11428
+ }
11429
+
11430
+ .pf-v5-c-draggable {
11427
11431
  cursor: var(--pf-v5-c-draggable--Cursor);
11428
11432
  }
11429
11433
  .pf-v5-c-draggable.pf-m-dragging {
@@ -11440,23 +11444,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11440
11444
  inset-inline-end: 0;
11441
11445
  content: "";
11442
11446
  border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
11447
+ border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
11443
11448
  }
11444
11449
  .pf-v5-c-draggable.pf-m-drag-outside {
11445
11450
  --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
11446
11451
  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
11447
11452
  }
11448
11453
 
11449
- .pf-v5-c-droppable {
11454
+ :where(:root), :where(.pf-v5-c-droppable) {
11450
11455
  --pf-v5-c-droppable--before--BackgroundColor: transparent;
11451
11456
  --pf-v5-c-droppable--before--Opacity: 0;
11452
11457
  --pf-v5-c-droppable--after--BorderWidth: 0;
11453
11458
  --pf-v5-c-droppable--after--BorderColor: transparent;
11454
- --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
11459
+ --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11455
11460
  --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
11456
- --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11457
- --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
11458
- --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
11461
+ --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
11462
+ --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
11463
+ --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
11464
+ --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11459
11465
  }
11466
+
11460
11467
  .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
11461
11468
  position: absolute;
11462
11469
  inset-block-start: 0;
@@ -11472,6 +11479,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11472
11479
  }
11473
11480
  .pf-v5-c-droppable::after {
11474
11481
  border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
11482
+ border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
11475
11483
  }
11476
11484
  .pf-v5-c-droppable.pf-m-dragging {
11477
11485
  --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -11484,14 +11492,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11484
11492
  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
11485
11493
  }
11486
11494
 
11487
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11488
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
11489
- }
11490
-
11491
- :where(.pf-v5-theme-dark) .pf-v5-c-droppable {
11492
- --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
11493
- }
11494
-
11495
11495
  .pf-v5-c-dual-list-selector {
11496
11496
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
11497
11497
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;