@patternfly/patternfly 6.0.0-alpha.42 → 6.0.0-alpha.44

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 (13) hide show
  1. package/components/Button/button.css +366 -347
  2. package/components/Button/button.scss +422 -471
  3. package/components/Spinner/spinner.css +17 -34
  4. package/components/Spinner/spinner.scss +19 -47
  5. package/docs/components/Button/examples/Button.css +4 -0
  6. package/docs/components/Button/examples/Button.md +1380 -81
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +383 -381
  9. package/patternfly-theme-dark-unversioned.css +383 -381
  10. package/patternfly.css +383 -381
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/components/Button/themes/dark/button.scss +0 -51
package/components/Spinner/spinner.css CHANGED
@@ -1,16 +1,26 @@
1
+ :root,
1
2
  .pf-v5-c-spinner {
2
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
3
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3
4
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
4
5
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
5
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
6
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
7
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
8
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
9
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
6
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
7
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
8
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
9
+ --pf-v5-c-spinner--StrokeWidth: 10;
10
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
11
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
12
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
13
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
14
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
15
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
10
16
  --pf-v5-c-spinner--m-inline--diameter: 1em;
17
+ }
18
+
19
+ .pf-v5-c-spinner {
11
20
  width: var(--pf-v5-c-spinner--Width);
12
21
  height: var(--pf-v5-c-spinner--Height);
13
22
  overflow: hidden;
23
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
14
24
  }
15
25
  .pf-v5-c-spinner.pf-m-inline {
16
26
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -28,33 +38,6 @@
28
38
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
29
39
  }
30
40
 
31
- svg.pf-v5-c-spinner {
32
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
33
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
34
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
35
- --pf-v5-c-spinner--stroke-width: 10;
36
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
37
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
38
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
39
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
40
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
41
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
42
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
43
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
44
- }
45
- svg.pf-v5-c-spinner.pf-m-sm {
46
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
47
- }
48
- svg.pf-v5-c-spinner.pf-m-md {
49
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
50
- }
51
- svg.pf-v5-c-spinner.pf-m-lg {
52
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
53
- }
54
- svg.pf-v5-c-spinner.pf-m-xl {
55
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
56
- }
57
-
58
41
  .pf-v5-c-spinner__path {
59
42
  width: 100%;
60
43
  height: 100%;
@@ -62,7 +45,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
62
45
  stroke-dasharray: 283;
63
46
  stroke-dashoffset: 280;
64
47
  stroke-linecap: round;
65
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
48
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
66
49
  transform-origin: 50% 50%;
67
50
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
68
51
  }
package/components/Spinner/spinner.scss CHANGED
@@ -1,23 +1,34 @@
1
1
  // @debug $spinner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$spinner} {
4
- --#{$spinner}--diameter: var(--#{$pf-global}--icon--FontSize--xl);
5
+ --#{$spinner}--diameter: var(--pf-t--global--icon--size--2xl);
5
6
  --#{$spinner}--Width: var(--#{$spinner}--diameter);
6
7
  --#{$spinner}--Height: var(--#{$spinner}--diameter);
7
- --#{$spinner}--Color: var(--#{$pf-global}--primary-color--100);
8
+ --#{$spinner}--Color: var(--pf-t--global--icon--color--brand--default);
9
+ --#{$spinner}--AnimationDuration: 1.4s;
10
+ --#{$spinner}--AnimationTimingFunction: linear;
11
+ --#{$spinner}--StrokeWidth: 10;
8
12
 
13
+ // path
14
+ --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--StrokeWidth);
15
+ --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
16
+
9
17
  // sizes
10
- --#{$spinner}--m-sm--diameter: var(--#{$pf-global}--icon--FontSize--sm);
11
- --#{$spinner}--m-md--diameter: var(--#{$pf-global}--icon--FontSize--md);
12
- --#{$spinner}--m-lg--diameter: var(--#{$pf-global}--icon--FontSize--lg);
13
- --#{$spinner}--m-xl--diameter: var(--#{$pf-global}--icon--FontSize--xl);
14
-
18
+ --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
19
+ --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
20
+ --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
21
+ --#{$spinner}--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
22
+
15
23
  // inline
16
24
  --#{$spinner}--m-inline--diameter: 1em;
25
+ }
17
26
 
27
+ .#{$spinner} {
18
28
  width: var(--#{$spinner}--Width);
19
29
  height: var(--#{$spinner}--Height);
20
30
  overflow: hidden;
31
+ animation: #{$spinner}-animation-rotate calc(var(--#{$spinner}--AnimationDuration) * 2) var(--#{$spinner}--AnimationTimingFunction) infinite;
21
32
 
22
33
  // Modifiers change the variables for size variations
23
34
  &.pf-m-inline {
@@ -41,45 +52,6 @@
41
52
  }
42
53
  }
43
54
 
44
- // stylelint-disable selector-no-qualifying-type
45
- svg.#{$spinner} {
46
- --#{$spinner}--diameter: var(--#{$pf-global}--icon--FontSize--xl);
47
- --#{$spinner}--AnimationDuration: 1.4s;
48
- --#{$spinner}--AnimationTimingFunction: linear;
49
- --#{$spinner}--stroke-width: 10;
50
-
51
- // path
52
- --#{$spinner}__path--Stroke: var(--#{$spinner}--Color);
53
- --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--stroke-width);
54
- --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
55
-
56
- // size modifiers
57
- --#{$spinner}--m-sm--diameter: var(--#{$pf-global}--icon--FontSize--sm);
58
- --#{$spinner}--m-md--diameter: var(--#{$pf-global}--icon--FontSize--md);
59
- --#{$spinner}--m-lg--diameter: var(--#{$pf-global}--icon--FontSize--lg);
60
- --#{$spinner}--m-xl--diameter: var(--#{$pf-global}--icon--FontSize--xl);
61
-
62
- animation: #{$spinner}-animation-rotate calc(var(--#{$spinner}--AnimationDuration) * 2) var(--#{$spinner}--AnimationTimingFunction) infinite;
63
-
64
- // Modifiers change the variables for size variations
65
- &.pf-m-sm {
66
- --#{$spinner}--diameter: var(--#{$spinner}--m-sm--diameter);
67
- }
68
-
69
- &.pf-m-md {
70
- --#{$spinner}--diameter: var(--#{$spinner}--m-md--diameter);
71
- }
72
-
73
- &.pf-m-lg {
74
- --#{$spinner}--diameter: var(--#{$spinner}--m-lg--diameter);
75
- }
76
-
77
- &.pf-m-xl {
78
- --#{$spinner}--diameter: var(--#{$spinner}--m-xl--diameter);
79
- }
80
- }
81
- // stylelint-enable
82
-
83
55
  .#{$spinner}__path {
84
56
  width: 100%;
85
57
  height: 100%;
@@ -87,7 +59,7 @@ svg.#{$spinner} {
87
59
  stroke-dasharray: 283;
88
60
  stroke-dashoffset: 280;
89
61
  stroke-linecap: round;
90
- stroke-width: var(--#{$spinner}--stroke-width);
62
+ stroke-width: var(--#{$spinner}--StrokeWidth);
91
63
  transform-origin: 50% 50%;
92
64
  animation: #{$spinner}-animation-dash var(--#{$spinner}--AnimationDuration) var(--#{$spinner}__path--AnimationTimingFunction) infinite;
93
65
  }
package/docs/components/Button/examples/Button.css CHANGED
@@ -2,3 +2,7 @@
2
2
  margin-inline-end: 6px;
3
3
  margin-block-end: 6px;
4
4
  }
5
+
6
+ #ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
7
+ margin: 0;
8
+ }