revert(fab): add component tokens

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",
-        },
-      });
-    });
-  });
 });

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;
   }

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,