文档优化；修复 cxd 下 toast 展现不一致问题 (#1219)

docs/start/custom.md

@@ -7,14 +7,12 @@ title: 自定义
 1. 临时扩展，适合无需复用的组件。
 2. 注册自定义类型，适合需要在很多地方复用的组件。
 
-> 注意，自定义组件只支持 npm 方式，不支持 SDK
+> 注意，自定义组件只支持 React npm 方式，不支持 JS SDK
 
 ## 临时扩展
 
 amis 的配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：
 
-> 注意，由于 JSON 格式是不支持 function 类型的，所以这种扩展方式只能是在业务 JS 里面写。
-
 ```jsx
 {
   "type": "page",
@@ -52,7 +50,7 @@ amis 的配置最终会转成 React 组件来执行，所以如果只是想在
 
 与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。
 
-这种扩展方式既简单又灵活，但它是写在配置中的，如果需要在很多地方，可以使用下面的「注册自定义类型」方式：
+这种扩展方式既简单又灵活，但它是写在配置中的，无法在其他地方复用，也无法在可视化编辑器里编辑，如果需要复用或在可视化编辑器中使用，请使用下面的「注册自定义类型」方式：
 
 ## 注册自定义类型
 

scss/README.md

@@ -3,6 +3,7 @@
 目前 scss 里大量使用了 css 自定义变量，它和之前的 scss 变量明显不同，需要注意一下几点：
 
 - 目前依然有使用 scss 变量，因为有大量颜色计算，这些计算没法在自定义变量中使用，是所以目前是用两者结合的方式，想修改颜色最好的方式还是 scss 变量，但其他都能方便使用自定义变量修改，后续有可能基于 hsl 的方式来使得颜色也动态计算。
-- 负数需要使用 calc(var(--xxx) \* -1)。
-- 在变量中使用需要用 #{}，比如 --borderColorLight: #{lighten(\$borderColor, 5%)};
+- components 内的组件不要使用 @if、lighten、darken 等函数，这些功能无法支持自定义变量，解决办法是新增变量，放 `_properties.scss` 里，这样也能支持用户自定义。
+- 负数需要使用 `calc(var(--xxx) * -1)`。
+- 在变量中使用 sass 功能需要用 `#{}` 包裹，比如 `--borderColorLight: #{lighten($borderColor, 5%)}`;
 - 在 Chrome 开发工具中点变量会没反应，是因为我们的变量太多了，得先在开发工具里点一下显示全部变量。

scss/_properties.scss

@@ -794,8 +794,8 @@
   --Layout-asideLink-onHover-iconColor: inherit;
   --Layout-asideLink-onHover-iconSize: inherit;
   --Layout-brand-bg: var(--dark);
-  --Layout-brand-color: #{lighten(desaturate(lighten(#000, 40%), 10%), 25%)};
-  --Layout-brandBar-color: #{desaturate(lighten(#000, 40%), 10%)};
+  --Layout-brand-color: #{lighten(desaturate(lighten($dark, 40%), 10%), 25%)};
+  --Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)};
   --Layout-header-bg: var(--white);
   --Layout-header-boxShadow: 0 #{px2rem(2px)} #{px2rem(2px)} rgba(0, 0, 0, 0.05),
     0 1px 0 rgba(0, 0, 0, 0.05);

scss/_variables.scss

@@ -411,5 +411,5 @@ $zindex-toast: 2000 !default;
 
 $Form--horizontal-columns: 12;
 $Table-strip-bg: lighten(#f6f8f8, 1%) !default;
-$Toast-icon-fillHeight: true;
+$Toast-icon-fillHeight: true !default;
 $Number-handler-mode: 'vertical';

scss/components/_toast.scss

@@ -64,7 +64,7 @@
   pointer-events: auto;
   margin-bottom: var(--gap-xs);
 
-  @if var(--Toast-icon-fillHeight) {
+  @if $Toast-icon-fillHeight {
     padding: var(--Toast-paddingY)
       var(--Toast-paddingX)
       var(--Toast-paddingY)
@@ -130,7 +130,7 @@
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
 
-    @if var(--Toast-icon-fillHeight) {
+    @if $Toast-icon-fillHeight {
       position: absolute;
       left: var(--Toast-paddingX);
       top: var(--Toast-paddingY);

scss/themes/_cxd-variables.scss

@@ -19,6 +19,7 @@ $danger-bg: #fff5f5;
 
 $body-bg: #ffffff;
 $text-color: #666;
+$Toast-icon-fillHeight: false;
 
 @import '../variables';
 @import '../properties';
@@ -417,7 +418,6 @@ $text-color: #666;
   --Toast-borderRadius: 0;
   --Toast-paddingY: #{px2rem(5px)};
   --Toast-paddingX: #{px2rem(15px)};
-  $Toast-icon-fillHeight: false;
   --Toast-paddingL: #{px2rem(26px)};
   --Toast--info-paddingL: 0;
   --Toast-border-width: #{px2rem(1px)};