@hazelcast/ui 4.0.1 → 4.0.3

package/lib/components/Alert.module.css

@@ -1,7 +1,13 @@
 .alert {
-  --alert-color: var(--hive-color-text);
-  --alert-surface: lab(from var(--alert-color) 95% a b);
-  --alert-border: lab(from var(--alert-color) 84% a b);
+  --alert-color: light-dark(var(--hive-color-text), var(--hive-color-text-v4));
+  --alert-surface: light-dark(
+    lab(from var(--alert-color) 95% a b),
+    color-mix(in oklab, var(--alert-color) 12%, var(--hive-color-neutral-white-v4))
+  );
+  --alert-border: light-dark(
+    lab(from var(--alert-color) 84% a b),
+    color-mix(in oklab, var(--alert-color) 40%, var(--hive-color-neutral-white-v4))
+  );
 
   box-sizing: border-box;
   display: flex;
@@ -64,19 +70,19 @@
 }
 
 .success {
-  --alert-color: var(--hive-color-success-darkest);
+  --alert-color: var(--hive-color-success-text-v4);
 }
 
 .info {
-  --alert-color: var(--hive-color-info-darkest);
+  --alert-color: var(--hive-color-info-text-v4);
 }
 
 .warning {
-  --alert-color: var(--hive-color-warning-darkest);
+  --alert-color: var(--hive-color-warning-text-v4);
 }
 
 .critical {
-  --alert-color: var(--hive-color-error);
+  --alert-color: var(--hive-color-error-text-v4);
 }
 
 .actions {
@@ -85,7 +91,7 @@
 }
 
 .action {
-  color: var(--alert-color);
+  color: var(--alert-color) !important;
 }
 
 .action:not(:last-child) {

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.css

@@ -3,6 +3,10 @@
   align-items: center;
 }
 
+.root .toggleButton {
+  color: var(--hive-color-neutral-lighter);
+}
+
 .separator {
   border-left: 1px solid var(--hive-color-neutral-light);
 }

package/lib/components/Badge.module.css

@@ -15,32 +15,40 @@
   }
 
   &.neutral {
-    background-color: lab(from var(--hive-color-text-secondary) 97% a b);
-    color: var(--hive-color-text-secondary);
-    border: 1px solid var(--hive-color-text-secondary);
+    --badge-color: light-dark(var(--hive-color-text-secondary), var(--hive-color-text-secondary-v4));
+    background-color: light-dark(
+      lab(from var(--badge-color) 97% a b),
+      color-mix(in oklab, var(--badge-color) 12%, var(--hive-color-neutral-white-v4))
+    );
+    color: var(--badge-color);
+    border: 1px solid var(--badge-color);
+  }
+
+  &.success,
+  &.info,
+  &.warning,
+  &.critical {
+    background-color: light-dark(
+      lab(from var(--badge-color) 95% a b),
+      color-mix(in oklab, var(--badge-color) 12%, var(--hive-color-neutral-white-v4))
+    );
+    color: var(--badge-color);
+    border: 1px solid var(--badge-color);
   }
 
   &.success {
-    background-color: lab(from var(--hive-color-success-darkest) 95% a b);
-    color: var(--hive-color-success-darkest);
-    border: 1px solid var(--hive-color-success-darkest);
+    --badge-color: var(--hive-color-success-text-v4);
   }
 
   &.info {
-    background-color: lab(from var(--hive-color-info-darkest) 95% a b);
-    color: var(--hive-color-info-darkest);
-    border: 1px solid var(--hive-color-info-darkest);
+    --badge-color: var(--hive-color-info-text-v4);
   }
 
   &.warning {
-    background-color: lab(from var(--hive-color-warning-darkest) 95% a b);
-    color: var(--hive-color-warning-darkest);
-    border: 1px solid var(--hive-color-warning-darkest);
+    --badge-color: var(--hive-color-warning-text-v4);
   }
 
   &.critical {
-    background-color: lab(from var(--hive-color-error) 95% a b);
-    color: var(--hive-color-error);
-    border: 1px solid var(--hive-color-error);
+    --badge-color: var(--hive-color-error-text-v4);
   }
 }

package/lib/components/Button.module.css

@@ -3,7 +3,7 @@
   --button-padding-x: 16px;
   --button-icon-gap: 8px;
   --button-color-base: var(--hive-color-brand-v4);
-  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
   --button-color-fg-on-light: var(--hive-color-text-v4);
   --button-bg: var(--button-color-base);
   --button-bg-hover: oklch(from var(--button-bg) calc(l - 0.04) c h);
@@ -104,18 +104,36 @@
 }
 
 .variantGhost.colorPrimary {
-  --button-bg-hover: oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h);
-  --button-bg-active: oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-brand-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h),
+    color-mix(in oklab, var(--hive-color-brand-v4) 25%, transparent)
+  );
 }
 
 .variantGhost.colorWarning {
-  --button-bg-hover: oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h);
-  --button-bg-active: oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-warning-text-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h),
+    color-mix(in oklab, var(--hive-color-warning-text-v4) 25%, transparent)
+  );
 }
 
 .variantGhost.colorDanger {
-  --button-bg-hover: oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h);
-  --button-bg-active: oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h),
+    color-mix(in oklab, var(--hive-color-error-text-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-error-text-v4) 25%, transparent)
+  );
 }
 
 .variantLink {
@@ -132,7 +150,7 @@
 
 .colorPrimary {
   --button-color-base: var(--hive-color-brand-v4);
-  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
   --button-color-fg-on-light: var(--hive-color-text-v4);
 }
 
@@ -145,13 +163,13 @@
 .colorWarning {
   --button-color-base: var(--hive-color-warning);
   --button-color-fg-on-base: var(--hive-color-warning-darkest);
-  --button-color-fg-on-light: var(--hive-color-warning-darkest);
+  --button-color-fg-on-light: var(--hive-color-warning-text-v4);
 }
 
 .colorDanger {
   --button-color-base: var(--hive-color-error);
-  --button-color-fg-on-base: var(--hive-color-neutral-white-v4);
-  --button-color-fg-on-light: var(--hive-color-error);
+  --button-color-fg-on-base: var(--hive-color-text-on-error-v4);
+  --button-color-fg-on-light: var(--hive-color-error-text-v4);
 }
 
 .variantOutlined.colorSecondary {
@@ -160,8 +178,8 @@
 }
 
 .variantOutlined.colorWarning {
-  --button-border: var(--hive-color-warning-darkest);
-  --button-border-hover: var(--hive-color-warning-darkest);
+  --button-border: var(--hive-color-warning-text-v4);
+  --button-border-hover: var(--hive-color-warning-text-v4);
 }
 
 .body {

package/lib/components/Calendar/Calendar.module.css

@@ -27,7 +27,7 @@
 .popper :global(.hz-date-picker-popper-container) :global .react-datepicker :global .react-datepicker__header {
   margin: 0;
   padding: 0;
-  background-color: var(--hive-color-neutral-lighter);
+  background-color: var(--hive-color-neutral-lighter-v4);
   border: none;
   border-radius: 0;
 }
@@ -59,7 +59,7 @@
   vertical-align: middle;
   line-height: calc(var(--hive-grid) * 8) !important;
   margin: 0;
-  color: var(--hive-color-text);
+  color: var(--hive-color-text-v4);
   font-family: var(--hive-font-family-text);
   font-size: var(--hive-font-size-body-small);
   letter-spacing: var(--hive-letter-spacing-body-small);
@@ -120,8 +120,8 @@
   border-radius: var(--hive-grid);
   width: calc(var(--hive-grid) * 8);
   height: calc(var(--hive-grid) * 8);
-  background-color: var(--hive-color-neutral-white);
-  color: var(--hive-color-text-secondary);
+  background-color: var(--hive-color-neutral-white-v4);
+  color: var(--hive-color-text-secondary-v4);
   text-align: center;
   vertical-align: middle;
   line-height: calc(var(--hive-grid) * 8) !important;
@@ -175,8 +175,8 @@
   .react-datepicker__week
   :global
   .react-datepicker__day--in-range {
-  background-color: var(--hive-color-info-light);
-  color: var(--hive-color-neutral-white);
+  background-color: var(--hive-color-info-v4);
+  color: var(--hive-color-text-v4);
 }
 
 /* Note: Disable default browser outline, force our only on :focus */
@@ -190,8 +190,8 @@
   .react-datepicker__week
   :global
   .react-datepicker__day--selected {
-  background-color: var(--hive-color-primary-light);
-  color: var(--hive-color-neutral-white);
+  background-color: var(--hive-color-primary-v4);
+  color: var(--hive-color-text-on-primary-v4);
   font-family: var(--hive-font-family-text);
   font-size: var(--hive-font-size-body-small);
   letter-spacing: var(--hive-letter-spacing-body-small);
@@ -210,7 +210,7 @@
   :global
   .react-datepicker__day--disabled {
   cursor: default;
-  color: var(--hive-color-neutral);
+  color: var(--hive-color-text-secondary-v4);
 }
 
 .popper
@@ -223,7 +223,7 @@
   .react-datepicker__week
   :global
   .react-datepicker__day:focus-visible {
-  box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+  box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
 }
 
 .popper
@@ -296,8 +296,8 @@
 .popper :global(.hz-date-picker-popper-container) .calendar {
   display: flex;
   flex-direction: row;
-  border: var(--hive-border-width) solid var(--hive-color-neutral-light);
-  background-color: var(--hive-color-neutral-lighter);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  background-color: var(--hive-color-neutral-lighter-v4);
   box-sizing: border-box;
 }
 
@@ -312,7 +312,7 @@
 }
 
 .popper :global(.hz-date-picker-popper-container) .calendar .headerContainer .headerMonthAndYear {
-  color: var(--hive-color-text-secondary);
+  color: var(--hive-color-text-secondary-v4);
   font-family: var(--hive-font-family-text);
   font-size: var(--hive-font-size-body-small);
   letter-spacing: var(--hive-letter-spacing-body-small);

package/lib/components/Card.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-  background: var(--hive-color-neutral-white);
+  background: var(--hive-color-neutral-white-v4);
 
   .heading {
     display: flex;
@@ -23,7 +23,7 @@
     width: 100%;
     height: 1px;
     margin-top: calc(var(--hive-grid) * 4);
-    background: var(--hive-color-neutral);
+    background: var(--hive-color-border-v4);
   }
 
   .content {
@@ -48,7 +48,7 @@
 .bordered {
   padding: calc(var(--hive-grid) * 5);
   border-radius: var(--hive-border-radius);
-  border: var(--hive-border-width) solid var(--hive-color-neutral);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
 
   .heading {
     font-weight: var(--hive-font-weight-heading-regular);

package/lib/components/Carousel.module.css

@@ -33,7 +33,7 @@
   height: 40px;
 
   &:focus-visible {
-    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
   }
 }
 
@@ -48,6 +48,6 @@
   padding: calc(var(--hive-grid) * 1.5);
 
   &:focus-visible {
-    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+    box-shadow: 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
   }
 }

package/lib/components/ContextMenu.module.css

@@ -1,9 +1,9 @@
 .root {
   position: absolute;
   padding: var(--hive-grid) 0;
-  background: var(--hive-color-neutral-white);
+  background: var(--hive-color-neutral-white-v4);
   border-radius: var(--hive-border-radius);
-  border: var(--hive-border-width) solid var(--hive-color-neutral);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
   z-index: var(--hive-z-index-2000);
   display: flex;
   flex-direction: column;
@@ -20,11 +20,11 @@
   text-align: left;
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-accessibility-outline);
+    box-shadow: inset 0 0 0 var(--hive-outline-width) var(--hive-color-primary-v4);
   }
 
   &:hover {
-    background: var(--hive-color-neutral);
+    background: var(--hive-color-surface-hover-v4);
   }
 }
 

package/lib/components/Error.module.css

@@ -4,7 +4,7 @@
   letter-spacing: var(--hive-letter-spacing-body-small);
   line-height: var(--hive-line-height-body-small);
   font-weight: var(--hive-font-weight-text-regular);
-  color: var(--hive-color-error);
+  color: var(--hive-color-error-text-v4);
   display: none;
 
   &.hasError {

package/lib/components/Help.js

@@ -3,13 +3,12 @@ import { HelpCircle } from 'react-feather';
 import cn from 'classnames';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
-import { styleConstants } from '../utils/styleConstants';
 import styles from './Help.module.css';
 export const helpTooltipId = (inputId) => `${inputId}-help`;
 export const Help = ({ helperText, placement = 'top', parentId, className, tooltipWordBreak, size = 'small', 'data-test': dataTest = 'help', }) => {
     const tooltipId = helpTooltipId(parentId);
     return (React.createElement(Tooltip, { side: placement, content: helperText, id: tooltipId, wordBreak: tooltipWordBreak },
         React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
-            React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, color: styleConstants.colorPrimary, icon: HelpCircle, className: styles.icon, size: size }))));
+            React.createElement(Icon, { ariaLabel: "Help", "aria-describedby": tooltipId, icon: HelpCircle, className: styles.icon, size: size }))));
 };
 //# sourceMappingURL=Help.js.map

package/lib/components/Help.js.map

@@ -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"}
+{"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

@@ -5,3 +5,7 @@
   padding-left: var(--hive-grid);
   padding-right: var(--hive-grid);
 }
+
+.icon {
+  color: var(--hive-color-primary-v4);
+}

package/lib/components/IconButton.module.css

@@ -1,7 +1,7 @@
 .iconButton {
   --button-size: 36px;
   --button-color-base: var(--hive-color-brand-v4);
-  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
   --button-color-fg-on-light: var(--hive-color-text-v4);
   --button-bg: var(--button-color-base);
   --button-bg-hover: oklch(from var(--button-bg) calc(l - 0.04) c h);
@@ -83,18 +83,36 @@
 }
 
 .variantGhost.colorPrimary {
-  --button-bg-hover: oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h);
-  --button-bg-active: oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-brand-v4) 0.95 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-brand-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-brand-v4) 0.9 calc(c * 0.6) h),
+    color-mix(in oklab, var(--hive-color-brand-v4) 25%, transparent)
+  );
 }
 
 .variantGhost.colorWarning {
-  --button-bg-hover: oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h);
-  --button-bg-active: oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-warning) 0.95 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-warning-text-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-warning) 0.9 calc(c * 0.6) h),
+    color-mix(in oklab, var(--hive-color-warning-text-v4) 25%, transparent)
+  );
 }
 
 .variantGhost.colorDanger {
-  --button-bg-hover: oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h);
-  --button-bg-active: oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h);
+  --button-bg-hover: light-dark(
+    oklch(from var(--hive-color-error) 0.95 calc(c * 0.4) h),
+    color-mix(in oklab, var(--hive-color-error-text-v4) 15%, transparent)
+  );
+  --button-bg-active: light-dark(
+    oklch(from var(--hive-color-error) 0.9 calc(c * 0.5) h),
+    color-mix(in oklab, var(--hive-color-error-text-v4) 25%, transparent)
+  );
 }
 
 .variantLink {
@@ -106,7 +124,7 @@
 
 .colorPrimary {
   --button-color-base: var(--hive-color-brand-v4);
-  --button-color-fg-on-base: var(--hive-color-text-v4);
+  --button-color-fg-on-base: var(--hive-color-text-on-primary-v4);
   --button-color-fg-on-light: var(--hive-color-text-v4);
 }
 
@@ -119,13 +137,13 @@
 .colorWarning {
   --button-color-base: var(--hive-color-warning);
   --button-color-fg-on-base: var(--hive-color-warning-darkest);
-  --button-color-fg-on-light: var(--hive-color-warning-darkest);
+  --button-color-fg-on-light: var(--hive-color-warning-text-v4);
 }
 
 .colorDanger {
   --button-color-base: var(--hive-color-error);
-  --button-color-fg-on-base: var(--hive-color-neutral-white-v4);
-  --button-color-fg-on-light: var(--hive-color-error);
+  --button-color-fg-on-base: var(--hive-color-text-on-error-v4);
+  --button-color-fg-on-light: var(--hive-color-error-text-v4);
 }
 
 .variantOutlined.colorSecondary {
@@ -134,8 +152,8 @@
 }
 
 .variantOutlined.colorWarning {
-  --button-border: var(--hive-color-warning-darkest);
-  --button-border-hover: var(--hive-color-warning-darkest);
+  --button-border: var(--hive-color-warning-text-v4);
+  --button-border-hover: var(--hive-color-warning-text-v4);
 }
 
 .body {

package/lib/components/Label.module.css

@@ -4,7 +4,7 @@
   letter-spacing: var(--hive-letter-spacing-body-normal);
   line-height: var(--hive-line-height-body-normal);
   font-weight: var(--hive-font-weight-text-regular);
-  color: var(--hive-color-text-secondary);
+  color: light-dark(var(--hive-color-text-secondary), var(--hive-color-text-secondary-v4));
   padding: 0;
 
   &.secondary {

package/lib/components/Notification.module.css

@@ -1,7 +1,13 @@
 .notification {
-  --notification-color: var(--hive-color-text);
-  --notification-surface: lab(from var(--notification-color) 95% a b);
-  --notification-border: lab(from var(--notification-color) 84% a b);
+  --notification-color: light-dark(var(--hive-color-text), var(--hive-color-text-v4));
+  --notification-surface: light-dark(
+    lab(from var(--notification-color) 95% a b),
+    color-mix(in oklab, var(--notification-color) 12%, var(--hive-color-neutral-white-v4))
+  );
+  --notification-border: light-dark(
+    lab(from var(--notification-color) 84% a b),
+    color-mix(in oklab, var(--notification-color) 40%, var(--hive-color-neutral-white-v4))
+  );
 
   box-sizing: border-box;
   display: flex;
@@ -48,17 +54,17 @@
 }
 
 .success {
-  --notification-color: var(--hive-color-success-darkest);
+  --notification-color: var(--hive-color-success-text-v4);
 }
 
 .info {
-  --notification-color: var(--hive-color-info-darkest);
+  --notification-color: var(--hive-color-info-text-v4);
 }
 
 .warning {
-  --notification-color: var(--hive-color-warning-darkest);
+  --notification-color: var(--hive-color-warning-text-v4);
 }
 
 .error {
-  --notification-color: var(--hive-color-error);
+  --notification-color: var(--hive-color-error-text-v4);
 }

package/lib/components/Overlay.module.css

@@ -11,7 +11,7 @@
 }
 
 .modal {
-  background: rgb(from var(--hive-color-overlay-background) r g b / calc(alpha - 0.1));
+  background: color-mix(in srgb, var(--hive-color-overlay-background-v4) 90%, transparent);
   width: 100vw;
   height: 100vh;
   z-index: var(--hive-z-index-1000);
@@ -79,7 +79,7 @@
         .closeIcon {
           width: calc(var(--hive-grid) * 9);
           height: calc(var(--hive-grid) * 9);
-          color: var(--hive-color-text);
+          color: var(--hive-color-text-v4);
         }
       }
 

package/lib/components/Pagination.module.css

@@ -22,7 +22,7 @@
     letter-spacing: var(--hive-letter-spacing-body-small);
     line-height: var(--hive-line-height-body-small);
     font-weight: var(--hive-font-weight-text-regular);
-    color: var(--hive-color-text-secondary);
+    color: var(--hive-color-text-secondary-v4);
   }
 
   .buttons {
@@ -35,10 +35,10 @@
 
     /* Override Button styles */
     .button {
-      color: var(--hive-color-text-secondary);
-      background-color: var(--hive-color-neutral-lighter);
+      color: var(--hive-color-text-secondary-v4);
+      background-color: var(--hive-color-neutral-lighter-v4);
       border: 1px solid;
-      border-color: var(--hive-color-neutral-light);
+      border-color: var(--hive-color-border-v4);
       height: var(--hive-input-height-small);
       border-radius: var(--hive-border-radius);
       font-family: var(--hive-font-family-text);
@@ -58,13 +58,13 @@
       &:hover,
       &:active,
       &.selected {
-        color: var(--hive-color-text);
-        border-color: var(--hive-color-primary);
+        color: var(--hive-color-text-v4);
+        border-color: var(--hive-color-primary-v4);
       }
 
       &:focus-visible {
-        color: var(--hive-color-text);
-        border-color: var(--hive-color-accessibility-outline);
+        color: var(--hive-color-text-v4);
+        border-color: var(--hive-color-primary-v4);
       }
     }
   }
@@ -73,16 +73,16 @@
   .iconButton {
     display: flex;
     align-items: center;
-    background-color: var(--hive-color-neutral-lighter);
+    background-color: var(--hive-color-neutral-lighter-v4);
     border: 1px solid;
-    border-color: var(--hive-color-neutral-light);
+    border-color: var(--hive-color-border-v4);
     height: var(--hive-input-height-small);
     padding: 0 calc(var(--hive-grid) * 2);
 
     &:hover,
     &:active,
     &.selected {
-      border-color: var(--hive-color-primary);
+      border-color: var(--hive-color-primary-v4);
     }
 
     &:focus,

package/lib/components/Popover.module.css

@@ -1,8 +1,8 @@
 .root {
   display: flex;
   flex-direction: column;
-  background: var(--hive-color-neutral-white);
+  background: var(--hive-color-neutral-white-v4);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 17%);
+  box-shadow: var(--hive-shadow-popover-v4);
 }

package/lib/components/Select/CheckableSelectField.js

@@ -75,9 +75,9 @@ export const CheckableSelectField = (props) => {
                         React.createElement(TruncatedText, { text: option.label })));
                 })) : (React.createElement("span", { className: styles.noOptionsMessage, "data-test": `${dataTest}-no-options-message` }, noOptionsMessage))),
                 React.createElement("div", { className: styles.bottom },
-                    React.createElement(Link, { component: "button", "data-test": `${dataTest}-select-all`, onClick: () => {
+                    React.createElement(Link, { component: "button", className: styles.actionLink, "data-test": `${dataTest}-select-all`, onClick: () => {
                             onChange(filteredOptions.map(({ value }) => value));
                         } }, "Select all"),
-                    React.createElement(Link, { component: "button", "data-test": `${dataTest}-select-none`, onClick: () => onChange([]) }, "Select none"))))));
+                    React.createElement(Link, { className: styles.actionLink, component: "button", "data-test": `${dataTest}-select-none`, onClick: () => onChange([]) }, "Select none"))))));
 };
 //# sourceMappingURL=CheckableSelectField.js.map