feat(card): Add component tokens (#8605)

**Related Issue:** #7180 ## Summary Adds the following public component css properties: `--calcite-card-background-color`: Specifies the background color of the component. `--calcite-card-border-color`: Specifies the border color of the component. `--calcite-card-box-shadow`: Specifies the box shadow of the component. `--calcite-card-corner-radius`: Specifies the corner radius of the component. Adds a Chromatic test and a demo page example. Also replaces broken image links in local demo.
Esri · Feb 13, 2024 · 6950500 · 6950500
1 parent 21fee6e
commit 6950500
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 67 deletions.
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
@@ -1,87 +1,91 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-card-background-color: Specifies the background color of the component.
+ * @prop --calcite-card-border-color: Specifies the border color of the component.
+ * @prop --calcite-card-box-shadow: Specifies the box shadow of the component.
+ * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
+ *
+ */
+
 :host {
   @apply block max-w-full;
-  & .calcite-card-container {
-    @apply bg-foreground-1
-    border-color-2
-    text-color-3
-    relative
+}
+
+.calcite-card-container {
+  @apply relative
     flex
     h-full
     flex-col
     justify-between
-    border
-    border-solid
-    shadow-none
     duration-150
     ease-in-out
     overflow-hidden;
-    border-radius: var(--calcite-border-radius-base);
-  }
+  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));
+  background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));
+  box-shadow: var(--calcite-card-box-shadow, var(--calcite-shadow-none));
 }
 
 .container {
   @apply relative flex flex-auto flex-col;
 }
 
 :host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container) {
-  @apply pointer-events-none opacity-0;
+  @apply pointer-events-none;
+  opacity: $calcite-opacity-0;
 }
 
 :host([loading]) .calcite-card-loader-container {
-  @apply absolute
-    inset-0
-    flex
-    items-center;
-}
-
-.header,
-.footer {
-  @apply flex px-3 pt-3 pb-1;
+  @apply absolute inset-0 flex items-center;
 }
 
 .header {
-  @apply flex-col;
+  @apply flex flex-col;
+  padding-inline: var(--calcite-spacing-md);
+  padding-block-start: var(--calcite-spacing-md);
+  padding-block-end: var(--calcite-spacing-xxs);
 }
 
 .footer {
-  @apply mt-auto flex-row content-between
-    justify-between
-    px-3
-    pt-1
-    pb-3;
+  @apply flex mt-auto flex-row content-between justify-between;
+  padding-inline: var(--calcite-spacing-md);
+  padding-block-start: var(--calcite-spacing-xxs);
+  padding-block-end: var(--calcite-spacing-md);
 }
 
 .card-content {
-  @apply text-color-3
-    text-n2-wrap
-    p-3;
+  @apply text-n2-wrap;
+  color: var(--calcite-color-text-3);
+  padding: var(--calcite-spacing-md);
 }
 
 :host([selected]) .calcite-card-container {
-  @apply border-color-brand;
+  --calcite-card-border-color: var(--calcite-color-brand);
 }
 
 // slotted content
 @include slotted("title", "*") {
-  @apply text-color-1
-    text-n1-wrap
-    m-0
-    font-medium;
+  @apply text-n1-wrap;
+  margin: 0;
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-color-text-1);
 }
 
 :host([selectable]) {
   .header {
     // prevents overlap with checkbox (default header padding + no-overlap spacing)
-    padding-inline-end: theme("spacing.8");
+    padding-inline-end: var(--calcite-spacing-xxxl);
   }
 }
 
 @include slotted("subtitle", "*") {
-  @apply text-color-2
-    text-n2-wrap
-    m-0
-    mt-2
-    font-normal;
+  @apply text-n2-wrap font-normal;
+  margin: 0;
+  margin-block-start: var(--calcite-spacing-sm);
+  color: var(--calcite-color-text-2);
 }
 
 @include slotted("thumbnail", "img") {
@@ -91,15 +95,20 @@
 @include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
+  color: var(--calcite-color-text-3);
 }
+
 @include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
+  color: var(--calcite-color-text-3);
 }
 
 .checkbox-wrapper {
-  @apply absolute m-0 p-0;
-  inset-block-start: theme("spacing.2");
-  inset-inline-end: theme("spacing.2");
+  @apply absolute;
+  inset-block-start: var(--calcite-spacing-sm);
+  inset-inline-end: var(--calcite-spacing-sm);
+  margin: 0;
+  padding: 0;
 }
 
 .thumbnail-wrapper {

diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
@@ -62,7 +62,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
 };
 
 const titleHtml = html`
-  <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
+  <span slot="title">ArcGIS Online: Gallery and Organization pages</span>
   <span slot="subtitle">
     A great example of a study description that might wrap to a line or two, but isn't overly verbose.
   </span>
@@ -129,7 +129,7 @@ export const thumbnail = (): string => html`
       createAttributes(),
       html`
         ${thumbnailHtml}
-        <h3 slot="title">Portland Businesses</h3>
+        <span slot="title">Portland Businesses</span>
         <span slot="subtitle"
           >by
           <calcite-link href="">example_user</calcite-link>
@@ -181,12 +181,12 @@ export const thumbnailRounded = (): string => html`
   <div id="card-container" style="width:260px;">
     <style>
       calcite-card {
-        --calcite-border-radius-base: 12px;
+        --calcite-card-corner-radius: 12px;
       }
     </style>
     <calcite-card>
       ${thumbnailHtml}
-      <h3 slot="title">Portland Businesses</h3>
+      <span slot="title">Portland Businesses</span>
       <span slot="subtitle"
         >by
         <calcite-link href="">example_user</calcite-link>
@@ -211,7 +211,7 @@ export const thumbnailRounded = (): string => html`
 
 export const headerDoesNotOverlapWithCheckbox_TestOnly = (): string => html`
   <calcite-card selectable style="width:260px">
-    <h3 slot="title">Pokem ipsum dolor sit amet Skitty Hoothoot</h3>
+    <span slot="title">Pokem ipsum dolor sit amet Skitty Hoothoot</span>
     <span slot="subtitle"
       >Pika-pi Soul Badge Zoroark Starly Spoink Diglett Rotom. Water Kyogre Hitmontop Rampardos</span
     >
@@ -231,3 +231,25 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const selected_TestOnly = (): string =>
+  html` <calcite-card selected>
+    <span slot="title">ArcGIS Online: Gallery and Organization pages</span>
+    <span slot="subtitle"
+      >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
+    >
+  </calcite-card>`;
+
+export const theming_TestOnly = (): string => html`
+  <calcite-card
+    style="--calcite-card-corner-radius: var(--calcite-corner-radius-round);
+      --calcite-card-background-color: var(--calcite-color-foreground-3);
+      --calcite-card-border-color: var(--calcite-color-status-success);
+      --calcite-card-box-shadow: var(--calcite-shadow-md);"
+  >
+    <span slot="title">ArcGIS Online: Gallery and Organization pages</span>
+    <span slot="subtitle"
+      >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
+    >
+  </calcite-card>
+`;
diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
@@ -28,8 +28,11 @@
         padding: 0 18px;
       }
 
-      .rounded {
-        --calcite-border-radius-base: 5px;
+      .themed {
+        --calcite-card-corner-radius: var(--calcite-corner-radius-round);
+        --calcite-card-background-color: var(--calcite-color-foreground-3);
+        --calcite-card-border-color: var(--calcite-color-status-success);
+        --calcite-card-box-shadow: var(--calcite-shadow-md);
       }
     </style>
     <script src="_assets/head.js"></script>
@@ -45,21 +48,20 @@ <h1 style="margin: 0 auto; text-align: center">Card</h1>
         **************************************************
       -->
       <div class="parent">
-        <!-- text only -->
         <div class="child">
-          <p>No buttons, not selectable</p>
-          <calcite-card>
+          <p>Themed</p>
+          <calcite-card class="themed">
             <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
             <span slot="subtitle"
               >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
             >
           </calcite-card>
         </div>
 
-        <!-- text only, selectable, and border-radius -->
-        <div class="child rounded">
-          <p>No buttons, selectable, border-radius</p>
-          <calcite-card selectable>
+        <!-- text only -->
+        <div class="child">
+          <p>No buttons, not selectable</p>
+          <calcite-card>
             <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
             <span slot="subtitle"
               >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
@@ -79,7 +81,7 @@ <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
           <p>Card with several buttons</p>
 
           <calcite-card>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/180" />
             <h3 slot="title">Portland Businesses</h3>
             <span slot="subtitle"
               >by
@@ -136,7 +138,7 @@ <h3 slot="title">Portland Businesses</h3>
         <div class="child">
           <p>Card with two buttons</p>
           <calcite-card selectable>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">My great Workforce project that might wrap two lines</h3>
             <span slot="subtitle">Johnathan Smith</span>
             <span slot="footer-start">Nov 25, 2018</span>
@@ -165,7 +167,7 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
         <div class="child">
           <p>Selectable and selected card</p>
           <calcite-card selected selectable>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
 
             <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
             <span slot="subtitle"
@@ -180,7 +182,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
         <div class="child">
           <p>Deselect example</p>
           <calcite-card selectable>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
 
             <h3 slot="title">Translated select and deselect example</h3>
             <span slot="subtitle"
@@ -201,7 +203,7 @@ <h3 slot="title">Translated select and deselect example</h3>
         <div class="child">
           <p>Loading</p>
           <calcite-card loading>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
 
             <h3 slot="title">Loading example</h3>
             <span slot="subtitle"
@@ -215,7 +217,7 @@ <h3 slot="title">Loading example</h3>
         <div class="child">
           <p>Submit button</p>
           <calcite-card selectable>
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">Untitled experience</h3>
             <span slot="subtitle">Subtext</span>
             <calcite-button slot="footer-start" width="full">Go</calcite-button>
@@ -232,7 +234,7 @@ <h3 slot="title">Untitled experience</h3>
         <div class="child">
           <p>thumbnail-position="block-start"</p>
           <calcite-card thumbnail-position="block-start">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">Portland Businesses</h3>
             <span slot="subtitle"
               >by
@@ -274,7 +276,7 @@ <h3 slot="title">Portland Businesses</h3>
         <div class="child">
           <p>thumbnail-position="block-end"</p>
           <calcite-card thumbnail-position="block-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">Portland Businesses</h3>
             <span slot="subtitle"
               >by
@@ -318,7 +320,7 @@ <h3 slot="title">Portland Businesses</h3>
         <div class="child">
           <p>thumbnail-position="inline-start"</p>
           <calcite-card thumbnail-position="inline-start">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">Portland Businesses</h3>
             <span slot="subtitle"
               >by
@@ -360,7 +362,7 @@ <h3 slot="title">Portland Businesses</h3>
         <div class="child">
           <p>thumbnail-position="inline-end"</p>
           <calcite-card thumbnail-position="inline-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
+            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
             <h3 slot="title">Portland Businesses</h3>
             <span slot="subtitle"
               >by