From 8fad19df04723778c681d707a9bc5b51cc824956 Mon Sep 17 00:00:00 2001
From: Yevhen Martynenko <yevhen.martynenko@hazelcast.com>
Date: Wed, 9 Oct 2024 12:55:52 +0300
Subject: [PATCH] *chore bump css and scss deps

---
 packages/ui/src/Button.module.scss            | 13 +++++++------
 packages/ui/styles/constants/_colors.scss     | 10 ++++++----
 packages/ui/styles/constants/_typography.scss |  7 -------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/Button.module.scss b/packages/ui/src/Button.module.scss
index 683c0b918..02a0023c7 100644
--- a/packages/ui/src/Button.module.scss
+++ b/packages/ui/src/Button.module.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
@@ -174,12 +175,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$colorBrand, 20%));
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: 20%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$colorBrand, 10%));
+        @include buttonColor(color.adjust(c.$colorBrand, $lightness: -10%));
       }
 
       &.variantContained {
@@ -198,12 +199,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$authPrimary, 10%));
+        @include buttonColor(color.adjust(c.$authPrimary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$authPrimary, 10%));
+        @include buttonColor(color.adjust(c.$authPrimary, $lightness: -10%));
       }
 
       &.variantContained {
@@ -224,12 +225,12 @@
       &.hover,
       &:focus-visible,
       &.focus {
-        @include buttonColor(lighten(c.$authSecondary, 10%));
+        @include buttonColor(color.adjust(c.$authSecondary, $lightness: 10%));
       }
 
       &:active,
       &.active {
-        @include buttonColor(darken(c.$authSecondary, 10%));
+        @include buttonColor(color.adjust(c.$authSecondary, $lightness: -10%));
       }
 
       &.variantContained {
diff --git a/packages/ui/styles/constants/_colors.scss b/packages/ui/styles/constants/_colors.scss
index 1050ff94d..89caa2c1d 100644
--- a/packages/ui/styles/constants/_colors.scss
+++ b/packages/ui/styles/constants/_colors.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // https://zeroheight.com/11d0e6dac/p/594529--colors
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
@@ -8,16 +10,16 @@ $colorNeutralLight: #b7c1cb !default;
 $colorNeutral: #dbdbdb !default;
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: color.adjust($colorSuccess, $lightness: -10%) !default;
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: color.adjust($colorInfo, $lightness: -10%) !default;
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: color.adjust($colorWarning, $lightness: -15%) !default;
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: color.adjust($colorError, $lightness: -10%) !default;
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;
diff --git a/packages/ui/styles/constants/_typography.scss b/packages/ui/styles/constants/_typography.scss
index 17092ac2f..5a4fd358f 100644
--- a/packages/ui/styles/constants/_typography.scss
+++ b/packages/ui/styles/constants/_typography.scss
@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
-  font-weight: $fontWeightHeadingRegular #{override($override)};
-  font-size: $fontSizeH4 #{override($override)};
-  letter-spacing: $letterSpacingH4 #{override($override)};
-  line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
   font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};