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

package/es/components/Stepper/style/index.less

@@ -0,0 +1,140 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: stepper;
+
+// 使用字符串拼接
+.@{prefix}-@{components} {
+  display: flex;
+  width: 100%;
+  font-size:0;
+  text-align: initial;
+  min-width: 128px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  // 定义中间变量来存储动态生成的 CSS 变量名
+  @progress-default-color: ~"--@{prefix}-@{components}-progress-default-color";
+  @progress-border-width: ~"--@{prefix}-@{components}-progress-border-width";
+  @progress-border-connector: ~"--@{prefix}-@{components}-progress-border-connector";
+
+  @finish-icon-bg-color: ~"--@{prefix}-@{components}-finish-icon-bg-color";
+  @finish-icon-border-color: ~"--@{prefix}-@{components}-finish-icon-border-color";
+  @finish-icon-success: ~"--@{prefix}-@{components}-finish-icon-success";
+  @finish-line-color: ~"--@{prefix}-@{components}-finish-line-color";
+
+  @wait-icon-bg-color: ~"--@{prefix}-@{components}-wait-icon-bg-color";
+  @wait-icon-border-color: ~"--@{prefix}-@{components}-wait-icon-border-color";
+  @wait-icon-color: ~"--@{prefix}-@{components}-wait-icon-success";
+
+
+
+  //  当前高亮步骤的圈的颜色
+  .ant-progress-inner:not(.ant-progress-circle-gradient) .ant-progress-circle-path,
+  .dxp-progress-inner:not(.dxp-progress-circle-gradient) .dxp-progress-circle-path {
+    // stroke-width: calc(var(@progress-border-width) * 2);
+    stroke: var(@progress-default-color) !important;
+  }
+
+  .dxp-stepper-item-finish>.dxp-stepper-item-container>.dxp-stepper-item-content>.dxp-stepper-item-title::after {
+    height: calc(var(@progress-border-connector) * 1px); // 使用 calc() 函数结合单位
+  }
+
+  //  当前已完成步骤的背景颜色
+  .dxp-stepper-item-finish .dxp-stepper-item-icon {
+    background-color: var(@finish-icon-bg-color);
+    border-color: var(@finish-icon-border-color);
+
+    .anticon {
+      color: var(@finish-icon-success);
+    }
+  }
+
+  //  当前已完成步骤的进度条颜色
+  .dxp-stepper-item-finish>.dxp-stepper-item-container>.dxp-stepper-item-content>.dxp-stepper-item-title::after {
+    border-color: var(@finish-line-color);
+    background-color: var(@finish-line-color);
+  }
+
+  .dxp-stepper-item-wait .dxp-stepper-item-icon {
+    background-color: var(@wait-icon-bg-color);
+    border-color: var(@wait-icon-border-color);
+
+    .dxp-stepper-icon {
+      color: var(@wait-icon-color);
+    }
+  }
+
+  &.dxp-stepper-with-progress.dxp-stepper-small .dxp-stepper-item-icon .dxp-progress-inner {
+    width: calc(var(--dxp-steps-icon-size-sm) + calc(var(--dxp-line-width) * 5)) !important;
+    height: calc(var(--dxp-steps-icon-size-sm) + calc(var(--dxp-line-width) * 5)) !important;
+  }
+
+}
+
+ // moblie
+ @dxp-steps-color-neutral: ~"--dxp-steps-color-neutral";
+ @dxp-steps-color-secondary: ~"--dxp-steps-color-secondary";
+ @dxp-steps-color-label2: ~"--dxp-steps-color-label2";
+ @dxp-steps-background-active: ~"--dxp-steps-background-active";
+ @dxp-steps-background-activeWeak: ~"--dxp-steps-background-activeWeak";
+
+
+@stepper-prefix-cls: stepper;
+
+.@{prefix}-@{stepper-prefix-cls} {
+  font-size:0;
+  &-description {
+    margin-top: 4px;
+  }
+
+  // mobile
+  &-m {
+    width: 100%;
+    padding: 16px 0;
+
+    &-header {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      .@{prefix}-@{stepper-prefix-cls}-bg{
+        background-color: var(@dxp-steps-background-active);
+      }
+      .@{prefix}-@{stepper-prefix-cls}-inner{
+        background-color: var(@dxp-steps-background-activeWeak);
+      }
+    }
+
+    &-count {
+      display: flex;
+      align-items: baseline;
+      gap: 2px;
+    }
+
+    &-neutral {
+      color: var(@dxp-steps-color-neutral);
+    }
+
+    &-secondary {
+      color: var(@dxp-steps-color-secondary);
+    }
+
+    &-title {
+      color: var(@dxp-steps-color-neutral);
+      margin-top: 0;
+      font-weight: 500;
+    }
+
+    &-next {
+      color: var(@dxp-steps-color-label2);
+      margin-top:0;
+      color: #858585;
+    }
+
+    .ant-progress,
+    .ant5-progress,
+    .dxp-progress {
+      margin: 4px 0;
+    }
+  }
+}

package/es/components/Stepper/style/variables.less

@@ -0,0 +1,5 @@
+
+@import '../../../style/variables.less';
+
+// Primary
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/StickyFooter/designTokens.d.ts

@@ -0,0 +1,10 @@
+declare const designTokens: {
+    padding: string;
+    borderTop: string;
+    backgroundColor: any;
+    priceColor: any;
+    textColor: any;
+    textDiscontColor: any;
+    colorStrikethrough: any;
+};
+export { designTokens };

package/es/components/StickyFooter/designTokens.js

@@ -0,0 +1,17 @@
+import { getToken } from "../../utils/tokenHelper";
+var designTokens = {
+  padding: "".concat(getToken('spacingStickyFooterPaddingTop'), "px ").concat(getToken('spacingStickyFooterPaddingHorizontal'), "px ").concat(getToken('spacingStickyFooterPaddingBottom'), "px"),
+  // 间距
+  borderTop: "1px solid ".concat(getToken('colorStickyFooterBorderTop')),
+  // 边框
+  backgroundColor: getToken('colorStickyFooterBackground'),
+  // 背景颜色
+  priceColor: getToken('colorStickyFooterPrice'),
+  // 金额颜色
+  textColor: getToken('colorStickyFooterText'),
+  // 文本颜色
+  textDiscontColor: getToken('colorStickyFooterText2'),
+  // 文本颜色
+  colorStrikethrough: getToken('colorStickyFooterPriceStrikethrough') // 划线价颜色
+};
+export { designTokens };

package/es/components/StickyFooter/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './style/index.less';
+export type type = 'default' | 'priceVariant1' | 'priceVariant2';
+export interface StickyFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+    colorPrice?: string;
+    type?: type;
+    priceStrikethrough?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+    onDropDownClick?: React.MouseEventHandler;
+    onRightBtnClick?: React.MouseEventHandler;
+    onBtnClick?: React.MouseEventHandler;
+}
+declare const StickyFooter: (props: StickyFooterProps) => React.JSX.Element;
+export default StickyFooter;

package/es/components/StickyFooter/index.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "colorPrice", "price", "priceStrikethrough", "buttonText", "title", "position", "size", "children", "onDropDownClick", "onRightBtnClick", "onBtnClick", "showIcon", "iconType"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { designTokens } from "./designTokens";
+import { cssClasses } from "../../constants";
+import { Amount, Button } from "../index";
+import "./style/index.less";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var StickyFooter = function StickyFooter(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'default' : _props$type,
+    colorPrice = props.colorPrice,
+    price = props.price,
+    priceStrikethrough = props.priceStrikethrough,
+    _props$buttonText = props.buttonText,
+    buttonText = _props$buttonText === void 0 ? 'Confirm' : _props$buttonText,
+    title = props.title,
+    position = props.position,
+    size = props.size,
+    children = props.children,
+    onDropDownClick = props.onDropDownClick,
+    onRightBtnClick = props.onRightBtnClick,
+    onBtnClick = props.onBtnClick,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
+    iconType = props.iconType,
+    attr = _objectWithoutProperties(props, _excluded);
+  var padding = designTokens.padding,
+    borderTop = designTokens.borderTop,
+    backgroundColor = designTokens.backgroundColor,
+    priceColor = designTokens.priceColor,
+    textColor = designTokens.textColor,
+    textDiscontColor = designTokens.textDiscontColor,
+    colorStrikethrough = designTokens.colorStrikethrough;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {
+        baseColor: 'blue'
+      },
+      path: ["".concat(cssClasses.PREFIX, "-stickyFooter")]
+    }, function () {
+      return "\n      .".concat(cssClasses.PREFIX, "-stickyFooter {\n        padding: ").concat(padding, ";\n        border-top: ").concat(borderTop, ";\n        background-color: ").concat(backgroundColor, ";\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(cssClasses.PREFIX, "-stickyFooter ").concat(cssClasses.PREFIX, "-stickyFooter-").concat(type),
+    onClick: props.onClick
+  }, attr), {}, {
+    children: [type === 'default' && /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        block: true,
+        onClick: onBtnClick,
+        children: buttonText
+      })
+    }), type === 'priceVariant1' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Amount, {
+        priceStrikethrough: priceStrikethrough,
+        priceColor: colorPrice || priceColor,
+        textColor: title === 'discount' ? textDiscontColor : textColor,
+        colorStrikethrough: colorStrikethrough,
+        title: title,
+        position: position,
+        size: size,
+        showIcon: showIcon,
+        onDropDownClick: onDropDownClick,
+        iconType: iconType,
+        children: price
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        onClick: onRightBtnClick,
+        children: buttonText
+      })]
+    }), children]
+  }));
+};
+export default StickyFooter;

package/es/components/StickyFooter/style/index.less

@@ -0,0 +1,18 @@
+
+@import './variables.less';
+@components: stickyFooter;
+.@{prefix}-@{components} {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  box-sizing: border-box;
+  z-index: 9;
+  &.@{prefix}-@{components}-default {
+    justify-content: center;
+  }
+}

package/es/components/StickyFooter/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/Tabs/designTokens.d.ts

@@ -0,0 +1,44 @@
+declare const otherDesignToken: {
+    colorTabsTextSubtitleInverseInactive: any;
+    colorTabsTextSubtitleInactive: any;
+    colorTabsIconInactiveInverse: any;
+    colorTabsIconActiveInverse: any;
+    colorTabsIconInactive: any;
+    colorTabsIconActive: any;
+    colorTabsTextSubtitleInverse: any;
+    colorTabsTextSubtitle: any;
+    sizingTabsIcon: any;
+};
+declare const designTokens: {
+    inkBarColor: any;
+    itemSelectedColor: any;
+    itemHoverColor: any;
+    itemActiveColor: any;
+    itemColor: any;
+    colorBorderSecondary: any;
+    horizontalItemPadding: string;
+    lineWidthBold: any;
+};
+declare const designFillTokens: {
+    inkBarColor: string;
+    itemSelectedColor: string;
+    itemHoverColor: any;
+    itemActiveColor: any;
+    itemColor: any;
+    colorBorderSecondary: string;
+    cardPadding: string;
+    colorFillAlter: string;
+    lineWidth: number;
+    colorBgContainer: string;
+};
+declare const inverseDesignTokens: {
+    inkBarColor: any;
+    itemSelectedColor: any;
+    itemHoverColor: any;
+    itemActiveColor: any;
+    itemColor: any;
+    colorBorderSecondary: any;
+    horizontalItemPadding: string;
+    lineWidthBold: any;
+};
+export { otherDesignToken, designTokens, inverseDesignTokens, designFillTokens };

package/es/components/Tabs/designTokens.js

@@ -0,0 +1,64 @@
+import { getToken } from "../../utils/tokenHelper";
+var otherDesignToken = {
+  colorTabsTextSubtitleInverseInactive: getToken('colorTabsTextSubtitleInverseInactive'),
+  colorTabsTextSubtitleInactive: getToken('colorTabsTextSubtitleInactive'),
+  colorTabsIconInactiveInverse: getToken('colorTabsIconInactiveInverse'),
+  colorTabsIconActiveInverse: getToken('colorTabsIconActiveInverse'),
+  colorTabsIconInactive: getToken('colorTabsIconInactive'),
+  colorTabsIconActive: getToken('colorTabsIconActive'),
+  colorTabsTextSubtitleInverse: getToken('colorTabsTextSubtitleInverse'),
+  colorTabsTextSubtitle: getToken('colorTabsTextSubtitle'),
+  sizingTabsIcon: getToken('sizingTabsIcon')
+};
+var designTokens = {
+  inkBarColor: getToken('colorTabsBorderActive'),
+  // 选中的边框颜色
+  itemSelectedColor: getToken('colorTabsTextTitle'),
+  // 选中的label颜色
+  itemHoverColor: getToken('colorTabsTextTitle'),
+  // hover label颜色
+  itemActiveColor: getToken('colorTabsTextTitle'),
+  // active label颜色
+  itemColor: getToken('colorTabsTextTitleInactive'),
+  // 默认label颜色
+  colorBorderSecondary: getToken('colorTabsBorderInactive'),
+  // 未选中的边框
+  horizontalItemPadding: "".concat(getToken('spacingTabsVerticalGap'), "px ").concat(getToken('spacingTabsPaddingHorizontal'), "px"),
+  lineWidthBold: getToken('borderWidthTabsActive')
+};
+var designFillTokens = {
+  inkBarColor: '#4D28E8',
+  // 选中的边框颜色
+  itemSelectedColor: '#fff',
+  // 选中的label颜色
+  itemHoverColor: getToken('colorTabsTextTitle'),
+  // hover label颜色
+  itemActiveColor: getToken('colorTabsTextTitle'),
+  // active label颜色
+  itemColor: getToken('colorTabsTextTitleInactive'),
+  // 默认label颜色
+  colorBorderSecondary: '#F5F5F8',
+  // 未选中的边框
+  cardPadding: "6px ".concat(getToken('spacingTabsPaddingHorizontal'), "px"),
+  colorFillAlter: '#F5F5F8',
+  lineWidth: 0,
+  // 线条宽度
+  colorBgContainer: '#4D28E8'
+};
+var inverseDesignTokens = {
+  inkBarColor: getToken('colorTabsBorderActiveInverse'),
+  // 选中的边框颜色
+  itemSelectedColor: getToken('colorTabsTextTitleInverse'),
+  // 选中的label颜色
+  itemHoverColor: getToken('colorTabsTextTitleInverse'),
+  // hover label颜色
+  itemActiveColor: getToken('colorTabsTextTitleInverse'),
+  // active label颜色
+  itemColor: getToken('colorTabsTextTitleInverseInactive'),
+  // 默认label颜色
+  colorBorderSecondary: getToken('colorTabsBorderInactiveInverse'),
+  // 未选中的边框
+  horizontalItemPadding: "".concat(getToken('spacingTabsVerticalGap'), "px ").concat(getToken('spacingTabsPaddingHorizontal'), "px"),
+  lineWidthBold: getToken('borderWidthTabsActive')
+};
+export { otherDesignToken, designTokens, inverseDesignTokens, designFillTokens };

package/es/components/Tabs/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style/index.less';
+export type Type = 'default' | 'fill';
+export interface TabsProps {
+    prefixCls?: string;
+    children?: React.ReactNode;
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    items?: any[];
+    inverse?: boolean;
+    [key: string]: any;
+}
+declare const Tabs: (props: TabsProps) => React.JSX.Element;
+export default Tabs;

package/es/components/Tabs/index.js

@@ -0,0 +1,102 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
+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 = ["inverse", "children", "items", "type", "defaultActiveKey", "prefixCls"];
+import React, { useState } from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { designTokens, inverseDesignTokens, otherDesignToken, designFillTokens } from "./designTokens";
+import { BASE_CLASS_PREFIX } from "../../constants";
+import Text from "../Text";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Tabs = function Tabs(props) {
+  var inverse = props.inverse,
+    children = props.children,
+    _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'default' : _props$type,
+    defaultActiveKey = props.defaultActiveKey,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat(BASE_CLASS_PREFIX, "-tabs") : _props$prefixCls,
+    attr = _objectWithoutProperties(props, _excluded);
+
+  // inverse表示反选，颜色不同
+  var subTitleColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverseInactive : otherDesignToken.colorTabsTextSubtitleInactive; // 默认subTitle颜色
+  var subTitleActiveColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverse : otherDesignToken.colorTabsTextSubtitle; // 选中的subTitle颜色
+  var iconColor = inverse ? otherDesignToken.colorTabsIconInactiveInverse : otherDesignToken.colorTabsIconInactive; // 选中的subTitle颜色
+  var iconActiveColor = inverse ? otherDesignToken.colorTabsIconActiveInverse : otherDesignToken.colorTabsIconActive; // 选中的subTitle颜色
+
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {
+        baseColor: 'blue'
+      },
+      path: ["".concat(prefixCls)]
+    }, function () {
+      return "\n      .".concat(prefixCls, "-card.").concat(prefixCls, "-fill>.").concat(prefixCls, "-nav .").concat(prefixCls, "-tab {\n        border-radius: 18px;\n      }\n      .").concat(prefixCls, "-card.").concat(prefixCls, "-fill .").concat(prefixCls, "-nav-list {\n        background: ").concat(designFillTokens.colorFillAlter, ";\n        border-radius: 18px;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  var _useState = useState(defaultActiveKey || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleTabClick = function handleTabClick(key) {
+    setActiveKey(key);
+  };
+  var item = items.map(function (i) {
+    return _objectSpread(_objectSpread({
+      label: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefixCls, "-item"),
+        children: [/*#__PURE__*/_jsx("span", {
+          style: {
+            color: i.key === activeKey ? iconActiveColor : iconColor,
+            fontSize: otherDesignToken.sizingTabsIcon
+          },
+          children: i.icon
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "ContentC14Regular",
+          className: "".concat(prefixCls, "-item-title"),
+          children: i.title
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          style: {
+            color: i.key === activeKey ? subTitleActiveColor : subTitleColor
+          },
+          children: i.subTitle
+        })]
+      })
+    }, i), {}, {
+      icon: null
+    });
+  });
+  var inverseStoken = inverse ? inverseDesignTokens : designTokens;
+  var fillStoken = type === 'fill' ? designFillTokens : inverseStoken;
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    prefixCls: BASE_CLASS_PREFIX,
+    theme: {
+      components: {
+        Tabs: _objectSpread(_objectSpread({}, fillStoken), {}, {
+          horizontalItemGutter: 0
+        })
+      }
+    },
+    children: /*#__PURE__*/_jsx(_Tabs, _objectSpread(_objectSpread({}, attr), {}, {
+      defaultActiveKey: defaultActiveKey,
+      items: item,
+      onTabClick: handleTabClick,
+      type: type === 'fill' ? "card" : "line",
+      className: type === 'fill' ? "".concat(prefixCls, "-fill") : '',
+      children: children
+    }))
+  });
+};
+export default Tabs;

package/es/components/Tabs/style/index.less

@@ -0,0 +1,25 @@
+
+@import './variables.less';
+
+@components: tabs;
+.@{prefix}-@{components}-item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.@{prefix}-@{components}-tab-btn {
+  text-align: center;
+  .@{prefix}-@{components}-tab-icon {
+    margin: 0 !important;
+  }
+}
+.@{prefix}-@{components}-tab-active .@{prefix}-@{components}-item-title {
+  font-family: Roboto-Bold;
+}
+.@{prefix}-@{components}-fill .@{prefix}-@{components}-tab-active .@{prefix}-@{components}-item-title {
+  font-family: Roboto-Regular;
+}
+.@{prefix}-@{components}-fill>.@{prefix}-@{components}-nav .@{prefix}-@{components}-tab-focus {
+  outline: none;
+}

package/es/components/Tabs/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/Tag/designTokens.d.ts

@@ -0,0 +1,90 @@
+declare const designTokens: {
+    borderRadiusSM: any;
+};
+declare const designTokensPrimary: {
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
+};
+declare const designTokensSecondary: {
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
+};
+declare const designTokensBlueLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreenLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensYellowLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensRedLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreyLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensLakeblueLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensOrangeLight: {
+    colorText: string;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensBlue: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGreen: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensYellow: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensRed: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensGrey: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensLakeblue: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const designTokensOrange: {
+    colorText: any;
+    defaultBg: string;
+    colorBorder: string;
+};
+declare const otherDesignTokens: {
+    padding: string;
+    sizingTagShort: string;
+    sizingTagTall: string;
+    sizingTagTallLg: string;
+};
+export { designTokens, otherDesignTokens, designTokensPrimary, designTokensSecondary, designTokensBlue, designTokensGrey, designTokensGreen, designTokensRed, designTokensYellow, designTokensOrange, designTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight, };