chore: update dependencies and other tokens (#5091)

* chore: update dependencies and other tokens

* chore: update hardcoded values

* chore: update red-50 to red-40 for error tokens

* chore: update palette tokens with styling hooks

* chore: update neu-50 to 10 for const color

* doc: updated release notes

Author: Amarnath510

RELEASENOTES.md

@@ -3,10 +3,11 @@
 
 ## Release 2.20.0 - Upcoming
 
+- Updated constanst colors codes with global slds hooks
 - Updated background colors for Standard and Actions icons
 - Added two new dependencies for SLDS global styling hooks generation,
-  - `@salesforce-ux/sds-styling-aliases`
-  - `@salesforce-ux/sds-styling-hooks`
+  - `@salesforce-ux/sds-styling-aliases` with version `0.2.4`
+  - `@salesforce-ux/sds-styling-hooks` with version `1.1.0-alpha.2`
 - Updated `gulpfile` to include SLDS global hooks generation as part of build and dist jobs
 - Updated design tokens in every component and utility with SLDS global styling hooks (except Brand related tokens)
 

package-lock.json

@@ -54,8 +54,8 @@
     "@salesforce-ux/postcss-annotations-parser": "0.1.1",
     "@salesforce-ux/postcss-css-variable-value": "0.2.0",
     "@salesforce-ux/scss-parser-aura": "^3.1.1",
-    "@salesforce-ux/sds-styling-aliases": "0.2.3",
-    "@salesforce-ux/sds-styling-hooks": "1.0.0-alpha.1",
+    "@salesforce-ux/sds-styling-aliases": "0.2.4",
+    "@salesforce-ux/sds-styling-hooks": "1.1.0-alpha.2",
     "@storybook/addon-a11y": "^5.3.21",
     "@storybook/addon-backgrounds": "^5.3.21",
     "@storybook/addon-docs": "^5.3.21",

package.json

@@ -96,7 +96,7 @@ $alert-gradient-size-background: 64px 64px;
  */
 .slds-alert_error {
   /*! @css-var-fallback background-color */
-  --slds-c-alert-color-background: var(--slds-g-color-error-base-50, #{$color-background-toast-error});
+  --slds-c-alert-color-background: var(--slds-g-color-error-base-40, #{$color-background-toast-error});
 }
 
 /**
@@ -106,7 +106,7 @@ $alert-gradient-size-background: 64px 64px;
  */
 .slds-alert_offline {
   /*! @css-var-fallback background-color */
-  --slds-c-alert-color-background: #{$palette-neutral-30};
+  --slds-c-alert-color-background: var(--slds-g-color-neutral-base-30, #{$palette-neutral-30});
 }
 
 /**

ui/components/alert/base/_index.scss

@@ -346,7 +346,7 @@
  */
 .slds-chat-message__text_delivery-failure {
   background-color: var(--slds-g-color-neutral-base-100, #{$chat-message-color-background-status});
-  border: var(--slds-g-color-error-base-50, #{$color-border-destructive}) $border-width-thin solid;
+  border: var(--slds-g-color-error-base-40, #{$color-border-destructive}) $border-width-thin solid;
   color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
   margin-left: auto;
 
@@ -360,7 +360,7 @@
     padding: $spacing-x-small $spacing-x-small 0;
     margin: $spacing-x-small #{-$spacing-x-small} 0;
     color: var(--slds-g-color-error-base-40, #{$color-text-error});
-    border-top: var(--slds-g-color-error-base-50, #{$color-border-destructive}) $border-width-thin solid;
+    border-top: var(--slds-g-color-error-base-40, #{$color-border-destructive}) $border-width-thin solid;
   }
 
   @include deprecate('4.0', 'Please use slds-icon-text-error modifier for slds-icon') {

ui/components/chat/base/_index.scss

@@ -71,7 +71,7 @@ $_ellie-frameset: (
   svg {
     width: $_ellie-sprite-width;
     vertical-align: top;
-    color: $palette-cloud-blue-60;
+    color: var(--slds-g-color-palette-cloud-blue-60, #{$palette-cloud-blue-60});
   }
 
   circle:nth-child(2n + 1) {
@@ -81,8 +81,8 @@ $_ellie-frameset: (
   }
 
   circle:nth-child(2n) {
-    fill: $palette-neutral-100;
-    stroke: $palette-neutral-100;
+    fill: var(--slds-g-color-neutral-base-100, #{$palette-neutral-100});
+    stroke: var(--slds-g-color-neutral-base-100, #{$palette-neutral-100});
     stroke-width: 1px;
   }
 }

ui/components/dynamic-icons/ellie/_index.scss

@@ -27,7 +27,7 @@
   circle { // 1
     stroke-width: 0.95px;
     fill: transparent;
-    stroke: $palette-neutral-60;
+    stroke: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60});
     transition: // 2
       fill 0.4s ease-in-out,
       stroke 0.4s ease-in-out;
@@ -61,7 +61,7 @@
   &[data-slds-strength="-3"] circle:nth-child(1),
   &[data-slds-strength="-3"] circle:nth-child(2),
   &[data-slds-strength="-3"] circle:nth-child(3) {
-    fill: $palette-pink-90;
+    fill: var(--slds-g-color-palette-pink-90, #{$palette-pink-90});
     stroke: var(--slds-g-color-error-base-30, #{$color-background-error-dark});
   }
 
@@ -126,12 +126,12 @@
 // Improve readability of animations
 // stylelint-disable
 @keyframes slds-icon-strength-positive-load {
-  0%   { fill: transparent; stroke: $palette-neutral-60; }
+  0%   { fill: transparent; stroke: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60}); }
   100% { fill: var(--slds-g-color-success-base-50, #{$color-text-success});
     stroke: var(--slds-g-color-success-base-50, #{$color-text-success}); }
 }
 
 @keyframes slds-icon-strength-negative-load {
-  0%   { fill: transparent; stroke: $palette-neutral-60; }
-  100% { fill: $palette-pink-90; stroke: var(--slds-g-color-error-base-40, #{$color-background-destructive}); }
+  0%   { fill: transparent; stroke: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60}); }
+  100% { fill: var(--slds-g-color-palette-pink-90, #{$palette-pink-90}); stroke: var(--slds-g-color-error-base-40, #{$color-background-destructive}); }
 }

ui/components/dynamic-icons/strength/_index.scss

@@ -69,7 +69,7 @@ $_icon-trend-one: 1.125px;
 }
 
 .slds-icon-trend[data-slds-trend="neutral"] {
-  color: $palette-neutral-60;
+  color: var(--slds-g-color-neutral-base-60, #{$palette-neutral-60});
 }
 
 .slds-icon-trend[data-slds-trend="up"] {

ui/components/dynamic-icons/trend/_index.scss

@@ -14,7 +14,7 @@
   padding: $spacing-x-small $spacing-large $spacing-x-small 0;
   min-height: $height-tappable;
   line-height: 1.375;
-  border-bottom: $border-width-thin solid #f1f2f3;
+  border-bottom: $border-width-thin solid var(--slds-g-color-neutral-base-95, #f1f2f3);
 
   mark {
     font-weight: $font-weight-bold;

ui/components/lookups-mobile/listbox/_index.scss

@@ -228,7 +228,7 @@
     user-select: text;
 
     &.ql-blank:before {
-      color: #54698d;
+      color: var(--slds-g-color-neutral-base-10, #54698d);
       content: attr(data-placeholder);
       pointer-events: none;
       position: absolute;