@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/styles/variables.css CHANGED
@@ -53,24 +53,128 @@
53
53
  /* ─── HIVE 4.0 colors (opt-in, OKLCH) ─────────────────────────── */
54
54
  /* Mirror of $color*V4 Sass tokens in styles/constants/_colors.scss */
55
55
 
56
- --hive-color-primary-v4: oklch(0.77 0.14 175);
57
- --hive-color-neutral-white-v4: oklch(1 0 0);
58
- --hive-color-neutral-v4: oklch(0.89 0 0);
59
- --hive-color-neutral-lighter-v4: oklch(0.99 0 0);
60
- --hive-color-success-v4: oklch(0.84 0.06 151);
61
- --hive-color-info-v4: oklch(0.78 0.06 250);
62
- --hive-color-warning-v4: oklch(0.87 0.09 95);
63
- --hive-color-error-v4: oklch(0.55 0.21 27);
64
- --hive-color-text-v4: oklch(0.33 0.002 17);
65
- --hive-color-text-secondary-v4: oklch(0.42 0.002 17);
66
- --hive-color-text-subdued-v4: oklch(0.42 0.002 17);
67
- --hive-color-brand-v4: oklch(0.77 0.14 175);
68
- --hive-color-brand-primary-v4: oklch(0.95 0.22 124);
69
- --hive-color-secondary-v4: oklch(0.92 0 0);
70
- --hive-color-border-v4: oklch(0.81 0 0);
71
- --hive-color-surface-hover-v4: oklch(0.97 0 0);
72
- --hive-color-surface-active-v4: oklch(0.94 0 0);
73
- --hive-color-link-v4: oklch(0.6 0.21 264);
56
+ /* Dark values from the "Design System HIVE" Figma dark prototype */
57
+ color-scheme: light;
58
+
59
+ --hive-color-primary-v4-light-mode: oklch(0.77 0.14 175);
60
+ --hive-color-primary-v4-dark-mode: #00d4aa;
61
+ --hive-color-primary-v4: light-dark(var(--hive-color-primary-v4-light-mode), var(--hive-color-primary-v4-dark-mode));
62
+ --hive-color-neutral-white-v4-light-mode: oklch(1 0 0);
63
+ --hive-color-neutral-white-v4-dark-mode: #2a2d3a;
64
+ --hive-color-neutral-white-v4: light-dark(var(--hive-color-neutral-white-v4-light-mode), var(--hive-color-neutral-white-v4-dark-mode));
65
+ --hive-color-neutral-v4-light-mode: oklch(0.89 0 0);
66
+ --hive-color-neutral-v4-dark-mode: #3c4043;
67
+ --hive-color-neutral-v4: light-dark(var(--hive-color-neutral-v4-light-mode), var(--hive-color-neutral-v4-dark-mode));
68
+ --hive-color-neutral-lighter-v4-light-mode: oklch(0.99 0 0);
69
+ --hive-color-neutral-lighter-v4-dark-mode: #1e1e2e;
70
+ --hive-color-neutral-lighter-v4: light-dark(
71
+ var(--hive-color-neutral-lighter-v4-light-mode),
72
+ var(--hive-color-neutral-lighter-v4-dark-mode)
73
+ );
74
+ --hive-color-success-v4-light-mode: oklch(0.84 0.06 151);
75
+ --hive-color-success-v4-dark-mode: #a9d6b9;
76
+ --hive-color-success-v4: light-dark(var(--hive-color-success-v4-light-mode), var(--hive-color-success-v4-dark-mode));
77
+ --hive-color-info-v4-light-mode: oklch(0.78 0.06 250);
78
+ --hive-color-info-v4-dark-mode: #a6bfd9;
79
+ --hive-color-info-v4: light-dark(var(--hive-color-info-v4-light-mode), var(--hive-color-info-v4-dark-mode));
80
+ --hive-color-warning-v4-light-mode: oklch(0.87 0.09 95);
81
+ --hive-color-warning-v4-dark-mode: #e6d699;
82
+ --hive-color-warning-v4: light-dark(var(--hive-color-warning-v4-light-mode), var(--hive-color-warning-v4-dark-mode));
83
+ --hive-color-error-v4-light-mode: oklch(0.55 0.21 27);
84
+ --hive-color-error-v4-dark-mode: #ff5f56;
85
+ --hive-color-error-v4: light-dark(var(--hive-color-error-v4-light-mode), var(--hive-color-error-v4-dark-mode));
86
+ --hive-color-text-v4-light-mode: oklch(0.33 0.002 17);
87
+ --hive-color-text-v4-dark-mode: #fafafa;
88
+ --hive-color-text-v4: light-dark(var(--hive-color-text-v4-light-mode), var(--hive-color-text-v4-dark-mode));
89
+ --hive-color-text-secondary-v4-light-mode: oklch(0.42 0.002 17);
90
+ --hive-color-text-secondary-v4-dark-mode: #a4abb6;
91
+ --hive-color-text-secondary-v4: light-dark(var(--hive-color-text-secondary-v4-light-mode), var(--hive-color-text-secondary-v4-dark-mode));
92
+ --hive-color-text-subdued-v4-light-mode: oklch(0.42 0.002 17);
93
+ --hive-color-text-subdued-v4-dark-mode: #a4abb6;
94
+ --hive-color-text-subdued-v4: light-dark(var(--hive-color-text-subdued-v4-light-mode), var(--hive-color-text-subdued-v4-dark-mode));
95
+ --hive-color-brand-v4-light-mode: oklch(0.77 0.14 175);
96
+ --hive-color-brand-v4-dark-mode: #00d4aa;
97
+ --hive-color-brand-v4: light-dark(var(--hive-color-brand-v4-light-mode), var(--hive-color-brand-v4-dark-mode));
98
+ --hive-color-brand-primary-v4-light-mode: oklch(0.95 0.22 124);
99
+ --hive-color-brand-primary-v4-dark-mode: #c6ff3a;
100
+ --hive-color-brand-primary-v4: light-dark(var(--hive-color-brand-primary-v4-light-mode), var(--hive-color-brand-primary-v4-dark-mode));
101
+ --hive-color-secondary-v4-light-mode: oklch(0.92 0 0);
102
+ --hive-color-secondary-v4-dark-mode: #3c4043;
103
+ --hive-color-secondary-v4: light-dark(var(--hive-color-secondary-v4-light-mode), var(--hive-color-secondary-v4-dark-mode));
104
+ --hive-color-border-v4-light-mode: oklch(0.81 0 0);
105
+ /* Figma #3c4043 is 1.57:1; lightened to meet WCAG 1.4.11 (3:1) */
106
+ --hive-color-border-v4-dark-mode: #747679;
107
+ --hive-color-border-v4: light-dark(var(--hive-color-border-v4-light-mode), var(--hive-color-border-v4-dark-mode));
108
+ /* TODO(hzc-8220): hover, active and link have no dark value in Figma yet */
109
+
110
+ --hive-color-surface-hover-v4-light-mode: oklch(0.97 0 0);
111
+ --hive-color-surface-hover-v4-dark-mode: rgb(60 64 67 / 0.5);
112
+ --hive-color-surface-hover-v4: light-dark(var(--hive-color-surface-hover-v4-light-mode), var(--hive-color-surface-hover-v4-dark-mode));
113
+ --hive-color-surface-active-v4-light-mode: oklch(0.94 0 0);
114
+ --hive-color-surface-active-v4-dark-mode: #3c4043;
115
+ --hive-color-surface-active-v4: light-dark(var(--hive-color-surface-active-v4-light-mode), var(--hive-color-surface-active-v4-dark-mode));
116
+ --hive-color-link-v4-light-mode: oklch(0.6 0.21 264);
117
+ --hive-color-link-v4-dark-mode: oklch(0.69 0.21 264);
118
+ --hive-color-link-v4: light-dark(var(--hive-color-link-v4-light-mode), var(--hive-color-link-v4-dark-mode));
119
+
120
+ /* Light values keep what v4 components render today */
121
+ --hive-color-text-on-primary-v4-light-mode: var(--hive-color-text-v4-light-mode);
122
+ --hive-color-text-on-primary-v4-dark-mode: #0a0a0a;
123
+ --hive-color-text-on-primary-v4: light-dark(
124
+ var(--hive-color-text-on-primary-v4-light-mode),
125
+ var(--hive-color-text-on-primary-v4-dark-mode)
126
+ );
127
+ --hive-color-text-on-error-v4-light-mode: var(--hive-color-neutral-white-v4-light-mode);
128
+ --hive-color-text-on-error-v4-dark-mode: var(--hive-color-neutral-white-v4-light-mode);
129
+ --hive-color-text-on-error-v4: light-dark(var(--hive-color-text-on-error-v4-light-mode), var(--hive-color-text-on-error-v4-dark-mode));
130
+ --hive-color-success-text-v4-light-mode: var(--hive-color-success-darkest);
131
+ --hive-color-success-text-v4-dark-mode: var(--hive-color-success-v4-dark-mode);
132
+ --hive-color-success-text-v4: light-dark(var(--hive-color-success-text-v4-light-mode), var(--hive-color-success-text-v4-dark-mode));
133
+ --hive-color-info-text-v4-light-mode: var(--hive-color-info-darkest);
134
+ --hive-color-info-text-v4-dark-mode: #8ec5ff;
135
+ --hive-color-info-text-v4: light-dark(var(--hive-color-info-text-v4-light-mode), var(--hive-color-info-text-v4-dark-mode));
136
+ --hive-color-warning-text-v4-light-mode: var(--hive-color-warning-darkest);
137
+ --hive-color-warning-text-v4-dark-mode: var(--hive-color-warning-v4-dark-mode);
138
+ --hive-color-warning-text-v4: light-dark(var(--hive-color-warning-text-v4-light-mode), var(--hive-color-warning-text-v4-dark-mode));
139
+ --hive-color-error-text-v4-light-mode: var(--hive-color-error);
140
+ /* Figma #ff5f56 is 3.9:1 on tinted surfaces; lifted for 4.5:1 */
141
+ --hive-color-error-text-v4-dark-mode: oklch(from var(--hive-color-error-v4-dark-mode) calc(l + 0.14) c h);
142
+ --hive-color-error-text-v4: light-dark(var(--hive-color-error-text-v4-light-mode), var(--hive-color-error-text-v4-dark-mode));
143
+ --hive-color-overlay-background-v4-light-mode: var(--hive-color-neutral-white-v4-light-mode);
144
+ --hive-color-overlay-background-v4-dark-mode: var(--hive-color-neutral-lighter-v4-dark-mode);
145
+ --hive-color-overlay-background-v4: light-dark(
146
+ var(--hive-color-overlay-background-v4-light-mode),
147
+ var(--hive-color-overlay-background-v4-dark-mode)
148
+ );
149
+ --hive-color-table-row-hover-v4-light-mode: #e2e7fa;
150
+ --hive-color-table-row-hover-v4-dark-mode: var(--hive-color-surface-hover-v4-dark-mode);
151
+ --hive-color-table-row-hover-v4: light-dark(
152
+ var(--hive-color-table-row-hover-v4-light-mode),
153
+ var(--hive-color-table-row-hover-v4-dark-mode)
154
+ );
155
+ --hive-color-table-header-v4-light-mode: var(--hive-color-neutral-gray);
156
+ --hive-color-table-header-v4-dark-mode: var(--hive-color-neutral-white-v4-dark-mode);
157
+ --hive-color-table-header-v4: light-dark(var(--hive-color-table-header-v4-light-mode), var(--hive-color-table-header-v4-dark-mode));
158
+ --hive-color-table-row-even-v4-light-mode: var(--hive-color-neutral-lighter);
159
+ --hive-color-table-row-even-v4-dark-mode: var(--hive-color-neutral-white-v4-dark-mode);
160
+ --hive-color-table-row-even-v4: light-dark(var(--hive-color-table-row-even-v4-light-mode), var(--hive-color-table-row-even-v4-dark-mode));
161
+ --hive-color-table-separator-v4-light-mode: var(--hive-color-neutral-white);
162
+ --hive-color-table-separator-v4-dark-mode: var(--hive-color-border-v4-dark-mode);
163
+ --hive-color-table-separator-v4: light-dark(
164
+ var(--hive-color-table-separator-v4-light-mode),
165
+ var(--hive-color-table-separator-v4-dark-mode)
166
+ );
167
+ --hive-color-table-selection-v4-light-mode: hsl(from var(--hive-color-primary) h s calc(l + 30));
168
+ --hive-color-table-selection-v4-dark-mode: color-mix(
169
+ in oklab,
170
+ var(--hive-color-primary-v4-dark-mode) 25%,
171
+ var(--hive-color-neutral-lighter-v4-dark-mode)
172
+ );
173
+ --hive-color-table-selection-v4: light-dark(
174
+ var(--hive-color-table-selection-v4-light-mode),
175
+ var(--hive-color-table-selection-v4-dark-mode)
176
+ );
177
+ --hive-shadow-popover-v4: 0 1px 3px oklch(0 0 0 / 0.17);
74
178
  --hive-shadow-button-v4: 0 1px 3px oklch(0 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.1);
75
179
 
76
180
  /* ─── Spacing ─────────────────────────────────────────────────── */