Upgrade to antd-v5(formily-antd-v5) version

[YqxLzx]

(下面统一称呼 antd-v5和formil-antd-v5为 antd-v5 .)

必要依赖:

1. "antd": "^5.2.6",
2. "@designable/react-settings-form": "^1.0.0-beta.45",
3. "@formily/antd": "3.0.0-alpha.1", //切记不要使用@formily/antd-v5,和designable不兼容
4. "@formily/core": "^2.2.14",
5. "@formily/json-schema": "^2.2.14",
6. "@formily/react": "^2.2.14",
7. "@formily/reactive": "^2.2.14",
8. "@formily/reactive-react": "^2.2.14",
9. "@formily/shared": "^2.2.14".

less变量
完成上面步骤后，designable中formily生产的组件都会变成antd-v5，也就是会通过token改变，但是其余样式，比如画布仍然使用的less变量实现主体，当然可以去通过修改源码为token，但我认为成本较大，于是我们可以选择修改less变量去实现统一主题。

  //example:
  const root = document.documentElement;
  root.style.setProperty('--dn-brand-color',‘your color’);

明暗模式
改变明暗模式也应该通过less，我们可以选择移除类名是"dn-app"的"dn-light",这样其余组件就会继承"dn-dark"中的less变量，此时就是暗黑模式

------------------------------------------------i am devision--------------------------------------------------------

(I will call both antd-v5 and formily-antd-v5 antd-v5 in following context .)

Dependencies:

1. "antd": "^5.2.6",
2. "@designable/react-settings-form": "^1.0.0-beta.45",
3. "@formily/antd": "3.0.0-alpha.1", // please don't use @formily/antd-v5 , it's not compatible with designable . so sad .
4. "@formily/core": "^2.2.14",
5. "@formily/json-schema": "^2.2.14",
6. "@formily/react": "^2.2.14",
7. "@formily/reactive": "^2.2.14",
8. "@formily/reactive-react": "^2.2.14",
9. "@formily/shared": "^2.2.14",

process less variables

If you do the above way , formily component will use antd-v5 as version, so if you want to change their theme you need to use token . But other styles using less to control theme , giving you the example , the main canvas "CompositePanel" . so we should change it to be better using less variables rather than changing origin codes .

  //example:
  const root = document.documentElement;
  root.style.setProperty('--dn-brand-color',‘your color’);

light and dark

we can get an DOM that have classname calling "dn-app" , it also have others classnames , "dn-light" and "dn-dark" . When we want to change the theme to dark mode , we only remove the "dn-light" , it's just ok .

[yiyunwan]

https://github.com/pindjs/designable