@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/es/utils/theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@ant-design/cssinjs';
+type DesignToken = {
+    primaryColor: string;
+    fontSize: number;
+};
+type DerivativeToken = {
+    buttonColor: string;
+    buttonFontSize: number;
+};
+export declare const theme: Theme<DesignToken, DerivativeToken>;
+export {};

package/es/utils/theme.js

@@ -0,0 +1,15 @@
+import { Theme } from '@ant-design/cssinjs';
+// 定义设计令牌类型
+
+// 定义派生令牌类型
+
+// 定义派生函数
+var derivativeFunc = function derivativeFunc(token) {
+  return {
+    buttonColor: token.primaryColor,
+    buttonFontSize: token.fontSize * 1.2
+  };
+};
+
+// 创建主题
+export var theme = new Theme(derivativeFunc);

package/es/utils/themeContext.d.ts

@@ -1,11 +1,44 @@
 import React from 'react';
 export type ThemeStyle = 'default' | 'colorful';
+export interface AntdCompatibleThemeConfig {
+    token?: Record<string, any>;
+    components?: Record<string, any>;
+    override?: {
+        override?: Record<string, any>;
+        [key: string]: any;
+    };
+    cssVar?: {
+        prefix?: string;
+        key?: string;
+    };
+    [key: string]: any;
+}
 export interface ThemeContextType {
     style: ThemeStyle;
     setStyle: (style: ThemeStyle) => void;
+    theme?: AntdCompatibleThemeConfig;
+    token?: Record<string, any>;
+    components?: Record<string, any>;
+    override?: {
+        override?: Record<string, any>;
+        [key: string]: any;
+    };
+    cssVar?: boolean | {
+        prefix?: string | undefined;
+        key?: string | undefined;
+    } | undefined;
 }
-export declare const ThemeProvider: React.FC<{
+export interface ThemeProviderProps {
     children: React.ReactNode;
     defaultStyle?: ThemeStyle;
-}>;
+    theme?: AntdCompatibleThemeConfig;
+    token?: Record<string, any>;
+    components?: Record<string, any>;
+    override?: {
+        override?: Record<string, any>;
+        [key: string]: any;
+    };
+    cssVar?: Record<string, any> | boolean;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export declare const useTheme: () => ThemeContextType;

package/es/utils/themeContext.js

@@ -1,8 +1,13 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "defaultStyle", "theme", "token", "components", "override", "cssVar"];
 import React, { createContext, useContext, useEffect } from 'react';
 
 // 主题类型定义
 
+// 与antd的ThemeConfig接口兼容的类型定义
+import { jsx as _jsx } from "react/jsx-runtime";
 // 创建 Context
 var ThemeContext = /*#__PURE__*/createContext({
   style: 'default',
@@ -11,7 +16,13 @@ var ThemeContext = /*#__PURE__*/createContext({
 export var ThemeProvider = function ThemeProvider(_ref) {
   var children = _ref.children,
     _ref$defaultStyle = _ref.defaultStyle,
-    defaultStyle = _ref$defaultStyle === void 0 ? 'default' : _ref$defaultStyle;
+    defaultStyle = _ref$defaultStyle === void 0 ? 'default' : _ref$defaultStyle,
+    theme = _ref.theme,
+    token = _ref.token,
+    components = _ref.components,
+    override = _ref.override,
+    cssVar = _ref.cssVar,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(defaultStyle),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     style = _React$useState2[0],
@@ -21,12 +32,22 @@ export var ThemeProvider = function ThemeProvider(_ref) {
   useEffect(function () {
     document.documentElement.setAttribute('data-theme-style', style);
   }, [style]);
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: {
+
+  // 合并主题配置
+  var themeConfig = _objectSpread(_objectSpread({}, rest), {}, {
+    theme: theme,
+    token: token,
+    components: components,
+    override: override,
+    cssVar: cssVar
+  });
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: _objectSpread({
       style: style,
       setStyle: setStyle
-    }
-  }, children);
+    }, themeConfig),
+    children: children
+  });
 };
 
 // Hook for using theme
@@ -36,5 +57,4 @@ export var useTheme = function useTheme() {
     throw new Error('useTheme must be used within a ThemeProvider');
   }
   return context;
-};
-//# sourceMappingURL=themeContext.js.map
+};

package/es/utils/tokenHelper.js

@@ -4,5 +4,4 @@ export var getToken = function getToken(tokenName) {
 };
 // export const getDesignToken = (tokenName: string) => {
 //   return TokenManager.designTokenKey(tokenName);
-// };
-//# sourceMappingURL=tokenHelper.js.map
+// };

package/es/utils/tokenManager.d.ts

@@ -8,12 +8,55 @@ interface ShadowStyle {
     shadowOpacity: number;
     shadowRadius: number;
 }
-type TokenValue = string | number | ShadowStyle | undefined;
+type TokenValue = string | number | boolean | ShadowStyle | undefined;
 interface TokenRef {
     root: Record<string, TokenValue> | null;
     [key: string]: TokenValue | Record<string, TokenValue> | null;
 }
 export declare const getComponentToken: () => {
+    spacinginputpaddingVerticalM: number;
+    fontSizeDesktopTitleT23: TokenValue;
+    fontSizeDesktopContentC15: TokenValue;
+    fontSizeDesktopContentC21: TokenValue;
+    fontSizeDesktopTitleT21: TokenValue;
+    fontSizeDesktopTitleT15: TokenValue;
+    fontSizeDesktopContentC13: TokenValue;
+    fontSizeDesktopContentC11: TokenValue;
+    fontSizeDesktopContentC12: TokenValue;
+    fontSizeDesktopContentC14: TokenValue;
+    fontSizeDesktopTitleT1: TokenValue;
+    fontSizeDesktopTitleT32: TokenValue;
+    fontSizeDesktopTitleT41: TokenValue;
+    fontSizeDesktopContentC05: TokenValue;
+    fontSizeDesktopContentC04: TokenValue;
+    fontSizeDesktopTitleT7: TokenValue;
+    fontSizeDesktopTitleT8: TokenValue;
+    fontSizeDesktopTitleT2: TokenValue;
+    fontSizeDesktopTitleT5: TokenValue;
+    fontSizeDesktopTitleT3: TokenValue;
+    fontSizeDesktopTitleT4: TokenValue;
+    fontSizeDesktopTitleT10: TokenValue;
+    fontSizeMobileContentC04: TokenValue;
+    fontSizeMobileContentC05: TokenValue;
+    fontSizeMobileContentC11: TokenValue;
+    fontSizeMobileContentC12: TokenValue;
+    fontSizeMobileContentC13: TokenValue;
+    fontSizeMobileContentC14: TokenValue;
+    fontSizeMobileContentC15: TokenValue;
+    fontSizeMobileContentC21: TokenValue;
+    fontSizeMobileTitleT12: TokenValue;
+    fontSizeMobileTitleT13: TokenValue;
+    fontSizeMobileTitleT14: TokenValue;
+    fontSizeMobileTitleT15: TokenValue;
+    fontSizeMobileTitleT21: TokenValue;
+    fontSizeMobileTitleT23: TokenValue;
+    fontSizeMobileTitleT24: TokenValue;
+    fontSizeMobileTitleT25: TokenValue;
+    fontSizeMobileTitleT32: TokenValue;
+    fontSizeMobileTitleT34: TokenValue;
+    fontSizeMobileTitleT41: TokenValue;
+    fontSizeMobileTitleT45: TokenValue;
+    fontSizeMobileNavigation: TokenValue;
     sizingVoucherImage: TokenValue;
     sizingVoucherImageLg: TokenValue;
     sizingVoucherHeight: TokenValue;
@@ -405,6 +448,7 @@ export declare const getComponentToken: () => {
     colorButtonBackgroundPrimaryInversePressed: TokenValue;
     colorButtonBackgroundSuccess: TokenValue;
     colorStickyFooterText: TokenValue;
+    colorStickyFooterText2: TokenValue;
     colorStickyFooterPrice: TokenValue;
     colorStickyFooterPriceStrikethrough: TokenValue;
     colorStickyFooterBorderTop: TokenValue;
@@ -532,6 +576,9 @@ export declare const getComponentToken: () => {
     colorStepperBorderActive: TokenValue;
     colorStepperConnectorSuccess: TokenValue;
     colorStepperConnectorInactive: TokenValue;
+    colorStepperTextNeutral: TokenValue;
+    colorStepperTextLabel2: TokenValue;
+    colorStepperBackgroundActiveWeak: TokenValue;
     colorPaginationText: TokenValue;
     colorPaginationIcon: TokenValue;
     colorPaginationBackgroundHover: TokenValue;
@@ -541,6 +588,7 @@ export declare const getComponentToken: () => {
     colorTopNavigationGradient: TokenValue;
     colorTopNavigationBackground: TokenValue;
     colorTopNavigationBackgroundHaze: TokenValue;
+    colorTopNavigationBackgroundInverse: TokenValue;
     colorTopNavigationBorderBottom: TokenValue;
     colorBottomNavigationTextActive: TokenValue;
     colorBottomNavigationTextInactive: TokenValue;
@@ -733,13 +781,62 @@ export declare const getComponentToken: () => {
     opacityButtonPressed: TokenValue;
     colorButtonBackgroundPrimaryDisable: TokenValue;
     colorButtonTextDisable: TokenValue;
+    fontFamilyPromaryBold: TokenValue;
+    fontFamilyPromaryRegular: TokenValue;
+    fontFamilyPromarySemiBold: TokenValue;
+    fontFamilySecondaryBold: TokenValue;
+    fontFamilySecondaryRegular: TokenValue;
+    fontFamilySecondarySemiBold: TokenValue;
 };
 declare const TokenManager: {
     tokenRef: TokenRef;
     tokenKey: (key: string) => any;
-    designTokenKey: (key: string) => string | number | ShadowStyle;
+    designTokenKey: (key: string | number) => string | number | true | ShadowStyle;
     setTokenRef: (value: Record<string, TokenValue>) => void;
     getComponentToken: () => {
+        spacinginputpaddingVerticalM: number;
+        fontSizeDesktopTitleT23: TokenValue;
+        fontSizeDesktopContentC15: TokenValue;
+        fontSizeDesktopContentC21: TokenValue;
+        fontSizeDesktopTitleT21: TokenValue;
+        fontSizeDesktopTitleT15: TokenValue;
+        fontSizeDesktopContentC13: TokenValue;
+        fontSizeDesktopContentC11: TokenValue;
+        fontSizeDesktopContentC12: TokenValue;
+        fontSizeDesktopContentC14: TokenValue;
+        fontSizeDesktopTitleT1: TokenValue;
+        fontSizeDesktopTitleT32: TokenValue;
+        fontSizeDesktopTitleT41: TokenValue;
+        fontSizeDesktopContentC05: TokenValue;
+        fontSizeDesktopContentC04: TokenValue;
+        fontSizeDesktopTitleT7: TokenValue;
+        fontSizeDesktopTitleT8: TokenValue;
+        fontSizeDesktopTitleT2: TokenValue;
+        fontSizeDesktopTitleT5: TokenValue;
+        fontSizeDesktopTitleT3: TokenValue;
+        fontSizeDesktopTitleT4: TokenValue;
+        fontSizeDesktopTitleT10: TokenValue;
+        fontSizeMobileContentC04: TokenValue;
+        fontSizeMobileContentC05: TokenValue;
+        fontSizeMobileContentC11: TokenValue;
+        fontSizeMobileContentC12: TokenValue;
+        fontSizeMobileContentC13: TokenValue;
+        fontSizeMobileContentC14: TokenValue;
+        fontSizeMobileContentC15: TokenValue;
+        fontSizeMobileContentC21: TokenValue;
+        fontSizeMobileTitleT12: TokenValue;
+        fontSizeMobileTitleT13: TokenValue;
+        fontSizeMobileTitleT14: TokenValue;
+        fontSizeMobileTitleT15: TokenValue;
+        fontSizeMobileTitleT21: TokenValue;
+        fontSizeMobileTitleT23: TokenValue;
+        fontSizeMobileTitleT24: TokenValue;
+        fontSizeMobileTitleT25: TokenValue;
+        fontSizeMobileTitleT32: TokenValue;
+        fontSizeMobileTitleT34: TokenValue;
+        fontSizeMobileTitleT41: TokenValue;
+        fontSizeMobileTitleT45: TokenValue;
+        fontSizeMobileNavigation: TokenValue;
         sizingVoucherImage: TokenValue;
         sizingVoucherImageLg: TokenValue;
         sizingVoucherHeight: TokenValue;
@@ -1131,6 +1228,7 @@ declare const TokenManager: {
         colorButtonBackgroundPrimaryInversePressed: TokenValue;
         colorButtonBackgroundSuccess: TokenValue;
         colorStickyFooterText: TokenValue;
+        colorStickyFooterText2: TokenValue;
         colorStickyFooterPrice: TokenValue;
         colorStickyFooterPriceStrikethrough: TokenValue;
         colorStickyFooterBorderTop: TokenValue;
@@ -1258,6 +1356,9 @@ declare const TokenManager: {
         colorStepperBorderActive: TokenValue;
         colorStepperConnectorSuccess: TokenValue;
         colorStepperConnectorInactive: TokenValue;
+        colorStepperTextNeutral: TokenValue;
+        colorStepperTextLabel2: TokenValue;
+        colorStepperBackgroundActiveWeak: TokenValue;
         colorPaginationText: TokenValue;
         colorPaginationIcon: TokenValue;
         colorPaginationBackgroundHover: TokenValue;
@@ -1267,6 +1368,7 @@ declare const TokenManager: {
         colorTopNavigationGradient: TokenValue;
         colorTopNavigationBackground: TokenValue;
         colorTopNavigationBackgroundHaze: TokenValue;
+        colorTopNavigationBackgroundInverse: TokenValue;
         colorTopNavigationBorderBottom: TokenValue;
         colorBottomNavigationTextActive: TokenValue;
         colorBottomNavigationTextInactive: TokenValue;
@@ -1459,6 +1561,12 @@ declare const TokenManager: {
         opacityButtonPressed: TokenValue;
         colorButtonBackgroundPrimaryDisable: TokenValue;
         colorButtonTextDisable: TokenValue;
+        fontFamilyPromaryBold: TokenValue;
+        fontFamilyPromaryRegular: TokenValue;
+        fontFamilyPromarySemiBold: TokenValue;
+        fontFamilySecondaryBold: TokenValue;
+        fontFamilySecondaryRegular: TokenValue;
+        fontFamilySecondarySemiBold: TokenValue;
     };
 };
 export default TokenManager;