diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 6d653a7283..37fe2f3b52 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -183,7 +183,7 @@ // 半选状态 .@{checkbox-prefix-cls}-indeterminate { .@{checkbox-inner-prefix-cls} { - background-color: @component-background; + background-color: @checkbox-check-bg; border-color: @border-color-base; } .@{checkbox-inner-prefix-cls}::after { diff --git a/components/drawer/style/customize.less b/components/drawer/style/customize.less new file mode 100644 index 0000000000..59bc05695a --- /dev/null +++ b/components/drawer/style/customize.less @@ -0,0 +1,3 @@ +@import './index.less'; + +.popover-customize-bg(@drawer-prefix-cls, @popover-background); diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 79d170c750..d6b1c4f8b7 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -1,3 +1,4 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './drawer'; +@import './customize'; diff --git a/components/input/demo/group.md b/components/input/demo/group.md index 565856cf11..8b6ddb1e47 100644 --- a/components/input/demo/group.md +++ b/components/input/demo/group.md @@ -180,6 +180,6 @@ ReactDOM.render(, mountNode); diff --git a/components/list/style/customize.less b/components/list/style/customize.less new file mode 100644 index 0000000000..bbad35b7bc --- /dev/null +++ b/components/list/style/customize.less @@ -0,0 +1,12 @@ +@import './index.less'; + +@card-prefix-cls: ~'@{ant-prefix}-card'; + +.@{list-prefix-cls} { + // =================== Dard Hook Components =================== + .@{card-prefix-cls} { + & when (@theme = dark) { + background: @list-customize-card-bg; + } + } +} diff --git a/components/list/style/index.less b/components/list/style/index.less index 07ebc1c851..77366ff999 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -1,5 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; +@import './customize.less'; @list-prefix-cls: ~'@{ant-prefix}-list'; diff --git a/components/modal/demo/dark.md b/components/modal/demo/dark.md new file mode 100644 index 0000000000..fd321486eb --- /dev/null +++ b/components/modal/demo/dark.md @@ -0,0 +1,592 @@ +--- +order: 10 +title: + zh-CN: 暗背景 + en-US: Dark Bg +debug: true +--- + +## zh-CN + +第一个对话框。 + +## en-US + +Basic modal. + +```jsx +import { Modal, DatePicker, Slider, Tree, Badge, Collapse, Timeline, Tabs, Anchor, Table, Card, Button, Calendar, Transfer, Switch, Typography, Dropdown } from 'antd'; +import moment from 'moment'; +import difference from 'lodash/difference'; +import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons'; + +const { Panel } = Collapse; +const { TreeNode } = Tree; +const { TabPane } = Tabs; +const { Meta } = Card; +const { Link } = Anchor; +const { Text } = Typography; + +const text = ` + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. +`; + +const mockData = []; +for (let i = 0; i < 20; i++) { + mockData.push({ + key: i.toString(), + title: `content${i + 1}`, + description: `description of content${i + 1}`, + disabled: i % 3 < 1, + }); +} + +const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key); + +const data = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', + }, + { + key: '4', + name: 'Jim Red', + age: 32, + address: 'London No. 2 Lake Park', + }, +]; + +const columnsTable = [ + { + title: 'Name', + dataIndex: 'name', + }, + { + title: 'Borrow', + dataIndex: 'borrow', + }, + { + title: 'Repayment', + dataIndex: 'repayment', + }, +]; + +const dataTable = [ + { + key: '1', + name: 'John Brown', + borrow: 10, + repayment: 33, + }, + { + key: '2', + name: 'Jim Green', + borrow: 100, + repayment: 0, + }, + { + key: '3', + name: 'Joe Black', + borrow: 10, + repayment: 10, + }, + { + key: '4', + name: 'Jim Red', + borrow: 75, + repayment: 45, + }, +]; + +const expandedRowRender = () => { + const columnsExpand = [ + { title: 'Date', dataIndex: 'date', key: 'date' }, + { title: 'Name', dataIndex: 'name', key: 'name' }, + { + title: 'Status', + key: 'state', + render: () => ( + + + Finished + + ), + }, + { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' }, + { + title: 'Action', + dataIndex: 'operation', + key: 'operation', + render: () => ( + + Pause + Stop + + + More + + + + ), + }, + ]; + + const dataExpand = []; + for (let i = 0; i < 3; ++i) { + data.push({ + key: i, + date: '2014-12-24 23:12:00', + name: 'This is production name', + upgradeNum: 'Upgraded: 56', + }); + } + return ; +}; + +const columnsNest = [ + { title: 'Name', dataIndex: 'name', key: 'name' }, + { title: 'Platform', dataIndex: 'platform', key: 'platform' }, + { title: 'Version', dataIndex: 'version', key: 'version' }, + { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, + { title: 'Creator', dataIndex: 'creator', key: 'creator' }, + { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, + { title: 'Action', key: 'operation', render: () => Publish }, +]; + +const dataNest = []; +for (let i = 0; i < 3; ++i) { + dataNest.push({ + key: i, + name: 'Screem', + platform: 'iOS', + version: '10.3.4.5654', + upgradeNum: 500, + creator: 'Jack', + createdAt: '2014-12-24 23:12:00', + }); +} + +const columnsFixed = [ + { + title: 'Full Name', + width: 100, + dataIndex: 'name', + key: 'name', + fixed: 'left', + }, + { + title: 'Age', + width: 100, + dataIndex: 'age', + key: 'age', + fixed: 'left', + }, + { title: 'Column 1', dataIndex: 'address', key: '1' }, + { title: 'Column 2', dataIndex: 'address', key: '2' }, + { title: 'Column 3', dataIndex: 'address', key: '3' }, + { title: 'Column 4', dataIndex: 'address', key: '4' }, + { title: 'Column 5', dataIndex: 'address', key: '5' }, + { title: 'Column 6', dataIndex: 'address', key: '6' }, + { title: 'Column 7', dataIndex: 'address', key: '7' }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, + { + title: 'Action', + key: 'operation', + fixed: 'right', + width: 100, + render: () => action, + }, +]; + +const dataFixed = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York Park', + }, + { + key: '2', + name: 'Jim Green', + age: 40, + address: 'London Park', + }, +]; + +const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => ( + + {({ + direction, + filteredItems, + onItemSelectAll, + onItemSelect, + selectedKeys: listSelectedKeys, + disabled: listDisabled, + }) => { + const columns = direction === 'left' ? leftColumns : rightColumns; + + const rowSelection = { + getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }), + onSelectAll(selected, selectedRows) { + const treeSelectedKeys = selectedRows + .filter(item => !item.disabled) + .map(({ key }) => key); + const diffKeys = selected + ? difference(treeSelectedKeys, listSelectedKeys) + : difference(listSelectedKeys, treeSelectedKeys); + onItemSelectAll(diffKeys, selected); + }, + onSelect({ key }, selected) { + onItemSelect(key, selected); + }, + selectedRowKeys: listSelectedKeys, + }; + + return ( +
({ + onClick: () => { + if (itemDisabled || listDisabled) return; + onItemSelect(key, !listSelectedKeys.includes(key)); + }, + })} + /> + ); + }} + +); + +class App extends React.Component { + state = { + visible: false, + targetKeys: oriTargetKeys, + selectedKeys: [], + disabled: false, + showSearch: false, + }; + + handleDisable = (disabled) => { + this.setState({ + disabled, + }) + } + + handleTableTransferChange = nextTargetKeys => { + this.setState({ targetKeys: nextTargetKeys }); + } + + triggerDisable = disabled => { + this.setState({ disabled }); + }; + + triggerShowSearch = showSearch => { + this.setState({ showSearch }); + }; + + handleTransferChange = (nextTargetKeys) => { + this.setState({ targetKeys: nextTargetKeys }); + }; + + handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => { + this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] }); + }; + + showModal = () => { + this.setState({ + visible: true, + }); + }; + + handleOk = e => { + console.log(e); + this.setState({ + visible: false, + }); + }; + + handleCancel = e => { + console.log(e); + this.setState({ + visible: false, + }); + }; + + render() { + const { disabled, selectedKeys, targetKeys, showSearch } = this.state; + const columns = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + filters: [ + { text: 'Joe', value: 'Joe' }, + { text: 'Jim', value: 'Jim' }, + ], + filteredValue: null, + onFilter: (value, record) => record.name.includes(value), + sorter: (a, b) => a.name.length - b.name.length, + sortOrder: true, + ellipsis: true, + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + sorter: false, + sortOrder: true, + ellipsis: true, + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + filters: [ + { text: 'London', value: 'London' }, + { text: 'New York', value: 'New York' }, + ], + filteredValue: null, + onFilter: (value, record) => record.address.includes(value), + sorter: false, + sortOrder: true, + ellipsis: true, + }, + ]; + return ( +
+ + + + + Content + + Content + + Content + Content + Content + Content + Content + + + + + +

{text}

+ + + + +

{text}

+ + +

{text}

+ + + item.title} + disabled={disabled} + /> + + item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1 + } + leftColumns={[ + { + dataIndex: 'title', + title: 'Name', + }, + { + dataIndex: 'description', + title: 'Description', + }, + ]} + rightColumns={[ + { + dataIndex: 'title', + title: 'Name', + }, + ]} + /> + + + + + + + + + + + + + + Content of Tab Pane 1 + + + Content of Tab Pane 2 + + + Content of Tab Pane 3 + + + + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + } color="red"> + Technical testing 2015-09-01 + + Network problems being solved 2015-09-01 + + + } + defaultExpandedKeys={['0-0-0']} + > + + + + + + + + + + + + + + + +
'Footer'} /> +
{ + let totalBorrow = 0; + let totalRepayment = 0; + + pageData.forEach(({ borrow, repayment }) => { + totalBorrow += borrow; + totalRepayment += repayment; + }); + + return ( + <> + + + + + + + + + + + ); + }} + /> +
+
Total + {totalBorrow} + + {totalRepayment} +
Balance + {totalBorrow - totalRepayment} +
+
+ } + > + + + + + + + + + + ); + } +} + +ReactDOM.render(, mountNode); +``` + + diff --git a/components/modal/style/customize.less b/components/modal/style/customize.less new file mode 100644 index 0000000000..f8e1abbbff --- /dev/null +++ b/components/modal/style/customize.less @@ -0,0 +1,3 @@ +@import './index.less'; + +.popover-customize-bg(@dialog-prefix-cls, @popover-background); diff --git a/components/modal/style/index.less b/components/modal/style/index.less index bc682e742b..c727c4b9d2 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -2,3 +2,4 @@ @import '../../style/mixins/index'; @import './modal'; @import './confirm'; +@import './customize.less'; diff --git a/components/notification/style/customize.less b/components/notification/style/customize.less new file mode 100644 index 0000000000..65a7d2f6be --- /dev/null +++ b/components/notification/style/customize.less @@ -0,0 +1,3 @@ +@import './index.less'; + +.popover-customize-bg(@notification-prefix-cls, @popover-background); diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 06c9cc3556..037a7b85c7 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -1,5 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; +@import './customize.less'; @notification-prefix-cls: ~'@{ant-prefix}-notification'; @notification-width: 384px; diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 56c7f43461..153939386f 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -297,7 +297,7 @@ margin-right: 8px; padding: 0 6px; text-align: center; - background-color: @component-background; + background-color: @pagination-item-input-bg; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; outline: none; diff --git a/components/popover/style/customize.less b/components/popover/style/customize.less new file mode 100644 index 0000000000..a62efbd9ca --- /dev/null +++ b/components/popover/style/customize.less @@ -0,0 +1,3 @@ +@import './index.less'; + +.popover-customize-bg(@popover-prefix-cls, @popover-background); diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 8a692876a9..69e2da167b 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -18,7 +18,6 @@ @error-title-color: @error-color; @error-description-color: @error-color; @error-tail-color: @wait-tail-color; -@steps-background: @component-background; @steps-nav-active-color: @primary-color; @steps-icon-size: 32px; diff --git a/components/style/mixins/customize.less b/components/style/mixins/customize.less new file mode 100644 index 0000000000..f3a91e8743 --- /dev/null +++ b/components/style/mixins/customize.less @@ -0,0 +1,170 @@ +// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...) +// for dark theme +.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) { + @picker-prefix-cls: ~'@{prefix}-picker'; + @slider-prefix-cls: ~'@{prefix}-slider'; + @anchor-prefix-cls: ~'@{prefix}-anchor'; + @collapse-prefix-cls: ~'@{prefix}-collapse'; + @tab-prefix-cls: ~'@{prefix}-tabs'; + @timeline-prefix-cls: ~'@{prefix}-timeline'; + @tree-prefix-cls: ~'@{prefix}-tree'; + @card-prefix-cls: ~'@{prefix}-card'; + @badge-prefix-cls: ~'@{prefix}-badge'; + @transfer-prefix-cls: ~'@{prefix}-transfer'; + @calendar-prefix-cls: ~'@{prefix}-picker-calendar'; + @calendar-picker-prefix-cls: ~'@{prefix}-picker'; + @table-prefix-cls: ~'@{prefix}-table'; + + @popover-border: @border-width-base @border-style-base @popover-customize-border-color; + + .@{containerClass} { + .@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} { + background-color: @background; + } + + .@{transfer-prefix-cls} { + &-list { + &-header { + background: @background; + border-bottom: @popover-border; + } + &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover { + background-color: @item-hover-bg; + } + } + } + + tr.@{table-prefix-cls}-expanded-row { + &, + &:hover { + > td { + background: #272727; + } + } + } + .@{table-prefix-cls}.@{table-prefix-cls}-small { + thead { + > tr { + > th { + background-color: @background; + border-bottom: @popover-border; + } + } + } + } + .@{table-prefix-cls} { + background-color: @background; + .@{table-prefix-cls}-row-expand-icon { + border: @popover-border; + } + tfoot { + > tr { + > th, + > td { + border-bottom: @popover-border; + } + } + } + thead { + > tr { + > th { + background-color: #272727; + border-bottom: @popover-border; + } + } + } + tbody { + > tr { + > td { + border-bottom: @popover-border; + &.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right { + background-color: @background; + } + } + &.@{table-prefix-cls}-row:hover { + > td { + background: @table-header-sort-active-bg; + } + } + } + } + &.@{table-prefix-cls}-bordered { + .@{table-prefix-cls}-title { + border: @popover-border; + } + + // ============================= Cell ============================= + thead > tr > th, + tbody > tr > td, + tfoot > tr > th, + tfoot > tr > td { + border-right: @popover-border; + } + + // Fixed right should provides additional border + .@{table-prefix-cls}-cell-fix-right-first::after { + border-right: @popover-border; + } + + // ============================ Header ============================ + table > { + thead { + > tr:not(:last-child) > th { + border-bottom: @border-width-base @border-style-base @border-color-split; + } + } + } + + // =========================== Content ============================ + .@{table-prefix-cls}-container { + border: @popover-border; + } + + // ========================== Expandable ========================== + .@{table-prefix-cls}-expanded-row-fixed { + &::after { + border-right: @popover-border; + } + } + + .@{table-prefix-cls}-footer { + border: @popover-border; + } + } + .@{table-prefix-cls}-filter-trigger-container-open { + background-color: #525252; + } + } + + .@{calendar-prefix-cls}-full { + background-color: @background; + .@{calendar-picker-prefix-cls}-panel { + background-color: @background; + .@{calendar-prefix-cls}-date { + border-top: 2px solid @popover-customize-border-color; + } + } + } + + .@{tab-prefix-cls} { + &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active { + background-color: @background; + border-bottom: @border-width-base solid @background; + } + } + + .@{badge-prefix-cls} { + &-count { + box-shadow: 0 0 0 1px @background; + } + } + + .@{tree-prefix-cls} { + &-show-line { + .@{tree-prefix-cls}-switcher { + background: @background; + } + } + } + } +} diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less index 16f9211f51..30bc60a5e7 100644 --- a/components/style/mixins/index.less +++ b/components/style/mixins/index.less @@ -8,3 +8,4 @@ @import 'reset'; @import 'operation-unit'; @import 'typography'; +@import 'customize'; diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less index 372b62341f..c64b3a7bff 100644 --- a/components/style/themes/dark.less +++ b/components/style/themes/dark.less @@ -8,10 +8,10 @@ @blue-4: mix(@blue-base, @component-background, 45%); @blue-5: mix(@blue-base, @component-background, 65%); @blue-6: mix(@blue-base, @component-background, 85%); -@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 85%); +@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%); @blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%); -@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 95%); -@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 95%); +@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%); +@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%); @purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%); @purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%); @@ -19,10 +19,10 @@ @purple-4: mix(@purple-base, @component-background, 45%); @purple-5: mix(@purple-base, @component-background, 65%); @purple-6: mix(@purple-base, @component-background, 85%); -@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 85%); +@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%); @purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%); -@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 95%); -@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 95%); +@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%); +@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%); @cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%); @cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%); @@ -30,10 +30,10 @@ @cyan-4: mix(@cyan-base, @component-background, 45%); @cyan-5: mix(@cyan-base, @component-background, 65%); @cyan-6: mix(@cyan-base, @component-background, 85%); -@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 85%); +@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%); @cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%); -@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 95%); -@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 95%); +@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%); +@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%); @green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%); @green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%); @@ -41,10 +41,10 @@ @green-4: mix(@green-base, @component-background, 45%); @green-5: mix(@green-base, @component-background, 65%); @green-6: mix(@green-base, @component-background, 85%); -@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 85%); +@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%); @green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%); -@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 95%); -@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 95%); +@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%); +@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%); @magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%); @magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%); @@ -52,10 +52,10 @@ @magenta-4: mix(@magenta-base, @component-background, 45%); @magenta-5: mix(@magenta-base, @component-background, 65%); @magenta-6: mix(@magenta-base, @component-background, 85%); -@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 85%); +@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%); @magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%); -@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 95%); -@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 95%); +@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%); +@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%); @pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%); @pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%); @@ -63,10 +63,10 @@ @pink-4: mix(@pink-base, @component-background, 45%); @pink-5: mix(@pink-base, @component-background, 65%); @pink-6: mix(@pink-base, @component-background, 85%); -@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 85%); +@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%); @pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%); -@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 95%); -@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 95%); +@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%); +@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%); @red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%); @red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%); @@ -74,10 +74,10 @@ @red-4: mix(@red-base, @component-background, 45%); @red-5: mix(@red-base, @component-background, 65%); @red-6: mix(@red-base, @component-background, 85%); -@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 85%); +@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%); @red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%); -@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 95%); -@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 95%); +@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%); +@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%); @orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%); @orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%); @@ -85,10 +85,10 @@ @orange-4: mix(@orange-base, @component-background, 45%); @orange-5: mix(@orange-base, @component-background, 65%); @orange-6: mix(@orange-base, @component-background, 85%); -@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 85%); +@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%); @orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%); -@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 95%); -@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 95%); +@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%); +@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%); @yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%); @yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%); @@ -96,10 +96,10 @@ @yellow-4: mix(@yellow-base, @component-background, 45%); @yellow-5: mix(@yellow-base, @component-background, 65%); @yellow-6: mix(@yellow-base, @component-background, 85%); -@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 85%); +@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%); @yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%); -@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 95%); -@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 95%); +@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%); +@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%); @volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%); @volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%); @@ -107,10 +107,10 @@ @volcano-4: mix(@volcano-base, @component-background, 45%); @volcano-5: mix(@volcano-base, @component-background, 65%); @volcano-6: mix(@volcano-base, @component-background, 85%); -@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 85%); +@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%); @volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%); -@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 95%); -@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 95%); +@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%); +@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%); @geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%); @geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%); @@ -118,10 +118,10 @@ @geekblue-4: mix(@geekblue-base, @component-background, 45%); @geekblue-5: mix(@geekblue-base, @component-background, 65%); @geekblue-6: mix(@geekblue-base, @component-background, 85%); -@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 85%); +@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%); @geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%); -@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 95%); -@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 95%); +@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%); +@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%); @lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%); @lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%); @@ -129,10 +129,10 @@ @lime-4: mix(@lime-base, @component-background, 45%); @lime-5: mix(@lime-base, @component-background, 65%); @lime-6: mix(@lime-base, @component-background, 85%); -@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 85%); +@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%); @lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%); -@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 95%); -@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 95%); +@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%); +@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%); @gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%); @gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%); @@ -140,10 +140,10 @@ @gold-4: mix(@gold-base, @component-background, 45%); @gold-5: mix(@gold-base, @component-background, 65%); @gold-6: mix(@gold-base, @component-background, 85%); -@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 85%); +@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%); @gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%); -@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 95%); -@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 95%); +@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%); +@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%); // Color used by default to control hover and active backgrounds and for // alert info backgrounds. @@ -153,13 +153,14 @@ @primary-4: mix(@primary-color, @component-background, 45%); @primary-5: mix(@primary-color, @component-background, 65%); @primary-6: @primary-color; -@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 85%); +@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%); @primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%); -@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 95%); -@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 95%); +@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%); +@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%); // Layer background @popover-background: #1f1f1f; +@popover-customize-border-color: #3a3a3a; @body-background: @black; @component-background: #141414; @@ -190,6 +191,10 @@ // --- @tree-bg: transparent; +// List +// --- +@list-customize-card-bg: transparent; + // Shadow // --- @shadow-color: rgba(0, 0, 0, 0.45); @@ -305,6 +310,7 @@ @table-filter-btns-bg: @popover-background; @table-expanded-row-bg: @table-header-bg; @table-filter-dropdown-bg: @popover-background; +@table-expand-icon-bg: transparent; // TimePicker // --- @@ -322,6 +328,7 @@ // Steps // --- @steps-nav-arrow-color: fade(@white, 20%); +@steps-background: transparent; // Avatar // --- @@ -361,7 +368,7 @@ // Comment // --- -@comment-bg: @component-background; +@comment-bg: transparent; @comment-author-time-color: fade(@white, 30%); @comment-action-hover-color: fade(@white, 65%); @@ -380,6 +387,7 @@ @pagination-item-link-bg: transparent; @pagination-item-disabled-bg-active: fade(@white, 25%); @pagination-item-disabled-color-active: @black; +@pagination-item-input-bg: @pagination-item-bg; // PageHeader // --- diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 1cc3558145..2b9f834095 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -45,6 +45,7 @@ @component-background: #fff; // Popover background color @popover-background: @component-background; +@popover-customize-border-color: @border-color-split; @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -519,6 +520,7 @@ @table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%); @table-filter-btns-bg: inherit; @table-filter-dropdown-bg: @component-background; +@table-expand-icon-bg: @component-background; // Tag // -- @@ -657,6 +659,7 @@ @pagination-item-link-bg: @component-background; @pagination-item-disabled-color-active: @white; @pagination-item-disabled-bg-active: darken(@disabled-bg, 10%); +@pagination-item-input-bg: @component-background; // PageHeader // --- @@ -763,6 +766,7 @@ @list-item-meta-margin-bottom: @padding-md; @list-item-meta-avatar-margin-right: @padding-md; @list-item-meta-title-margin-bottom: @padding-sm; +@list-customize-card-bg: @component-background; // Statistic // --- @@ -802,6 +806,7 @@ // --- @process-tail-color: @border-color-split; @steps-nav-arrow-color: fade(@black, 25%); +@steps-background: @component-background; // Notification // --- diff --git a/components/table/style/index.less b/components/table/style/index.less index 93d1fd5f9c..9b22c94dc4 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -423,7 +423,7 @@ color: inherit; line-height: @font-size-sm; vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2); - background: @component-background; + background: @table-expand-icon-bg; border: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base; outline: none; diff --git a/package.json b/package.json index b03730d9a1..d72eb2056d 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,7 @@ }, "devDependencies": { "@ant-design/bisheng-plugin": "^2.3.0", - "@ant-design/colors": "^4.0.0-alpha.0", + "@ant-design/colors": "^4.0.0-alpha.1", "@ant-design/hitu": "^0.0.0-alpha.13", "@ant-design/tools": "^8.0.4", "@packtracker/webpack-plugin": "^2.0.1", diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 6dc3896e69..cef424c12f 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -169,6 +169,9 @@ a { .drawer-content { padding: 40px 0; + &-wrapper { + background-color: @component-background; + } } .drawer {