@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.
Files changed (82) 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/docs/components/Select/deprecated/Select.md +291 -263
  36. package/docs/components/TextInputGroup/examples/TextInputGroup.md +434 -392
  37. package/docs/components/Toolbar/examples/Toolbar.md +420 -378
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -4
  39. package/docs/demos/Toolbar/examples/Toolbar.css +1 -1
  40. package/docs/demos/Toolbar/examples/Toolbar.md +140 -126
  41. package/package.json +34 -35
  42. package/patternfly-base-no-globals.css +12 -315
  43. package/patternfly-base.css +12 -315
  44. package/patternfly-charts.css +0 -322
  45. package/patternfly-charts.scss +5 -409
  46. package/patternfly-no-globals.css +539 -748
  47. package/patternfly.css +539 -748
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/_all.scss +0 -2
  51. package/sass-utilities/functions.scss +0 -6
  52. package/sass-utilities/mixins.scss +42 -16
  53. package/sass-utilities/scss-variables.scss +0 -211
  54. package/base/_chart-globals.scss +0 -415
  55. package/base/themes/dark/_chart-globals.scss +0 -42
  56. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  57. package/components/Chip/themes/dark/chip.scss +0 -9
  58. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  59. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  60. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  61. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  62. package/components/Select/themes/dark/select.scss +0 -23
  63. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
  64. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  65. package/patternfly-base-theme-dark-unversioned.css +0 -6346
  66. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  67. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  68. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  69. package/patternfly-charts-theme-dark.css +0 -70
  70. package/patternfly-charts-theme-dark.scss +0 -8
  71. package/patternfly-theme-dark-unversioned.css +0 -35621
  72. package/patternfly-theme-dark-unversioned.scss +0 -6
  73. package/patternfly-theme-dark.css +0 -0
  74. package/patternfly-theme-dark.scss +0 -1
  75. package/sass-utilities/colors.scss +0 -82
  76. package/sass-utilities/placeholders.scss +0 -72
  77. package/sass-utilities/themes/dark/_all.scss +0 -4
  78. package/sass-utilities/themes/dark/colors.scss +0 -16
  79. package/sass-utilities/themes/dark/mixins.scss +0 -7
  80. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  81. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  82. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
@@ -1,6 +0,0 @@
1
- // stylelint-disable scss/dollar-variable-pattern
2
- $--theme--version: '';
3
- // stylelint-enable
4
-
5
- // Version
6
- @import "patternfly";
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,4 +0,0 @@
1
- @import "colors";
2
- @import "scss-variables";
3
- @import "placeholders";
4
- @import "mixins";
@@ -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,7 +0,0 @@
1
- @mixin pf-v6-theme-dark--t-dark($color: "--#{$pf-global}--Color--100") {
2
- @if $color {
3
- color: var(#{$color});
4
- }
5
-
6
- @extend %pf-v6-theme-dark--t-dark;
7
- }
@@ -1,5 +0,0 @@
1
- %pf-v6-theme-dark--t-dark {
2
- .#{$button} {
3
- --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
4
- }
5
- }
@@ -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
- }