@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.3

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 (20) hide show
  1. package/base/_globals.scss +14 -12
  2. package/base/_variables.scss +5 -0
  3. package/base/patternfly-globals.css +12 -12
  4. package/base/patternfly-variables.css +761 -0
  5. package/base/tokens/_tokens-dark.scss +296 -0
  6. package/base/tokens/_tokens-default.scss +343 -0
  7. package/base/tokens/_tokens-font.scss +65 -0
  8. package/base/tokens/_tokens-palette.scss +77 -0
  9. package/components/Button/button.css +137 -177
  10. package/components/Button/button.scss +157 -139
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals-theme-dark-unversioned.css +761 -0
  13. package/patternfly-base-no-globals.css +761 -0
  14. package/patternfly-base-theme-dark-unversioned.css +773 -12
  15. package/patternfly-base.css +773 -12
  16. package/patternfly-no-globals.css +898 -184
  17. package/patternfly-theme-dark-unversioned.css +910 -196
  18. package/patternfly.css +910 -196
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/base/_globals.scss CHANGED
@@ -47,11 +47,12 @@
47
47
  height: 100%;
48
48
  }
49
49
 
50
+ // TODO
50
51
  :where(body) {
51
- font-family: var(--#{$pf-global}--FontFamily--text);
52
- font-size: var(--#{$pf-global}--FontSize--md);
53
- font-weight: var(--#{$pf-global}--FontWeight--normal);
54
- line-height: var(--#{$pf-global}--LineHeight--md);
52
+ font-family: var(--pf-t--global--font--family--body);
53
+ font-size: var(--pf-t--global--font--size--body);
54
+ font-weight: var(--pf-t--global--font--weight--body);
55
+ line-height: var(--pf-t--global--font--line-height--body);
55
56
  }
56
57
 
57
58
  :where(
@@ -63,7 +64,7 @@
63
64
  h6
64
65
  ) {
65
66
  font-size: 100%;
66
- font-weight: var(--#{$pf-global}--FontWeight--normal);
67
+ font-weight: var(--pf-t--global--font--weight--body);
67
68
  }
68
69
 
69
70
  :where(ul) {
@@ -80,8 +81,8 @@
80
81
  margin: 0;
81
82
  font-family: inherit;
82
83
  font-size: 100%;
83
- line-height: var(--#{$pf-global}--LineHeight--md);
84
- color: var(--#{$pf-global}--Color--100);
84
+ line-height: var(--pf-t--global--font--line-height--body);
85
+ color: var(--pf-t--global--text--color--regular);
85
86
  }
86
87
 
87
88
  :where(
@@ -117,18 +118,19 @@
117
118
  code,
118
119
  pre
119
120
  ) {
120
- font-family: var(--#{$pf-global}--FontFamily--monospace);
121
+ font-family: var(--pf-t--global--font--family--mono);
121
122
  }
122
123
 
123
124
  :where(a) {
125
+ // TODO token for link font weight?
124
126
  font-weight: var(--#{$pf-global}--link--FontWeight);
125
- color: var(--#{$pf-global}--link--Color);
126
- text-decoration: var(--#{$pf-global}--link--TextDecoration);
127
+ color: var(--pf-t--global--text--color--link--default);
128
+ text-decoration: var(--pf-t--global--link--text-decoration);
127
129
  }
128
130
 
129
131
  :where(a:hover) {
130
- --#{$pf-global}--link--Color: var(--#{$pf-global}--link--Color--hover);
131
- --#{$pf-global}--link--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
132
+ --#{$pf-global}--link--Color: var(--pf-t--global--text--color--link--hover);
133
+ --#{$pf-global}--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
132
134
  }
133
135
 
134
136
  :where(
package/base/_variables.scss CHANGED
@@ -290,3 +290,8 @@
290
290
  @include pf-v5-theme-dark {
291
291
  @include pf-v5-theme-dark-variables;
292
292
  }
293
+
294
+ @import "./tokens/tokens-palette";
295
+ @import "./tokens/tokens-default";
296
+ @import "./tokens/tokens-font";
297
+ @import "./tokens/tokens-dark";
package/base/patternfly-globals.css CHANGED
@@ -37,10 +37,10 @@ body) {
37
37
  }
38
38
 
39
39
  :where(body) {
40
- font-family: var(--pf-v5-global--FontFamily--text);
41
- font-size: var(--pf-v5-global--FontSize--md);
42
- font-weight: var(--pf-v5-global--FontWeight--normal);
43
- line-height: var(--pf-v5-global--LineHeight--md);
40
+ font-family: var(--pf-t--global--font--family--body);
41
+ font-size: var(--pf-t--global--font--size--body);
42
+ font-weight: var(--pf-t--global--font--weight--body);
43
+ line-height: var(--pf-t--global--font--line-height--body);
44
44
  }
45
45
 
46
46
  :where(h1,
@@ -50,7 +50,7 @@ h4,
50
50
  h5,
51
51
  h6) {
52
52
  font-size: 100%;
53
- font-weight: var(--pf-v5-global--FontWeight--normal);
53
+ font-weight: var(--pf-t--global--font--weight--body);
54
54
  }
55
55
 
56
56
  :where(ul) {
@@ -65,8 +65,8 @@ textarea) {
65
65
  margin: 0;
66
66
  font-family: inherit;
67
67
  font-size: 100%;
68
- line-height: var(--pf-v5-global--LineHeight--md);
69
- color: var(--pf-v5-global--Color--100);
68
+ line-height: var(--pf-t--global--font--line-height--body);
69
+ color: var(--pf-t--global--text--color--regular);
70
70
  }
71
71
 
72
72
  :where(img,
@@ -96,18 +96,18 @@ th) {
96
96
 
97
97
  :where(code,
98
98
  pre) {
99
- font-family: var(--pf-v5-global--FontFamily--monospace);
99
+ font-family: var(--pf-t--global--font--family--mono);
100
100
  }
101
101
 
102
102
  :where(a) {
103
103
  font-weight: var(--pf-v5-global--link--FontWeight);
104
- color: var(--pf-v5-global--link--Color);
105
- text-decoration: var(--pf-v5-global--link--TextDecoration);
104
+ color: var(--pf-t--global--text--color--link--default);
105
+ text-decoration: var(--pf-t--global--link--text-decoration);
106
106
  }
107
107
 
108
108
  :where(a:hover) {
109
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
110
- --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
109
+ --pf-v5-global--link--Color: var(--pf-t--global--text--color--link--hover);
110
+ --pf-v5-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
111
111
  }
112
112
 
113
113
  :where(a,