feat(fab): add component tokens

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

@@ -1,7 +1,8 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests";
 import { findAll } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
 describe("calcite-fab", () => {
@@ -148,4 +149,40 @@ describe("calcite-fab", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-fab></calcite-fab>`, {
+        "--calcite-fab-background-color": {
+          targetProp: "--calcite-button-background-color",
+          shadowSelector: `.${CSS.button}`,
+        },
+        "--calcite-fab-border-color": {
+          targetProp: "--calcite-button-border-color",
+          shadowSelector: `.${CSS.button}`,
+        },
+        "--calcite-fab-corner-radius": {
+          targetProp: "--calcite-button-corner-radius",
+          shadowSelector: `.${CSS.button}`,
+        },
+        "--calcite-fab-text-color": {
+          targetProp: "--calcite-button-text-color",
+          shadowSelector: `.${CSS.button}`,
+        },
+        "--calcite-fab-shadow": {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.button}`,
+        },
+      });
+    });
+
+    describe("loader", () => {
+      themed(html`<calcite-fab loading></calcite-fab>`, {
+        "--calcite-fab-loader-color": {
+          targetProp: "--calcite-button-loader-color",
+          shadowSelector: `.${CSS.button}`,
+        },
+      });
+    });
+  });
 });

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

@@ -1,17 +1,40 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-fab-background-color: Specifies the component's background color.
+ * @prop --calcite-fab-border-color: Specifies the component's border color.
+ * @prop --calcite-fab-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-fab-text-color: Specifies the component's text color.
+ * @prop --calcite-fab-loader-color: Specifies the component's loader color.
+ * @prop --calcite-fab-shadow: Specifies the component's shadow.
+ */
+
 :host {
-  @apply flex bg-transparent;
+  @apply flex;
+
+  background-color: transparent;
 }
 
 @include disabled();
 
 calcite-button {
-  @apply shadow-2;
+  --calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));
+
   &:hover {
     @apply shadow-2-lg;
   }
   &:active {
     @apply shadow-2-sm;
   }
+
+  --calcite-button-background-color: var(--calcite-fab-background-color);
+  --calcite-button-border-color: var(--calcite-fab-border-color);
+  --calcite-button-corner-radius: var(--calcite-fab-corner-radius);
+  --calcite-button-text-color: var(--calcite-fab-text-color);
+  --calcite-button-loader-color: var(--calcite-fab-loader-color);
 }
 
 @include base-component();

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

@@ -24,6 +24,7 @@ import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item";
 import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
 import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown";
+import { fab, fabLoading, fabTokens } from "./custom-theme/fab";
 import { flow, flowTokens } from "./custom-theme/flow";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
@@ -166,6 +167,10 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       <div class="demo-column">${datePicker}</div>
       <div class="demo-column">${datePickerRange}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${fab}</div>
+      <div class="demo-column">${fabLoading}</div>
+    </div>
     <div class="demo-row">
       <div class="demo-column">${inputMessage}</div>
     </div>
@@ -194,6 +199,7 @@ const componentTokens = {
   ...DropdownTokens,
   ...DropdownItemTokens,
   ...DropdownGroupTokens,
+  ...fabTokens,
   ...flowTokens,
   ...handleTokens,
   ...inlineEditableTokens,

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

@@ -0,0 +1,13 @@
+import { html } from "../../support/formatting";
+
+export const fabTokens = {
+  calciteFabBackgroundColor: "",
+  calciteFabBorderColor: "",
+  calciteFabCornerRadius: "",
+  calciteFabTextColor: "",
+  calciteFabLoaderColor: "",
+  calciteFabShadow: "",
+};
+
+export const fab = html`<calcite-fab></calcite-fab>`;
+export const fabLoading = html`<calcite-fab loading></calcite-fab>`;