@patternfly/patternfly 4.196.6 → 4.196.7

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 (9) hide show
  1. package/RELEASE-NOTES.md +3 -2
  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/package.json +1 -1
  6. package/sass-utilities/themes/dark/colors.scss +16 -0
  7. package/sass-utilities/themes/dark/mixins.scss +5 -0
  8. package/sass-utilities/themes/dark/placeholders.scss +28 -0
  9. package/sass-utilities/themes/dark/scss-variables.scss +86 -0
package/RELEASE-NOTES.md CHANGED
@@ -5,7 +5,7 @@ releaseNoteTOC: true
5
5
  ---
6
6
  ## 2022.07 release notes (2022-06-03)
7
7
  Packages released:
8
- - [@patternfly/patternfly@v4.196.6](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.6)
8
+ - [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
9
9
 
10
10
  ### Components
11
11
  - **Calendar month:** Improved layout of nav controls ([#4862](https://github.com/patternfly/patternfly/pull/4862))
@@ -22,7 +22,8 @@ Packages released:
22
22
  ### Other
23
23
  - **Theme:**
24
24
  * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
25
- * Update dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
25
+ * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
26
+ * Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
26
27
  - **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
27
28
 
28
29
 
package/base/themes/dark/_chart-globals.scss ADDED
@@ -0,0 +1,39 @@
1
+ @import "../../../sass-utilities/colors";
2
+ @import "../../../sass-utilities/scss-variables";
3
+
4
+ // Chart colors
5
+
6
+ // blue
7
+ $pf-chart-color-blue-100: #add6ff;
8
+ $pf-chart-color-blue-200: #85c2ff;
9
+ $pf-chart-color-blue-300: #47a3ff;
10
+ $pf-chart-color-blue-400: #0a85ff;
11
+ $pf-chart-color-blue-500: $pf-color-blue-400;
12
+
13
+ // green
14
+ $pf-chart-color-green-100: #d6eed3;
15
+ $pf-chart-color-green-200: #aedca7;
16
+ $pf-chart-color-green-300: #85cb7c;
17
+ $pf-chart-color-green-400: #5cb950;
18
+ $pf-chart-color-green-500: $pf-color-green-500;
19
+
20
+ // cyan
21
+ $pf-chart-color-cyan-100: #b9feff;
22
+ $pf-chart-color-cyan-200: #86fdff;
23
+ $pf-chart-color-cyan-300: #00b5b8;
24
+ $pf-chart-color-cyan-400: #008c8f;
25
+ $pf-chart-color-cyan-500: $pf-color-cyan-400;
26
+
27
+ // purple
28
+ $pf-chart-color-purple-100: #cec8e4;
29
+ $pf-chart-color-purple-200: #a99fd1;
30
+ $pf-chart-color-purple-300: #9183c3;
31
+ $pf-chart-color-purple-400: #7968b6;
32
+ $pf-chart-color-purple-500: $pf-color-purple-500;
33
+
34
+ // red
35
+ $pf-chart-color-red-100: #ffadad;
36
+ $pf-chart-color-red-200: #ff7070;
37
+ $pf-chart-color-red-300: #ff4747;
38
+ $pf-chart-color-red-400: #ff0a0a;
39
+ $pf-chart-color-red-500: $pf-color-red-200;
package/base/themes/dark/_globals.scss ADDED
@@ -0,0 +1,5 @@
1
+ @mixin globals() {
2
+ // stylelint-disable property-no-unknown
3
+ color-scheme: dark;
4
+ // stylelint-enable
5
+ }
package/base/themes/dark/_variables.scss ADDED
@@ -0,0 +1,95 @@
1
+ @import "../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin _variables() {
4
+ // palette changes
5
+ --pf-global--palette--black-50: #{$pf-color-black-50};
6
+ --pf-global--palette--black-100: #{$pf-color-black-100};
7
+ --pf-global--palette--black-200: #{$pf-color-black-200};
8
+ --pf-global--palette--black-300: #{$pf-color-black-300};
9
+ --pf-global--palette--black-400: #{$pf-color-black-400};
10
+ --pf-global--palette--black-500: #{$pf-color-black-500};
11
+ --pf-global--palette--black-600: #{$pf-color-black-600};
12
+ --pf-global--palette--black-700: #{$pf-color-black-700};
13
+ --pf-global--palette--black-800: #{$pf-color-black-800};
14
+ --pf-global--palette--black-900: #{$pf-color-black-900};
15
+ --pf-global--palette--red-9999: #{$pf-color-red-9999};
16
+ --pf-global--palette--red-8888: #{$pf-color-red-8888};
17
+ --pf-global--palette--blue-300: #{$pf-color-blue-300};
18
+
19
+ // background colors
20
+ --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
21
+ --pf-global--BackgroundColor--150: #{$pf-global--BackgroundColor--150};
22
+ --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
23
+ --pf-global--BackgroundColor--300: #{$pf-global--BackgroundColor--300};
24
+ --pf-global--BackgroundColor--400: #{$pf-global--BackgroundColor--400};
25
+ --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
26
+ --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
27
+ --pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
28
+ --pf-global--BorderColor--400: #{$pf-global--BorderColor--400};
29
+
30
+ // text colors
31
+ --pf-global--Color--100: #{$pf-global--Color--100};
32
+ --pf-global--Color--200: #{$pf-global--Color--200};
33
+ --pf-global--active-color--100: #{$pf-global--active-color--100};
34
+ --pf-global--primary-color--100: #{$pf-global--primary-color--100};
35
+ --pf-global--primary-color--300: #{$pf-global--primary-color--300};
36
+ --pf-global--success-color--100: #{$pf-global--success-color--100};
37
+ --pf-global--warning-color--100: #{$pf-global--warning-color--100};
38
+ --pf-global--warning-color--200: #{$pf-global--warning-color--200};
39
+ --pf-global--danger-color--100: #{$pf-global--danger-color--100};
40
+ --pf-global--danger-color--200: #{$pf-global--danger-color--200};
41
+ --pf-global--link--Color: #{$pf-global--link--Color};
42
+ --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
43
+ --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
44
+ --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
45
+ --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};
46
+
47
+ // icons
48
+ --pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
49
+ --pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
50
+
51
+ // theme color resets
52
+ --pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
53
+ --pf-global--Color--dark-200: #{$pf-global--Color--dark-200};
54
+ --pf-global--Color--light-100: #{$pf-global--Color--light-100};
55
+ --pf-global--Color--light-200: #{$pf-global--Color--light-200};
56
+ --pf-global--Color--light-300: #{$pf-global--Color--light-300};
57
+ --pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
58
+ --pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
59
+ --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
60
+ --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
61
+ --pf-global--link--Color--light: #{$pf-global--link--Color--light};
62
+ --pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
63
+ --pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
64
+ --pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
65
+ --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
66
+ --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
67
+ --pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
68
+ --pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
69
+ --pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
70
+ --pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
71
+ --pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
72
+
73
+ // Shadows
74
+ --pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
75
+ --pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
76
+ --pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
77
+ --pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
78
+ --pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
79
+ --pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
80
+ --pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
81
+ --pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
82
+ --pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
83
+ --pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
84
+ --pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
85
+ --pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
86
+ --pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
87
+ --pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
88
+ --pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
89
+ --pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
90
+ --pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
91
+ --pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
92
+ --pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
93
+ --pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
94
+ --pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};
95
+ }
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": "4.196.6",
4
+ "version": "4.196.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
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;