@hazelcast/ui 1.3.2-next.63 → 1.3.2-next.65

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 (6) hide show
  1. package/lib/Alert.module.scss +17 -13
  2. package/lib/Notification.module.scss +10 -10
  3. package/lib/PasswordField.d.ts +1 -1
  4. package/lib/Toast.module.scss +6 -6
  5. package/package.json +2 -2
  6. package/styles/constants/_colors.scss +12 -12
package/lib/Alert.module.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  // TODO: potential max-height
5
5
  .alert {
6
6
  display: inline-flex;
7
- border-radius: c.$borderRadius;
8
7
  padding: c.$grid * 2.5;
9
8
  width: c.$alertWidth;
9
+ border-left: 5px solid transparent;
10
10
 
11
11
  .icon {
12
12
  flex-shrink: 0;
@@ -36,16 +36,17 @@
36
36
 
37
37
  /* Theme - Success */
38
38
  &.success {
39
- color: c.$colorNeutralWhite;
40
- background-color: c.$colorSuccess;
39
+ color: c.$colorText;
40
+ border-color: c.$colorSuccess;
41
+ background-color: rgba(c.$colorSuccess, 30%);
41
42
 
42
43
  .icon {
43
- color: c.$colorNeutralWhite;
44
+ color: c.$colorText;
44
45
  }
45
46
 
46
47
  .actions {
47
48
  .action {
48
- color: c.$colorNeutralWhite;
49
+ color: c.$colorText;
49
50
  }
50
51
  }
51
52
  }
@@ -53,10 +54,11 @@
53
54
  /* Theme - Info */
54
55
  &.info {
55
56
  color: c.$colorText;
56
- background-color: c.$colorInfoLight;
57
+ border-color: c.$colorInfo;
58
+ background-color: rgba(c.$colorInfo, 30%);
57
59
 
58
60
  .icon {
59
- color: c.$colorInfoDark;
61
+ color: c.$colorText;
60
62
  }
61
63
 
62
64
  .actions {
@@ -69,10 +71,11 @@
69
71
  /* Theme - Warning */
70
72
  &.warning {
71
73
  color: c.$colorText;
72
- background-color: c.$colorWarningLight;
74
+ border-color: c.$colorWarning;
75
+ background-color: rgba(c.$colorWarning, 30%);
73
76
 
74
77
  .icon {
75
- color: c.$colorWarningDark;
78
+ color: c.$colorText;
76
79
  }
77
80
 
78
81
  .actions {
@@ -84,16 +87,17 @@
84
87
 
85
88
  /* Theme - Critical */
86
89
  &.critical {
87
- color: c.$colorNeutralWhite;
88
- background-color: c.$colorError;
90
+ color: c.$colorText;
91
+ border-color: c.$colorError;
92
+ background-color: rgba(c.$colorError, 30%);
89
93
 
90
94
  .icon {
91
- color: c.$colorNeutralWhite;
95
+ color: c.$colorText;
92
96
  }
93
97
 
94
98
  .actions {
95
99
  .action {
96
- color: c.$colorNeutralWhite;
100
+ color: c.$colorText;
97
101
  }
98
102
  }
99
103
  }
package/lib/Notification.module.scss CHANGED
@@ -37,15 +37,15 @@
37
37
 
38
38
  /* Theme - success */
39
39
  &.success {
40
- color: c.$colorNeutralWhite;
41
- background-color: c.$colorSuccess;
40
+ color: c.$colorText;
41
+ background-color: c.$colorSuccessLight;
42
42
 
43
43
  .icon {
44
- color: c.$colorNeutralWhite;
44
+ color: c.$colorText;
45
45
  }
46
46
 
47
47
  .link {
48
- color: c.$colorNeutralWhite;
48
+ color: c.$colorText;
49
49
  }
50
50
  }
51
51
 
@@ -69,25 +69,25 @@
69
69
  background-color: c.$colorWarningLight;
70
70
 
71
71
  .icon {
72
- color: c.$colorWarningDark;
72
+ color: c.$colorText;
73
73
  }
74
74
 
75
75
  .link {
76
- color: c.$colorWarningDark;
76
+ color: c.$colorText;
77
77
  }
78
78
  }
79
79
 
80
80
  /* Theme - error */
81
81
  &.error {
82
- color: c.$colorNeutralWhite;
83
- background-color: c.$colorError;
82
+ color: c.$colorText;
83
+ background-color: c.$colorErrorLight;
84
84
 
85
85
  .icon {
86
- color: c.$colorNeutralWhite;
86
+ color: c.$colorText;
87
87
  }
88
88
 
89
89
  .link {
90
- color: c.$colorNeutralWhite;
90
+ color: c.$colorText;
91
91
  }
92
92
  }
93
93
  }
package/lib/PasswordField.d.ts CHANGED
@@ -8,7 +8,6 @@ type PasswordFieldCoreProps = {
8
8
  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
9
9
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
10
10
  error?: string;
11
- hideToggle?: boolean;
12
11
  };
13
12
  export type PasswordFieldExtraProps = {
14
13
  showIconLabel?: string;
@@ -23,6 +22,7 @@ export type PasswordFieldExtraProps = {
23
22
  errorClassName?: string;
24
23
  withIcon?: boolean;
25
24
  initiallyVisible?: boolean;
25
+ hideToggle?: boolean;
26
26
  } & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'>;
27
27
  export type PasswordFieldProps = PasswordFieldCoreProps & PasswordFieldExtraProps;
28
28
  export declare const PasswordField: FC<PasswordFieldProps>;
package/lib/Toast.module.scss CHANGED
@@ -24,8 +24,8 @@
24
24
  }
25
25
 
26
26
  &.success {
27
- background-color: c.$colorSuccess;
28
- color: c.$colorNeutralWhite;
27
+ background-color: c.$colorSuccessLight;
28
+ color: c.$colorText;
29
29
  }
30
30
 
31
31
  &.info {
@@ -33,7 +33,7 @@
33
33
  color: c.$colorText;
34
34
 
35
35
  .icon {
36
- color: c.$colorInfoDark;
36
+ color: c.$colorText;
37
37
  }
38
38
  }
39
39
 
@@ -42,12 +42,12 @@
42
42
  color: c.$colorText;
43
43
 
44
44
  .icon {
45
- color: c.$colorWarningDark;
45
+ color: c.$colorText;
46
46
  }
47
47
  }
48
48
 
49
49
  &.critical {
50
- background-color: c.$colorError;
51
- color: c.$colorNeutralWhite;
50
+ background-color: c.$colorErrorLight;
51
+ color: c.$colorText;
52
52
  }
53
53
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hazelcast/ui",
3
- "version": "1.3.2-next.63+7c60143",
3
+ "version": "1.3.2-next.65+7b099f2",
4
4
  "description": "Hazelcast design system components",
5
5
  "author": "",
6
6
  "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -117,5 +117,5 @@
117
117
  "react": "^17 || ^18",
118
118
  "react-dom": "^17 || ^18"
119
119
  },
120
- "gitHead": "7c601437902adfbe3d4bd51ab913239e726241ab"
120
+ "gitHead": "7b099f2277fedf3287bd730086b26f687f99128f"
121
121
  }
package/styles/constants/_colors.scss CHANGED
@@ -6,18 +6,18 @@ $colorNeutralWhite: #fff !default;
6
6
  $colorNeutralLighter: #fafafa !default;
7
7
  $colorNeutralLight: #b7c1cb !default;
8
8
  $colorNeutral: #dbdbdb !default;
9
- $colorSuccessLight: #68c200 !default;
10
- $colorSuccess: #008a00 !default;
11
- $colorSuccessDark: #005c09 !default;
12
- $colorInfoLight: #cbdbff !default;
13
- $colorInfo: #87a7ee !default;
14
- $colorInfoDark: #4a71c4 !default;
15
- $colorWarningLight: #f9b721 !default;
16
- $colorWarning: #f47027 !default;
17
- $colorWarningDark: #ad6200 !default;
18
- $colorErrorLight: #e75851 !default;
19
- $colorError: #b00020 !default;
20
- $colorErrorDark: #891b15 !default;
9
+ $colorSuccess: #85da66 !default;
10
+ $colorSuccessLight: #d5f0d1 !default;
11
+ $colorSuccessDark: darken($colorSuccess, 10%) !default;
12
+ $colorInfo: #76e7e7 !default;
13
+ $colorInfoLight: #d0f4f8 !default;
14
+ $colorInfoDark: darken($colorInfo, 10%) !default;
15
+ $colorWarning: #ffec44 !default;
16
+ $colorWarningLight: #f9f6c7 !default;
17
+ $colorWarningDark: darken($colorWarning, 15%) !default;
18
+ $colorError: #dc084b !default;
19
+ $colorErrorLight: #efb1c9 !default;
20
+ $colorErrorDark: darken($colorError, 10%) !default;
21
21
  $colorText: #061827 !default;
22
22
  $colorTextSecondary: #707482 !default;
23
23
  $colorTextSubdued: #69707d !default;