@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.
- package/assets/pficon/pficon.scss +1 -1
- package/base/normalize.scss +2 -2
- package/base/patternfly-pf-icons.css +1 -1
- package/components/Alert/alert-group.css +50 -7
- package/components/Alert/alert-group.scss +114 -28
- package/components/Banner/banner.css +2 -2
- package/components/Banner/banner.scss +2 -2
- package/components/Breadcrumb/breadcrumb.css +3 -2
- package/components/Breadcrumb/breadcrumb.scss +3 -2
- package/components/Button/button.css +63 -2
- package/components/Button/button.scss +74 -2
- package/components/Card/card.css +17 -0
- package/components/Card/card.scss +22 -0
- package/components/ClipboardCopy/clipboard-copy.css +3 -0
- package/components/ClipboardCopy/clipboard-copy.scss +4 -0
- package/components/Content/content.css +2 -1
- package/components/Content/content.scss +2 -1
- package/components/DescriptionList/description-list.css +3 -2
- package/components/DescriptionList/description-list.scss +3 -2
- package/components/Drawer/drawer.css +3 -1
- package/components/Drawer/drawer.scss +3 -1
- package/components/Form/form.css +3 -6
- package/components/Form/form.scss +3 -7
- package/components/HelperText/helper-text.css +13 -0
- package/components/HelperText/helper-text.scss +16 -0
- package/components/JumpLinks/jump-links.css +1 -1
- package/components/JumpLinks/jump-links.scss +1 -1
- package/components/Label/label.css +3 -2
- package/components/Label/label.scss +3 -2
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +15 -7
- package/components/Menu/menu.scss +14 -5
- package/components/MenuToggle/menu-toggle.css +41 -0
- package/components/MenuToggle/menu-toggle.scss +49 -0
- package/components/Nav/nav.css +46 -13
- package/components/Nav/nav.scss +57 -17
- package/components/Page/page.css +16 -1
- package/components/Page/page.scss +17 -3
- package/components/Popover/popover.css +2 -0
- package/components/Popover/popover.scss +2 -0
- package/components/Progress/progress.css +3 -0
- package/components/Progress/progress.scss +3 -0
- package/components/ProgressStepper/progress-stepper.css +2 -1
- package/components/ProgressStepper/progress-stepper.scss +2 -1
- package/components/SimpleList/simple-list.css +2 -2
- package/components/SimpleList/simple-list.scss +2 -2
- package/components/Switch/switch.css +3 -1
- package/components/Switch/switch.scss +4 -2
- package/components/Table/table.css +3 -3
- package/components/Table/table.scss +3 -2
- package/components/Tabs/tabs.css +1 -1
- package/components/Tabs/tabs.scss +1 -1
- package/components/Timestamp/timestamp.css +2 -1
- package/components/Timestamp/timestamp.scss +2 -1
- package/components/ToggleGroup/toggle-group.css +1 -1
- package/components/ToggleGroup/toggle-group.scss +1 -1
- package/components/Toolbar/toolbar.css +6 -1
- package/components/Toolbar/toolbar.scss +7 -1
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/components/_index.css +310 -60
- package/docs/components/Alert/examples/Alert.md +6 -0
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Button/examples/Button.md +29 -0
- package/docs/components/Card/examples/Card.md +30 -0
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
- package/docs/components/DataList/examples/DataList.md +3 -3
- package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +3 -3
- package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
- package/docs/components/Masthead/examples/masthead.md +1 -1
- package/docs/components/Menu/examples/Menu.md +8 -8
- package/docs/components/Nav/examples/Navigation.md +3 -0
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/Pagination/examples/Pagination.md +3 -3
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Table/examples/Table.md +17 -29
- package/docs/components/Tabs/examples/Tabs.md +148 -6
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
- package/docs/components/Toolbar/examples/Toolbar.css +3 -0
- package/docs/components/Toolbar/examples/Toolbar.md +35 -7
- package/docs/demos/Card/examples/Card.md +32 -24
- package/docs/demos/CardView/examples/CardView.md +2 -0
- package/docs/demos/Nav/examples/Nav.md +2 -0
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +4 -4
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +6 -6
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +2 -2
- package/patternfly-base-no-globals.css +1 -1
- package/patternfly-base.css +3 -3
- package/patternfly-charts.css +83 -0
- package/patternfly-charts.scss +126 -0
- package/patternfly-no-globals.css +311 -61
- package/patternfly.css +313 -63
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- 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`. [
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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
|
-
[
|
|
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.
|
|
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.
|
|
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",
|
package/patternfly-base.css
CHANGED
|
@@ -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
|
|
package/patternfly-charts.css
CHANGED
|
@@ -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
|
}
|
package/patternfly-charts.scss
CHANGED
|
@@ -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
|
+
}
|