feat(block): add component tokens

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

@@ -12,6 +12,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
@@ -422,4 +423,44 @@ describe("calcite-block", () => {
   describe("translation support", () => {
     t9n("calcite-block");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-block heading="heading" description="description" open collapsible icon-end="pen" icon-start="pen">
+            <calcite-icon icon="compass" slot="content-start"></calcite-icon>
+            <div>content</div>
+          </calcite-block>
+        `,
+        {
+          "--calcite-block-border-color": {
+            targetProp: "borderColor",
+          },
+          "--calcite-block-header-background-color": {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-block-header-background-color-hover": {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "backgroundColor",
+            state: "hover",
+          },
+          "--calcite-block-header-text-color": [{ shadowSelector: `.${CSS.heading}`, targetProp: "color" }],
+          "--calcite-block-text-color": [
+            { shadowSelector: `.${CSS.description}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.contentStart}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.iconEnd}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.iconStart}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.toggleIcon}`, targetProp: "color" },
+          ],
+          "--calcite-block-text-color-hover": {
+            shadowSelector: `.${CSS.toggleIcon}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        },
+      );
+    });
+  });
 });

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

@@ -3,16 +3,23 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
+ * @prop --calcite-block-border-color: Specifies the border color of the component.
+ * @prop --calcite-block-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-block-header-background-color-hover: Specifies the background color of the component's header when hovered.
+ * @prop --calcite-block-header-text-color: Specifies the text color of the component's header.
+ * @prop --calcite-block-padding: [Deprecated] Specifies the padding of the component's `default` slot.
+ * @prop --calcite-block-text-color: Specifies the text color of the component.
+ * @prop --calcite-block-text-color-hover: Specifies the text color component when hovered
  */
 
 :host {
   @extend %component-host;
   @extend %component-spacing;
-  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0
+  @apply transition-margin ease-cubic flex flex-shrink-0 flex-grow-0
     flex-col border-0 border-b border-solid p-0;
   flex-basis: auto;
   transition-duration: var(--calcite-animation-timing);
+  border-color: var(--calcite-block-border-color, var(--calcite-color-border-3));
 }
 
 @include disabled();
@@ -41,7 +48,10 @@
   grid-row: 1 / 2;
 }
 
-.content-start,
+.content-start {
+  margin-inline-end: var(--calcite-spacing-md);
+}
+
 .icon,
 .icon--start,
 .icon--end {
@@ -56,7 +66,7 @@
 
 .icon--start,
 .icon--end {
-  @apply text-color-3;
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .actions-end {
@@ -66,20 +76,20 @@
 .toggle {
   @apply font-sans
     focus-base
-    m-0
     flex
     cursor-pointer
     flex-nowrap
     items-center
     justify-between
     border-none
+    m-0
     p-0;
 
   text-align: initial;
-  background-color: transparent;
+  background-color: var(--calcite-block-header-background-color, transparent);
 
   &:hover {
-    @apply bg-foreground-2;
+    background-color: var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2));
   }
   &:focus {
     @apply focus-inset;
@@ -101,22 +111,24 @@ calcite-handle {
 
 .header .title .heading {
   @apply text-n1
-    text-color-2
     word-break
     transition-color
-    p-0
     font-medium
     leading-tight
     duration-150
-    ease-in-out;
+    ease-in-out
+    p-0;
+
+  color: var(--calcite-block-header-text-color, var(--calcite-color-text-2));
 }
 
 .description {
   @apply text-n2-wrap
-    text-color-3
-    word-break
-    mt-0.5
-    p-0;
+    p-0
+    word-break;
+
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
+  margin-block-start: var(calcite-spacing-base);
 }
 
 .icon {
@@ -150,18 +162,18 @@ calcite-handle {
 }
 
 .toggle-icon {
-  @apply text-color-3
-  transition-color
+  @apply transition-color
   self-center
   justify-self-end
   duration-150
   ease-in-out;
 
   margin-inline-end: var(--calcite-spacing-md);
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .toggle:hover .toggle-icon {
-  @apply text-color-1;
+  color: var(--calcite-block-text-color-hover, var(--calcite-color-text-1));
 }
 
 .container {
@@ -170,12 +182,14 @@ calcite-handle {
 
 .content {
   @apply animate-in flex-1 relative min-h-0;
-  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));
-  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));
+  padding-block: var(--calcite-spacing-sm);
+  padding-inline: var(--calcite-spacing-md);
 }
 
 .content-start {
-  @apply text-color-3 flex items-center;
+  @apply flex items-center;
+
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .control-container {
@@ -195,7 +209,7 @@ calcite-action-menu {
   @apply my-2;
 
   .header .title .heading {
-    @apply text-color-1;
+    color: var(--calcite-block-text-color, var(--calcite-color-text-1));
   }
 }
 

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

@@ -13,6 +13,7 @@ import {
 import { alertTokens, alert } from "./custom-theme/alert";
 import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
+import { block, blockTokens } from "./custom-theme/block";
 import { buttons } from "./custom-theme/button";
 import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
@@ -130,8 +131,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
         ${comboboxItem}
       </div>
-      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers}</div>
-      ${alert}
+      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers} ${block}</div>
+      <div class="demo-column">${alert}</div>
     </div>
   </div>`;
 
@@ -146,6 +147,7 @@ const componentTokens = {
   ...actionTokens,
   ...alertTokens,
   ...avatarTokens,
+  ...blockTokens,
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,

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

@@ -0,0 +1,23 @@
+import { html } from "../../support/formatting";
+
+export const blockTokens = {
+  calciteBlockBorderColor: "",
+  calciteBlockContentStartColor: "",
+  calciteBlockHeaderBackgroundColor: "",
+  calciteBlockHeaderDescriptionColor: "",
+  calciteBlockHeaderIconColor: "",
+  calciteBlockIconColorEnd: "",
+  calciteBlockIconColorStart: "",
+};
+
+export const block = html` <calcite-block
+  heading="heading"
+  description="description"
+  open
+  collapsible
+  icon-end="pen"
+  icon-start="pen"
+>
+  <calcite-icon icon="compass" slot="content-start"></calcite-icon>
+  <div>content</div>
+</calcite-block>`;