@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.21

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 (110) hide show
  1. package/assets/pficon/pficon.scss +1 -1
  2. package/base/normalize.scss +2 -2
  3. package/base/patternfly-pf-icons.css +1 -1
  4. package/components/Alert/alert-group.css +50 -7
  5. package/components/Alert/alert-group.scss +114 -28
  6. package/components/Banner/banner.css +2 -2
  7. package/components/Banner/banner.scss +2 -2
  8. package/components/Breadcrumb/breadcrumb.css +3 -2
  9. package/components/Breadcrumb/breadcrumb.scss +3 -2
  10. package/components/Button/button.css +63 -2
  11. package/components/Button/button.scss +74 -2
  12. package/components/Card/card.css +17 -0
  13. package/components/Card/card.scss +22 -0
  14. package/components/ClipboardCopy/clipboard-copy.css +3 -0
  15. package/components/ClipboardCopy/clipboard-copy.scss +4 -0
  16. package/components/Content/content.css +2 -1
  17. package/components/Content/content.scss +2 -1
  18. package/components/DescriptionList/description-list.css +3 -2
  19. package/components/DescriptionList/description-list.scss +3 -2
  20. package/components/Drawer/drawer.css +3 -1
  21. package/components/Drawer/drawer.scss +3 -1
  22. package/components/Form/form.css +3 -6
  23. package/components/Form/form.scss +3 -7
  24. package/components/HelperText/helper-text.css +13 -0
  25. package/components/HelperText/helper-text.scss +16 -0
  26. package/components/JumpLinks/jump-links.css +1 -1
  27. package/components/JumpLinks/jump-links.scss +1 -1
  28. package/components/Label/label.css +3 -2
  29. package/components/Label/label.scss +3 -2
  30. package/components/Masthead/masthead.css +1 -1
  31. package/components/Masthead/masthead.scss +1 -1
  32. package/components/Menu/menu.css +15 -7
  33. package/components/Menu/menu.scss +14 -5
  34. package/components/MenuToggle/menu-toggle.css +41 -0
  35. package/components/MenuToggle/menu-toggle.scss +49 -0
  36. package/components/Nav/nav.css +46 -13
  37. package/components/Nav/nav.scss +57 -17
  38. package/components/Page/page.css +16 -1
  39. package/components/Page/page.scss +17 -3
  40. package/components/Popover/popover.css +2 -0
  41. package/components/Popover/popover.scss +2 -0
  42. package/components/Progress/progress.css +3 -0
  43. package/components/Progress/progress.scss +3 -0
  44. package/components/ProgressStepper/progress-stepper.css +2 -1
  45. package/components/ProgressStepper/progress-stepper.scss +2 -1
  46. package/components/SimpleList/simple-list.css +2 -2
  47. package/components/SimpleList/simple-list.scss +2 -2
  48. package/components/Switch/switch.css +3 -1
  49. package/components/Switch/switch.scss +4 -2
  50. package/components/Table/table.css +3 -3
  51. package/components/Table/table.scss +3 -2
  52. package/components/Tabs/tabs.css +1 -1
  53. package/components/Tabs/tabs.scss +1 -1
  54. package/components/Timestamp/timestamp.css +2 -1
  55. package/components/Timestamp/timestamp.scss +2 -1
  56. package/components/ToggleGroup/toggle-group.css +1 -1
  57. package/components/ToggleGroup/toggle-group.scss +1 -1
  58. package/components/Toolbar/toolbar.css +6 -1
  59. package/components/Toolbar/toolbar.scss +7 -1
  60. package/components/Wizard/wizard.css +1 -1
  61. package/components/Wizard/wizard.scss +1 -1
  62. package/components/_index.css +310 -60
  63. package/docs/components/Alert/examples/Alert.md +6 -0
  64. package/docs/components/Avatar/examples/Avatar.md +4 -4
  65. package/docs/components/Brand/examples/Brand.md +2 -2
  66. package/docs/components/Button/examples/Button.md +29 -0
  67. package/docs/components/Card/examples/Card.md +30 -0
  68. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  69. package/docs/components/DataList/examples/DataList.md +3 -3
  70. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  71. package/docs/components/Divider/examples/Divider.md +2 -2
  72. package/docs/components/Drawer/examples/Drawer.md +3 -3
  73. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  74. package/docs/components/Masthead/examples/masthead.md +1 -1
  75. package/docs/components/Menu/examples/Menu.md +8 -8
  76. package/docs/components/Nav/examples/Navigation.md +3 -0
  77. package/docs/components/Page/examples/Page.md +2 -2
  78. package/docs/components/Pagination/examples/Pagination.md +3 -3
  79. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  80. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  81. package/docs/components/Table/examples/Table.md +17 -29
  82. package/docs/components/Tabs/examples/Tabs.md +148 -6
  83. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  84. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  85. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  86. package/docs/demos/Card/examples/Card.md +32 -24
  87. package/docs/demos/CardView/examples/CardView.md +2 -0
  88. package/docs/demos/Nav/examples/Nav.md +2 -0
  89. package/docs/layouts/Flex/examples/Flex.md +1 -1
  90. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  91. package/docs/layouts/Grid/examples/Grid.md +4 -4
  92. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  93. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  94. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  95. package/docs/utilities/Display/examples/Display.md +1 -1
  96. package/docs/utilities/Flex/examples/Flex.md +1 -1
  97. package/docs/utilities/Float/examples/Float.md +1 -1
  98. package/docs/utilities/Sizing/examples/Sizing.md +6 -6
  99. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  100. package/docs/utilities/Text/examples/Text.md +1 -1
  101. package/package.json +2 -2
  102. package/patternfly-base-no-globals.css +1 -1
  103. package/patternfly-base.css +3 -3
  104. package/patternfly-charts.css +83 -0
  105. package/patternfly-charts.scss +126 -0
  106. package/patternfly-no-globals.css +311 -61
  107. package/patternfly.css +313 -63
  108. package/patternfly.min.css +1 -1
  109. package/patternfly.min.css.map +1 -1
  110. package/docs/components/TabContent/examples/TabContent.md +0 -153
@@ -370,7 +370,7 @@ section: utility-classes
370
370
 
371
371
  ### Overview
372
372
 
373
- For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-flex-row-on-lg**
373
+ For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-flex-row-on-lg`
374
374
 
375
375
  <!-- ## Accessibility
376
376
 
@@ -18,7 +18,7 @@ section: utility-classes
18
18
 
19
19
  ### Overview
20
20
 
21
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-float-inline-start-on-lg**
21
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-float-inline-start-on-lg`
22
22
 
23
23
  ### Usage
24
24
 
@@ -22,7 +22,7 @@ section: utility-classes
22
22
 
23
23
  ### Usage
24
24
 
25
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-w-initial-on-lg**
25
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-initial-on-lg`
26
26
 
27
27
  | Class | Applied to | Outcome |
28
28
  | -- | -- | -- |
@@ -50,7 +50,7 @@ section: utility-classes
50
50
 
51
51
  ### Usage
52
52
 
53
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-w-25vw-on-lg**
53
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-25vw-on-lg`
54
54
 
55
55
  | Class | Applied to | Outcome |
56
56
  | -- | -- | -- |
@@ -90,7 +90,7 @@ section: utility-classes
90
90
 
91
91
  ### Usage
92
92
 
93
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-h-initial-on-lg**
93
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-initial-on-lg`
94
94
 
95
95
  | Class | Applied to | Outcome |
96
96
  | -- | -- | -- |
@@ -130,7 +130,7 @@ section: utility-classes
130
130
 
131
131
  ### Usage
132
132
 
133
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-h-25vh-on-lg**
133
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-25vh-on-lg`
134
134
 
135
135
  | Class | Applied to | Outcome |
136
136
  | -- | -- | -- |
@@ -188,7 +188,7 @@ section: utility-classes
188
188
  | `.pf-v6-u-min-width` | `*` | Sets min-width: `var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})`. |
189
189
  | `.pf-v6-u-max-width` | `*` | Sets min-width: `var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})`. |
190
190
 
191
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-width--MinWidth-on-lg**
191
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-width--MinWidth-on-lg`
192
192
 
193
193
  | Custom property | Applied to | Outcome |
194
194
  | -- | -- | -- |
@@ -242,7 +242,7 @@ section: utility-classes
242
242
  | `.pf-v6-u-min-height` | `*` | Sets min-height: `var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})`. |
243
243
  | `.pf-v6-u-max-height` | `*` | Sets max-height: `var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})`. |
244
244
 
245
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-v6-u-min-height--MinHeight-on-lg**
245
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-height--MinHeight-on-lg`
246
246
 
247
247
  | Custom property | Applied to | Outcome |
248
248
  | -- | -- | -- |
@@ -118,7 +118,7 @@ pf: 'test'
118
118
 
119
119
  ### Overview
120
120
 
121
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-m-sm-on-lg**
121
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-m-sm-on-lg`
122
122
 
123
123
  ### Margin properties
124
124
 
@@ -171,7 +171,7 @@ These text utilities can be used to modify text within the PatternFly framework.
171
171
 
172
172
  Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
173
173
 
174
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-font-size-xl-on-lg**
174
+ [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-font-size-xl-on-lg`
175
175
 
176
176
  ### Usage
177
177
 
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.2.0-prerelease.2",
4
+ "version": "6.2.0-prerelease.21",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.5.3",
50
+ "@patternfly/documentation-framework": "6.5.18",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.1.0",
53
53
  "@patternfly/react-core": "6.1.0",
@@ -5665,7 +5665,7 @@
5665
5665
  font-style: normal;
5666
5666
  font-variant: normal;
5667
5667
  font-weight: normal;
5668
- text-decoration: none;
5668
+ text-decoration-line: none;
5669
5669
  text-transform: none;
5670
5670
  }
5671
5671
 
@@ -117,12 +117,12 @@ pre) {
117
117
 
118
118
  :where(a) {
119
119
  color: var(--pf-t--global--text--color--link--default);
120
- text-decoration: var(--pf-t--global--text-decoration--link--line--default);
120
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
121
121
  }
122
122
 
123
123
  :where(a:hover, a:focus) {
124
124
  color: var(--pf-t--global--text--color--link--hover);
125
- text-decoration: var(--pf-t--global--text-decoration--link--line--hover);
125
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
126
126
  }
127
127
 
128
128
  :where(a,
@@ -5801,7 +5801,7 @@ button) {
5801
5801
  font-style: normal;
5802
5802
  font-variant: normal;
5803
5803
  font-weight: normal;
5804
- text-decoration: none;
5804
+ text-decoration-line: none;
5805
5805
  text-transform: none;
5806
5806
  }
5807
5807
 
@@ -661,4 +661,87 @@
661
661
  --pf-v6-chart-theme--multi-color-unordered--ColorScale--3300: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300);
662
662
  --pf-v6-chart-theme--multi-color-unordered--ColorScale--3400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400);
663
663
  --pf-v6-chart-theme--multi-color-unordered--ColorScale--3500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500);
664
+ }
665
+
666
+ :where(:root) {
667
+ --pf-v6-chart-echarts-global--axis--BoundaryGap: false;
668
+ --pf-v6-chart-echarts-global--axis--axis-label--Show: true;
669
+ --pf-v6-chart-echarts-global--axis--axis-line--Show: true;
670
+ --pf-v6-chart-echarts-global--axis--axis-line--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
671
+ --pf-v6-chart-echarts-global--axis--axis-tick--Show: true;
672
+ --pf-v6-chart-echarts-global--axis--axis-tick--item-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
673
+ --pf-v6-chart-echarts-global--axis--split-area--Show: false;
674
+ --pf-v6-chart-echarts-global--axis--split-area--area-style--Color: var(--pf-v6-chart-global--Fill--Color--white);
675
+ --pf-v6-chart-echarts-global--axis--split-line--Show: false;
676
+ --pf-v6-chart-echarts-global--label--Color: var(--pf-v6-chart-global--label--Fill);
677
+ --pf-v6-chart-echarts-BackgroundColor: transparent;
678
+ --pf-v6-chart-echarts-bar--item-style--BarBorderColor: var(--pf-v6-chart-global--Fill--Color--900);
679
+ --pf-v6-chart-echarts-bar--item-style--BarBorderWidth: 0;
680
+ --pf-v6-chart-echarts-boxplot--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
681
+ --pf-v6-chart-echarts-boxplot--item-style--BorderWidth: 0;
682
+ --pf-v6-chart-echarts-candlestick--item-style--BorderWidth: 1;
683
+ --pf-v6-chart-echarts-candlestick--item-style--negative--Color: var(--pf-v6-chart-global--Fill--Color--900);
684
+ --pf-v6-chart-echarts-candlestick--item-style--positive--Color: var(--pf-v6-chart-global--Fill--Color--white);
685
+ --pf-v6-chart-echarts-candlestick--item-style--negative--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
686
+ --pf-v6-chart-echarts-candlestick--item-style--positive--BorderColor: var(--pf-v6-chart-global--Fill--Color--white);
687
+ --pf-v6-chart-echarts-datazoom--HandleSize: 100%;
688
+ --pf-v6-chart-echarts-funnel--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
689
+ --pf-v6-chart-echarts-funnel--item-style--BorderWidth: 0;
690
+ --pf-v6-chart-echarts-gauge--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
691
+ --pf-v6-chart-echarts-gauge--item-style--BorderWidth: 0;
692
+ --pf-v6-chart-echarts-geo--emphasis--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--400);
693
+ --pf-v6-chart-echarts-geo--emphasis--item-style--BorderWidth: 1;
694
+ --pf-v6-chart-echarts-geo--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
695
+ --pf-v6-chart-echarts-geo--item-style--BorderWidth: 0.5;
696
+ --pf-v6-chart-echarts-graph--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
697
+ --pf-v6-chart-echarts-graph--item-style--BorderWidth: 0;
698
+ --pf-v6-chart-echarts-graph--line-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
699
+ --pf-v6-chart-echarts-graph--line-style--BorderWidth: 1;
700
+ --pf-v6-chart-echarts-graph--Smooth: false;
701
+ --pf-v6-chart-echarts-graph--SymbolSize: 4;
702
+ --pf-v6-chart-echarts-graph--Symbol: "square";
703
+ --pf-v6-chart-echarts-line--item-style--BorderWidth: 1;
704
+ --pf-v6-chart-echarts-line--line-style--BorderWidth: 2;
705
+ --pf-v6-chart-echarts-line--Smooth: false;
706
+ --pf-v6-chart-echarts-line--SymbolSize: 4;
707
+ --pf-v6-chart-echarts-line--Symbol: "square";
708
+ --pf-v6-chart-echarts-map--emphasis--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--400);
709
+ --pf-v6-chart-echarts-map--emphasis--item-style--BorderWidth: 1;
710
+ --pf-v6-chart-echarts-map--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
711
+ --pf-v6-chart-echarts-map--item-style--BorderWidth: 0.5;
712
+ --pf-v6-chart-echarts-parallel--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
713
+ --pf-v6-chart-echarts-parallel--item-style--BorderWidth: 0;
714
+ --pf-v6-chart-echarts-pie--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
715
+ --pf-v6-chart-echarts-pie--item-style--BorderWidth: 0;
716
+ --pf-v6-chart-echarts-sankey--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
717
+ --pf-v6-chart-echarts-sankey--item-style--BorderWidth: 0;
718
+ --pf-v6-chart-echarts-scatter--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
719
+ --pf-v6-chart-echarts-scatter--item-style--BorderWidth: 0;
720
+ --pf-v6-chart-echarts-skeleton--label--Color: transparent;
721
+ --pf-v6-chart-echarts-toolbox--emphasis--item-style--BorderColor: var(--pf-v6-chart-theme--blue--ColorScale--400);
722
+ --pf-v6-chart-echarts-toolbox--item-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--500);
723
+ --pf-v6-chart-echarts-tooltip--axis--pointer--cross-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
724
+ --pf-v6-chart-echarts-tooltip--axis--pointer--cross-style--Width: 1;
725
+ --pf-v6-chart-echarts-tooltip--axis--pointer--line-style--Color: var(--pf-v6-chart-global--Fill--Color--300);
726
+ --pf-v6-chart-echarts-tooltip--axis--pointer--line-style--Width: 1;
727
+ --pf-v6-chart-echarts-tooltip--backgroundColor: var(--pf-v6-chart-global--Fill--Color--900);
728
+ --pf-v6-chart-echarts-tooltip--text-Style--Color: var(--pf-v6-chart-global--Fill--Color--200);
729
+ --pf-v6-chart-echarts-timeline--emphasis--control-style--Color: var(--pf-v6-chart-global--Fill--Color--400);
730
+ --pf-v6-chart-echarts-timeline--emphasis--control-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--400);
731
+ --pf-v6-chart-echarts-timeline--emphasis--control-style--BorderWidth: 1;
732
+ --pf-v6-chart-echarts-timeline--emphasis--item-style--Color: var(--pf-v6-chart-global--Fill--Color--white);
733
+ --pf-v6-chart-echarts-timeline--checkpoint-style--Color: var(--pf-v6-chart-theme--blue--ColorScale--400);
734
+ --pf-v6-chart-echarts-timeline--checkpoint-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--white);
735
+ --pf-v6-chart-echarts-timeline--control-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
736
+ --pf-v6-chart-echarts-timeline--control-style--BorderColor: var(--pf-v6-chart-global--Fill--Color--900);
737
+ --pf-v6-chart-echarts-timeline--control-style--BorderWidth: 1;
738
+ --pf-v6-chart-echarts-timeline--item-style--BorderWidth: 1;
739
+ --pf-v6-chart-echarts-timeline--item-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
740
+ --pf-v6-chart-echarts-timeline--line-style--Color: var(--pf-v6-chart-global--Fill--Color--900);
741
+ --pf-v6-chart-echarts-timeline--line-style--Width: 2;
742
+ --pf-v6-chart-echarts-radar--item-style--BorderWidth: 1;
743
+ --pf-v6-chart-echarts-radar--line-style--BorderWidth: 2;
744
+ --pf-v6-chart-echarts-radar--Smooth: false;
745
+ --pf-v6-chart-echarts-radar--SymbolSize: 4;
746
+ --pf-v6-chart-echarts-radar--Symbol: "square";
664
747
  }
@@ -432,3 +432,129 @@ $chart: #{$pf-prefix} + 'chart';
432
432
  --#{$chart}-theme--multi-color-unordered--ColorScale--3400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400);
433
433
  --#{$chart}-theme--multi-color-unordered--ColorScale--3500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500);
434
434
  }
435
+
436
+ // ECharts styles
437
+ // stylelint-disable-next-line no-duplicate-selectors
438
+ :where(:root) {
439
+ // Global
440
+ --#{$chart}-echarts-global--axis--BoundaryGap: false;
441
+ --#{$chart}-echarts-global--axis--axis-label--Show: true;
442
+ --#{$chart}-echarts-global--axis--axis-line--Show: true;
443
+ --#{$chart}-echarts-global--axis--axis-line--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
444
+ --#{$chart}-echarts-global--axis--axis-tick--Show: true;
445
+ --#{$chart}-echarts-global--axis--axis-tick--item-style--Color: var(--#{$chart}-global--Fill--Color--300);
446
+ --#{$chart}-echarts-global--axis--split-area--Show: false;
447
+ --#{$chart}-echarts-global--axis--split-area--area-style--Color: var(--#{$chart}-global--Fill--Color--white);
448
+ --#{$chart}-echarts-global--axis--split-line--Show: false;
449
+ --#{$chart}-echarts-global--label--Color: var(--#{$chart}-global--label--Fill);
450
+
451
+ // Basic config
452
+ --#{$chart}-echarts-BackgroundColor: transparent;
453
+
454
+ // Bar chart
455
+ --#{$chart}-echarts-bar--item-style--BarBorderColor: var(--#{$chart}-global--Fill--Color--900);
456
+ --#{$chart}-echarts-bar--item-style--BarBorderWidth: 0;
457
+
458
+ // Boxplot
459
+ --#{$chart}-echarts-boxplot--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
460
+ --#{$chart}-echarts-boxplot--item-style--BorderWidth: 0;
461
+
462
+ // Candlestick
463
+ --#{$chart}-echarts-candlestick--item-style--BorderWidth: 1;
464
+ --#{$chart}-echarts-candlestick--item-style--negative--Color: var(--#{$chart}-global--Fill--Color--900);
465
+ --#{$chart}-echarts-candlestick--item-style--positive--Color: var(--#{$chart}-global--Fill--Color--white);
466
+ --#{$chart}-echarts-candlestick--item-style--negative--BorderColor: var(--#{$chart}-global--Fill--Color--900);
467
+ --#{$chart}-echarts-candlestick--item-style--positive--BorderColor: var(--#{$chart}-global--Fill--Color--white);
468
+
469
+ // DataZoom
470
+ --#{$chart}-echarts-datazoom--HandleSize: 100%;
471
+
472
+ // Funnel
473
+ --#{$chart}-echarts-funnel--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
474
+ --#{$chart}-echarts-funnel--item-style--BorderWidth: 0;
475
+
476
+ // Gauge
477
+ --#{$chart}-echarts-gauge--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
478
+ --#{$chart}-echarts-gauge--item-style--BorderWidth: 0;
479
+
480
+ // Geo
481
+ --#{$chart}-echarts-geo--emphasis--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--400);
482
+ --#{$chart}-echarts-geo--emphasis--item-style--BorderWidth: 1;
483
+ --#{$chart}-echarts-geo--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
484
+ --#{$chart}-echarts-geo--item-style--BorderWidth: 0.5;
485
+
486
+ // Graph
487
+ --#{$chart}-echarts-graph--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
488
+ --#{$chart}-echarts-graph--item-style--BorderWidth: 0;
489
+ --#{$chart}-echarts-graph--line-style--Color: var(--#{$chart}-global--Fill--Color--900);
490
+ --#{$chart}-echarts-graph--line-style--BorderWidth: 1;
491
+ --#{$chart}-echarts-graph--Smooth: false;
492
+ --#{$chart}-echarts-graph--SymbolSize: 4;
493
+ --#{$chart}-echarts-graph--Symbol: 'square';
494
+
495
+ // Line
496
+ --#{$chart}-echarts-line--item-style--BorderWidth: 1;
497
+ --#{$chart}-echarts-line--line-style--BorderWidth: 2;
498
+ --#{$chart}-echarts-line--Smooth: false;
499
+ --#{$chart}-echarts-line--SymbolSize: 4;
500
+ --#{$chart}-echarts-line--Symbol: 'square';
501
+
502
+ // Map
503
+ --#{$chart}-echarts-map--emphasis--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--400);
504
+ --#{$chart}-echarts-map--emphasis--item-style--BorderWidth: 1;
505
+ --#{$chart}-echarts-map--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
506
+ --#{$chart}-echarts-map--item-style--BorderWidth: 0.5;
507
+
508
+ // Parallel
509
+ --#{$chart}-echarts-parallel--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
510
+ --#{$chart}-echarts-parallel--item-style--BorderWidth: 0;
511
+
512
+ // Pie
513
+ --#{$chart}-echarts-pie--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
514
+ --#{$chart}-echarts-pie--item-style--BorderWidth: 0;
515
+
516
+ // Sankey
517
+ --#{$chart}-echarts-sankey--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
518
+ --#{$chart}-echarts-sankey--item-style--BorderWidth: 0;
519
+
520
+ // Scatter
521
+ --#{$chart}-echarts-scatter--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
522
+ --#{$chart}-echarts-scatter--item-style--BorderWidth: 0;
523
+
524
+ // Skeleton
525
+ --#{$chart}-echarts-skeleton--label--Color: transparent;
526
+
527
+ // Toolbox
528
+ --#{$chart}-echarts-toolbox--emphasis--item-style--BorderColor: var(--#{$chart}-theme--blue--ColorScale--400);
529
+ --#{$chart}-echarts-toolbox--item-style--BorderColor: var(--#{$chart}-global--Fill--Color--500);
530
+
531
+ // Tooltip
532
+ --#{$chart}-echarts-tooltip--axis--pointer--cross-style--Color: var(--#{$chart}-global--Fill--Color--300);
533
+ --#{$chart}-echarts-tooltip--axis--pointer--cross-style--Width: 1;
534
+ --#{$chart}-echarts-tooltip--axis--pointer--line-style--Color: var(--#{$chart}-global--Fill--Color--300);
535
+ --#{$chart}-echarts-tooltip--axis--pointer--line-style--Width: 1;
536
+ --#{$chart}-echarts-tooltip--backgroundColor: var(--#{$chart}-global--Fill--Color--900);
537
+ --#{$chart}-echarts-tooltip--text-Style--Color: var(--#{$chart}-global--Fill--Color--200);
538
+
539
+ // Timeline
540
+ --#{$chart}-echarts-timeline--emphasis--control-style--Color: var(--#{$chart}-global--Fill--Color--400);
541
+ --#{$chart}-echarts-timeline--emphasis--control-style--BorderColor: var(--#{$chart}-global--Fill--Color--400);
542
+ --#{$chart}-echarts-timeline--emphasis--control-style--BorderWidth: 1;
543
+ --#{$chart}-echarts-timeline--emphasis--item-style--Color: var(--#{$chart}-global--Fill--Color--white);
544
+ --#{$chart}-echarts-timeline--checkpoint-style--Color: var(--#{$chart}-theme--blue--ColorScale--400);
545
+ --#{$chart}-echarts-timeline--checkpoint-style--BorderColor: var(--#{$chart}-global--Fill--Color--white);
546
+ --#{$chart}-echarts-timeline--control-style--Color: var(--#{$chart}-global--Fill--Color--900);
547
+ --#{$chart}-echarts-timeline--control-style--BorderColor: var(--#{$chart}-global--Fill--Color--900);
548
+ --#{$chart}-echarts-timeline--control-style--BorderWidth: 1;
549
+ --#{$chart}-echarts-timeline--item-style--BorderWidth: 1;
550
+ --#{$chart}-echarts-timeline--item-style--Color: var(--#{$chart}-global--Fill--Color--900);
551
+ --#{$chart}-echarts-timeline--line-style--Color: var(--#{$chart}-global--Fill--Color--900);
552
+ --#{$chart}-echarts-timeline--line-style--Width: 2;
553
+
554
+ // Radar
555
+ --#{$chart}-echarts-radar--item-style--BorderWidth: 1;
556
+ --#{$chart}-echarts-radar--line-style--BorderWidth: 2;
557
+ --#{$chart}-echarts-radar--Smooth: false;
558
+ --#{$chart}-echarts-radar--SymbolSize: 4;
559
+ --#{$chart}-echarts-radar--Symbol: 'square';
560
+ }