feat(notice): Add component tokens (#8645)

**Related Issue:** #7180 ## Summary Adds the following public component css properties: `--calcite-notice-background-color`: Specifies the background color of the component. `--calcite-notice-border-color`: Specifies the border color of the component. `--calcite-notice-shadow`: Specifies the box shadow of the component. `--calcite-notice-corner-radius`: Specifies the corner radius of the component. `--calcite-notice-icon-color`: Specifies the color of the component's icon property. `--calcite-notice-close-icon-color`: Specifies the color of the component's `closable` icon color. `--calcite-notice-close-background-color`: Specifies the color of the component's closable background color. `--calcite-notice-close-background-color-hover`: Specifies the hover color of the component's closable background color. `--calcite-notice-close-background-color-active`: Specifies the active color of the component's closable background color. `--calcite-notice-close-background-color-focus`: Specifies the focus color of the component's closable background color. `--calcite-notice-close-focus-color`: Specifies the focus color of the component's closable background color. Adds a Chromatic test and a demo page example.
Esri · Feb 15, 2024 · 69ae47e · 69ae47e
1 parent 9a9675c
commit 69ae47e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 32 deletions.
diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
@@ -3,13 +3,24 @@
  *
  * 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-color: Specifies the background color of the component.
+ * @prop --calcite-notice-border-color: Specifies the border color of the component.
+ * @prop --calcite-notice-shadow: Specifies the box shadow of the component.
+ * @prop --calcite-notice-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-notice-icon-color: Specifies the color of the component's icon property.
+ * @prop --calcite-notice-close-icon-color: Specifies the color of the component's `closable` icon color.
+ * @prop --calcite-notice-close-background-color: Specifies the background color of the component's `closable`element.
+ * @prop --calcite-notice-close-background-color-hover: Specifies the background color of the component's `closable` element when hovered.
+ * @prop --calcite-notice-close-background-color-active: Specifies the background color of the component's `closable` element when active.
+ * @prop --calcite-notice-close-background-color-focus: Specifies the background color of the component's `closable` element when focused.
+ * @prop --calcite-notice-close-focus-color: Specifies the focus color of the component's `closable` element.
+ *
  */
 
 // scale variables
 :host([scale="s"]) {
-  --calcite-notice-spacing-token-small: theme("spacing.2");
-  --calcite-notice-spacing-token-large: theme("spacing.3");
+  --calcite-internal-notice-spacing-token-small: theme("spacing.2");
+  --calcite-internal-notice-spacing-token-large: theme("spacing.3");
   @include slotted("title", "*", ".container") {
     @apply text-n1-wrap my-0.5;
   }
@@ -26,8 +37,8 @@
 }
 
 :host([scale="m"]) {
-  --calcite-notice-spacing-token-small: theme("spacing.3");
-  --calcite-notice-spacing-token-large: theme("spacing.4");
+  --calcite-internal-notice-spacing-token-small: theme("spacing.3");
+  --calcite-internal-notice-spacing-token-large: theme("spacing.4");
   @include slotted("title", "*", ".container") {
     @apply text-0-wrap my-0.5;
   }
@@ -40,8 +51,8 @@
 }
 
 :host([scale="l"]) {
-  --calcite-notice-spacing-token-small: theme("spacing.4");
-  --calcite-notice-spacing-token-large: theme("spacing.5");
+  --calcite-internal-notice-spacing-token-small: theme("spacing.4");
+  --calcite-internal-notice-spacing-token-large: theme("spacing.5");
   @include slotted("title", "*", ".container") {
     @apply text-1-wrap my-0.5;
   }
@@ -71,18 +82,18 @@
 }
 
 .container {
-  @apply bg-foreground-1
-    pointer-events-none
+  @apply pointer-events-none
     my-0
     box-border
     hidden
     w-full
     opacity-0
     transition-default;
+  background-color: var(--calcite-notice-background-color, var(--calcite-color-foreground-1));
+  border-radius: var(--calcite-notice-corner-radius, var(--calcite-corner-radius-sharp));
   max-block-size: 0;
   text-align: start;
   border-inline-start: 0px solid;
-  box-shadow: 0 0 0 0 transparent;
 }
 
 // focus styles
@@ -98,13 +109,11 @@
 }
 
 :host([open]) .container {
-  @apply shadow-1
-    pointer-events-auto
-    flex
-    max-h-full
-    items-center
-    border-2
-    opacity-100;
+  @apply pointer-events-auto flex items-center;
+  opacity: var(--calcite-opacity-full);
+  border-width: var(--calcite-border-width-md);
+  max-block-size: var(--calcite-container-size-content-fluid);
+  box-shadow: var(--calcite-notice-shadow, var(--calcite-shadow-sm));
 }
 
 @include slotted("title", "*", ".container") {
@@ -113,29 +122,29 @@
 
 @include slotted("message", "*", ".container") {
   @apply text-color-2 m-0 inline font-normal;
-  margin-inline-end: var(--calcite-notice-spacing-token-small);
+  margin-inline-end: var(--calcite-internal-notice-spacing-token-small);
 }
 
 @mixin notice-element-base() {
   @apply transition-default box-border;
-  padding-block: var(--calcite-notice-spacing-token-small);
-  padding-inline: var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-internal-notice-spacing-token-small);
+  padding-inline: var(--calcite-internal-notice-spacing-token-large);
   flex: 0 0 auto;
 }
 
 .notice-content {
   @include notice-element-base;
   @apply flex min-w-0 flex-col break-words;
   flex: 1 1 0;
-  padding-block: var(--calcite-notice-spacing-token-small);
-  padding-inline: 0 var(--calcite-notice-spacing-token-small);
+  padding-block: var(--calcite-internal-notice-spacing-token-small);
+  padding-inline: 0 var(--calcite-internal-notice-spacing-token-small);
 
   &:first-of-type:not(:only-child) {
-    padding-inline-start: var(--calcite-notice-spacing-token-large);
+    padding-inline-start: var(--calcite-internal-notice-spacing-token-large);
   }
   &:only-of-type {
-    padding-block: var(--calcite-notice-spacing-token-small);
-    padding-inline: var(--calcite-notice-spacing-token-large);
+    padding-block: var(--calcite-internal-notice-spacing-token-small);
+    padding-inline: var(--calcite-internal-notice-spacing-token-large);
   }
 }
 
@@ -145,17 +154,26 @@
 }
 
 .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;
+  border-end-end-radius: var(--calcite-notice-corner-radius, var(--calcite-corner-radius-sharp));
+  border-start-end-radius: var(--calcite-notice-corner-radius, var(--calcite-corner-radius-sharp));
   -webkit-appearance: none;
+  color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-3));
+  background-color: var(--calcite-notice-close-background-color, var(--calcite-color-transparent));
 
-  &:hover,
-  &:focus {
-    @apply bg-foreground-2 text-color-1;
+  &:hover {
+    background-color: var(--calcite-notice-close-background-color-hover, var(--calcite-color-foreground-2));
   }
 
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-notice-close-background-color-active, var(--calcite-color-foreground-2));
+  }
+
+  &:focus {
+    background-color: var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));
+    outline-color: var(--calcite-notice-close-focus-color, inherit);
+    color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-1));
   }
 }
 
@@ -175,9 +193,9 @@ $noticeKinds:
   $kind: nth($noticeKind, 2);
 
   :host([kind="#{$name}"]) .container {
-    border-color: $kind;
+    border-color: var(--calcite-notice-border-color, $kind);
     & .notice-icon {
-      color: $kind;
+      color: var(--calcite-notice-icon-color, $kind);
     }
   }
 }

diff --git a/packages/calcite-components/src/components/notice/notice.stories.ts b/packages/calcite-components/src/components/notice/notice.stories.ts
@@ -94,3 +94,23 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const theming_TestOnly = (): string => html`
+  <calcite-notice
+    closable
+    open
+    icon="layer"
+    style="--calcite-notice-background-color: rgb(182, 101, 101);
+      --calcite-notice-border-color: rgb(183, 61, 61);
+      --calcite-notice-shadow: var(--calcite-shadow-sm);
+      --calcite-notice-corner-radius: 4px;
+      --calcite-notice-icon-color: rgb(244, 229, 229);
+      --calcite-notice-close-icon-color: orange;
+      --calcite-notice-text-color: rgb(244, 229, 229);
+      --calcite-notice-close-icon-color: purple;
+      --calcite-notice-close-background-color: rgb(236, 166, 178);"
+  >
+    <div slot="title">This is a message</div>
+    <div slot="message">Be sure you know what you are doing, folks.</div>
+  </calcite-notice>
+`;
diff --git a/packages/calcite-components/src/demos/notice.html b/packages/calcite-components/src/demos/notice.html
@@ -31,14 +31,37 @@
         margin: 60px 0;
         border-top: 1px solid var(--calcite-color-border-2);
       }
+
+      .themed {
+        --calcite-notice-shadow: var(--calcite-shadow-none);
+        --calcite-notice-corner-radius: var(--calcite-corner-radius-round);
+        --calcite-notice-background-color: pink;
+        --calcite-notice-border-color: darkred;
+        --calcite-notice-icon-color: yellow;
+        --calcite-notice-close-icon-color: purple;
+        --calcite-notice-close-background-color: pink;
+        --calcite-notice-close-background-color-hover: rgb(236, 166, 178);
+        --calcite-notice-close-background-color-active: rgb(214, 147, 158);
+        --calcite-notice-close-background-color-focus: red;
+        --calcite-notice-close-focus-color: purple;
+      }
     </style>
     <script src="./_assets/head.js"></script>
   </head>
 
   <body>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Notice</h1>
+      <div class="parent">
+        <div class="child right-aligned-text">Themed</div>
 
+        <div class="child themed">
+          <calcite-notice icon open closable>
+            <div slot="title">Title lorem ispum</div>
+            <div slot="message">Body lorem ispum</div>
+          </calcite-notice>
+        </div>
+      </div>
       <!--
       **************************************************
       * SMALL