From 3346330da6f168c5e3167f4207bcfd5753175465 Mon Sep 17 00:00:00 2001
From: Kitty Hurley <khurley@esri.com>
Date: Tue, 25 Mar 2025 14:29:34 -0500
Subject: [PATCH] Revert "feat(fab): add component tokens (#11723)"

This reverts commit 5f97278d442dea0ddfbd7ebb0f1718eb7d5c25d1.
---
 .../src/components/fab/fab.e2e.ts               | 16 +---------------
 .../src/components/fab/fab.scss                 | 17 ++---------------
 .../src/custom-theme.stories.ts                 |  5 -----
 .../calcite-components/src/custom-theme/fab.ts  |  8 --------
 4 files changed, 3 insertions(+), 43 deletions(-)
 delete mode 100644 packages/calcite-components/src/custom-theme/fab.ts

diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts
index 3a597104bc5..151b340647f 100755
--- a/packages/calcite-components/src/components/fab/fab.e2e.ts
+++ b/packages/calcite-components/src/components/fab/fab.e2e.ts
@@ -1,8 +1,7 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests";
+import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests";
 import { findAll } from "../../tests/utils";
-import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
 describe("calcite-fab", () => {
@@ -149,17 +148,4 @@ 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",
-        },
-      });
-    });
-  });
 });
diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index e2bb65dd53f..ecdf9684fa9 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -1,24 +1,11 @@
-/**
- * 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;
-
-  background-color: var(--calcite-fab-background-color, transparent);
+  @apply flex bg-transparent;
 }
 
 @include disabled();
 
 calcite-button {
-  --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));
-
+  @apply shadow-2;
   &:hover {
     @apply shadow-2-lg;
   }
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 85307d30300..1449ee14770 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -24,7 +24,6 @@ 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";
@@ -166,9 +165,6 @@ 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 = {
@@ -194,7 +190,6 @@ const componentTokens = {
   ...DropdownTokens,
   ...DropdownItemTokens,
   ...DropdownGroupTokens,
-  ...fabTokens,
   ...flowTokens,
   ...handleTokens,
   ...inlineEditableTokens,
diff --git a/packages/calcite-components/src/custom-theme/fab.ts b/packages/calcite-components/src/custom-theme/fab.ts
deleted file mode 100644
index 017a6147bc1..00000000000
--- a/packages/calcite-components/src/custom-theme/fab.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { html } from "../../support/formatting";
-
-export const fabTokens = {
-  calciteFabBackgroundColor: "",
-  calciteFabShadow: "",
-};
-
-export const fab = html` <calcite-fab></calcite-fab> `;