feat(fab): add component tokens (#11723)

**Related Issue:** #7180 

Adds the following tokens for `fab` component.

`--calcite-fab-background-color`: Specifies the component's background
color.
`--calcite-fab-shadow`: Specifies the component's shadow.

Author: Elijbet

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,17 @@ describe("calcite-fab", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-fab></calcite-fab>`, {
+        "--calcite-fab-background-color": {
+          targetProp: "--calcite-fab-background-color",
+        },
+        "--calcite-fab-shadow": {
+          targetProp: "--calcite-fab-shadow",
+        },
+      });
+    });
+  });
 });

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

@@ -1,11 +1,24 @@
+/**
+ * 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-shadow: Specifies the component's shadow.
+ */
+
 :host {
-  @apply flex bg-transparent;
+  @apply flex;
+
+  background-color: var(--calcite-fab-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;
   }

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, 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";
@@ -165,6 +166,9 @@ 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>
   </div>`;
 
 const componentTokens = {
@@ -190,6 +194,7 @@ const componentTokens = {
   ...DropdownTokens,
   ...DropdownItemTokens,
   ...DropdownGroupTokens,
+  ...fabTokens,
   ...flowTokens,
   ...handleTokens,
   ...inlineEditableTokens,

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

@@ -0,0 +1,8 @@
+import { html } from "../../support/formatting";
+
+export const fabTokens = {
+  calciteFabBackgroundColor: "",
+  calciteFabShadow: "",
+};
+
+export const fab = html` <calcite-fab></calcite-fab> `;