chore: revert transparent tokens (#5097)

Amarnath510 · Ravki · web-flow · commit da399cecc16a · 2022-10-28T00:17:23.000+05:30
* chore: revert transparent tokens

* chore:update table-color-background-header-hover token color

* docs: update release notes and icons version

* docs: update readme

* chore: revert icons version as build is failing

* chore: revert icons version in pkg-lock

* chore: update icons version to 10.5.3

* docs: update release

* chore: updated legacy colors

Co-authored-by: Ravi Kiran Kudupudi &lt;rkudupudi@salesforce.com&gt;
diff --git a/RELEASENOTES.general.md b/RELEASENOTES.general.md
@@ -61,7 +61,9 @@
   - `crypto_wallet`
   - `nft_settings`
   - `nft_studio`
-  
+
+- Updated `@salesforce-ux/icons` dependency version to `10.5.3`
+
 ## 2.19.0 - August 11, 2022
 
 - Updated icons to `v10.4.0`
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -57,7 +57,8 @@
   - `crypto_wallet`
   - `nft_settings`
   - `nft_studio`
-  
+
+- Updated `@salesforce-ux/icons` dependency version to `10.5.3`
 
 ## Release 2.19.0 - August 11, 2022
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@salesforce-ux/design-system-markup": "^2.0.4",
     "@salesforce-ux/design-system-parser": "^1.1.1",
     "@salesforce-ux/design-system-primitive-tokens": "0.3.6",
-    "@salesforce-ux/icons": "10.5.1",
+    "@salesforce-ux/icons": "10.5.3",
     "@salesforce-ux/instant-vrt": "2.0.0",
     "@salesforce-ux/postcss-annotations-parser": "0.1.1",
     "@salesforce-ux/postcss-css-variable-value": "0.2.0",
diff --git a/ui/components/alert/base/_index.scss b/ui/components/alert/base/_index.scss
@@ -54,12 +54,12 @@ $alert-gradient-size-background: 64px 64px;
     }
 
     &:active {
-      color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active})));
+      color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, $color-text-link-inverse-active));
     }
 
     &[disabled] {
       // @TODO: declare at shared/global level
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+      color: $color-text-link-inverse-disabled;
     }
   }
 }
diff --git a/ui/components/button-icons/base/_index.scss b/ui/components/button-icons/base/_index.scss
@@ -85,7 +85,7 @@
   &[disabled],
   &:disabled {
     background-color: $color-background-button-inverse-disabled;
-    border-color: var(--slds-g-color-neutral-base-100, #{$color-border-button-inverse-disabled});
+    border-color: $color-border-button-inverse-disabled;
   }
 }
 
@@ -135,20 +135,20 @@
 
   &:hover,
   &:focus {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-hover});
+    color: $color-text-link-inverse-hover;
   }
 
   &:focus {
     @include focus-inverse;
   }
 
   &:active {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});
+    color: $color-text-link-inverse-active;
   }
 
   &[disabled],
   &:disabled {
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+    color: $color-text-link-inverse-disabled;
   }
 }
 
@@ -321,18 +321,18 @@
  */
 .slds-button__icon_inverse-hint,
 .slds-button__icon--inverse-hint {
-  fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint});
+  fill: $color-text-icon-inverse-hint;
 }
 
 // Handles hint on hover behavior of an inverse button icon, both bordered and non-bordered
 .slds-hint-parent {
 
   .slds-button_icon-border-inverse,
   .slds-button--icon-border-inverse {
-    border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint});
+    border-color: $color-border-icon-inverse-hint;
 
     &:focus {
-      border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});
+      border-color: $color-border-icon-inverse-hint-hover;
     }
   }
 
@@ -341,7 +341,7 @@
 
     .slds-button_icon-border-inverse,
     .slds-button--icon-border-inverse {
-      border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});
+      border-color: $color-border-icon-inverse-hint-hover;
     }
 
     .slds-button__icon_hint,
@@ -351,7 +351,7 @@
 
     .slds-button__icon_inverse-hint,
     .slds-button__icon--inverse-hint {
-      fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint-hover});
+      fill: $color-text-icon-inverse-hint-hover;
     }
 
     .slds-button:disabled {
diff --git a/ui/components/buttons/base/_index.scss b/ui/components/buttons/base/_index.scss
@@ -358,7 +358,7 @@ a.slds-button--inverse:focus {
   &:disabled {
     // @todo: global shared disabled button hooks
     background-color: $color-background-button-inverse-disabled;
-    border-color: var(--slds-g-color-neutral-base-100, #{$color-border-button-inverse-disabled});
+    border-color: $color-border-button-inverse-disabled;
   }
 }
 
@@ -397,7 +397,7 @@ a.slds-button--inverse:focus {
   &[disabled],
   &:disabled {
     // Make sure disabled buttons don't inherit hover states
-    color: var(--slds-g-color-neutral-base-100, #{$color-text-button-inverse-disabled});
+    color: $color-text-button-inverse-disabled;
   }
 }
 
diff --git a/ui/components/data-tables/base/_index.scss b/ui/components/data-tables/base/_index.scss
@@ -337,7 +337,7 @@
   &.slds-has-focus .slds-th__action,
   &.slds-has-focus .slds-th__action:hover,
   &.slds-has-focus .slds-th__action:focus {
-    background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});
+    background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
     color: currentColor;
 
     .slds-is-sortable__icon {
@@ -362,7 +362,7 @@
   &:focus,
   &:hover {
     outline: 0;
-    background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});
+    background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
   }
 }
 
diff --git a/ui/components/data-tables/inline-edit/_index.scss b/ui/components/data-tables/inline-edit/_index.scss
@@ -145,7 +145,7 @@
 .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover,
 .slds-is-resizable .slds-th__action:focus,
 .slds-is-resizable .slds-th__action:focus:hover {
-  background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});
+  background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
   box-shadow: $brand-accessible-active 0 0 0 1px inset, $brand-accessible-active -0.25rem 0 0 inset;
 }
 
@@ -247,7 +247,7 @@
     .slds-th__action:focus,
     .slds-th__action:focus:hover {
       color: inherit;
-      background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});
+      background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
       box-shadow: none;
     }
 
@@ -258,7 +258,7 @@
 
     // Handle the difference on resizeable columns
     &.slds-is-resizable:hover .slds-th__action {
-      background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});
+      background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
       box-shadow: var(--slds-g-color-border-base-1, #{$color-border}) -0.25rem 0 0 inset;
     }
   }
diff --git a/ui/components/file-selector/base/_index.scss b/ui/components/file-selector/base/_index.scss
@@ -193,7 +193,7 @@
    * @modifier
    */
   &.slds-has-drag {
-    background: var(--slds-g-color-neutral-base-100, #{$color-background-backdrop});
+    background: $color-background-backdrop;
     opacity: 1;
     z-index: $z-index-overlay;
   }
diff --git a/ui/components/files/base/_index.scss b/ui/components/files/base/_index.scss
@@ -58,7 +58,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: var(--slds-g-color-neutral-base-10, #{$color-background-image-overlay});
+    background-color: $color-background-image-overlay;
   }
 
   // Adds and vertically centers "preview" icon via base64
@@ -269,7 +269,7 @@
 .slds-file_overlay,
 .slds-file--overlay {
   content: '';
-  background: var(--slds-g-color-neutral-base-10, #{$color-background-image-overlay});
+  background: $color-background-image-overlay;
   color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
   position: absolute;
   top: 0;
diff --git a/ui/components/menus/dropdown/_index.scss b/ui/components/menus/dropdown/_index.scss
@@ -158,17 +158,17 @@
 
     &:hover,
     &:focus {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-hover});
+      color: $color-text-link-inverse-hover;
       background-color: transparent;
     }
 
     &:active {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});
+      color: $color-text-link-inverse-active;
       background-color: transparent;
     }
 
     &[aria-disabled="true"] {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+      color: $color-text-link-inverse-disabled;
       cursor: default;
 
       &:hover {
diff --git a/ui/components/modals/base/_index.scss b/ui/components/modals/base/_index.scss
@@ -208,8 +208,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: var(--slds-c-backdrop-color-background, var(--sds-c-backdrop-color-background,
-    var(--slds-g-color-neutral-base-60, #{$color-background-temp-modal-tint})));
+  background: var(--slds-c-backdrop-color-background, var(--sds-c-backdrop-color-background, $color-background-temp-modal-tint));
   z-index: $z-index-modal;
 
   /**
diff --git a/ui/components/path-simple/base/_deprecate.scss b/ui/components/path-simple/base/_deprecate.scss
@@ -32,7 +32,7 @@ $legacy-color-background-path-lost: #c23934;
     @include tabs;
 
     .slds-is-complete {
-      background-color: $legacy-color-background-path-complete;
+      background-color: var(--slds-g-color-success-base-60, #{$legacy-color-background-path-complete});
 
       .slds-tabs_path__stage,
       .slds-tabs--path__stage {
@@ -50,7 +50,7 @@ $legacy-color-background-path-lost: #c23934;
       }
 
       &:hover {
-        background-color: $legacy-color-background-path-complete-hover;
+        background-color: var(--slds-g-color-success-base-50 ,#{$legacy-color-background-path-complete-hover});
 
         .slds-tabs_path__stage,
         .slds-tabs--path__stage {
@@ -70,18 +70,18 @@ $legacy-color-background-path-lost: #c23934;
     }
 
     .slds-is-current {
-      background-color: $legacy-color-background-path-current;
+      background-color: var(--slds-g-color-brand-base-50, #{$legacy-color-background-path-current});
 
       &:hover {
-        background-color: $legacy-color-background-path-current-hover;
+        background-color: var(--slds-g-color-brand-base-40, #{$legacy-color-background-path-current-hover});
       }
 
       + .slds-is-incomplete:before {
-        background-color: $legacy-color-background-path-current;
+        background-color: var(--slds-g-color-brand-base-50, #{$legacy-color-background-path-current});
       }
 
       &:hover + .slds-is-incomplete:before {
-        background-color: $legacy-color-background-path-current-hover;
+        background-color: var(--slds-g-color-brand-base-40, #{$legacy-color-background-path-current-hover});
       }
     }
 
@@ -100,7 +100,7 @@ $legacy-color-background-path-lost: #c23934;
 
     .slds-is-lost,
     .slds-is-lost:hover {
-      background-color: $legacy-color-background-path-lost;
+      background-color: var(--slds-g-color-error-base-40, #{$legacy-color-background-path-lost});
     }
 
     // Lets make sure we have the right color when these steps are activated
@@ -203,12 +203,12 @@ $legacy-color-background-path-lost: #c23934;
     // The below logic makes the :before (which is actually a part of the previous section) the proper color based on tabs--path__item order
     + .slds-is-complete:before,
     + .slds-is-current:before {
-      background-color: $legacy-color-background-path-complete;
+      background-color: var(--slds-g-color-success-base-60, #{$legacy-color-background-path-complete});
     }
 
     &:hover + .slds-is-complete:before,
     &:hover + .slds-is-current:before {
-      background-color: $legacy-color-background-path-complete-hover;
+      background-color: var(--slds-g-color-success-base-50, #{$legacy-color-background-path-complete-hover});
     }
 
     + .slds-is-incomplete:before,
diff --git a/ui/components/spinners/base/_index.scss b/ui/components/spinners/base/_index.scss
@@ -8,7 +8,7 @@
   bottom: 0;
   left: 0;
   z-index: $z-index-spinner;
-  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-temp-modal-tint-alt});
+  background-color: $color-background-temp-modal-tint-alt;
   visibility: visible;
   opacity: 1;
   transition: opacity 0.2s ease, visibility 0s;
diff --git a/ui/dependencies/_theme.scss b/ui/dependencies/_theme.scss
@@ -59,11 +59,11 @@
     }
 
     &:active {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});
+      color: $color-text-link-inverse-active;
     }
 
     &[disabled] {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+      color: $color-text-link-inverse-disabled;
     }
   }
 }
@@ -121,11 +121,11 @@
     }
 
     &:active {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});
+      color: $color-text-link-inverse-active;
     }
 
     &[disabled] {
-      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});
+      color: $color-text-link-inverse-disabled;
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -54,12 +54,12 @@ $alert-gradient-size-background: 64px 64px;`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`&:active {`
`57`		`- color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active})));`
	`57`	`+ color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, $color-text-link-inverse-active));`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`&[disabled] {`
`61`	`61`	`// @TODO: declare at shared/global level`
`62`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});`
	`62`	`+ color: $color-text-link-inverse-disabled;`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@`
`85`	`85`	`&[disabled],`
`86`	`86`	`&:disabled {`
`87`	`87`	`background-color: $color-background-button-inverse-disabled;`
`88`		`- border-color: var(--slds-g-color-neutral-base-100, #{$color-border-button-inverse-disabled});`
	`88`	`+ border-color: $color-border-button-inverse-disabled;`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`
`@@ -135,20 +135,20 @@`
`135`	`135`
`136`	`136`	`&:hover,`
`137`	`137`	`&:focus {`
`138`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-hover});`
	`138`	`+ color: $color-text-link-inverse-hover;`
`139`	`139`	`}`
`140`	`140`
`141`	`141`	`&:focus {`
`142`	`142`	`@include focus-inverse;`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`&:active {`
`146`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-active});`
	`146`	`+ color: $color-text-link-inverse-active;`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`&[disabled],`
`150`	`150`	`&:disabled {`
`151`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse-disabled});`
	`151`	`+ color: $color-text-link-inverse-disabled;`
`152`	`152`	`}`
`153`	`153`	`}`
`154`	`154`
`@@ -321,18 +321,18 @@`
`321`	`321`	`*/`
`322`	`322`	`.slds-button__icon_inverse-hint,`
`323`	`323`	`.slds-button__icon--inverse-hint {`
`324`		`- fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint});`
	`324`	`+ fill: $color-text-icon-inverse-hint;`
`325`	`325`	`}`
`326`	`326`
`327`	`327`	`// Handles hint on hover behavior of an inverse button icon, both bordered and non-bordered`
`328`	`328`	`.slds-hint-parent {`
`329`	`329`
`330`	`330`	`.slds-button_icon-border-inverse,`
`331`	`331`	`.slds-button--icon-border-inverse {`
`332`		`- border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint});`
	`332`	`+ border-color: $color-border-icon-inverse-hint;`
`333`	`333`
`334`	`334`	`&:focus {`
`335`		`- border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});`
	`335`	`+ border-color: $color-border-icon-inverse-hint-hover;`
`336`	`336`	`}`
`337`	`337`	`}`
`338`	`338`
`@@ -341,7 +341,7 @@`
`341`	`341`
`342`	`342`	`.slds-button_icon-border-inverse,`
`343`	`343`	`.slds-button--icon-border-inverse {`
`344`		`- border-color: var(--slds-g-color-neutral-base-100, #{$color-border-icon-inverse-hint-hover});`
	`344`	`+ border-color: $color-border-icon-inverse-hint-hover;`
`345`	`345`	`}`
`346`	`346`
`347`	`347`	`.slds-button__icon_hint,`
`@@ -351,7 +351,7 @@`
`351`	`351`
`352`	`352`	`.slds-button__icon_inverse-hint,`
`353`	`353`	`.slds-button__icon--inverse-hint {`
`354`		`- fill: var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse-hint-hover});`
	`354`	`+ fill: $color-text-icon-inverse-hint-hover;`
`355`	`355`	`}`
`356`	`356`
`357`	`357`	`.slds-button:disabled {`
Original file line number	Diff line number	Diff line change
`@@ -358,7 +358,7 @@ a.slds-button--inverse:focus {`
`358`	`358`	`&:disabled {`
`359`	`359`	`// @todo: global shared disabled button hooks`
`360`	`360`	`background-color: $color-background-button-inverse-disabled;`
`361`		`- border-color: var(--slds-g-color-neutral-base-100, #{$color-border-button-inverse-disabled});`
	`361`	`+ border-color: $color-border-button-inverse-disabled;`
`362`	`362`	`}`
`363`	`363`	`}`
`364`	`364`
`@@ -397,7 +397,7 @@ a.slds-button--inverse:focus {`
`397`	`397`	`&[disabled],`
`398`	`398`	`&:disabled {`
`399`	`399`	`// Make sure disabled buttons don't inherit hover states`
`400`		`- color: var(--slds-g-color-neutral-base-100, #{$color-text-button-inverse-disabled});`
	`400`	`+ color: $color-text-button-inverse-disabled;`
`401`	`401`	`}`
`402`	`402`	`}`
`403`	`403`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@`
`145`	`145`	`.slds-has-focus.slds-is-resizable .slds-th__action:focus:hover,`
`146`	`146`	`.slds-is-resizable .slds-th__action:focus,`
`147`	`147`	`.slds-is-resizable .slds-th__action:focus:hover {`
`148`		`- background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});`
	`148`	`+ background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});`
`149`	`149`	`box-shadow: $brand-accessible-active 0 0 0 1px inset, $brand-accessible-active -0.25rem 0 0 inset;`
`150`	`150`	`}`
`151`	`151`
`@@ -247,7 +247,7 @@`
`247`	`247`	`.slds-th__action:focus,`
`248`	`248`	`.slds-th__action:focus:hover {`
`249`	`249`	`color: inherit;`
`250`		`- background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});`
	`250`	`+ background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});`
`251`	`251`	`box-shadow: none;`
`252`	`252`	`}`
`253`	`253`
`@@ -258,7 +258,7 @@`
`258`	`258`
`259`	`259`	`// Handle the difference on resizeable columns`
`260`	`260`	`&.slds-is-resizable:hover .slds-th__action {`
`261`		`- background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header-hover});`
	`261`	`+ background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});`
`262`	`262`	`box-shadow: var(--slds-g-color-border-base-1, #{$color-border}) -0.25rem 0 0 inset;`
`263`	`263`	`}`
`264`	`264`	`}`
Original file line number	Diff line number	Diff line change
`@@ -193,7 +193,7 @@`
`193`	`193`	`* @modifier`
`194`	`194`	`*/`
`195`	`195`	`&.slds-has-drag {`
`196`		`- background: var(--slds-g-color-neutral-base-100, #{$color-background-backdrop});`
	`196`	`+ background: $color-background-backdrop;`
`197`	`197`	`opacity: 1;`
`198`	`198`	`z-index: $z-index-overlay;`
`199`	`199`	`}`