feat(notice): add component tokens

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

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, focusable, renders, slots, hidden, t9n } from "../../tests/commonTests";
+import { accessible, focusable, renders, slots, hidden, themed, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
@@ -129,4 +129,61 @@ describe("calcite-notice", () => {
   describe("translation support", () => {
     t9n("calcite-notice");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-notice kind="danger" open closable>
+            <div slot="title">Title</div>
+            <div slot="message">Message</div>
+            <calcite-link slot="link" title="my action">Retry</calcite-link>
+          </calcite-notice>
+        `,
+        {
+          "--calcite-notice-background": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-notice-close-background-focus": [
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "backgroundColor",
+              state: "focus",
+            },
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "backgroundColor",
+              state: "hover",
+            },
+          ],
+          // "--calcite-notice-close-background-press": {
+          //   shadowSelector: `.${CSS.close}`,
+          //   targetProp: "backgroundColor",
+          //   state: { press: { attribute: "class", value: CSS.close } },
+          // },
+          "--calcite-notice-close-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "color",
+              state: "focus",
+            },
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          ],
+          // "--calcite-notice-close-text-color": {
+          //   shadowSelector: `.${CSS.close}`,
+          //   targetProp: "color",
+          // },
+          // "--calcite-notice-content-text-color": {
+          //   shadowSelector: `div([slot=message])`,
+          //   targetProp: "color",
+          // },
+        },
+      );
+    });
+  });
 });

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

@@ -3,7 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-notice-width: The width of the component.
+ * @prop --calcite-notice-background: Specifies the background color of the component.
+ * @prop --calcite-notice-close-background-focus: Specifies the background color of the component when focused.
+ * @prop --calcite-notice-close-background-press: Specifies the background color of the component when active.
+ * @prop --calcite-notice-close-text-color-hover: Specifies the background color of component's close button when hovered.
+ * @prop --calcite-notice-close-text-color: Specifies the text color of component's close button.
+ * @prop --calcite-notice-content-text-color: Specifies the content text color of the component.
+ * @prop --calcite-notice-width: Specifies the width of the component.
  */
 
 // scale variables
@@ -71,20 +77,21 @@
 }
 
 .container {
-  @apply bg-foreground-1
-    pointer-events-none
+  @apply pointer-events-none
     my-0
     box-border
     flex
     w-full
     opacity-0;
+
   overflow: hidden;
   max-block-size: 0;
   transition-property: opacity, max-block-size;
   transition-duration: var(--calcite-animation-timing);
   text-align: start;
   border-inline-start: var(--calcite-border-width-md) solid;
   box-shadow: 0 0 0 0 transparent;
+  background-color: var(--calcite-notice-background, var(--calcite-color-foreground-1));
 }
 
 // focus styles
@@ -109,12 +116,16 @@
 }
 
 @include slotted("title", "*", ".container") {
-  @apply text-color-1 m-0 font-medium;
+  @apply m-0 font-medium;
+
+  color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
 }
 
 @include slotted("message", "*", ".container") {
-  @apply text-color-2 m-0 inline font-normal;
+  @apply m-0 inline font-normal;
+
   margin-inline-end: var(--calcite-notice-spacing-token-small);
+  color: var(--calcite-notice-content-text-color, var(--calcite-color-text-2));
 }
 
 @mixin notice-element-base() {
@@ -146,17 +157,20 @@
 }
 
 .notice-close {
-  @apply text-color-3 flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
+  @apply flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
   @include notice-element-base;
   -webkit-appearance: none;
 
+  color: var(--calcite-notice-close-text-color, var(--calcite-color-text-3));
+
   &:hover,
   &:focus {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-notice-close-background-focus, var(--calcite-color-foreground-2));
+    color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
   }
 
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-notice-close-background-press, var(--calcite-color-foreground-3));
   }
 }