@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.118

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 (76) hide show
  1. package/base/_fonts.scss +7 -95
  2. package/base/_variables.scss +7 -292
  3. package/base/patternfly-fonts.css +6 -76
  4. package/base/patternfly-variables.css +8 -241
  5. package/components/AppLauncher/app-launcher.css +0 -10
  6. package/components/AppLauncher/app-launcher.scss +0 -7
  7. package/components/Chip/chip-group.css +0 -13
  8. package/components/Chip/chip-group.scss +0 -2
  9. package/components/Chip/chip.css +0 -19
  10. package/components/Chip/chip.scss +0 -9
  11. package/components/Content/content.css +86 -60
  12. package/components/Content/content.scss +129 -40
  13. package/components/ContextSelector/context-selector.css +0 -30
  14. package/components/ContextSelector/context-selector.scss +0 -9
  15. package/components/DataList/data-list.css +46 -49
  16. package/components/Divider/divider.css +28 -31
  17. package/components/Dropdown/dropdown.css +0 -22
  18. package/components/Dropdown/dropdown.scss +0 -7
  19. package/components/LogViewer/log-viewer.css +0 -24
  20. package/components/LogViewer/log-viewer.scss +0 -9
  21. package/components/Menu/menu.css +103 -61
  22. package/components/NumberInput/number-input.css +5 -8
  23. package/components/NumberInput/number-input.scss +1 -1
  24. package/components/OptionsMenu/options-menu.css +0 -15
  25. package/components/OptionsMenu/options-menu.scss +0 -7
  26. package/components/Page/page.css +92 -65
  27. package/components/Page/page.scss +0 -2
  28. package/components/Pagination/pagination.css +8 -8
  29. package/components/Pagination/pagination.scss +1 -1
  30. package/components/Select/select.css +0 -29
  31. package/components/Select/select.scss +0 -9
  32. package/components/Table/table.css +46 -49
  33. package/components/Toolbar/toolbar.css +90 -75
  34. package/docs/components/Content/examples/Content.md +254 -61
  35. package/package.json +31 -32
  36. package/patternfly-base-no-globals.css +12 -315
  37. package/patternfly-base.css +12 -315
  38. package/patternfly-charts.css +0 -322
  39. package/patternfly-charts.scss +5 -409
  40. package/patternfly-no-globals.css +539 -748
  41. package/patternfly.css +539 -748
  42. package/patternfly.min.css +1 -1
  43. package/patternfly.min.css.map +1 -1
  44. package/sass-utilities/_all.scss +0 -2
  45. package/sass-utilities/functions.scss +0 -6
  46. package/sass-utilities/mixins.scss +42 -16
  47. package/sass-utilities/scss-variables.scss +0 -211
  48. package/base/_chart-globals.scss +0 -415
  49. package/base/themes/dark/_chart-globals.scss +0 -42
  50. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  51. package/components/Chip/themes/dark/chip.scss +0 -9
  52. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  53. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  54. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  55. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  56. package/components/Select/themes/dark/select.scss +0 -23
  57. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
  58. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  59. package/patternfly-base-theme-dark-unversioned.css +0 -6346
  60. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  61. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  62. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  63. package/patternfly-charts-theme-dark.css +0 -70
  64. package/patternfly-charts-theme-dark.scss +0 -8
  65. package/patternfly-theme-dark-unversioned.css +0 -35621
  66. package/patternfly-theme-dark-unversioned.scss +0 -6
  67. package/patternfly-theme-dark.css +0 -0
  68. package/patternfly-theme-dark.scss +0 -1
  69. package/sass-utilities/colors.scss +0 -82
  70. package/sass-utilities/placeholders.scss +0 -72
  71. package/sass-utilities/themes/dark/_all.scss +0 -4
  72. package/sass-utilities/themes/dark/colors.scss +0 -16
  73. package/sass-utilities/themes/dark/mixins.scss +0 -7
  74. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  75. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  76. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
package/base/_fonts.scss CHANGED
@@ -1,92 +1,20 @@
1
+ // Variable fonts
1
2
  @font-face {
2
- font-family: RedHatDisplay;
3
- font-style: normal;
4
- font-weight: 400;
5
- src:
6
- url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
7
- font-display: fallback;
8
- }
9
-
10
- @font-face {
11
- font-family: RedHatDisplay;
12
- font-style: italic;
13
- font-weight: 400;
14
- src:
15
- url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplay-MediumItalic.woff2") format("woff2");
16
- font-display: fallback;
17
- }
18
-
19
- @font-face {
20
- font-family: RedHatDisplay;
21
- font-style: normal;
22
- font-weight: 700;
23
- src:
24
- url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
25
- font-display: fallback;
26
- }
27
-
28
- @font-face {
29
- font-family: RedHatDisplay;
30
- font-style: italic;
31
- font-weight: 700;
32
- src:
33
- url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
34
- font-display: fallback;
35
- }
36
-
37
- @font-face {
38
- font-family: RedHatText;
39
- font-style: normal;
40
- font-weight: 400;
41
- src:
42
- url("#{$pf-v6-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2");
43
- font-display: fallback;
44
- }
45
-
46
- @font-face {
47
- font-family: RedHatText;
48
- font-style: italic;
49
- font-weight: 400;
50
- src:
51
- url("#{$pf-v6-global--font-path}/RedHatText/RedHatText-Italic.woff2") format("woff2");
52
- font-display: fallback;
53
- }
54
-
55
- @font-face {
56
- font-family: RedHatText;
57
- font-style: normal;
58
- font-weight: 700;
59
- src:
60
- url("#{$pf-v6-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2");
61
- font-display: fallback;
62
- }
63
-
64
- @font-face {
65
- font-family: RedHatText;
66
- font-style: italic;
67
- font-weight: 700;
68
- src:
69
- url("#{$pf-v6-global--font-path}/RedHatText/RedHatText-MediumItalic.woff2") format("woff2");
70
- font-display: fallback;
71
- }
72
-
73
- @font-face {
74
- font-family: RedHatMono;
3
+ font-family: RedHatTextVF;
75
4
  font-style: normal;
76
- font-weight: 400;
77
- src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMono-Regular.woff2") format("woff2");
5
+ font-weight: 400 500;
6
+ src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
78
7
  font-display: fallback;
79
8
  }
80
9
 
81
10
  @font-face {
82
- font-family: RedHatMono;
11
+ font-family: RedHatTextVF;
83
12
  font-style: italic;
84
- font-weight: 400;
85
- src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMono-Italic.woff2") format("woff2");
13
+ font-weight: 400 500;
14
+ src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
86
15
  font-display: fallback;
87
16
  }
88
17
 
89
- // Variable fonts
90
18
  @font-face {
91
19
  font-family: RedHatDisplayVF;
92
20
  font-style: normal;
@@ -103,22 +31,6 @@
103
31
  font-display: fallback;
104
32
  }
105
33
 
106
- @font-face {
107
- font-family: RedHatTextVF;
108
- font-style: normal;
109
- font-weight: 400 500;
110
- src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
111
- font-display: fallback;
112
- }
113
-
114
- @font-face {
115
- font-family: RedHatTextVF;
116
- font-style: italic;
117
- font-weight: 400 500;
118
- src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
119
- font-display: fallback;
120
- }
121
-
122
34
  @font-face {
123
35
  font-family: RedHatMonoVF;
124
36
  font-style: normal;
@@ -1,299 +1,14 @@
1
- :where(:root) {
2
- // Colors
3
- // Global palette
4
- --#{$pf-global}--palette--black-100: #{$pf-v6-color-black-100};
5
- --#{$pf-global}--palette--black-150: #{$pf-v6-color-black-150};
6
- --#{$pf-global}--palette--black-200: #{$pf-v6-color-black-200};
7
- --#{$pf-global}--palette--black-300: #{$pf-v6-color-black-300};
8
- --#{$pf-global}--palette--black-400: #{$pf-v6-color-black-400};
9
- --#{$pf-global}--palette--black-500: #{$pf-v6-color-black-500};
10
- --#{$pf-global}--palette--black-600: #{$pf-v6-color-black-600};
11
- --#{$pf-global}--palette--black-700: #{$pf-v6-color-black-700};
12
- --#{$pf-global}--palette--black-800: #{$pf-v6-color-black-800};
13
- --#{$pf-global}--palette--black-850: #{$pf-v6-color-black-850};
14
- --#{$pf-global}--palette--black-900: #{$pf-v6-color-black-900};
15
- --#{$pf-global}--palette--black-1000: #{$pf-v6-color-black-1000};
16
- --#{$pf-global}--palette--blue-50: #{$pf-v6-color-blue-50};
17
- --#{$pf-global}--palette--blue-100: #{$pf-v6-color-blue-100};
18
- --#{$pf-global}--palette--blue-200: #{$pf-v6-color-blue-200};
19
- --#{$pf-global}--palette--blue-300: #{$pf-v6-color-blue-300};
20
- --#{$pf-global}--palette--blue-400: #{$pf-v6-color-blue-400};
21
- --#{$pf-global}--palette--blue-500: #{$pf-v6-color-blue-500};
22
- --#{$pf-global}--palette--blue-600: #{$pf-v6-color-blue-600};
23
- --#{$pf-global}--palette--blue-700: #{$pf-v6-color-blue-700};
24
- --#{$pf-global}--palette--cyan-50: #{$pf-v6-color-cyan-50};
25
- --#{$pf-global}--palette--cyan-100: #{$pf-v6-color-cyan-100};
26
- --#{$pf-global}--palette--cyan-200: #{$pf-v6-color-cyan-200};
27
- --#{$pf-global}--palette--cyan-300: #{$pf-v6-color-cyan-300};
28
- --#{$pf-global}--palette--cyan-400: #{$pf-v6-color-cyan-400};
29
- --#{$pf-global}--palette--cyan-500: #{$pf-v6-color-cyan-500};
30
- --#{$pf-global}--palette--cyan-600: #{$pf-v6-color-cyan-600};
31
- --#{$pf-global}--palette--cyan-700: #{$pf-v6-color-cyan-700};
32
- --#{$pf-global}--palette--gold-50: #{$pf-v6-color-gold-50};
33
- --#{$pf-global}--palette--gold-100: #{$pf-v6-color-gold-100};
34
- --#{$pf-global}--palette--gold-200: #{$pf-v6-color-gold-200};
35
- --#{$pf-global}--palette--gold-300: #{$pf-v6-color-gold-300};
36
- --#{$pf-global}--palette--gold-400: #{$pf-v6-color-gold-400};
37
- --#{$pf-global}--palette--gold-500: #{$pf-v6-color-gold-500};
38
- --#{$pf-global}--palette--gold-600: #{$pf-v6-color-gold-600};
39
- --#{$pf-global}--palette--gold-700: #{$pf-v6-color-gold-700};
40
- --#{$pf-global}--palette--green-50: #{$pf-v6-color-green-50};
41
- --#{$pf-global}--palette--green-100: #{$pf-v6-color-green-100};
42
- --#{$pf-global}--palette--green-200: #{$pf-v6-color-green-200};
43
- --#{$pf-global}--palette--green-300: #{$pf-v6-color-green-300};
44
- --#{$pf-global}--palette--green-400: #{$pf-v6-color-green-400};
45
- --#{$pf-global}--palette--green-500: #{$pf-v6-color-green-500};
46
- --#{$pf-global}--palette--green-600: #{$pf-v6-color-green-600};
47
- --#{$pf-global}--palette--green-700: #{$pf-v6-color-green-700};
48
- --#{$pf-global}--palette--light-blue-100: #{$pf-v6-color-light-blue-100};
49
- --#{$pf-global}--palette--light-blue-200: #{$pf-v6-color-light-blue-200};
50
- --#{$pf-global}--palette--light-blue-300: #{$pf-v6-color-light-blue-300};
51
- --#{$pf-global}--palette--light-blue-400: #{$pf-v6-color-light-blue-400};
52
- --#{$pf-global}--palette--light-blue-500: #{$pf-v6-color-light-blue-500};
53
- --#{$pf-global}--palette--light-blue-600: #{$pf-v6-color-light-blue-600};
54
- --#{$pf-global}--palette--light-blue-700: #{$pf-v6-color-light-blue-700};
55
- --#{$pf-global}--palette--light-green-100: #{$pf-v6-color-light-green-100};
56
- --#{$pf-global}--palette--light-green-200: #{$pf-v6-color-light-green-200};
57
- --#{$pf-global}--palette--light-green-300: #{$pf-v6-color-light-green-300};
58
- --#{$pf-global}--palette--light-green-400: #{$pf-v6-color-light-green-400};
59
- --#{$pf-global}--palette--light-green-500: #{$pf-v6-color-light-green-500};
60
- --#{$pf-global}--palette--light-green-600: #{$pf-v6-color-light-green-600};
61
- --#{$pf-global}--palette--light-green-700: #{$pf-v6-color-light-green-700};
62
- --#{$pf-global}--palette--orange-50: #{$pf-v6-color-orange-50};
63
- --#{$pf-global}--palette--orange-100: #{$pf-v6-color-orange-100};
64
- --#{$pf-global}--palette--orange-200: #{$pf-v6-color-orange-200};
65
- --#{$pf-global}--palette--orange-300: #{$pf-v6-color-orange-300};
66
- --#{$pf-global}--palette--orange-400: #{$pf-v6-color-orange-400};
67
- --#{$pf-global}--palette--orange-500: #{$pf-v6-color-orange-500};
68
- --#{$pf-global}--palette--orange-600: #{$pf-v6-color-orange-600};
69
- --#{$pf-global}--palette--orange-700: #{$pf-v6-color-orange-700};
70
- --#{$pf-global}--palette--purple-50: #{$pf-v6-color-purple-50};
71
- --#{$pf-global}--palette--purple-100: #{$pf-v6-color-purple-100};
72
- --#{$pf-global}--palette--purple-200: #{$pf-v6-color-purple-200};
73
- --#{$pf-global}--palette--purple-300: #{$pf-v6-color-purple-300};
74
- --#{$pf-global}--palette--purple-400: #{$pf-v6-color-purple-400};
75
- --#{$pf-global}--palette--purple-500: #{$pf-v6-color-purple-500};
76
- --#{$pf-global}--palette--purple-600: #{$pf-v6-color-purple-600};
77
- --#{$pf-global}--palette--purple-700: #{$pf-v6-color-purple-700};
78
- --#{$pf-global}--palette--red-50: #{$pf-v6-color-red-50};
79
- --#{$pf-global}--palette--red-100: #{$pf-v6-color-red-100};
80
- --#{$pf-global}--palette--red-200: #{$pf-v6-color-red-200};
81
- --#{$pf-global}--palette--red-300: #{$pf-v6-color-red-300};
82
- --#{$pf-global}--palette--red-400: #{$pf-v6-color-red-400};
83
- --#{$pf-global}--palette--red-500: #{$pf-v6-color-red-500};
84
- --#{$pf-global}--palette--white: #{$pf-v6-color-white};
85
-
86
- // Background color
87
- --#{$pf-global}--BackgroundColor--100: #{$pf-v6-global--BackgroundColor--100};
88
- --#{$pf-global}--BackgroundColor--150: #{$pf-v6-global--BackgroundColor--150};
89
- --#{$pf-global}--BackgroundColor--200: #{$pf-v6-global--BackgroundColor--200};
90
- --#{$pf-global}--BackgroundColor--light-100: #{$pf-v6-global--BackgroundColor--light-100};
91
- --#{$pf-global}--BackgroundColor--light-200: #{$pf-v6-global--BackgroundColor--light-200};
92
- --#{$pf-global}--BackgroundColor--light-300: #{$pf-v6-global--BackgroundColor--light-300};
93
- --#{$pf-global}--BackgroundColor--dark-100: #{$pf-v6-global--BackgroundColor--dark-100};
94
- --#{$pf-global}--BackgroundColor--dark-200: #{$pf-v6-global--BackgroundColor--dark-200};
95
- --#{$pf-global}--BackgroundColor--dark-300: #{$pf-v6-global--BackgroundColor--dark-300};
96
- --#{$pf-global}--BackgroundColor--dark-400: #{$pf-v6-global--BackgroundColor--dark-400};
97
- --#{$pf-global}--BackgroundColor--dark-transparent-100: #{$pf-v6-global--BackgroundColor--dark-transparent-100};
98
- --#{$pf-global}--BackgroundColor--dark-transparent-200: #{$pf-v6-global--BackgroundColor--dark-transparent-200};
99
-
100
- // Text color
101
- --#{$pf-global}--Color--100: #{$pf-v6-global--Color--100};
102
- --#{$pf-global}--Color--200: #{$pf-v6-global--Color--200};
103
- --#{$pf-global}--Color--300: #{$pf-v6-global--Color--300};
104
- --#{$pf-global}--Color--400: #{$pf-v6-global--Color--400};
105
- --#{$pf-global}--Color--light-100: #{$pf-v6-global--Color--light-100};
106
- --#{$pf-global}--Color--light-200: #{$pf-v6-global--Color--light-200};
107
- --#{$pf-global}--Color--light-300: #{$pf-v6-global--Color--light-300};
108
- --#{$pf-global}--Color--dark-100: #{$pf-v6-global--Color--dark-100};
109
- --#{$pf-global}--Color--dark-200: #{$pf-v6-global--Color--dark-200};
110
-
111
- // States color
112
- --#{$pf-global}--active-color--100: #{$pf-v6-global--active-color--100};
113
- --#{$pf-global}--active-color--200: #{$pf-v6-global--active-color--200};
114
- --#{$pf-global}--active-color--300: #{$pf-v6-global--active-color--300};
115
- --#{$pf-global}--active-color--400: #{$pf-v6-global--active-color--400};
116
- --#{$pf-global}--disabled-color--100: #{$pf-v6-global--disabled-color--100};
117
- --#{$pf-global}--disabled-color--200: #{$pf-v6-global--disabled-color--200};
118
- --#{$pf-global}--disabled-color--300: #{$pf-v6-global--disabled-color--300};
119
-
120
- // Theme color
121
- --#{$pf-global}--primary-color--100: #{$pf-v6-global--primary-color--100};
122
- --#{$pf-global}--primary-color--200: #{$pf-v6-global--primary-color--200};
123
- --#{$pf-global}--primary-color--light-100: #{$pf-v6-global--primary-color--light-100};
124
- --#{$pf-global}--primary-color--dark-100: #{$pf-v6-global--primary-color--dark-100};
125
- --#{$pf-global}--secondary-color--100: #{$pf-v6-global--secondary-color--100};
126
- --#{$pf-global}--custom-color--100: #{$pf-v6-global--custom-color--100};
127
- --#{$pf-global}--custom-color--200: #{$pf-v6-global--custom-color--200};
128
- --#{$pf-global}--custom-color--300: #{$pf-v6-global--custom-color--300};
129
- --#{$pf-global}--success-color--100: #{$pf-v6-global--success-color--100};
130
- --#{$pf-global}--success-color--200: #{$pf-v6-global--success-color--200};
131
- --#{$pf-global}--info-color--100: #{$pf-v6-global--info-color--100};
132
- --#{$pf-global}--info-color--200: #{$pf-v6-global--info-color--200};
133
- --#{$pf-global}--warning-color--100: #{$pf-v6-global--warning-color--100};
134
- --#{$pf-global}--warning-color--200: #{$pf-v6-global--warning-color--200};
135
- --#{$pf-global}--danger-color--100: #{$pf-v6-global--danger-color--100};
136
- --#{$pf-global}--danger-color--200: #{$pf-v6-global--danger-color--200};
137
- --#{$pf-global}--danger-color--300: #{$pf-v6-global--danger-color--300};
138
-
139
- // Shadows
140
- --#{$pf-global}--BoxShadow--sm: #{$pf-v6-global--BoxShadow--sm};
141
- --#{$pf-global}--BoxShadow--sm-top: #{$pf-v6-global--BoxShadow--sm-top};
142
- --#{$pf-global}--BoxShadow--sm-right: #{$pf-v6-global--BoxShadow--sm-right};
143
- --#{$pf-global}--BoxShadow--sm-bottom: #{$pf-v6-global--BoxShadow--sm-bottom};
144
- --#{$pf-global}--BoxShadow--sm-left: #{$pf-v6-global--BoxShadow--sm-left};
145
- --#{$pf-global}--BoxShadow--md: #{$pf-v6-global--BoxShadow--md};
146
- --#{$pf-global}--BoxShadow--md-top: #{$pf-v6-global--BoxShadow--md-top};
147
- --#{$pf-global}--BoxShadow--md-right: #{$pf-v6-global--BoxShadow--md-right};
148
- --#{$pf-global}--BoxShadow--md-bottom: #{$pf-v6-global--BoxShadow--md-bottom};
149
- --#{$pf-global}--BoxShadow--md-left: #{$pf-v6-global--BoxShadow--md-left};
150
- --#{$pf-global}--BoxShadow--lg: #{$pf-v6-global--BoxShadow--lg};
151
- --#{$pf-global}--BoxShadow--lg-top: #{$pf-v6-global--BoxShadow--lg-top};
152
- --#{$pf-global}--BoxShadow--lg-right: #{$pf-v6-global--BoxShadow--lg-right};
153
- --#{$pf-global}--BoxShadow--lg-bottom: #{$pf-v6-global--BoxShadow--lg-bottom};
154
- --#{$pf-global}--BoxShadow--lg-left: #{$pf-v6-global--BoxShadow--lg-left};
155
- --#{$pf-global}--BoxShadow--xl: #{$pf-v6-global--BoxShadow--xl};
156
- --#{$pf-global}--BoxShadow--xl-top: #{$pf-v6-global--BoxShadow--xl-top};
157
- --#{$pf-global}--BoxShadow--xl-right: #{$pf-v6-global--BoxShadow--xl-right};
158
- --#{$pf-global}--BoxShadow--xl-bottom: #{$pf-v6-global--BoxShadow--xl-bottom};
159
- --#{$pf-global}--BoxShadow--xl-left: #{$pf-v6-global--BoxShadow--xl-left};
160
- --#{$pf-global}--BoxShadow--inset: #{$pf-v6-global--BoxShadow--inset};
161
-
162
- // Fontpath
163
- --#{$pf-global}--font-path: "#{$pf-v6-global--font-path}";
164
-
165
- // FontIconPath
166
- --#{$pf-global}--fonticon-path: "#{$pf-v6-global--fonticon-path}";
167
-
168
- // Spacers
169
- --#{$pf-global}--spacer--xs: #{$pf-v6-global--spacer--xs};
170
- --#{$pf-global}--spacer--sm: #{$pf-v6-global--spacer--sm};
171
- --#{$pf-global}--spacer--md: #{$pf-v6-global--spacer--md};
172
- --#{$pf-global}--spacer--lg: #{$pf-v6-global--spacer--lg};
173
- --#{$pf-global}--spacer--xl: #{$pf-v6-global--spacer--xl};
174
- --#{$pf-global}--spacer--2xl: #{$pf-v6-global--spacer--2xl};
175
- --#{$pf-global}--spacer--3xl: #{$pf-v6-global--spacer--3xl};
176
- --#{$pf-global}--spacer--4xl: #{$pf-v6-global--spacer--4xl};
177
-
178
- // Form spacer
179
- --#{$pf-global}--spacer--form-element: #{$pf-v6-global--spacer--form-element};
180
-
181
- // Gutter
182
- --#{$pf-global}--gutter: #{$pf-v6-global--gutter};
183
- --#{$pf-global}--gutter--md: #{$pf-v6-global--gutter--md};
184
-
185
- // Z-Index
186
- --pf-t--global--z-index--xs: #{$pf-v6-global--ZIndex--xs};
187
- --pf-t--global--z-index--sm: #{$pf-v6-global--ZIndex--sm};
188
- --pf-t--global--z-index--md: #{$pf-v6-global--ZIndex--md};
189
- --pf-t--global--z-index--lg: #{$pf-v6-global--ZIndex--lg};
190
- --pf-t--global--z-index--xl: #{$pf-v6-global--ZIndex--xl};
191
- --pf-t--global--z-index--2xl: #{$pf-v6-global--ZIndex--2xl};
192
-
193
- // Grid breakpoints
194
- --#{$pf-global}--breakpoint--xs: #{$pf-v6-global--breakpoint--xs};
195
- --#{$pf-global}--breakpoint--sm: #{$pf-v6-global--breakpoint--sm};
196
- --#{$pf-global}--breakpoint--md: #{$pf-v6-global--breakpoint--md};
197
- --#{$pf-global}--breakpoint--lg: #{$pf-v6-global--breakpoint--lg};
198
- --#{$pf-global}--breakpoint--xl: #{$pf-v6-global--breakpoint--xl};
199
- --#{$pf-global}--breakpoint--2xl: #{$pf-v6-global--breakpoint--2xl};
200
-
201
- // Vertical breakpoints
202
- --#{$pf-global}--height-breakpoint--sm: #{$pf-v6-global--height-breakpoint--sm};
203
- --#{$pf-global}--height-breakpoint--md: #{$pf-v6-global--height-breakpoint--md};
204
- --#{$pf-global}--height-breakpoint--lg: #{$pf-v6-global--height-breakpoint--lg};
205
- --#{$pf-global}--height-breakpoint--xl: #{$pf-v6-global--height-breakpoint--xl};
206
- --#{$pf-global}--height-breakpoint--2xl: #{$pf-v6-global--height-breakpoint--2xl};
207
-
208
- // Links
209
- --#{$pf-global}--link--Color: #{$pf-v6-global--link--Color};
210
- --#{$pf-global}--link--Color--hover: #{$pf-v6-global--link--Color--hover};
211
- --#{$pf-global}--link--Color--light: #{$pf-v6-global--link--Color--light};
212
- --#{$pf-global}--link--Color--light--hover: #{$pf-v6-global--link--Color--light--hover};
213
- --#{$pf-global}--link--Color--dark: #{$pf-v6-global--link--Color--dark};
214
- --#{$pf-global}--link--Color--dark--hover: #{$pf-v6-global--link--Color--dark--hover};
215
- --#{$pf-global}--link--Color--visited: #{$pf-v6-global--link--Color--visited};
216
- --#{$pf-global}--link--TextDecoration: #{$pf-v6-global--link--TextDecoration};
217
- --#{$pf-global}--link--TextDecoration--hover: #{$pf-v6-global--link--TextDecoration--hover};
218
-
219
- // Borders
220
- --#{$pf-global}--BorderWidth--sm: #{$pf-v6-global--BorderWidth--sm};
221
- --#{$pf-global}--BorderWidth--md: #{$pf-v6-global--BorderWidth--md};
222
- --#{$pf-global}--BorderWidth--lg: #{$pf-v6-global--BorderWidth--lg};
223
- --#{$pf-global}--BorderWidth--xl: #{$pf-v6-global--BorderWidth--xl};
224
- --#{$pf-global}--BorderColor--100: #{$pf-v6-global--BorderColor--100};
225
- --#{$pf-global}--BorderColor--200: #{$pf-v6-global--BorderColor--200};
226
- --#{$pf-global}--BorderColor--300: #{$pf-v6-global--BorderColor--300};
227
- --#{$pf-global}--BorderColor--dark-100: #{$pf-v6-global--BorderColor--dark-100};
228
- --#{$pf-global}--BorderColor--light-100: #{$pf-v6-global--BorderColor--light-100};
229
- --#{$pf-global}--BorderRadius--sm: #{$pf-v6-global--BorderRadius--sm};
230
- --#{$pf-global}--BorderRadius--lg: #{$pf-v6-global--BorderRadius--lg};
231
-
232
- // Icons
233
- --#{$pf-global}--icon--Color--light: #{$pf-v6-global--icon--Color--light};
234
- --#{$pf-global}--icon--Color--dark: #{$pf-v6-global--icon--Color--dark};
235
- --#{$pf-global}--icon--Color--light--light: #{$pf-v6-global--icon--Color--light--light};
236
- --#{$pf-global}--icon--Color--dark--light: #{$pf-v6-global--icon--Color--dark--light};
237
- --#{$pf-global}--icon--Color--light--dark: #{$pf-v6-global--icon--Color--light--dark};
238
- --#{$pf-global}--icon--Color--dark--dark: #{$pf-v6-global--icon--Color--dark--dark};
239
- --#{$pf-global}--icon--FontSize--sm: #{$pf-v6-global--icon--FontSize--sm};
240
- --#{$pf-global}--icon--FontSize--md: #{$pf-v6-global--icon--FontSize--md};
241
- --#{$pf-global}--icon--FontSize--lg: #{$pf-v6-global--icon--FontSize--lg};
242
- --#{$pf-global}--icon--FontSize--xl: #{$pf-v6-global--icon--FontSize--xl};
243
-
244
- // Fonts
245
-
246
- // Font family
247
- --#{$pf-global}--FontFamily--text: #{$pf-v6-global--FontFamily--text};
248
- --#{$pf-global}--FontFamily--heading: #{$pf-v6-global--FontFamily--heading};
249
- --#{$pf-global}--FontFamily--monospace: #{$pf-v6-global--FontFamily--monospace};
250
- --#{$pf-global}--FontFamily--text--vf: #{$pf-v6-global--FontFamily--text--vf};
251
- --#{$pf-global}--FontFamily--heading--vf: #{$pf-v6-global--FontFamily--heading--vf};
252
- --#{$pf-global}--FontFamily--monospace--vf: #{$pf-v6-global--FontFamily--monospace--vf};
253
-
254
- // Font size
255
- --#{$pf-global}--FontSize--4xl: #{$pf-v6-global--FontSize--4xl};
256
- --#{$pf-global}--FontSize--3xl: #{$pf-v6-global--FontSize--3xl};
257
- --#{$pf-global}--FontSize--2xl: #{$pf-v6-global--FontSize--2xl};
258
- --#{$pf-global}--FontSize--xl: #{$pf-v6-global--FontSize--xl};
259
- --#{$pf-global}--FontSize--lg: #{$pf-v6-global--FontSize--lg};
260
- --#{$pf-global}--FontSize--md: #{$pf-v6-global--FontSize--md};
261
- --#{$pf-global}--FontSize--sm: #{$pf-v6-global--FontSize--sm};
262
- --#{$pf-global}--FontSize--xs: #{$pf-v6-global--FontSize--xs};
263
-
264
- // Font weight
265
- --#{$pf-global}--FontWeight--normal: #{$pf-v6-global--FontWeight--normal};
266
- --#{$pf-global}--FontWeight--bold: #{$pf-v6-global--FontWeight--bold};
267
-
268
- // Line height
269
- --#{$pf-global}--LineHeight--sm: #{$pf-v6-global--LineHeight--sm};
270
- --#{$pf-global}--LineHeight--md: #{$pf-v6-global--LineHeight--md};
271
-
272
- // List
273
- --#{$pf-global}--ListStyle: #{$pf-v6-global--ListStyle};
274
- --pf-t--global--transition: #{$pf-v6-global--Transition};
275
- --pf-t--global--transition--timing-function: #{$pf-v6-global--TimingFunction};
276
- --pf-t--global--transition--duration: #{$pf-v6-global--TransitionDuration};
277
-
278
- // Arrow size
279
- --#{$pf-global}--arrow--width: #{$pf-v6-global--arrow--width};
280
- --#{$pf-global}--arrow--width-lg: #{$pf-v6-global--arrow--width-lg};
281
-
282
- // A11y
283
- --#{$pf-global}--target-size--MinWidth: #{$pf-v6-global--target-size--MinWidth};
284
- --#{$pf-global}--target-size--MinHeight: #{$pf-v6-global--target-size--MinHeight};
1
+ // stylelint-disable no-invalid-position-at-import-rule
2
+ @import "./tokens/workspace-overrides";
3
+ @import "./tokens/tokens-font";
4
+ @import "./tokens/tokens-palette";
5
+ @import "./tokens/tokens-default";
6
+ @import "./tokens/tokens-dark";
285
7
 
286
- // RTL
8
+ :where(:root) {
287
9
  @include pf-v6-set-inverse(false);
288
10
  }
289
11
 
290
12
  @include pf-v6-rtl {
291
13
  @include pf-v6-set-inverse;
292
14
  }
293
-
294
- // stylelint-disable no-invalid-position-at-import-rule
295
- @import "./tokens/workspace-overrides";
296
- @import "./tokens/tokens-font";
297
- @import "./tokens/tokens-palette";
298
- @import "./tokens/tokens-default";
299
- @import "./tokens/tokens-dark";
@@ -1,71 +1,15 @@
1
1
  @font-face {
2
- font-family: RedHatDisplay;
3
- font-style: normal;
4
- font-weight: 400;
5
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
6
- font-display: fallback;
7
- }
8
- @font-face {
9
- font-family: RedHatDisplay;
10
- font-style: italic;
11
- font-weight: 400;
12
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2") format("woff2");
13
- font-display: fallback;
14
- }
15
- @font-face {
16
- font-family: RedHatDisplay;
17
- font-style: normal;
18
- font-weight: 700;
19
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
20
- font-display: fallback;
21
- }
22
- @font-face {
23
- font-family: RedHatDisplay;
24
- font-style: italic;
25
- font-weight: 700;
26
- src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
27
- font-display: fallback;
28
- }
29
- @font-face {
30
- font-family: RedHatText;
31
- font-style: normal;
32
- font-weight: 400;
33
- src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
34
- font-display: fallback;
35
- }
36
- @font-face {
37
- font-family: RedHatText;
38
- font-style: italic;
39
- font-weight: 400;
40
- src: url("./assets/fonts/RedHatText/RedHatText-Italic.woff2") format("woff2");
41
- font-display: fallback;
42
- }
43
- @font-face {
44
- font-family: RedHatText;
45
- font-style: normal;
46
- font-weight: 700;
47
- src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
48
- font-display: fallback;
49
- }
50
- @font-face {
51
- font-family: RedHatText;
52
- font-style: italic;
53
- font-weight: 700;
54
- src: url("./assets/fonts/RedHatText/RedHatText-MediumItalic.woff2") format("woff2");
55
- font-display: fallback;
56
- }
57
- @font-face {
58
- font-family: RedHatMono;
2
+ font-family: RedHatTextVF;
59
3
  font-style: normal;
60
- font-weight: 400;
61
- src: url("./assets/fonts/RedHatMono/RedHatMono-Regular.woff2") format("woff2");
4
+ font-weight: 400 500;
5
+ src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
62
6
  font-display: fallback;
63
7
  }
64
8
  @font-face {
65
- font-family: RedHatMono;
9
+ font-family: RedHatTextVF;
66
10
  font-style: italic;
67
- font-weight: 400;
68
- src: url("./assets/fonts/RedHatMono/RedHatMono-Italic.woff2") format("woff2");
11
+ font-weight: 400 500;
12
+ src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
69
13
  font-display: fallback;
70
14
  }
71
15
  @font-face {
@@ -82,20 +26,6 @@
82
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
83
27
  font-display: fallback;
84
28
  }
85
- @font-face {
86
- font-family: RedHatTextVF;
87
- font-style: normal;
88
- font-weight: 400 500;
89
- src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
90
- font-display: fallback;
91
- }
92
- @font-face {
93
- font-family: RedHatTextVF;
94
- font-style: italic;
95
- font-weight: 400 500;
96
- src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
97
- font-display: fallback;
98
- }
99
29
  @font-face {
100
30
  font-family: RedHatMonoVF;
101
31
  font-style: normal;