@react-fabric/core 1.0.0-beta.36 → 1.0.0-beta.37

package/dist/types/overlays/alert/Alert.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * toast type
@@ -16,7 +16,7 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/message/Message.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * message title
@@ -12,7 +12,7 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/toast/Toast.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * toast type
@@ -16,7 +16,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/tooltip/Tooltip.d.ts

@@ -15,4 +15,4 @@ export interface TooltipProps extends TooltipType, RefProp {
 export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
     ref: AnyObject;
 }) | undefined;
-export declare const Tooltip: ({ ref, children, color, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ ref, children, color, textColor, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -5,8 +5,9 @@ export type ModalProps<P = unknown> = P & {
 };
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
-export type ColorType = "primary" | "accent" | "info" | "danger" | "success" | "warning";
-export type PaletteType = "scarlet" | "pumpkin" | "marigold" | "avacado" | "jade" | "denim" | "iris" | "lilac" | "coral" | "wood" | "silver" | "steel" | "olive" | "sand";
+export type ColorState = "primary" | "accent" | "info" | "danger" | "success" | "warning";
+export type ColorType = "primary-50" | "accent-50" | "info-50" | "danger-50" | "success-50" | "warning-50" | "primary-100" | "accent-100" | "info-100" | "danger-100" | "success-100" | "warning-100" | "primary-200" | "accent-200" | "info-200" | "danger-200" | "success-200" | "warning-200" | "primary-300" | "accent-300" | "info-300" | "danger-300" | "success-300" | "warning-300" | "primary-400" | "accent-400" | "info-400" | "danger-400" | "success-400" | "warning-400" | "primary-500" | "accent-500" | "info-500" | "danger-500" | "success-500" | "warning-500" | "primary-600" | "accent-600" | "info-600" | "danger-600" | "success-600" | "warning-600" | "primary-700" | "accent-700" | "info-700" | "danger-700" | "success-700" | "warning-700" | "primary-800" | "accent-800" | "info-800" | "danger-800" | "success-800" | "warning-800" | "primary-900" | "accent-900" | "info-900" | "danger-900" | "success-900" | "warning-900" | "primary-950" | "accent-950" | "info-950" | "danger-950" | "success-950" | "warning-950";
+export type PaletteType = "scarlet-50" | "pumpkin-50" | "marigold-50" | "avacado-50" | "jade-50" | "denim-50" | "iris-50" | "lilac-50" | "coral-50" | "wood-50" | "silver-50" | "steel-50" | "olive-50" | "sand-50" | "scarlet-100" | "pumpkin-100" | "marigold-100" | "avacado-100" | "jade-100" | "denim-100" | "iris-100" | "lilac-100" | "coral-100" | "wood-100" | "silver-100" | "steel-100" | "olive-100" | "sand-100" | "scarlet-200" | "pumpkin-200" | "marigold-200" | "avacado-200" | "jade-200" | "denim-200" | "iris-200" | "lilac-200" | "coral-200" | "wood-200" | "silver-200" | "steel-200" | "olive-200" | "sand-200" | "scarlet-300" | "pumpkin-300" | "marigold-300" | "avacado-300" | "jade-300" | "denim-300" | "iris-300" | "lilac-300" | "coral-300" | "wood-300" | "silver-300" | "steel-300" | "olive-300" | "sand-300" | "scarlet-400" | "pumpkin-400" | "marigold-400" | "avacado-400" | "jade-400" | "denim-400" | "iris-400" | "lilac-400" | "coral-400" | "wood-400" | "silver-400" | "steel-400" | "olive-400" | "sand-400" | "scarlet-500" | "pumpkin-500" | "marigold-500" | "avacado-500" | "jade-500" | "denim-500" | "iris-500" | "lilac-500" | "coral-500" | "wood-500" | "silver-500" | "steel-500" | "olive-500" | "sand-500" | "scarlet-600" | "pumpkin-600" | "marigold-600" | "avacado-600" | "jade-600" | "denim-600" | "iris-600" | "lilac-600" | "coral-600" | "wood-600" | "silver-600" | "steel-600" | "olive-600" | "sand-600" | "scarlet-700" | "pumpkin-700" | "marigold-700" | "avacado-700" | "jade-700" | "denim-700" | "iris-700" | "lilac-700" | "coral-700" | "wood-700" | "silver-700" | "steel-700" | "olive-700" | "sand-700" | "scarlet-800" | "pumpkin-800" | "marigold-800" | "avacado-800" | "jade-800" | "denim-800" | "iris-800" | "lilac-800" | "coral-800" | "wood-800" | "silver-800" | "steel-800" | "olive-800" | "sand-800" | "scarlet-900" | "pumpkin-900" | "marigold-900" | "avacado-900" | "jade-900" | "denim-900" | "iris-900" | "lilac-900" | "coral-900" | "wood-900" | "silver-900" | "steel-900" | "olive-900" | "sand-900" | "scarlet-950" | "pumpkin-950" | "marigold-950" | "avacado-950" | "jade-950" | "denim-950" | "iris-950" | "lilac-950" | "coral-950" | "wood-950" | "silver-950" | "steel-950" | "olive-950" | "sand-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 export declare const ThemeColors: string[];
 export interface TooltipType {
@@ -17,7 +18,11 @@ export interface TooltipType {
     /**
      * tooltip color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType | string;
+    /**
+     * text color
+     */
+    textColor?: ColorType | PaletteType | string;
     /**
      * tooltip placement
      */
@@ -87,11 +92,11 @@ export interface IconProps {
     /**
      * icon background color
      */
-    iconBg?: ColorType | string;
+    iconBg?: ColorType | PaletteType | string;
     /**
      * icon color
      */
-    iconColor?: ColorType | string;
+    iconColor?: ColorType | PaletteType | string;
 }
 export interface CollapseProps {
     /**

package/dist/types/typography/Abbr.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ChildProp, type ColorType, type CssProp } from "../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
@@ -10,7 +10,11 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
      *
      * [textPart, tooltip, color (class name or color string)]
      */
-    abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+    abbr: Array<[
+        textPart: string,
+        tooltip: string,
+        color?: ColorType | PaletteType | string
+    ]>;
     /**
      * renderer callback
      */

package/dist/types/typography/Anchor.d.ts

@@ -1,14 +1,14 @@
 import { type MouseEventHandler } from "react";
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PolymorphicProps, type RefProp, type SizeType } from "../types";
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType } from "../types";
 export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
     /**
      * link background (CSS color / tailwind color)
      */
-    bg?: ColorType | string;
+    bg?: ColorType | PaletteType | string;
     /**
      * link color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * link size
      */

package/dist/types/typography/Mark.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type PaletteType } from "../types";
 export interface MarkProps extends ChildProp<string> {
     /**
      * texts to match and abbreviate within
      *
      * [textPart, color (class name or color string)]
      */
-    mark: Array<[textPart: string, color?: ColorType | string]>;
+    mark: Array<[textPart: string, color?: ColorType | PaletteType | string]>;
     /**
      * renderer callback
      */

package/dist/types/utils/getColor.d.ts

@@ -1,4 +1 @@
-export declare const getColor: (color: string) => string | undefined;
-export declare const getBgClass: (bg: string) => string | undefined;
-export declare const getColorClass: (color: string) => string | undefined;
-export declare const getBorderClass: (color: string) => string | undefined;
+export declare const getColor: (color: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.36",
+  "version": "1.0.0-beta.37",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -19,6 +19,17 @@
     "src",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "default": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./styles": "./css/styles.css",
+    "./flags.rect": "./css/flags.rect.css",
+    "./flags.wavy": "./css/flags.wavy.css"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -36,15 +47,13 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.36",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
+    "@react-fabric/utilities": "^1.0.0-beta.37",
+    "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^4.0.14"
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
@@ -56,5 +65,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "91a7cce216e21cbc6406226d8c3f56a1a26e410a"
+  "gitHead": "9b737229bf24ebe986540ee2c4b8904ebc4a5a9b"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -30,7 +30,6 @@ import {
   type TestProps,
 } from "../../types";
 import { ButtonGroup } from "../button/ButtonGroup";
-import classes from "./ActionLabel.module.css";
 
 export interface ActionLabelProps
   extends AriaProps,
@@ -84,7 +83,7 @@ export const ActionLabel = ({
     <div
       className={classNames(
         className,
-        classes.actionLabel,
+        "fabric-actionLabel",
         "flex overflow-hidden gap-1 items-center cursor-default select-none",
       )}
       data-disabled={disabled}
@@ -94,7 +93,7 @@ export const ActionLabel = ({
         ref={calculateBasis}
         data-inner-clickable
         className={classNames(
-          classes.actions,
+          "fabric-actions",
           "overflow-hidden flex-content",
           align === "end" && "order-2",
         )}

package/src/components/animations/Animations.tsx

@@ -30,19 +30,18 @@ import {
   type CssProp,
   type PaletteType,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
-import classes from "./Animations.module.css";
+import { getColor } from "../../utils";
 
 export interface AnimationProps extends CssProp, AriaProps {
   type?: "info" | "check" | "cross" | "question" | "exclaim";
   /**
    * icon color
    */
-  color?: ColorType | PaletteType;
+  color?: ColorType | PaletteType | string;
   /**
    * icon mark color
    */
-  strokeColor?: ColorType | PaletteType;
+  strokeColor?: ColorType | PaletteType | string;
 }
 
 export const AnimationIndicator = ({
@@ -80,10 +79,9 @@ export const AnimationIndicator = ({
     <svg
       data-ref="animated-indicator"
       className={classNames(
-        classes.checkAnimation,
+        "fabric-checkAnimation",
         className,
         "inline-block rounded-full",
-        color && getColorClass(color),
       )}
       style={styles}
       xmlns="http://www.w3.org/2000/svg"
@@ -91,12 +89,14 @@ export const AnimationIndicator = ({
       aria-hidden="true"
       {...aria}
     >
-      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
+      <circle className={"fabric-circlePart"} cx="26" cy="26" r="25" />
       <path
-        className={classNames(
-          classes.iconPart,
-          getColorClass(strokeColor ?? "invert"),
-        )}
+        className={classNames("fabric-iconPart")}
+        style={{
+          color: strokeColor
+            ? getColor(strokeColor)
+            : "var(--text-color-invert)",
+        }}
         d={path}
       />
     </svg>
@@ -104,10 +104,10 @@ export const AnimationIndicator = ({
 };
 
 export const AnimationBars = ({
-  color = "tint",
+  color = "tint-500",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -122,8 +122,8 @@ export const AnimationBars = ({
         )}
       >
         <div
-          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
-          style={{ width: size }}
+          className={classNames("fabric-bars")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
@@ -134,7 +134,7 @@ export const AnimationSpinner = ({
   color = "tint-700",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -150,8 +150,8 @@ export const AnimationSpinner = ({
         )}
       >
         <div
-          className={classNames(classes.spinner, getColorClass(color))}
-          style={{ width: size }}
+          className={classNames("fabric-spinner")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
@@ -162,7 +162,7 @@ export const Loading = () => {
   return (
     <div
       className={classNames(
-        classes.loader,
+        "fabric-loader",
         "area-[loader] relative overflow-x-clip",
       )}
       data-ref="loading"

package/src/components/avatar/Avatar.tsx

@@ -26,6 +26,7 @@ import BoringAvatar from "boring-avatars";
 import classNames from "classnames";
 import { useMemo, useState } from "react";
 import {
+  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
@@ -33,8 +34,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./Avatar.module.css";
+import { getColor } from "../../utils";
 
 export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
   /**
@@ -56,11 +56,11 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
   /**
    * background color (CSS color / tailwind color)
    */
-  bg?: ColorType | string;
+  bg?: ColorType | PaletteType | string;
   /**
    * icon color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * icon size
    */
@@ -133,7 +133,7 @@ export const Avatar = ({
         <div className="contents">
           <div
             className={classNames(
-              classes.imgPlaceholder,
+              "fabric-imgPlaceholder",
               "absolute inset-0 bg-gray animate-pulse",
             )}
           />
@@ -185,11 +185,9 @@ export const Avatar = ({
     <dfn
       role="presentation"
       className={classNames(
-        classes.avatar,
+        "fabric-avatar",
         className,
         "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
         !rounded && "rounded",
         rounded && "rounded-full",
       )}

package/src/components/avatar/AvatarGroup.tsx

@@ -31,7 +31,6 @@ import {
   type SizeType,
 } from "../../types";
 import { type AvatarProps } from "./Avatar";
-import classes from "./Avatar.module.css";
 
 type AvatarChild =
   | ReactElement<Omit<AvatarProps, "size" | "rounded">>
@@ -104,7 +103,7 @@ export const AvatarGroup = ({
       {...aria}
       ref={ref as AnyObject}
       className={classNames(
-        classes.avatarGroup,
+        "fabric-avatarGroup",
         className,
         "inline-flex flex-nowrap",
         !rounded && "rounded",
@@ -117,9 +116,9 @@ export const AvatarGroup = ({
         <dfn
           data-ref="avatarCount"
           className={classNames(
-            classes.avatar,
+            "fabric-avatar",
             "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
-            classes.extra,
+            "fabric-avatarGroup--extra",
           )}
         >
           <svg>

package/src/components/badge/Badge.tsx

@@ -32,7 +32,6 @@ import {
   type RefProp,
 } from "../../types";
 import { Icon } from "../icon/Icon";
-import classes from "./Badge.module.css";
 
 export interface BadgeProps
   extends CssProp,
@@ -125,8 +124,8 @@ export const Badge = ({
   return (
     <div
       className={classNames(
-        forButton || inline ? "contents" : "relative",
-        block ? "block" : "inline-block",
+        forButton || inline ? "contents" : block ? "block" : "inline-block",
+        forButton || inline ? "" : "relative",
       )}
     >
       {children &&
@@ -140,7 +139,7 @@ export const Badge = ({
           data-ping={ping}
           data-placement={placement}
           className={classNames(
-            classes.badge,
+            "fabric-badge",
             className,
             "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none",
             (forButton && !placement) || inline ? "relative" : "absolute",

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -26,7 +26,6 @@ import { Children, useMemo } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
 import { Anchor } from "../../typography/Anchor";
 import { Dropdown } from "../dropdown/Dropdown";
-import classes from "./Breadcrumbs.module.css";
 
 export interface BreadcrumbProps
   extends CssProp,
@@ -68,7 +67,7 @@ export const Breadcrumbs = ({
       data-color={color}
       data-variant={variant}
       className={classNames(
-        classes.breadcrumbs,
+        "fabric-breadcrumbs",
         className,
         "flex flex-nowrap items-center",
       )}
@@ -77,7 +76,7 @@ export const Breadcrumbs = ({
       {start.map((link, idx) => (
         <li
           key={idx}
-          className={classes.breadcrumbLink}
+          className={"fabric-breadcrumbLink"}
           data-separator={separator}
         >
           {link}
@@ -86,7 +85,7 @@ export const Breadcrumbs = ({
       {overflow && (
         <Dropdown closeOnClick showArrow>
           <li
-            className={classes.breadcrumbLink}
+            className={"fabric-breadcrumbLink"}
             data-separator={separator}
             data-ref="breadcrumbOverflow"
           >
@@ -94,7 +93,7 @@ export const Breadcrumbs = ({
           </li>
           <div
             data-color={color}
-            className={classNames(classes.breadcrumbOverflow, "flex flex-col")}
+            className={classNames("fabric-breadcrumbOverflow", "flex flex-col")}
           >
             {overflow}
           </div>
@@ -103,7 +102,7 @@ export const Breadcrumbs = ({
       {end?.map((link, idx) => (
         <li
           key={idx}
-          className={classes.breadcrumbLink}
+          className={"fabric-breadcrumbLink"}
           data-separator={separator}
         >
           {link}

package/src/components/button/Button.tsx

@@ -26,12 +26,12 @@ import classNames from "classnames";
 import {
   Fragment,
   isValidElement,
-  type MouseEventHandler,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type MouseEventHandler,
   type WheelEventHandler,
 } from "react";
 import { useEffectDebugger } from "../../hooks/useEffectDebugger";
@@ -39,10 +39,10 @@ import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays/tooltip/Tooltip";
 import {
+  type ColorState,
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
-  type ColorType,
   type CssProp,
   type IconProps,
   type PolymorphicProps,
@@ -51,10 +51,10 @@ import {
   type TestProps,
   type TooltipType,
 } from "../../types";
+import { getColor } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { Icon } from "../icon/Icon";
-import classes from "./Button.module.css";
 
 export interface BaseProps
   extends CssProp,
@@ -77,7 +77,7 @@ export interface BaseProps
   /**
    * button color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * button type
    */
@@ -234,7 +234,7 @@ export const Button = <Tag extends React.ElementType = "button">({
       return {
         content: actionMessage,
         placement: "top",
-        color,
+        color: `${color}-100`,
         open: true,
       } as TooltipType;
     }
@@ -252,7 +252,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   return (
     <div
       className={classNames(
-        classes.buttonWrapper,
+        "fabric-buttonWrapper",
         className,
         "relative align-text-top select-none focus-within:z-1",
         fullWidth ? "block w-full" : "inline-block",
@@ -268,12 +268,12 @@ export const Button = <Tag extends React.ElementType = "button">({
           ref={mergeRefs(ref, refEl)}
           role="button"
           className={classNames(
-            classes.button,
+            "fabric-button",
             "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none",
             `focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner`,
             fullWidth && "max-w-full w-full",
             rounded && "rounded-full",
-            spinOnHover && classes.spinOnHover,
+            spinOnHover && "fabric-spinOnHover",
           )}
           type={type}
           disabled={disabled}
@@ -287,7 +287,7 @@ export const Button = <Tag extends React.ElementType = "button">({
         >
           {icon && (
             <Icon
-              className={classes.buttonIcon}
+              className={"fabric-buttonIcon"}
               icon={icon}
               bg={iconBg}
               color={iconColor}
@@ -296,11 +296,11 @@ export const Button = <Tag extends React.ElementType = "button">({
             />
           )}
           {isValidElement(children) && (
-            <div className={classes.buttonChild}>{children}</div>
+            <div className={"fabric-buttonChild"}>{children}</div>
           )}
           {isString(children) && (
             <label
-              className={classNames(classes.buttonLabel, "truncate")}
+              className={classNames("fabric-buttonLabel", "truncate")}
               data-colored-icon={!!iconBg}
             >
               {children}
@@ -309,7 +309,7 @@ export const Button = <Tag extends React.ElementType = "button">({
           {!isNil(badge) && <Badge {...badgeProps} />}
           {hotKey && <HotKeyLabel keyCombo={hotKey} />}
           {altIcon && (
-            <Icon className={classes.altIcon} icon={altIcon} rtlFlip />
+            <Icon className={"fabric-altIcon"} icon={altIcon} rtlFlip />
           )}
         </E>
       </TooltipWrapper>
@@ -317,9 +317,11 @@ export const Button = <Tag extends React.ElementType = "button">({
         <div
           className={classNames(
             "absolute inset-0 overflow-hidden flex justify-center items-center",
-            `bg-${color}-300`,
             rounded ? "rounded-full" : "rounded",
           )}
+          style={{
+            backgroundColor: getColor(`${color}-300`),
+          }}
         >
           <AnimationIndicator type="check" color={color} />
         </div>