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

package/src/core/viewport/Viewport.tsx

@@ -23,7 +23,6 @@
 
 import classNames from "classnames";
 import { type PropsWithChildren } from "react";
-import classes from "./Viewport.module.css";
 
 /**
  * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
@@ -33,7 +32,7 @@ export const Viewport = ({ children }: PropsWithChildren) => {
     <div
       data-ref="viewport"
       className={classNames(
-        classes.viewport,
+        "fabric-viewport",
         "grid overflow-hidden absolute inset-0",
       )}
     >

package/src/overlays/alert/Alert.tsx

@@ -36,11 +36,10 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
-import { getBorderClass, getColorClass } from "../../utils";
-import classes from "./Alert.module.css";
+import { getColor } from "../../utils";
 
 export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -58,7 +57,7 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -116,35 +115,20 @@ export const Alert = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={`${color}-600`} />
       );
     switch (color) {
       case "danger":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="cross" color={"danger-600"} />;
       case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="check" color={"success-600"} />;
       case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="exclaim" color={"warning-600"} />;
       default:
         return (
           <AnimationIndicator
             type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
+            color={`${color}-600`}
           />
         );
     }
@@ -178,11 +162,13 @@ export const Alert = ({
           <dialog
             role="alertdialog"
             className={classNames(
-              classes.alert,
-              getBorderClass(color + "-300"),
+              "fabric-alert",
               "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
               "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg",
             )}
+            style={{
+              borderColor: getColor(`${color}-300`),
+            }}
             ref={refs.setFloating}
             {...getFloatingProps()}
           >
@@ -199,8 +185,14 @@ export const Alert = ({
                 value={value}
                 placeholder={placeholder}
                 className={classNames(
-                  `area-[input] appearance-none outline-0 ring-${color}-500 border rounded border-${color}-200 w-full px-2 py-1`,
+                  `area-[input] appearance-none outline-0 border rounded w-full px-2 py-1`,
                 )}
+                style={
+                  {
+                    borderColor: getColor(`${color}-200`),
+                    "--tw-ring-color": getColor(`${color}-500`),
+                  } as AnyObject
+                }
                 ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
                 onBlur={(e) => e.target.focus()}
                 onChange={(e) => setValue(e.target.value)}

package/src/overlays/flyout/Flyout.tsx

@@ -53,7 +53,6 @@ import {
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Flyout.module.css";
 
 export interface FlyoutProps
   extends AriaProps,
@@ -219,7 +218,7 @@ export const Flyout = ({
           <div
             data-align={align}
             className={classNames(
-              classes.flyout,
+              "fabric-flyout",
               "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
               align === "start" ? "start-0" : "end-0",
               size === "sm" && "w-[20rem]",
@@ -240,7 +239,7 @@ export const Flyout = ({
             <HotKeyWrapper>
               <Header
                 flex
-                className={classNames(classes.flyoutHeader, headerClassName)}
+                className={classNames("fabric-flyoutHeader", headerClassName)}
               >
                 {isString(icon) && (
                   <Icon
@@ -257,7 +256,7 @@ export const Flyout = ({
                 <Icon
                   data-ref="panelClose"
                   className={classNames(
-                    classes.panelAction,
+                    "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-stretch",
                   )}
                   icon={CoreIcons.close}
@@ -268,7 +267,7 @@ export const Flyout = ({
               <div
                 role="dialog"
                 className={classNames(
-                  classes.flyoutBody,
+                  "fabric-flyoutBody",
                   "flex-1 grid overflow-hidden",
                 )}
                 {...({ tabIndex: 0 } as AnyObject)}

package/src/overlays/message/Message.tsx

@@ -24,9 +24,8 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
-import { getBgClass, getColorClass } from "../../utils";
-import classes from "./Message.module.css";
+import { type ColorState, type Elements, type IconProps } from "../../types";
+import { getColor } from "../../utils";
 
 export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -40,7 +39,7 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -77,11 +76,15 @@ export const Message = ({
   return (
     <div
       className={classNames(
-        classes.message,
-        color ? getBgClass(color + "-300") : "bg-invert",
-        color ? getColorClass(color + "-900") : "text-invert",
+        "fabric-message",
         "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
       )}
+      style={{
+        backgroundColor: color
+          ? getColor(color + "-300")
+          : "var(--bg-color-invert)",
+        color: color ? getColor(color + "-900") : "var(--text-color-invert)",
+      }}
       ref={elRef}
     >
       {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}

package/src/overlays/modal/Modal.tsx

@@ -51,7 +51,6 @@ import {
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Modal.module.css";
 
 export interface ModalProps
   extends AriaProps,
@@ -183,7 +182,7 @@ export const Modal = ({
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
-              classes.modal,
+              "fabric-modal",
               "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
               "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
               size === "sm" && "w-[20rem]",
@@ -205,7 +204,7 @@ export const Modal = ({
             <HotKeyWrapper>
               <Header
                 flex
-                className={classNames(classes.modalHeader, headerClassName)}
+                className={classNames("fabric-modalHeader", headerClassName)}
               >
                 {isString(icon) && (
                   <Icon
@@ -222,7 +221,7 @@ export const Modal = ({
                 <Icon
                   data-ref="panelClose"
                   className={classNames(
-                    classes.panelAction,
+                    "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-stretch",
                   )}
                   icon={CoreIcons.close}
@@ -233,7 +232,7 @@ export const Modal = ({
               <div
                 role="dialog"
                 className={classNames(
-                  classes.modalBody,
+                  "fabric-modalBody",
                   "flex-1 grid overflow-hidden",
                 )}
                 {...({ tabIndex: 0 } as AnyObject)}

package/src/overlays/toast/Toast.tsx

@@ -27,10 +27,9 @@ import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Toast.module.css";
+import { getColor } from "../../utils";
 
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
@@ -48,7 +47,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -87,31 +86,16 @@ export const Toast = ({
       );
     switch (color) {
       case "danger":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="cross" color={"danger-600"} />;
       case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="check" color={"success-600"} />;
       case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="exclaim" color={"warning-600"} />;
       default:
         return (
           <AnimationIndicator
             type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
+            color={`${color}-600`}
           />
         );
     }
@@ -138,22 +122,29 @@ export const Toast = ({
     <div
       role="alert"
       className={classNames(
-        classes.toast,
-        getBorderClass(color + "-300"),
+        "fabric-toast",
         "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
       )}
+      style={{
+        borderColor: getColor(color + "-300"),
+      }}
       ref={elRef}
     >
       <div
-        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
+        className={classNames("flex-initial p-2")}
+        style={{
+          backgroundColor: getColor(color + "-300"),
+        }}
       >
         {iconType}
       </div>
       <div
         className={classNames(
-          getBgClass(color + "-50/50"),
           "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
         )}
+        style={{
+          backgroundColor: getColor(color + "-50"),
+        }}
       >
         <div className="flex flex-nowrap gap-2 items-start">
           <div className="font-medium flex-1">{title}</div>

package/src/overlays/tooltip/Tooltip.tsx

@@ -51,7 +51,7 @@ import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Tooltip.module.css";
+import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
   /**
@@ -82,6 +82,7 @@ export const Tooltip = ({
   ref,
   children,
   color,
+  textColor,
   content,
   open,
   copyContent,
@@ -173,25 +174,45 @@ export const Tooltip = ({
         <FloatingPortal>
           <dfn
             data-ref="tooltip"
-            data-color={color}
             className={classNames(
-              classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current",
+              "fabric-tooltip z-(--z-tooltip)",
+              "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted",
             )}
             ref={refs.setFloating}
-            style={floatingStyles}
+            style={{
+              color: textColor ? getColor(textColor) : undefined,
+              backgroundColor: color ? getColor(color) : undefined,
+              ...floatingStyles,
+            }}
             {...getFloatingProps()}
           >
             <span
               className={classNames(
-                "font-medium text-dimmed flex-1 break-all",
+                "font-medium flex-1 break-all",
+                !textColor && "contrast",
                 isString(content) && "whitespace-pre-wrap mixed-lang",
               )}
+              style={{
+                color: textColor
+                  ? undefined
+                  : color
+                    ? getColor(color)
+                    : "var(--bg-color-muted)",
+              }}
             >
               {content}
             </span>
             {copyEl}
-            <FloatingArrow ref={arrowRef} context={context} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="fill-muted stroke-dimmed"
+              style={{
+                stroke: color ? getColor(color) : undefined,
+                fill: color ? getColor(color) : undefined,
+              }}
+            />
           </dfn>
         </FloatingPortal>
       )}

package/src/types/index.ts

@@ -33,7 +33,7 @@ export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
-export type ColorType =
+export type ColorState =
   | "primary"
   | "accent"
   | "info"
@@ -41,21 +41,229 @@ export type ColorType =
   | "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"
-  | "pumpkin"
-  | "marigold"
-  | "avacado"
-  | "jade"
-  | "denim"
-  | "iris"
-  | "lilac"
-  | "coral"
-  | "wood"
-  | "silver"
-  | "steel"
-  | "olive"
-  | "sand";
+  | "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";
 
@@ -82,7 +290,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -175,11 +387,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 {