theme: 云舍成为默认主题，之前的默认主题改名 ang (#2404)

build.sh

@@ -16,10 +16,14 @@ cp -r node_modules/monaco-editor/min/vs/base/browser sdk/thirds/monaco-editor/mi
 
 # 生成去掉变量的 css
 ./node_modules/.bin/postcss sdk/sdk.css >sdk/sdk-ie11.css
-./node_modules/.bin/postcss sdk/cxd.css >sdk/cxd-ie11.css
+./node_modules/.bin/postcss sdk/ang.css >sdk/ang-ie11.css
 ./node_modules/.bin/postcss sdk/dark.css >sdk/dark-ie11.css
 ./node_modules/.bin/postcss sdk/antd.css >sdk/antd-ie11.css
 
+# 默认变成 cxd 了，所以要拷贝一份兼容之前的引用
+cp sdk/sdk.css sdk/cxd.css
+cp sdk/sdk-ie11.css sdk/cxd-ie11.css
+
 cp ./lib/helper.css sdk/helper.css
 cp examples/static/iconfont.css sdk/
 cp examples/static/iconfont.eot sdk/

docs/zh-CN/start/getting-started.md

@@ -97,7 +97,7 @@ amisScoped.updateProps(
 
 ### 切换主题
 
-jssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
+jssdk 版本默认使用 `sdk.css` 即云舍主题，如果你想用使用仿 Antd，请将 css 引用改成 `.antd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
 
 ```js
 amis.embed(
@@ -109,18 +109,16 @@ amis.embed(
     // 这里是初始 props
   },
   {
-    theme: 'cxd'
+    theme: 'antd'
   }
 );
 
 // 或者
 amisScoped.updateProps({
-  theme: 'cxd'
+  theme: 'antd'
 });
 ```
 
-暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。
-
 ### 初始值
 
 可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。
@@ -131,7 +129,7 @@ let amisJSON = {
   type: 'page',
   body: {
     type: 'tpl',
-    tpl: "${myData}"
+    tpl: '${myData}'
   }
 };
 let amisScoped = amis.embed('#root', amisJSON, {
@@ -238,7 +236,7 @@ amisScoped.unmount();
 
 ### 切换主题
 
-jssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
+jssdk 版本默认使用 `sdk.css` 即云舍主题，如果你想用使用仿 AntD 主题，请改成引用 `antd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
 
 ```js
 amis.embed(
@@ -250,12 +248,12 @@ amis.embed(
     // 默认数据
   },
   {
-    theme: 'cxd'
+    theme: 'antd'
   }
 );
 ```
 
-暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。
+> 如果想使用 amis 1.2.2 之前的默认主题，名字是 ang
 
 ### 多页模式
 
@@ -289,26 +287,24 @@ npm i amis
 
 ### 主题样式
 
-目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）`
+目前主要支持两个主题：`cxd（云舍）` 和 `angt（仿 Antd）`
 
 1. 引入样式文件：
 
 html 中引入：
 
 ```html
-<link href="./node_modules/amis/lib/themes/default.css" />
+<link href="./node_modules/amis/lib/themes/cxd.css" />
 <link href="./node_modules/amis/lib/helper.css" />
-<!-- 或 <link href="./node_modules/amis/lib/themes/cxd.css" /> -->
-<!-- 或 <link href="./node_modules/amis/lib/themes/dark.css" /> -->
+<!-- 或 <link href="./node_modules/amis/lib/themes/antd.css" /> -->
 ```
 
 js 中引入：
 
 ```js
-import './node_modules/amis/lib/themes/default.css';
+import './node_modules/amis/lib/themes/cxd.css';
 import './node_modules/amis/lib/helper.css';
-// 或 import './node_modules/amis/lib/themes/cxd.css';
-// 或 import './node_modules/amis/lib/themes/dark.css';
+// 或 import './node_modules/amis/lib/themes/antd.css';
 ```
 
 > 上面只是示例，请根据自己的项目结构调整引用路径
@@ -327,7 +323,7 @@ renderAmis(
   },
   {
     // env...
-    theme: 'default' // cxd 或 dark
+    theme: 'cxd' // cxd 或 antd
   }
 );
 ```
@@ -358,7 +354,7 @@ import {toast} from 'amis/lib/components/Toast';
 class MyComponent extends React.Component<any, any> {
   render() {
     let amisScoped;
-    let theme = 'default';
+    let theme = 'cxd';
     return (
       <div>
         <p>通过 amis 渲染页面</p>

docs/zh-CN/style/index.md

@@ -8,7 +8,7 @@ title: 快速开始
 
 1. 使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。
 2. 使用辅助 class，可以对单个组件做定制修改。
-3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 `scss\themes\default.scss` 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。
+3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 `scss\themes\cxd.scss` 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。
 4. `wrapper` 组件可以直接写内嵌 `style`。
 
 本文主要介绍前两种方法：

examples/components/App.tsx

@@ -44,25 +44,24 @@ export function getContextPath() {
 
 const themes = [
   {
-    label: '默认主题',
-    ns: 'a-',
-    value: 'default'
-  },
-
-  {
-    label: '百度云舍',
+    label: '云舍',
     ns: 'cxd-',
     value: 'cxd'
   },
-  {
-    label: 'Dark',
-    ns: 'dark-',
-    value: 'dark'
-  },
   {
     label: '仿 AntD',
     ns: 'antd-',
     value: 'antd'
+  },
+  {
+    label: 'ang',
+    ns: 'a-',
+    value: 'ang'
+  },
+  {
+    label: 'Dark',
+    ns: 'dark-',
+    value: 'dark'
   }
 ];
 

examples/index.html

@@ -32,14 +32,17 @@
       }
     </style>
     <script type="text/x-jsx">
-      const theme = localStorage.getItem('theme') || 'default';
+      let theme = localStorage.getItem('theme') || 'cxd';
+      if (theme === 'default') {
+        theme = 'cxd';
+      }
 
       // 非 IE 模式
       if (window.navigator.userAgent.indexOf('Trident') === -1) {
         document.write(
-          `<link rel="stylesheet" title="default" ${
-            theme !== 'default' ? 'disabled' : ''
-          }  href="${__uri('../scss/themes/default.scss')}" />`
+          `<link rel="stylesheet" title="ang" ${
+            theme !== 'ang' ? 'disabled' : ''
+          }  href="${__uri('../scss/themes/ang.scss')}" />`
         );
         document.write(
           `<link rel="stylesheet" title="cxd" ${

examples/mobile.html

@@ -17,7 +17,7 @@
     />
     <link rel="stylesheet" href="animate.css/animate.css" />
     <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
-    <link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
+    <link rel="stylesheet" title="ang" href="../scss/themes/ang.scss" />
     <link
       rel="stylesheet"
       title="cxd"
@@ -52,12 +52,12 @@
     <script type="text/javascript">
       const themes = [
         {
-          label: '默认主题',
-          value: 'default'
+          label: '云舍',
+          value: 'cxd'
         },
         {
-          label: '百度云舍',
-          value: 'cxd'
+          label: 'Ang',
+          value: 'ang'
         },
         {
           label: 'Dark',

examples/sdk-placeholder.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="animate.css/animate.css" />
     <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
     <!--STYLE_PLACEHOLDER-->
-    <link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
+    <link rel="stylesheet" title="ang" href="../scss/themes/ang.scss" />
     <link rel="stylesheet" title="cxd" href="../scss/themes/cxd.scss" />
     <link rel="stylesheet" title="dark" href="../scss/themes/dark.scss" />
     <link rel="stylesheet" title="antd" href="../scss/themes/antd.scss" />

scripts/embed-packager.js

@@ -120,7 +120,6 @@ module.exports = function (ret, pack, settings, opt) {
           file.skiped = true;
           let contents = file.getContent();
 
-
           if (/_map\.js$/.test(file.subpath)) {
             contents = `(function() {
     var d = '';
@@ -195,7 +194,7 @@ module.exports = function (ret, pack, settings, opt) {
   // cssFile.setContent(cssContents);
   // ret.pkg[cssFile.subpath] = cssFile;
 
-  const themes = ['default', 'cxd', 'dark', 'antd'];
+  const themes = ['ang', 'cxd', 'dark', 'antd'];
 
   themes.forEach(function (theme) {
     const rest = themes.filter(a => a !== theme).map(item => item + '.scss');
@@ -205,10 +204,7 @@ module.exports = function (ret, pack, settings, opt) {
       .join('\n');
 
     contents = prefixCss(contents, '.amis-scope');
-    let cssFile = fis.file(
-      root,
-      (theme === 'default' ? 'sdk' : theme) + '.css'
-    );
+    let cssFile = fis.file(root, (theme === 'cxd' ? 'sdk' : theme) + '.css');
     cssFile.setContent(contents);
     ret.pkg[cssFile.subpath] = cssFile;
   });

scss/themes/ang-ie11.scss

@@ -0,0 +1 @@
+@import url('./ang.scss?__inline');

scss/themes/ang.scss

@@ -0,0 +1,4 @@
+// Ang 主题
+@import './ang-variables';
+
+@import './common';

scss/themes/default-ie11.scss

@@ -1 +0,0 @@
-@import url('./default.scss?__inline');

scss/themes/default.scss

@@ -1,4 +0,0 @@
-// 默认主题
-@import './default-variables';
-
-@import './common';

src/Root.tsx

@@ -57,10 +57,14 @@ export class Root extends React.Component<RootProps> {
     } = this.props;
 
     const theme = env.theme;
+    let themeName = this.props.theme || 'cxd';
+    if (themeName === 'default') {
+      themeName = 'cxd';
+    }
 
     return (
       <RootStoreContext.Provider value={rootStore}>
-        <ThemeContext.Provider value={this.props.theme || 'default'}>
+        <ThemeContext.Provider value={themeName}>
           <LocaleContext.Provider value={this.props.locale!}>
             <ImageGallery modalContainer={env.getModalContainer}>
               <RootRenderer

src/factory.tsx

@@ -354,7 +354,10 @@ export function render(
   (window as any).amisStore = store; // 为了方便 debug.
   const env = getEnv(store);
 
-  const theme = props.theme || options.theme || 'default';
+  let theme = props.theme || options.theme || 'cxd';
+  if (theme === 'default') {
+    theme = 'cxd';
+  }
   env.theme = getTheme(theme);
 
   if (props.locale !== undefined) {

src/index.tsx

@@ -173,7 +173,7 @@ import './compat';
 
 import './envOverwrite';
 
-import './themes/default';
+import './themes/ang';
 import './themes/cxd';
 import './themes/dark';
 import './themes/antd';

src/theme.tsx

@@ -128,7 +128,7 @@ export interface ThemeOutterProps {
   classnames?: ClassNamesFn;
 }
 
-export let defaultTheme: string = 'default';
+export let defaultTheme: string = 'cxd';
 export const ThemeContext = React.createContext('');
 
 export function themeable<

src/themes/ang.ts

@@ -0,0 +1,8 @@
+import {theme, ClassNamesFn, makeClassnames} from '../theme';
+export const classPrefix: string = 'a-';
+export const classnames: ClassNamesFn = makeClassnames(classPrefix);
+
+theme('ang', {
+  classPrefix,
+  classnames
+});

src/themes/default.ts

@@ -1,8 +1,5 @@
-import {theme, ClassNamesFn, makeClassnames} from '../theme';
-export const classPrefix: string = 'a-';
-export const classnames: ClassNamesFn = makeClassnames(classPrefix);
+/**
+ * @file 这个文件只作为兼容，后续没有 default 了，default 就是 cxd
+ */
 
-theme('default', {
-  classPrefix,
-  classnames
-});
+import './cxd';