patch(hooks): Treat Styling Hooks targeting text color as an element, previously referred to as a property (#4431)

* patch(hooks): Treat Styling Hooks targeting text color as an element, previous referred to as a property

* release notes

* Clean up

* Fix name

Author: brandonferrua

RELEASENOTES.md

@@ -4,10 +4,45 @@
 ## Release 2.13.3 - September 24, 2020
 
 ## Components
+### [Alert](https://www.lightningdesignsystem.com/components/alert)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-alert-color-text` => `--sds-c-alert-text-color`.
+
+### [Avatar](https://www.lightningdesignsystem.com/components/avatar)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-avatar-initials-color-text` => `--sds-c-avatar-initials-text-color`.
+
+### [Badges](https://www.lightningdesignsystem.com/components/badges)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-badge-color-text` => `--sds-c-badge-text-color`.
+
+### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
+#### Added
+- Added Styling Hook for box-shadow
+- Added Styling Hook for block level padding
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-button-color-text` => `--sds-c-button-text-color`.
+
 ### [Modals](https://www.lightningdesignsystem.com/components/modals)
 #### Fixed
 - Fixed incorrect styling hooks on footer.
 
+### [Pills](https://www.lightningdesignsystem.com/components/pills)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-pill-color-text` => `--sds-c-pill-text-color`.
+
+### [Scoped Tabs](https://www.lightningdesignsystem.com/components/scoped-tabs)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-tabs-scoped-color-text` => `--sds-c-tabs-scoped-text-color`.
+
+### [Tabs](https://www.lightningdesignsystem.com/components/tabs)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-tabs-item-color-text` => `--sds-c-tabs-item-text-color`.
+
+### [Tooltips](https://www.lightningdesignsystem.com/components/tooltips)
+#### Changed
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-tooltip-color-text` => `--sds-c-tooltip-text-color`.
+
 ## Release 2.13.2 - September 23, 2020
 
 - Added added icons synonym metadata to SLDS dist

ui/components/alert/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Alert Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.13.3
+
+### Changed
+
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-alert-color-text` => `--sds-c-alert-text-color`.
 
 ## 2.13.0
 

ui/components/alert/base/_index.scss

@@ -20,7 +20,7 @@
   padding-right: var(--sds-c-alert-spacing-inline-end, $spacing-x-large);
   padding-bottom: var(--sds-c-alert-spacing-block-end, $spacing-x-small);
   padding-left: var(--sds-c-alert-spacing-inline-start, $spacing-x-small);
-  color: var(--sds-c-alert-color-text, $color-text-inverse);
+  color: var(--sds-c-alert-text-color, $color-text-inverse);
   font-weight: var(--sds-c-alert-font-weight, $font-weight-light);
   text-align: center;
   background-color: var(--sds-c-alert-color-background, $color-background-toast);
@@ -44,12 +44,12 @@
 
     &:active {
       // @todo re-evaluate Styling Hooks reassignment
-      color: var(--sds-c-alert-color-text-active, $color-text-link-inverse-active);
+      color: var(--sds-c-alert-text-color-active, $color-text-link-inverse-active);
     }
 
     &[disabled] {
       // @todo re-evaluate Styling Hooks reassignment
-      color: var(--sds-c-alert-color-text-disabled, $color-text-link-inverse-disabled);
+      color: var(--sds-c-alert-text-color-disabled, $color-text-link-inverse-disabled);
     }
   }
 

ui/components/avatar/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Avatar Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.13.3
+
+### Changed
+
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-avatar-initials-color-text` => `--sds-c-avatar-initials-text-color`.
 
 ## 2.13.0
 

ui/components/avatar/base/_index.scss

@@ -19,7 +19,7 @@
   border-radius: var(--sds-c-avatar-radius-border, $border-radius-medium);
   line-height: $line-height-reset;
   font-size: $font-size-heading-small;
-  color: var(--sds-c-avatar-color-text, $color-text-inverse);
+  color: var(--sds-c-avatar-text-color, $color-text-inverse);
 
   &:hover,
   &:focus:hover {
@@ -198,6 +198,7 @@
  */
 .slds-avatar__initials {
   @include absolute-center;
+  color: var(--sds-c-avatar-initials-text-color);
   height: 100%;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
 
@@ -207,7 +208,7 @@
   }
 
   &:hover {
-    color: $color-text-inverse;
+    color: var(--sds-c-avatar-initials-text-color-hover, $color-text-inverse);
     cursor: default;
   }
 }
@@ -221,12 +222,12 @@
  * @group color
  */
 .slds-avatar__initials_inverse {
-  background-color: var(--sds-c-avatar-initials-inverse-color-background, $color-background);
-  color: var(--sds-c-avatar-initials-inverse-color-text, $color-text-weak);
+  background-color: $color-background;
+  color: $color-text-weak;
   text-shadow: none;
 
   // combat abbr override styling in avatar
   &:hover {
-    color: var(--sds-c-avatar-initials-inverse-color-text, $color-text-weak);
+    color: $color-text-weak;
   }
 }

ui/components/badges/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Badges Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.13.3
+
+### Changed
+
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-badge-color-text` => `--sds-c-badge-text-color`.
 
 ## 2.13.0
 

ui/components/badges/base/_index.scss

@@ -20,7 +20,7 @@
   font-size: var(--sds-c-badge-font-size, $font-size-2);
   font-weight: $font-weight-bold;
   line-height: var(--sds-c-badge-line-height, normal);
-  color: var(--sds-c-badge-color-text, $color-text-default);
+  color: var(--sds-c-badge-text-color, $color-text-default);
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
@@ -47,7 +47,7 @@
   background-color: var(--sds-c-badge-inverse-color-background, $badge-color-background-inverse);
 
   // @todo re-evaluate Styling Hooks reassignment
-  color: var(--sds-c-badge-inverse-color-text, $color-text-inverse);
+  color: var(--sds-c-badge-inverse-text-color, $color-text-inverse);
 }
 
 /**

ui/components/buttons/RELEASENOTES.md

@@ -4,6 +4,17 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.13.3
+
+### Added
+
+- Added Styling Hook for box-shadow
+- Added Styling Hook for block level padding
+
+### Changed
+
+- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. `--sds-c-button-color-text` => `--sds-c-button-text-color`.
+
 ## 2.13.1
 
 ### Fixed