correct token names and deprecation note

Esri · Jan 3, 2025 · 499d69a · 499d69a
1 parent 9e5dbc1
commit 499d69a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/calcite-components/src/components/notice/notice.e2e.ts b/packages/calcite-components/src/components/notice/notice.e2e.ts
@@ -141,11 +141,11 @@ describe("calcite-notice", () => {
           </calcite-notice>
         `,
         {
-          "--calcite-notice-background": {
+          "--calcite-notice-background-color": {
             shadowSelector: `.${CSS.container}`,
             targetProp: "backgroundColor",
           },
-          "--calcite-notice-close-background-focus": [
+          "--calcite-notice-close-background-color-focus": [
             {
               shadowSelector: `.${CSS.close}`,
               targetProp: "backgroundColor",
@@ -157,11 +157,15 @@ describe("calcite-notice", () => {
               state: "hover",
             },
           ],
-          // "--calcite-notice-close-background-press": {
+          // "--calcite-notice-close-background-color-press": {
           //   shadowSelector: `.${CSS.close}`,
           //   targetProp: "backgroundColor",
           //   state: { press: { attribute: "class", value: CSS.close } },
           // },
+          // "--calcite-notice-close-text-color": {
+          //   shadowSelector: `.${CSS.close}`,
+          //   targetProp: "color",
+          // },
           "--calcite-notice-close-text-color-hover": [
             {
               shadowSelector: `.${CSS.close}`,
@@ -174,14 +178,6 @@ describe("calcite-notice", () => {
               state: "hover",
             },
           ],
-          // "--calcite-notice-close-text-color": {
-          //   shadowSelector: `.${CSS.close}`,
-          //   targetProp: "color",
-          // },
-          // "--calcite-notice-content-text-color": {
-          //   shadowSelector: `div([slot=message])`,
-          //   targetProp: "color",
-          // },
         },
       );
     });

diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
@@ -3,13 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @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-background-color: Specifies the background color of the component.
+ * @prop --calcite-notice-close-background-color-focus: Specifies the background color of the component when focused.
+ * @prop --calcite-notice-close-background-color-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.
+ * @prop --calcite-notice-width: [Deprecated} Specifies the width of the component.
  */
 
 // scale variables
@@ -91,7 +91,7 @@
   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));
+  background-color: var(--calcite-notice-background-color, var(--calcite-color-foreground-1));
 }
 
 // focus styles
@@ -165,12 +165,12 @@
 
   &:hover,
   &:focus {
-    background-color: var(--calcite-notice-close-background-focus, var(--calcite-color-foreground-2));
+    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));
   }
 
   &:active {
-    background-color: var(--calcite-notice-close-background-press, var(--calcite-color-foreground-3));
+    background-color: var(--calcite-notice-close-background-color-press, var(--calcite-color-foreground-3));
   }
 }