test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

style: 主题变量整理 (#5712)

Browse Source 
* style: 主题变量整理

* styles: 主题变量独立组件

* style: transfer style
This commit is contained in:
qinhaoyan 2022-11-11 15:40:46 +08:00 committed by GitHub
parent e0deeb585b
commit bc59853b17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 2180 additions and 4163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/components/App.tsx
View File

@ -58,11 +58,6 @@ const themes = [
label: 'ang',
ns: 'a-',
value: 'ang'
},
{
label: 'Dark',
ns: 'dark-',
value: 'dark'
}
];

2
index.html
View File

@ -41,7 +41,7 @@
theme = 'cxd';
}
['ang', 'cxd', 'dark', 'antd'].forEach(key => {
['ang', 'cxd', 'antd'].forEach(key => {
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('title', key);

899
packages/amis-ui/scss/_components.scss Normal file
View File

@ -0,0 +1,899 @@
// 新版主题标准组件变量
:root {
--button-default-default-top-border-color: var(--colors-neutral-line-8);
--button-default-default-top-border-style: var(--borders-style-2);
--button-default-default-top-border-width: var(--borders-width-2);
--button-default-default-left-border-color: var(--colors-neutral-line-8);
--button-default-default-left-border-style: var(--borders-style-2);
--button-default-default-left-border-width: var(--borders-width-2);
--button-default-default-right-border-color: var(--colors-neutral-line-8);
--button-default-default-right-border-style: var(--borders-style-2);
--button-default-default-right-border-width: var(--borders-width-2);
--button-default-default-bottom-border-color: var(--colors-neutral-line-8);
--button-default-default-bottom-border-style: var(--borders-style-2);
--button-default-default-bottom-border-width: var(--borders-width-2);
--button-default-default-shadow: var(--shadows-shadow-none);
--button-default-default-bg-color: var(--colors-neutral-fill-none);
--button-default-default-font-color: var(--colors-neutral-text-2);
--button-default-hover-top-border-color: var(--colors-brand-5);
--button-default-hover-top-border-style: var(--borders-style-2);
--button-default-hover-top-border-width: var(--borders-width-2);
--button-default-hover-left-border-color: var(--colors-brand-5);
--button-default-hover-left-border-style: var(--borders-style-2);
--button-default-hover-left-border-width: var(--borders-width-2);
--button-default-hover-right-border-color: var(--colors-brand-5);
--button-default-hover-right-border-style: var(--borders-style-2);
--button-default-hover-right-border-width: var(--borders-width-2);
--button-default-hover-bottom-border-color: var(--colors-brand-5);
--button-default-hover-bottom-border-style: var(--borders-style-2);
--button-default-hover-bottom-border-width: var(--borders-width-2);
--button-default-hover-shadow: var(--shadows-shadow-none);
--button-default-hover-bg-color: var(--colors-neutral-fill-none);
--button-default-hover-font-color: var(--colors-brand-5);
--button-default-active-top-border-color: var(--colors-brand-4);
--button-default-active-top-border-style: var(--borders-style-2);
--button-default-active-top-border-width: var(--borders-width-2);
--button-default-active-left-border-color: var(--colors-brand-4);
--button-default-active-left-border-style: var(--borders-style-2);
--button-default-active-left-border-width: var(--borders-width-2);
--button-default-active-right-border-color: var(--colors-brand-4);
--button-default-active-right-border-style: var(--borders-style-2);
--button-default-active-right-border-width: var(--borders-width-2);
--button-default-active-bottom-border-color: var(--colors-brand-4);
--button-default-active-bottom-border-style: var(--borders-style-2);
--button-default-active-bottom-border-width: var(--borders-width-2);
--button-default-active-shadow: var(--shadows-shadow-none);
--button-default-active-bg-color: var(--colors-neutral-fill-none);
--button-default-active-font-color: var(--colors-brand-4);
--button-default-disabled-top-border-color: var(--colors-neutral-line-8);
--button-default-disabled-top-border-style: var(--borders-style-2);
--button-default-disabled-top-border-width: var(--borders-width-2);
--button-default-disabled-left-border-color: var(--colors-neutral-line-8);
--button-default-disabled-left-border-style: var(--borders-style-2);
--button-default-disabled-left-border-width: var(--borders-width-2);
--button-default-disabled-right-border-color: var(--colors-neutral-line-8);
--button-default-disabled-right-border-style: var(--borders-style-2);
--button-default-disabled-right-border-width: var(--borders-width-2);
--button-default-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-default-disabled-bottom-border-style: var(--borders-style-2);
--button-default-disabled-bottom-border-width: var(--borders-width-2);
--button-default-disabled-shadow: var(--shadows-shadow-none);
--button-default-disabled-bg-color: var(--colors-neutral-fill-10);
--button-default-disabled-font-color: var(--colors-neutral-text-6);
--button-primary-default-top-border-color: var(--colors-brand-5);
--button-primary-default-top-border-style: var(--borders-style-2);
--button-primary-default-top-border-width: var(--borders-width-2);
--button-primary-default-left-border-color: var(--colors-brand-5);
--button-primary-default-left-border-style: var(--borders-style-2);
--button-primary-default-left-border-width: var(--borders-width-2);
--button-primary-default-right-border-color: var(--colors-brand-5);
--button-primary-default-right-border-style: var(--borders-style-2);
--button-primary-default-right-border-width: var(--borders-width-2);
--button-primary-default-bottom-border-color: var(--colors-brand-5);
--button-primary-default-bottom-border-style: var(--borders-style-2);
--button-primary-default-bottom-border-width: var(--borders-width-2);
--button-primary-default-shadow: var(--shadows-shadow-none);
--button-primary-default-bg-color: var(--colors-brand-5);
--button-primary-default-font-color: var(--colors-neutral-text-11);
--button-primary-hover-top-border-color: var(--colors-brand-6);
--button-primary-hover-top-border-style: var(--borders-style-2);
--button-primary-hover-top-border-width: var(--borders-width-2);
--button-primary-hover-left-border-color: var(--colors-brand-6);
--button-primary-hover-left-border-style: var(--borders-style-2);
--button-primary-hover-left-border-width: var(--borders-width-2);
--button-primary-hover-right-border-color: var(--colors-brand-6);
--button-primary-hover-right-border-style: var(--borders-style-2);
--button-primary-hover-right-border-width: var(--borders-width-2);
--button-primary-hover-bottom-border-color: var(--colors-brand-6);
--button-primary-hover-bottom-border-style: var(--borders-style-2);
--button-primary-hover-bottom-border-width: var(--borders-width-2);
--button-primary-hover-shadow: var(--shadows-shadow-none);
--button-primary-hover-bg-color: var(--colors-brand-6);
--button-primary-hover-font-color: var(--colors-neutral-text-11);
--button-primary-active-top-border-color: var(--colors-brand-4);
--button-primary-active-top-border-style: var(--borders-style-2);
--button-primary-active-top-border-width: var(--borders-width-2);
--button-primary-active-left-border-color: var(--colors-brand-4);
--button-primary-active-left-border-style: var(--borders-style-2);
--button-primary-active-left-border-width: var(--borders-width-2);
--button-primary-active-right-border-color: var(--colors-brand-4);
--button-primary-active-right-border-style: var(--borders-style-2);
--button-primary-active-right-border-width: var(--borders-width-2);
--button-primary-active-bottom-border-color: var(--colors-brand-4);
--button-primary-active-bottom-border-style: var(--borders-style-2);
--button-primary-active-bottom-border-width: var(--borders-width-2);
--button-primary-active-shadow: var(--shadows-shadow-none);
--button-primary-active-bg-color: var(--colors-brand-4);
--button-primary-active-font-color: var(--colors-neutral-text-11);
--button-primary-disabled-top-border-color: var(--colors-neutral-line-8);
--button-primary-disabled-top-border-style: var(--borders-style-2);
--button-primary-disabled-top-border-width: var(--borders-width-2);
--button-primary-disabled-left-border-color: var(--colors-neutral-line-8);
--button-primary-disabled-left-border-style: var(--borders-style-2);
--button-primary-disabled-left-border-width: var(--borders-width-2);
--button-primary-disabled-right-border-color: var(--colors-neutral-line-8);
--button-primary-disabled-right-border-style: var(--borders-style-2);
--button-primary-disabled-right-border-width: var(--borders-width-2);
--button-primary-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-primary-disabled-bottom-border-style: var(--borders-style-2);
--button-primary-disabled-bottom-border-width: var(--borders-width-2);
--button-primary-disabled-shadow: var(--shadows-shadow-none);
--button-primary-disabled-bg-color: var(--colors-neutral-fill-10);
--button-primary-disabled-font-color: var(--colors-neutral-text-6);
--button-secondary-default-top-border-color: var(--colors-neutral-line-6);
--button-secondary-default-top-border-style: var(--borders-style-2);
--button-secondary-default-top-border-width: var(--borders-width-2);
--button-secondary-default-left-border-color: var(--colors-neutral-line-6);
--button-secondary-default-left-border-style: var(--borders-style-2);
--button-secondary-default-left-border-width: var(--borders-width-2);
--button-secondary-default-right-border-color: var(--colors-neutral-line-6);
--button-secondary-default-right-border-style: var(--borders-style-2);
--button-secondary-default-right-border-width: var(--borders-width-2);
--button-secondary-default-bottom-border-color: var(--colors-neutral-line-6);
--button-secondary-default-bottom-border-style: var(--borders-style-2);
--button-secondary-default-bottom-border-width: var(--borders-width-2);
--button-secondary-default-shadow: var(--shadows-shadow-none);
--button-secondary-default-bg-color: var(--colors-neutral-fill-6);
--button-secondary-default-font-color: var(--colors-neutral-text-11);
--button-secondary-hover-top-border-color: var(--colors-neutral-line-5);
--button-secondary-hover-top-border-style: var(--borders-style-2);
--button-secondary-hover-top-border-width: var(--borders-width-2);
--button-secondary-hover-left-border-color: var(--colors-neutral-line-5);
--button-secondary-hover-left-border-style: var(--borders-style-2);
--button-secondary-hover-left-border-width: var(--borders-width-2);
--button-secondary-hover-right-border-color: var(--colors-neutral-line-5);
--button-secondary-hover-right-border-style: var(--borders-style-2);
--button-secondary-hover-right-border-width: var(--borders-width-2);
--button-secondary-hover-bottom-border-color: var(--colors-neutral-line-5);
--button-secondary-hover-bottom-border-style: var(--borders-style-2);
--button-secondary-hover-bottom-border-width: var(--borders-width-2);
--button-secondary-hover-shadow: var(--shadows-shadow-none);
--button-secondary-hover-bg-color: var(--colors-neutral-fill-5);
--button-secondary-hover-font-color: var(--colors-neutral-text-11);
--button-secondary-active-top-border-color: var(--colors-neutral-line-4);
--button-secondary-active-top-border-style: var(--borders-style-2);
--button-secondary-active-top-border-width: var(--borders-width-2);
--button-secondary-active-left-border-color: var(--colors-neutral-line-4);
--button-secondary-active-left-border-style: var(--borders-style-2);
--button-secondary-active-left-border-width: var(--borders-width-2);
--button-secondary-active-right-border-color: var(--colors-neutral-line-4);
--button-secondary-active-right-border-style: var(--borders-style-2);
--button-secondary-active-right-border-width: var(--borders-width-2);
--button-secondary-active-bottom-border-color: var(--colors-neutral-line-4);
--button-secondary-active-bottom-border-style: var(--borders-style-2);
--button-secondary-active-bottom-border-width: var(--borders-width-2);
--button-secondary-active-shadow: var(--shadows-shadow-none);
--button-secondary-active-bg-color: var(--colors-neutral-fill-4);
--button-secondary-active-font-color: var(--colors-neutral-text-11);
--button-secondary-disabled-top-border-color: var(--colors-neutral-line-8);
--button-secondary-disabled-top-border-style: var(--borders-style-2);
--button-secondary-disabled-top-border-width: var(--borders-width-2);
--button-secondary-disabled-left-border-color: var(--colors-neutral-line-8);
--button-secondary-disabled-left-border-style: var(--borders-style-2);
--button-secondary-disabled-left-border-width: var(--borders-width-2);
--button-secondary-disabled-right-border-color: var(--colors-neutral-line-8);
--button-secondary-disabled-right-border-style: var(--borders-style-2);
--button-secondary-disabled-right-border-width: var(--borders-width-2);
--button-secondary-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-secondary-disabled-bottom-border-style: var(--borders-style-2);
--button-secondary-disabled-bottom-border-width: var(--borders-width-2);
--button-secondary-disabled-shadow: var(--shadows-shadow-none);
--button-secondary-disabled-bg-color: var(--colors-neutral-fill-10);
--button-secondary-disabled-font-color: var(--colors-neutral-text-6);
--button-enhance-default-top-border-color: var(--colors-brand-5);
--button-enhance-default-top-border-style: var(--borders-style-2);
--button-enhance-default-top-border-width: var(--borders-width-2);
--button-enhance-default-left-border-color: var(--colors-brand-5);
--button-enhance-default-left-border-style: var(--borders-style-2);
--button-enhance-default-left-border-width: var(--borders-width-2);
--button-enhance-default-right-border-color: var(--colors-brand-5);
--button-enhance-default-right-border-style: var(--borders-style-2);
--button-enhance-default-right-border-width: var(--borders-width-2);
--button-enhance-default-bottom-border-color: var(--colors-brand-5);
--button-enhance-default-bottom-border-style: var(--borders-style-2);
--button-enhance-default-bottom-border-width: var(--borders-width-2);
--button-enhance-default-shadow: var(--shadows-shadow-none);
--button-enhance-default-bg-color: var(--colors-neutral-fill-none);
--button-enhance-default-font-color: var(--colors-brand-5);
--button-enhance-hover-top-border-color: var(--colors-brand-6);
--button-enhance-hover-top-border-style: var(--borders-style-2);
--button-enhance-hover-top-border-width: var(--borders-width-2);
--button-enhance-hover-left-border-color: var(--colors-brand-6);
--button-enhance-hover-left-border-style: var(--borders-style-2);
--button-enhance-hover-left-border-width: var(--borders-width-2);
--button-enhance-hover-right-border-color: var(--colors-brand-6);
--button-enhance-hover-right-border-style: var(--borders-style-2);
--button-enhance-hover-right-border-width: var(--borders-width-2);
--button-enhance-hover-bottom-border-color: var(--colors-brand-6);
--button-enhance-hover-bottom-border-style: var(--borders-style-2);
--button-enhance-hover-bottom-border-width: var(--borders-width-2);
--button-enhance-hover-shadow: var(--shadows-shadow-none);
--button-enhance-hover-bg-color: var(--colors-neutral-fill-none);
--button-enhance-hover-font-color: var(--colors-brand-6);
--button-enhance-active-top-border-color: var(--colors-brand-4);
--button-enhance-active-top-border-style: var(--borders-style-2);
--button-enhance-active-top-border-width: var(--borders-width-2);
--button-enhance-active-left-border-color: var(--colors-brand-4);
--button-enhance-active-left-border-style: var(--borders-style-2);
--button-enhance-active-left-border-width: var(--borders-width-2);
--button-enhance-active-right-border-color: var(--colors-brand-4);
--button-enhance-active-right-border-style: var(--borders-style-2);
--button-enhance-active-right-border-width: var(--borders-width-2);
--button-enhance-active-bottom-border-color: var(--colors-brand-4);
--button-enhance-active-bottom-border-style: var(--borders-style-2);
--button-enhance-active-bottom-border-width: var(--borders-width-2);
--button-enhance-active-shadow: var(--shadows-shadow-none);
--button-enhance-active-bg-color: var(--colors-neutral-fill-none);
--button-enhance-active-font-color: var(--colors-brand-4);
--button-enhance-disabled-top-border-color: var(--colors-neutral-line-8);
--button-enhance-disabled-top-border-style: var(--borders-style-2);
--button-enhance-disabled-top-border-width: var(--borders-width-2);
--button-enhance-disabled-left-border-color: var(--colors-neutral-line-8);
--button-enhance-disabled-left-border-style: var(--borders-style-2);
--button-enhance-disabled-left-border-width: var(--borders-width-2);
--button-enhance-disabled-right-border-color: var(--colors-neutral-line-8);
--button-enhance-disabled-right-border-style: var(--borders-style-2);
--button-enhance-disabled-right-border-width: var(--borders-width-2);
--button-enhance-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-enhance-disabled-bottom-border-style: var(--borders-style-2);
--button-enhance-disabled-bottom-border-width: var(--borders-width-2);
--button-enhance-disabled-shadow: var(--shadows-shadow-none);
--button-enhance-disabled-bg-color: var(--colors-neutral-fill-10);
--button-enhance-disabled-font-color: var(--colors-neutral-text-6);
--button-info-default-top-border-color: var(--colors-info-5);
--button-info-default-top-border-style: var(--borders-style-2);
--button-info-default-top-border-width: var(--borders-width-2);
--button-info-default-left-border-color: var(--colors-info-5);
--button-info-default-left-border-style: var(--borders-style-2);
--button-info-default-left-border-width: var(--borders-width-2);
--button-info-default-right-border-color: var(--colors-info-5);
--button-info-default-right-border-style: var(--borders-style-2);
--button-info-default-right-border-width: var(--borders-width-2);
--button-info-default-bottom-border-color: var(--colors-info-5);
--button-info-default-bottom-border-style: var(--borders-style-2);
--button-info-default-bottom-border-width: var(--borders-width-2);
--button-info-default-shadow: var(--shadows-shadow-none);
--button-info-default-bg-color: var(--colors-info-5);
--button-info-default-font-color: var(--colors-neutral-text-11);
--button-info-hover-top-border-color: var(--colors-info-6);
--button-info-hover-top-border-style: var(--borders-style-2);
--button-info-hover-top-border-width: var(--borders-width-2);
--button-info-hover-left-border-color: var(--colors-info-6);
--button-info-hover-left-border-style: var(--borders-style-2);
--button-info-hover-left-border-width: var(--borders-width-2);
--button-info-hover-right-border-color: var(--colors-info-6);
--button-info-hover-right-border-style: var(--borders-style-2);
--button-info-hover-right-border-width: var(--borders-width-2);
--button-info-hover-bottom-border-color: var(--colors-info-6);
--button-info-hover-bottom-border-style: var(--borders-style-2);
--button-info-hover-bottom-border-width: var(--borders-width-2);
--button-info-hover-shadow: var(--shadows-shadow-none);
--button-info-hover-bg-color: var(--colors-info-6);
--button-info-hover-font-color: var(--colors-neutral-text-11);
--button-info-active-top-border-color: var(--colors-info-4);
--button-info-active-top-border-style: var(--borders-style-2);
--button-info-active-top-border-width: var(--borders-width-2);
--button-info-active-left-border-color: var(--colors-info-4);
--button-info-active-left-border-style: var(--borders-style-2);
--button-info-active-left-border-width: var(--borders-width-2);
--button-info-active-right-border-color: var(--colors-info-4);
--button-info-active-right-border-style: var(--borders-style-2);
--button-info-active-right-border-width: var(--borders-width-2);
--button-info-active-bottom-border-color: var(--colors-info-4);
--button-info-active-bottom-border-style: var(--borders-style-2);
--button-info-active-bottom-border-width: var(--borders-width-2);
--button-info-active-shadow: var(--shadows-shadow-none);
--button-info-active-bg-color: var(--colors-info-4);
--button-info-active-font-color: var(--colors-neutral-text-11);
--button-info-disabled-top-border-color: var(--colors-neutral-line-8);
--button-info-disabled-top-border-style: var(--borders-style-2);
--button-info-disabled-top-border-width: var(--borders-width-2);
--button-info-disabled-left-border-color: var(--colors-neutral-line-8);
--button-info-disabled-left-border-style: var(--borders-style-2);
--button-info-disabled-left-border-width: var(--borders-width-2);
--button-info-disabled-right-border-color: var(--colors-neutral-line-8);
--button-info-disabled-right-border-style: var(--borders-style-2);
--button-info-disabled-right-border-width: var(--borders-width-2);
--button-info-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-info-disabled-bottom-border-style: var(--borders-style-2);
--button-info-disabled-bottom-border-width: var(--borders-width-2);
--button-info-disabled-shadow: var(--shadows-shadow-none);
--button-info-disabled-bg-color: var(--colors-neutral-fill-10);
--button-info-disabled-font-color: var(--colors-neutral-text-6);
--button-success-default-top-border-color: var(--colors-success-5);
--button-success-default-top-border-style: var(--borders-style-2);
--button-success-default-top-border-width: var(--borders-width-2);
--button-success-default-left-border-color: var(--colors-success-5);
--button-success-default-left-border-style: var(--borders-style-2);
--button-success-default-left-border-width: var(--borders-width-2);
--button-success-default-right-border-color: var(--colors-success-5);
--button-success-default-right-border-style: var(--borders-style-2);
--button-success-default-right-border-width: var(--borders-width-2);
--button-success-default-bottom-border-color: var(--colors-success-5);
--button-success-default-bottom-border-style: var(--borders-style-2);
--button-success-default-bottom-border-width: var(--borders-width-2);
--button-success-default-shadow: var(--shadows-shadow-none);
--button-success-default-bg-color: var(--colors-success-5);
--button-success-default-font-color: var(--colors-neutral-text-11);
--button-success-hover-top-border-color: var(--colors-success-6);
--button-success-hover-top-border-style: var(--borders-style-2);
--button-success-hover-top-border-width: var(--borders-width-2);
--button-success-hover-left-border-color: var(--colors-success-6);
--button-success-hover-left-border-style: var(--borders-style-2);
--button-success-hover-left-border-width: var(--borders-width-2);
--button-success-hover-right-border-color: var(--colors-success-6);
--button-success-hover-right-border-style: var(--borders-style-2);
--button-success-hover-right-border-width: var(--borders-width-2);
--button-success-hover-bottom-border-color: var(--colors-success-6);
--button-success-hover-bottom-border-style: var(--borders-style-2);
--button-success-hover-bottom-border-width: var(--borders-width-2);
--button-success-hover-shadow: var(--shadows-shadow-none);
--button-success-hover-bg-color: var(--colors-success-6);
--button-success-hover-font-color: var(--colors-neutral-text-11);
--button-success-active-top-border-color: var(--colors-success-4);
--button-success-active-top-border-style: var(--borders-style-2);
--button-success-active-top-border-width: var(--borders-width-2);
--button-success-active-left-border-color: var(--colors-success-4);
--button-success-active-left-border-style: var(--borders-style-2);
--button-success-active-left-border-width: var(--borders-width-2);
--button-success-active-right-border-color: var(--colors-success-4);
--button-success-active-right-border-style: var(--borders-style-2);
--button-success-active-right-border-width: var(--borders-width-2);
--button-success-active-bottom-border-color: var(--colors-success-4);
--button-success-active-bottom-border-style: var(--borders-style-2);
--button-success-active-bottom-border-width: var(--borders-width-2);
--button-success-active-shadow: var(--shadows-shadow-none);
--button-success-active-bg-color: var(--colors-success-4);
--button-success-active-font-color: var(--colors-neutral-text-11);
--button-success-disabled-top-border-color: var(--colors-neutral-line-8);
--button-success-disabled-top-border-style: var(--borders-style-2);
--button-success-disabled-top-border-width: var(--borders-width-2);
--button-success-disabled-left-border-color: var(--colors-neutral-line-8);
--button-success-disabled-left-border-style: var(--borders-style-2);
--button-success-disabled-left-border-width: var(--borders-width-2);
--button-success-disabled-right-border-color: var(--colors-neutral-line-8);
--button-success-disabled-right-border-style: var(--borders-style-2);
--button-success-disabled-right-border-width: var(--borders-width-2);
--button-success-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-success-disabled-bottom-border-style: var(--borders-style-2);
--button-success-disabled-bottom-border-width: var(--borders-width-2);
--button-success-disabled-shadow: var(--shadows-shadow-none);
--button-success-disabled-bg-color: var(--colors-neutral-fill-10);
--button-success-disabled-font-color: var(--colors-neutral-text-6);
--button-warning-default-top-border-color: var(--colors-warning-5);
--button-warning-default-top-border-style: var(--borders-style-2);
--button-warning-default-top-border-width: var(--borders-width-2);
--button-warning-default-left-border-color: var(--colors-warning-5);
--button-warning-default-left-border-style: var(--borders-style-2);
--button-warning-default-left-border-width: var(--borders-width-2);
--button-warning-default-right-border-color: var(--colors-warning-5);
--button-warning-default-right-border-style: var(--borders-style-2);
--button-warning-default-right-border-width: var(--borders-width-2);
--button-warning-default-bottom-border-color: var(--colors-warning-5);
--button-warning-default-bottom-border-style: var(--borders-style-2);
--button-warning-default-bottom-border-width: var(--borders-width-2);
--button-warning-default-shadow: var(--shadows-shadow-none);
--button-warning-default-bg-color: var(--colors-warning-5);
--button-warning-default-font-color: var(--colors-neutral-text-11);
--button-warning-hover-top-border-color: var(--colors-warning-6);
--button-warning-hover-top-border-style: var(--borders-style-2);
--button-warning-hover-top-border-width: var(--borders-width-2);
--button-warning-hover-left-border-color: var(--colors-warning-6);
--button-warning-hover-left-border-style: var(--borders-style-2);
--button-warning-hover-left-border-width: var(--borders-width-2);
--button-warning-hover-right-border-color: var(--colors-warning-6);
--button-warning-hover-right-border-style: var(--borders-style-2);
--button-warning-hover-right-border-width: var(--borders-width-2);
--button-warning-hover-bottom-border-color: var(--colors-warning-6);
--button-warning-hover-bottom-border-style: var(--borders-style-2);
--button-warning-hover-bottom-border-width: var(--borders-width-2);
--button-warning-hover-shadow: var(--shadows-shadow-none);
--button-warning-hover-bg-color: var(--colors-warning-6);
--button-warning-hover-font-color: var(--colors-neutral-text-11);
--button-warning-active-top-border-color: var(--colors-warning-4);
--button-warning-active-top-border-style: var(--borders-style-2);
--button-warning-active-top-border-width: var(--borders-width-2);
--button-warning-active-left-border-color: var(--colors-warning-4);
--button-warning-active-left-border-style: var(--borders-style-2);
--button-warning-active-left-border-width: var(--borders-width-2);
--button-warning-active-right-border-color: var(--colors-warning-4);
--button-warning-active-right-border-style: var(--borders-style-2);
--button-warning-active-right-border-width: var(--borders-width-2);
--button-warning-active-bottom-border-color: var(--colors-warning-4);
--button-warning-active-bottom-border-style: var(--borders-style-2);
--button-warning-active-bottom-border-width: var(--borders-width-2);
--button-warning-active-shadow: var(--shadows-shadow-none);
--button-warning-active-bg-color: var(--colors-warning-4);
--button-warning-active-font-color: var(--colors-neutral-text-11);
--button-warning-disabled-top-border-color: var(--colors-neutral-line-8);
--button-warning-disabled-top-border-style: var(--borders-style-2);
--button-warning-disabled-top-border-width: var(--borders-width-2);
--button-warning-disabled-left-border-color: var(--colors-neutral-line-8);
--button-warning-disabled-left-border-style: var(--borders-style-2);
--button-warning-disabled-left-border-width: var(--borders-width-2);
--button-warning-disabled-right-border-color: var(--colors-neutral-line-8);
--button-warning-disabled-right-border-style: var(--borders-style-2);
--button-warning-disabled-right-border-width: var(--borders-width-2);
--button-warning-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-warning-disabled-bottom-border-style: var(--borders-style-2);
--button-warning-disabled-bottom-border-width: var(--borders-width-2);
--button-warning-disabled-shadow: var(--shadows-shadow-none);
--button-warning-disabled-bg-color: var(--colors-neutral-fill-10);
--button-warning-disabled-font-color: var(--colors-neutral-text-6);
--button-danger-default-top-border-color: var(--colors-error-5);
--button-danger-default-top-border-style: var(--borders-style-1);
--button-danger-default-top-border-width: var(--borders-width-1);
--button-danger-default-left-border-color: var(--colors-error-5);
--button-danger-default-left-border-style: var(--borders-style-1);
--button-danger-default-left-border-width: var(--borders-width-1);
--button-danger-default-right-border-color: var(--colors-error-5);
--button-danger-default-right-border-style: var(--borders-style-1);
--button-danger-default-right-border-width: var(--borders-width-1);
--button-danger-default-bottom-border-color: var(--colors-error-5);
--button-danger-default-bottom-border-style: var(--borders-style-1);
--button-danger-default-bottom-border-width: var(--borders-width-1);
--button-danger-default-shadow: var(--shadows-shadow-none);
--button-danger-default-bg-color: var(--colors-error-5);
--button-danger-default-font-color: var(--colors-neutral-text-11);
--button-danger-hover-top-border-color: var(--colors-error-6);
--button-danger-hover-top-border-style: var(--borders-style-1);
--button-danger-hover-top-border-width: var(--borders-width-1);
--button-danger-hover-left-border-color: var(--colors-error-6);
--button-danger-hover-left-border-style: var(--borders-style-1);
--button-danger-hover-left-border-width: var(--borders-width-1);
--button-danger-hover-right-border-color: var(--colors-error-6);
--button-danger-hover-right-border-style: var(--borders-style-1);
--button-danger-hover-right-border-width: var(--borders-width-1);
--button-danger-hover-bottom-border-color: var(--colors-error-6);
--button-danger-hover-bottom-border-style: var(--borders-style-1);
--button-danger-hover-bottom-border-width: var(--borders-width-1);
--button-danger-hover-shadow: var(--shadows-shadow-none);
--button-danger-hover-bg-color: var(--colors-error-6);
--button-danger-hover-font-color: var(--colors-neutral-text-11);
--button-danger-active-top-border-color: var(--colors-error-4);
--button-danger-active-top-border-style: var(--borders-style-1);
--button-danger-active-top-border-width: var(--borders-width-1);
--button-danger-active-left-border-color: var(--colors-error-4);
--button-danger-active-left-border-style: var(--borders-style-1);
--button-danger-active-left-border-width: var(--borders-width-1);
--button-danger-active-right-border-color: var(--colors-error-4);
--button-danger-active-right-border-style: var(--borders-style-1);
--button-danger-active-right-border-width: var(--borders-width-1);
--button-danger-active-bottom-border-color: var(--colors-error-4);
--button-danger-active-bottom-border-style: var(--borders-style-1);
--button-danger-active-bottom-border-width: var(--borders-width-1);
--button-danger-active-shadow: var(--shadows-shadow-none);
--button-danger-active-bg-color: var(--colors-error-4);
--button-danger-active-font-color: var(--colors-neutral-text-11);
--button-danger-disabled-top-border-color: var(--colors-neutral-line-8);
--button-danger-disabled-top-border-style: var(--borders-style-2);
--button-danger-disabled-top-border-width: var(--borders-width-2);
--button-danger-disabled-left-border-color: var(--colors-neutral-line-8);
--button-danger-disabled-left-border-style: var(--borders-style-2);
--button-danger-disabled-left-border-width: var(--borders-width-2);
--button-danger-disabled-right-border-color: var(--colors-neutral-line-8);
--button-danger-disabled-right-border-style: var(--borders-style-2);
--button-danger-disabled-right-border-width: var(--borders-width-2);
--button-danger-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-danger-disabled-bottom-border-style: var(--borders-style-2);
--button-danger-disabled-bottom-border-width: var(--borders-width-2);
--button-danger-disabled-shadow: var(--shadows-shadow-none);
--button-danger-disabled-bg-color: var(--colors-neutral-fill-10);
--button-danger-disabled-font-color: var(--colors-neutral-text-6);
--button-light-default-top-border-color: var(--colors-brand-10);
--button-light-default-top-border-style: var(--borders-style-2);
--button-light-default-top-border-width: var(--borders-width-2);
--button-light-default-left-border-color: var(--colors-brand-10);
--button-light-default-left-border-style: var(--borders-style-2);
--button-light-default-left-border-width: var(--borders-width-2);
--button-light-default-right-border-color: var(--colors-brand-10);
--button-light-default-right-border-style: var(--borders-style-2);
--button-light-default-right-border-width: var(--borders-width-2);
--button-light-default-bottom-border-color: var(--colors-brand-10);
--button-light-default-bottom-border-style: var(--borders-style-2);
--button-light-default-bottom-border-width: var(--borders-width-2);
--button-light-default-shadow: var(--shadows-shadow-none);
--button-light-default-bg-color: var(--colors-brand-10);
--button-light-default-font-color: var(--colors-neutral-text-2);
--button-light-hover-top-border-color: var(--colors-brand-9);
--button-light-hover-top-border-style: var(--borders-style-2);
--button-light-hover-top-border-width: var(--borders-width-2);
--button-light-hover-left-border-color: var(--colors-brand-9);
--button-light-hover-left-border-style: var(--borders-style-2);
--button-light-hover-left-border-width: var(--borders-width-2);
--button-light-hover-right-border-color: var(--colors-brand-9);
--button-light-hover-right-border-style: var(--borders-style-2);
--button-light-hover-right-border-width: var(--borders-width-2);
--button-light-hover-bottom-border-color: var(--colors-brand-9);
--button-light-hover-bottom-border-style: var(--borders-style-2);
--button-light-hover-bottom-border-width: var(--borders-width-2);
--button-light-hover-shadow: var(--shadows-shadow-none);
--button-light-hover-bg-color: var(--colors-brand-9);
--button-light-hover-font-color: var(--colors-neutral-text-2);
--button-light-active-top-border-color: var(--colors-brand-7);
--button-light-active-top-border-style: var(--borders-style-2);
--button-light-active-top-border-width: var(--borders-width-2);
--button-light-active-left-border-color: var(--colors-brand-7);
--button-light-active-left-border-style: var(--borders-style-2);
--button-light-active-left-border-width: var(--borders-width-2);
--button-light-active-right-border-color: var(--colors-brand-7);
--button-light-active-right-border-style: var(--borders-style-2);
--button-light-active-right-border-width: var(--borders-width-2);
--button-light-active-bottom-border-color: var(--colors-brand-7);
--button-light-active-bottom-border-style: var(--borders-style-2);
--button-light-active-bottom-border-width: var(--borders-width-2);
--button-light-active-shadow: var(--shadows-shadow-none);
--button-light-active-bg-color: var(--colors-brand-7);
--button-light-active-font-color: var(--colors-neutral-text-2);
--button-light-disabled-top-border-color: var(--colors-neutral-line-8);
--button-light-disabled-top-border-style: var(--borders-style-2);
--button-light-disabled-top-border-width: var(--borders-width-2);
--button-light-disabled-left-border-color: var(--colors-neutral-line-8);
--button-light-disabled-left-border-style: var(--borders-style-2);
--button-light-disabled-left-border-width: var(--borders-width-2);
--button-light-disabled-right-border-color: var(--colors-neutral-line-8);
--button-light-disabled-right-border-style: var(--borders-style-2);
--button-light-disabled-right-border-width: var(--borders-width-2);
--button-light-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-light-disabled-bottom-border-style: var(--borders-style-2);
--button-light-disabled-bottom-border-width: var(--borders-width-2);
--button-light-disabled-shadow: var(--shadows-shadow-none);
--button-light-disabled-bg-color: var(--colors-neutral-fill-10);
--button-light-disabled-font-color: var(--colors-neutral-text-6);
--button-dark-default-top-border-color: var(--colors-neutral-line-3);
--button-dark-default-top-border-style: var(--borders-style-2);
--button-dark-default-top-border-width: var(--borders-width-2);
--button-dark-default-left-border-color: var(--colors-neutral-line-3);
--button-dark-default-left-border-style: var(--borders-style-2);
--button-dark-default-left-border-width: var(--borders-width-2);
--button-dark-default-right-border-color: var(--colors-neutral-line-3);
--button-dark-default-right-border-style: var(--borders-style-2);
--button-dark-default-right-border-width: var(--borders-width-2);
--button-dark-default-bottom-border-color: var(--colors-neutral-line-3);
--button-dark-default-bottom-border-style: var(--borders-style-2);
--button-dark-default-bottom-border-width: var(--borders-width-2);
--button-dark-default-shadow: var(--shadows-shadow-none);
--button-dark-default-bg-color: var(--colors-neutral-fill-3);
--button-dark-default-font-color: var(--colors-neutral-text-11);
--button-dark-hover-top-border-color: var(--colors-neutral-line-4);
--button-dark-hover-top-border-style: var(--borders-style-2);
--button-dark-hover-top-border-width: var(--borders-width-2);
--button-dark-hover-left-border-color: var(--colors-neutral-line-4);
--button-dark-hover-left-border-style: var(--borders-style-2);
--button-dark-hover-left-border-width: var(--borders-width-2);
--button-dark-hover-right-border-color: var(--colors-neutral-line-4);
--button-dark-hover-right-border-style: var(--borders-style-2);
--button-dark-hover-right-border-width: var(--borders-width-2);
--button-dark-hover-bottom-border-color: var(--colors-neutral-line-4);
--button-dark-hover-bottom-border-style: var(--borders-style-2);
--button-dark-hover-bottom-border-width: var(--borders-width-2);
--button-dark-hover-shadow: var(--shadows-shadow-none);
--button-dark-hover-bg-color: var(--colors-neutral-fill-4);
--button-dark-hover-font-color: var(--colors-neutral-text-11);
--button-dark-active-top-border-color: var(--colors-neutral-line-5);
--button-dark-active-top-border-style: var(--borders-style-2);
--button-dark-active-top-border-width: var(--borders-width-2);
--button-dark-active-left-border-color: var(--colors-neutral-line-5);
--button-dark-active-left-border-style: var(--borders-style-2);
--button-dark-active-left-border-width: var(--borders-width-2);
--button-dark-active-right-border-color: var(--colors-neutral-line-5);
--button-dark-active-right-border-style: var(--borders-style-2);
--button-dark-active-right-border-width: var(--borders-width-2);
--button-dark-active-bottom-border-color: var(--colors-neutral-line-5);
--button-dark-active-bottom-border-style: var(--borders-style-2);
--button-dark-active-bottom-border-width: var(--borders-width-2);
--button-dark-active-shadow: var(--shadows-shadow-none);
--button-dark-active-bg-color: var(--colors-neutral-fill-5);
--button-dark-active-font-color: var(--colors-neutral-text-11);
--button-dark-disabled-top-border-color: var(--colors-neutral-line-8);
--button-dark-disabled-top-border-style: var(--borders-style-2);
--button-dark-disabled-top-border-width: var(--borders-width-2);
--button-dark-disabled-left-border-color: var(--colors-neutral-line-8);
--button-dark-disabled-left-border-style: var(--borders-style-2);
--button-dark-disabled-left-border-width: var(--borders-width-2);
--button-dark-disabled-right-border-color: var(--colors-neutral-line-8);
--button-dark-disabled-right-border-style: var(--borders-style-2);
--button-dark-disabled-right-border-width: var(--borders-width-2);
--button-dark-disabled-bottom-border-color: var(--colors-neutral-line-8);
--button-dark-disabled-bottom-border-style: var(--borders-style-2);
--button-dark-disabled-bottom-border-width: var(--borders-width-2);
--button-dark-disabled-shadow: var(--shadows-shadow-none);
--button-dark-disabled-bg-color: var(--colors-neutral-fill-10);
--button-dark-disabled-font-color: var(--colors-neutral-text-6);
--button-link-default-top-border-color: var(--colors-neutral-fill-none);
--button-link-default-top-border-style: var(--borders-style-1);
--button-link-default-top-border-width: var(--borders-width-1);
--button-link-default-left-border-color: var(--colors-neutral-fill-none);
--button-link-default-left-border-style: var(--borders-style-1);
--button-link-default-left-border-width: var(--borders-width-1);
--button-link-default-right-border-color: var(--colors-neutral-fill-none);
--button-link-default-right-border-style: var(--borders-style-1);
--button-link-default-right-border-width: var(--borders-width-1);
--button-link-default-bottom-border-color: var(--colors-neutral-fill-none);
--button-link-default-bottom-border-style: var(--borders-style-1);
--button-link-default-bottom-border-width: var(--borders-width-1);
--button-link-default-shadow: var(--shadows-shadow-none);
--button-link-default-bg-color: var(--colors-neutral-fill-none);
--button-link-default-font-color: var(--colors-link-5);
--button-link-hover-top-border-color: var(--colors-neutral-fill-none);
--button-link-hover-top-border-style: var(--borders-style-1);
--button-link-hover-top-border-width: var(--borders-width-1);
--button-link-hover-left-border-color: var(--colors-neutral-fill-none);
--button-link-hover-left-border-style: var(--borders-style-1);
--button-link-hover-left-border-width: var(--borders-width-1);
--button-link-hover-right-border-color: var(--colors-neutral-fill-none);
--button-link-hover-right-border-style: var(--borders-style-1);
--button-link-hover-right-border-width: var(--borders-width-1);
--button-link-hover-bottom-border-color: var(--colors-neutral-fill-none);
--button-link-hover-bottom-border-style: var(--borders-style-1);
--button-link-hover-bottom-border-width: var(--borders-width-1);
--button-link-hover-shadow: var(--shadows-shadow-none);
--button-link-hover-bg-color: var(--colors-neutral-fill-none);
--button-link-hover-font-color: var(--colors-link-6);
--button-link-active-top-border-color: var(--colors-neutral-fill-none);
--button-link-active-top-border-style: var(--borders-style-1);
--button-link-active-top-border-width: var(--borders-width-1);
--button-link-active-left-border-color: var(--colors-neutral-fill-none);
--button-link-active-left-border-style: var(--borders-style-1);
--button-link-active-left-border-width: var(--borders-width-1);
--button-link-active-right-border-color: var(--colors-neutral-fill-none);
--button-link-active-right-border-style: var(--borders-style-1);
--button-link-active-right-border-width: var(--borders-width-1);
--button-link-active-bottom-border-color: var(--colors-neutral-fill-none);
--button-link-active-bottom-border-style: var(--borders-style-1);
--button-link-active-bottom-border-width: var(--borders-width-1);
--button-link-active-shadow: var(--shadows-shadow-none);
--button-link-active-bg-color: var(--colors-neutral-fill-none);
--button-link-active-font-color: var(--colors-link-4);
--button-link-disabled-top-border-color: var(--colors-neutral-fill-none);
--button-link-disabled-top-border-style: var(--borders-style-1);
--button-link-disabled-top-border-width: var(--borders-width-1);
--button-link-disabled-left-border-color: var(--colors-neutral-fill-none);
--button-link-disabled-left-border-style: var(--borders-style-1);
--button-link-disabled-left-border-width: var(--borders-width-1);
--button-link-disabled-right-border-color: var(--colors-neutral-fill-none);
--button-link-disabled-right-border-style: var(--borders-style-1);
--button-link-disabled-right-border-width: var(--borders-width-1);
--button-link-disabled-bottom-border-color: var(--colors-neutral-fill-none);
--button-link-disabled-bottom-border-style: var(--borders-style-1);
--button-link-disabled-bottom-border-width: var(--borders-width-1);
--button-link-disabled-shadow: var(--shadows-shadow-none);
--button-link-disabled-bg-color: var(--colors-neutral-fill-none);
--button-link-disabled-font-color: var(--colors-neutral-text-6);
--button-size-default-top-left-border-radius: var(--borders-radius-3);
--button-size-default-top-right-border-radius: var(--borders-radius-3);
--button-size-default-bottom-left-border-radius: var(--borders-radius-3);
--button-size-default-bottom-right-border-radius: var(--borders-radius-3);
--button-size-default-height: var(--sizes-base-17);
--button-size-default-fontSize: var(--fonts-size-7);
--button-size-default-minWidth: var(--sizes-size-1);
--button-size-default-icon-size: var(--sizes-size-8);
--button-size-default-fontWeight: var(--fonts-weight-6);
--button-size-default-lineHeight: var(--fonts-lineHeight-2);
--button-size-default-icon-margin: var(--sizes-size-3);
--button-size-default-marginTop: var(--sizes-size-0);
--button-size-default-marginLeft: var(--sizes-size-0);
--button-size-default-paddingTop: var(--sizes-size-3);
--button-size-default-marginRight: var(--sizes-size-0);
--button-size-default-paddingLeft: var(--sizes-size-7);
--button-size-default-marginBottom: var(--sizes-size-0);
--button-size-default-paddingRight: var(--sizes-size-7);
--button-size-default-paddingBottom: var(--sizes-size-3);
--button-size-xs-top-left-border-radius: var(--borders-radius-3);
--button-size-xs-top-right-border-radius: var(--borders-radius-3);
--button-size-xs-bottom-left-border-radius: var(--borders-radius-3);
--button-size-xs-bottom-right-border-radius: var(--borders-radius-3);
--button-size-xs-height: var(--sizes-base-12);
--button-size-xs-fontSize: var(--fonts-size-8);
--button-size-xs-minWidth: var(--sizes-size-1);
--button-size-xs-icon-size: var(--sizes-size-8);
--button-size-xs-fontWeight: var(--fonts-weight-6);
--button-size-xs-lineHeight: var(--fonts-lineHeight-2);
--button-size-xs-icon-margin: var(--sizes-size-3);
--button-size-xs-marginTop: var(--sizes-size-0);
--button-size-xs-marginLeft: var(--sizes-size-0);
--button-size-xs-paddingTop: var(--sizes-size-2);
--button-size-xs-marginRight: var(--sizes-size-0);
--button-size-xs-paddingLeft: var(--sizes-size-3);
--button-size-xs-marginBottom: var(--sizes-size-0);
--button-size-xs-paddingRight: var(--sizes-size-3);
--button-size-xs-paddingBottom: var(--sizes-size-2);
--button-size-sm-top-left-border-radius: var(--borders-radius-3);
--button-size-sm-top-right-border-radius: var(--borders-radius-3);
--button-size-sm-bottom-left-border-radius: var(--borders-radius-3);
--button-size-sm-bottom-right-border-radius: var(--borders-radius-3);
--button-size-sm-height: var(--sizes-base-16);
--button-size-sm-fontSize: var(--fonts-size-8);
--button-size-sm-minWidth: var(--sizes-size-1);
--button-size-sm-icon-size: var(--sizes-size-8);
--button-size-sm-fontWeight: var(--fonts-weight-6);
--button-size-sm-lineHeight: var(--fonts-lineHeight-2);
--button-size-sm-icon-margin: var(--sizes-size-3);
--button-size-sm-marginTop: var(--sizes-size-0);
--button-size-sm-marginLeft: var(--sizes-size-0);
--button-size-sm-paddingTop: var(--sizes-size-3);
--button-size-sm-marginRight: var(--sizes-size-0);
--button-size-sm-paddingLeft: var(--sizes-size-6);
--button-size-sm-marginBottom: var(--sizes-size-0);
--button-size-sm-paddingRight: var(--sizes-size-6);
--button-size-sm-paddingBottom: var(--sizes-size-3);
--button-size-md-top-left-border-radius: var(--borders-radius-3);
--button-size-md-top-right-border-radius: var(--borders-radius-3);
--button-size-md-bottom-left-border-radius: var(--borders-radius-3);
--button-size-md-bottom-right-border-radius: var(--borders-radius-3);
--button-size-md-height: var(--sizes-base-17);
--button-size-md-fontSize: var(--fonts-size-7);
--button-size-md-minWidth: var(--sizes-size-1);
--button-size-md-icon-size: var(--sizes-size-8);
--button-size-md-fontWeight: var(--fonts-weight-6);
--button-size-md-lineHeight: var(--fonts-lineHeight-2);
--button-size-md-icon-margin: var(--sizes-size-3);
--button-size-md-marginTop: var(--sizes-size-0);
--button-size-md-marginLeft: var(--sizes-size-0);
--button-size-md-paddingTop: var(--sizes-size-3);
--button-size-md-marginRight: var(--sizes-size-0);
--button-size-md-paddingLeft: var(--sizes-size-7);
--button-size-md-marginBottom: var(--sizes-size-0);
--button-size-md-paddingRight: var(--sizes-size-7);
--button-size-md-paddingBottom: var(--sizes-size-3);
--button-size-lg-top-left-border-radius: var(--borders-radius-3);
--button-size-lg-top-right-border-radius: var(--borders-radius-3);
--button-size-lg-bottom-left-border-radius: var(--borders-radius-3);
--button-size-lg-bottom-right-border-radius: var(--borders-radius-3);
--button-size-lg-height: var(--sizes-base-20);
--button-size-lg-fontSize: var(--fonts-size-7);
--button-size-lg-minWidth: var(--sizes-size-1);
--button-size-lg-icon-size: var(--sizes-size-8);
--button-size-lg-fontWeight: var(--fonts-weight-6);
--button-size-lg-lineHeight: var(--fonts-lineHeight-2);
--button-size-lg-icon-margin: var(--sizes-size-3);
--button-size-lg-marginTop: var(--sizes-size-0);
--button-size-lg-marginLeft: var(--sizes-size-0);
--button-size-lg-paddingTop: var(--sizes-size-6);
--button-size-lg-marginRight: var(--sizes-size-0);
--button-size-lg-paddingLeft: var(--sizes-size-9);
--button-size-lg-marginBottom: var(--sizes-size-0);
--button-size-lg-paddingRight: var(--sizes-size-9);
--button-size-lg-paddingBottom: var(--sizes-size-6);
--transfer-base-top-border-color: var(--colors-neutral-line-8);
--transfer-base-top-border-style: var(--borders-style-2);
--transfer-base-top-border-width: var(--borders-width-2);
--transfer-base-left-border-color: var(--colors-neutral-line-8);
--transfer-base-left-border-style: var(--borders-style-2);
--transfer-base-left-border-width: var(--borders-width-2);
--transfer-base-right-border-color: var(--colors-neutral-line-8);
--transfer-base-right-border-style: var(--borders-style-2);
--transfer-base-right-border-width: var(--borders-width-2);
--transfer-base-bottom-border-color: var(--colors-neutral-line-8);
--transfer-base-bottom-border-style: var(--borders-style-2);
--transfer-base-bottom-border-width: var(--borders-width-2);
--transfer-base-top-left-border-radius: var(--borders-radius-3);
--transfer-base-top-right-border-radius: var(--borders-radius-3);
--transfer-base-bottom-left-border-radius: var(--borders-radius-2);
--transfer-base-bottom-right-border-radius: var(--borders-radius-2);
--transfer-base-shadow: var(--shadows-shadow-none);
--transfer-base-title-bg: var(--colors-neutral-fill-10);
--transfer-base-title-fontSize: var(--fonts-size-7);
--transfer-base-content-fontSize: var(--fonts-size-7);
--transfer-base-title-font-color: var(--colors-neutral-text-2);
--transfer-base-title-fontWeight: var(--fonts-weight-6);
--transfer-base-title-lineHeight: var(--fonts-lineHeight-2);
--transfer-base-content-font-color: var(--colors-neutral-text-2);
--transfer-base-content-fontWeight: var(--fonts-weight-6);
--transfer-base-content-lineHeight: var(--fonts-lineHeight-2);
--transfer-base-body-marginTop: var(--sizes-size-1);
--transfer-base-body-marginLeft: var(--sizes-size-1);
--transfer-base-body-paddingTop: var(--sizes-size-1);
--transfer-base-body-marginRight: var(--sizes-size-1);
--transfer-base-body-paddingLeft: var(--sizes-size-1);
--transfer-base-body-marginBottom: var(--sizes-size-1);
--transfer-base-body-paddingRight: var(--sizes-size-1);
--transfer-base-body-paddingBottom: var(--sizes-size-1);
--transfer-base-header-marginTop: var(--sizes-size-1);
--transfer-base-header-marginLeft: var(--sizes-size-1);
--transfer-base-header-paddingTop: var(--sizes-size-5);
--transfer-base-header-marginRight: var(--sizes-size-1);
--transfer-base-header-paddingLeft: var(--sizes-size-8);
--transfer-base-header-marginBottom: var(--sizes-size-1);
--transfer-base-header-paddingRight: var(--sizes-size-8);
--transfer-base-header-paddingBottom: var(--sizes-size-5);
--transfer-base-option-marginTop: var(--sizes-size-1);
--transfer-base-option-marginLeft: var(--sizes-size-1);
--transfer-base-option-paddingTop: var(--sizes-size-5);
--transfer-base-option-marginRight: var(--sizes-size-1);
--transfer-base-option-paddingLeft: var(--sizes-size-8);
--transfer-base-option-marginBottom: var(--sizes-size-1);
--transfer-base-option-paddingRight: var(--sizes-size-8);
--transfer-base-option-paddingBottom: var(--sizes-size-5);
--transfer-tree-top-left-border-radius: var(--borders-radius-2);
--transfer-tree-top-right-border-radius: var(--borders-radius-2);
--transfer-tree-bottom-left-border-radius: var(--borders-radius-2);
--transfer-tree-bottom-right-border-radius: var(--borders-radius-2);
--transfer-tree-bg-hover-color: var(--colors-neutral-fill-10);
--transfer-tree-bg-active-color: var(--colors-brand-10);
--transfer-tree-marginTop: var(--sizes-size-1);
--transfer-tree-marginLeft: var(--sizes-size-1);
--transfer-tree-paddingTop: var(--sizes-size-3);
--transfer-tree-marginRight: var(--sizes-size-1);
--transfer-tree-paddingLeft: var(--sizes-size-7);
--transfer-tree-marginBottom: var(--sizes-size-2);
--transfer-tree-paddingRight: var(--sizes-size-7);
--transfer-tree-paddingBottom: var(--sizes-size-3);
--transfer-tree-option-marginTop: var(--sizes-size-1);
--transfer-tree-option-marginLeft: var(--sizes-size-1);
--transfer-tree-option-paddingTop: var(--sizes-size-1);
--transfer-tree-option-marginRight: var(--sizes-size-1);
--transfer-tree-option-paddingLeft: var(--sizes-size-6);
--transfer-tree-option-marginBottom: var(--sizes-size-4);
--transfer-tree-option-paddingRight: var(--sizes-size-1);
--transfer-tree-option-paddingBottom: var(--sizes-size-1);
--transfer-group-fontSize: var(--fonts-size-7);
--transfer-group-font-color: var(--colors-neutral-text-5);
--transfer-group-fontWeight: var(--fonts-weight-6);
--transfer-group-lineHeight: var(--fonts-lineHeight-2);
--transfer-table-last-paddingRight: var(--sizes-size-10);
--transfer-table-header-marginTop: var(--sizes-size-1);
--transfer-table-header-marginLeft: var(--sizes-size-1);
--transfer-table-header-paddingTop: var(--sizes-size-5);
--transfer-table-header-marginRight: var(--sizes-size-1);
--transfer-table-header-paddingLeft: var(--sizes-size-7);
--transfer-table-header-marginBottom: var(--sizes-size-1);
--transfer-table-header-paddingRight: var(--sizes-size-7);
--transfer-table-header-paddingBottom: var(--sizes-size-5);
--transfer-table-option-marginTop: var(--sizes-size-1);
--transfer-table-option-marginLeft: var(--sizes-size-1);
--transfer-table-option-paddingTop: var(--sizes-size-4);
--transfer-table-option-marginRight: var(--sizes-size-1);
--transfer-table-option-paddingLeft: var(--sizes-size-7);
--transfer-table-option-marginBottom: var(--sizes-size-2);
--transfer-table-option-paddingRight: var(--sizes-size-7);
--transfer-table-option-paddingBottom: var(--sizes-size-5);
--transfer-search-top-border-color: var(--colors-neutral-line-8);
--transfer-search-top-border-style: var(--borders-style-2);
--transfer-search-top-border-width: var(--borders-width-2);
--transfer-search-left-border-color: var(--colors-neutral-line-8);
--transfer-search-left-border-style: var(--borders-style-2);
--transfer-search-left-border-width: var(--borders-width-2);
--transfer-search-right-border-color: var(--colors-neutral-line-8);
--transfer-search-right-border-style: var(--borders-style-2);
--transfer-search-right-border-width: var(--borders-width-2);
--transfer-search-bottom-border-color: var(--colors-neutral-line-8);
--transfer-search-bottom-border-style: var(--borders-style-2);
--transfer-search-bottom-border-width: var(--borders-width-2);
--transfer-search-top-left-border-radius: var(--borders-radius-3);
--transfer-search-top-right-border-radius: var(--borders-radius-3);
--transfer-search-bottom-left-border-radius: var(--borders-radius-3);
--transfer-search-bottom-right-border-radius: var(--borders-radius-3);
--transfer-search-shadow: var(--shadows-shadow-none);
--transfer-search-fontSize: var(--fonts-size-7);
--transfer-search-font-color: var(--colors-neutral-text-2);
--transfer-search-fontWeight: var(--fonts-weight-6);
--transfer-search-lineHeight: var(--fonts-lineHeight-2);
--transfer-search-border-hover-color: var(--colors-brand-4);
--transfer-search-marginTop: var(--sizes-size-1);
--transfer-search-marginLeft: var(--sizes-size-1);
--transfer-search-paddingTop: var(--sizes-size-6);
--transfer-search-marginRight: var(--sizes-size-1);
--transfer-search-paddingLeft: var(--sizes-size-6);
--transfer-search-marginBottom: var(--sizes-size-1);
--transfer-search-paddingRight: var(--sizes-size-6);
--transfer-search-paddingBottom: var(--sizes-size-6);
--transfer-search-border-active-color: var(--colors-brand-4);
--transfer-search-placeholder-font-color: var(--colors-neutral-text-6);
--transfer-search-input-marginTop: var(--sizes-size-1);
--transfer-search-input-marginLeft: var(--sizes-size-1);
--transfer-search-input-paddingTop: var(--sizes-size-4);
--transfer-search-input-marginRight: var(--sizes-size-1);
--transfer-search-input-paddingLeft: var(--sizes-size-7);
--transfer-search-input-marginBottom: var(--sizes-size-1);
--transfer-search-input-paddingRight: var(--sizes-size-7);
--transfer-search-input-paddingBottom: var(--sizes-size-4);
--transfer-chained-marginTop: var(--sizes-size-1);
--transfer-chained-marginLeft: var(--sizes-size-1);
--transfer-chained-paddingTop: var(--sizes-size-5);
--transfer-chained-marginRight: var(--sizes-size-1);
--transfer-chained-paddingLeft: var(--sizes-size-6);
--transfer-chained-marginBottom: var(--sizes-size-1);
--transfer-chained-paddingRight: var(--sizes-size-6);
--transfer-chained-paddingBottom: var(--sizes-size-5);
}

4
packages/amis-ui/scss/_mixins.scss
View File

@ -396,10 +396,6 @@
$disabled-border-style-bottom $disabled-border-style-left;
box-shadow: $disabled-shadow;
}
@include hover-focus {
box-shadow: var(--Button-boxShadow);
}
}
@mixin input-clear {

1053
packages/amis-ui/scss/_properties.scss
View File

File diff suppressed because one or more lines are too long

2
packages/amis-ui/scss/_utilities.scss
View File

@ -637,7 +637,7 @@
}
.m-l-sm {
margin-left: 10px;
margin-left: 10px !important;
}
.m-l {

4
packages/amis-ui/scss/components/_button-group.scss
View File

@ -29,7 +29,7 @@
.#{$ns}Button + .#{$ns}ButtonGroup,
.#{$ns}ButtonGroup + .#{$ns}Button,
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
margin-left: calc(var(--Button-borderWidth) * -1);
margin-left: calc(var(--ButtonGroup-borderWidth) * -1);
}
&--block {
@ -92,7 +92,7 @@
> .#{$ns}Button + .#{$ns}ButtonGroup,
> .#{$ns}ButtonGroup + .#{$ns}Button,
> .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
margin-top: calc(var(--Button-borderWidth) * -1);
margin-top: calc(var(--ButtonGroup-borderWidth) * -1);
margin-left: 0;
}

30
packages/amis-ui/scss/components/_button.scss
View File

@ -604,8 +604,8 @@
&--size-default {
@include button-size(
var(--button-size-default-font-size),
var(--button-size-default-font-lineHeight),
var(--button-size-default-fontSize),
var(--button-size-default-lineHeight),
var(--button-size-default-top-right-border-radius),
var(--button-size-default-top-left-border-radius),
var(--button-size-default-bottom-right-border-radius),
@ -619,7 +619,7 @@
var(--button-size-default-marginBottom),
var(--button-size-default-marginLeft),
var(--button-size-default-marginRight),
var(--button-size-default-minWith),
var(--button-size-default-minWidth),
var(--button-size-default-icon-size),
var(--button-size-default-icon-margin)
);
@ -627,8 +627,8 @@
&--size-xs {
@include button-size(
var(--button-size-xs-font-size),
var(--button-size-xs-font-lineHeight),
var(--button-size-xs-fontSize),
var(--button-size-xs-lineHeight),
var(--button-size-xs-top-right-border-radius),
var(--button-size-xs-top-left-border-radius),
var(--button-size-xs-bottom-right-border-radius),
@ -642,7 +642,7 @@
var(--button-size-xs-marginBottom),
var(--button-size-xs-marginLeft),
var(--button-size-xs-marginRight),
var(--button-size-xs-minWith),
var(--button-size-xs-minWidth),
var(--button-size-xs-icon-size),
var(--button-size-xs-icon-margin)
);
@ -656,8 +656,8 @@
&--size-sm {
@include button-size(
var(--button-size-sm-font-size),
var(--button-size-sm-font-lineHeight),
var(--button-size-sm-fontSize),
var(--button-size-sm-lineHeight),
var(--button-size-sm-top-right-border-radius),
var(--button-size-sm-top-left-border-radius),
var(--button-size-sm-bottom-right-border-radius),
@ -671,7 +671,7 @@
var(--button-size-sm-marginBottom),
var(--button-size-sm-marginLeft),
var(--button-size-sm-marginRight),
var(--button-size-sm-minWith),
var(--button-size-sm-minWidth),
var(--button-size-sm-icon-size),
var(--button-size-sm-icon-margin)
);
@ -685,8 +685,8 @@
&--size-md {
@include button-size(
var(--button-size-md-font-size),
var(--button-size-md-font-lineHeight),
var(--button-size-md-fontSize),
var(--button-size-md-lineHeight),
var(--button-size-md-top-right-border-radius),
var(--button-size-md-top-left-border-radius),
var(--button-size-md-bottom-right-border-radius),
@ -700,7 +700,7 @@
var(--button-size-md-marginBottom),
var(--button-size-md-marginLeft),
var(--button-size-md-marginRight),
var(--button-size-md-minWith),
var(--button-size-md-minWidth),
var(--button-size-md-icon-size),
var(--button-size-md-icon-margin)
);
@ -714,8 +714,8 @@
&--size-lg {
@include button-size(
var(--button-size-lg-font-size),
var(--button-size-lg-font-lineHeight),
var(--button-size-lg-fontSize),
var(--button-size-lg-lineHeight),
var(--button-size-lg-top-right-border-radius),
var(--button-size-lg-top-left-border-radius),
var(--button-size-lg-bottom-right-border-radius),
@ -729,7 +729,7 @@
var(--button-size-lg-marginBottom),
var(--button-size-lg-marginLeft),
var(--button-size-lg-marginRight),
var(--button-size-lg-minWith),
var(--button-size-lg-minWidth),
var(--button-size-lg-icon-size),
var(--button-size-lg-icon-margin)
);

2
packages/amis-ui/scss/components/_card.scss
View File

@ -168,7 +168,7 @@
}
& > .#{$ns}Button-icon:first-child:not(:last-child) {
margin-right: var(--Button-icon-rightMargin);
margin-right: var(--button-size-sm-icon-margin);
}
}
}

2
packages/amis-ui/scss/components/_table.scss
View File

@ -1043,7 +1043,7 @@
.#{$ns}Button {
border-color: transparent;
color: var(--Button--link-color);
color: var(--button-link-default-font-color);
}
}

4
packages/amis-ui/scss/components/_wizard.scss
View File

@ -177,10 +177,6 @@
position: absolute;
bottom: 0;
right: px2rem(-10px);
border: $Wizard-steps-liAfterBorder;
border-right: 0;
border-left: px2rem(10px) solid var(--borderColor);
border-left-color: rgba(0, 0, 0, 0.05);
z-index: 2;
}

1
packages/amis-ui/scss/components/form/_combo.scss
View File

@ -25,6 +25,7 @@
> svg {
width: var(--Combo-addBtn-fontSize);
height: var(--Combo-addBtn-fontSize);
top: 0;
}
@include button-size(

1
packages/amis-ui/scss/components/form/_file.scss
View File

@ -22,6 +22,7 @@
margin-right: 4px !important;
width: px2rem(16px);
height: px2rem(16px);
top: 0;
}
> span {

2
packages/amis-ui/scss/components/form/_sub-form.scss
View File

@ -81,7 +81,7 @@
width: auto;
min-width: auto;
font-weight: var(--fontWeightNormal);
color: var(--Button--link-color);
color: var(--button-link-default-font-color);
text-decoration: var(--link-decoration);
border: none;
height: auto;

64
packages/amis-ui/scss/components/form/_transfer.scss
View File

@ -19,9 +19,9 @@
align-items: center;
background: var(--transfer-base-title-bg);
color: var(--transfer-base-title-font-color);
line-height: var(--transfer-base-title-font-lineHeight);
font-size: var(--transfer-base-title-font-size);
font-weight: var(--transfer-base-title-font-weight);
line-height: var(--transfer-base-title-lineHeight);
font-size: var(--transfer-base-title-fontSize);
font-weight: var(--transfer-base-title-fontWeight);
font-family: var(--transfer-base-title-font-family);
padding: var(--transfer-base-header-paddingTop)
var(--transfer-base-header-paddingRight)
@ -32,6 +32,7 @@
var(--transfer-base-header-marginBottom)
var(--transfer-base-header-marginLeft);
flex-direction: row;
width: 100%;
&--light {
background: transparent;
@ -83,6 +84,7 @@
var(--transfer-base-body-marginRight)
var(--transfer-base-body-marginBottom)
var(--transfer-base-body-marginLeft);
width: 100%;
}
.#{$ns}GroupedSelection-item,
@ -95,10 +97,10 @@
var(--transfer-base-option-marginRight)
var(--transfer-base-option-marginBottom)
var(--transfer-base-option-marginLeft);
line-height: var(--transfer-base-content-font-lineHeight);
font-size: var(--transfer-base-content-font-size);
font-weight: var(--transfer-base-content-font-weight);
font-family: var(--transfer-base-content-font-family);
line-height: var(--transfer-base-content-lineHeight);
font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight);
color: var(--transfer-base-content-font-color);
}
@ -109,10 +111,10 @@
margin: var(--transfer-chained-marginTop)
var(--transfer-chained-marginRight) var(--transfer-chained-marginBottom)
var(--transfer-chained-marginLeft);
line-height: var(--transfer-base-content-font-lineHeight);
font-size: var(--transfer-base-content-font-size);
font-weight: var(--transfer-base-content-font-weight);
font-family: var(--transfer-base-content-font-family);
line-height: var(--transfer-base-content-lineHeight);
font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight);
color: var(--transfer-base-content-font-color);
}
@ -197,12 +199,11 @@
var(--transfer-search-paddingLeft);
margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight)
var(--transfer-search-marginBottom) var(--transfer-search-marginLeft);
width: 100%;
.#{$ns}InputBox {
font-size: var(--transfer-search-font-size);
font-weight: var(--transfer-search-font-weight);
line-height: var(--transfer-search-font-lineHeight);
font-family: var(--transfer-search-font-family);
font-size: var(--transfer-search-fontSize);
font-weight: var(--transfer-search-fontWeight);
line-height: var(--transfer-search-lineHeight);
color: var(--transfer-search-font-color);
border-width: var(--transfer-search-top-border-width)
var(--transfer-search-right-border-width)
@ -240,11 +241,11 @@
input {
color: var(--transfer-search-font-color);
font-size: var(--transfer-search-font-size);
font-weight: var(--transfer-search-font-weight);
line-height: var(--transfer-search-font-lineHeight);
font-family: var(--transfer-search-font-family);
height: var(--transfer-search-font-lineHeight);
font-size: var(--transfer-search-fontSize);
font-weight: var(--transfer-search-fontWeight);
line-height: var(--transfer-search-lineHeight);
height: var(--transfer-search-lineHeight);
}
input::placeholder {
@ -322,10 +323,10 @@
}
&-itemText {
line-height: var(--transfer-base-content-font-lineHeight);
font-size: var(--transfer-base-content-font-size);
font-weight: var(--transfer-base-content-font-weight);
font-family: var(--transfer-base-content-font-family);
line-height: var(--transfer-base-content-lineHeight);
font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight);
color: var(--transfer-base-content-font-color);
}
}
@ -338,10 +339,8 @@
var(--transfer-table-header-paddingLeft);
background: var(--transfer-base-title-bg);
color: var(--transfer-base-title-font-color);
line-height: var(--transfer-base-title-font-lineHeight);
font-size: var(--transfer-base-title-font-size);
font-weight: var(--transfer-base-title-font-weight);
font-family: var(--transfer-base-title-font-family);
line-height: var(--transfer-base-title-lineHeight);
font-size: var(--transfer-base-content-fontSize);
&:last-child {
padding-right: var(--transfer-table-last-paddingRight);
@ -352,10 +351,9 @@
var(--transfer-table-option-paddingRight)
var(--transfer-table-option-paddingBottom)
var(--transfer-table-option-paddingLeft);
line-height: var(--transfer-base-content-font-lineHeight);
font-size: var(--transfer-base-content-font-size);
font-weight: var(--transfer-base-content-font-weight);
font-family: var(--transfer-base-content-font-family);
line-height: var(--transfer-base-content-lineHeight);
font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight);
& > span.is-invalid {
color: var(--Form-selectValue-onInvalid-color);

353
packages/amis-ui/scss/themes/_ang-variables.scss
View File

@ -1,132 +1,223 @@
@import '../functions';
$ns: 'a-';
$colors: (
black: #1c2b36,
white: #fff,
primary: #7266ba,
secondary: #6c757d,
success: #27c24c,
info: #23b7e5,
warning: #fad733,
danger: #f05050,
light: #edf1f2,
dark: #3a3f51,
gray: (
50: #f9fafb,
100: #f3f4f6,
200: #e5e7eb,
300: #d1d5db,
400: #9ca3af,
500: #6b7280,
600: #4b5563,
700: #374151,
800: #1f2937,
900: #111827
),
red: (
50: #fef2f2,
100: #fee2e2,
200: #fecaca,
300: #fca5a5,
400: #f87171,
500: #ef4444,
600: #dc2626,
700: #b91c1c,
800: #991b1b,
900: #7f1d1d
),
yellow: (
50: #fffbeb,
100: #fef3c7,
200: #fde68a,
300: #fcd34d,
400: #fbbf24,
500: #f59e0b,
600: #d97706,
700: #b45309,
800: #92400e,
900: #78350f
),
green: (
50: #ecfdf5,
100: #d1fae5,
200: #a7f3d0,
300: #6ee7b7,
400: #34d399,
500: #10b981,
600: #059669,
700: #047857,
800: #065f46,
900: #064e3b
),
blue: (
50: #eff6ff,
100: #dbeafe,
200: #bfdbfe,
300: #93c5fd,
400: #60a5fa,
500: #3b82f6,
600: #2563eb,
700: #1d4ed8,
800: #1e40af,
900: #1e3a8a
),
cyan: (
50: #ecfeff,
100: #cffafe,
200: #a5f3fc,
300: #67e8f9,
400: #22d3ee,
500: #06b6d4,
600: #0891b2,
700: #0e7490,
800: #155e75,
900: #164e63
),
indigo: (
50: #eef2ff,
100: #e0e7ff,
200: #c7d2fe,
300: #a5b4fc,
400: #818cf8,
500: #6366f1,
600: #4f46e5,
700: #4338ca,
800: #3730a3,
900: #312e81
),
purple: (
50: #f5f3ff,
100: #ede9fe,
200: #ddd6fe,
300: #c4b5fd,
400: #a78bfa,
500: #8b5cf6,
600: #7c3aed,
700: #6d28d9,
800: #5b21b6,
900: #4c1d95
),
pink: (
50: #fdf2f8,
100: #fce7f3,
200: #fbcfe8,
300: #f9a8d4,
400: #f472b6,
500: #ec4899,
600: #db2777,
700: #be185d,
800: #9d174d,
900: #831843
)
);
$text-color: #58666e;
$link-color: map-get($colors, 'info');
$Form-input-borderColor: #cfdadd;
@import '../variables';
@import '../properties';
:root {
--colors-neutral-fill-none: translate;
--colors-error-main: #e62525;
--colors-error-1: #4d000a;
--colors-error-2: #73010d;
--colors-error-3: #990913;
--colors-error-4: #bf151b;
--colors-error-5: #e62525;
--colors-error-6: #ff5654;
--colors-error-7: #ff837e;
--colors-error-8: #ffaea9;
--colors-error-9: #ffd7d4;
--colors-error-10: #ffe8e6;
--colors-warning-main: #f0861d;
--colors-warning-1: #572000;
--colors-warning-2: #7d3200;
--colors-warning-3: #a34903;
--colors-warning-4: #c9660e;
--colors-warning-5: #f0861d;
--colors-warning-6: #ffa84b;
--colors-warning-7: #ffc078;
--colors-warning-8: #ffd7a5;
--colors-warning-9: #ffecd2;
--colors-warning-10: #fff4e6;
--colors-success-main: #45b035;
--colors-success-1: #021702;
--colors-success-2: #0b3d09;
--colors-success-3: #196314;
--colors-success-4: #2d8a22;
--colors-success-5: #45b035;
--colors-success-6: #63bd53;
--colors-success-7: #83c975;
--colors-success-8: #a5d69a;
--colors-success-9: #cae3c3;
--colors-success-10: #ddf0d8;
--colors-link-1: #002766;
--colors-link-2: #003a8c;
--colors-link-3: #0050b3;
--colors-link-4: #096dd9;
--colors-link-5: #1890ff;
--colors-link-6: #45a8ff;
--colors-link-7: #74c0ff;
--colors-link-8: #a2d7ff;
--colors-link-9: #d1ecff;
--colors-link-10: #e6f5ff;
--colors-info-1: #002766;
--colors-info-2: #003a8c;
--colors-info-3: #0050b3;
--colors-info-4: #096dd9;
--colors-info-5: #1890ff;
--colors-info-6: #45a8ff;
--colors-info-7: #74c0ff;
--colors-info-8: #a2d7ff;
--colors-info-9: #d1ecff;
--colors-info-10: #e6f5ff;
--colors-other-main: #2468f2;
--colors-other-1: #001259;
--colors-other-2: #001e80;
--colors-other-3: #0832a6;
--colors-other-4: #144bcc;
--colors-other-5: #2468f2;
--colors-other-6: #528eff;
--colors-other-7: #7dadff;
--colors-other-8: #a8caff;
--colors-other-9: #d4e5ff;
--colors-other-10: #e6f0ff;
--colors-brand-main: #7266ba;
--colors-brand-1: #120c21;
--colors-brand-2: #271d47;
--colors-brand-3: #3e316e;
--colors-brand-4: #584a94;
--colors-brand-5: #7266ba;
--colors-brand-6: #897fc7;
--colors-brand-7: #a19bd4;
--colors-brand-8: #bcb8e0;
--colors-brand-9: #d7d5ed;
--colors-brand-10: #e3e1fa;
--colors-neutral-text-1: #090714;
--colors-neutral-text-2: #181526;
--colors-neutral-text-3: #323040;
--colors-neutral-text-4: #5d5c66;
--colors-neutral-text-5: #85848c;
--colors-neutral-text-6: #b9b8bf;
--colors-neutral-text-7: #d5d4d9;
--colors-neutral-text-8: #e9e8eb;
--colors-neutral-text-9: #f3f2f5;
--colors-neutral-text-10: #f8f7fa;
--colors-neutral-text-11: #ffffff;
--colors-neutral-fill-none: transparent;
--colors-neutral-fill-1: #090714;
--colors-neutral-fill-2: #181526;
--colors-neutral-fill-3: #323040;
--colors-neutral-fill-4: #5d5c66;
--colors-neutral-fill-5: #85848c;
--colors-neutral-fill-6: #b9b8bf;
--colors-neutral-fill-7: #d5d4d9;
--colors-neutral-fill-8: #e9e8eb;
--colors-neutral-fill-9: #f3f2f5;
--colors-neutral-fill-10: #f8f7fa;
--colors-neutral-fill-11: #ffffff;
--colors-neutral-line-1: #090714;
--colors-neutral-line-2: #181526;
--colors-neutral-line-3: #323040;
--colors-neutral-line-4: #5d5c66;
--colors-neutral-line-5: #85848c;
--colors-neutral-line-6: #b9b8bf;
--colors-neutral-line-7: #d5d4d9;
--colors-neutral-line-8: #e9e8eb;
--colors-neutral-line-9: #f3f2f5;
--colors-neutral-line-10: #f8f7fa;
--colors-neutral-line-11: #ffffff;
--fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
--fonts-size-1: 48px;
--fonts-size-2: 40px;
--fonts-size-3: 32px;
--fonts-size-4: 24px;
--fonts-size-5: 18px;
--fonts-size-6: 16px;
--fonts-size-7: 14px;
--fonts-size-8: 12px;
--fonts-size-9: 12px;
--fonts-weight-1: 900;
--fonts-weight-2: 800;
--fonts-weight-3: 700;
--fonts-weight-4: 600;
--fonts-weight-5: 500;
--fonts-weight-6: 400;
--fonts-weight-7: 300;
--fonts-weight-8: 200;
--fonts-weight-9: 100;
--fonts-lineHeight-1: 1.3;
--fonts-lineHeight-2: 1.5;
--fonts-lineHeight-3: 1.7;
--borders-style-1: none;
--borders-style-2: solid;
--borders-style-3: dashed;
--borders-style-4: dotted;
--borders-width-1: 0px;
--borders-width-2: 1px;
--borders-width-3: 2px;
--borders-width-4: 4px;
--borders-radius-1: 0px;
--borders-radius-2: 1px;
--borders-radius-3: 2px;
--borders-radius-4: 6px;
--borders-radius-5: 8px;
--borders-radius-6: 10px;
--borders-radius-7: 50%;
--sizes-size-0: 0rem;
--sizes-size-1: auto;
--sizes-size-2: 0.125rem;
--sizes-size-3: 0.25rem;
--sizes-size-4: 0.375rem;
--sizes-size-5: 0.5rem;
--sizes-size-6: 0.625rem;
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--shadows-shadow-md: 0px 4px -1px 0px rgba(0, 0, 0, 0.1),
0px 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadows-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
0px 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

149
packages/amis-ui/scss/themes/_antd-colors.scss
View File

@ -1,149 +0,0 @@
/**
* @file 使用 extract-antd-color.py 转换
*/
$blue-base: #1890ff;
$blue-1: #e6f7ff;
$blue-2: #bae7ff;
$blue-3: #91d5ff;
$blue-4: #69c0ff;
$blue-5: #40a9ff;
$blue-6: #1890ff;
$blue-7: #096dd9;
$blue-8: #0050b3;
$blue-9: #003a8c;
$blue-10: #002766;
$purple-base: #722ed1;
$purple-1: #f9f0ff;
$purple-2: #efdbff;
$purple-3: #d3adf7;
$purple-4: #b37feb;
$purple-5: #9254de;
$purple-6: #722ed1;
$purple-7: #531dab;
$purple-8: #391085;
$purple-9: #22075e;
$purple-10: #120338;
$cyan-base: #13c2c2;
$cyan-1: #e6fffb;
$cyan-2: #b5f5ec;
$cyan-3: #87e8de;
$cyan-4: #5cdbd3;
$cyan-5: #36cfc9;
$cyan-6: #13c2c2;
$cyan-7: #08979c;
$cyan-8: #006d75;
$cyan-9: #00474f;
$cyan-10: #002329;
$green-base: #52c41a;
$green-1: #f6ffed;
$green-2: #d9f7be;
$green-3: #b7eb8f;
$green-4: #95de64;
$green-5: #73d13d;
$green-6: #52c41a;
$green-7: #389e0d;
$green-8: #237804;
$green-9: #135200;
$green-10: #092b00;
$magenta-base: #eb2f96;
$magenta-1: #fff0f6;
$magenta-2: #ffd6e7;
$magenta-3: #ffadd2;
$magenta-4: #ff85c0;
$magenta-5: #f759ab;
$magenta-6: #eb2f96;
$magenta-7: #c41d7f;
$magenta-8: #9e1068;
$magenta-9: #780650;
$magenta-10: #520339;
$pink-base: #eb2f96;
$pink-1: #fff0f6;
$pink-2: #ffd6e7;
$pink-3: #ffadd2;
$pink-4: #ff85c0;
$pink-5: #f759ab;
$pink-6: #eb2f96;
$pink-7: #c41d7f;
$pink-8: #9e1068;
$pink-9: #780650;
$pink-10: #520339;
$red-base: #f5222d;
$red-1: #fff1f0;
$red-2: #ffccc7;
$red-3: #ffa39e;
$red-4: #ff7875;
$red-5: #ff4d4f;
$red-6: #f5222d;
$red-7: #cf1322;
$red-8: #a8071a;
$red-9: #820014;
$red-10: #5c0011;
$orange-base: #fa8c16;
$orange-1: #fff7e6;
$orange-2: #ffe7ba;
$orange-3: #ffd591;
$orange-4: #ffc069;
$orange-5: #ffa940;
$orange-6: #fa8c16;
$orange-7: #d46b08;
$orange-8: #ad4e00;
$orange-9: #873800;
$orange-10: #612500;
$yellow-base: #fadb14;
$yellow-1: #feffe6;
$yellow-2: #ffffb8;
$yellow-3: #fffb8f;
$yellow-4: #fff566;
$yellow-5: #ffec3d;
$yellow-6: #fadb14;
$yellow-7: #d4b106;
$yellow-8: #ad8b00;
$yellow-9: #876800;
$yellow-10: #614700;
$volcano-base: #fa541c;
$volcano-1: #fff2e8;
$volcano-2: #ffd8bf;
$volcano-3: #ffbb96;
$volcano-4: #ff9c6e;
$volcano-5: #ff7a45;
$volcano-6: #fa541c;
$volcano-7: #d4380d;
$volcano-8: #ad2102;
$volcano-9: #871400;
$volcano-10: #610b00;
$geekblue-base: #2f54eb;
$geekblue-1: #f0f5ff;
$geekblue-2: #d6e4ff;
$geekblue-3: #adc6ff;
$geekblue-4: #85a5ff;
$geekblue-5: #597ef7;
$geekblue-6: #2f54eb;
$geekblue-7: #1d39c4;
$geekblue-8: #10239e;
$geekblue-9: #061178;
$geekblue-10: #030852;
$lime-base: #a0d911;
$lime-1: #fcffe6;
$lime-2: #f4ffb8;
$lime-3: #eaff8f;
$lime-4: #d3f261;
$lime-5: #bae637;
$lime-6: #a0d911;
$lime-7: #7cb305;
$lime-8: #5b8c00;
$lime-9: #3f6600;
$lime-10: #254000;
$gold-base: #faad14;
$gold-1: #fffbe6;
$gold-2: #fff1b8;
$gold-3: #ffe58f;
$gold-4: #ffd666;
$gold-5: #ffc53d;
$gold-6: #faad14;
$gold-7: #d48806;
$gold-8: #ad6800;
$gold-9: #874d00;
$gold-10: #613400;
$preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime,
green, blue, geekblue, purple;

1275
packages/amis-ui/scss/themes/_antd-variables.scss
View File

File diff suppressed because it is too large Load Diff

1705
packages/amis-ui/scss/themes/_cxd-variables.scss
View File

File diff suppressed because one or more lines are too long

347
packages/amis-ui/scss/themes/_dark-variables.scss
View File

@ -5,131 +5,226 @@
$ns: 'dark-';
$orange: #ff9f0b;
$yellow: #ffd609;
$green: #32d74b;
$turquoise: #00d1b2;
$cyan: #17a2b8;
$blue: #0983ff;
$purple: #bf5af2;
$red: #dc3545;
$primary: $blue;
$info: #2296f3;
$success: $green;
$warning: $orange;
$danger: $red;
$light: #3a3a3a;
$dark: #1e1f22;
$black: #141316;
$text-color: rgb(243, 241, 241);
$text--muted-color: #6c6c6c;
$text--loud-color: lighten($text-color, 10%);
$Page-aside-bg: #3c3c3c;
$Panel-bg: #302d2a;
$link-color: $info;
@import '../variables';
@import '../properties';
/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
$Table-strip-bg: $Panel-bg;
:root {
--Panel-bg: #{$Panel-bg};
--background-head: #191c22;
--background: #333538;
--body-bg: var(--background);
--borderColor: #656565;
--Button--default-bg: var(--black);
--Button-onDisabled-bg: var(--Panel-bg);
--Calendar-btnCancel-bg: var(--background-head);
--Calendar-cell-bg: var(--Panel-bg);
--Card-actions-onHover-bg: var(--dark);
--Card-actions-onHover-color: var(--text-color);
--Card-bg: var(--Panel-bg);
--Card-onChecked-bg: var(--black);
--Card-onChecked-color: var(--text-color);
--Card-onModified-bg: var(--dark);
--Card-onModified-color: var(--text-color);
--Checkbox-gb: linear-gradient(#515151, #4b4b4b);
--Checkbox-onHover-color: var(--blue);
--ColorPicker-bg: var(--background);
--DatePicker-bg: var(--background);
--DatePicker-header-select-borderColor: var(--background);
--DropDown-menu-bg: var(--background);
--Drawer-header-bg: var(--background);
--Fieldset-legend-bgColor: var(--background);
--Form-item-fontSize: var(--fontSizeBase);
--Form-item-fontColor: var(--body-color);
--Form-input-addOnBg: var(--Form-input-bg);
--Form-input-bg: #3c3c3c;
--Form-input-color: var(--text-color);
--Form-input-onDisabled-bg: var(--Panel-bg);
--Form-select-bg: var(--background);
--Form-select-menu-bg: var(--background);
--Form-select-onHover-bg: var(--background-head);
--Form-selectValue-bg: var(--Panel-bg);
--Form-selectValue-color: var(--text-color);
--IconPicker-tab-onActive-bg: var(--background);
--InputGroup-select-bg: var(--background);
--InputGroup-select-onFocused-bg: var(--Panel-bg);
--istItem-onModified-bg: var(--black);
--Layout-aside-bg: var(--background-head);
--Layout-aside-onAcitve-bg: var(--Panel-bg);
--Layout-aside-onHover-bg: #404040;
--Layout-aside-subList-bg: #131519;
--Layout-header-bg: var(--background-head);
--List-bg: var(--Panel-bg);
--ListControl-item-bg: var(--background);
--ListControl-item-onActive-before-bg: var(--background);
--ListItem--strip-bg: var(--background);
--ListItem-onChecked-bg: var(--black);
--ListItem-onChecked-color: var(--text-color);
--ListItem-onModified-color: var(--text-color);
--Number-handler-bg: var(--background);
--Panel--default-bg: #323232;
--Panel-footerBg: #323232;
--Panel-footerBorderColor: #656565;
--PopOver-bg: var(--background);
--Table-onChecked-bg: var(--black);
--Table-onChecked-color: var(--text-color);
--Table-onHover-bg: var(--dark);
--Table-onHover-bg-rgba: 30, 31, 34;
--Table-onModified-bg: var(--black);
--Table-onModified-color: var(--text-color);
--Table-strip-bg: var(--Panel-bg);
--Table-thead-bg: #2f2f2f;
--Table-searchableForm-backgroundColor: var(--background);
--Tabs--card-bg: #323639;
--Tabs--card-borderTopColor: var(--background);
--Tabs--card-onActive-bg: var(--Panel-bg);
--Tabs--radio-bg: var(--Panel-bg);
--Tabs--radio-bg: var(--Panel-bg);
--Tabs-content-bg: var(--Panel-bg);
--Tabs-onActive-bg: var(--Panel-bg);
--Tabs-onActive-color: #{lighten($text-color, 10%)};
--Tabs-onHover-borderColor: var(--Tabs-onActive-borderColor);
--Tabs--chrome-onHover-bg: #36383c;
--Tabs--chrome-bg: #333538;
--Tooltip--attr-color: var(--text-color);
--Transfer-title-bg: #2f2f2f;
--TransferSelect--table-heading-bg: var(--background);
--TreeSelect-popover-bg: var(--Panel-bg);
--Wizard-steps-bg: var(--background-head);
--Wizard-steps-li-onActive-arrow-bg: var(--Panel-bg);
--Wizard-steps-li-onActive-bg: var(--Panel-bg);
--Checkbox-onDisabled-color: #4e4e4e;
--Checkbox-onDisabled-bg: var(--Panel-bg);
--Radio-onDisabled-color: #4e4e4e;
--Radio-onDisabled-bg: var(--Panel-bg);
// --Nav-subNav-bg: var(--Panel-bg);
// timeline
--TimelineItem--text-primary-color: #{$text-color};
--colors-neutral-fill-none: translate;
--colors-error-main: #dc3545;
--colors-error-1: #420312;
--colors-error-2: #69091c;
--colors-error-3: #8f1428;
--colors-error-4: #b52236;
--colors-error-5: #dc3545;
--colors-error-6: #ff6471;
--colors-error-7: #ff8b92;
--colors-error-8: #ffb1b5;
--colors-error-9: #ffd8da;
--colors-error-10: #ffe6e6;
--colors-warning-main: #ff9f0b;
--colors-warning-1: #663000;
--colors-warning-2: #8c4600;
--colors-warning-3: #b35f00;
--colors-warning-4: #d97b00;
--colors-warning-5: #ff9f0b;
--colors-warning-6: #ffb43b;
--colors-warning-7: #ffc96c;
--colors-warning-8: #ffdd9d;
--colors-warning-9: #ffefce;
--colors-warning-10: #fff7e6;
--colors-success-main: #32d74b;
--colors-success-1: #023d13;
--colors-success-2: #08631f;
--colors-success-3: #128a2c;
--colors-success-4: #20b03a;
--colors-success-5: #32d74b;
--colors-success-6: #57e36a;
--colors-success-7: #81f08e;
--colors-success-8: #affcb6;
--colors-success-9: #d8ffdb;
--colors-success-10: #e6ffe7;
--colors-link-main: #2296f3;
--colors-link-1: #002559;
--colors-link-2: #003980;
--colors-link-3: #0754a6;
--colors-link-4: #1272cc;
--colors-link-5: #2296f3;
--colors-link-6: #50b3ff;
--colors-link-7: #7bc8ff;
--colors-link-8: #a7dcff;
--colors-link-9: #d3eeff;
--colors-link-10: #e6f6ff;
--colors-info-main: #2296f3;
--colors-info-1: #002559;
--colors-info-2: #003980;
--colors-info-3: #0754a6;
--colors-info-4: #1272cc;
--colors-info-5: #2296f3;
--colors-info-6: #50b3ff;
--colors-info-7: #7bc8ff;
--colors-info-8: #a7dcff;
--colors-info-9: #d3eeff;
--colors-info-10: #e6f6ff;
--colors-other-main: #2468f2;
--colors-other-1: #001259;
--colors-other-2: #001e80;
--colors-other-3: #0832a6;
--colors-other-4: #144bcc;
--colors-other-5: #2468f2;
--colors-other-6: #528eff;
--colors-other-7: #7dadff;
--colors-other-8: #a8caff;
--colors-other-9: #d4e5ff;
--colors-other-10: #e6f0ff;
--colors-brand-1: #002566;
--colors-brand-2: #00388c;
--colors-brand-3: #004db3;
--colors-brand-4: #0065d9;
--colors-brand-5: #0983ff;
--colors-brand-6: #3ba0ff;
--colors-brand-7: #6cbaff;
--colors-brand-8: #9dd3ff;
--colors-brand-9: #ceeaff;
--colors-brand-10: #e6f4ff;
--colors-neutral-text-1: #070e14;
--colors-neutral-text-2: #f3f1f1;
--colors-neutral-text-3: #303840;
--colors-neutral-text-4: #6c6c6c;
--colors-neutral-text-5: #84888c;
--colors-neutral-text-6: #b8bbbf;
--colors-neutral-text-7: #d4d7d9;
--colors-neutral-text-8: #e8e9eb;
--colors-neutral-text-9: #f2f4f5;
--colors-neutral-text-10: #f7f9fa;
--colors-neutral-text-11: #ffffff;
--colors-neutral-fill-none: transparent;
--colors-neutral-fill-1: #070e14;
--colors-neutral-fill-2: #151e26;
--colors-neutral-fill-3: #303840;
--colors-neutral-fill-4: #5c6166;
--colors-neutral-fill-5: #84888c;
--colors-neutral-fill-6: #b8bbbf;
--colors-neutral-fill-7: #d4d7d9;
--colors-neutral-fill-8: #e8e9eb;
--colors-neutral-fill-9: #f2f4f5;
--colors-neutral-fill-10: #f7f9fa;
--colors-neutral-fill-11: #ffffff;
--colors-neutral-line-1: #070e14;
--colors-neutral-line-2: #151e26;
--colors-neutral-line-3: #303840;
--colors-neutral-line-4: #5c6166;
--colors-neutral-line-5: #84888c;
--colors-neutral-line-6: #b8bbbf;
--colors-neutral-line-7: #d4d7d9;
--colors-neutral-line-8: #e8e9eb;
--colors-neutral-line-9: #f2f4f5;
--colors-neutral-line-10: #f7f9fa;
--colors-neutral-line-11: #ffffff;
--fonts-base-family: -apple-system, BlinkMacSystemFont, SF Pro SC, SF Pro Text,
Helvetica Neue, Helvetica, PingFang SC, Segoe UI, Roboto, Hiragino Sans GB,
Arial, microsoft yahei ui, Microsoft YaHei, SimSun, sans-serif;
--fonts-size-1: 48px;
--fonts-size-2: 40px;
--fonts-size-3: 32px;
--fonts-size-4: 24px;
--fonts-size-5: 18px;
--fonts-size-6: 16px;
--fonts-size-7: 14px;
--fonts-size-8: 12px;
--fonts-size-9: 12px;
--fonts-weight-1: 900;
--fonts-weight-2: 800;
--fonts-weight-3: 700;
--fonts-weight-4: 600;
--fonts-weight-5: 500;
--fonts-weight-6: 400;
--fonts-weight-7: 300;
--fonts-weight-8: 200;
--fonts-weight-9: 100;
--fonts-lineHeight-1: 1.3;
--fonts-lineHeight-2: 1.5;
--fonts-lineHeight-3: 1.7;
--borders-style-1: none;
--borders-style-2: solid;
--borders-style-3: dashed;
--borders-style-4: dotted;
--borders-width-1: 0px;
--borders-width-2: 1px;
--borders-width-3: 2px;
--borders-width-4: 4px;
--borders-radius-1: 0px;
--borders-radius-2: 1px;
--borders-radius-3: 2px;
--borders-radius-4: 6px;
--borders-radius-5: 8px;
--borders-radius-6: 10px;
--borders-radius-7: 50%;
--sizes-size-0: 0rem;
--sizes-size-1: auto;
--sizes-size-2: 0.125rem;
--sizes-size-3: 0.25rem;
--sizes-size-4: 0.375rem;
--sizes-size-5: 0.5rem;
--sizes-size-6: 0.625rem;
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--shadows-shadow-md: 0px 4px -1px 0px rgba(0, 0, 0, 0.1),
0px 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadows-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
0px 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

3
packages/amis-ui/scss/themes/ang.scss
View File

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

4
packages/amis-ui/scss/themes/antd.scss
View File

@ -1,5 +1,5 @@
// 参考 antd 主题
@import '../properties';
@import '../components';
@import './antd-variables';
@import './common';

427
packages/amis-ui/scss/themes/cxd.scss
View File

@ -1,428 +1,5 @@
// 百度云舍主题：http://console.yunshe.design/docs/index
@import '../properties';
@import '../components';
@import './cxd-variables';
@import './common';
// .#{$ns}Switch {
// .text {
// margin: 0 px2rem(8px) 0 px2rem(25px);
// vertical-align: super;
// }
// .slider {
// &:before {
// width: calc(var(--Switch-height) - #{px2rem(4px)});
// top: px2rem(2px);
// bottom: px2rem(2px);
// left: px2rem(2px);
// transition: all 0.5s ease;
// }
// }
// &:active {
// .slider::before {
// width: calc(var(--Switch-height) + #{px2rem(2px)});
// border-radius: 10px;
// }
// }
// &:hover {
// background: var(--Switch-onHover-bgColor);
// }
// &.is-checked {
// background: var(--Switch-checked-bgColor);
// .slider::before {
// right: auto;
// left: calc(
// 100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
// );
// }
// .text {
// margin: 0 px2rem(25px) 0 px2rem(8px);
// }
// &:hover {
// background: var(--Switch-checked-onHover-bgColor);
// }
// &:active {
// background: var(--Switch-checked-onActive-bgColor);
// .slider::before {
// left: calc(
// 100% - (var(--Switch-height) + #{px2rem(2px)}) - #{px2rem(2px)}
// );
// }
// }
// }
// }
// // input选择器模式
// .#{$ns}TextControl-sugs {
// border-radius: px2rem(3px);
// // top: calc(var(--Form-input-height) + #{px2rem(4px)});
// box-shadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
// border: none;
// }
// .#{$ns}Select {
// .#{$ns}PopOver {
// .#{$ns}Select-menu {
// border-radius: var(--borders-radius-3);
// .#{$ns}Select-option {
// // height: var(--Form-input-height);
// line-height: 1.1;
// padding: px2rem(5px) px2rem(12px);
// &.is-highlight:hover > span {
// color: var(--menu-active-color);
// }
// svg {
// color: var(--default-icon-color);
// }
// }
// }
// }
// }
// .#{$ns}NestedSelectControl {
// .#{$ns}PopOver {
// .#{$ns}NestedSelect-menuOuter {
// .#{$ns}NestedSelect-menu {
// border-radius: var(--borders-radius-3);
// .#{$ns}NestedSelect-option {
// height: var(--Form-input-height);
// padding: 0 px2rem(12px);
// .#{$ns}NestedSelect-optionArrowRight {
// padding-right: 0;
// }
// }
// &:not(:first-child) {
// margin-left: 2px;
// }
// }
// }
// }
// }
// .#{$ns}TreeSelectControl {
// .#{$ns}PopOver {
// box-shadow: var(--boxShadow);
// .#{$ns}Tree {
// border-radius: var(--borders-radius-3);
// border: none;
// }
// }
// }
// .#{$ns}Modal-content {
// .#{$ns}TreeSelect-popover {
// box-shadow: var(--boxShadow);
// .#{$ns}Tree {
// border-radius: var(--borders-radius-3);
// border: none;
// }
// }
// }
// .#{$ns}Toast {
// .#{$ns}Toast-icon {
// margin-right: #{px2rem(8px)};
// }
// .#{$ns}Toast-close {
// margin-left: #{px2rem(8px)};
// cursor: pointer;
// }
// }
// .#{$ns}Button--iconOnly {
// min-width: var(--Button-height);
// }
// .#{$ns}Alert {
// font-weight: var(--fonts-weight-6);
// .#{$ns}Alert-close {
// opacity: 1;
// color: var(--colors-neutral-text-5);
// &:hover {
// color: var(--colors-neutral-text-4);
// }
// &:active {
// color: var(--colors-neutral-text-3);
// }
// }
// }
// .#{$ns}IconPickerControl {
// .#{$ns}IconPickerControl-input--withAC {
// .#{$ns}IconPickerControl-sugsPanel {
// border: none;
// box-shadow: var(--boxShadow);
// border-radius: px2rem(3px);
// }
// }
// }
// .#{$ns}Combo {
// .#{$ns}Combo-items {
// .#{$ns}Combo-item {
// .#{$ns}Combo-delBtn {
// padding-top: calc(
// (var(--Form-input-height) - var(--Form-input-lineHeight) * 10px) / 2
// );
// }
// }
// }
// }
// .#{$ns}LocationControl {
// .#{$ns}PopOver {
// border: none;
// box-shadow: var(--boxShadow);
// }
// }
// .#{$ns}Transfer {
// &-title {
// height: px2rem(32px);
// flex: 0 0 px2rem(32px);
// padding-left: #{px2rem(12px)};
// padding-right: #{px2rem(12px)};
// &--light {
// height: px2rem(40px);
// flex: 0 0 px2rem(40px);
// }
// }
// &-result {
// > .#{$ns}Selections {
// height: 100%;
// }
// }
// &-table-title {
// background-color: unset;
// }
// .#{$ns}ListCheckboxes {
// .#{$ns}ListCheckboxes-item {
// padding-left: #{px2rem(16px)};
// padding-right: #{px2rem(16px)};
// }
// }
// .#{$ns}TableSelection {
// .#{$ns}Table-table {
// border-top: 0;
// border-left: 0;
// border-right: 0;
// }
// tbody {
// tr {
// &.is-active {
// color: unset;
// }
// }
// }
// }
// }
// .#{$ns}GroupedSelection {
// &-item {
// padding-left: var(--gap-base);
// padding-right: var(--gap-base);
// &.is-active {
// color: unset;
// }
// }
// }
// .#{$ns}Selections {
// height: auto;
// &-item {
// padding-left: var(--gap-base);
// padding-right: var(--gap-base);
// }
// &-mid {
// min-width: px2rem(16px);
// }
// .#{$ns}TableSelection {
// .#{$ns}Table-table > thead > tr,
// .#{$ns}Table-table > tbody > tr {
// height: px2rem(40px);
// }
// }
// }
// .#{$ns}Modal {
// box-shadow: var(--boxShadow);
// &-content {
// padding: #{px2rem(24px)};
// border-radius: #{$R4};
// }
// &-body {
// padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
// font-size: #{$T2};
// font-weight: var(--fonts-weight-6);
// }
// &-footer {
// .#{$ns}Button {
// margin-left: #{px2rem(16px)};
// }
// }
// }
// .#{$ns}Drawer {
// &-content {
// border-radius: 0;
// }
// &-header {
// border-radius: #{$R4} 0 0 0;
// }
// &-title {
// font-size: #{$T3};
// font-weight: #{$W3};
// }
// &-body {
// font-size: #{$T3};
// font-weight: var(--fonts-weight-6);
// }
// }
// .#{$ns}Drawer--right {
// .#{$ns}Drawer-header {
// border-radius: #{$R4} 0 0 0;
// }
// .#{$ns}Drawer-footer {
// justify-content: flex-end;
// .#{$ns}Button {
// margin-left: #{px2rem(16px)};
// }
// }
// }
// .#{$ns}Drawer--left {
// .#{$ns}Drawer-header {
// border-radius: 0 #{$R4} 0 0;
// }
// .#{$ns}Drawer-footer {
// .#{$ns}Button {
// margin-left: #{px2rem(16px)};
// }
// }
// }
// .#{$ns}Drawer--top {
// .#{$ns}Drawer-footer {
// .#{$ns}Button {
// margin-left: #{px2rem(16px)};
// }
// }
// }
// .#{$ns}Drawer--bottom {
// .#{$ns}Drawer-header {
// border-radius: #{$R4} #{$R4} 0 0;
// }
// .#{$ns}Drawer-footer {
// .#{$ns}Button {
// margin-left: #{px2rem(16px)};
// }
// }
// }
// .#{$ns}Steps {
// .#{$ns}StepsItem {
// &-container {
// &Icon {
// padding-right: #{px2rem(8px)};
// .#{$ns}StepsItem-icon {
// width: #{px2rem(24px)};
// height: #{px2rem(24px)};
// display: inline-flex;
// align-items: center;
// justify-content: center;
// svg {
// width: #{px2rem(12px)};
// height: #{px2rem(12px)};
// top: 0;
// }
// }
// &Wrapper {
// .#{$ns}StepsItem-body {
// .#{$ns}StepsItem-title {
// &:after {
// padding-right: #{px2rem(8px)};
// }
// }
// .#{$ns}StepsItem-subTitle {
// padding-left: #{px2rem(8px)};
// }
// }
// }
// }
// }
// }
// &--vertical {
// .#{$ns}StepsItem {
// &-container {
// &Icon > .#{$ns}StepsItem-icon {
// &:after {
// top: px2rem(28px);
// left: px2rem(10px);
// transform: translate(px2rem(1px));
// }
// }
// }
// }
// }
// .#{$ns}StepsItem.is-finish {
// .#{$ns}StepsItem-icon {
// color: var(--Steps-status-success);
// background-color: var(--white);
// }
// }
// .#{$ns}StepsItem.is-error {
// .#{$ns}StepsItem-icon {
// color: var(--Steps-status-error);
// background-color: var(--white);
// border: 1px solid var(--Steps-status-error);
// }
// }
// }
// .#{$ns}Form-feedback {
// list-style-type: none;
// padding-left: 0;
// }
// .#{$ns}Form-item {
// &--inline {
// .#{$ns}Form-label {
// margin-right: #{px2rem(16px)};
// }
// }
// }
// //FieldSet Form + Collapse
// .#{$ns}Form {
// .#{$ns}Collapse {
// border: none;
// &-header {
// background-color: var(--white);
// display: inline-flex;
// justify-content: flex-end;
// flex-direction: row-reverse;
// }
// &-content {
// padding: 0;
// }
// }
// }

3
packages/amis-ui/scss/themes/dark.scss
View File

@ -1,3 +1,4 @@
@import '../properties';
@import '../components';
@import './dark-variables';
@import './common';

2
packages/amis-ui/src/icons/slider-handle-icon.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="4px" viewBox="0 0 6 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M1.5,2.28847549e-17 L1.5,4 L0.5,4 L0.5,-2.22044605e-16 L1.5,2.28847549e-17 Z M3.5,2.28847549e-17 L3.5,4 L2.5,4 L2.5,-2.22044605e-16 L3.5,2.28847549e-17 Z M5.5,2.28847549e-17 L5.5,4 L4.5,4 L4.5,-2.22044605e-16 L5.5,2.28847549e-17 Z" id="形状结合" fill="#D4E5FF"></path>
<path d="M1.5,2.28847549e-17 L1.5,4 L0.5,4 L0.5,-2.22044605e-16 L1.5,2.28847549e-17 Z M3.5,2.28847549e-17 L3.5,4 L2.5,4 L2.5,-2.22044605e-16 L3.5,2.28847549e-17 Z M5.5,2.28847549e-17 L5.5,4 L4.5,4 L4.5,-2.22044605e-16 L5.5,2.28847549e-17 Z" id="形状结合" fill="transparent"></path>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 573 B