feat(notice): add token for close icon and title text color (#11938)

**Related Issue:** #11790 

## Summary
The issue was initially to fix the fact that the text title color was
being changed along with the `--calcite-notice-close-text-color-hover`
token. In addition I'm proposing a name change (deprecation) for the
following tokens:

`--calcite-notice-close-text-color`
`--calcite-notice-close-text-color-hover`

to:

`--calcite-notice-close-icon-color`
`--calcite-notice-close-icon-color-hover`

Also a new token would be added to target the title text color:

`--calcite-notice-title-text-color`

deprecate(notice): deprecate notice close text color tokens

Author: DitwanP

packages/calcite-components/src/components/notice/notice.e2e.ts

@@ -145,20 +145,20 @@ describe("calcite-notice", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "backgroundColor",
           },
-          "--calcite-notice-close-text-color": {
+          "--calcite-notice-close-icon-color": {
             shadowSelector: `.${CSS.close}`,
             targetProp: "color",
           },
-          "--calcite-notice-close-text-color-hover": [
+          "--calcite-notice-close-icon-color-hover": [
             {
               shadowSelector: `.${CSS.close}`,
               targetProp: "color",
-              state: "focus",
+              state: { focus: { attribute: "class", value: CSS.close } },
             },
             {
               shadowSelector: `.${CSS.close}`,
               targetProp: "color",
-              state: "hover",
+              state: { hover: { attribute: "class", value: CSS.close } },
             },
           ],
           "--calcite-notice-close-background-color-focus": [

packages/calcite-components/src/components/notice/notice.scss

@@ -6,10 +6,13 @@
  * @prop --calcite-notice-background-color: Specifies the component's background color.
  * @prop --calcite-notice-close-background-color-focus: Specifies the component's background color when focused.
  * @prop --calcite-notice-close-background-color-press: Specifies the component's background color when active.
- * @prop --calcite-notice-close-text-color-hover: Specifies the background color of the component's close button when hovered.
- * @prop --calcite-notice-close-text-color: Specifies the text color of the component's close button.
+ * @prop --calcite-notice-close-icon-color-hover: Specifies the background color of the component's close button when hovered.
+ * @prop --calcite-notice-close-icon-color: Specifies the text color of the component's close button.
+ * @prop --calcite-notice-title-text-color: Specifies the component's title text color.
  * @prop --calcite-notice-content-text-color: Specifies the component's content text color.
  * @prop --calcite-notice-width: [Deprecated] Specifies the component's width.
+ * @prop --calcite-notice-close-text-color-hover: [Deprecated] Use `--calcite-notice-close-icon-color-hover`. Specifies the background color of the component's close button when hovered.
+ * @prop --calcite-notice-close-text-color: [Deprecated] Use `--calcite-notice-close-icon-color`. Specifies the text color of the component's close button.
  */
 
 // scale variables
@@ -118,7 +121,7 @@
 @include slotted("title", "*", ".container") {
   @apply m-0 font-medium;
 
-  color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
+  color: var(--calcite-notice-title-text-color, var(--calcite-color-text-1));
 }
 
 @include slotted("message", "*", ".container") {
@@ -161,12 +164,12 @@
   @include notice-element-base;
   -webkit-appearance: none;
 
-  color: var(--calcite-notice-close-text-color, var(--calcite-color-text-3));
+  color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-3));
 
   &:hover,
   &:focus {
     background-color: var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));
-    color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
+    color: var(--calcite-notice-close-icon-color-hover, var(--calcite-color-text-1));
   }
 
   &:active {

packages/calcite-components/src/custom-theme/notice.ts

@@ -6,6 +6,9 @@ export const noticeTokens = {
   calciteNoticeCloseBackgroundColorPress: "",
   calciteNoticeCloseTextColorHover: "",
   calciteNoticeCloseTextColor: "",
+  calciteNoticeCloseIconColorHover: "",
+  calciteNoticeCloseIconColor: "",
+  calciteNoticeTitleTextColor: "",
   calciteNoticeContentTextColor: "",
 };
 

packages/calcite-components/src/demos/notice.html

@@ -31,6 +31,16 @@
         margin: 60px 0;
         border-top: 1px solid var(--calcite-color-border-2);
       }
+
+      .themed {
+        --calcite-notice-background-color: pink;
+        --calcite-notice-close-background-color-focus: aquamarine;
+        --calcite-notice-close-background-color-press: teal;
+        --calcite-notice-close-icon-color-hover: red;
+        --calcite-notice-close-icon-color: green;
+        --calcite-notice-title-text-color: purple;
+        --calcite-notice-content-text-color: yellow;
+      }
     </style>
     <script src="./_assets/head.ts"></script>
   </head>
@@ -513,6 +523,19 @@ <h1 style="margin: 0 auto; text-align: center">Notice</h1>
           </calcite-notice>
         </div>
       </div>
+
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">Themed</div>
+
+        <div class="child themed">
+          <calcite-notice icon scale="l" open closable>
+            <div slot="title">Title lorem ispum</div>
+            <div slot="message">Body lorem ispum</div>
+            <calcite-link slot="link" title="my action">Link ispum </calcite-link>
+          </calcite-notice>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>