@bioturing/components 0.13.3 → 0.14.1

package/dist/CodeBlock.js

@@ -95,7 +95,10 @@ const ScrollArea = ({ children, className, viewportClassName, thumbClassName, sc
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
                 className: clsx(cls("scroll-area-viewport"), viewportClassName),
-                children: children
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
+                    className: clsx(cls("scroll-area-content")),
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
                 className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),
@@ -114,134 +117,276 @@ const MainSegmentedInner = ({ className, ...rest }, ref)=>/*#__PURE__*/ (0, __WE
     });
 const MainSegmented = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(MainSegmentedInner);
 const Segmented = MainSegmented;
-const figmaToAntDesignTokens = {
-    lightMode: {
-        colorText: "rgba(0, 0, 0, 0.88)",
-        colorTextSecondary: "rgba(0, 0, 0, 0.65)",
-        colorTextTertiary: "rgba(0, 0, 0, 0.45)",
-        colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
-        colorPrimary: "#175CD3",
-        colorPrimaryBg: "#E9F2FF",
-        colorPrimaryBgHover: "#D1E9FF",
-        colorPrimaryBorder: "#84CAFF",
-        colorPrimaryBorderHover: "#53B1FD",
-        colorPrimaryHover: "#1570EF",
-        colorPrimaryActive: "#175CD3",
-        colorPrimaryTextHover: "#1570EF",
-        colorPrimaryTextActive: "#175CD3",
-        colorInfo: "#175CD3",
-        colorInfoBg: "#E9F2FF",
-        colorInfoBgHover: "#D1E9FF",
-        colorInfoBorder: "#84CAFF",
-        colorInfoBorderHover: "#53B1FD",
-        colorInfoHover: "#1570EF",
-        colorInfoActive: "#175CD3",
-        colorInfoTextHover: "#1570EF",
-        colorInfoTextActive: "#175CD3",
-        colorSuccess: "#4CB200",
-        colorSuccessBg: "#F6FFF0",
-        colorSuccessBgHover: "#D9F7BE",
-        colorSuccessBorder: "#B7EB8F",
-        colorSuccessBorderHover: "#95DE64",
-        colorSuccessHover: "#73D13D",
-        colorSuccessActive: "#389E0D",
-        colorSuccessTextHover: "#237804",
-        colorSuccessTextActive: "#092B00",
-        colorWarning: "#FA8C16",
-        colorWarningBg: "#FFF7E6",
-        colorWarningBgHover: "#FFE7BA",
-        colorWarningBorder: "#FFD591",
-        colorWarningBorderHover: "#FFC069",
-        colorWarningHover: "#FFA940",
-        colorWarningActive: "#D46B08",
-        colorWarningTextHover: "#AD4E00",
-        colorWarningTextActive: "#873800",
-        colorError: "#D92D20",
-        colorErrorBg: "#FEF3F2",
-        colorErrorBgHover: "#FEE4E2",
-        colorErrorBorder: "#FDA29B",
-        colorErrorBorderHover: "#F97066",
-        colorErrorHover: "#F04438",
-        colorErrorActive: "#D92D20",
-        colorErrorTextHover: "#F04438",
-        colorErrorTextActive: "#D92D20",
-        colorFill: "rgba(0, 0, 0, 0.15)",
-        colorFillSecondary: "rgba(0, 0, 0, 0.06)",
-        colorFillTertiary: "rgba(0, 0, 0, 0.04)",
-        colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
-        colorFillAlter: "rgba(0, 0, 0, 0.02)",
-        colorBorder: "rgba(0, 0, 0, 0.16)",
-        colorBorderSecondary: "rgba(0, 0, 0, 0.06)",
-        colorIcon: "rgba(0, 0, 0, 0.58)",
-        colorIconHover: "rgba(0, 0, 0, 0.88)",
-        controlOutline: "rgba(0, 0, 0, 0.12)"
-    },
-    darkMode: {
-        colorText: "rgba(255, 255, 255, 0.85)",
-        colorTextSecondary: "rgba(255, 255, 255, 0.65)",
-        colorTextTertiary: "rgba(255, 255, 255, 0.45)",
-        colorTextQuaternary: "rgba(255, 255, 255, 0.25)",
-        colorBgContainer: "#26262C",
-        colorBgElevated: "#2F2F37",
-        colorBgLayout: "#1A1A1E",
-        colorBgSpotlight: "#505D5D",
-        colorBgMask: "rgba(0, 0, 0, 0.45)",
-        colorBgBase: "#13131A",
-        colorFill: "rgba(255, 255, 255, 0.15)",
-        colorFillSecondary: "rgba(255, 255, 255, 0.06)",
-        colorFillTertiary: "rgba(255, 255, 255, 0.04)",
-        colorFillQuaternary: "rgba(255, 255, 255, 0.02)",
-        colorFillAlter: "rgba(255, 255, 255, 0.02)",
-        colorBorder: "rgba(255, 255, 255, 0.16)",
-        colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
-        colorPrimary: "#2E90FA",
-        colorPrimaryBg: "#152137",
-        colorPrimaryBgHover: "#112545",
-        colorPrimaryBorder: "#1C3959",
-        colorPrimaryBorderHover: "#204C7C",
-        colorPrimaryHover: "#50A0E8",
-        colorPrimaryActive: "#2565AB",
-        colorPrimaryTextHover: "#50A0E8",
-        colorPrimaryTextActive: "#2565AB",
-        colorInfo: "#2E90FA",
-        colorInfoBg: "#152137",
-        colorInfoBgHover: "#112545",
-        colorInfoBorder: "#1C3959",
-        colorInfoBorderHover: "#204C7C",
-        colorInfoHover: "#50A0E8",
-        colorInfoActive: "#2565AB",
-        colorInfoTextHover: "#50A0E8",
-        colorInfoTextActive: "#2565AB",
-        colorSuccess: "#389E0D",
-        colorSuccessBg: "#162100",
-        colorSuccessBgHover: "#1D2B00",
-        colorSuccessBorder: "#274916",
-        colorSuccessBorderHover: "#306317",
-        colorSuccessHover: "#52C41A",
-        colorSuccessActive: "#237804",
-        colorSuccessTextHover: "#52C41A",
-        colorSuccessTextActive: "#237804",
-        colorWarning: "#D48806",
-        colorWarningBg: "#281800",
-        colorWarningBgHover: "#3D2200",
-        colorWarningBorder: "#443B16",
-        colorWarningBorderHover: "#594E1A",
-        colorWarningHover: "#E8B339",
-        colorWarningActive: "#AA7714",
-        colorWarningTextHover: "#E8B339",
-        colorWarningTextActive: "#AA7714",
-        colorError: "#CF3D33",
-        colorErrorBg: "#291414",
-        colorErrorBgHover: "#411A18",
-        colorErrorBorder: "#562222",
-        colorErrorBorderHover: "#772A24",
-        colorErrorHover: "#E5695A",
-        colorErrorActive: "#A3332B",
-        colorErrorTextHover: "#E5695A",
-        colorErrorTextActive: "#A3332B",
-        colorIcon: "rgba(255, 255, 255, 0.58)",
-        colorIconHover: "rgba(255, 255, 255, 0.88)",
-        controlOutline: "rgba(255, 255, 255, 0.12)"
+const getTokensByTheme = (originTokens, theme)=>{
+    const tokens = {};
+    Object.entries(originTokens).forEach(([key, value])=>{
+        if (value && "object" == typeof value && "light" in value && "dark" in value) {
+            const tokenValue = value;
+            tokens[key] = tokenValue[theme];
+        } else if ("string" == typeof value) tokens[key] = value;
+    });
+    return tokens;
+};
+const antdColorTokens = {
+    colorText: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.85)"
+    },
+    colorTextSecondary: {
+        light: "rgba(0, 0, 0, 0.65)",
+        dark: "rgba(255, 255, 255, 0.65)"
+    },
+    colorTextTertiary: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(255, 255, 255, 0.45)"
+    },
+    colorTextQuaternary: {
+        light: "rgba(0, 0, 0, 0.25)",
+        dark: "rgba(255, 255, 255, 0.25)"
+    },
+    colorPrimary: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorPrimaryBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorPrimaryBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorPrimaryBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorPrimaryBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorPrimaryHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorPrimaryTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfo: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorInfoBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorInfoBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorInfoBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorInfoBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorInfoHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfoTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorSuccess: {
+        light: "#4CB200",
+        dark: "#389E0D"
+    },
+    colorSuccessBg: {
+        light: "#F6FFF0",
+        dark: "#162100"
+    },
+    colorSuccessBgHover: {
+        light: "#D9F7BE",
+        dark: "#1D2B00"
+    },
+    colorSuccessBorder: {
+        light: "#B7EB8F",
+        dark: "#274916"
+    },
+    colorSuccessBorderHover: {
+        light: "#95DE64",
+        dark: "#306317"
+    },
+    colorSuccessHover: {
+        light: "#73D13D",
+        dark: "#52C41A"
+    },
+    colorSuccessActive: {
+        light: "#389E0D",
+        dark: "#237804"
+    },
+    colorSuccessTextHover: {
+        light: "#237804",
+        dark: "#52C41A"
+    },
+    colorSuccessTextActive: {
+        light: "#092B00",
+        dark: "#237804"
+    },
+    colorWarning: {
+        light: "#FA8C16",
+        dark: "#D48806"
+    },
+    colorWarningBg: {
+        light: "#FFF7E6",
+        dark: "#281800"
+    },
+    colorWarningBgHover: {
+        light: "#FFE7BA",
+        dark: "#3D2200"
+    },
+    colorWarningBorder: {
+        light: "#FFD591",
+        dark: "#443B16"
+    },
+    colorWarningBorderHover: {
+        light: "#FFC069",
+        dark: "#594E1A"
+    },
+    colorWarningHover: {
+        light: "#FFA940",
+        dark: "#E8B339"
+    },
+    colorWarningActive: {
+        light: "#D46B08",
+        dark: "#AA7714"
+    },
+    colorWarningTextHover: {
+        light: "#AD4E00",
+        dark: "#E8B339"
+    },
+    colorWarningTextActive: {
+        light: "#873800",
+        dark: "#AA7714"
+    },
+    colorError: {
+        light: "#D92D20",
+        dark: "#CF3D33"
+    },
+    colorErrorBg: {
+        light: "#FEF3F2",
+        dark: "#291414"
+    },
+    colorErrorBgHover: {
+        light: "#FEE4E2",
+        dark: "#411A18"
+    },
+    colorErrorBorder: {
+        light: "#FDA29B",
+        dark: "#562222"
+    },
+    colorErrorBorderHover: {
+        light: "#F97066",
+        dark: "#772A24"
+    },
+    colorErrorHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorErrorTextHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorTextActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorFill: {
+        light: "rgba(0, 0, 0, 0.15)",
+        dark: "rgba(255, 255, 255, 0.15)"
+    },
+    colorFillSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorFillTertiary: {
+        light: "rgba(0, 0, 0, 0.04)",
+        dark: "rgba(255, 255, 255, 0.04)"
+    },
+    colorFillQuaternary: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorFillAlter: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorBorder: {
+        light: "rgba(0, 0, 0, 0.16)",
+        dark: "rgba(255, 255, 255, 0.16)"
+    },
+    colorBorderSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorIcon: {
+        light: "rgba(0, 0, 0, 0.58)",
+        dark: "rgba(255, 255, 255, 0.58)"
+    },
+    colorIconHover: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.88)"
+    },
+    colorBgContainer: {
+        light: "#FFFFFF",
+        dark: "#26262C"
+    },
+    colorBgElevated: {
+        light: "#FFFFFF",
+        dark: "#2F2F37"
+    },
+    colorBgLayout: {
+        light: "#F5F5F5",
+        dark: "#1A1A1E"
+    },
+    colorBgSpotlight: {
+        light: "rgba(0, 0, 0, 0.85)",
+        dark: "#505D5D"
+    },
+    colorBgMask: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(0, 0, 0, 0.45)"
+    },
+    colorBgBase: {
+        light: "#FFFFFF",
+        dark: "#13131A"
+    },
+    controlOutline: {
+        light: "rgba(0, 0, 0, 0.12)",
+        dark: "rgba(255, 255, 255, 0.12)"
     }
 };
 const sharedTokens = {
@@ -262,7 +407,7 @@ const sharedTokens = {
     lineHeightSM: 16 / 12,
     fontWeightStrong: 600,
     boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 6px rgba(0, 0, 0, 0.04), 0px 2px 10px rgba(0, 0, 0, 0.04)",
-    boxShadowSecondary: "0px 0px 1px rgba(0, 0, 0, 0.24), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px rgba(0, 0, 0, 0.05)",
+    boxShadowSecondary: "0px 0px 1px 0px var(--ds-color-border-modal), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px 0px rgba(0, 0, 0, 0.05)",
     colorBgSpotlight: "rgba(0, 0, 0, 0.85)"
 };
 const sharedThemeConfig = {
@@ -303,14 +448,14 @@ const sharedThemeConfig = {
 };
 const lightTheme = {
     token: {
-        ...figmaToAntDesignTokens.lightMode,
+        ...getTokensByTheme(antdColorTokens, "light"),
         ...sharedTokens
     },
     ...sharedThemeConfig
 };
 const darkTheme = {
     token: {
-        ...figmaToAntDesignTokens.darkMode,
+        ...getTokensByTheme(antdColorTokens, "dark"),
         ...sharedTokens
     },
     ...sharedThemeConfig