@bifrostui/react 1.3.2 → 1.4.0-beta.0

package/es/Tabs/Tabs.css

@@ -1,11 +1,12 @@
 .bui-tabs {
-  --height: 39px;
-  --font-size: var(--bui-text-size-1);
-  --color: var(--bui-color-fg-subtle);
-  --active-color: var(--bui-color-fg-default);
-  --line-color: var(--bui-color-primary);
-  --line-height: 3PX;
-  --line-width: 18px;
+  --height: var(--bui-tabs-height, 39px);
+  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
+  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
+  --line-height: var(--bui-tabs-line-height, 3PX);
+  --line-width: var(--bui-tabs-line-width, 18px);
+  --mask-height: var(--bui-tabs-mask-height, 100%);
+  --tab-height: var(--bui-tab-height, 100%);
+  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
   position: relative;
   font-family: var(--bui-font-family);
 }
@@ -28,7 +29,7 @@
   bottom: 0;
   height: var(--line-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
+  background: var(--bui-color-primary);
   border-radius: var(--bui-shape-radius-label);
 }
 .bui-tabs-content {
@@ -40,7 +41,7 @@
   bottom: 0;
   z-index: 1;
   width: 12px;
-  height: 100%;
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {

package/es/Tag/Tag.css

@@ -1,15 +1,12 @@
 .bui-tag {
-  --color: var(--bui-tag-color, var(--bui-color-gray));
-  --border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  height: 15px;
-  line-height: 15px;
-  padding: 0 var(--bui-spacing-xs);
+  height: var(--tag-height);
+  line-height: var(--tag-line-height);
+  padding: var(--tag-padding);
   font-size: var(--bui-text-size-5);
   font-weight: var(--bui-font-weight-normal);
   border-radius: var(--bui-shape-radius-label);
@@ -19,8 +16,8 @@
   font-family: var(--bui-font-family);
 }
 .bui-tag-outlined {
-  color: var(--color);
-  border: 1px solid var(--border-color);
+  color: var(--tag-color);
+  border: 1px solid var(--tag-border-color);
 }
 .bui-tag-outlined.bui-tag-primary {
   color: var(--bui-color-primary);
@@ -47,7 +44,7 @@
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {
-  background-color: var(--bg-color);
+  background-color: var(--tag-bg-color);
 }
 .bui-tag-contained.bui-tag-primary {
   background-color: var(--bui-color-primary);
@@ -92,6 +89,6 @@
   color: var(--bui-color-danger);
 }
 .bui-tag-light.bui-tag-vip {
-  background-color: rgba(255, 134, 110, 0.3);
+  background-color: var(--tag-bg-color-vip);
   color: var(--bui-color-vip);
 }

package/es/Tag/TagGroup.css

@@ -1,4 +1,12 @@
 .bui-tag-group {
+  --height: var(--bui-tag-group-divider-height, 13%);
+  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
+  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
+  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
+  --tag-height: var(--bui-tag-height, 15px);
+  --tag-line-height: var(--bui-tag-line-height, 15px);
+  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
+  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   display: inline-flex;
   font-family: var(--bui-font-family);
 }
@@ -24,7 +32,7 @@
   position: absolute;
   right: -1px;
   width: 1px;
-  height: 13%;
+  height: var(--height);
   color: #fff;
   background-color: #fff;
   border-right-style: solid;

package/es/TextArea/TextArea.css

@@ -1,18 +1,28 @@
 .bui-textarea {
-  --bg-color: var(--bui-color-bg-default);
-  --text-color: var(--bui-color-fg-subtle);
+  --border-radius: var(--bui-textarea-border-radius, var(--bui-shape-radius-label));
+  --width: var(--bui-textarea-width, 100%);
+  --bg-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
+  --text-color: var(--bui-textarea-text-color, var(--bui-color-fg-subtle));
   --count-bg-color: var(--bg-color, var(--bui-color-bg-default));
-  --count-text-color: var(--bui-color-fg-subtle);
+  --count-text-color: var(--bui-textarea-count-color, var(--bui-color-fg-subtle));
+  --text-font-size: var(--bui-textarea-text-font-size, var(--bui-text-size-2));
+  --count-font-size: var(--bui-textarea-count-font-size, var(--bui-title-size-3));
+  --content-padding: var(--bui-textarea-padding, 8px);
+  --count-padding: var(--bui-textarea-count-padding, 0 4px);
+  --placeholder-color: var(--bui-textarea-placeholder-color, #ced1d6);
+  --placeholder-line-height: var(--bui-textarea-placeholder-line-height, 1.3);
   background: var(--bui-color-bg-default);
+  border-radius: var(--border-radius);
   font-family: var(--bui-font-family);
+  overflow: hidden;
 }
 .bui-textarea textarea {
-  font-size: var(--bui-text-size-2);
+  font-size: var(--text-font-size);
   color: var(--text-color);
   line-height: var(--bui-line-height);
 }
 .bui-textarea .bui-mini-placeholder {
-  color: var(--bui-color-fg-disabled);
+  color: var(--placeholder-color);
 }
 .bui-textarea-disabled {
   pointer-events: none;
@@ -21,23 +31,23 @@
   display: none;
 }
 .bui-textarea-content {
-  width: 100%;
+  width: var(--width);
   resize: none;
-  background: var(--bg-color);
-  padding: 8px;
+  background-color: var(--bg-color);
+  padding: var(--content-padding);
   border: none;
   outline: none;
   word-break: break-all;
   box-sizing: border-box;
 }
 .bui-textarea-content::placeholder {
-  color: var(--bui-color-fg-disabled);
-  line-height: 1.3;
+  color: var(--placeholder-color);
+  line-height: var(--placeholder-line-height);
 }
 .bui-textarea-count {
-  background: var(--count-bg-color);
+  background-color: var(--count-bg-color);
   color: var(--count-text-color);
   text-align: right;
-  padding: 0 4px;
-  font-size: var(--bui-title-size-3);
+  padding: var(--count-padding);
+  font-size: var(--count-font-size);
 }

package/es/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ThemeProviderProps } from './ThemeProvider.types';
+declare const ThemeProvider: React.ForwardRefExoticComponent<Omit<ThemeProviderProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ThemeProvider;

package/es/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,62 @@
+import React, { useMemo, useEffect } from "react";
+import { useUniqueId } from "@bifrostui/utils";
+import { ThemeContext } from "./hooks";
+import { BUI_VAR_PREFIX } from "./utils/constants";
+import { mountTokens } from "./utils/mountTokens";
+const ThemeProvider = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    var _a;
+    const {
+      isRoot,
+      locale,
+      responsive,
+      defaultLightToken,
+      defaultDarkToken,
+      dmLightToken,
+      dmDarkToken,
+      token,
+      children
+    } = props;
+    let containerId = useUniqueId();
+    containerId = `${BUI_VAR_PREFIX}${containerId}`;
+    const theme = useMemo(() => {
+      return { locale };
+    }, [locale]);
+    let childrenNode = children;
+    if (!isRoot && React.isValidElement(children)) {
+      childrenNode = React.cloneElement(children, {
+        className: `${containerId} ${((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.className) || ""}`.trim()
+      });
+    }
+    useEffect(() => {
+      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || dmDarkToken || token) {
+        mountTokens({
+          isRoot,
+          containerId,
+          container: children,
+          responsive,
+          defaultLightToken,
+          defaultDarkToken,
+          dmLightToken,
+          dmDarkToken,
+          token
+        });
+      }
+    }, [
+      isRoot,
+      containerId,
+      responsive,
+      defaultLightToken,
+      defaultDarkToken,
+      dmLightToken,
+      dmDarkToken,
+      token
+    ]);
+    return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme }, childrenNode);
+  }
+);
+ThemeProvider.displayName = "BuiThemeProvider";
+var ThemeProvider_default = ThemeProvider;
+export {
+  ThemeProvider_default as default
+};

package/es/ThemeProvider/ThemeProvider.types.d.ts

@@ -0,0 +1,127 @@
+import { ReactNode } from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { BaseLang } from '../locales/base';
+export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & ThemeProps;
+    defaultComponent: D;
+}, D>;
+export interface Breakpoints {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     * @default '575.98px'
+     */
+    xs?: string;
+    /**
+     * 小屏幕
+     * @default '576px'
+     */
+    sm?: string;
+    /**
+     * 中等屏幕
+     * @default '768px'
+     */
+    md?: string;
+    /**
+     * 大屏幕
+     * @default '992px'
+     */
+    lg?: string;
+    /**
+     * 超大屏幕
+     * @default '1200px'
+     */
+    xl?: string;
+}
+/**
+ * 响应式屏幕断点配置
+ */
+interface ResponsiveTokenOptions {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     */
+    xs?: Record<string, string>;
+    /**
+     * 小屏幕 (≥ 576px)
+     */
+    sm?: Record<string, string>;
+    /**
+     * 中等屏幕 (≥ 768px)
+     */
+    md?: Record<string, string>;
+    /**
+     * 大屏幕 (≥ 992px)
+     */
+    lg?: Record<string, string>;
+    /**
+     * 超大屏幕 (≥ 1200px)
+     */
+    xl?: Record<string, string>;
+}
+interface ThemeProps {
+    /**
+     * 当前ThemeProvider是否为最顶层
+     * 若当前应用会出现嵌套的ThemeProvider，则需要将最外层的ThemeProvider isRoot属性设置为true
+     * TODO 不通过属性判断
+     * @default false
+     */
+    isRoot?: boolean;
+    /**
+     * 挂载的容器
+     * @default root
+     */
+    container?: ReactNode;
+    /**
+     * 挂载容器的id
+     */
+    containerId?: string;
+    /**
+     * 语言
+     */
+    locale?: BaseLang;
+    /**
+     * 响应式屏幕断点配置
+     */
+    responsive?: ResponsiveTokenOptions;
+    /**
+     * 默认高亮主题Token
+     */
+    defaultLightToken?: Record<string, string>;
+    /**
+     * 默认暗黑主题Token
+     */
+    defaultDarkToken?: Record<string, string>;
+    /**
+     * 大麦高亮主题Token
+     */
+    dmLightToken?: Record<string, string>;
+    /**
+     * 大麦暗黑主题Token
+     */
+    dmDarkToken?: Record<string, string>;
+    /**
+     * 组件全局Token
+     */
+    token?: Record<string, string>;
+}
+/**
+ * 复写内置主题Tokens
+ */
+type BuiltInThemesTokenOptions = Pick<ThemeProps, 'defaultLightToken' | 'defaultDarkToken' | 'dmLightToken' | 'dmDarkToken'>;
+/**
+ * 挂载组件自定义Tokens参数
+ */
+export type MountComponentsTokenOptions = Pick<ThemeProps, 'isRoot' | 'container' | 'containerId' | 'token'>;
+/**
+ * 挂载响应式Tokens参数
+ */
+type componentsTokenOptions = Pick<ThemeProps, 'token'>;
+export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
+    breakpoints?: Breakpoints;
+};
+/**
+ * 更新Tokens
+ */
+export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
+    rootString: string;
+};
+export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };

package/es/ThemeProvider/ThemeProvider.types.js

@@ -0,0 +1 @@
+export {};

package/es/ThemeProvider/hooks/ThemeContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ThemeProps } from '../ThemeProvider.types';
+declare const ThemeContext: React.Context<ThemeProps>;
+export default ThemeContext;

package/es/ThemeProvider/hooks/ThemeContext.js

@@ -0,0 +1,6 @@
+import React from "react";
+const ThemeContext = React.createContext(null);
+var ThemeContext_default = ThemeContext;
+export {
+  ThemeContext_default as default
+};

package/es/ThemeProvider/hooks/createTheme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProps } from '../ThemeProvider.types';
+export default function createTheme(options: ThemeProps): ThemeProps;

package/es/ThemeProvider/hooks/createTheme.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function createTheme(options) {
+  const _a = options || {}, { locale } = _a, others = __objRest(_a, ["locale"]);
+  const buiTheme = __spreadValues({
+    locale
+  }, others);
+  return buiTheme;
+}
+export {
+  createTheme as default
+};

package/es/ThemeProvider/hooks/index.d.ts

@@ -0,0 +1,4 @@
+import createTheme from './createTheme';
+import ThemeContext from './ThemeContext';
+import useTheme from './useTheme';
+export { createTheme, ThemeContext, useTheme };

package/es/ThemeProvider/hooks/index.js

@@ -0,0 +1,8 @@
+import createTheme from "./createTheme";
+import ThemeContext from "./ThemeContext";
+import useTheme from "./useTheme";
+export {
+  ThemeContext,
+  createTheme,
+  useTheme
+};

package/es/ThemeProvider/hooks/useTheme.d.ts

@@ -0,0 +1 @@
+export default function useTheme(defaultTheme?: import("../ThemeProvider.types").ThemeProps): import("../ThemeProvider.types").ThemeProps;

package/es/ThemeProvider/hooks/useTheme.js

@@ -0,0 +1,10 @@
+import React from "react";
+import createTheme from "./createTheme";
+import ThemeContext from "./ThemeContext";
+function useTheme(defaultTheme = createTheme(null)) {
+  const contextTheme = React.useContext(ThemeContext);
+  return !contextTheme || Object.keys(contextTheme).length === 0 ? defaultTheme : contextTheme;
+}
+export {
+  useTheme as default
+};

package/es/ThemeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as ThemeProvider } from './ThemeProvider';
+export * from './hooks';
+export * from './utils';
+export * from './ThemeProvider.types';

package/es/ThemeProvider/index.js

@@ -0,0 +1,8 @@
+import { default as default2, default as default3 } from "./ThemeProvider";
+export * from "./hooks";
+export * from "./utils";
+export * from "./ThemeProvider.types";
+export {
+  default3 as ThemeProvider,
+  default2 as default
+};

package/es/ThemeProvider/utils/constants.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 响应式屏幕断点
+ */
+export declare const breakpoints: {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     */
+    xs: string;
+    /**
+     * 小屏幕 (≥ 576px)
+     */
+    sm: string;
+    /**
+     * 中等屏幕 (≥ 768px)
+     */
+    md: string;
+    /**
+     * 大屏幕 (≥ 992px)
+     */
+    lg: string;
+    /**
+     * 超大屏幕 (≥ 1200px)
+     */
+    xl: string;
+};
+/**
+ * 根节点选择器，用于挂载全局Tokens
+ */
+export declare const rootSelector: {
+    defaultLight: string[];
+    defaultDark: string[];
+    dmLight: string[];
+    dmDark: string[];
+};
+/**
+ * BUI css变量前缀
+ */
+export declare const BUI_VAR_PREFIX = "bui-var-";

package/es/ThemeProvider/utils/constants.js

@@ -0,0 +1,40 @@
+const breakpoints = {
+  /**
+   * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+   */
+  xs: "575.98px",
+  /**
+   * 小屏幕 (≥ 576px)
+   */
+  sm: "576px",
+  /**
+   * 中等屏幕 (≥ 768px)
+   */
+  md: "768px",
+  /**
+   * 大屏幕 (≥ 992px)
+   */
+  lg: "992px",
+  /**
+   * 超大屏幕 (≥ 1200px)
+   */
+  xl: "1200px"
+};
+const rootSelector = {
+  defaultLight: [
+    ":root",
+    "page",
+    "xhs-page",
+    ".bui-default-light",
+    '[data-color-mode="light"][data-theme="default"]'
+  ],
+  defaultDark: [".bui-dark", '[data-color-mode="dark"][data-theme="default"]'],
+  dmLight: [".bui-dm-light", '[data-color-mode="light"][data-theme="dm"]'],
+  dmDark: [".bui-dm-dark", '[data-color-mode="dark"][data-theme="dm"]']
+};
+const BUI_VAR_PREFIX = "bui-var-";
+export {
+  BUI_VAR_PREFIX,
+  breakpoints,
+  rootSelector
+};

package/es/ThemeProvider/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './mountTokens';

package/es/ThemeProvider/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./constants";
+export * from "./mountTokens";

package/es/ThemeProvider/utils/mountTokens.d.ts

@@ -0,0 +1,26 @@
+import { ThemeProps, MountResponsiveTokenOptions, BuiltInThemesTokenOptions } from '../ThemeProvider.types';
+/**
+ * 挂载响应式自定义Tokens
+ * 响应式相关的Tokens挂载在全局根节点上，暗黑模式或大麦高亮主题下可自定义额外Toekns复写响应式Tokens
+ */
+export declare const mountResponsiveTokens: (options: MountResponsiveTokenOptions) => void;
+/**
+ * 复写内置主题Tokens，复写的自定义token应为对应主题css变量的子集
+ * BUI内置主题包括以下4种：
+ * 1. 默认高亮模式（defaultLightToken 复写 default-light.less）
+ * 2. 默认暗黑模式（defaultDarkToken 复写 default-dark.less）
+ * 3. 大麦高亮模式（dmLightToken 复写 dm-light.less）
+ * 4. 大麦暗黑模式（dmDarkToken 复写 dm-dark.less）
+ */
+export declare const overrideBuiltInThemes: (tokenOptions: BuiltInThemesTokenOptions) => void;
+/**
+ * 挂载Design Tokens
+ * Tokens的优先级：
+ * 1. 通常情况：组件的Tokens > 响应式Tokens > BUI内置Tokens（挂载顺序控制）
+ * 2. 暗黑模式：组件的Tokens > BUI内置的两种暗黑模式Tokens > 响应式Tokens (选择器权重控制)
+ *
+ * - 挂载顺序决定BUI内置Tokens（暗黑模式除外）和响应式Tokens的优先级
+ * - 选择器权重决定暗黑模式的Tokens和响应式Tokens的优先级
+ * - 命名规则决定组件的Tokens（如：--bui-button-xxx）
+ */
+export declare const mountTokens: (tokenOptions?: ThemeProps) => void;

package/es/ThemeProvider/utils/mountTokens.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { isMini } from "@bifrostui/utils";
+import { breakpoints as defaultBreakpoints, rootSelector } from "./constants";
+const updateTokens = (options) => {
+  const { isRoot, rootString, container, containerId } = options || {};
+  if (isMini)
+    return;
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(rootString));
+  let containerNode;
+  if (isRoot) {
+    containerNode = document.head;
+  } else if (containerId && container && React.isValidElement(container)) {
+    containerNode = document.querySelector(`.${containerId}`);
+  }
+  if (containerNode) {
+    containerNode.appendChild(style);
+  }
+};
+const mountResponsiveTokens = (options) => {
+  const { responsive, breakpoints = defaultBreakpoints } = options || {};
+  if (!responsive)
+    return;
+  const modeSelector = rootSelector.defaultLight;
+  let rootString = `${modeSelector.join(",")} { `;
+  Object.entries(responsive).forEach((config) => {
+    const [size, tokenConfig] = config || [];
+    if (!size || !tokenConfig)
+      return;
+    const cssVariablesString = Object.entries(tokenConfig || {}).reduce(
+      (acc, [key, value]) => {
+        return `${acc} ${key}: ${value};`;
+      },
+      ""
+    );
+    const mediaQuery = size === "xs" ? "max-width" : "min-width";
+    rootString += `@media (${mediaQuery}: ${breakpoints[size]}) { ${cssVariablesString} }`;
+  });
+  rootString = `${rootString} }`;
+  updateTokens({ isRoot: true, rootString });
+};
+const overrideBuiltInThemes = (tokenOptions) => {
+  if (!tokenOptions)
+    return;
+  Object.keys(rootSelector).forEach((selectorKey) => {
+    const modeSelector = rootSelector[selectorKey];
+    const token = tokenOptions[`${selectorKey}Token`];
+    if (token) {
+      let rootString = `${modeSelector.join(",")} { `;
+      const cssVariablesString = Object.entries(token).reduce(
+        (acc, [key, value]) => {
+          return `${acc} ${key}: ${value};`;
+        },
+        ""
+      );
+      rootString = `${rootString} ${cssVariablesString} }`;
+      updateTokens({ isRoot: true, rootString });
+    }
+  });
+};
+const mountComponentsTokens = (options) => {
+  const { isRoot = false, token, container, containerId } = options || {};
+  if (!token)
+    return;
+  const modeSelector = isRoot ? rootSelector.defaultLight : [`.${containerId}`];
+  let rootString = `${modeSelector.join(",")} { `;
+  const cssVariablesString = Object.entries(token).reduce(
+    (acc, [key, value]) => {
+      return `${acc} ${key}: ${value};`;
+    },
+    ""
+  );
+  rootString = `${rootString} ${cssVariablesString} }`;
+  updateTokens({ isRoot, rootString, container, containerId });
+};
+const mountTokens = (tokenOptions) => {
+  if (isMini)
+    return;
+  overrideBuiltInThemes(tokenOptions);
+  mountResponsiveTokens(tokenOptions);
+  mountComponentsTokens(tokenOptions);
+};
+export {
+  mountResponsiveTokens,
+  mountTokens,
+  overrideBuiltInThemes
+};