@hazelcast/ui 1.3.3-next.26 → 1.3.3-next.27

package/lib/AppHeader/AppHeader.module.scss

@@ -1,7 +1,7 @@
 @use '../../styles/constants' as c;
 
 .root {
-  background: c.$brandSecondary;
+  background: c.$colorBrandSecondary;
   color: c.$colorNeutralLighter;
   display: flex;
   align-items: center;
@@ -17,7 +17,7 @@
 }
 
 .name {
-  color: c.$brandPrimary;
+  color: c.$colorBrandPrimary;
   font-weight: 600;
 }
 

package/lib/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss

@@ -12,7 +12,7 @@
 .content {
   padding: c.$grid * 2;
   color: c.$colorNeutralLighter;
-  background: c.$brandSecondary;
+  background: c.$colorBrandSecondary;
   display: flex;
   flex-direction: column;
   align-items: start;

package/lib/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -74,7 +74,7 @@ $selectFieldIndicators: ':global .hz-select-field__indicators';
 .menuPortal {
   #{$selectMenu} {
     border: none;
-    background: c.$brandSecondary;
+    background: c.$colorBrandSecondary;
     border-radius: 0 0 c.$borderRadius c.$borderRadius;
   }
 
@@ -89,12 +89,12 @@ $selectFieldIndicators: ':global .hz-select-field__indicators';
     }
 
     &--is-focused {
-      background: c.$brandAccent;
+      background: c.$colorBrandAccent;
       box-shadow: none;
 
       #{$selectValueContainer},
       #{$selectTrailingNote} {
-        color: c.$brandColorText;
+        color: c.$colorBrandText;
       }
     }
   }

package/lib/AppSidebar/AppSidebar.module.scss

@@ -13,7 +13,7 @@ $offset: c.$grid * 4;
   flex-direction: column;
   box-sizing: border-box;
   color: c.$colorNeutralLighter;
-  background: c.$brandSecondary;
+  background: c.$colorBrandSecondary;
   transition: 200ms width;
 
   * {

package/lib/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.module.scss

@@ -5,12 +5,12 @@
   top: 50%;
   z-index: 1;
   left: c.$grid * 3;
-  color: c.$brandColorText;
+  color: c.$colorBrandText;
   transform: translateY(-50%);
 
   &.isFilled {
     svg {
-      fill: c.$brandColorText;
+      fill: c.$colorBrandText;
     }
   }
 }

package/lib/AppSidebar/AppSidebarItem/AppSidebarItem.module.scss

@@ -66,11 +66,11 @@
   &:hover,
   &.active {
     text-decoration: none;
-    color: c.$brandColorText;
-    background-color: c.$brandAccent;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
 
     .icon {
-      color: c.$brandColorText;
+      color: c.$colorBrandText;
     }
   }
 

package/lib/Button.module.scss

@@ -193,18 +193,18 @@
     }
 
     &AuthPrimary {
-      @include buttonColor(c.$authPrimary);
+      @include buttonColor(c.$colorBrandPrimary);
 
       &:hover,
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(color.adjust(c.$authPrimary, $lightness: 10%));
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(color.adjust(c.$authPrimary, $lightness: -10%));
+        @include buttonColor(color.adjust(c.$colorBrandPrimary, $lightness: -10%));
       }
 
       &.variantContained {
@@ -217,7 +217,7 @@
     }
 
     &AuthSecondary {
-      @include buttonColor(c.$authSecondary);
+      @include buttonColor(c.$colorAuthSecondary);
 
       border-color: c.$colorNeutralWhite;
 
@@ -225,12 +225,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(color.adjust(c.$authSecondary, $lightness: 10%));
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(color.adjust(c.$authSecondary, $lightness: -10%));
+        @include buttonColor(color.adjust(c.$colorAuthSecondary, $lightness: -10%));
       }
 
       &.variantContained {
@@ -238,7 +238,7 @@
       }
 
       &.variantOutlined {
-        border-color: c.$authSecondary;
+        border-color: c.$colorAuthSecondary;
       }
 
       &:disabled {
@@ -256,12 +256,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(color.adjust(c.$brandColorText, $lightness: 10%));
+        @include buttonColor(color.adjust(c.$colorBrandText, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(c.$brandColorText);
+        @include buttonColor(c.$colorBrandText);
       }
 
       &.variantContained {

package/lib/Table/Cell.module.scss

@@ -7,7 +7,7 @@
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  height: c.$grid * 12;
+  height: c.$grid * 8;
   padding-right: c.$grid * 5;
   padding-left: c.$grid * 5;
   color: c.$colorText;
@@ -41,7 +41,7 @@
 }
 
 .warningIcon {
-  color: c.$colorWarningLight;
+  color: c.$colorWarningDark;
 
   &.left {
     margin-left: c.$grid * 2;

package/lib/Table/Header.module.scss

@@ -35,7 +35,7 @@
   flex-grow: 1;
   flex-basis: auto;
   flex-shrink: 0;
-  background: #e9f0f9;
+  background: c.$colorNeutralGray;
   border-right: 1px solid c.$colorNeutralWhite;
 
   .th {
@@ -83,7 +83,7 @@
       }
 
       &:hover {
-        background-color: #ccdff5;
+        background-color: c.$colorNeutralGrayDarker;
       }
     }
 

package/lib/Tooltip.module.scss

@@ -151,10 +151,10 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
 
   &.dark {
     border: none;
-    color: c.$brandColorText;
-    background-color: c.$brandAccent;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
 
-    @include arrowPlacements(c.$brandAccent, transparent);
+    @include arrowPlacements(c.$colorBrandAccent, transparent);
   }
 
   > .arrow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.26+46b1e75",
+  "version": "1.3.3-next.27+15de8d5",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -46,8 +46,8 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@hazelcast/helpers": "^1.3.3-next.26+46b1e75",
-    "@hazelcast/services": "^1.3.3-next.26+46b1e75",
+    "@hazelcast/helpers": "^1.3.2",
+    "@hazelcast/services": "^1.3.2",
     "@headlessui/react": "^1.4.2",
     "@icons-pack/react-simple-icons": "^9.3.0",
     "@popperjs/core": "^2.11.7",
@@ -122,5 +122,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "46b1e752c3a8fc405570332cff8992b1107c9da1"
+  "gitHead": "15de8d5dc47b1db3dae0b4d45072612e608cd252"
 }

package/styles/constants/_colors.scss

@@ -1,36 +1,54 @@
-@use 'sass:color';
-
-// https://zeroheight.com/11d0e6dac/p/594529--colors
+// https://www.figma.com/design/uGTDLFJEVy4dCNIhlmTPRw/%F0%9F%90%9D-HIVE-3.0?node-id=1061-4605&p=f&t=7sJDCVUY4O5jNXma-0
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
+
 $colorNeutralWhite: #fff !default;
-$colorNeutralLighter: #fafafa !default;
-$colorNeutralLight: #b7c1cb !default;
+
+$colorNeutralGray: #e9f0f9 !default;
+$colorNeutralGrayDarker: #ccdff5 !default;
+
 $colorNeutral: #dbdbdb !default;
+$colorNeutralLight: #b7c1cb !default;
+$colorNeutralLighter: #fafafa !default;
+
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: color.adjust($colorSuccess, $lightness: -10%) !default;
+$colorSuccessDark: #64d03c !default;
+$colorSuccessDarkest: #3b7044 !default;
+
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: color.adjust($colorInfo, $lightness: -10%) !default;
+$colorInfoDark: #4adfdf !default;
+$colorInfoDarkest: #006585 !default;
+
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: color.adjust($colorWarning, $lightness: -15%) !default;
+$colorWarningDark: #f6dd00 !default;
+$colorWarningDarkest: #8b5d00 !default;
+
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: color.adjust($colorError, $lightness: -10%) !default;
+$colorErrorDark: #8f001d !default;
+
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
-$colorTextSubdued: #69707d !default;
-$brandColorText: #10a4b3 !default;
+$colorTextSubdued: $colorTextSecondary !default;
+
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
+
 $colorBrand: #00bac6 !default;
-$colorShadow: rgb(53 61 73 / 20%) !default;
-$colorMenuDark: #333 !default;
-$brandPrimary: #c6ff3a !default;
-$authPrimary: $brandPrimary !default;
-$authSecondary: #0b2b39 !default;
-$brandSecondary: #061727 !default;
-$brandAccent: #122d45 !default;
+$colorBrandText: #10a4b3 !default;
+$colorShadow: $colorNeutral !default;
+
+$colorMenuDark: $colorText !default;
+$colorAuthSecondary: #0b2b39 !default;
+
+$colorBrandPrimary: #c6ff3a !default;
+$colorBrandSecondary: #061727 !default;
+$colorBrandAccent: #122d45 !default;
+$colorBrandOcean: #0080a9 !default;
+$colorBrandRaspberry: #c91268 !default;
+$colorBrandCarrot: #f5911e !default;
+$colorBrandBlueberry: #0019fe !default;

package/styles/helpers/_gradients.scss

@@ -1,11 +1,44 @@
 @use '../constants' as c;
 
-@mixin gradientLime {
-  background: c.$authPrimary;
-  background: linear-gradient(270deg, c.$authPrimary 0%, #00b8b8 100%);
+@mixin textGradient() {
+  /* doiuse-disable background-clip-text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* doiuse-enable background-clip-text */
 }
 
-@mixin gradientOcean {
-  background: c.$colorText;
-  background: linear-gradient(270deg, #0c6f8e 0%, #1b2939 100%);
+@mixin gradientLime($angle: 270deg) {
+  background: linear-gradient($angle, c.$colorBrandPrimary, #00b8b8);
+}
+
+@mixin textGradientLime($angle: 0deg) {
+  @include gradientLime($angle);
+  @include textGradient;
+}
+
+@mixin gradientOcean($angle: 171deg) {
+  background: linear-gradient($angle, c.$colorText 0%, #116884 89%);
+}
+
+@mixin textGradientOcean($angle: 0deg) {
+  @include gradientOcean($angle);
+  @include textGradient;
+}
+
+@mixin gradientSea($angle: 270deg) {
+  background: linear-gradient($angle, #0c6f8e, #08d1d1);
+}
+
+@mixin textGradientSea($angle: 0deg) {
+  @include gradientSea($angle);
+  @include textGradient;
+}
+
+@mixin gradientCitrus($angle: 90deg) {
+  background: linear-gradient($angle, c.$colorBrandRaspberry, c.$colorBrandCarrot);
+}
+
+@mixin textGradientCitrus($angle: 0deg) {
+  @include gradientCitrus($angle);
+  @include textGradient;
 }