@patternfly/patternfly 4.196.5 → 4.196.8

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 (17) hide show
  1. package/RELEASE-NOTES.md +25 -1
  2. package/base/themes/dark/_chart-globals.scss +39 -0
  3. package/base/themes/dark/_globals.scss +5 -0
  4. package/base/themes/dark/_variables.scss +95 -0
  5. package/components/Menu/menu.css +1 -4
  6. package/components/Menu/menu.scss +1 -3
  7. package/docs/components/NotificationBadge/examples/NotificationBadge.md +2 -2
  8. package/docs/demos/Table/examples/Table.md +29 -33
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +1 -4
  11. package/patternfly.css +1 -4
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/sass-utilities/themes/dark/colors.scss +16 -0
  15. package/sass-utilities/themes/dark/mixins.scss +5 -0
  16. package/sass-utilities/themes/dark/placeholders.scss +28 -0
  17. package/sass-utilities/themes/dark/scss-variables.scss +86 -0
package/sass-utilities/themes/dark/colors.scss ADDED
@@ -0,0 +1,16 @@
1
+ // color palette changes
2
+ $pf-color-black-50: #e0e0e0;
3
+ $pf-color-black-100: #c6c7c8;
4
+ $pf-color-black-200: #aaabac;
5
+ $pf-color-black-300: #868789;
6
+ $pf-color-black-400: #57585a;
7
+ $pf-color-black-500: #444548;
8
+ $pf-color-black-600: #36373a;
9
+ $pf-color-black-700: #26292d;
10
+ $pf-color-black-800: #1b1d21;
11
+ $pf-color-black-850: #212427;
12
+ $pf-color-black-900: #0f1214;
13
+ $pf-color-black-1000: #030303;
14
+ $pf-color-red-9999: #fe5142;
15
+ $pf-color-red-8888: #fe6a5d;
16
+ $pf-color-blue-300: #1fa7f8;
package/sass-utilities/themes/dark/mixins.scss ADDED
@@ -0,0 +1,5 @@
1
+ @mixin pf-theme-dark--t-dark($color: "--pf-global--Color--100") {
2
+ color: var(#{$color});
3
+
4
+ @extend %pf-theme-dark--t-dark;
5
+ }
package/sass-utilities/themes/dark/placeholders.scss ADDED
@@ -0,0 +1,28 @@
1
+ %pf-theme-dark--t-dark {
2
+ // global
3
+ --pf-global--Color--100: #{$pf-global--Color--100};
4
+ --pf-global--Color--200: #{$pf-global--Color--200};
5
+ --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
6
+ --pf-global--primary-color--100: #{$pf-global--primary-color--100};
7
+ --pf-global--link--Color: #{$pf-global--link--Color};
8
+ --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
9
+ --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
10
+
11
+ .pf-c-button {
12
+ // primary button
13
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
14
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
15
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
16
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
17
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
18
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
19
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
20
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
21
+
22
+ // secondary button
23
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
24
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
25
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
26
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
27
+ }
28
+ }
package/sass-utilities/themes/dark/scss-variables.scss ADDED
@@ -0,0 +1,86 @@
1
+ // background colors
2
+ $pf-global--BackgroundColor--100: $pf-color-black-800; // primary background color
3
+ $pf-global--BackgroundColor--150: $pf-color-black-850; // in-between special use case background color
4
+ $pf-global--BackgroundColor--200: $pf-color-black-900; // secondary background color
5
+ $pf-global--BackgroundColor--300: $pf-color-black-700; // floats on top of other elements
6
+ $pf-global--BackgroundColor--400: $pf-color-black-600; // form control & item hover on --pf-global--BackgroundColor--300
7
+ $pf-global--BorderColor--100: $pf-color-black-500; // primary border color
8
+ $pf-global--BorderColor--200: $pf-color-black-500; // secondary border color
9
+ $pf-global--BorderColor--300: $pf-color-black-400;
10
+ $pf-global--BorderColor--400: $pf-color-black-200; // form control bottom border
11
+
12
+ // text colors
13
+ $pf-global--Color--100: $pf-color-black-50; // primary text color
14
+ $pf-global--Color--200: $pf-color-black-200; // secondary text color
15
+ $pf-global--active-color--100: $pf-color-blue-300;
16
+ $pf-global--primary-color--100: $pf-color-blue-300; // primary blue against dark background - background, text, etc
17
+ $pf-global--primary-color--300: $pf-color-blue-400; // primary blue with white text on top for contrast
18
+ $pf-global--success-color--100: $pf-color-green-400;
19
+ $pf-global--warning-color--100: $pf-color-gold-400;
20
+ $pf-global--warning-color--200: $pf-color-gold-300;
21
+ $pf-global--danger-color--100: $pf-color-red-9999;
22
+ $pf-global--danger-color--200: $pf-color-red-8888;
23
+ $pf-global--link--Color: $pf-color-blue-300;
24
+ $pf-global--link--Color--hover: $pf-color-blue-200;
25
+ $pf-global--disabled-color--100: $pf-color-black-400; // disabled text on regular background color
26
+ $pf-global--disabled-color--200: $pf-color-black-500; // disabled background color
27
+ $pf-global--disabled-color--300: $pf-color-black-200; // disabled text on disabled background color
28
+
29
+ // icons
30
+ $pf-global--icon--Color--light: $pf-color-black-300;
31
+
32
+ // theme color resets
33
+ $pf-global--Color--dark-100: $pf-global--Color--100;
34
+ $pf-global--Color--dark-200: $pf-global--Color--200;
35
+ $pf-global--Color--light-100: $pf-global--Color--100;
36
+ $pf-global--Color--light-200: $pf-global--Color--200;
37
+ $pf-global--Color--light-300: $pf-global--Color--300;
38
+ $pf-global--BorderColor--dark-100: $pf-global--BorderColor--100;
39
+ $pf-global--BorderColor--light-100: $pf-global--BorderColor--100;
40
+ $pf-global--primary-color--light-100: $pf-global--primary-color--100;
41
+ $pf-global--primary-color--dark-100: $pf-global--primary-color--100;
42
+ $pf-global--link--Color--light: $pf-global--link--Color;
43
+ $pf-global--link--Color--light--hover: $pf-global--link--Color--hover;
44
+ $pf-global--link--Color--dark: $pf-global--link--Color;
45
+ $pf-global--link--Color--dark--hover: $pf-global--link--Color--hover;
46
+ $pf-global--BackgroundColor--light-100: $pf-global--BackgroundColor--100;
47
+ $pf-global--BackgroundColor--light-200: $pf-global--BackgroundColor--200;
48
+ $pf-global--BackgroundColor--light-300: $pf-global--BackgroundColor--300;
49
+ $pf-global--BackgroundColor--dark-100: $pf-global--BackgroundColor--100;
50
+ $pf-global--BackgroundColor--dark-200: $pf-global--BackgroundColor--200;
51
+ $pf-global--BackgroundColor--dark-300: $pf-global--BackgroundColor--300;
52
+ $pf-global--BackgroundColor--dark-400: $pf-global--BackgroundColor--400;
53
+ $pf-global--icon--Color--light: $pf-color-black-200;
54
+ $pf-global--icon--Color--dark: $pf-color-black-200;
55
+
56
+ // Shadows
57
+ // small
58
+ $pf-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .48), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .24);
59
+ $pf-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
60
+ $pf-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
61
+ $pf-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
62
+ $pf-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
63
+
64
+ // medium
65
+ $pf-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .48), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .24);
66
+ $pf-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
67
+ $pf-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
68
+ $pf-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
69
+ $pf-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
70
+
71
+ // large
72
+ $pf-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .64), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .32);
73
+ $pf-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
74
+ $pf-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
75
+ $pf-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
76
+ $pf-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
77
+
78
+ // x-large
79
+ $pf-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .64), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .4);
80
+ $pf-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
81
+ $pf-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
82
+ $pf-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
83
+ $pf-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
84
+
85
+ // inset
86
+ $pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-color-black-1000;