@hazelcast/ui 4.0.2 → 4.0.4

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 (45) hide show
  1. package/lib/components/Alert.module.css +14 -8
  2. package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.css +4 -0
  3. package/lib/components/Badge.module.css +23 -15
  4. package/lib/components/Button.module.css +31 -13
  5. package/lib/components/Calendar/Calendar.module.css +13 -13
  6. package/lib/components/Card.module.css +3 -3
  7. package/lib/components/Carousel.module.css +2 -2
  8. package/lib/components/ContextMenu.module.css +4 -4
  9. package/lib/components/Error.module.css +1 -1
  10. package/lib/components/Help.js +1 -2
  11. package/lib/components/Help.js.map +1 -1
  12. package/lib/components/Help.module.css +4 -0
  13. package/lib/components/IconButton.module.css +31 -13
  14. package/lib/components/Label.module.css +1 -1
  15. package/lib/components/Modal.d.ts +1 -0
  16. package/lib/components/Modal.js +2 -2
  17. package/lib/components/Modal.js.map +1 -1
  18. package/lib/components/Notification.module.css +13 -7
  19. package/lib/components/Overlay.module.css +2 -2
  20. package/lib/components/Pagination.module.css +11 -11
  21. package/lib/components/Popover.module.css +2 -2
  22. package/lib/components/Select/CheckableSelectField.js +2 -2
  23. package/lib/components/Select/CheckableSelectField.js.map +1 -1
  24. package/lib/components/Select/CheckableSelectField.module.css +4 -0
  25. package/lib/components/Table/Cell.module.css +4 -4
  26. package/lib/components/Table/Header.module.css +10 -10
  27. package/lib/components/Table/Row.module.css +9 -9
  28. package/lib/components/Table/Table.module.css +2 -2
  29. package/lib/components/Table/TableContent.module.css +1 -1
  30. package/lib/components/Toast/Toast.module.css +13 -10
  31. package/lib/components/Tooltip.module.css +4 -4
  32. package/lib/hooks/index.d.ts +2 -0
  33. package/lib/hooks/index.js +1 -0
  34. package/lib/hooks/index.js.map +1 -1
  35. package/lib/hooks/useColorScheme.d.ts +7 -0
  36. package/lib/hooks/useColorScheme.js +23 -0
  37. package/lib/hooks/useColorScheme.js.map +1 -0
  38. package/lib/index.d.ts +2 -1
  39. package/lib/index.js +1 -1
  40. package/lib/index.js.map +1 -1
  41. package/lib/utils/colorScheme.d.ts +5 -0
  42. package/lib/utils/colorScheme.js +24 -0
  43. package/lib/utils/colorScheme.js.map +1 -0
  44. package/package.json +1 -1
  45. package/styles/variables.css +122 -18
package/lib/components/Alert.module.css CHANGED
@@ -1,7 +1,13 @@
1
1
  .alert {
2
- --alert-color: var(--hive-color-text);
3
- --alert-surface: lab(from var(--alert-color) 95% a b);
4
- --alert-border: lab(from var(--alert-color) 84% a b);
2
+ --alert-color: light-dark(var(--hive-color-text), var(--hive-color-text-v4));
3
+ --alert-surface: light-dark(
4
+ lab(from var(--alert-color) 95% a b),
5
+ color-mix(in oklab, var(--alert-color) 12%, var(--hive-color-neutral-white-v4))
6
+ );
7
+ --alert-border: light-dark(
8
+ lab(from var(--alert-color) 84% a b),
9
+ color-mix(in oklab, var(--alert-color) 40%, var(--hive-color-neutral-white-v4))
10
+ );
5
11
 
6
12
  box-sizing: border-box;
7
13
  display: flex;
@@ -64,19 +70,19 @@
64
70
  }
65
71
 
66
72
  .success {
67
- --alert-color: var(--hive-color-success-darkest);
73
+ --alert-color: var(--hive-color-success-text-v4);
68
74
  }
69
75
 
70
76
  .info {
71
- --alert-color: var(--hive-color-info-darkest);
77
+ --alert-color: var(--hive-color-info-text-v4);
72
78
  }
73
79
 
74
80
  .warning {
75
- --alert-color: var(--hive-color-warning-darkest);
81
+ --alert-color: var(--hive-color-warning-text-v4);
76
82
  }
77
83
 
78
84
  .critical {
79
- --alert-color: var(--hive-color-error);
85
+ --alert-color: var(--hive-color-error-text-v4);
80
86
  }
81
87
 
82
88
  .actions {
@@ -85,7 +91,7 @@
85
91
  }
86
92
 
87
93
  .action {
88
- color: var(--alert-color);
94
+ color: var(--alert-color) !important;
89
95
  }
90
96
 
91
97
  .action:not(:last-child) {
package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.css CHANGED
@@ -3,6 +3,10 @@
3
3
  align-items: center;
4
4
  }
5
5
 
6
+ .root .toggleButton {
7
+ color: var(--hive-color-neutral-lighter);
8
+ }
9
+
6
10
  .separator {
7
11
  border-left: 1px solid var(--hive-color-neutral-light);
8
12
  }
package/lib/components/Badge.module.css CHANGED
@@ -15,32 +15,40 @@
15
15
  }
16
16
 
17
17
  &.neutral {
18
- background-color: lab(from var(--hive-color-text-secondary) 97% a b);
19
- color: var(--hive-color-text-secondary);
20
- border: 1px solid var(--hive-color-text-secondary);
18
+ --badge-color: light-dark(var(--hive-color-text-secondary), var(--hive-color-text-secondary-v4));
19
+ background-color: light-dark(
20
+ lab(from var(--badge-color) 97% a b),
21
+ color-mix(in oklab, var(--badge-color) 12%, var(--hive-color-neutral-white-v4))
22
+ );
23
+ color: var(--badge-color);
24
+ border: 1px solid var(--badge-color);
25
+ }
26
+
27
+ &.success,
28
+ &.info,
29
+ &.warning,
30
+ &.critical {
31
+ background-color: light-dark(
32
+ lab(from var(--badge-color) 95% a b),
33
+ color-mix(in oklab, var(--badge-color) 12%, var(--hive-color-neutral-white-v4))
34
+ );
35
+ color: var(--badge-color);
36
+ border: 1px solid var(--badge-color);
21
37
  }
22
38
 
23
39
  &.success {
24
- background-color: lab(from var(--hive-color-success-darkest) 95% a b);
25
- color: var(--hive-color-success-darkest);
26
- border: 1px solid var(--hive-color-success-darkest);
40
+ --badge-color: var(--hive-color-success-text-v4);
27
41
  }
28
42
 
29
43
  &.info {
30
- background-color: lab(from var(--hive-color-info-darkest) 95% a b);
31
- color: var(--hive-color-info-darkest);
32
- border: 1px solid var(--hive-color-info-darkest);
44
+ --badge-color: var(--hive-color-info-text-v4);
33
45
  }
34
46
 
35
47
  &.warning {
36
- background-color: lab(from var(--hive-color-warning-darkest) 95% a b);
37
- color: var(--hive-color-warning-darkest);
38
- border: 1px solid var(--hive-color-warning-darkest);
48
+ --badge-color: var(--hive-color-warning-text-v4);
39
49
  }
40
50
 
41
51
  &.critical {
42
- background-color: lab(from var(--hive-color-error) 95% a b);
43
- color: var(--hive-color-error);
44
- border: 1px solid var(--hive-color-error);
52
+ --badge-color: var(--hive-color-error-text-v4);
45
53
  }
46
54
  }
package/lib/components/Button.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --button-padding-x: 16px;
4
4
  --button-icon-gap: 8px;
5
5
  --button-color-base: var(--hive-color-brand-v4);
6
- --button-color-fg-on-base: var(--hive-color-text-v4);
6
+ --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
7
7
  --button-color-fg-on-light: var(--hive-color-text-v4);
8
8
  --button-bg: var(--button-color-base);
9
9
  --button-bg-hover: oklch(from var(--button-bg) calc(l - 0.04) c h);
@@ -104,18 +104,36 @@
104
104
  }
105
105
 
106
106
  .variantGhost.colorPrimary {
107
- --button-bg-hover: oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h);
108
- --button-bg-active: oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h);
107
+ --button-bg-hover: light-dark(
108
+ oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h),
109
+ color-mix(in oklab, var(--hive-color-brand-v4) 15%, transparent)
110
+ );
111
+ --button-bg-active: light-dark(
112
+ oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h),
113
+ color-mix(in oklab, var(--hive-color-brand-v4) 25%, transparent)
114
+ );
109
115
  }
110
116
 
111
117
  .variantGhost.colorWarning {
112
- --button-bg-hover: oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h);
113
- --button-bg-active: oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h);
118
+ --button-bg-hover: light-dark(
119
+ oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h),
120
+ color-mix(in oklab, var(--hive-color-warning-text-v4) 15%, transparent)
121
+ );
122
+ --button-bg-active: light-dark(
123
+ oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h),
124
+ color-mix(in oklab, var(--hive-color-warning-text-v4) 25%, transparent)
125
+ );
114
126
  }
115
127
 
116
128
  .variantGhost.colorDanger {
117
- --button-bg-hover: oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h);
118
- --button-bg-active: oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h);
129
+ --button-bg-hover: light-dark(
130
+ oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h),
131
+ color-mix(in oklab, var(--hive-color-error-text-v4) 15%, transparent)
132
+ );
133
+ --button-bg-active: light-dark(
134
+ oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h),
135
+ color-mix(in oklab, var(--hive-color-error-text-v4) 25%, transparent)
136
+ );
119
137
  }
120
138
 
121
139
  .variantLink {
@@ -132,7 +150,7 @@
132
150
 
133
151
  .colorPrimary {
134
152
  --button-color-base: var(--hive-color-brand-v4);
135
- --button-color-fg-on-base: var(--hive-color-text-v4);
153
+ --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
136
154
  --button-color-fg-on-light: var(--hive-color-text-v4);
137
155
  }
138
156
 
@@ -145,13 +163,13 @@
145
163
  .colorWarning {
146
164
  --button-color-base: var(--hive-color-warning);
147
165
  --button-color-fg-on-base: var(--hive-color-warning-darkest);
148
- --button-color-fg-on-light: var(--hive-color-warning-darkest);
166
+ --button-color-fg-on-light: var(--hive-color-warning-text-v4);
149
167
  }
150
168
 
151
169
  .colorDanger {
152
170
  --button-color-base: var(--hive-color-error);
153
- --button-color-fg-on-base: var(--hive-color-neutral-white-v4);
154
- --button-color-fg-on-light: var(--hive-color-error);
171
+ --button-color-fg-on-base: var(--hive-color-text-on-error-v4);
172
+ --button-color-fg-on-light: var(--hive-color-error-text-v4);
155
173
  }
156
174
 
157
175
  .variantOutlined.colorSecondary {
@@ -160,8 +178,8 @@
160
178
  }
161
179
 
162
180
  .variantOutlined.colorWarning {
163
- --button-border: var(--hive-color-warning-darkest);
164
- --button-border-hover: var(--hive-color-warning-darkest);
181
+ --button-border: var(--hive-color-warning-text-v4);
182
+ --button-border-hover: var(--hive-color-warning-text-v4);
165
183
  }
166
184
 
167
185
  .body {
package/lib/components/Calendar/Calendar.module.css CHANGED
@@ -27,7 +27,7 @@
27
27
  .popper :global(.hz-date-picker-popper-container) :global .react-datepicker :global .react-datepicker__header {
28
28
  margin: 0;
29
29
  padding: 0;
30
- background-color: var(--hive-color-neutral-lighter);
30
+ background-color: var(--hive-color-neutral-lighter-v4);
31
31
  border: none;
32
32
  border-radius: 0;
33
33
  }
@@ -59,7 +59,7 @@
59
59
  vertical-align: middle;
60
60
  line-height: calc(var(--hive-grid) * 8) !important;
61
61
  margin: 0;
62
- color: var(--hive-color-text);
62
+ color: var(--hive-color-text-v4);
63
63
  font-family: var(--hive-font-family-text);
64
64
  font-size: var(--hive-font-size-body-small);
65
65
  letter-spacing: var(--hive-letter-spacing-body-small);
@@ -120,8 +120,8 @@
120
120
  border-radius: var(--hive-grid);
121
121
  width: calc(var(--hive-grid) * 8);
122
122
  height: calc(var(--hive-grid) * 8);
123
- background-color: var(--hive-color-neutral-white);
124
- color: var(--hive-color-text-secondary);
123
+ background-color: var(--hive-color-neutral-white-v4);
124
+ color: var(--hive-color-text-secondary-v4);
125
125
  text-align: center;
126
126
  vertical-align: middle;
127
127
  line-height: calc(var(--hive-grid) * 8) !important;
@@ -175,8 +175,8 @@
175
175
  .react-datepicker__week
176
176
  :global
177
177
  .react-datepicker__day--in-range {
178
- background-color: var(--hive-color-info-light);
179
- color: var(--hive-color-neutral-white);
178
+ background-color: var(--hive-color-info-v4);
179
+ color: var(--hive-color-text-v4);
180
180
  }
181
181
 
182
182
  /* Note: Disable default browser outline, force our only on :focus */
@@ -190,8 +190,8 @@
190
190
  .react-datepicker__week
191
191
  :global
192
192
  .react-datepicker__day--selected {
193
- background-color: var(--hive-color-primary-light);
194
- color: var(--hive-color-neutral-white);
193
+ background-color: var(--hive-color-primary-v4);
194
+ color: var(--hive-color-text-on-primary-v4);
195
195
  font-family: var(--hive-font-family-text);
196
196
  font-size: var(--hive-font-size-body-small);
197
197
  letter-spacing: var(--hive-letter-spacing-body-small);
@@ -210,7 +210,7 @@
210
210
  :global
211
211
  .react-datepicker__day--disabled {
212
212
  cursor: default;
213
- color: var(--hive-color-neutral);
213
+ color: var(--hive-color-text-secondary-v4);
214
214
  }
215
215
 
216
216
  .popper
@@ -223,7 +223,7 @@
223
223
  .react-datepicker__week
224
224
  :global
225
225
  .react-datepicker__day:focus-visible {
226
- box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
226
+ box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
227
227
  }
228
228
 
229
229
  .popper
@@ -296,8 +296,8 @@
296
296
  .popper :global(.hz-date-picker-popper-container) .calendar {
297
297
  display: flex;
298
298
  flex-direction: row;
299
- border: var(--hive-border-width) solid var(--hive-color-neutral-light);
300
- background-color: var(--hive-color-neutral-lighter);
299
+ border: var(--hive-border-width) solid var(--hive-color-border-v4);
300
+ background-color: var(--hive-color-neutral-lighter-v4);
301
301
  box-sizing: border-box;
302
302
  }
303
303
 
@@ -312,7 +312,7 @@
312
312
  }
313
313
 
314
314
  .popper :global(.hz-date-picker-popper-container) .calendar .headerContainer .headerMonthAndYear {
315
- color: var(--hive-color-text-secondary);
315
+ color: var(--hive-color-text-secondary-v4);
316
316
  font-family: var(--hive-font-family-text);
317
317
  font-size: var(--hive-font-size-body-small);
318
318
  letter-spacing: var(--hive-letter-spacing-body-small);
package/lib/components/Card.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .wrapper {
2
- background: var(--hive-color-neutral-white);
2
+ background: var(--hive-color-neutral-white-v4);
3
3
 
4
4
  .heading {
5
5
  display: flex;
@@ -23,7 +23,7 @@
23
23
  width: 100%;
24
24
  height: 1px;
25
25
  margin-top: calc(var(--hive-grid) * 4);
26
- background: var(--hive-color-neutral);
26
+ background: var(--hive-color-border-v4);
27
27
  }
28
28
 
29
29
  .content {
@@ -48,7 +48,7 @@
48
48
  .bordered {
49
49
  padding: calc(var(--hive-grid) * 5);
50
50
  border-radius: var(--hive-border-radius);
51
- border: var(--hive-border-width) solid var(--hive-color-neutral);
51
+ border: var(--hive-border-width) solid var(--hive-color-border-v4);
52
52
 
53
53
  .heading {
54
54
  font-weight: var(--hive-font-weight-heading-regular);
package/lib/components/Carousel.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  height: 40px;
34
34
 
35
35
  &:focus-visible {
36
- box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
36
+ box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
37
37
  }
38
38
  }
39
39
 
@@ -48,6 +48,6 @@
48
48
  padding: calc(var(--hive-grid) * 1.5);
49
49
 
50
50
  &:focus-visible {
51
- box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
51
+ box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
52
52
  }
53
53
  }
package/lib/components/ContextMenu.module.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .root {
2
2
  position: absolute;
3
3
  padding: var(--hive-grid) 0;
4
- background: var(--hive-color-neutral-white);
4
+ background: var(--hive-color-neutral-white-v4);
5
5
  border-radius: var(--hive-border-radius);
6
- border: var(--hive-border-width) solid var(--hive-color-neutral);
6
+ border: var(--hive-border-width) solid var(--hive-color-border-v4);
7
7
  z-index: var(--hive-z-index-2000);
8
8
  display: flex;
9
9
  flex-direction: column;
@@ -20,11 +20,11 @@
20
20
  text-align: left;
21
21
 
22
22
  &:focus-visible {
23
- box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
23
+ box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
24
24
  }
25
25
 
26
26
  &:hover {
27
- background: var(--hive-color-neutral);
27
+ background: var(--hive-color-surface-hover-v4);
28
28
  }
29
29
  }
30
30
 
package/lib/components/Error.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  letter-spacing: var(--hive-letter-spacing-body-small);
5
5
  line-height: var(--hive-line-height-body-small);
6
6
  font-weight: var(--hive-font-weight-text-regular);
7
- color: var(--hive-color-error);
7
+ color: var(--hive-color-error-text-v4);
8
8
  display: none;
9
9
 
10
10
  &.hasError {
package/lib/components/Help.js CHANGED
@@ -3,13 +3,12 @@ import { HelpCircle } from 'react-feather';
3
3
  import cn from 'classnames';
4
4
  import { Icon } from './Icon';
5
5
  import { Tooltip } from './Tooltip';
6
- import { styleConstants } from '../utils/styleConstants';
7
6
  import styles from './Help.module.css';
8
7
  export const helpTooltipId = (inputId) => `${inputId}-help`;
9
8
  export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
10
9
  const tooltipId = helpTooltipId(parentId);
11
10
  return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
12
11
  React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
13
- React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConstants.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
12
+ React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, icon: HelpCircle, className: styles.icon, size: size }))));
14
13
  };
15
14
  //# sourceMappingURL=Help.js.map
package/lib/components/Help.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,oBAAC,IAAI,IACH,SAAS,EAAC,MAAM,sBACE,SAAS,EAC3B,KAAK,EAAE,cAAc,CAAC,YAAY,EAClC,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,GACV,CACE,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"Help.js","sourceRoot":"","sources":["../../src/components/Help.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAA;AACvC,OAAO,EAAE,OAAO,EAAe,MAAM,WAAW,CAAA;AAGhD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE,CAAC,GAAG,OAAO,OAAO,CAAA;AAW3E,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAI,GAAG,OAAO,EACd,WAAW,EAAE,QAAQ,GAAG,MAAM,GAC/B,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;QACvF,0CAAgB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YAClE,oBAAC,IAAI,IAAC,SAAS,EAAC,MAAM,sBAAmB,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CACxG,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
package/lib/components/Help.module.css CHANGED
@@ -5,3 +5,7 @@
5
5
  padding-left: var(--hive-grid);
6
6
  padding-right: var(--hive-grid);
7
7
  }
8
+
9
+ .icon {
10
+ color: var(--hive-color-primary-v4);
11
+ }
package/lib/components/IconButton.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .iconButton {
2
2
  --button-size: 36px;
3
3
  --button-color-base: var(--hive-color-brand-v4);
4
- --button-color-fg-on-base: var(--hive-color-text-v4);
4
+ --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
5
5
  --button-color-fg-on-light: var(--hive-color-text-v4);
6
6
  --button-bg: var(--button-color-base);
7
7
  --button-bg-hover: oklch(from var(--button-bg) calc(l - 0.04) c h);
@@ -83,18 +83,36 @@
83
83
  }
84
84
 
85
85
  .variantGhost.colorPrimary {
86
- --button-bg-hover: oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h);
87
- --button-bg-active: oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h);
86
+ --button-bg-hover: light-dark(
87
+ oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h),
88
+ color-mix(in oklab, var(--hive-color-brand-v4) 15%, transparent)
89
+ );
90
+ --button-bg-active: light-dark(
91
+ oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h),
92
+ color-mix(in oklab, var(--hive-color-brand-v4) 25%, transparent)
93
+ );
88
94
  }
89
95
 
90
96
  .variantGhost.colorWarning {
91
- --button-bg-hover: oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h);
92
- --button-bg-active: oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h);
97
+ --button-bg-hover: light-dark(
98
+ oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h),
99
+ color-mix(in oklab, var(--hive-color-warning-text-v4) 15%, transparent)
100
+ );
101
+ --button-bg-active: light-dark(
102
+ oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h),
103
+ color-mix(in oklab, var(--hive-color-warning-text-v4) 25%, transparent)
104
+ );
93
105
  }
94
106
 
95
107
  .variantGhost.colorDanger {
96
- --button-bg-hover: oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h);
97
- --button-bg-active: oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h);
108
+ --button-bg-hover: light-dark(
109
+ oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h),
110
+ color-mix(in oklab, var(--hive-color-error-text-v4) 15%, transparent)
111
+ );
112
+ --button-bg-active: light-dark(
113
+ oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h),
114
+ color-mix(in oklab, var(--hive-color-error-text-v4) 25%, transparent)
115
+ );
98
116
  }
99
117
 
100
118
  .variantLink {
@@ -106,7 +124,7 @@
106
124
 
107
125
  .colorPrimary {
108
126
  --button-color-base: var(--hive-color-brand-v4);
109
- --button-color-fg-on-base: var(--hive-color-text-v4);
127
+ --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
110
128
  --button-color-fg-on-light: var(--hive-color-text-v4);
111
129
  }
112
130
 
@@ -119,13 +137,13 @@
119
137
  .colorWarning {
120
138
  --button-color-base: var(--hive-color-warning);
121
139
  --button-color-fg-on-base: var(--hive-color-warning-darkest);
122
- --button-color-fg-on-light: var(--hive-color-warning-darkest);
140
+ --button-color-fg-on-light: var(--hive-color-warning-text-v4);
123
141
  }
124
142
 
125
143
  .colorDanger {
126
144
  --button-color-base: var(--hive-color-error);
127
- --button-color-fg-on-base: var(--hive-color-neutral-white-v4);
128
- --button-color-fg-on-light: var(--hive-color-error);
145
+ --button-color-fg-on-base: var(--hive-color-text-on-error-v4);
146
+ --button-color-fg-on-light: var(--hive-color-error-text-v4);
129
147
  }
130
148
 
131
149
  .variantOutlined.colorSecondary {
@@ -134,8 +152,8 @@
134
152
  }
135
153
 
136
154
  .variantOutlined.colorWarning {
137
- --button-border: var(--hive-color-warning-darkest);
138
- --button-border-hover: var(--hive-color-warning-darkest);
155
+ --button-border: var(--hive-color-warning-text-v4);
156
+ --button-border-hover: var(--hive-color-warning-text-v4);
139
157
  }
140
158
 
141
159
  .body {
package/lib/components/Label.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  letter-spacing: var(--hive-letter-spacing-body-normal);
5
5
  line-height: var(--hive-line-height-body-normal);
6
6
  font-weight: var(--hive-font-weight-text-regular);
7
- color: var(--hive-color-text-secondary);
7
+ color: light-dark(var(--hive-color-text-secondary), var(--hive-color-text-secondary-v4));
8
8
  padding: 0;
9
9
 
10
10
  &.secondary {
package/lib/components/Modal.d.ts CHANGED
@@ -27,6 +27,7 @@ export type ModalProps = {
27
27
  contentClassName?: string;
28
28
  footerClassName?: string;
29
29
  overlayClassName?: string;
30
+ closeBtnClassName?: string;
30
31
  className?: string;
31
32
  cancelLabel?: string | ReactElement;
32
33
  icon?: IconProps['icon'];
package/lib/components/Modal.js CHANGED
@@ -36,7 +36,7 @@ const intentActionColor = {
36
36
  * ReactNode to fully replace it, or `hideActions` / no `helperLink` to drop pieces.
37
37
  * - Underlying page is blocked by an overlay; click overlay or press Esc to close (when `closable`).
38
38
  */
39
- export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, hideHeader = false, hideFooter = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, icon, iconAriaLabel, onClose, overlayClassName, cancelLabel = 'Cancel', title, description, eyebrow, intent = 'action', helperLink, header, footer, ...rest }) => {
39
+ export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions = false, hideHeader = false, hideFooter = false, autoFocus = true, children, className, closable = true, showCloseButton = true, bodyClassName, headerClassName, contentClassName, footerClassName, closeBtnClassName, icon, iconAriaLabel, onClose, overlayClassName, cancelLabel = 'Cancel', title, description, eyebrow, intent = 'action', helperLink, header, footer, ...rest }) => {
40
40
  var _a, _b;
41
41
  const shouldAutoFocusCancelButton = useMemo(() => autoFocus && !(actions === null || actions === void 0 ? void 0 : actions.some((action) => action === null || action === void 0 ? void 0 : action.autoFocus)), [autoFocus, actions]);
42
42
  const hasIcon = !!(icon && iconAriaLabel);
@@ -49,7 +49,7 @@ export const Modal = ({ 'data-test': dataTest = 'modal', actions, hideActions =
49
49
  const renderFooter = !hideFooter && (hasCustomFooter || hasStructuredFooter);
50
50
  const renderClose = closable && showCloseButton;
51
51
  return (React.createElement(ReactModal, { portalClassName: styles.portal, className: cn(styles.modal, intent !== 'action' && intentClass[intent], className), contentLabel: title, onRequestClose: onClose, overlayClassName: cn(styles.overlay, overlayClassName), shouldCloseOnEsc: closable, shouldCloseOnOverlayClick: closable, shouldFocusAfterRender: false, shouldReturnFocusAfterClose: true, ...rest },
52
- renderClose && (React.createElement("button", { type: "button", "data-test": `${dataTest}-button-close`, className: styles.close, "aria-label": "Close icon", onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e) },
52
+ renderClose && (React.createElement("button", { type: "button", "data-test": `${dataTest}-button-close`, className: cn(styles.close, closeBtnClassName), "aria-label": "Close icon", onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e) },
53
53
  React.createElement(X, { size: 16, "aria-hidden": true }))),
54
54
  renderHeader &&
55
55
  (hasCustomHeader ? (React.createElement("div", { "data-test": "modal-header", className: headerClassName }, header)) : (React.createElement("div", { "data-test": "modal-header", className: cn(styles.header, headerClassName) },
package/lib/components/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}
package/lib/components/Notification.module.css CHANGED
@@ -1,7 +1,13 @@
1
1
  .notification {
2
- --notification-color: var(--hive-color-text);
3
- --notification-surface: lab(from var(--notification-color) 95% a b);
4
- --notification-border: lab(from var(--notification-color) 84% a b);
2
+ --notification-color: light-dark(var(--hive-color-text), var(--hive-color-text-v4));
3
+ --notification-surface: light-dark(
4
+ lab(from var(--notification-color) 95% a b),
5
+ color-mix(in oklab, var(--notification-color) 12%, var(--hive-color-neutral-white-v4))
6
+ );
7
+ --notification-border: light-dark(
8
+ lab(from var(--notification-color) 84% a b),
9
+ color-mix(in oklab, var(--notification-color) 40%, var(--hive-color-neutral-white-v4))
10
+ );
5
11
 
6
12
  box-sizing: border-box;
7
13
  display: flex;
@@ -48,17 +54,17 @@
48
54
  }
49
55
 
50
56
  .success {
51
- --notification-color: var(--hive-color-success-darkest);
57
+ --notification-color: var(--hive-color-success-text-v4);
52
58
  }
53
59
 
54
60
  .info {
55
- --notification-color: var(--hive-color-info-darkest);
61
+ --notification-color: var(--hive-color-info-text-v4);
56
62
  }
57
63
 
58
64
  .warning {
59
- --notification-color: var(--hive-color-warning-darkest);
65
+ --notification-color: var(--hive-color-warning-text-v4);
60
66
  }
61
67
 
62
68
  .error {
63
- --notification-color: var(--hive-color-error);
69
+ --notification-color: var(--hive-color-error-text-v4);
64
70
  }
package/lib/components/Overlay.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .modal {
14
- background: rgb(from var(--hive-color-overlay-background) r g b / calc(alpha - 0.1));
14
+ background: color-mix(in srgb, var(--hive-color-overlay-background-v4) 90%, transparent);
15
15
  width: 100vw;
16
16
  height: 100vh;
17
17
  z-index: var(--hive-z-index-1000);
@@ -79,7 +79,7 @@
79
79
  .closeIcon {
80
80
  width: calc(var(--hive-grid) * 9);
81
81
  height: calc(var(--hive-grid) * 9);
82
- color: var(--hive-color-text);
82
+ color: var(--hive-color-text-v4);
83
83
  }
84
84
  }
85
85