@digitalc/dxp-ui 0.0.1

package/es/tokens/DXPGlobal.d.ts

@@ -0,0 +1,240 @@
+declare const dxpToken: {
+    borderRadiusLg: number;
+    borderRadiusMd: number;
+    borderRadiusSm: number;
+    borderRadiusXl: number;
+    borderUpload: string;
+    borderWidthCta: number;
+    borderWidthHover: number;
+    borderWidthSelected: number;
+    borderWidthStandard: number;
+    borderWidthStrikeout: number;
+    colorBackgroundActive: string;
+    colorBackgroundActiveInverse: string;
+    colorBackgroundActiveWeak: string;
+    colorBackgroundActiveWeakInverse: string;
+    colorBackgroundCoachmark: string;
+    colorBackgroundCta: string;
+    colorBackgroundCtaInverse: string;
+    colorBackgroundCtaInversePressed: string;
+    colorBackgroundCtaPressed: string;
+    colorBackgroundCtaSuccess: string;
+    colorBackgroundDark: string;
+    colorBackgroundDark2: string;
+    colorBackgroundDisabled: string;
+    colorBackgroundFooter: string;
+    colorBackgroundHeader: string;
+    colorBackgroundHover: string;
+    colorBackgroundHoverNeutral: string;
+    colorBackgroundOverlay: string;
+    colorBackgroundOverlayLight: string;
+    colorBackgroundSelected: string;
+    colorBackgroundStandard: string;
+    colorBackgroundSubtle: string;
+    colorBackgroundSubtle2: string;
+    colorBackgroundWeak: string;
+    colorBorderActive: string;
+    colorBorderActiveInverse: string;
+    colorBorderBenchmark: string;
+    colorBorderBenchmarkInverse: string;
+    colorBorderCta: string;
+    colorBorderCtaInverse: string;
+    colorBorderDisabled: string;
+    colorBorderError: string;
+    colorBorderSelected: string;
+    colorBorderStandard: string;
+    colorBorderStrikeout: string;
+    colorBorderStrikeoutInverse: string;
+    colorBorderStrong: string;
+    colorBorderWeak: string;
+    colorBorderWeakInverse: string;
+    colorDivider: string;
+    colorGradientNeutral: string;
+    colorGraph1: string;
+    colorGraph2: string;
+    colorGraph3: string;
+    colorGraph4: string;
+    colorGraph5: string;
+    colorGraph6: string;
+    colorGraph7: string;
+    colorGraph8: string;
+    colorGraph9: string;
+    colorGraph10: string;
+    colorGraph11: string;
+    colorGraph12: string;
+    colorIconActive: string;
+    colorIconAlert: string;
+    colorIconAlertInverse: string;
+    colorIconBottomNavigationActive: string;
+    colorIconBottomNavigationInactive: string;
+    colorIconCta: string;
+    colorIconCtaInverse: string;
+    colorIconDisabled: string;
+    colorIconInactive: string;
+    colorIconInverse: string;
+    colorIconLink: string;
+    colorIconLinkInverse: string;
+    colorIconLoader: string;
+    colorIconLocationPin: string;
+    colorIconLocationPinActive: string;
+    colorIconNeutral: string;
+    colorIconNotice: string;
+    colorIconPending: string;
+    colorIconRating: string;
+    colorIconSubtle: string;
+    colorIconSubtleInverse: string;
+    colorIconSuccess: string;
+    colorIconWeak: string;
+    colorNotificationAlert: string;
+    colorNotificationDefault: string;
+    colorNotificationPromo: string;
+    colorRewards1: string;
+    colorRewards2: string;
+    colorRewards3: string;
+    colorRibbonPrimary: string;
+    colorRibbonPrimary2: string;
+    colorRibbonPrimary3: string;
+    colorRibbonPrimaryDark: string;
+    colorRibbonSecondary: string;
+    colorRibbonSecondary2: string;
+    colorRibbonSecondaryDark: string;
+    colorTagPrimary: string;
+    colorTagSecondary: string;
+    colorTextAlert: string;
+    colorTextCoachmark: string;
+    colorTextCta: string;
+    colorTextCtaInverse: string;
+    colorTextDisabled: string;
+    colorTextHeaderActive: string;
+    colorTextHeaderActiveInverse: string;
+    colorTextHeaderHighlight: string;
+    colorTextHeaderHighlightInverse: string;
+    colorTextInverse: string;
+    colorTextLabel: string;
+    colorTextLink: string;
+    colorTextLinkInverse: string;
+    colorTextNavigationActive: string;
+    colorTextNeutral: string;
+    colorTextStrikethrough: string;
+    colorTextSubtle: string;
+    colorTextSubtleInverse: string;
+    colorTextSuccess: string;
+    colorToggleActiveStrong: string;
+    colorToggleActiveWeak: string;
+    colorToggleInactiveStrong: string;
+    colorToggleInactiveWeak: string;
+    colorToggleIndicator: string;
+    opacityDisabled: number;
+    opacityHover: number;
+    opacityOverlay: number;
+    opacityPressed: number;
+    opacitySubtle: number;
+    shadowHigh: {
+        elevation: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+    };
+    shadowHighInverse: {
+        elevation: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+    };
+    shadowLow: {
+        elevation: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+    };
+    sizingBullet: number;
+    sizingBulletSm: number;
+    sizingCirclePatternLg: number;
+    sizingCirclePatternMd: number;
+    sizingCirclePatternSm: number;
+    sizingCirclePatternXs: number;
+    sizingColorList: number;
+    sizingFileInput: number;
+    sizingFileInputLg: number;
+    sizingIconGeneralLg: number;
+    sizingIconGeneralMd: number;
+    sizingIconGeneralSm: number;
+    sizingIconGeneralXl: number;
+    sizingIconGeneralXs: number;
+    sizingIconGeneralXs2: number;
+    sizingIconSpotLg: number;
+    sizingIconSpotMd: number;
+    sizingIconSpotSm: number;
+    sizingIconSpotXl: number;
+    sizingIconSpotXs: number;
+    sizingIconSpotXxl: number;
+    sizingIconUtilityLg: number;
+    sizingIconUtilityMd: number;
+    sizingIconUtilitySm: number;
+    sizingIconUtilityXs: number;
+    sizingIconUtilityXs2: number;
+    sizingIconUtilityXxs: number;
+    sizingImageLg: number;
+    sizingImageMd: number;
+    sizingImageSm: number;
+    sizingImageXl: number;
+    sizingImageXs: number;
+    sizingImageXxl: number;
+    sizingImageXxs: number;
+    sizingTagLg: number;
+    sizingTagMd: number;
+    sizingTagSm: number;
+    sizingTextBoxLg: number;
+    sizingTextBoxMd: number;
+    sizingTextBoxSm: number;
+    sizingTextBoxXs: number;
+    sizingTextBoxXxs: number;
+    sizingVoucherMd: number;
+    sizingVoucherSm: number;
+    spacingBulletMd: number;
+    spacingBulletSm: number;
+    spacingBulletXs: number;
+    spacingGapLg: number;
+    spacingGapMd: number;
+    spacingGapSm: number;
+    spacingGapSm2: number;
+    spacingGapXl: number;
+    spacingGapXs: number;
+    spacingGapXxl: number;
+    spacingGapXxxl: number;
+    spacingIconLg: number;
+    spacingIconMd: number;
+    spacingIconSm: number;
+    spacingIconXs: number;
+    spacingIconXxs: number;
+    spacingImageLg: number;
+    spacingImageMd: number;
+    spacingImageSm: number;
+    spacingImageXs: number;
+    spacingInputMd: number;
+    spacingInputMd2: number;
+    spacingInputMd3: number;
+    spacingInputSm: number;
+    spacingInputSm2: number;
+    spacingInputSm3: number;
+    spacingInputXs: number;
+    spacingTextLg: number;
+    spacingTextMd: number;
+    spacingTextSm: number;
+    spacingTextXl: number;
+    spacingTextXs: number;
+    spacingTextXxl: number;
+};
+export default dxpToken;

package/es/tokens/DXPGlobal.js

@@ -0,0 +1,5 @@
+//  DXPGlobal.ts 是 dxp UI 的全局 主题 变量
+
+import local_dxpGlobaltoken from "../assets/token.json";
+var dxpToken = local_dxpGlobaltoken;
+export default dxpToken;

package/es/utils/noop.d.ts

@@ -0,0 +1 @@
+export declare function noop(): void;

package/es/utils/noop.js

@@ -0,0 +1 @@
+export function noop() {}

package/es/utils/themeContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ThemeStyle = 'default' | 'colorful';
+export interface ThemeContextType {
+    style: ThemeStyle;
+    setStyle: (style: ThemeStyle) => void;
+}
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+    defaultStyle?: ThemeStyle;
+}>;
+export declare const useTheme: () => ThemeContextType;

package/es/utils/themeContext.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { createContext, useContext, useEffect } from 'react';
+
+// 主题类型定义
+
+// 创建 Context
+var ThemeContext = /*#__PURE__*/createContext({
+  style: 'default',
+  setStyle: function setStyle() {}
+});
+export var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultStyle = _ref.defaultStyle,
+    defaultStyle = _ref$defaultStyle === void 0 ? 'default' : _ref$defaultStyle;
+  var _React$useState = React.useState(defaultStyle),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    style = _React$useState2[0],
+    setStyle = _React$useState2[1];
+
+  // 应用主题样式
+  useEffect(function () {
+    document.documentElement.setAttribute('data-theme-style', style);
+  }, [style]);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      style: style,
+      setStyle: setStyle
+    }
+  }, children);
+};
+
+// Hook for using theme
+export var useTheme = function useTheme() {
+  var context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/es/utils/tokenHelper.d.ts

@@ -0,0 +1 @@
+export declare const getToken: (tokenName: string) => any;

package/es/utils/tokenHelper.js

@@ -0,0 +1,4 @@
+import TokenManager from "./tokenManager";
+export var getToken = function getToken(tokenName) {
+  return TokenManager.tokenKey(tokenName);
+};