npm - @react-fabric/core - Versions diffs - 1.0.0-beta.40 → 1.0.0-beta.41 - Mend

@react-fabric/core 1.0.0-beta.40 → 1.0.0-beta.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/cjs/components/empty/EmptyContent.js +6 -3
package/dist/cjs/overlays/flyout/Flyout.js +47 -56
package/dist/cjs/overlays/modal/Modal.js +4 -3
package/dist/esm/components/empty/EmptyContent.js +6 -3
package/dist/esm/overlays/flyout/Flyout.js +50 -59
package/dist/esm/overlays/modal/Modal.js +4 -3
package/dist/types/components/empty/EmptyContent.d.ts +6 -2
package/dist/types/types/index.d.ts +2 -2
package/package.json +3 -3
package/src/components/empty/EmptyContent.tsx +17 -2
package/src/overlays/flyout/Flyout.tsx +65 -79
package/src/overlays/modal/Modal.tsx +3 -3
package/src/types/index.ts +192 -181

package/dist/cjs/components/empty/EmptyContent.js CHANGED Viewed

@@ -5,10 +5,11 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
-var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+var Icon = require('../icon/Icon.js');
-var _excluded = ["children", "title", "message", "icon", "className", "size"];
+var _excluded = ["children", "title", "message", "icon", "className", "size", "iconColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
@@ -55,6 +56,7 @@ var EmptyContent = function EmptyContent(_ref) {
     icon = _ref.icon,
     className = _ref.className,
     size = _ref.size,
+    iconColor = _ref.iconColor,
     test = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     className: classNames("p-6 flex flex-col items-center area-content", className),
@@ -65,7 +67,8 @@ var EmptyContent = function EmptyContent(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "leading-none",
       style: {
-        fontSize: "4em"
+        fontSize: "4em",
+        color: getColor.getColor(iconColor !== null && iconColor !== void 0 ? iconColor : "tint-700")
       },
       children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         icon: icon

package/dist/cjs/overlays/flyout/Flyout.js CHANGED Viewed

@@ -84,66 +84,57 @@ var Flyout = function Flyout(_ref) {
       }, 100);
     }
   }, [closeOnClick, handleClose]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
-    var children = _ref2.children;
-    if (hideMask) return /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
-      children: children
-    });
-    return /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+  return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingPortal, {
+    children: [!hideMask && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        overflow: "hidden"
       },
-      className: "bg-tint-100/10 backdrop-blur-sm transition-all",
-      children: children
-    });
-  }, [hideMask, handleClose]);
-  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          "data-align": align,
-          className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-          style: {
-            width: width,
-            minWidth: minWidth
-          },
-          onMouseUpCapture: tryClosing,
-          ref: refs.setFloating
-        }, getFloatingProps()), aria), aria), {}, {
-          children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
-            children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
-              flex: true,
-              align: "center",
-              className: classNames("fabric-flyoutHeader", headerClassName),
-              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
-                className: "flex-1 truncate py-2 px-1",
-                children: title
-              }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
-                icon: icons.CoreIcons.close,
-                onClick: function onClick() {
-                  return handleClose(false);
-                }
-              })]
-            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-              role: "dialog",
-              className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
-              tabIndex: 0,
-              children: children
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all"
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+      context: context,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        "data-align": align,
+        className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+        style: {
+          width: width,
+          minWidth: minWidth
+        },
+        onMouseUpCapture: tryClosing,
+        ref: refs.setFloating
+      }, getFloatingProps()), aria), aria), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+            flex: true,
+            align: "center",
+            className: classNames("fabric-flyoutHeader", headerClassName),
+            children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              icon: icon,
+              bg: iconBg,
+              color: iconColor,
+              className: classNames(iconClassName, "p-1"),
+              rtlFlip: rtlFlip
+            }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
+              className: "flex-1 truncate py-2 px-1",
+              children: title
+            }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              "data-ref": "panelClose",
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              icon: icons.CoreIcons.close,
+              onClick: function onClick() {
+                return handleClose(false);
+              }
             })]
-          })
-        }))
-      })
-    })
+          }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+            role: "dialog",
+            className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
+            tabIndex: 0,
+            children: children
+          })]
+        })
+      }))
+    })]
   });
 };

package/dist/cjs/overlays/modal/Modal.js CHANGED Viewed

@@ -78,13 +78,14 @@ var Modal = function Modal(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        overflow: "hidden"
       },
-      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16",
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
           style: {
             width: width,
             height: height,

package/dist/esm/components/empty/EmptyContent.js CHANGED Viewed

@@ -5,10 +5,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { isValidElement } from 'react';
-import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import { Icon } from '../icon/Icon.js';
-var _excluded = ["children", "title", "message", "icon", "className", "size"];
+var _excluded = ["children", "title", "message", "icon", "className", "size", "iconColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
@@ -55,6 +56,7 @@ var EmptyContent = function EmptyContent(_ref) {
     icon = _ref.icon,
     className = _ref.className,
     size = _ref.size,
+    iconColor = _ref.iconColor,
     test = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: classNames("p-6 flex flex-col items-center area-content", className),
@@ -65,7 +67,8 @@ var EmptyContent = function EmptyContent(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "leading-none",
       style: {
-        fontSize: "4em"
+        fontSize: "4em",
+        color: getColor(iconColor !== null && iconColor !== void 0 ? iconColor : "tint-700")
       },
       children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
         icon: icon

package/dist/esm/overlays/flyout/Flyout.js CHANGED Viewed

@@ -2,16 +2,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useFloating, useDismiss, useRole, useInteractions, FloatingOverlay, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useCallback, useEffect, Fragment, isValidElement } from 'react';
+import { useCallback, useEffect, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -84,66 +84,57 @@ var Flyout = function Flyout(_ref) {
       }, 100);
     }
   }, [closeOnClick, handleClose]);
-  var Wrapper = useCallback(function (_ref2) {
-    var children = _ref2.children;
-    if (hideMask) return /*#__PURE__*/jsx(Fragment, {
-      children: children
-    });
-    return /*#__PURE__*/jsx(FloatingOverlay, {
+  return /*#__PURE__*/jsxs(FloatingPortal, {
+    children: [!hideMask && /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        overflow: "hidden"
       },
-      className: "bg-tint-100/10 backdrop-blur-sm transition-all",
-      children: children
-    });
-  }, [hideMask, handleClose]);
-  return /*#__PURE__*/jsx(FloatingPortal, {
-    children: /*#__PURE__*/jsx(Wrapper, {
-      children: /*#__PURE__*/jsx(FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          "data-align": align,
-          className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-          style: {
-            width: width,
-            minWidth: minWidth
-          },
-          onMouseUpCapture: tryClosing,
-          ref: refs.setFloating
-        }, getFloatingProps()), aria), aria), {}, {
-          children: /*#__PURE__*/jsxs(HotKeyWrapper, {
-            children: [/*#__PURE__*/jsxs(Header, {
-              flex: true,
-              align: "center",
-              className: classNames("fabric-flyoutHeader", headerClassName),
-              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
-                icon: icon,
-                bg: iconBg,
-                color: iconColor,
-                className: classNames(iconClassName, "p-1"),
-                rtlFlip: rtlFlip
-              }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
-                className: "flex-1 truncate py-2 px-1",
-                children: title
-              }), actions, /*#__PURE__*/jsx(Icon, {
-                "data-ref": "panelClose",
-                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
-                icon: CoreIcons.close,
-                onClick: function onClick() {
-                  return handleClose(false);
-                }
-              })]
-            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
-              role: "dialog",
-              className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
-              tabIndex: 0,
-              children: children
+      className: "bg-tint-100/10 backdrop-blur-sm transition-all"
+    }), /*#__PURE__*/jsx(FloatingFocusManager, {
+      context: context,
+      children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        "data-align": align,
+        className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+        style: {
+          width: width,
+          minWidth: minWidth
+        },
+        onMouseUpCapture: tryClosing,
+        ref: refs.setFloating
+      }, getFloatingProps()), aria), aria), {}, {
+        children: /*#__PURE__*/jsxs(HotKeyWrapper, {
+          children: [/*#__PURE__*/jsxs(Header, {
+            flex: true,
+            align: "center",
+            className: classNames("fabric-flyoutHeader", headerClassName),
+            children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
+              icon: icon,
+              bg: iconBg,
+              color: iconColor,
+              className: classNames(iconClassName, "p-1"),
+              rtlFlip: rtlFlip
+            }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
+              className: "flex-1 truncate py-2 px-1",
+              children: title
+            }), actions, /*#__PURE__*/jsx(Icon, {
+              "data-ref": "panelClose",
+              className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
+              icon: CoreIcons.close,
+              onClick: function onClick() {
+                return handleClose(false);
+              }
             })]
-          })
-        }))
-      })
-    })
+          }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+            role: "dialog",
+            className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
+            tabIndex: 0,
+            children: children
+          })]
+        })
+      }))
+    })]
   });
 };

package/dist/esm/overlays/modal/Modal.js CHANGED Viewed

@@ -78,13 +78,14 @@ var Modal = function Modal(_ref) {
     children: /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {
-        zIndex: "var(--z-overlay-mask)"
+        zIndex: "var(--z-overlay-mask)",
+        overflow: "hidden"
       },
-      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16",
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames("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]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
           style: {
             width: width,
             height: height,

package/dist/types/components/empty/EmptyContent.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
     /**
      * empty title
@@ -17,5 +17,9 @@ export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenP
      * empty icon
      */
     icon?: string | React.ReactElement;
+    /**
+     * icon color
+     */
+    iconColor?: ColorType | PaletteType;
 }
-export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyContent: ({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,8 +6,8 @@ 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 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 ColorType = "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "primary-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "info-50" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "info-950" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "danger-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950";
+export type PaletteType = "scarlet-50" | "scarlet-100" | "scarlet-200" | "scarlet-300" | "scarlet-400" | "scarlet-500" | "scarlet-600" | "scarlet-700" | "scarlet-800" | "scarlet-900" | "scarlet-950" | "pumpkin-50" | "pumpkin-100" | "pumpkin-200" | "pumpkin-300" | "pumpkin-400" | "pumpkin-500" | "pumpkin-600" | "pumpkin-700" | "pumpkin-800" | "pumpkin-900" | "pumpkin-950" | "marigold-50" | "marigold-100" | "marigold-200" | "marigold-300" | "marigold-400" | "marigold-500" | "marigold-600" | "marigold-700" | "marigold-800" | "marigold-900" | "marigold-950" | "avacado-50" | "avacado-100" | "avacado-200" | "avacado-300" | "avacado-400" | "avacado-500" | "avacado-600" | "avacado-700" | "avacado-800" | "avacado-900" | "avacado-950" | "jade-50" | "jade-100" | "jade-200" | "jade-300" | "jade-400" | "jade-500" | "jade-600" | "jade-700" | "jade-800" | "jade-900" | "jade-950" | "denim-50" | "denim-100" | "denim-200" | "denim-300" | "denim-400" | "denim-500" | "denim-600" | "denim-700" | "denim-800" | "denim-900" | "denim-950" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-950" | "lilac-50" | "lilac-100" | "lilac-200" | "lilac-300" | "lilac-400" | "lilac-500" | "lilac-600" | "lilac-700" | "lilac-800" | "lilac-900" | "lilac-950" | "coral-50" | "coral-100" | "coral-200" | "coral-300" | "coral-400" | "coral-500" | "coral-600" | "coral-700" | "coral-800" | "coral-900" | "coral-950" | "wood-50" | "wood-100" | "wood-200" | "wood-300" | "wood-400" | "wood-500" | "wood-600" | "wood-700" | "wood-800" | "wood-900" | "wood-950" | "silver-50" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-950" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-950" | "olive-50" | "olive-100" | "olive-200" | "olive-300" | "olive-400" | "olive-500" | "olive-600" | "olive-700" | "olive-800" | "olive-900" | "olive-950" | "sand-50" | "sand-100" | "sand-200" | "sand-300" | "sand-400" | "sand-500" | "sand-600" | "sand-700" | "sand-800" | "sand-900" | "sand-950" | "tint-50" | "tint-100" | "tint-200" | "tint-300" | "tint-400" | "tint-500" | "tint-600" | "tint-700" | "tint-800" | "tint-900" | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 export declare const ThemeColors: string[];
 export interface TooltipType {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.40",
+  "version": "1.0.0-beta.41",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.40",
+    "@react-fabric/utilities": "^1.0.0-beta.41",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "ede05c84683697d85e28a0ae380cb9b74d693f51"
+  "gitHead": "bc737416d3c6a217a6b8c47291c3975a22722d80"
 }

package/src/components/empty/EmptyContent.tsx CHANGED Viewed

@@ -24,7 +24,14 @@
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement } from "react";
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import {
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+  type TestProps,
+} from "../../types";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
 export interface EmptyContentProps
@@ -47,6 +54,10 @@ export interface EmptyContentProps
    * empty icon
    */
   icon?: string | React.ReactElement;
+  /**
+   * icon color
+   */
+  iconColor?: ColorType | PaletteType;
 }
 const SizeMap: KeyValue = {
@@ -101,6 +112,7 @@ export const EmptyContent = ({
   icon,
   className,
   size,
+  iconColor,
   ...test
 }: EmptyContentProps) => {
   return (
@@ -116,7 +128,10 @@ export const EmptyContent = ({
       }
       {...test}
     >
-      <div className="leading-none" style={{ fontSize: "4em" }}>
+      <div
+        className="leading-none"
+        style={{ fontSize: "4em", color: getColor(iconColor ?? "tint-700") }}
+      >
         {isString(icon) && <Icon icon={icon} />}
         {isValidElement(icon) && icon}
         {!icon && <DefaultIcon />}

package/src/overlays/flyout/Flyout.tsx CHANGED Viewed

@@ -33,12 +33,10 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Fragment,
   isValidElement,
   useCallback,
   useEffect,
   type ElementType,
-  type PropsWithChildren,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
@@ -194,91 +192,79 @@ export const Flyout = ({
     [closeOnClick, handleClose],
   );
-  const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
-      if (hideMask) return <Fragment>{children}</Fragment>;
-      return (
+  return (
+    <FloatingPortal>
+      {!hideMask && (
         <FloatingOverlay
           lockScroll
-          style={{ zIndex: "var(--z-overlay-mask)" }}
+          style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
           className="bg-tint-100/10 backdrop-blur-sm transition-all"
+        />
+      )}
+      <FloatingFocusManager context={context}>
+        <div
+          data-align={align}
+          className={classNames(
+            "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]",
+            size === "md" && "w-[40rem]",
+            size === "lg" && "w-[60vw]",
+            size === "xl" && "w-[80vw]",
+          )}
+          style={{
+            width,
+            minWidth,
+          }}
+          onMouseUpCapture={tryClosing}
+          ref={refs.setFloating}
+          {...getFloatingProps()}
+          {...aria}
+          {...aria}
         >
-          {children}
-        </FloatingOverlay>
-      );
-    },
-    [hideMask, handleClose],
-  );
-  return (
-    <FloatingPortal>
-      <Wrapper>
-        <FloatingFocusManager context={context}>
-          <div
-            data-align={align}
-            className={classNames(
-              "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]",
-              size === "md" && "w-[40rem]",
-              size === "lg" && "w-[60vw]",
-              size === "xl" && "w-[80vw]",
-            )}
-            style={{
-              width,
-              minWidth,
-            }}
-            onMouseUpCapture={tryClosing}
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-            {...aria}
-            {...aria}
-          >
-            <HotKeyWrapper>
-              <Header
-                flex
-                align="center"
-                className={classNames("fabric-flyoutHeader", headerClassName)}
-              >
-                {isString(icon) && (
-                  <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
-                    className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
-                  />
-                )}
-                {isValidElement(icon) && icon}
-                <label className="flex-1 truncate py-2 px-1">{title}</label>
-                {actions}
+          <HotKeyWrapper>
+            <Header
+              flex
+              align="center"
+              className={classNames("fabric-flyoutHeader", headerClassName)}
+            >
+              {isString(icon) && (
                 <Icon
-                  data-ref="panelClose"
-                  className={classNames(
-                    "fabric-panelAction",
-                    "cursor-pointer p-1 text-xl self-stretch",
-                  )}
-                  icon={CoreIcons.close}
-                  onClick={() => handleClose(false)}
+                  icon={icon}
+                  bg={iconBg}
+                  color={iconColor}
+                  className={classNames(iconClassName, "p-1")}
+                  rtlFlip={rtlFlip}
                 />
-              </Header>
-              {loading && <Loading />}
-              <div
-                role="dialog"
+              )}
+              {isValidElement(icon) && icon}
+              <label className="flex-1 truncate py-2 px-1">{title}</label>
+              {actions}
+              <Icon
+                data-ref="panelClose"
                 className={classNames(
-                  "fabric-flyoutBody",
-                  "flex-1 grid overflow-hidden",
+                  "fabric-panelAction",
+                  "cursor-pointer p-1 text-xl self-stretch",
                 )}
-                {...({ tabIndex: 0 } as AnyObject)}
-              >
-                {children}
-              </div>
-            </HotKeyWrapper>
-          </div>
-        </FloatingFocusManager>
-      </Wrapper>
+                icon={CoreIcons.close}
+                onClick={() => handleClose(false)}
+              />
+            </Header>
+            {loading && <Loading />}
+            <div
+              role="dialog"
+              className={classNames(
+                "fabric-flyoutBody",
+                "flex-1 grid overflow-hidden",
+              )}
+              {...({ tabIndex: 0 } as AnyObject)}
+            >
+              {children}
+            </div>
+          </HotKeyWrapper>
+        </div>
+      </FloatingFocusManager>
     </FloatingPortal>
   );
 };

package/src/overlays/modal/Modal.tsx CHANGED Viewed

@@ -176,15 +176,15 @@ export const Modal = ({
     <FloatingPortal>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-tint-100/20 backdrop-blur-sm grid place-items-center"
+        style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
+        className="bg-tint-100/20 backdrop-blur-sm grid place-items-center p-16"
       >
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
               "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",
+              "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl",
               size === "sm" && "w-[20rem]",
               size === "md" && "w-[40rem]",
               size === "lg" && "w-[60vw]",

package/src/types/index.ts CHANGED Viewed

@@ -43,227 +43,238 @@ export type ColorState =
 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-50"
+  | "accent-100"
+  | "accent-200"
+  | "accent-300"
+  | "accent-400"
+  | "accent-500"
+  | "accent-600"
+  | "accent-700"
+  | "accent-800"
+  | "accent-900"
   | "accent-950"
+  | "info-50"
+  | "info-100"
+  | "info-200"
+  | "info-300"
+  | "info-400"
+  | "info-500"
+  | "info-600"
+  | "info-700"
+  | "info-800"
+  | "info-900"
   | "info-950"
+  | "danger-50"
+  | "danger-100"
+  | "danger-200"
+  | "danger-300"
+  | "danger-400"
+  | "danger-500"
+  | "danger-600"
+  | "danger-700"
+  | "danger-800"
+  | "danger-900"
   | "danger-950"
+  | "success-50"
+  | "success-100"
+  | "success-200"
+  | "success-300"
+  | "success-400"
+  | "success-500"
+  | "success-600"
+  | "success-700"
+  | "success-800"
+  | "success-900"
   | "success-950"
+  | "warning-50"
+  | "warning-100"
+  | "warning-200"
+  | "warning-300"
+  | "warning-400"
+  | "warning-500"
+  | "warning-600"
+  | "warning-700"
+  | "warning-800"
+  | "warning-900"
   | "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-50"
+  | "pumpkin-100"
+  | "pumpkin-200"
+  | "pumpkin-300"
+  | "pumpkin-400"
+  | "pumpkin-500"
+  | "pumpkin-600"
+  | "pumpkin-700"
+  | "pumpkin-800"
+  | "pumpkin-900"
   | "pumpkin-950"
+  | "marigold-50"
+  | "marigold-100"
+  | "marigold-200"
+  | "marigold-300"
+  | "marigold-400"
+  | "marigold-500"
+  | "marigold-600"
+  | "marigold-700"
+  | "marigold-800"
+  | "marigold-900"
   | "marigold-950"
+  | "avacado-50"
+  | "avacado-100"
+  | "avacado-200"
+  | "avacado-300"
+  | "avacado-400"
+  | "avacado-500"
+  | "avacado-600"
+  | "avacado-700"
+  | "avacado-800"
+  | "avacado-900"
   | "avacado-950"
+  | "jade-50"
+  | "jade-100"
+  | "jade-200"
+  | "jade-300"
+  | "jade-400"
+  | "jade-500"
+  | "jade-600"
+  | "jade-700"
+  | "jade-800"
+  | "jade-900"
   | "jade-950"
+  | "denim-50"
+  | "denim-100"
+  | "denim-200"
+  | "denim-300"
+  | "denim-400"
+  | "denim-500"
+  | "denim-600"
+  | "denim-700"
+  | "denim-800"
+  | "denim-900"
   | "denim-950"
+  | "iris-50"
+  | "iris-100"
+  | "iris-200"
+  | "iris-300"
+  | "iris-400"
+  | "iris-500"
+  | "iris-600"
+  | "iris-700"
+  | "iris-800"
+  | "iris-900"
   | "iris-950"
+  | "lilac-50"
+  | "lilac-100"
+  | "lilac-200"
+  | "lilac-300"
+  | "lilac-400"
+  | "lilac-500"
+  | "lilac-600"
+  | "lilac-700"
+  | "lilac-800"
+  | "lilac-900"
   | "lilac-950"
+  | "coral-50"
+  | "coral-100"
+  | "coral-200"
+  | "coral-300"
+  | "coral-400"
+  | "coral-500"
+  | "coral-600"
+  | "coral-700"
+  | "coral-800"
+  | "coral-900"
   | "coral-950"
+  | "wood-50"
+  | "wood-100"
+  | "wood-200"
+  | "wood-300"
+  | "wood-400"
+  | "wood-500"
+  | "wood-600"
+  | "wood-700"
+  | "wood-800"
+  | "wood-900"
   | "wood-950"
+  | "silver-50"
+  | "silver-100"
+  | "silver-200"
+  | "silver-300"
+  | "silver-400"
+  | "silver-500"
+  | "silver-600"
+  | "silver-700"
+  | "silver-800"
+  | "silver-900"
   | "silver-950"
+  | "steel-50"
+  | "steel-100"
+  | "steel-200"
+  | "steel-300"
+  | "steel-400"
+  | "steel-500"
+  | "steel-600"
+  | "steel-700"
+  | "steel-800"
+  | "steel-900"
   | "steel-950"
+  | "olive-50"
+  | "olive-100"
+  | "olive-200"
+  | "olive-300"
+  | "olive-400"
+  | "olive-500"
+  | "olive-600"
+  | "olive-700"
+  | "olive-800"
+  | "olive-900"
   | "olive-950"
-  | "sand-950";
+  | "sand-50"
+  | "sand-100"
+  | "sand-200"
+  | "sand-300"
+  | "sand-400"
+  | "sand-500"
+  | "sand-600"
+  | "sand-700"
+  | "sand-800"
+  | "sand-900"
+  | "sand-950"
+  | "tint-50"
+  | "tint-100"
+  | "tint-200"
+  | "tint-300"
+  | "tint-400"
+  | "tint-500"
+  | "tint-600"
+  | "tint-700"
+  | "tint-800"
+  | "tint-900"
+  | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";