@patternfly/patternfly 6.0.0-alpha.114 → 6.0.0-alpha.115
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/images/pf_logo.svg +11 -11
- package/assets/images/pf_logo_white.svg +2 -2
- package/base/_chart-globals.scss +320 -320
- package/base/_fa-icons.scss +2 -2
- package/base/_fonts.scss +16 -16
- package/base/_globals.scss +4 -11
- package/base/_variables.scss +221 -221
- package/base/patternfly-globals.css +2 -6
- package/base/patternfly-variables.css +13 -9
- package/base/themes/dark/_chart-globals.scss +25 -25
- package/base/tokens/_tokens-font.scss +8 -0
- package/components/AboutModalBox/about-modal-box.css +1 -1
- package/components/AboutModalBox/about-modal-box.scss +1 -1
- package/components/Alert/alert-group.css +1 -1
- package/components/Alert/alert-group.scss +1 -1
- package/components/Alert/alert.css +1 -1
- package/components/Alert/alert.scss +1 -1
- package/components/AppLauncher/app-launcher.css +1 -1
- package/components/AppLauncher/app-launcher.scss +1 -1
- package/components/Banner/banner.css +1 -1
- package/components/Banner/banner.scss +1 -1
- package/components/Button/button.css +3 -3
- package/components/Button/button.scss +3 -3
- package/components/Card/card.css +1 -1
- package/components/Card/card.scss +1 -1
- package/components/Content/content.css +1 -1
- package/components/Content/content.scss +1 -1
- package/components/ContextSelector/context-selector.css +1 -1
- package/components/ContextSelector/context-selector.scss +1 -1
- package/components/Drawer/drawer.css +2 -2
- package/components/Drawer/drawer.scss +2 -2
- package/components/Dropdown/dropdown.css +2 -2
- package/components/Dropdown/dropdown.scss +2 -2
- package/components/DualListSelector/dual-list-selector.css +1 -1
- package/components/DualListSelector/dual-list-selector.scss +3 -3
- package/components/Form/form.css +1 -1
- package/components/Form/form.scss +1 -1
- package/components/JumpLinks/jump-links.css +1 -1
- package/components/JumpLinks/jump-links.scss +1 -1
- package/components/List/list.css +1 -1
- package/components/List/list.scss +1 -1
- package/components/Menu/menu.css +4 -4
- package/components/Menu/menu.scss +4 -4
- package/components/ModalBox/modal-box.css +1 -1
- package/components/ModalBox/modal-box.scss +1 -1
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +1 -1
- package/components/OptionsMenu/options-menu.css +1 -1
- package/components/OptionsMenu/options-menu.scss +1 -1
- package/components/Page/page.css +8 -8
- package/components/Page/page.scss +14 -14
- package/components/ProgressStepper/progress-stepper.css +1 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -1
- package/components/Select/select.css +1 -1
- package/components/Select/select.scss +1 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +1 -1
- package/components/SkipToContent/skip-to-content.css +1 -1
- package/components/SkipToContent/skip-to-content.scss +1 -1
- package/components/Table/table.css +1 -1
- package/components/Table/table.scss +1 -1
- package/components/Toolbar/toolbar.css +1 -1
- package/components/Toolbar/toolbar.scss +1 -1
- package/components/TreeView/tree-view.scss +2 -2
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
- package/docs/components/Table/examples/Table.md +2 -2
- package/docs/components/Tabs/examples/Tabs.md +102 -102
- package/docs/demos/Card/examples/Card.md +152 -115
- package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Table/examples/Table.md +2 -2
- package/docs/demos/Toolbar/examples/Toolbar.css +3 -3
- package/docs/utilities/Text/examples/Text.md +0 -1
- package/package.json +1 -1
- package/patternfly-base-no-globals-theme-dark-unversioned.css +13 -69
- package/patternfly-base-no-globals-theme-dark-unversioned.scss +2 -2
- package/patternfly-base-no-globals.css +13 -69
- package/patternfly-base-no-globals.scss +2 -2
- package/patternfly-base-theme-dark-unversioned.css +15 -71
- package/patternfly-base.css +15 -71
- package/patternfly-base.scss +0 -1
- package/patternfly-charts.scss +319 -319
- package/patternfly-no-globals.css +60 -89
- package/patternfly-no-globals.scss +2 -2
- package/patternfly-theme-dark-unversioned.css +84 -113
- package/patternfly-theme-dark-unversioned.scss +1 -1
- package/patternfly.css +62 -91
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +3 -3
- package/sass-utilities/colors.scss +81 -81
- package/sass-utilities/functions.scss +2 -2
- package/sass-utilities/mixins.scss +1 -1
- package/sass-utilities/scss-variables.scss +149 -149
- package/sass-utilities/themes/dark/colors.scss +15 -15
- package/sass-utilities/themes/dark/scss-variables.scss +74 -74
- package/themes/dark/_patternfly-charts-theme-dark.scss +25 -25
- package/base/_themes.scss +0 -43
- package/base/patternfly-themes.css +0 -82
- package/base/patternfly-themes.scss +0 -2
- package/base/themes/dark/_globals.scss +0 -5
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
// color palette changes
|
|
2
|
-
$pf-
|
|
3
|
-
$pf-
|
|
4
|
-
$pf-
|
|
5
|
-
$pf-
|
|
6
|
-
$pf-
|
|
7
|
-
$pf-
|
|
8
|
-
$pf-
|
|
9
|
-
$pf-
|
|
10
|
-
$pf-
|
|
11
|
-
$pf-
|
|
12
|
-
$pf-
|
|
13
|
-
$pf-
|
|
14
|
-
$pf-
|
|
15
|
-
$pf-
|
|
16
|
-
$pf-
|
|
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 +1,92 @@
|
|
|
1
1
|
// background colors
|
|
2
|
-
$pf-
|
|
3
|
-
$pf-
|
|
4
|
-
$pf-
|
|
5
|
-
$pf-
|
|
6
|
-
$pf-
|
|
7
|
-
$pf-
|
|
8
|
-
$pf-
|
|
9
|
-
$pf-
|
|
10
|
-
$pf-
|
|
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
11
|
|
|
12
12
|
// text colors
|
|
13
|
-
$pf-
|
|
14
|
-
$pf-
|
|
15
|
-
$pf-
|
|
16
|
-
$pf-
|
|
17
|
-
$pf-
|
|
18
|
-
$pf-
|
|
19
|
-
$pf-
|
|
20
|
-
$pf-
|
|
21
|
-
$pf-
|
|
22
|
-
$pf-
|
|
23
|
-
$pf-
|
|
24
|
-
$pf-
|
|
25
|
-
$pf-
|
|
26
|
-
$pf-
|
|
27
|
-
$pf-
|
|
28
|
-
$pf-
|
|
29
|
-
$pf-
|
|
30
|
-
$pf-
|
|
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
31
|
|
|
32
32
|
// icons
|
|
33
|
-
$pf-
|
|
34
|
-
$pf-
|
|
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
35
|
|
|
36
36
|
// theme color resets
|
|
37
|
-
$pf-
|
|
38
|
-
$pf-
|
|
39
|
-
$pf-
|
|
40
|
-
$pf-
|
|
41
|
-
$pf-
|
|
42
|
-
$pf-
|
|
43
|
-
$pf-
|
|
44
|
-
$pf-
|
|
45
|
-
$pf-
|
|
46
|
-
$pf-
|
|
47
|
-
$pf-
|
|
48
|
-
$pf-
|
|
49
|
-
$pf-
|
|
50
|
-
$pf-
|
|
51
|
-
$pf-
|
|
52
|
-
$pf-
|
|
53
|
-
$pf-
|
|
54
|
-
$pf-
|
|
55
|
-
$pf-
|
|
56
|
-
$pf-
|
|
57
|
-
$pf-
|
|
58
|
-
$pf-
|
|
59
|
-
$pf-
|
|
60
|
-
$pf-
|
|
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
61
|
|
|
62
62
|
// Shadows
|
|
63
63
|
// small
|
|
64
|
-
$pf-
|
|
65
|
-
$pf-
|
|
66
|
-
$pf-
|
|
67
|
-
$pf-
|
|
68
|
-
$pf-
|
|
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
69
|
|
|
70
70
|
// medium
|
|
71
|
-
$pf-
|
|
72
|
-
$pf-
|
|
73
|
-
$pf-
|
|
74
|
-
$pf-
|
|
75
|
-
$pf-
|
|
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
76
|
|
|
77
77
|
// large
|
|
78
|
-
$pf-
|
|
79
|
-
$pf-
|
|
80
|
-
$pf-
|
|
81
|
-
$pf-
|
|
82
|
-
$pf-
|
|
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
83
|
|
|
84
84
|
// x-large
|
|
85
|
-
$pf-
|
|
86
|
-
$pf-
|
|
87
|
-
$pf-
|
|
88
|
-
$pf-
|
|
89
|
-
$pf-
|
|
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
90
|
|
|
91
91
|
// inset
|
|
92
|
-
$pf-
|
|
92
|
+
$pf-v6-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-v6-color-black-1000;
|
|
@@ -10,31 +10,31 @@
|
|
|
10
10
|
|
|
11
11
|
& {
|
|
12
12
|
// colors
|
|
13
|
-
--#{$chart}-color-blue-100: #{$pf-
|
|
14
|
-
--#{$chart}-color-blue-200: #{$pf-
|
|
15
|
-
--#{$chart}-color-blue-300: #{$pf-
|
|
16
|
-
--#{$chart}-color-blue-400: #{$pf-
|
|
17
|
-
--#{$chart}-color-blue-500: #{$pf-
|
|
18
|
-
--#{$chart}-color-green-100: #{$pf-
|
|
19
|
-
--#{$chart}-color-green-200: #{$pf-
|
|
20
|
-
--#{$chart}-color-green-300: #{$pf-
|
|
21
|
-
--#{$chart}-color-green-400: #{$pf-
|
|
22
|
-
--#{$chart}-color-green-500: #{$pf-
|
|
23
|
-
--#{$chart}-color-cyan-100: #{$pf-
|
|
24
|
-
--#{$chart}-color-cyan-200: #{$pf-
|
|
25
|
-
--#{$chart}-color-cyan-300: #{$pf-
|
|
26
|
-
--#{$chart}-color-cyan-400: #{$pf-
|
|
27
|
-
--#{$chart}-color-cyan-500: #{$pf-
|
|
28
|
-
--#{$chart}-color-purple-100: #{$pf-
|
|
29
|
-
--#{$chart}-color-purple-200: #{$pf-
|
|
30
|
-
--#{$chart}-color-purple-300: #{$pf-
|
|
31
|
-
--#{$chart}-color-purple-400: #{$pf-
|
|
32
|
-
--#{$chart}-color-purple-500: #{$pf-
|
|
33
|
-
--#{$chart}-color-red-100: #{$pf-
|
|
34
|
-
--#{$chart}-color-red-200: #{$pf-
|
|
35
|
-
--#{$chart}-color-red-300: #{$pf-
|
|
36
|
-
--#{$chart}-color-red-400: #{$pf-
|
|
37
|
-
--#{$chart}-color-red-500: #{$pf-
|
|
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
38
|
|
|
39
39
|
// globals
|
|
40
40
|
--#{$chart}-global--BorderColor: var(--#{$pf-global}--BorderColor--100);
|
package/base/_themes.scss
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
#{$pf-v6--theme-dark--placeholder--class} {
|
|
2
|
-
@extend %pf-v6-t-dark;
|
|
3
|
-
|
|
4
|
-
&.pf-m-transparent {
|
|
5
|
-
background-color: transparent;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
&.pf-m-transparent-100 {
|
|
9
|
-
background-color: rgba($pf-v5-color-black-1000, .42);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&.pf-m-transparent-200 {
|
|
13
|
-
background-color: rgba($pf-v5-color-black-1000, .6);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&.pf-m-opaque-100 {
|
|
17
|
-
background-color: $pf-v5-color-black-800;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&.pf-m-opaque-200 {
|
|
21
|
-
background-color: $pf-v5-color-black-900;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#{$pf-v5--theme-light--placeholder--class} {
|
|
26
|
-
@extend %pf-v6-t-light;
|
|
27
|
-
|
|
28
|
-
&.pf-m-transparent {
|
|
29
|
-
background-color: transparent;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&.pf-m-opaque-100 {
|
|
33
|
-
background-color: $pf-v5-color-white;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&.pf-m-opaque-200 {
|
|
37
|
-
background-color: $pf-v5-color-black-100;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&.pf-m-opaque-300 {
|
|
41
|
-
background-color: $pf-v5-color-black-200;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
.pf-v6-t-light {
|
|
2
|
-
--pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
|
|
3
|
-
--pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
|
|
4
|
-
--pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
|
|
5
|
-
--pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
|
|
6
|
-
--pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
|
|
7
|
-
--pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
|
|
8
|
-
--pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
|
|
9
|
-
--pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
|
|
10
|
-
--pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.pf-v6-t-dark {
|
|
14
|
-
--pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
|
|
15
|
-
--pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
|
|
16
|
-
--pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
|
|
17
|
-
--pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
|
|
18
|
-
--pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
|
|
19
|
-
--pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
|
|
20
|
-
--pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
|
|
21
|
-
--pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
|
|
22
|
-
--pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
|
|
23
|
-
}
|
|
24
|
-
.pf-v6-t-dark .pf-v6-c-button {
|
|
25
|
-
--pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.pf-v6-t-light {
|
|
29
|
-
--pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
|
|
30
|
-
--pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
|
|
31
|
-
--pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
|
|
32
|
-
--pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
|
|
33
|
-
--pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
|
|
34
|
-
--pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
|
|
35
|
-
--pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
|
|
36
|
-
--pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
|
|
37
|
-
--pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.pf-v6-t-dark {
|
|
41
|
-
--pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
|
|
42
|
-
--pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
|
|
43
|
-
--pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
|
|
44
|
-
--pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
|
|
45
|
-
--pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
|
|
46
|
-
--pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
|
|
47
|
-
--pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
|
|
48
|
-
--pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
|
|
49
|
-
--pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
|
|
50
|
-
}
|
|
51
|
-
.pf-v6-t-dark .pf-v6-c-button {
|
|
52
|
-
--pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.pf-v6-t-dark.pf-m-transparent {
|
|
56
|
-
background-color: transparent;
|
|
57
|
-
}
|
|
58
|
-
.pf-v6-t-dark.pf-m-transparent-100 {
|
|
59
|
-
background-color: rgba(3, 3, 3, 0.42);
|
|
60
|
-
}
|
|
61
|
-
.pf-v6-t-dark.pf-m-transparent-200 {
|
|
62
|
-
background-color: rgba(3, 3, 3, 0.6);
|
|
63
|
-
}
|
|
64
|
-
.pf-v6-t-dark.pf-m-opaque-100 {
|
|
65
|
-
background-color: #3c3f42;
|
|
66
|
-
}
|
|
67
|
-
.pf-v6-t-dark.pf-m-opaque-200 {
|
|
68
|
-
background-color: #151515;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.pf-v6-t-light.pf-m-transparent {
|
|
72
|
-
background-color: transparent;
|
|
73
|
-
}
|
|
74
|
-
.pf-v6-t-light.pf-m-opaque-100 {
|
|
75
|
-
background-color: #fff;
|
|
76
|
-
}
|
|
77
|
-
.pf-v6-t-light.pf-m-opaque-200 {
|
|
78
|
-
background-color: #fafafa;
|
|
79
|
-
}
|
|
80
|
-
.pf-v6-t-light.pf-m-opaque-300 {
|
|
81
|
-
background-color: #f0f0f0;
|
|
82
|
-
}
|