@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/feature/token/factory/mergeToken.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { aliasTokenMap } from './getAliasToken';
+import getGlobalToken from './getGlobalToken';
+import getModelToken from './getModelToken';
+import getChartsToken from './chartsToken';
+import { TOKENCHARTNAMES } from '../../../util/constants';
+import color from '../color';
+import merge from '../../../util/merge';
+import cloneDeep from '../../../util/cloneDeep';
+
+function getBasicToken(name, config) {
+  return {
+    ...getGlobalToken(name),
+    ...config,
+  };
+}
+
+function getMapToken(name, config) {
+  return {
+    ...aliasTokenMap[name](config),
+    ...config,
+  };
+}
+
+function getConfigModelToken(config) {
+  return {
+    ...getModelToken(config),
+    ...config,
+  };
+}
+
+function mergeSpecialToken(name, chartsConfig, config) {
+  TOKENCHARTNAMES.forEach(item => {
+    if (config[item]) merge(chartsConfig, config[item]);
+  });
+  // 针对colorState特殊处理
+  const { colorState } = config;
+  if (colorState) {
+    const newColorState = merge(cloneDeep(color[name].colorSet.colorState), colorState);
+    return { ...chartsConfig, colorState: newColorState };
+  }
+  return { ...chartsConfig };
+}
+
+/**
+ *
+ * @param {string} name  传入的主题名称
+ * @param {object} config   传入的主题配置
+ */
+
+export default function mergeToken(name, config) {
+  const basicConfig = getBasicToken(name, config);
+  const mapConfig = getMapToken(name, basicConfig);
+  const modelConfig = getConfigModelToken(mapConfig);
+  const chartsConfig = getChartsToken(mapConfig);
+  const specialConfig = mergeSpecialToken(name, chartsConfig, config);
+  return {
+    colorGroup: basicConfig.colorGroup,
+    ...modelConfig,
+    ...specialConfig,
+  };
+}

package/src/components/charts/feature/token/index.js

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { ictLight, ictDark } from './theme/ict';
+import { bpitLight, bpitDark } from './theme/bpit';
+import { cloudLight, cloudDark } from './theme/cloud';
+import { hdesignLight, hdesignDark } from './theme/hdesign';
+import merge from '../../util/merge';
+import HashMap from '../../util/hashMap';
+import cloneDeep from '../../util/cloneDeep';
+import tips from '../../util/tips';
+import { THEMES, CURRENT_THEME, DEFAULT_THEME_NAME, THEME_ERROR_TIP_MESSAGE } from '../../util/constants';
+import mergeToken from './factory/mergeToken';
+import { EXPORT_COLORS_KEY } from './factory/getExportColors';
+
+const themeToken = new HashMap({
+  [THEMES.LIGHT]: cloneDeep(ictLight),
+  [THEMES.DARK]: cloneDeep(ictDark),
+  [THEMES.BPIT_LIGHT]: cloneDeep(bpitLight),
+  [THEMES.BPIT_DARK]: cloneDeep(bpitDark),
+  [THEMES.CLOUD_LIGHT]: cloneDeep(cloudLight),
+  [THEMES.CLOUD_DARK]: cloneDeep(cloudDark),
+  [THEMES.HDESIGN_LIGHT]: cloneDeep(hdesignLight),
+  [THEMES.HDESIGN_DARK]: cloneDeep(hdesignDark),
+  [CURRENT_THEME]: cloneDeep(ictLight),
+});
+class Token {
+  // 当前主题名称
+  static themeName = undefined;
+
+  static config = cloneDeep(ictLight);
+
+  // todo待修改
+  static set(name, config) {
+    const defaultConfig = cloneDeep(this.getConfig(DEFAULT_THEME_NAME));
+    merge(defaultConfig, config);
+    themeToken.set(name, defaultConfig);
+  }
+  //  以下待确认
+  static setConfig(name, config) {
+    // 以下为新的逻辑
+    const themeKeys = this.getThemeKeys();
+    const validate = themeKeys.includes(name);
+    // 修改已有主题的配置
+    if (validate) {
+      const newConfig = mergeToken(name, config);
+      const oldConfig = this.getConfig(name);
+      merge(oldConfig, newConfig);
+    } else {
+      const newConfig = mergeToken(DEFAULT_THEME_NAME, config);
+      themeToken.set(name, newConfig);
+    }
+  }
+  //  以下待确认
+  static getThemeKeys() {
+    return themeToken.keys();
+  }
+
+  //  以下待确认
+  static resetThemeCongfig() {
+    themeToken.set(THEMES.LIGHT, cloneDeep(ictLight));
+    themeToken.set(THEMES.DARK, cloneDeep(ictDark));
+    themeToken.set(THEMES.BPIT_LIGHT, cloneDeep(bpitLight));
+    themeToken.set(THEMES.BPIT_DARK, cloneDeep(bpitDark));
+    themeToken.set(THEMES.CLOUD_LIGHT, cloneDeep(cloudLight));
+    themeToken.set(THEMES.CLOUD_DARK, cloneDeep(cloudDark));
+    themeToken.set(THEMES.HDESIGN_LIGHT, cloneDeep(hdesignLight));
+    themeToken.set(THEMES.HDESIGN_DARK, cloneDeep(hdesignDark));
+    themeToken.set(CURRENT_THEME, cloneDeep(ictLight));
+  }
+
+  static getConfig(name) {
+    return themeToken.get(name);
+  }
+
+  static setDefaultTheme(name) {
+    const tempTheme = this.validate(name);
+    if (this.themeName !== tempTheme) {
+      this.themeName = tempTheme;
+      // 以下config功能待完善
+      themeToken.set(CURRENT_THEME, themeToken.get(tempTheme));
+      this.config = this.getConfig(CURRENT_THEME);
+    }
+  }
+
+  // 校验主题的合法性,将不合法的主题值重置为默认的light主题,并给与提示
+  static validate(name) {
+    // 如果没传并且没有全局注册过直接就是light主题
+    let tempTheme = name || this.themeName || DEFAULT_THEME_NAME;
+
+    if (tempTheme.toLowerCase().includes('cloud-light')) {
+      tempTheme = THEMES.CLOUD_LIGHT;
+    }
+
+    if (tempTheme.toLowerCase().includes('cloud-dark')) {
+      tempTheme = THEMES.CLOUD_DARK;
+    }
+
+    const themeKeys = themeToken.keys();
+
+    const validate = themeKeys.includes(tempTheme);
+
+    if (!validate) {
+      tips.error(THEME_ERROR_TIP_MESSAGE);
+      tempTheme = THEMES.LIGHT;
+    }
+
+    return tempTheme;
+  }
+
+  /**
+   *
+   * @param {string} chartName  图表名称，根据名称从config中获取对应图表的chartToken
+   * @returns Object 用于series或者其他模块的Proxy代理token对象
+   */
+
+  static getTokenByName(chartName) {
+
+    const handler = (_, prop) => {
+      const token = {
+        ...this.config[chartName],
+      };
+      return token[prop];
+    }
+
+    return new Proxy(
+      {},
+      {
+        get: handler,
+      },
+    );
+  }
+
+  /**
+   * 用于ui规范检查
+   * @param {string} chartName 图表名称，根据名称从config中获取对应图表的chartToken
+   * @returns Object 在factory中定义的chartToken对象
+   */
+  static getChartTokenByName(chartName) {
+    return this.config[chartName]
+  }
+
+  static getToken() {
+    return this.config
+  }
+
+  /**
+   * Theme暴露使用的颜色变量
+   * @returns object
+   */
+  static getColors() {
+
+    const colorHandler = (_, prop) => {
+      const vaild = EXPORT_COLORS_KEY.includes(prop)
+      return vaild ? this.config.exportColors[prop] : undefined
+    }
+
+    return new Proxy(
+      {},
+      {
+        get: colorHandler,
+      },
+    );
+  }
+}
+
+export { THEMES };
+export default Token;

package/src/components/charts/feature/token/readme.md

@@ -0,0 +1,11 @@
+### globalToken: 基础变量，包含基础字号、间距、颜色等等
+图表使用的全局变量，包含 font，border，color，space 等
+
+### aliasToken：二层变量，讲基础变量稍微语义化，如初级文本、次级文本，抹平黑白主题差异
+基于 globalToken 衍生的别名变量，取值从 globalToken 中取，实现黑白主题的色值切换和不同主题之间的差异
+
+### modelToken：三层变量，由二层变量生成，公共模块化变量，如x轴、y轴、图例、datazoom样式
+基于 aliasToken 衍生的三级变量，取值从 aliasToken 中取，实现不同主题之间的差异覆盖
+
+### chartsToken：四层变量，由二层变量生成，各图表变量，如线型图、柱状图样式
+目前是基于 globalToken，aliasToken，modelToken 衍生的变量，用于按照图表名称的具体 option 配置

package/src/components/charts/feature/token/theme/bpit/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { THEMES } from '../../../../util/constants';
+import getToken from '../../factory';
+
+const bpitLight = getToken(THEMES.BPIT_LIGHT);
+
+const bpitDark = getToken(THEMES.BPIT_DARK);
+
+export { bpitLight, bpitDark };

package/src/components/charts/feature/token/theme/cloud/getAliasToken.js

@@ -0,0 +1,247 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+function getAliasToken(globalToken, sceneToken) {
+
+  const {
+    fontSizeBase,
+    fontSizeMd,
+    space2x,
+    spaceBase,
+    fontSizeLg,
+    fontSize4xl,
+    lineTypeSolid,
+    lineTypeDashedLG,
+    borderNone,
+    borderBase,
+    borderRadiusBase,
+    border2x,
+    borderRadiusNone,
+    spaceNone,
+    space4x,
+    size05x,
+    size6x,
+    size2x,
+    sizeBase,
+  } = globalToken;
+
+  const {
+    colorBgMask,
+    colorBgPrimary,
+    colorBgSecondary,
+    colorBgPlaceholder,
+    colorBgHover,
+    colorBgHandle,
+    colorTextPrimary,
+    colorTextSecondary,
+    colorTextPlaceholder,
+    colorTextDisabled,
+    colorIconPrimary,
+    colorIconDisabled,
+    colorLine,
+    colorLineSecondary,
+    colorLineSeparator,
+    colorFillNone,
+    colorFill,
+    colorFillSelect,
+    colorFillSelectSecondary,
+    colorFillHover,
+    colorFillHandle,
+    colorBorder,
+    colorBorderSelect,
+    colorShadowPrimary,
+    colorShadowSecondary,
+    shadowOffsetYPrimary,
+    shadowOffsetYSecondary,
+    shadowBlurPrimary,
+    shadowBlurSecondary,
+  } = sceneToken
+
+  return {
+    // -----------------------------------------------------颜色-------------------------------------------------------------------------
+    // 卡片背景
+    colorBgContainer: colorBgPrimary,
+    // tip背景
+    colorBgContainerSecondary: colorBgSecondary,
+    // 悬浮背景
+    colorBgContainerHover: colorBgHover,
+    // 标题颜色
+    colorTitle: colorTextPrimary,
+    // 副标题颜色
+    colorSubTitle: colorTextSecondary,
+    // 名称文本（轴名称，legend名称等）
+    colorTextName: colorTextPlaceholder,
+    // 轴label
+    colorAxisLabel: colorTextPlaceholder,
+    // label颜色
+    colorLabel: colorTextPrimary,
+    // 进度图专用name名称
+    colorLabelSecondary: colorTextPlaceholder,
+    // label禁用颜色
+    colorLabelDisabled: colorTextDisabled,
+    // 图标色
+    colorIcon: colorIconPrimary,
+    // 图标失效色
+    colorIconInactive: colorIconDisabled,
+    // 坐标轴线颜色
+    colorAxisLine: colorLine,
+    // 刻度线颜色
+    colorAxisTickLine: colorLineSecondary,
+    // 分隔线颜色
+    colorAxisSplitLine: colorLine,
+    // 用于极坐标的径向轴和雷达坐标的分隔线颜色，和坐标轴线颜色保持一致，特殊处理专用
+    colorAxisSplitLineSecondary: colorLine,
+    // 坐标轴指示器悬浮线
+    colorAxisPointerLine: colorLineSeparator,
+    // 分隔线
+    colorSeparatorLine: colorLineSeparator,
+    // lableline
+    colorLabelLine: colorLine,
+    // 无色
+    colorNone: colorFillNone,
+    // 占位色
+    colorPlaceholder: colorBgPlaceholder,
+    // 遮盖色
+    colorMask: colorBgMask,
+    // zoom背景色
+    colorZoomBg: colorBgHover,
+    // zoom border颜色
+    colorZoomBorder: colorFillNone,
+    // zoom 数据区域 border
+    colorZoomDataAreaBorder: colorBorder,
+    // zoom 数据区域填充
+    colorZoomDataAreaFill: colorFill,
+    // zoom 选中区域填充
+    colorZoomFill: colorFillSelect,
+    // zoom 选中区域数据border
+    colorZoomSelectDataAreaBorder: colorBorderSelect,
+    // zoom 选中区域数据填充
+    colorZoomSelectDataAreaFill: colorFillSelectSecondary,
+    // zoom 手柄颜色
+    colorZoomHandle: colorFillHandle,
+    // zoom 手柄border
+    colorZoomHandleBorder: colorBgHandle,
+    // hover阴影
+    colorShadowHover: colorFillHover,
+    // tip阴影
+    colorShadowContainer: colorShadowPrimary,
+    // 手柄阴影
+    colorShadowHandle: colorShadowSecondary,
+    // symbol hover填充
+    symbolFillHover: colorBgMask,
+    // ---------------------------------------------------阴影-------------------------------------------------
+    // tip阴影offsetY
+    shadowOffsetYContainer: shadowOffsetYPrimary,
+    // 手柄阴影offsetY
+    shadowOffsetYHandle: shadowOffsetYSecondary,
+    // tip阴影模糊
+    shadowBlurContainer: shadowBlurPrimary,
+    // 手柄阴影模糊
+    shadowBlurHandle: shadowBlurSecondary,
+    // ------------------------------------------------------------------字号---------------------------------------------------
+    // 主文本字号
+    textFontSize: fontSizeMd, // 确定
+    // 次级文本字号
+    subtextFontSize: fontSizeBase, // 确定
+    // 标题文本字号
+    titleFontSize: fontSize4xl,
+    // 副标题文本字号
+    subtitleFontSize: fontSizeLg,
+    // label字号
+    labelFontSize: fontSizeBase,
+    // ----------------------------------------------线宽---------------------------------------------------------
+    // 坐标轴 1
+    axisLineWidth: borderBase,
+    // 用于极坐标系和雷达坐标系
+    axisLineWidthSecondary: borderBase,// 确定
+    //   刻度线  1
+    axisTickLineWidth: borderBase,
+    // 分隔线线宽 1
+    axisSplitLineWidth: borderBase,
+    // 坐标轴指示器的标线线宽 1
+    axisPointerLineWidth: borderBase,
+    // 常规线宽
+    lineWidth: border2x,
+    // 二级线宽
+    lineWidthSecondary: borderBase,
+    // 无线宽
+    lineWidthNone: borderNone,
+    // -------------------------------------------------------------------线型-------------------------------------------------------------------
+    // 坐标轴类型
+    axisLineType: lineTypeSolid,
+    // 刻度线类型
+    axisTickLineType: lineTypeSolid,
+    // 直角坐标系分隔线类型
+    axisSplitLineType: lineTypeDashedLG,
+    // 极坐标系分隔线类型
+    axisSplitLineTypeSecondary: lineTypeSolid,
+    // 坐标轴指示器标线类型
+    axisPointerLineType: lineTypeSolid,
+    // ---------------------------------------------------------------------间距------------------------------------------------------------------------------- 
+    // 坐标轴名称间距
+    axisNameSpace: space2x,
+    // 坐标轴文本间距
+    axisLabelSpace: spaceBase,
+    // 标题文本间距
+    titleSpace: space2x,
+    // 容器的间距
+    containerGap: spaceBase,
+    // 图例的间距
+    legendSpace: space4x,
+    // 无padding
+    paddingNone: spaceNone,
+    paddingSM: spaceBase,
+    padding: space2x,
+    paddingLG: space4x,
+    tipItemGap: size2x,
+    tipIconGap: sizeBase,
+    tipValueGap: size2x,
+    // -----------------------------------------------------------------边框------------------------------------------------------------------------------
+    // zoom数据区域边框
+    zoomDataAreaBorderWidth: borderBase,
+    // 边框 细
+    borderWidth: borderBase,
+    // 边框
+    borderWidthLG: border2x,
+    //  border 0
+    borderWidthNone: borderNone,
+    // 图元的边框0
+    symbolBorderWidthNone: borderNone,
+    // 图元的边框
+    symbolBorderWidth: border2x,
+    // -------------------------------------------------------------size----------------------------------------------------------------------------------------
+    // 图元 
+    symbolSize: size2x,
+    // 雷达图专用
+    symbolSizeSecondary: size2x - 2,
+    // 图元  线形图用
+    symbolSizeSM: sizeBase,
+    // 柱条的宽度
+    barWidth: size2x,
+    // 堆叠进度图宽度 
+    barWidthSecondary: size2x,
+    // 图例单元尺寸
+    legendItemSize: size05x,
+    // 图例圆形单元尺寸
+    legendCircleItemSize: size2x - 2,
+    // labelLine的长度
+    labelLineLength: size6x,
+    // ------------------------------------------------圆角---------------------------------------------------
+    // 容器的圆角
+    containerBoderRadius: borderRadiusBase,
+    // 圆角 0
+    borderRadiusNone,
+    // 圆角 小
+    borderRadius: borderRadiusBase,
+  };
+}
+
+export { getAliasToken as getCloudAliasToken };

package/src/components/charts/feature/token/theme/cloud/getSceneToken.js

@@ -0,0 +1,74 @@
+import { codeToRGB } from '../../../../util/color';
+// cloud黑白主题为两套不同的色板,灰阶命名黑白主题相反
+function getSceneToken(globalToken, light = true) {
+    const {
+        colorGray0,
+        colorGray10,
+        colorGray15,
+        colorGray20,
+        colorGray30,
+        colorGray40,
+        colorGray50,
+        colorGray60,
+        colorGray70,
+        colorGray90,
+        colorGray100,
+        colorTransparent,
+        colorBoard,
+        spaceBase,
+        space05x,
+        space4x
+    } = globalToken;
+
+    return {
+        // 用于实现一些遮盖场景
+        colorBgMask: light ? colorGray0 : colorGray10,
+        // 初级底色 (卡片)
+        colorBgPrimary: light ? colorGray0 : colorGray10,
+        // 次级背景色 tip背景
+        colorBgSecondary: light ? colorGray0 : colorGray15,
+        // 占位背景色
+        colorBgPlaceholder: light ? colorGray30 : colorGray15,
+        // datazoom背景
+        colorBgHover: light ? colorGray10 : codeToRGB(colorGray100, 0.1),
+        // datazoom  handle border todo 
+        colorBgHandle: light ? colorBoard.blue.colorBlue60 : colorBoard.blue.colorBlue70,
+        // 主要文本色
+        colorTextPrimary: colorGray90,
+        // 次要文本色
+        colorTextSecondary: colorGray70,
+        // 占位文本色
+        colorTextPlaceholder: light ? colorGray60 : colorGray50,
+        // 禁用文本色
+        colorTextDisabled: colorGray50,
+        // 图标色
+        colorIconPrimary: light ? colorGray60 : colorGray70,
+        // 图标禁用色
+        colorIconDisabled: colorGray50,
+        colorLine: colorGray20,
+        colorLineSecondary: light ? colorGray40 : colorGray20,
+        //分隔线
+        colorLineSeparator: colorGray90,
+        colorFillNone: colorTransparent,
+        // datzoom 未选中数据  fill
+        colorFill: light ? codeToRGB(colorGray100, 0.05) : codeToRGB(colorGray100, 0.1),
+        // datzoom  选中区域 fill todo
+        colorFillSelect: light ? codeToRGB(colorBoard.blue.colorBlue60, 0.2) : codeToRGB(colorBoard.blue.colorBlue70, 0.2),
+        // datzoom  选中数据 fill todo
+        colorFillSelectSecondary: light ? colorBoard.blue.colorBlue30 : colorBoard.blue.colorBlue100,
+        // hover阴影
+        colorFillHover: light ? codeToRGB(colorGray100, 0.05) : codeToRGB(colorGray100, 0.1),
+        // datzoom handle 填充
+        colorFillHandle: light ? colorGray0 : colorGray100,
+        colorBorder: light ? colorGray50 : colorGray40,
+        colorBorderSelect: light ? colorBoard.blue.colorBlue60 : colorBoard.blue.colorBlue60,
+        colorShadowPrimary: light ? codeToRGB(colorGray100, 0.16) : codeToRGB(colorGray0, 0.08),
+        colorShadowSecondary: light ? codeToRGB(colorGray100, 0.08) : codeToRGB(colorGray0, 0.08),
+        shadowOffsetYPrimary: spaceBase,
+        shadowOffsetYSecondary: space05x,
+        shadowBlurPrimary: space4x,
+        shadowBlurSecondary: spaceBase,
+    }
+}
+
+export { getSceneToken as getCloudSceneToken }

package/src/components/charts/feature/token/theme/cloud/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { THEMES } from '../../../../util/constants';
+import getToken from '../../factory';
+
+const cloudLight = getToken(THEMES.CLOUD_LIGHT);
+
+const cloudDark = getToken(THEMES.CLOUD_DARK);
+
+export { cloudLight, cloudDark };