@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.119
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/base/_fonts.scss +7 -95
- package/base/_variables.scss +7 -292
- package/base/patternfly-fonts.css +6 -76
- package/base/patternfly-variables.css +8 -241
- package/components/AppLauncher/app-launcher.css +0 -10
- package/components/AppLauncher/app-launcher.scss +0 -7
- package/components/Chip/chip-group.css +0 -13
- package/components/Chip/chip-group.scss +0 -2
- package/components/Chip/chip.css +0 -19
- package/components/Chip/chip.scss +0 -9
- package/components/Content/content.css +86 -60
- package/components/Content/content.scss +129 -40
- package/components/ContextSelector/context-selector.css +0 -30
- package/components/ContextSelector/context-selector.scss +0 -9
- package/components/DataList/data-list.css +46 -49
- package/components/Divider/divider.css +28 -31
- package/components/Dropdown/dropdown.css +0 -22
- package/components/Dropdown/dropdown.scss +0 -7
- package/components/LogViewer/log-viewer.css +0 -24
- package/components/LogViewer/log-viewer.scss +0 -9
- package/components/Menu/menu.css +103 -61
- package/components/NumberInput/number-input.css +5 -8
- package/components/NumberInput/number-input.scss +1 -1
- package/components/OptionsMenu/options-menu.css +0 -15
- package/components/OptionsMenu/options-menu.scss +0 -7
- package/components/Page/page.css +92 -65
- package/components/Page/page.scss +0 -2
- package/components/Pagination/pagination.css +8 -8
- package/components/Pagination/pagination.scss +1 -1
- package/components/Select/select.css +0 -29
- package/components/Select/select.scss +0 -9
- package/components/Table/table.css +46 -49
- package/components/Toolbar/toolbar.css +90 -75
- package/docs/components/Content/examples/Content.md +254 -61
- package/docs/components/Select/deprecated/Select.md +291 -263
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +434 -392
- package/docs/components/Toolbar/examples/Toolbar.md +420 -378
- package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -4
- package/docs/demos/Toolbar/examples/Toolbar.css +1 -1
- package/docs/demos/Toolbar/examples/Toolbar.md +140 -126
- package/package.json +34 -35
- package/patternfly-base-no-globals.css +12 -315
- package/patternfly-base.css +12 -315
- package/patternfly-charts.css +0 -322
- package/patternfly-charts.scss +5 -409
- package/patternfly-no-globals.css +539 -748
- package/patternfly.css +539 -748
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_all.scss +0 -2
- package/sass-utilities/functions.scss +0 -6
- package/sass-utilities/mixins.scss +42 -16
- package/sass-utilities/scss-variables.scss +0 -211
- package/base/_chart-globals.scss +0 -415
- package/base/themes/dark/_chart-globals.scss +0 -42
- package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
- package/components/Chip/themes/dark/chip.scss +0 -9
- package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
- package/components/Dropdown/themes/dark/dropdown.scss +0 -32
- package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
- package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
- package/components/Select/themes/dark/select.scss +0 -23
- package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
- package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
- package/patternfly-base-theme-dark-unversioned.css +0 -6346
- package/patternfly-base-theme-dark-unversioned.scss +0 -5
- package/patternfly-charts-theme-dark-unversioned.css +0 -70
- package/patternfly-charts-theme-dark-unversioned.scss +0 -8
- package/patternfly-charts-theme-dark.css +0 -70
- package/patternfly-charts-theme-dark.scss +0 -8
- package/patternfly-theme-dark-unversioned.css +0 -35621
- package/patternfly-theme-dark-unversioned.scss +0 -6
- package/patternfly-theme-dark.css +0 -0
- package/patternfly-theme-dark.scss +0 -1
- package/sass-utilities/colors.scss +0 -82
- package/sass-utilities/placeholders.scss +0 -72
- package/sass-utilities/themes/dark/_all.scss +0 -4
- package/sass-utilities/themes/dark/colors.scss +0 -16
- package/sass-utilities/themes/dark/mixins.scss +0 -7
- package/sass-utilities/themes/dark/placeholders.scss +0 -5
- package/sass-utilities/themes/dark/scss-variables.scss +0 -92
- package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
// intentionally left empty
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
// Colors
|
|
2
|
-
$pf-v6-color-black-100: #fafafa !default;
|
|
3
|
-
$pf-v6-color-black-150: #f5f5f5 !default;
|
|
4
|
-
$pf-v6-color-black-200: #f0f0f0 !default;
|
|
5
|
-
$pf-v6-color-black-300: #d2d2d2 !default;
|
|
6
|
-
$pf-v6-color-black-400: #b8bbbe !default;
|
|
7
|
-
$pf-v6-color-black-500: #8a8d90 !default;
|
|
8
|
-
$pf-v6-color-black-600: #6a6e73 !default;
|
|
9
|
-
$pf-v6-color-black-700: #4f5255 !default;
|
|
10
|
-
$pf-v6-color-black-800: #3c3f42 !default;
|
|
11
|
-
$pf-v6-color-black-850: #212427 !default;
|
|
12
|
-
$pf-v6-color-black-900: #151515 !default;
|
|
13
|
-
$pf-v6-color-black-1000: #030303 !default;
|
|
14
|
-
$pf-v6-color-blue-50: #e7f1fa !default;
|
|
15
|
-
$pf-v6-color-blue-100: #bee1f4 !default;
|
|
16
|
-
$pf-v6-color-blue-200: #73bcf7 !default;
|
|
17
|
-
$pf-v6-color-blue-300: #2b9af3 !default;
|
|
18
|
-
$pf-v6-color-blue-400: #06c !default;
|
|
19
|
-
$pf-v6-color-blue-500: #004080 !default;
|
|
20
|
-
$pf-v6-color-blue-600: #002952 !default;
|
|
21
|
-
$pf-v6-color-blue-700: #001223 !default;
|
|
22
|
-
$pf-v6-color-cyan-50: #f2f9f9 !default;
|
|
23
|
-
$pf-v6-color-cyan-100: #a2d9d9 !default;
|
|
24
|
-
$pf-v6-color-cyan-200: #73c5c5 !default;
|
|
25
|
-
$pf-v6-color-cyan-300: #009596 !default;
|
|
26
|
-
$pf-v6-color-cyan-400: #005f60 !default;
|
|
27
|
-
$pf-v6-color-cyan-500: #003737 !default;
|
|
28
|
-
$pf-v6-color-cyan-600: #002323 !default;
|
|
29
|
-
$pf-v6-color-cyan-700: #000f0f !default;
|
|
30
|
-
$pf-v6-color-gold-50: #fdf7e7 !default;
|
|
31
|
-
$pf-v6-color-gold-100: #f9e0a2 !default;
|
|
32
|
-
$pf-v6-color-gold-200: #f6d173 !default;
|
|
33
|
-
$pf-v6-color-gold-300: #f4c145 !default;
|
|
34
|
-
$pf-v6-color-gold-400: #f0ab00 !default;
|
|
35
|
-
$pf-v6-color-gold-500: #c58c00 !default;
|
|
36
|
-
$pf-v6-color-gold-600: #795600 !default;
|
|
37
|
-
$pf-v6-color-gold-700: #3d2c00 !default;
|
|
38
|
-
$pf-v6-color-green-50: #f3faf2 !default;
|
|
39
|
-
$pf-v6-color-green-100: #bde5b8 !default;
|
|
40
|
-
$pf-v6-color-green-200: #95d58e !default;
|
|
41
|
-
$pf-v6-color-green-300: #6ec664 !default;
|
|
42
|
-
$pf-v6-color-green-400: #5ba352 !default;
|
|
43
|
-
$pf-v6-color-green-500: #3e8635 !default;
|
|
44
|
-
$pf-v6-color-green-600: #1e4f18 !default;
|
|
45
|
-
$pf-v6-color-green-700: #0f280d !default;
|
|
46
|
-
$pf-v6-color-light-blue-100: #beedf9 !default;
|
|
47
|
-
$pf-v6-color-light-blue-200: #7cdbf3 !default;
|
|
48
|
-
$pf-v6-color-light-blue-300: #35caed !default;
|
|
49
|
-
$pf-v6-color-light-blue-400: #00b9e4 !default;
|
|
50
|
-
$pf-v6-color-light-blue-500: #008bad !default;
|
|
51
|
-
$pf-v6-color-light-blue-600: #005c73 !default;
|
|
52
|
-
$pf-v6-color-light-blue-700: #002d39 !default;
|
|
53
|
-
$pf-v6-color-light-green-100: #e4f5bc !default;
|
|
54
|
-
$pf-v6-color-light-green-200: #c8eb79 !default;
|
|
55
|
-
$pf-v6-color-light-green-300: #ace12e !default;
|
|
56
|
-
$pf-v6-color-light-green-400: #92d400 !default;
|
|
57
|
-
$pf-v6-color-light-green-500: #6ca100 !default;
|
|
58
|
-
$pf-v6-color-light-green-600: #486b00 !default;
|
|
59
|
-
$pf-v6-color-light-green-700: #253600 !default;
|
|
60
|
-
$pf-v6-color-orange-50: #fff6ec !default;
|
|
61
|
-
$pf-v6-color-orange-100: #f4b678 !default;
|
|
62
|
-
$pf-v6-color-orange-200: #ef9234 !default;
|
|
63
|
-
$pf-v6-color-orange-300: #ec7a08 !default;
|
|
64
|
-
$pf-v6-color-orange-400: #c46100 !default;
|
|
65
|
-
$pf-v6-color-orange-500: #8f4700 !default;
|
|
66
|
-
$pf-v6-color-orange-600: #773d00 !default;
|
|
67
|
-
$pf-v6-color-orange-700: #3b1f00 !default;
|
|
68
|
-
$pf-v6-color-purple-50: #f2f0fc !default;
|
|
69
|
-
$pf-v6-color-purple-100: #cbc1ff !default;
|
|
70
|
-
$pf-v6-color-purple-200: #b2a3ff !default;
|
|
71
|
-
$pf-v6-color-purple-300: #a18fff !default;
|
|
72
|
-
$pf-v6-color-purple-400: #8476d1 !default;
|
|
73
|
-
$pf-v6-color-purple-500: #6753ac !default;
|
|
74
|
-
$pf-v6-color-purple-600: #40199a !default;
|
|
75
|
-
$pf-v6-color-purple-700: #1f0066 !default;
|
|
76
|
-
$pf-v6-color-red-50: #faeae8 !default;
|
|
77
|
-
$pf-v6-color-red-100: #c9190b !default;
|
|
78
|
-
$pf-v6-color-red-200: #a30000 !default;
|
|
79
|
-
$pf-v6-color-red-300: #7d1007 !default;
|
|
80
|
-
$pf-v6-color-red-400: #470000 !default;
|
|
81
|
-
$pf-v6-color-red-500: #2c0000 !default;
|
|
82
|
-
$pf-v6-color-white: #fff !default;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
%pf-v6-t-light {
|
|
2
|
-
--#{$pf-global}--Color--100: var(--#{$pf-global}--Color--dark-100);
|
|
3
|
-
--#{$pf-global}--Color--200: var(--#{$pf-global}--Color--dark-200);
|
|
4
|
-
--#{$pf-global}--BorderColor--100: var(--#{$pf-global}--BorderColor--dark-100);
|
|
5
|
-
--#{$pf-global}--primary-color--100: var(--#{$pf-global}--primary-color--dark-100);
|
|
6
|
-
--#{$pf-global}--link--Color: var(--#{$pf-global}--link--Color--dark);
|
|
7
|
-
--#{$pf-global}--link--Color--hover: var(--#{$pf-global}--link--Color--dark--hover);
|
|
8
|
-
--#{$pf-global}--BackgroundColor--100: var(--#{$pf-global}--BackgroundColor--light-100);
|
|
9
|
-
--#{$pf-global}--icon--Color--light: var(--#{$pf-global}--icon--Color--light--dark);
|
|
10
|
-
--#{$pf-global}--icon--Color--dark: var(--#{$pf-global}--icon--Color--dark--dark);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
%pf-v6-t-dark {
|
|
14
|
-
--#{$pf-global}--Color--100: var(--#{$pf-global}--Color--light-100);
|
|
15
|
-
--#{$pf-global}--Color--200: var(--#{$pf-global}--Color--light-200);
|
|
16
|
-
--#{$pf-global}--BorderColor--100: var(--#{$pf-global}--BorderColor--light-100);
|
|
17
|
-
--#{$pf-global}--primary-color--100: var(--#{$pf-global}--primary-color--light-100);
|
|
18
|
-
--#{$pf-global}--link--Color: var(--#{$pf-global}--link--Color--light);
|
|
19
|
-
--#{$pf-global}--link--Color--hover: var(--#{$pf-global}--link--Color--light);
|
|
20
|
-
--#{$pf-global}--BackgroundColor--100: var(--#{$pf-global}--BackgroundColor--dark-100);
|
|
21
|
-
--#{$pf-global}--icon--Color--light: var(--#{$pf-global}--icon--Color--light--light);
|
|
22
|
-
--#{$pf-global}--icon--Color--dark: var(--#{$pf-global}--icon--Color--dark--light);
|
|
23
|
-
|
|
24
|
-
.#{$button} {
|
|
25
|
-
--#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--dark-100);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// stylelint-disable
|
|
30
|
-
%pf-v6-hidden-visible {
|
|
31
|
-
// base value for visible display property is set to 'block' by default and passed in to
|
|
32
|
-
// placeholder via `pf-v6-hidden-visible` mixin
|
|
33
|
-
|
|
34
|
-
// set hidden var values
|
|
35
|
-
--pf-v6-hidden-visible--hidden--Display: none;
|
|
36
|
-
|
|
37
|
-
// set visibile var values
|
|
38
|
-
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
39
|
-
|
|
40
|
-
// set default state to visible
|
|
41
|
-
display: var(--pf-v6-hidden-visible--Display);
|
|
42
|
-
|
|
43
|
-
// toggle values based on state
|
|
44
|
-
&.pf-m-hidden {
|
|
45
|
-
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@each $size, $bp in $pf-v6-global--breakpoint-name-map {
|
|
49
|
-
@media screen and (min-width: $bp) {
|
|
50
|
-
&.pf-m-hidden-on-#{$size} {
|
|
51
|
-
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&.pf-m-visible-on-#{$size} {
|
|
55
|
-
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
// stylelint-enable
|
|
61
|
-
|
|
62
|
-
%pf-v6-remove-num-arrows {
|
|
63
|
-
appearance: textfield;
|
|
64
|
-
|
|
65
|
-
// stylelint-disable
|
|
66
|
-
&::-webkit-inner-spin-button,
|
|
67
|
-
&::-webkit-outer-spin-button {
|
|
68
|
-
// stylelint-enable
|
|
69
|
-
margin: 0;
|
|
70
|
-
appearance: none;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
// color palette changes
|
|
2
|
-
$pf-v6-color-black-50: #e0e0e0;
|
|
3
|
-
$pf-v6-color-black-100: #c6c7c8;
|
|
4
|
-
$pf-v6-color-black-200: #aaabac;
|
|
5
|
-
$pf-v6-color-black-300: #868789;
|
|
6
|
-
$pf-v6-color-black-400: #57585a;
|
|
7
|
-
$pf-v6-color-black-500: #444548;
|
|
8
|
-
$pf-v6-color-black-600: #36373a;
|
|
9
|
-
$pf-v6-color-black-700: #26292d;
|
|
10
|
-
$pf-v6-color-black-800: #1b1d21;
|
|
11
|
-
$pf-v6-color-black-850: #212427;
|
|
12
|
-
$pf-v6-color-black-900: #0f1214;
|
|
13
|
-
$pf-v6-color-black-1000: #030303;
|
|
14
|
-
$pf-v6-color-red-9999: #fe5142;
|
|
15
|
-
$pf-v6-color-red-8888: #ff7468;
|
|
16
|
-
$pf-v6-color-blue-300: #1fa7f8;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
// background colors
|
|
2
|
-
$pf-v6-global--BackgroundColor--100: $pf-v6-color-black-800; // primary background color
|
|
3
|
-
$pf-v6-global--BackgroundColor--150: $pf-v6-color-black-850; // in-between special use case background color
|
|
4
|
-
$pf-v6-global--BackgroundColor--200: $pf-v6-color-black-900; // secondary background color
|
|
5
|
-
$pf-v6-global--BackgroundColor--300: $pf-v6-color-black-700; // floats on top of other elements
|
|
6
|
-
$pf-v6-global--BackgroundColor--400: $pf-v6-color-black-600; // form control & item hover on background-300
|
|
7
|
-
$pf-v6-global--BorderColor--100: $pf-v6-color-black-500; // primary border color
|
|
8
|
-
$pf-v6-global--BorderColor--200: $pf-v6-color-black-500; // secondary border color
|
|
9
|
-
$pf-v6-global--BorderColor--300: $pf-v6-color-black-400;
|
|
10
|
-
$pf-v6-global--BorderColor--400: $pf-v6-color-black-200; // form control bottom border
|
|
11
|
-
|
|
12
|
-
// text colors
|
|
13
|
-
$pf-v6-global--Color--100: $pf-v6-color-black-50; // primary text color
|
|
14
|
-
$pf-v6-global--Color--200: $pf-v6-color-black-200; // secondary text color
|
|
15
|
-
$pf-v6-global--active-color--100: $pf-v6-color-blue-300;
|
|
16
|
-
$pf-v6-global--primary-color--100: $pf-v6-color-blue-300; // primary blue against dark background - background, text, etc
|
|
17
|
-
$pf-v6-global--primary-color--300: $pf-v6-color-blue-400; // primary blue with white text on top for contrast
|
|
18
|
-
$pf-v6-global--primary-color--400: $pf-v6-color-white; // text color on top of primary--300
|
|
19
|
-
$pf-v6-global--custom-color--200: $pf-v6-color-cyan-200;
|
|
20
|
-
$pf-v6-global--success-color--100: $pf-v6-color-green-400;
|
|
21
|
-
$pf-v6-global--warning-color--100: $pf-v6-color-gold-400;
|
|
22
|
-
$pf-v6-global--warning-color--200: $pf-v6-color-gold-300;
|
|
23
|
-
$pf-v6-global--danger-color--100: $pf-v6-color-red-9999;
|
|
24
|
-
$pf-v6-global--danger-color--200: $pf-v6-color-red-8888;
|
|
25
|
-
$pf-v6-global--link--Color: $pf-v6-color-blue-300;
|
|
26
|
-
$pf-v6-global--link--Color--hover: $pf-v6-color-blue-200;
|
|
27
|
-
$pf-v6-global--link--Color--visited: $pf-v6-color-purple-300;
|
|
28
|
-
$pf-v6-global--disabled-color--100: $pf-v6-color-black-300; // disabled text on regular background color
|
|
29
|
-
$pf-v6-global--disabled-color--200: $pf-v6-color-black-500; // disabled background color
|
|
30
|
-
$pf-v6-global--disabled-color--300: $pf-v6-color-black-200; // disabled text on disabled or floating background color - except form elements
|
|
31
|
-
|
|
32
|
-
// icons
|
|
33
|
-
$pf-v6-global--icon--Color--light: $pf-v6-color-black-200;
|
|
34
|
-
$pf-v6-global--icon--Color--dark: $pf-v6-color-black-50;
|
|
35
|
-
|
|
36
|
-
// theme color resets
|
|
37
|
-
$pf-v6-global--Color--dark-100: $pf-v6-global--Color--100;
|
|
38
|
-
$pf-v6-global--Color--dark-200: $pf-v6-global--Color--200;
|
|
39
|
-
$pf-v6-global--Color--light-100: $pf-v6-global--Color--100;
|
|
40
|
-
$pf-v6-global--Color--light-200: $pf-v6-global--Color--200;
|
|
41
|
-
$pf-v6-global--Color--light-300: $pf-v6-global--Color--300;
|
|
42
|
-
$pf-v6-global--BorderColor--dark-100: $pf-v6-global--BorderColor--100;
|
|
43
|
-
$pf-v6-global--BorderColor--light-100: $pf-v6-global--BorderColor--100;
|
|
44
|
-
$pf-v6-global--primary-color--light-100: $pf-v6-global--primary-color--100;
|
|
45
|
-
$pf-v6-global--primary-color--dark-100: $pf-v6-global--primary-color--100;
|
|
46
|
-
$pf-v6-global--link--Color--light: $pf-v6-global--link--Color;
|
|
47
|
-
$pf-v6-global--link--Color--light--hover: $pf-v6-global--link--Color--hover;
|
|
48
|
-
$pf-v6-global--link--Color--dark: $pf-v6-global--link--Color;
|
|
49
|
-
$pf-v6-global--link--Color--dark--hover: $pf-v6-global--link--Color--hover;
|
|
50
|
-
$pf-v6-global--BackgroundColor--light-100: $pf-v6-global--BackgroundColor--100;
|
|
51
|
-
$pf-v6-global--BackgroundColor--light-200: $pf-v6-global--BackgroundColor--200;
|
|
52
|
-
$pf-v6-global--BackgroundColor--light-300: $pf-v6-global--BackgroundColor--300;
|
|
53
|
-
$pf-v6-global--BackgroundColor--dark-100: $pf-v6-global--BackgroundColor--100;
|
|
54
|
-
$pf-v6-global--BackgroundColor--dark-200: $pf-v6-global--BackgroundColor--200;
|
|
55
|
-
$pf-v6-global--BackgroundColor--dark-300: $pf-v6-global--BackgroundColor--300;
|
|
56
|
-
$pf-v6-global--BackgroundColor--dark-400: $pf-v6-global--BackgroundColor--400;
|
|
57
|
-
$pf-v6-global--icon--Color--light--dark: $pf-v6-global--icon--Color--light;
|
|
58
|
-
$pf-v6-global--icon--Color--dark--dark: $pf-v6-global--icon--Color--dark;
|
|
59
|
-
$pf-v6-global--icon--Color--light--light: $pf-v6-global--icon--Color--light;
|
|
60
|
-
$pf-v6-global--icon--Color--dark--light: $pf-v6-global--icon--Color--dark;
|
|
61
|
-
|
|
62
|
-
// Shadows
|
|
63
|
-
// small
|
|
64
|
-
$pf-v6-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .48), 0 0 pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .24);
|
|
65
|
-
$pf-v6-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
|
|
66
|
-
$pf-v6-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
|
|
67
|
-
$pf-v6-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
|
|
68
|
-
$pf-v6-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
|
|
69
|
-
|
|
70
|
-
// medium
|
|
71
|
-
$pf-v6-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v6-color-black-1000, .48), 0 0 pf-size-prem(4px) 0 rgba($pf-v6-color-black-1000, .24);
|
|
72
|
-
$pf-v6-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
|
|
73
|
-
$pf-v6-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
|
|
74
|
-
$pf-v6-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
|
|
75
|
-
$pf-v6-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
|
|
76
|
-
|
|
77
|
-
// large
|
|
78
|
-
$pf-v6-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-v6-color-black-1000, .64), 0 0 pf-size-prem(6px) 0 rgba($pf-v6-color-black-1000, .32);
|
|
79
|
-
$pf-v6-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
|
|
80
|
-
$pf-v6-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
|
|
81
|
-
$pf-v6-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
|
|
82
|
-
$pf-v6-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
|
|
83
|
-
|
|
84
|
-
// x-large
|
|
85
|
-
$pf-v6-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-v6-color-black-1000, .64), 0 0 pf-size-prem(8px) 0 rgba($pf-v6-color-black-1000, .4);
|
|
86
|
-
$pf-v6-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
|
|
87
|
-
$pf-v6-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
|
|
88
|
-
$pf-v6-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
|
|
89
|
-
$pf-v6-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
|
|
90
|
-
|
|
91
|
-
// inset
|
|
92
|
-
$pf-v6-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-v6-color-black-1000;
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
@import "../../base/themes/dark/chart-globals";
|
|
2
|
-
|
|
3
|
-
@mixin pf-v6-charts-theme-dark($pf-v6-charts-theme-dark-class: "") {
|
|
4
|
-
// stylelint-disable
|
|
5
|
-
.#{$chart} {
|
|
6
|
-
svg g[clip-path] {
|
|
7
|
-
mix-blend-mode: normal;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
& {
|
|
12
|
-
// colors
|
|
13
|
-
--#{$chart}-color-blue-100: #{$pf-v6-chart-color-blue-100};
|
|
14
|
-
--#{$chart}-color-blue-200: #{$pf-v6-chart-color-blue-200};
|
|
15
|
-
--#{$chart}-color-blue-300: #{$pf-v6-chart-color-blue-300};
|
|
16
|
-
--#{$chart}-color-blue-400: #{$pf-v6-chart-color-blue-400};
|
|
17
|
-
--#{$chart}-color-blue-500: #{$pf-v6-chart-color-blue-500};
|
|
18
|
-
--#{$chart}-color-green-100: #{$pf-v6-chart-color-green-100};
|
|
19
|
-
--#{$chart}-color-green-200: #{$pf-v6-chart-color-green-200};
|
|
20
|
-
--#{$chart}-color-green-300: #{$pf-v6-chart-color-green-300};
|
|
21
|
-
--#{$chart}-color-green-400: #{$pf-v6-chart-color-green-400};
|
|
22
|
-
--#{$chart}-color-green-500: #{$pf-v6-chart-color-green-500};
|
|
23
|
-
--#{$chart}-color-cyan-100: #{$pf-v6-chart-color-cyan-100};
|
|
24
|
-
--#{$chart}-color-cyan-200: #{$pf-v6-chart-color-cyan-200};
|
|
25
|
-
--#{$chart}-color-cyan-300: #{$pf-v6-chart-color-cyan-300};
|
|
26
|
-
--#{$chart}-color-cyan-400: #{$pf-v6-chart-color-cyan-400};
|
|
27
|
-
--#{$chart}-color-cyan-500: #{$pf-v6-chart-color-cyan-500};
|
|
28
|
-
--#{$chart}-color-purple-100: #{$pf-v6-chart-color-purple-100};
|
|
29
|
-
--#{$chart}-color-purple-200: #{$pf-v6-chart-color-purple-200};
|
|
30
|
-
--#{$chart}-color-purple-300: #{$pf-v6-chart-color-purple-300};
|
|
31
|
-
--#{$chart}-color-purple-400: #{$pf-v6-chart-color-purple-400};
|
|
32
|
-
--#{$chart}-color-purple-500: #{$pf-v6-chart-color-purple-500};
|
|
33
|
-
--#{$chart}-color-red-100: #{$pf-v6-chart-color-red-100};
|
|
34
|
-
--#{$chart}-color-red-200: #{$pf-v6-chart-color-red-200};
|
|
35
|
-
--#{$chart}-color-red-300: #{$pf-v6-chart-color-red-300};
|
|
36
|
-
--#{$chart}-color-red-400: #{$pf-v6-chart-color-red-400};
|
|
37
|
-
--#{$chart}-color-red-500: #{$pf-v6-chart-color-red-500};
|
|
38
|
-
|
|
39
|
-
// globals
|
|
40
|
-
--#{$chart}-global--BorderColor: var(--#{$pf-global}--BorderColor--100);
|
|
41
|
-
--#{$chart}-global--BorderColor--accent: var(--#{$pf-global}--BorderColor--400);
|
|
42
|
-
--#{$chart}-global--label--Fill: var(--#{$pf-global}--Color--100);
|
|
43
|
-
--#{$chart}-global--title--Fill: var(--#{$pf-global}--Color--100);
|
|
44
|
-
--#{$chart}-global--subtitle--Fill: var(--#{$pf-global}--Color--200);
|
|
45
|
-
--#{$chart}-global--tooltip--Fill: var(--#{$pf-global}--Color--100);
|
|
46
|
-
--#{$chart}-global--tooltip--bg--Fill: var(--#{$pf-global}--BackgroundColor--300);
|
|
47
|
-
--#{$chart}-global--tooltip--BorderWidth: 1;
|
|
48
|
-
--#{$chart}-global--tooltip--BorderColor: var(--#{$pf-global}--BorderColor--300);
|
|
49
|
-
|
|
50
|
-
// axis
|
|
51
|
-
--#{$chart}-axis--axis--stroke--Color: var(--#{$chart}-global--BorderColor);
|
|
52
|
-
--#{$chart}-axis--grid--stroke--Color: var(--#{$chart}-global--BorderColor);
|
|
53
|
-
--#{$chart}-axis--tick--stroke--Color: var(--#{$chart}-global--BorderColor);
|
|
54
|
-
--#{$chart}-axis--axis--tick--stroke--Color: var(--#{$chart}-global--BorderColor);
|
|
55
|
-
--#{$chart}-axis--grid--Fill: var(--#{$chart}-global--BorderColor);
|
|
56
|
-
--#{$chart}-axis--tick-label--Fill: var(--#{$chart}-global--label--Fill);
|
|
57
|
-
|
|
58
|
-
// bullet
|
|
59
|
-
--#{$chart}-bullet--label--title--Fill: var(--#{$chart}-global--title--Fill);
|
|
60
|
-
--#{$chart}-bullet--label--grouptitle--Fill: var(--#{$chart}-bullet--label--title--Fill); // shares title styles
|
|
61
|
-
--#{$chart}-bullet--label--subtitle--Fill: var(--#{$chart}-global--subtitle--Fill);
|
|
62
|
-
--#{$chart}-bullet--negative-measure--ColorScale--100: var(--#{$pf-global}--palette--red-400);
|
|
63
|
-
--#{$chart}-bullet--negative-measure--ColorScale--200: var(--#{$pf-global}--palette--red-300);
|
|
64
|
-
--#{$chart}-bullet--negative-measure--ColorScale--300: var(--#{$pf-global}--palette--red-200);
|
|
65
|
-
--#{$chart}-bullet--negative-measure--ColorScale--400: var(--#{$pf-global}--palette--red-100);
|
|
66
|
-
--#{$chart}-bullet--negative-measure--ColorScale--500: var(--#{$pf-global}--palette--red-9999);
|
|
67
|
-
--#{$chart}-bullet--qualitative-range--ColorScale--100: var(--#{$pf-global}--palette--black-600);
|
|
68
|
-
--#{$chart}-bullet--qualitative-range--ColorScale--200: var(--#{$pf-global}--palette--black-500);
|
|
69
|
-
--#{$chart}-bullet--qualitative-range--ColorScale--300: var(--#{$pf-global}--palette--black-400);
|
|
70
|
-
--#{$chart}-bullet--qualitative-range--ColorScale--400: var(--#{$pf-global}--palette--black-300);
|
|
71
|
-
--#{$chart}-bullet--qualitative-range--ColorScale--500: var(--#{$pf-global}--palette--black-200);
|
|
72
|
-
|
|
73
|
-
// container
|
|
74
|
-
--#{$chart}-container--cursor--line--Fill: var(--#{$chart}-global--BorderColor--accent);
|
|
75
|
-
|
|
76
|
-
// donut
|
|
77
|
-
--#{$chart}-donut--label--title--Fill: var(--#{$chart}-global--title--Fill);
|
|
78
|
-
--#{$chart}-donut--label--subtitle--Fill: var(--#{$chart}-global--subtitle--Fill);
|
|
79
|
-
|
|
80
|
-
// lines
|
|
81
|
-
--#{$chart}-line--data--stroke--Color: var(--#{$chart}-global--BorderColor);
|
|
82
|
-
|
|
83
|
-
// Tooltips
|
|
84
|
-
|
|
85
|
-
// text color
|
|
86
|
-
--#{$chart}-tooltip--Fill: var(--#{$chart}-global--tooltip--Fill);
|
|
87
|
-
--#{$chart}-voronoi--labels--Fill: var(--#{$chart}-global--tooltip--Fill);
|
|
88
|
-
// background color
|
|
89
|
-
--#{$chart}-tooltip--flyoutStyle--Fill: var(--#{$chart}-global--tooltip--bg--Fill);
|
|
90
|
-
--#{$chart}-voronoi--flyout--stroke--Fill: var(--#{$chart}-global--tooltip--bg--Fill);
|
|
91
|
-
// border
|
|
92
|
-
--#{$chart}-tooltip--flyoutStyle--stroke--Width: var(--#{$chart}-global--tooltip--BorderWidth);
|
|
93
|
-
--#{$chart}-tooltip--flyoutStyle--stroke--Color: var(--#{$chart}-global--tooltip--BorderColor);
|
|
94
|
-
--#{$chart}-voronoi--flyout--stroke--Width: var(--#{$chart}-global--tooltip--BorderWidth);
|
|
95
|
-
--#{$chart}-voronoi--flyout--stroke--Color: var(--#{$chart}-global--tooltip--BorderColor);
|
|
96
|
-
}
|
|
97
|
-
// stylelint-enable
|
|
98
|
-
}
|