SanshuiLiu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(grid): [grid] add XDesign theme (#1518)

This commit is contained in:
gimmyhehe 2024-04-02 16:17:25 +08:00 committed by GitHub
parent 25b7be8903
commit 059742e49d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/theme/src/grid/button.less
View File

@ -69,10 +69,11 @@
}
&.type__button {
padding: 0 12px;
line-height: 28px;
border: 1px solid var(--ti-grid-border-color);
border-radius: 2px;
padding: 0 var(--ti-grid-toolbar-btn-padding-horizontal);
line-height: var(--ti-grid-toolbar-btn-line-height);
border: 1px solid var(--ti-grid-toolbar-btn-border-color);
border-radius: var(--ti-grid-toolbar-btn-border-radius);
min-width: var(--ti-grid-toolbar-btn-min-width);
&.theme__primary {
color: var(--ti-grid-light-color);
@ -95,7 +96,8 @@
&:not(.theme__primary) {
&:not(.is__disabled) {
&:hover {
.ButtonHover(var(--ti-grid-primary-color));
color: var(--ti-grid-primary-color);
border-color: var(--ti-grid-toolbar-btn-hover-border-color);
}
&:active {
@ -156,7 +158,8 @@
&:not(.is__disabled) {
&:not(.theme__primary) {
.ButtonHover(var(--ti-grid-primary-color));
color: var(--ti-grid-primary-color);
border-color: var(--ti-grid-toolbar-btn-hover-border-color);
}
}
}

14
packages/theme/src/grid/smb-theme.js
View File

@ -20,8 +20,14 @@ export const tinyGridSmbTheme = {
'ti-grid-checkbox-icon-size': 'var(--ti-common-font-size-2)',
'ti-grid-checkbox-bg-color-checked': '#1476FF',
'ti-grid-radio-bg-color-checked': '#1476FF',
'ti-grid-toolbar-btn-height': 'var(--ti-common-size-8x, 32px)',
'ti-grid-toolbar-btn-width': 'var(--ti-common-size-8x, 32px)',
'ti-grid-toolbar-btn-border-color': 'var(--ti-common-color-line-normal, #c2c2c2)',
'ti-grid-toolbar-btn-border-radius': 'calc(var(--ti-common-size-base, 4px) + 2px)'
'ti-grid-toolbar-icon-btn-height': 'var(--ti-common-size-8x)',
'ti-grid-toolbar-icon-btn-width': 'var(--ti-common-size-8x)',
'ti-grid-toolbar-icon-btn-border-color': 'var(--ti-common-color-line-normal)',
'ti-grid-toolbar-icon-btn-border-radius': 'calc(var(--ti-common-size-base) + 2px)',
'ti-grid-toolbar-btn-min-width': 'calc(var(--ti-common-size-base) * 24)',
'ti-grid-toolbar-btn-padding-horizontal': 'var(--ti-common-space-6x)',
'ti-grid-toolbar-btn-line-height': '30px',
'ti-grid-toolbar-btn-border-color': '#595959', // 缺少#595959的边框公共变量
'ti-grid-toolbar-btn-hover-border-color': 'var(--ti-common-color-line-normal)', // 缺少#595959的边框公共变量
'ti-grid-toolbar-btn-border-radius': 'var(--ti-common-size-4x)'
}

10
packages/theme/src/grid/toolbar.less
View File

@ -84,11 +84,11 @@
.@{grid-refresh-prefix-cls}__wrapper,
.@{grid-custom-prefix-cls}__wrapper {
float: right;
width: var(--ti-grid-toolbar-btn-width);
height: var(--ti-grid-toolbar-btn-height);
line-height: var(--ti-grid-toolbar-btn-height);
border: solid 1px var(--ti-grid-toolbar-btn-border-color);
border-radius: var(--ti-grid-toolbar-btn-border-radius);
width: var(--ti-grid-toolbar-icon-btn-width);
height: var(--ti-grid-toolbar-icon-btn-height);
line-height: var(--ti-grid-toolbar-icon-btn-height);
border: solid 1px var(--ti-grid-toolbar-icon-btn-border-color);
border-radius: var(--ti-grid-toolbar-icon-btn-border-radius);
text-align: center;
margin: 0 4px;
display: flex;

25
packages/theme/src/grid/vars.less
View File

@ -162,14 +162,27 @@
// 表格无数据背景图片
--ti-table-nodata-td-bg-img-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAFPr3GUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADPNJREFUeNqUULENwCAMK0wsSDmBk3oCn/UFegR7N84oH6SAoAISFdWShwQbRxaIuDFoSzE/SEaIzAycgY2quBNNiawnfYl7iOGkEAJRTDsrf/yecQwJAEAUWmvS0ltdjJEYlFL9eA4J3nticM71477llhIB17hKo9WQaVbi2dBoO6Gb3x8BhE1DAFRxA7ocI1LCwxcXjMhpiFCk/YcpdoCJvH37FkXFlStXUDSAFO8HsVavXs3w69cvFMXCwsIMu3btwkz7Hz9+xBoxjx49wlQsKSmJ4VA2NjY0lyOBZ8+egWlgssUaQyDFB3BF35s3b1D4pOQmeE5iJKQQRLCgC6DZgmIIQABhSxsw7PCfOHAAlxnYBCkBCUQn1Fu3bjF8+fKF4dy5cwwpKSkMc+bMAcf38+fPwfKurq4M8vLyOMMQa+xs3boVbIC3tzfWxIMMQBYKCQkxBAUFYY3NAHRRkMEBAQHgtI2nfAHnBRsbG4Z3795hzWkgw9djk3n9+jVm8kYDoFyJo+KB551GdEFQWMJ8QAiIiooyGBkZYU+8uHIEqJr4/v07To0wy1lZWRlERESwmo03taCnDlAEgyIblnJAAMTGlVrwlcbkAqzpHFdrgKjqGJsgQADWqxjHQRgI2lEqGn8h10F5NS3iO1F+cj0PoM0DaE6iRbwA6SQekDRUIHE3lhKZZRfMwUhuzHq9LLOzy1L5u+tOyv2yduaIqLVEQYqvjakYOfvzjtxyF2gu4qfaj5FGjLHHrHEaxeOqocDnp/UnaXWWZavEzfNc5PTJHUDdSH0APRdsreo9qFbHceydVIgYznCiNFKh6bpODcOgwjCc6TQ0/IWqqmyX6ft+1jBmPIYBDMuyXI22rmtxhDlLh2g6ED0u9AXrGJNV27YqiqKJYwpjjLXl9JkraeuUAh+I9kOMfE3T+EfMIU3TWSqSJFFFUYh98MY9wGu6QEsKgmCyJzl19fhflbdg89ZjSOWVyyt47fa7F9ALMZMIo4P2/V/YAk1ZoY9yytFNH+FU4jEMPjc4/OYCWmqmrnAbZv/jb/1Ih34FYM6KURuGoajieAwkF8jQwVlsqLdshq5eSm7Q3iBX6QmKfYIO3jKkFzD4CM0eaMGQzbR9wko/qSV9K3HaB4IEK9b395f+ey/c9t81Zq0mdcXadW1ONgRpje9iODx9jzWrUM54hUMCtVmZ6L6NQ107YNn+2rUfhiKIQ+L5ouQzz3MRRZEIgkBKQ2WVUOo3mUw6r+E76Ak+2/QsieunZFxkPZqUMlJcgd9zGuIJ4GccM12ZHnO324nNZiOWy6XwfV9SJ2aGrNjv95JroOkmSSIWi4Vp+pb6P7c28Q7+gYDH47F0KzmanAOYBwDoG3g4Ax/I9IttlpIlQNM01rtS+kepts5sUBlP05QT9BSZvu+TGbWI8a5T+ymJ8kKZqUx3upEO5/QvgDDTRUxvBoDZZHJdUGZIwuFw6FVSXst2rMDxptSAbSMi0ygLjQ10PA7n87nchFAOfTa2p+s6pwjD8OhG2zYialoNk/hFEiAoELTJC+tqLm+cifTfkjiOZaZ0sG0+XY0zceMTAm3thtgoVVXJo8/zvF7Z6SoPKFh1KjGRySS7mN1FUchxDsqy/MyyrM9PXk18ms0/6ro28g7aLOg1g6TUYUX7iY5Pxy09/A8Ycc/pqp38+MfBjlyVyzUVzIpDK/p0xBl5+rsLBZmRe444AQNfAjBvBbdtBDFwdfBPjyQNCEkFKcF2BUEaEOwKknTiVBClAcWpIPZP+jk//ewOFOunl+M5HA3qsLsc3u35NMDCEGzvDSgulxzyPJbO4X1zSZ09r9PI738/rwVLyi4JuksIX3tEvLtGghhcQhDcJKzZFefNnq7cg4UUvKeFD9+f0JoiKUH6bbPpl4Ejx7YxTO+DOMYl82hZPWfpi5FuxTdWKlFlCP8Y+fp+8rgHYu79keQdUVeJWfpYCIurXFmWpvOL5XJZT0jojgaKAqSfkoLq30nHH4AkJjMNJN4F1drVpOlIgYGV1WpVP5jR7iSHljkq/MRnp0o1iV3jT57KpS+66njSTg5BTZUxKCWJdbg5D9wjGxfxdUPa1Uh07F3Q3b35fM6UYLVvU6Rl5kl6wbon3IewSA2bzaZehCH+4uzRYo0myk4jMIopVqwZnsBHidNXngdBERobJ566TxRTxNwUINnKIARE+FRYwx6YxvDMMYiARefTophixWZENGkmymAPDCvDEPp/CFxQpGEtPQrLanKz2cz0aVgbpHHQSXyiSe92uzCdTk1RXQvqOalXIgXCHAzSHq7sXW6JpWEVWKdkjMbBhqUHIZ26FPpAvrXYuFOpwvbgQTnALazQCJL6JQCPpU+8pBn3yPVaNOkO4Q64rfr4YwrSusg1gJxi+oHu4u5uWe6hQ6PVtWJcLYJF1ehsJpDgI3pst1sz5CGXwLJCHtzDebEADyBNTbPgoMCKGIK0SiUhzbgYSHv77CD9wIY9WBpAc78EJEY7SH/TIe+n9deYDtjv97WlSwBFsLgHZkYceuILaTOnxnWLB63X62yW5ynZkDShE9x+oysV6mKF7c2ARWmJPV646svlLJDtOPigTHZ7NQ/57MjqgO85sQZF2y9mFxS7cBmv5hHLZVyaR0LLuwvGpM0r40BdSpEO4XhG3KJDhRXzdYyEy5AYCKtYPxqB8KJrajoZwcc/WLc0k+VBTf38CmQfGyOZaQWbml43G94OeOCKtuRC6wKaMLkKiXPlgjx6tJnlzeprx1X8r/26aZf1X4D2zienjRgK4yZCQmwIbFmNlAMk3USwSnKCcoPCEXqD3qDlBKQ3oCdowpJVWLPJEeACqPqN/EZmOjOZ2M+TyZ8njaBFcuxvnj8/29970brQ97XEvr0b+7MbYZ7MrHvP6obhMaxJoMc2Av7WksX2t10KZtsO9MDuM0ZmO2xud8uLbQD6xnpJ12y3vdvZ99gmoBPbob7ZTXuxDrTcFNC88QezX1YZ4msDvY8ABwO+DtBt0iW3xb7UXTzrAH1uQ6D+AddSDid0fQsBuvaR3sGqdepVQBem6AcFqvO5eX19/fR/HAzzSOq/xt+kLlLRhWGdmkkBVpqHXQb0LNZGg4SYk5OTdZNb1AwRIcXUuNwZjaIMcW4KJHedpkDGu3jILNoUyJiUD8vPLEUbFW3r86e7Uw2Q5Y6IqxWuXfLl+dpiaCJFpQGd8HtJHTcfsKfGud10qQNu+RnSusuXJGfTcWiCjEUupfv9fjqgTXq0vHjq9HCxjTaCh36L4qSkpp2PfbdrXQY02+ggSbpwH1ZU/Enqd0ZejGrNNrl5RT6BQ/CQuspPalsCvIcSvczS+5eOE2GoWJ3E9rYYgLI4I/j6+PjIKEQ8X8l+CUfjzV9DW6ODeLRIlhBH5utJhRgyEFcphLKoSl1U1U+0Bfkqv6LAk89QnHVgmxybmhLvVeYKHwAbXqbzeAp1KagGliSJV9uiWy8CDXGzL3UUpeCLoyjT2+2xWTPNoszQ70hiOAsfFOJqMEM4umxmhNIU4iscwp017ktUtHFHM2aWUEm8AuCZ3p6qxszKhOKrBORFRsQDiLwkRJDoZCXaiEAbWbjX0WxNOij6QiIaqIOBDIfDrIpeSNsuR/usAQL02dlZE/xcumFR8Wg0kTwu6M/Pz0HhHd7rnmn4giGFpzHKqLhHEFsDtNtBBsRmpajCvoZH+9BG3oibG+BnfaClk3ge+S/i4Vp5XZPJJKUh2vNt0w3v4GcoBIeI6c0C9B+NODoPtFCGRB4oi9lt+XI0bVKWCUDg516v5wWKG96xg5XjgMhAp19zMY1BHxJ5HB0dpdEHmxkG6HPABAhIygWM/L99jX7RPxdoX0dYYWleCLcC79pAC9gsNrkvMVnb8OCiSsY+cbREHbR5enraBD+D7eOxc3L3oE0fAA0YDIRpGpLpDD9rGlxPZOTyMx4e4WQxvXGROBr6eNH2ahZEMaiDg/+AXDIV47BInEBAjbTtNhbTqQu00dqK53la4uk2GvyMZ0t8HgHoDNP8nSF/+KvxCXgwZ9QSrzIozhbkUnXTRhYnjiDb7wj9+lT1quhyVg1sjPNeavkyKBbFy8vL1hz8X11dpSFnzYQ2b5DLgE53p0ZZlUQZm6enp/R3bqCvr68bv9JyZxlxPUBHsEL1UpWug73z0ihKcFmIWAwZcKieo0qzUfU3Ppsc1QgvmRU1MSWKpTqSMHUhzQ7ayi8wqCtyTOx06B4w/c+LB0Yxl2xpqeTugG1mdw69rg4lPYXot2Z/NdJeYvTQ1IqBDWO6e0ARYxOQSBR6lbWw0+fC5FL6d2iRu7BjDMrWipH+Rqd+bHGkcm/7/6bZaBMJnWPb8bbmG85t/2ZRz1U2kKJ8bhdTnqbTNeQ0bartsW0EelW8PnCe8zVmwtyCt3CeZVsG9g+URCM796dvBgAAAABJRU5ErkJggg==');
// 工具栏按钮高度
--ti-grid-toolbar-btn-height: calc(var(--ti-common-size-7x, 28px) + 2px);
// 工具栏按钮宽度
--ti-grid-toolbar-btn-width: calc(var(--ti-common-size-7x, 28px) + 2px);
// 工具栏按钮边框色
// 工具栏按钮水平内边距
--ti-grid-toolbar-btn-padding-horizontal: var(--ti-common-space-3x, 12px);
// 工具栏按钮行高
--ti-grid-toolbar-btn-line-height: var(--ti-common-space-7x, 28px);
// 工具栏按钮边框颜色
--ti-grid-toolbar-btn-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
// 工具栏按钮边框圆角
--ti-grid-toolbar-btn-border-radius: calc(var(--ti-common-size-base, 4px) - 1px);
--ti-grid-toolbar-btn-border-radius: calc(var(--ti-common-size-base, 4px) - 2px);
// 工具栏按钮最小宽度
--ti-grid-toolbar-btn-min-width: none;
// 工具栏按钮悬浮边框颜色
--ti-grid-toolbar-btn-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
// 工具栏图标按钮高度
--ti-grid-toolbar-icon-btn-height: calc(var(--ti-common-size-7x, 28px) + 2px);
// 工具栏图标按钮宽度
--ti-grid-toolbar-icon-btn-width: calc(var(--ti-common-size-7x, 28px) + 2px);
// 工具栏图标按钮边框色
--ti-grid-toolbar-icon-btn-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
// 工具栏图标按钮边框圆角
--ti-grid-toolbar-icon-btn-border-radius: calc(var(--ti-common-size-base, 4px) - 1px);
// 排序按钮定位方式
--ti-grid-sort-icon-position: static;
// 排序按钮右侧定位

1
packages/theme/src/tooltip/smb-theme.js
View File

@ -7,7 +7,6 @@ export const tinyTooltipSmbTheme = {
'ti-tooltip-popper-border-radius': '8px',
'ti-tooltip-popper-info-bg-color': '#1476FF',
'ti-tooltip-popper-info-border-color': '#1476FF',
'ti-tooltip-popper-error-text-color': 'var(--ti-common-color-text-primary)',
'ti-tooltip-popper-dark-bg-color': '#191919',
'ti-tooltip-popper-dark-text-color': '#fff',
'ti-tooltip-popper-border-color': '#191919',