@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/src/client/antd-token-previewer/meta/TokenRelation.ts

@@ -0,0 +1,188 @@
+import type { AliasToken, MapToken, SeedToken } from 'antd/es/theme/interface';
+import defaultMap from 'antd/es/theme/themes/default';
+import seedToken from 'antd/es/theme/themes/seed';
+import formatToken from 'antd/es/theme/util/alias';
+
+export type PureAliasToken = Omit<AliasToken, keyof MapToken>;
+
+type SeedRelatedMap = {
+  [key in keyof SeedToken]?: (keyof MapToken)[];
+};
+
+type SeedRelatedAlias = {
+  [key in keyof SeedToken]?: (keyof PureAliasToken)[];
+};
+
+type MapRelatedAlias = {
+  [key in keyof MapToken]?: (keyof PureAliasToken)[];
+};
+
+// Alias Token 优先级排序，数字小的排在前面，在 map 中的优先级比不在 map 中的优先级高，都不在 map 中的按字母顺序排序
+const tokenOrder: {
+  [key in keyof AliasToken]?: number;
+} = {
+  // example
+  // 0-20 留给 text
+  colorTextHeading: 1,
+  colorTextLabel: 2,
+  colorTextDescription: 3,
+  colorTextDisabled: 4,
+  colorTextPlaceholder: 5,
+  colorIcon: 10,
+  colorIconHover: 11,
+  // 21-40 留给 border
+  colorBorderBg: 21,
+  controlTmpOutline: 22,
+  // 41-60 留给 fill
+  colorFillAlter: 41,
+  colorFillContent: 42,
+  colorFillContentHover: 43,
+
+  // 61-80 留给 bg
+  controlItemBgActive: 61,
+  controlItemBgActiveHover: 62,
+  controlItemBgHover: 63,
+};
+
+export function sortToken<T extends (keyof AliasToken)[]>(arr: T): T {
+  if (!arr) {
+    return arr;
+  }
+  return arr.sort((a, b) => {
+    if (tokenOrder[a] && !tokenOrder[b]) {
+      return -1;
+    }
+    if (!tokenOrder[a] && tokenOrder[b]) {
+      return 1;
+    }
+    if (tokenOrder[a] && tokenOrder[b]) {
+      return tokenOrder[a]! - tokenOrder[b]!;
+    }
+    return a.localeCompare(b);
+  });
+}
+
+export const seedRelatedMap: SeedRelatedMap = {
+  colorPrimary: [
+    'colorPrimaryBg',
+    'colorPrimaryBgHover',
+    'colorPrimaryBorder',
+    'colorPrimaryBorderHover',
+    'colorPrimaryHover',
+    'colorPrimary',
+    'colorPrimaryActive',
+    'colorPrimaryTextHover',
+    'colorPrimaryText',
+    'colorPrimaryTextActive',
+  ],
+  colorError: [
+    'colorErrorBg',
+    'colorErrorBgHover',
+    'colorErrorBorder',
+    'colorErrorBorderHover',
+    'colorErrorHover',
+    'colorError',
+    'colorErrorActive',
+    'colorErrorTextHover',
+    'colorErrorText',
+    'colorErrorTextActive',
+  ],
+  colorWarning: [
+    'colorWarningBg',
+    'colorWarningBgHover',
+    'colorWarningBorder',
+    'colorWarningBorderHover',
+    'colorWarningHover',
+    'colorWarning',
+    'colorWarningActive',
+    'colorWarningTextHover',
+    'colorWarningText',
+    'colorWarningTextActive',
+  ],
+  colorSuccess: [
+    'colorSuccessBg',
+    'colorSuccessBgHover',
+    'colorSuccessBorder',
+    'colorSuccessBorderHover',
+    'colorSuccessHover',
+    'colorSuccess',
+    'colorSuccessActive',
+    'colorSuccessTextHover',
+    'colorSuccessText',
+    'colorSuccessTextActive',
+  ],
+  colorInfo: [
+    'colorInfoBg',
+    'colorInfoBgHover',
+    'colorInfoBorder',
+    'colorInfoBorderHover',
+    'colorInfoHover',
+    'colorInfo',
+    'colorInfoActive',
+    'colorInfoTextHover',
+    'colorInfoText',
+    'colorInfoTextActive',
+  ],
+  colorTextBase: ['colorText', 'colorTextSecondary', 'colorTextTertiary', 'colorTextQuaternary'],
+  colorBgBase: [
+    'colorBgContainer',
+    'colorBgElevated',
+    'colorBgLayout',
+    'colorBgSpotlight',
+    'colorBgMask',
+    'colorBorder',
+    'colorBorderSecondary',
+    'colorFill',
+    'colorFillSecondary',
+    'colorFillTertiary',
+    'colorFillQuaternary',
+  ],
+};
+
+const getMapRelatedAlias = () => {
+  const mapRelatedAlias: any = {};
+  const mapFn = defaultMap;
+  const mapToken = mapFn({ ...seedToken });
+  const aliasToken = formatToken({ ...mapToken, override: {} });
+  Object.keys(mapToken).forEach((mapKey) => {
+    delete (aliasToken as any)[mapKey];
+  });
+
+  Object.keys(mapToken).forEach((mapKey) => {
+    const newAlias = formatToken({
+      ...mapToken,
+      [mapKey]: 'changed',
+      override: {},
+    });
+    Object.keys(aliasToken).forEach((aliasKey) => {
+      if ((aliasToken as any)[aliasKey] !== (newAlias as any)[aliasKey]) {
+        if (!mapRelatedAlias[mapKey]) {
+          mapRelatedAlias[mapKey] = [];
+        }
+        mapRelatedAlias[mapKey].push(aliasKey);
+      }
+    });
+    mapRelatedAlias[mapKey] = sortToken(mapRelatedAlias[mapKey]);
+  });
+
+  return mapRelatedAlias;
+};
+
+export const mapRelatedAlias: MapRelatedAlias = getMapRelatedAlias();
+
+const getSeedRelatedAlias = (): SeedRelatedAlias => {
+  const result: SeedRelatedAlias = {};
+  Object.keys(seedToken).forEach((key) => {
+    const seedKey = key as keyof SeedToken;
+    const arr = mapRelatedAlias[seedKey] || [];
+    seedRelatedMap[seedKey]?.forEach((mapKey) => {
+      arr.push(...(mapRelatedAlias[mapKey] ?? []));
+    });
+    if (arr.length) {
+      (result as any)[key] = sortToken(Array.from(new Set(arr)));
+    }
+  });
+  return result;
+};
+
+export const seedRelatedAlias = getSeedRelatedAlias();

package/src/client/antd-token-previewer/meta/category.ts

@@ -0,0 +1,257 @@
+import type { AliasToken } from '../interface';
+import type { TokenTree } from './interface';
+import { seedRelatedAlias, seedRelatedMap } from './TokenRelation';
+
+const category: TokenTree<keyof AliasToken | string> = [
+  {
+    name: '颜色',
+    nameEn: 'Color',
+    desc: '',
+    descEn: '',
+    groups: [
+      {
+        key: 'brandColor',
+        type: 'Color',
+        name: '品牌色',
+        nameEn: 'Brand Color',
+        desc: '品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义。',
+        descEn:
+          'Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.',
+        seedToken: ['colorPrimary'],
+        mapToken: seedRelatedMap.colorPrimary,
+        aliasToken: seedRelatedAlias.colorPrimary,
+      },
+      {
+        key: 'successColor',
+        type: 'Color',
+        name: '成功色',
+        nameEn: 'Success Color',
+        desc: '用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。',
+        descEn:
+          'Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.',
+        seedToken: ['colorSuccess'],
+        mapToken: seedRelatedMap.colorSuccess,
+        aliasToken: seedRelatedAlias.colorSuccess,
+      },
+      {
+        key: 'warningColor',
+        type: 'Color',
+        name: '警戒色',
+        nameEn: 'Warning Color',
+        desc: '用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。',
+        descEn:
+          'Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.',
+        seedToken: ['colorWarning'],
+        mapToken: seedRelatedMap.colorWarning,
+        aliasToken: seedRelatedAlias.colorWarning,
+      },
+      {
+        key: 'errorColor',
+        type: 'Color',
+        name: '错误色',
+        nameEn: 'Error Color',
+        desc: '用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。',
+        descEn:
+          'Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.',
+        seedToken: ['colorError'],
+        mapToken: seedRelatedMap.colorError,
+        aliasToken: seedRelatedAlias.colorError,
+      },
+      {
+        key: 'infoColor',
+        type: 'Color',
+        name: '信息色',
+        nameEn: 'Info Color',
+        desc: '用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。',
+        descEn:
+          'Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.',
+        seedToken: ['colorInfo'],
+        mapToken: seedRelatedMap.colorInfo,
+        aliasToken: seedRelatedAlias.colorInfo,
+      },
+      {
+        key: 'neutralColor',
+        type: 'Color',
+        name: '中性色',
+        nameEn: 'Neutral Color',
+        desc: '中性色主要被大量的应用在界面的文字、背景、边框和填充的 4 种场景。合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。',
+        descEn:
+          'Neutral color is mainly applied to the four scenarios of text, background, border and fill in the interface. Reasonable selection of neutral colors can make the page information have a good primary and secondary relationship, and help the reading experience.',
+        seedToken: ['colorTextBase', 'colorBgBase'],
+        mapToken: seedRelatedMap.colorTextBase?.concat(seedRelatedMap.colorBgBase ?? []),
+        aliasToken: seedRelatedAlias.colorTextBase?.concat(seedRelatedAlias.colorBgBase ?? []),
+        aliasTokenDescription:
+          '你可以利用 Alias Token 来精准控制部分组件的效果。例如 Input 、InputNumber、Select 等Control 类组件都共享了相同的 controlXX token 。只需修改值，即可实现不改变 Button 的情况下，修改 Control 类组件的效果。',
+        mapTokenGroups: ['text', 'border', 'fill', 'background'],
+      },
+      {
+        key: 'headerColor',
+        type: 'Color',
+        name: '导航色',
+        nameEn: 'Header Color',
+        desc: '只会影响页面顶部的导航栏',
+        descEn: 'Only affects the navigation bar at the top of the page.',
+        // seedToken: ['colorPrimaryHeader'],
+        seedToken: [
+          'colorBgHeader',
+          'colorBgHeaderMenuHover',
+          'colorBgHeaderMenuActive',
+          'colorTextHeaderMenu',
+          'colorTextHeaderMenuHover',
+          'colorTextHeaderMenuActive',
+        ],
+        seedTokenAlpha: true,
+      },
+      {
+        key: 'settingsColor',
+        type: 'Color',
+        name: 'UI 配置色',
+        nameEn: 'UI Settings Color',
+        desc: '用于更改 UI 配置组件的颜色',
+        descEn: 'Used to change the color of the UI Settings component.',
+        // seedToken: ['colorPrimarySettings'],
+        seedToken: ['colorSettings'],
+        seedTokenAlpha: true,
+        mapToken: ['colorBgSettingsHover', 'colorBorderSettingsHover'],
+      },
+    ],
+  },
+  {
+    name: '尺寸',
+    nameEn: 'Size',
+    desc: '',
+    descEn: '',
+    groups: [
+      {
+        key: 'font',
+        name: '文字',
+        nameEn: 'Font',
+        desc: '',
+        descEn: '',
+        seedToken: ['fontSize'],
+        groups: [
+          {
+            key: 'fontSize',
+            type: 'FontSize',
+            name: '字号',
+            nameEn: 'Font Size',
+            desc: '',
+            descEn: '',
+            mapToken: [
+              'fontSize',
+              'fontSizeSM',
+              'fontSizeLG',
+              'fontSizeXL',
+              'fontSizeHeading1',
+              'fontSizeHeading2',
+              'fontSizeHeading3',
+              'fontSizeHeading4',
+              'fontSizeHeading5',
+            ],
+            aliasToken: ['fontSizeIcon'],
+          },
+          {
+            key: 'lineHeight',
+            type: 'LineHeight',
+            name: '行高',
+            nameEn: 'Line Height',
+            desc: '',
+            descEn: '',
+            mapToken: [
+              'lineHeight',
+              'lineHeightSM',
+              'lineHeightLG',
+              'lineHeightHeading1',
+              'lineHeightHeading2',
+              'lineHeightHeading3',
+              'lineHeightHeading4',
+              'lineHeightHeading5',
+            ],
+          },
+        ],
+      },
+      {
+        key: 'spacing',
+        name: '间距',
+        nameEn: 'Spacing',
+        desc: '',
+        descEn: '',
+        seedToken: ['sizeStep', 'sizeUnit'],
+        groups: [
+          {
+            key: 'margin',
+            type: 'Margin',
+            name: '外间距',
+            nameEn: 'Margin',
+            desc: '',
+            descEn: '',
+            mapToken: ['marginXXS', 'marginXS', 'marginSM', 'margin', 'marginMD', 'marginLG', 'marginXL', 'marginXXL'],
+          },
+          {
+            key: 'padding',
+            type: 'Padding',
+            name: '内间距',
+            nameEn: 'Padding',
+            desc: '',
+            descEn: '',
+            mapToken: ['paddingXXS', 'paddingXS', 'paddingSM', 'padding', 'paddingMD', 'paddingLG', 'paddingXL'],
+            aliasToken: [
+              'paddingContentHorizontal',
+              'paddingContentVertical',
+              'paddingContentHorizontalSM',
+              'paddingContentVerticalSM',
+              'paddingContentHorizontalLG',
+              'paddingContentVerticalLG',
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '风格',
+    nameEn: 'Style',
+    desc: '',
+    descEn: '',
+    groups: [
+      {
+        key: 'borderRadius',
+        type: 'BorderRadius',
+        name: '圆角',
+        nameEn: 'Border Radius',
+        desc: '',
+        descEn: '',
+        seedToken: ['borderRadius'],
+        mapToken: ['borderRadius', 'borderRadiusSM', 'borderRadiusLG', 'borderRadiusXS'],
+      },
+      {
+        key: 'boxShadow',
+        type: 'BoxShadow',
+        name: '阴影',
+        nameEn: 'Shadow',
+        desc: '',
+        descEn: '',
+        mapToken: ['boxShadow', 'boxShadowSecondary'],
+      },
+    ],
+  },
+  {
+    name: '其他',
+    nameEn: 'Others',
+    desc: '',
+    descEn: '',
+    groups: [
+      {
+        key: 'other',
+        type: 'other',
+        name: '其他',
+        nameEn: 'Others',
+        desc: '',
+        descEn: '',
+        seedToken: ['wireframe'],
+      },
+    ],
+  },
+];
+
+export default category;

package/src/client/antd-token-previewer/meta/index.ts

@@ -0,0 +1 @@
+export { default as tokenCategory } from './category';

package/src/client/antd-token-previewer/meta/interface.ts

@@ -0,0 +1,63 @@
+import type { ComponentTokenMap } from 'antd/es/theme/interface';
+
+export interface TokenMeta {
+  type: string;
+
+  // Name
+  name: string;
+  nameEn: string;
+
+  // Description
+  desc: string;
+  descEn: string;
+
+  // Source
+  source: 'seed' | 'map' | 'alias' | 'custom' | keyof ComponentTokenMap;
+}
+
+export type TokenMetaMap = Record<string, TokenMeta>;
+
+// 二级分类，如品牌色、中性色等
+export type TokenGroup<T> = {
+  key: string;
+
+  // Group name
+  name: string;
+  nameEn: string;
+
+  // Description
+  desc: string;
+  descEn: string;
+
+  // Type
+  type?: string;
+
+  // Seed token
+  seedToken?: T[];
+  /** make seedToken can be alpha */
+  seedTokenAlpha?: boolean;
+  mapToken?: T[];
+  aliasToken?: T[];
+
+  // Children Group
+  groups?: TokenGroup<T>[];
+
+  // Extra
+  mapTokenGroups?: string[];
+  aliasTokenDescription?: string;
+};
+
+// 一级分类，如颜色、尺寸等
+export type TokenCategory<T> = {
+  // Category name
+  name: string;
+  nameEn: string;
+
+  // Description
+  desc: string;
+  descEn: string;
+
+  groups: TokenGroup<T>[];
+};
+
+export type TokenTree<T extends string = string> = TokenCategory<T>[];

package/src/client/antd-token-previewer/overviews/Error.tsx

@@ -0,0 +1,45 @@
+import { Flexbox } from '@arvinxu/layout-kit';
+import { Card } from 'antd';
+import React from 'react';
+
+import Alert from '../component-demos/alert/error';
+import Badge from '../component-demos/badge/badge';
+import Button from '../component-demos/button/dangerButton';
+import Dropdown from '../component-demos/dropdown/dropdownError';
+import Menu from '../component-demos/menu/menuDanger';
+import Message from '../component-demos/message/error';
+import Notification from '../component-demos/notification/error';
+import Progress from '../component-demos/progress/danger';
+import Tag from '../component-demos/tag/error';
+import Timeline from '../component-demos/timeline/danger';
+import Upload from '../component-demos/upload/danger';
+
+export const Error = () => {
+  return (
+    <Card size={'small'}>
+      <Flexbox horizontal align={'start'} gap={24}>
+        <Flexbox gap={24}>
+          <Flexbox horizontal align={'center'} gap={12} style={{ marginTop: 8 }}>
+            {Button.demo}
+            <div>{Tag.demo}</div>
+            {Badge.demo}
+          </Flexbox>
+          {Alert.demo}
+        </Flexbox>
+        <Flexbox align={'center'} gap={28}>
+          {Message.demo}
+          {Progress.demo}
+        </Flexbox>
+      </Flexbox>
+      <Flexbox horizontal gap={40} style={{ marginTop: 32 }}>
+        <div>{Notification.demo}</div>
+        <div>{Timeline.demo}</div>
+      </Flexbox>
+      <Flexbox horizontal gap={40}>
+        {Menu.demo}
+        <div style={{ width: 300 }}>{Upload.demo}</div>
+        {Dropdown.demo}
+      </Flexbox>
+    </Card>
+  );
+};

package/src/client/antd-token-previewer/overviews/Primary.tsx

@@ -0,0 +1,46 @@
+import { Card, Space } from 'antd';
+import React from 'react';
+
+import Button from '../component-demos/button/button-icon';
+import Menu from '../component-demos/menu/menu';
+import Pagination from '../component-demos/pagination/outline';
+import Popconfirm from '../component-demos/popconfirm/popconfirm';
+import Radio from '../component-demos/radio/radio';
+import Steps from '../component-demos/steps/steps';
+import Tabs from '../component-demos/tabs/tabs';
+
+export const Primary = ({ id }: { id?: string }) => {
+  return (
+    <Card size={'small'} bordered={false} id={id}>
+      <Space direction={'vertical'}>
+        <Space align={'start'} size={'large'}>
+          {Menu.demo}
+          <Space direction={'vertical'} size={'large'}>
+            <Space size={'large'} align={'start'}>
+              <Space direction={'vertical'} size={'large'}>
+                <div>{Button.demo}</div>
+                <div>
+                  <span>{Radio.demo}</span>
+                  {/* {Checkbox.demo} */}
+                  {/* {Switch.demo} */}
+                </div>
+                {/* <div>{RadioButton.demo}</div> */}
+                {Tabs.demo}
+                {Popconfirm.demo}
+              </Space>
+              {/* {SelectTag.demo} */}
+            </Space>
+            {Pagination.demo}
+            <div style={{ padding: 12 }}>{Steps.demo}</div>
+            <Space size={'large'} align={'start'}>
+              {/* {Timeline.demo} */}
+            </Space>
+          </Space>
+        </Space>
+        {/* {Table.demo} */}
+      </Space>
+    </Card>
+  );
+};
+
+Primary.displayName = 'Primary';

package/src/client/antd-token-previewer/overviews/Success.tsx

@@ -0,0 +1,38 @@
+import { Card } from 'antd';
+import React from 'react';
+
+import Alert from '../component-demos/alert/success';
+import Input from '../component-demos/input/success';
+import Message from '../component-demos/message/success';
+import Notification from '../component-demos/notification/success';
+import Progress from '../component-demos/progress/success';
+import Result from '../component-demos/result/success';
+import Tag from '../component-demos/tag/success';
+import Timeline from '../component-demos/timeline/success';
+
+import { Flexbox } from '@arvinxu/layout-kit';
+
+export const Success = () => {
+  return (
+    <Card size={'small'}>
+      <Flexbox horizontal align={'start'} gap={24}>
+        <Flexbox gap={40}>
+          <Flexbox horizontal align={'center'} gap={12}>
+            <div>{Tag.demo}</div>
+            {Input.demo}
+          </Flexbox>
+          {Alert.demo}
+        </Flexbox>
+        <Flexbox align={'center'} gap={28}>
+          {Message.demo}
+          {Progress.demo}
+        </Flexbox>
+      </Flexbox>
+      <Flexbox horizontal gap={40} style={{ marginTop: 32 }}>
+        <div>{Notification.demo}</div>
+        <div>{Timeline.demo}</div>
+      </Flexbox>
+      {Result.demo}
+    </Card>
+  );
+};

package/src/client/antd-token-previewer/overviews/Warning.tsx

@@ -0,0 +1,46 @@
+import { Card } from 'antd';
+import React from 'react';
+
+import Alert from '../component-demos/alert/warning';
+import Badge from '../component-demos/badge/warning';
+import Input from '../component-demos/input/warning';
+import Message from '../component-demos/message/warning';
+import Modal from '../component-demos/modal/warning';
+import Notification from '../component-demos/notification/warning';
+import Popconfirm from '../component-demos/popconfirm/popconfirm';
+import Result from '../component-demos/result/warning';
+import Tag from '../component-demos/tag/warning';
+import Text from '../component-demos/typography/warningText';
+import Title from '../component-demos/typography/warningTitle';
+
+import { Flexbox } from '@arvinxu/layout-kit';
+
+export const Warning = () => {
+  return (
+    <Card size={'small'}>
+      <Flexbox horizontal align={'start'} gap={24}>
+        <Flexbox gap={24}>
+          <Flexbox horizontal gap={12}>
+            <div style={{ width: 200 }}>{Title.demo}</div>
+            <div style={{ width: '100%' }}>{Input.demo}</div>
+          </Flexbox>
+          {Alert.demo}
+        </Flexbox>
+        <Flexbox align={'center'} gap={28}>
+          {Message.demo}
+          {Popconfirm.demo}
+          <Flexbox horizontal gap={16}>
+            {Badge.demo}
+            {Tag.demo}
+            {Text.demo}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+      <Flexbox horizontal gap={24} style={{ marginTop: 32 }}>
+        <div>{Notification.demo}</div>
+        <div>{Modal.demo}</div>
+      </Flexbox>
+      {Result.demo}
+    </Card>
+  );
+};

package/src/client/antd-token-previewer/overviews/index.ts

@@ -0,0 +1,4 @@
+export * from './Error';
+export * from './Primary';
+export * from './Success';
+export * from './Warning';