diff --git a/.dumi/hooks/useLocale.tsx b/.dumi/hooks/useLocale.tsx new file mode 100644 index 0000000000..6ca4dd51c7 --- /dev/null +++ b/.dumi/hooks/useLocale.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { useLocale as useDumiLocale } from 'dumi'; + +export interface LocaleMap { + cn: Record; + en: Record; +} + +export default function useLocale( + localeMap?: LocaleMap, +): [Record, 'cn' | 'en'] { + const { id } = useDumiLocale(); + const localeType = id === 'zh-CN' ? 'cn' : ('en' as const); + return [localeMap?.[localeType]!, localeType]; +} diff --git a/.dumi/hooks/useLocation.ts b/.dumi/hooks/useLocation.ts new file mode 100644 index 0000000000..3499a3bbe2 --- /dev/null +++ b/.dumi/hooks/useLocation.ts @@ -0,0 +1,47 @@ +import { useLocation as useDumiLocation } from 'dumi'; +import * as React from 'react'; +import useLocale from './useLocale'; + +function clearPath(path: string) { + return path.replace('-cn', '').replace(/\/$/, ''); +} + +export default function useLocation() { + const location = useDumiLocation(); + const { search } = location; + const [, localeType] = useLocale(); + + const getLink = React.useCallback( + (path: string, hash?: string | { cn: string; en: string }) => { + let pathname = clearPath(path); + + if (localeType === 'cn') { + pathname = `${pathname}-cn`; + } + + if (search) { + pathname = `${pathname}${search}`; + } + + if (hash) { + let hashStr: string; + if (typeof hash === 'object') { + hashStr = hash[localeType]; + } else { + hashStr = hash; + } + + pathname = `${pathname}#${hashStr}`; + } + + return pathname; + }, + [localeType, search], + ); + + return { + ...location, + pathname: clearPath(location.pathname), + getLink, + }; +} diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx new file mode 100644 index 0000000000..a537adac3b --- /dev/null +++ b/.dumi/hooks/useMenu.tsx @@ -0,0 +1,138 @@ +import React, { ReactNode, useMemo } from 'react'; +import { MenuProps } from 'antd'; +import { Link, useFullSidebarData, useSidebarData } from 'dumi'; +import useLocation from './useLocation'; + +export type UseMenuOptions = { + before?: ReactNode; + after?: ReactNode; +}; + +const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => { + const fullData = useFullSidebarData(); + const { pathname } = useLocation(); + const sidebarData = useSidebarData(); + const { before, after } = options; + + const menuItems = useMemo(() => { + const sidebarItems = [...(sidebarData ?? [])]; + + // 将设计文档未分类的放在最后 + if (pathname.startsWith('/docs/spec')) { + const notGrouped = sidebarItems.splice(0, 1); + sidebarItems.push(...notGrouped); + } + + // 把 /changelog 拼到开发文档中 + if (pathname.startsWith('/docs/react')) { + const changelogData = Object.entries(fullData).find(([key]) => + key.startsWith('/changelog'), + )?.[1]; + if (changelogData) { + sidebarItems.push(...changelogData); + } + } + if (pathname.startsWith('/changelog')) { + const reactDocData = Object.entries(fullData).find(([key]) => + key.startsWith('/docs/react'), + )?.[1]; + if (reactDocData) { + sidebarItems.unshift(...reactDocData); + } + } + + return ( + sidebarItems?.reduce>((result, group) => { + if (group.title) { + // 设计文档特殊处理二级分组 + if (pathname.startsWith('/docs/spec')) { + const childrenGroup = group.children.reduce< + Record[number]['children']> + >((childrenResult, child) => { + const type = (child.frontmatter as any).type ?? 'default'; + if (!childrenResult[type]) { + childrenResult[type] = []; + } + childrenResult[type].push(child); + return childrenResult; + }, {}); + const childItems = []; + childItems.push( + ...childrenGroup.default.map(item => ({ + label: ( + + {before} + {item.title} + {after} + + ), + key: item.link.replace(/(-cn$)/g, ''), + })), + ); + Object.entries(childrenGroup).forEach(([type, children]) => { + if (type !== 'default') { + childItems.push({ + type: 'group', + label: type, + key: type, + children: children?.map(item => ({ + label: ( + + {before} + {item.title} + {after} + + ), + key: item.link.replace(/(-cn$)/g, ''), + })), + }); + } + }); + result.push({ + label: group.title, + key: group.title, + children: childItems, + }); + } else { + result.push({ + type: 'group', + label: group.title, + key: group.title, + children: group.children?.map(item => ({ + label: ( + + {before} + {item.title} + + {(item.frontmatter as any).subtitle} + + {after} + + ), + key: item.link.replace(/(-cn$)/g, ''), + })), + }); + } + } else { + result.push( + ...group.children?.map(item => ({ + label: ( + + {before} + {item.title} + {after} + + ), + key: item.link.replace(/(-cn$)/g, ''), + })), + ); + } + return result; + }, []) ?? [] + ); + }, [sidebarData, fullData, pathname]); + + return [menuItems, pathname]; +}; + +export default useMenu; diff --git a/.dumi/hooks/useSiteToken.ts b/.dumi/hooks/useSiteToken.ts new file mode 100644 index 0000000000..425114ea96 --- /dev/null +++ b/.dumi/hooks/useSiteToken.ts @@ -0,0 +1,35 @@ +import { theme } from 'antd'; +import { useContext } from 'react'; +import { ConfigContext } from 'antd/es/config-provider'; + +const { useToken } = theme; + +const useSiteToken = () => { + const result = useToken(); + const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); + const rootPrefixCls = getPrefixCls(); + const { token } = result; + const siteMarkdownCodeBg = token.colorFillTertiary; + + return { + ...result, + token: { + ...token, + headerHeight: 64, + menuItemBorder: 2, + mobileMaxWidth: 767.99, + siteMarkdownCodeBg, + antCls: `.${rootPrefixCls}`, + iconCls: `.${iconPrefixCls}`, + /** 56 */ + marginFarXS: (token.marginXXL / 6) * 7, + /** 80 */ + marginFarSM: (token.marginXXL / 3) * 5, + /** 96 */ + marginFar: token.marginXXL * 2, + codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`, + }, + }; +}; + +export default useSiteToken; diff --git a/site/theme/template/NotFound.tsx b/.dumi/pages/404/index.tsx similarity index 71% rename from site/theme/template/NotFound.tsx rename to .dumi/pages/404/index.tsx index 52bbb2438f..4f8d37c526 100644 --- a/site/theme/template/NotFound.tsx +++ b/.dumi/pages/404/index.tsx @@ -1,20 +1,10 @@ import React, { useEffect } from 'react'; -import { Link } from 'bisheng/router'; import { Result, Button } from 'antd'; import { HomeOutlined } from '@ant-design/icons'; -import * as utils from './utils'; +import { Link, useLocation } from 'dumi'; +import * as utils from '../../theme/utils'; export interface NotFoundProps { - location: { - pathname: string; - search: string; - hash: string; - state: any; - action: string; - key: any; - basename: string; - query: Record; - }; router: { push: (pathname: string) => void; replace: (pathname: string) => void; @@ -26,11 +16,8 @@ const DIRECT_MAP: Record = { 'docs/spec/work-with-us': 'docs/resources', }; -export default function NotFound(props: NotFoundProps) { - const { - location: { pathname }, - router, - } = props; +const NotFoundPage: React.FC = ({ router }) => { + const { pathname } = useLocation(); const isZhCN = utils.isZhCN(pathname); @@ -62,11 +49,8 @@ export default function NotFound(props: NotFoundProps) { } /> - diff --git a/components/table/demo/size.tsx b/components/table/demo/size.tsx new file mode 100644 index 0000000000..46b69e8fda --- /dev/null +++ b/components/table/demo/size.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Table } from 'antd'; +import type { ColumnsType } from 'antd/es/table'; + +interface DataType { + key: React.Key; + name: string; + age: number; + address: string; +} + +const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + }, + { + title: 'Age', + dataIndex: 'age', + }, + { + title: 'Address', + dataIndex: 'address', + }, +]; + +const data: DataType[] = [ + { + 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', + }, +]; + +const App: React.FC = () => ( +
+

Middle size table

+ +

Small size table

+
+ +); + +export default App; diff --git a/components/table/demo/sticky.md b/components/table/demo/sticky.md index d3893c0153..3265288c59 100644 --- a/components/table/demo/sticky.md +++ b/components/table/demo/sticky.md @@ -1,10 +1,3 @@ ---- -order: 99 -title: - en-US: Fixed header and scroll bar with the page - zh-CN: 随页面滚动的固定表头和滚动条 ---- - ## zh-CN 对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。 @@ -12,128 +5,3 @@ title: ## en-US For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page. - -```tsx -import { Switch, Table } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; -import React, { useState } from 'react'; - -interface DataType { - key: React.Key; - name: string; - age: number; - address: string; -} - -const columns: ColumnsType = [ - { - 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', - width: 150, - }, - { - title: 'Column 2', - dataIndex: 'address', - key: '2', - width: 150, - }, - { - title: 'Column 3', - dataIndex: 'address', - key: '3', - width: 150, - }, - { - title: 'Column 4', - dataIndex: 'address', - key: '4', - width: 150, - }, - { - title: 'Column 5', - dataIndex: 'address', - key: '5', - width: 150, - }, - { - title: 'Column 6', - dataIndex: 'address', - key: '6', - width: 150, - }, - { - title: 'Column 7', - dataIndex: 'address', - key: '7', - width: 150, - }, - { title: 'Column 8', dataIndex: 'address', key: '8' }, - { - title: 'Action', - key: 'operation', - fixed: 'right', - width: 100, - render: () => action, - }, -]; - -const data: DataType[] = []; -for (let i = 0; i < 100; i++) { - data.push({ - key: i, - name: `Edrward ${i}`, - age: 32, - address: `London Park no. ${i}`, - }); -} - -const App: React.FC = () => { - const [fixedTop, setFixedTop] = useState(false); - - return ( -
( - - - - { - setFixedTop(!fixedTop); - }} - /> - - - Scroll Context - - Fix Right - - - )} - sticky - /> - ); -}; - -export default App; -``` diff --git a/components/table/demo/sticky.tsx b/components/table/demo/sticky.tsx new file mode 100644 index 0000000000..61665550ca --- /dev/null +++ b/components/table/demo/sticky.tsx @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; +import { Switch, Table } from 'antd'; +import type { ColumnsType } from 'antd/es/table'; + +interface DataType { + key: React.Key; + name: string; + age: number; + address: string; +} + +const columns: ColumnsType = [ + { + 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', + width: 150, + }, + { + title: 'Column 2', + dataIndex: 'address', + key: '2', + width: 150, + }, + { + title: 'Column 3', + dataIndex: 'address', + key: '3', + width: 150, + }, + { + title: 'Column 4', + dataIndex: 'address', + key: '4', + width: 150, + }, + { + title: 'Column 5', + dataIndex: 'address', + key: '5', + width: 150, + }, + { + title: 'Column 6', + dataIndex: 'address', + key: '6', + width: 150, + }, + { + title: 'Column 7', + dataIndex: 'address', + key: '7', + width: 150, + }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, + { + title: 'Action', + key: 'operation', + fixed: 'right', + width: 100, + render: () => action, + }, +]; + +const data: DataType[] = []; +for (let i = 0; i < 100; i++) { + data.push({ + key: i, + name: `Edrward ${i}`, + age: 32, + address: `London Park no. ${i}`, + }); +} + +const App: React.FC = () => { + const [fixedTop, setFixedTop] = useState(false); + + return ( +
( + + + + { + setFixedTop(!fixedTop); + }} + /> + + + Scroll Context + + Fix Right + + + )} + sticky + /> + ); +}; + +export default App; diff --git a/components/table/demo/summary.md b/components/table/demo/summary.md index e8d4caa0a8..d1c65d2204 100644 --- a/components/table/demo/summary.md +++ b/components/table/demo/summary.md @@ -1,10 +1,3 @@ ---- -order: 29 -title: - en-US: Summary - zh-CN: 总结栏 ---- - ## zh-CN 通过 `summary` 设置总结栏。使用 `Table.Summary.Cell` 同步 Column 的固定状态。你可以通过配置 `Table.Summary` 的 `fixed` 属性使其固定(`4.16.0` 支持)。 @@ -13,151 +6,6 @@ title: Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`. You can fixed it by set `Table.Summary` `fixed` prop(since `4.16.0`). -```tsx -import { Table, Typography } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; -import React from 'react'; - -const { Text } = Typography; - -interface DataType { - key: string; - name: string; - borrow: number; - repayment: number; -} - -interface FixedDataType { - key: React.Key; - name: string; - description: string; -} - -const columns: ColumnsType = [ - { - title: 'Name', - dataIndex: 'name', - }, - { - title: 'Borrow', - dataIndex: 'borrow', - }, - { - title: 'Repayment', - dataIndex: 'repayment', - }, -]; - -const data: DataType[] = [ - { - 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 fixedColumns: ColumnsType = [ - { - title: 'Name', - dataIndex: 'name', - fixed: true, - width: 100, - }, - { - title: 'Description', - dataIndex: 'description', - }, -]; - -const fixedData: FixedDataType[] = []; -for (let i = 0; i < 20; i += 1) { - fixedData.push({ - key: i, - name: ['Light', 'Bamboo', 'Little'][i % 3], - description: 'Everything that has a beginning, has an end.', - }); -} - -const App: React.FC = () => ( - <> -
{ - let totalBorrow = 0; - let totalRepayment = 0; - - pageData.forEach(({ borrow, repayment }) => { - totalBorrow += borrow; - totalRepayment += repayment; - }); - - return ( - <> - - Total - - {totalBorrow} - - - {totalRepayment} - - - - Balance - - {totalBorrow - totalRepayment} - - - - ); - }} - /> - -
- -
( - - - Summary - This is a summary content - - - )} - /> - -); - -export default App; -``` - - - - - - - - -
{{ content | safe }}
- {% for jsFile in manifest["js"] %} - - {% endfor %} - - - - - - - - - diff --git a/site/theme/static/theme.less b/site/theme/static/theme.less deleted file mode 100644 index 771b27c3d7..0000000000 --- a/site/theme/static/theme.less +++ /dev/null @@ -1,9 +0,0 @@ -@import './colors.less'; -@import './home.less'; - -@site-heading-color: @heading-color; -@site-text-color: @heading-color; -@site-text-color-secondary: @text-color-secondary; -@site-border-color-split: @border-color-split; -@site-header-box-shadow: 0 2px 8px rgba(240, 241, 242, 65); -@site-markdown-code-bg: #f2f4f5; diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less deleted file mode 100644 index 4a35de67fb..0000000000 --- a/site/theme/static/toc.less +++ /dev/null @@ -1,103 +0,0 @@ -.toc { - margin: 16px 0; - padding-left: 0; - font-size: 12px; - list-style: none; - border-left: 1px solid @site-border-color-split; - - .ant-row-rtl & { - border-right: 1px solid @site-border-color-split; - border-left: none; - } -} - -ul.toc > li { - margin-left: 0; - padding-left: 0; - line-height: 1.5; - list-style: none; - - &:not(:last-child) { - margin-bottom: 4px; - } - - .ant-row-rtl & { - margin-right: 0; - padding-right: 0; - } - - &.toc-debug a { - color: @purple-6 !important; - } -} - -.toc li > ul { - display: none; - font-size: 12px; - text-indent: 8px; -} - -.toc a { - display: block; - width: 110px; - margin-left: -1px; - padding-left: 16px; - overflow: hidden; - color: @site-text-color !important; - white-space: nowrap; - text-overflow: ellipsis; - border-left: 1px solid transparent; - transition: all 0.3s ease; - - .ant-row-rtl & { - margin-right: -1px; - margin-left: 0; - padding-right: 16px; - padding-left: 0; - border-right: 1px solid transparent; - border-left: none; - } -} - -.toc a:hover { - color: @primary-color !important; -} - -.toc a.current { - color: @primary-color !important; - border-color: @primary-color; -} - -.toc-affix { - position: absolute; - top: 8px; - right: 20px; - - .ant-affix { - z-index: 9; - max-height: ~'calc(100vh - 16px)'; - overflow-x: hidden; - overflow-y: auto; - background: #fff; - } - - .ant-row-rtl & { - right: auto; - left: 20px; - } -} - -.toc-affix-bottom { - position: absolute; - right: 20px; - bottom: 88px; - - .ant-affix { - background: @body-background; - } - - .ant-row-rtl & { - right: auto; - left: 20px; - } -} diff --git a/site/theme/style/color/bezierEasing.less b/site/theme/style/color/bezierEasing.less deleted file mode 100644 index f53ffb3680..0000000000 --- a/site/theme/style/color/bezierEasing.less +++ /dev/null @@ -1,110 +0,0 @@ -/* stylelint-disable */ -.bezierEasingMixin() { -@functions: ~`(function() { - var NEWTON_ITERATIONS = 4; - var NEWTON_MIN_SLOPE = 0.001; - var SUBDIVISION_PRECISION = 0.0000001; - var SUBDIVISION_MAX_ITERATIONS = 10; - - var kSplineTableSize = 11; - var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); - - var float32ArraySupported = typeof Float32Array === 'function'; - - function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } - function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } - function C (aA1) { return 3.0 * aA1; } - - // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. - function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } - - // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. - function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } - - function binarySubdivide (aX, aA, aB, mX1, mX2) { - var currentX, currentT, i = 0; - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { - aB = currentT; - } else { - aA = currentT; - } - } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); - return currentT; - } - - function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { - for (var i = 0; i < NEWTON_ITERATIONS; ++i) { - var currentSlope = getSlope(aGuessT, mX1, mX2); - if (currentSlope === 0.0) { - return aGuessT; - } - var currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - return aGuessT; - } - - var BezierEasing = function (mX1, mY1, mX2, mY2) { - if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { - throw new Error('bezier x values must be in [0, 1] range'); - } - - // Precompute samples table - var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); - if (mX1 !== mY1 || mX2 !== mY2) { - for (var i = 0; i < kSplineTableSize; ++i) { - sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function getTForX (aX) { - var intervalStart = 0.0; - var currentSample = 1; - var lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - --currentSample; - - // Interpolate to provide an initial guess for t - var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); - var guessForT = intervalStart + dist * kSampleStepSize; - - var initialSlope = getSlope(guessForT, mX1, mX2); - if (initialSlope >= NEWTON_MIN_SLOPE) { - return newtonRaphsonIterate(aX, guessForT, mX1, mX2); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); - } - } - - return function BezierEasing (x) { - if (mX1 === mY1 && mX2 === mY2) { - return x; // linear - } - // Because JavaScript number are imprecise, we should guarantee the extremes are right. - if (x === 0) { - return 0; - } - if (x === 1) { - return 1; - } - return calcBezier(getTForX(x), mY1, mY2); - }; - }; - - this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); - // less 3 requires a return - return ''; -})()`; -} -// It is hacky way to make this function will be compiled preferentially by less -// resolve error: `ReferenceError: colorPalette is not defined` -// https://github.com/ant-design/ant-motion/issues/44 -.bezierEasingMixin(); diff --git a/site/theme/style/color/colorPalette.less b/site/theme/style/color/colorPalette.less deleted file mode 100644 index 9e2e129431..0000000000 --- a/site/theme/style/color/colorPalette.less +++ /dev/null @@ -1,85 +0,0 @@ -/* stylelint-disable */ -@import "bezierEasing"; -@import "tinyColor"; - -// We create a very complex algorithm which take the place of original tint/shade color system -// to make sure no one can understand it 👻 -// and create an entire color palette magicly by inputing just a single primary color. -// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin -.colorPaletteMixin() { -@functions: ~`(function() { - var hueStep = 2; - var saturationStep = 0.16; - var saturationStep2 = 0.05; - var brightnessStep1 = 0.05; - var brightnessStep2 = 0.15; - var lightColorCount = 5; - var darkColorCount = 4; - - var getHue = function(hsv, i, isLight) { - var hue; - if (hsv.h >= 60 && hsv.h <= 240) { - hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; - } else { - hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; - } - if (hue < 0) { - hue += 360; - } else if (hue >= 360) { - hue -= 360; - } - return Math.round(hue); - }; - var getSaturation = function(hsv, i, isLight) { - // grey color don't change saturation - if (hsv.h === 0 && hsv.s === 0) { - return hsv.s; - } - var saturation; - if (isLight) { - saturation = hsv.s - saturationStep * i; - } else if (i === darkColorCount) { - saturation = hsv.s + saturationStep; - } else { - saturation = hsv.s + saturationStep2 * i; - } - if (saturation > 1) { - saturation = 1; - } - if (isLight && i === lightColorCount && saturation > 0.1) { - saturation = 0.1; - } - if (saturation < 0.06) { - saturation = 0.06; - } - return Number(saturation.toFixed(2)); - }; - var getValue = function(hsv, i, isLight) { - var value; - if (isLight) { - value = hsv.v + brightnessStep1 * i; - }else{ - value = hsv.v - brightnessStep2 * i - } - if (value > 1) { - value = 1; - } - return Number(value.toFixed(2)) - }; - - this.colorPalette = function(color, index) { - var isLight = index <= 6; - var hsv = tinycolor(color).toHsv(); - var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; - return tinycolor({ - h: getHue(hsv, i, isLight), - s: getSaturation(hsv, i, isLight), - v: getValue(hsv, i, isLight), - }).toHexString(); - }; -})()`; -} -// It is hacky way to make this function will be compiled preferentially by less -// resolve error: `ReferenceError: colorPalette is not defined` -// https://github.com/ant-design/ant-motion/issues/44 -.colorPaletteMixin(); diff --git a/site/theme/style/color/colors.less b/site/theme/style/color/colors.less deleted file mode 100644 index 51540bf459..0000000000 --- a/site/theme/style/color/colors.less +++ /dev/null @@ -1,162 +0,0 @@ -@import 'colorPalette'; - -// color palettes -@blue-base: #1890ff; -@blue-1: color(~`colorPalette('@{blue-6}', 1) `); -@blue-2: color(~`colorPalette('@{blue-6}', 2) `); -@blue-3: color(~`colorPalette('@{blue-6}', 3) `); -@blue-4: color(~`colorPalette('@{blue-6}', 4) `); -@blue-5: color(~`colorPalette('@{blue-6}', 5) `); -@blue-6: @blue-base; -@blue-7: color(~`colorPalette('@{blue-6}', 7) `); -@blue-8: color(~`colorPalette('@{blue-6}', 8) `); -@blue-9: color(~`colorPalette('@{blue-6}', 9) `); -@blue-10: color(~`colorPalette('@{blue-6}', 10) `); - -@purple-base: #722ed1; -@purple-1: color(~`colorPalette('@{purple-6}', 1) `); -@purple-2: color(~`colorPalette('@{purple-6}', 2) `); -@purple-3: color(~`colorPalette('@{purple-6}', 3) `); -@purple-4: color(~`colorPalette('@{purple-6}', 4) `); -@purple-5: color(~`colorPalette('@{purple-6}', 5) `); -@purple-6: @purple-base; -@purple-7: color(~`colorPalette('@{purple-6}', 7) `); -@purple-8: color(~`colorPalette('@{purple-6}', 8) `); -@purple-9: color(~`colorPalette('@{purple-6}', 9) `); -@purple-10: color(~`colorPalette('@{purple-6}', 10) `); - -@cyan-base: #13c2c2; -@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); -@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); -@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); -@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); -@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); -@cyan-6: @cyan-base; -@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); -@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); -@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); -@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); - -@green-base: #52c41a; -@green-1: color(~`colorPalette('@{green-6}', 1) `); -@green-2: color(~`colorPalette('@{green-6}', 2) `); -@green-3: color(~`colorPalette('@{green-6}', 3) `); -@green-4: color(~`colorPalette('@{green-6}', 4) `); -@green-5: color(~`colorPalette('@{green-6}', 5) `); -@green-6: @green-base; -@green-7: color(~`colorPalette('@{green-6}', 7) `); -@green-8: color(~`colorPalette('@{green-6}', 8) `); -@green-9: color(~`colorPalette('@{green-6}', 9) `); -@green-10: color(~`colorPalette('@{green-6}', 10) `); - -@magenta-base: #eb2f96; -@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); -@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); -@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); -@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); -@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); -@magenta-6: @magenta-base; -@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); -@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); -@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); -@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); - -// alias of magenta -@pink-base: #eb2f96; -@pink-1: color(~`colorPalette('@{pink-6}', 1) `); -@pink-2: color(~`colorPalette('@{pink-6}', 2) `); -@pink-3: color(~`colorPalette('@{pink-6}', 3) `); -@pink-4: color(~`colorPalette('@{pink-6}', 4) `); -@pink-5: color(~`colorPalette('@{pink-6}', 5) `); -@pink-6: @pink-base; -@pink-7: color(~`colorPalette('@{pink-6}', 7) `); -@pink-8: color(~`colorPalette('@{pink-6}', 8) `); -@pink-9: color(~`colorPalette('@{pink-6}', 9) `); -@pink-10: color(~`colorPalette('@{pink-6}', 10) `); - -@red-base: #f5222d; -@red-1: color(~`colorPalette('@{red-6}', 1) `); -@red-2: color(~`colorPalette('@{red-6}', 2) `); -@red-3: color(~`colorPalette('@{red-6}', 3) `); -@red-4: color(~`colorPalette('@{red-6}', 4) `); -@red-5: color(~`colorPalette('@{red-6}', 5) `); -@red-6: @red-base; -@red-7: color(~`colorPalette('@{red-6}', 7) `); -@red-8: color(~`colorPalette('@{red-6}', 8) `); -@red-9: color(~`colorPalette('@{red-6}', 9) `); -@red-10: color(~`colorPalette('@{red-6}', 10) `); - -@orange-base: #fa8c16; -@orange-1: color(~`colorPalette('@{orange-6}', 1) `); -@orange-2: color(~`colorPalette('@{orange-6}', 2) `); -@orange-3: color(~`colorPalette('@{orange-6}', 3) `); -@orange-4: color(~`colorPalette('@{orange-6}', 4) `); -@orange-5: color(~`colorPalette('@{orange-6}', 5) `); -@orange-6: @orange-base; -@orange-7: color(~`colorPalette('@{orange-6}', 7) `); -@orange-8: color(~`colorPalette('@{orange-6}', 8) `); -@orange-9: color(~`colorPalette('@{orange-6}', 9) `); -@orange-10: color(~`colorPalette('@{orange-6}', 10) `); - -@yellow-base: #fadb14; -@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); -@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); -@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); -@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); -@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); -@yellow-6: @yellow-base; -@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); -@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); -@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); -@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); - -@volcano-base: #fa541c; -@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); -@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); -@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); -@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); -@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); -@volcano-6: @volcano-base; -@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); -@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); -@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); -@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); - -@geekblue-base: #2f54eb; -@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); -@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); -@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); -@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); -@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); -@geekblue-6: @geekblue-base; -@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); -@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); -@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); -@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); - -@lime-base: #a0d911; -@lime-1: color(~`colorPalette('@{lime-6}', 1) `); -@lime-2: color(~`colorPalette('@{lime-6}', 2) `); -@lime-3: color(~`colorPalette('@{lime-6}', 3) `); -@lime-4: color(~`colorPalette('@{lime-6}', 4) `); -@lime-5: color(~`colorPalette('@{lime-6}', 5) `); -@lime-6: @lime-base; -@lime-7: color(~`colorPalette('@{lime-6}', 7) `); -@lime-8: color(~`colorPalette('@{lime-6}', 8) `); -@lime-9: color(~`colorPalette('@{lime-6}', 9) `); -@lime-10: color(~`colorPalette('@{lime-6}', 10) `); - -@gold-base: #faad14; -@gold-1: color(~`colorPalette('@{gold-6}', 1) `); -@gold-2: color(~`colorPalette('@{gold-6}', 2) `); -@gold-3: color(~`colorPalette('@{gold-6}', 3) `); -@gold-4: color(~`colorPalette('@{gold-6}', 4) `); -@gold-5: color(~`colorPalette('@{gold-6}', 5) `); -@gold-6: @gold-base; -@gold-7: color(~`colorPalette('@{gold-6}', 7) `); -@gold-8: color(~`colorPalette('@{gold-6}', 8) `); -@gold-9: color(~`colorPalette('@{gold-6}', 9) `); -@gold-10: color(~`colorPalette('@{gold-6}', 10) `); - -@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, - purple; diff --git a/site/theme/style/color/tinyColor.less b/site/theme/style/color/tinyColor.less deleted file mode 100644 index e576c78687..0000000000 --- a/site/theme/style/color/tinyColor.less +++ /dev/null @@ -1,1184 +0,0 @@ -/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ -.tinyColorMixin() { -@functions: ~`(function() { -// TinyColor v1.4.1 -// https://github.com/bgrins/TinyColor -// 2016-07-07, Brian Grinstead, MIT License -var trimLeft = /^\s+/, - trimRight = /\s+$/, - tinyCounter = 0, - mathRound = Math.round, - mathMin = Math.min, - mathMax = Math.max, - mathRandom = Math.random; - -function tinycolor (color, opts) { - - color = (color) ? color : ''; - opts = opts || { }; - - // If input is already a tinycolor, return itself - if (color instanceof tinycolor) { - return color; - } - // If we are called as a function, call using new instead - if (!(this instanceof tinycolor)) { - return new tinycolor(color, opts); - } - - var rgb = inputToRGB(color); - this._originalInput = color, - this._r = rgb.r, - this._g = rgb.g, - this._b = rgb.b, - this._a = rgb.a, - this._roundA = mathRound(100*this._a) / 100, - this._format = opts.format || rgb.format; - this._gradientType = opts.gradientType; - - // Don't let the range of [0,255] come back in [0,1]. - // Potentially lose a little bit of precision here, but will fix issues where - // .5 gets interpreted as half of the total, instead of half of 1 - // If it was supposed to be 128, this was already taken care of by inputToRgb - if (this._r < 1) { this._r = mathRound(this._r); } - if (this._g < 1) { this._g = mathRound(this._g); } - if (this._b < 1) { this._b = mathRound(this._b); } - - this._ok = rgb.ok; - this._tc_id = tinyCounter++; -} - -tinycolor.prototype = { - isDark: function() { - return this.getBrightness() < 128; - }, - isLight: function() { - return !this.isDark(); - }, - isValid: function() { - return this._ok; - }, - getOriginalInput: function() { - return this._originalInput; - }, - getFormat: function() { - return this._format; - }, - getAlpha: function() { - return this._a; - }, - getBrightness: function() { - //http://www.w3.org/TR/AERT#color-contrast - var rgb = this.toRgb(); - return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; - }, - getLuminance: function() { - //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef - var rgb = this.toRgb(); - var RsRGB, GsRGB, BsRGB, R, G, B; - RsRGB = rgb.r/255; - GsRGB = rgb.g/255; - BsRGB = rgb.b/255; - - if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} - if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} - if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} - return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); - }, - setAlpha: function(value) { - this._a = boundAlpha(value); - this._roundA = mathRound(100*this._a) / 100; - return this; - }, - toHsv: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; - }, - toHsvString: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); - return (this._a == 1) ? - "hsv(" + h + ", " + s + "%, " + v + "%)" : - "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; - }, - toHsl: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; - }, - toHslString: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); - return (this._a == 1) ? - "hsl(" + h + ", " + s + "%, " + l + "%)" : - "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; - }, - toHex: function(allow3Char) { - return rgbToHex(this._r, this._g, this._b, allow3Char); - }, - toHexString: function(allow3Char) { - return '#' + this.toHex(allow3Char); - }, - toHex8: function(allow4Char) { - return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); - }, - toHex8String: function(allow4Char) { - return '#' + this.toHex8(allow4Char); - }, - toRgb: function() { - return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; - }, - toRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : - "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; - }, - toPercentageRgb: function() { - return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; - }, - toPercentageRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : - "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; - }, - toName: function() { - if (this._a === 0) { - return "transparent"; - } - - if (this._a < 1) { - return false; - } - - return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; - }, - toFilter: function(secondColor) { - var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); - var secondHex8String = hex8String; - var gradientType = this._gradientType ? "GradientType = 1, " : ""; - - if (secondColor) { - var s = tinycolor(secondColor); - secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); - } - - return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; - }, - toString: function(format) { - var formatSet = !!format; - format = format || this._format; - - var formattedString = false; - var hasAlpha = this._a < 1 && this._a >= 0; - var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); - - if (needsAlphaFormat) { - // Special case for "transparent", all other non-alpha formats - // will return rgba when there is transparency. - if (format === "name" && this._a === 0) { - return this.toName(); - } - return this.toRgbString(); - } - if (format === "rgb") { - formattedString = this.toRgbString(); - } - if (format === "prgb") { - formattedString = this.toPercentageRgbString(); - } - if (format === "hex" || format === "hex6") { - formattedString = this.toHexString(); - } - if (format === "hex3") { - formattedString = this.toHexString(true); - } - if (format === "hex4") { - formattedString = this.toHex8String(true); - } - if (format === "hex8") { - formattedString = this.toHex8String(); - } - if (format === "name") { - formattedString = this.toName(); - } - if (format === "hsl") { - formattedString = this.toHslString(); - } - if (format === "hsv") { - formattedString = this.toHsvString(); - } - - return formattedString || this.toHexString(); - }, - clone: function() { - return tinycolor(this.toString()); - }, - - _applyModification: function(fn, args) { - var color = fn.apply(null, [this].concat([].slice.call(args))); - this._r = color._r; - this._g = color._g; - this._b = color._b; - this.setAlpha(color._a); - return this; - }, - lighten: function() { - return this._applyModification(lighten, arguments); - }, - brighten: function() { - return this._applyModification(brighten, arguments); - }, - darken: function() { - return this._applyModification(darken, arguments); - }, - desaturate: function() { - return this._applyModification(desaturate, arguments); - }, - saturate: function() { - return this._applyModification(saturate, arguments); - }, - greyscale: function() { - return this._applyModification(greyscale, arguments); - }, - spin: function() { - return this._applyModification(spin, arguments); - }, - - _applyCombination: function(fn, args) { - return fn.apply(null, [this].concat([].slice.call(args))); - }, - analogous: function() { - return this._applyCombination(analogous, arguments); - }, - complement: function() { - return this._applyCombination(complement, arguments); - }, - monochromatic: function() { - return this._applyCombination(monochromatic, arguments); - }, - splitcomplement: function() { - return this._applyCombination(splitcomplement, arguments); - }, - triad: function() { - return this._applyCombination(triad, arguments); - }, - tetrad: function() { - return this._applyCombination(tetrad, arguments); - } -}; - -// If input is an object, force 1 into "1.0" to handle ratios properly -// String input requires "1.0" as input, so 1 will be treated as 1 -tinycolor.fromRatio = function(color, opts) { - if (typeof color == "object") { - var newColor = {}; - for (var i in color) { - if (color.hasOwnProperty(i)) { - if (i === "a") { - newColor[i] = color[i]; - } - else { - newColor[i] = convertToPercentage(color[i]); - } - } - } - color = newColor; - } - - return tinycolor(color, opts); -}; - -// Given a string or object, convert that input to RGB -// Possible string inputs: -// -// "red" -// "#f00" or "f00" -// "#ff0000" or "ff0000" -// "#ff000000" or "ff000000" -// "rgb 255 0 0" or "rgb (255, 0, 0)" -// "rgb 1.0 0 0" or "rgb (1, 0, 0)" -// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" -// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" -// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" -// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" -// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" -// -function inputToRGB(color) { - - var rgb = { r: 0, g: 0, b: 0 }; - var a = 1; - var s = null; - var v = null; - var l = null; - var ok = false; - var format = false; - - if (typeof color == "string") { - color = stringInputToObject(color); - } - - if (typeof color == "object") { - if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { - rgb = rgbToRgb(color.r, color.g, color.b); - ok = true; - format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; - } - else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { - s = convertToPercentage(color.s); - v = convertToPercentage(color.v); - rgb = hsvToRgb(color.h, s, v); - ok = true; - format = "hsv"; - } - else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { - s = convertToPercentage(color.s); - l = convertToPercentage(color.l); - rgb = hslToRgb(color.h, s, l); - ok = true; - format = "hsl"; - } - - if (color.hasOwnProperty("a")) { - a = color.a; - } - } - - a = boundAlpha(a); - - return { - ok: ok, - format: color.format || format, - r: mathMin(255, mathMax(rgb.r, 0)), - g: mathMin(255, mathMax(rgb.g, 0)), - b: mathMin(255, mathMax(rgb.b, 0)), - a: a - }; -} - -// Conversion Functions -// -------------------- - -// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from: -// - -// rgbToRgb -// Handle bounds / percentage checking to conform to CSS color spec -// -// *Assumes:* r, g, b in [0, 255] or [0, 1] -// *Returns:* { r, g, b } in [0, 255] -function rgbToRgb(r, g, b){ - return { - r: bound01(r, 255) * 255, - g: bound01(g, 255) * 255, - b: bound01(b, 255) * 255 - }; -} - -// rgbToHsl -// Converts an RGB color value to HSL. -// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] -// *Returns:* { h, s, l } in [0,1] -function rgbToHsl(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, l = (max + min) / 2; - - if(max == min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - - h /= 6; - } - - return { h: h, s: s, l: l }; -} - -// hslToRgb -// Converts an HSL color value to RGB. -// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] -// *Returns:* { r, g, b } in the set [0, 255] -function hslToRgb(h, s, l) { - var r, g, b; - - h = bound01(h, 360); - s = bound01(s, 100); - l = bound01(l, 100); - - function hue2rgb(p, q, t) { - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - - if(s === 0) { - r = g = b = l; // achromatic - } - else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// rgbToHsv -// Converts an RGB color value to HSV -// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] -// *Returns:* { h, s, v } in [0,1] -function rgbToHsv(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, v = max; - - var d = max - min; - s = max === 0 ? 0 : d / max; - - if(max == min) { - h = 0; // achromatic - } - else { - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - h /= 6; - } - return { h: h, s: s, v: v }; -} - -// hsvToRgb -// Converts an HSV color value to RGB. -// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] -// *Returns:* { r, g, b } in the set [0, 255] - function hsvToRgb(h, s, v) { - - h = bound01(h, 360) * 6; - s = bound01(s, 100); - v = bound01(v, 100); - - var i = Math.floor(h), - f = h - i, - p = v * (1 - s), - q = v * (1 - f * s), - t = v * (1 - (1 - f) * s), - mod = i % 6, - r = [v, q, p, p, t, v][mod], - g = [t, v, v, q, p, p][mod], - b = [p, p, t, v, v, q][mod]; - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// rgbToHex -// Converts an RGB color to hex -// Assumes r, g, and b are contained in the set [0, 255] -// Returns a 3 or 6 character hex -function rgbToHex(r, g, b, allow3Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - // Return a 3 character hex if possible - if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); - } - - return hex.join(""); -} - -// rgbaToHex -// Converts an RGBA color plus alpha transparency to hex -// Assumes r, g, b are contained in the set [0, 255] and -// a in [0, 1]. Returns a 4 or 8 character rgba hex -function rgbaToHex(r, g, b, a, allow4Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)), - pad2(convertDecimalToHex(a)) - ]; - - // Return a 4 character hex if possible - if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); - } - - return hex.join(""); -} - -// rgbaToArgbHex -// Converts an RGBA color to an ARGB Hex8 string -// Rarely used, but required for "toFilter()" -function rgbaToArgbHex(r, g, b, a) { - - var hex = [ - pad2(convertDecimalToHex(a)), - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - return hex.join(""); -} - -// equals -// Can be called with any tinycolor input -tinycolor.equals = function (color1, color2) { - if (!color1 || !color2) { return false; } - return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); -}; - -tinycolor.random = function() { - return tinycolor.fromRatio({ - r: mathRandom(), - g: mathRandom(), - b: mathRandom() - }); -}; - -// Modification Functions -// ---------------------- -// Thanks to less.js for some of the basics here -// - -function desaturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s -= amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function saturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s += amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function greyscale(color) { - return tinycolor(color).desaturate(100); -} - -function lighten (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l += amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -function brighten(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var rgb = tinycolor(color).toRgb(); - rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); - rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); - rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); - return tinycolor(rgb); -} - -function darken (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l -= amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. -// Values outside of this range will be wrapped into this range. -function spin(color, amount) { - var hsl = tinycolor(color).toHsl(); - var hue = (hsl.h + amount) % 360; - hsl.h = hue < 0 ? 360 + hue : hue; - return tinycolor(hsl); -} - -// Combination Functions -// --------------------- -// Thanks to jQuery xColor for some of the ideas behind these -// - -function complement(color) { - var hsl = tinycolor(color).toHsl(); - hsl.h = (hsl.h + 180) % 360; - return tinycolor(hsl); -} - -function triad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function tetrad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function splitcomplement(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), - tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) - ]; -} - -function analogous(color, results, slices) { - results = results || 6; - slices = slices || 30; - - var hsl = tinycolor(color).toHsl(); - var part = 360 / slices; - var ret = [tinycolor(color)]; - - for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { - hsl.h = (hsl.h + part) % 360; - ret.push(tinycolor(hsl)); - } - return ret; -} - -function monochromatic(color, results) { - results = results || 6; - var hsv = tinycolor(color).toHsv(); - var h = hsv.h, s = hsv.s, v = hsv.v; - var ret = []; - var modification = 1 / results; - - while (results--) { - ret.push(tinycolor({ h: h, s: s, v: v})); - v = (v + modification) % 1; - } - - return ret; -} - -// Utility Functions -// --------------------- - -tinycolor.mix = function(color1, color2, amount) { - amount = (amount === 0) ? 0 : (amount || 50); - - var rgb1 = tinycolor(color1).toRgb(); - var rgb2 = tinycolor(color2).toRgb(); - - var p = amount / 100; - - var rgba = { - r: ((rgb2.r - rgb1.r) * p) + rgb1.r, - g: ((rgb2.g - rgb1.g) * p) + rgb1.g, - b: ((rgb2.b - rgb1.b) * p) + rgb1.b, - a: ((rgb2.a - rgb1.a) * p) + rgb1.a - }; - - return tinycolor(rgba); -}; - -// Readability Functions -// --------------------- -// false -// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false -tinycolor.isReadable = function(color1, color2, wcag2) { - var readability = tinycolor.readability(color1, color2); - var wcag2Parms, out; - - out = false; - - wcag2Parms = validateWCAG2Parms(wcag2); - switch (wcag2Parms.level + wcag2Parms.size) { - case "AAsmall": - case "AAAlarge": - out = readability >= 4.5; - break; - case "AAlarge": - out = readability >= 3; - break; - case "AAAsmall": - out = readability >= 7; - break; - } - return out; - -}; - -// mostReadable -// Given a base color and a list of possible foreground or background -// colors for that base, returns the most readable color. -// Optionally returns Black or White if the most readable color is unreadable. -// *Example* -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" -tinycolor.mostReadable = function(baseColor, colorList, args) { - var bestColor = null; - var bestScore = 0; - var readability; - var includeFallbackColors, level, size ; - args = args || {}; - includeFallbackColors = args.includeFallbackColors ; - level = args.level; - size = args.size; - - for (var i= 0; i < colorList.length ; i++) { - readability = tinycolor.readability(baseColor, colorList[i]); - if (readability > bestScore) { - bestScore = readability; - bestColor = tinycolor(colorList[i]); - } - } - - if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { - return bestColor; - } - else { - args.includeFallbackColors=false; - return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); - } -}; - -// Big List of Colors -// ------------------ -// -var names = tinycolor.names = { - aliceblue: "f0f8ff", - antiquewhite: "faebd7", - aqua: "0ff", - aquamarine: "7fffd4", - azure: "f0ffff", - beige: "f5f5dc", - bisque: "ffe4c4", - black: "000", - blanchedalmond: "ffebcd", - blue: "00f", - blueviolet: "8a2be2", - brown: "a52a2a", - burlywood: "deb887", - burntsienna: "ea7e5d", - cadetblue: "5f9ea0", - chartreuse: "7fff00", - chocolate: "d2691e", - coral: "ff7f50", - cornflowerblue: "6495ed", - cornsilk: "fff8dc", - crimson: "dc143c", - cyan: "0ff", - darkblue: "00008b", - darkcyan: "008b8b", - darkgoldenrod: "b8860b", - darkgray: "a9a9a9", - darkgreen: "006400", - darkgrey: "a9a9a9", - darkkhaki: "bdb76b", - darkmagenta: "8b008b", - darkolivegreen: "556b2f", - darkorange: "ff8c00", - darkorchid: "9932cc", - darkred: "8b0000", - darksalmon: "e9967a", - darkseagreen: "8fbc8f", - darkslateblue: "483d8b", - darkslategray: "2f4f4f", - darkslategrey: "2f4f4f", - darkturquoise: "00ced1", - darkviolet: "9400d3", - deeppink: "ff1493", - deepskyblue: "00bfff", - dimgray: "696969", - dimgrey: "696969", - dodgerblue: "1e90ff", - firebrick: "b22222", - floralwhite: "fffaf0", - forestgreen: "228b22", - fuchsia: "f0f", - gainsboro: "dcdcdc", - ghostwhite: "f8f8ff", - gold: "ffd700", - goldenrod: "daa520", - gray: "808080", - green: "008000", - greenyellow: "adff2f", - grey: "808080", - honeydew: "f0fff0", - hotpink: "ff69b4", - indianred: "cd5c5c", - indigo: "4b0082", - ivory: "fffff0", - khaki: "f0e68c", - lavender: "e6e6fa", - lavenderblush: "fff0f5", - lawngreen: "7cfc00", - lemonchiffon: "fffacd", - lightblue: "add8e6", - lightcoral: "f08080", - lightcyan: "e0ffff", - lightgoldenrodyellow: "fafad2", - lightgray: "d3d3d3", - lightgreen: "90ee90", - lightgrey: "d3d3d3", - lightpink: "ffb6c1", - lightsalmon: "ffa07a", - lightseagreen: "20b2aa", - lightskyblue: "87cefa", - lightslategray: "789", - lightslategrey: "789", - lightsteelblue: "b0c4de", - lightyellow: "ffffe0", - lime: "0f0", - limegreen: "32cd32", - linen: "faf0e6", - magenta: "f0f", - maroon: "800000", - mediumaquamarine: "66cdaa", - mediumblue: "0000cd", - mediumorchid: "ba55d3", - mediumpurple: "9370db", - mediumseagreen: "3cb371", - mediumslateblue: "7b68ee", - mediumspringgreen: "00fa9a", - mediumturquoise: "48d1cc", - mediumvioletred: "c71585", - midnightblue: "191970", - mintcream: "f5fffa", - mistyrose: "ffe4e1", - moccasin: "ffe4b5", - navajowhite: "ffdead", - navy: "000080", - oldlace: "fdf5e6", - olive: "808000", - olivedrab: "6b8e23", - orange: "ffa500", - orangered: "ff4500", - orchid: "da70d6", - palegoldenrod: "eee8aa", - palegreen: "98fb98", - paleturquoise: "afeeee", - palevioletred: "db7093", - papayawhip: "ffefd5", - peachpuff: "ffdab9", - peru: "cd853f", - pink: "ffc0cb", - plum: "dda0dd", - powderblue: "b0e0e6", - purple: "800080", - rebeccapurple: "663399", - red: "f00", - rosybrown: "bc8f8f", - royalblue: "4169e1", - saddlebrown: "8b4513", - salmon: "fa8072", - sandybrown: "f4a460", - seagreen: "2e8b57", - seashell: "fff5ee", - sienna: "a0522d", - silver: "c0c0c0", - skyblue: "87ceeb", - slateblue: "6a5acd", - slategray: "708090", - slategrey: "708090", - snow: "fffafa", - springgreen: "00ff7f", - steelblue: "4682b4", - tan: "d2b48c", - teal: "008080", - thistle: "d8bfd8", - tomato: "ff6347", - turquoise: "40e0d0", - violet: "ee82ee", - wheat: "f5deb3", - white: "fff", - whitesmoke: "f5f5f5", - yellow: "ff0", - yellowgreen: "9acd32" -}; - -// Make it easy to access colors via hexNames[hex] -var hexNames = tinycolor.hexNames = flip(names); - -// Utilities -// --------- - -// { 'name1': 'val1' } becomes { 'val1': 'name1' } -function flip(o) { - var flipped = { }; - for (var i in o) { - if (o.hasOwnProperty(i)) { - flipped[o[i]] = i; - } - } - return flipped; -} - -// Return a valid alpha value [0,1] with all invalid values being set to 1 -function boundAlpha(a) { - a = parseFloat(a); - - if (isNaN(a) || a < 0 || a > 1) { - a = 1; - } - - return a; -} - -// Take input from [0, n] and return it as [0, 1] -function bound01(n, max) { - if (isOnePointZero(n)) { n = "100%"; } - - var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); - - // Automatically convert percentage into number - if (processPercent) { - n = parseInt(n * max, 10) / 100; - } - - // Handle floating point rounding errors - if ((Math.abs(n - max) < 0.000001)) { - return 1; - } - - // Convert into [0, 1] range if it isn't already - return (n % max) / parseFloat(max); -} - -// Force a number between 0 and 1 -function clamp01(val) { - return mathMin(1, mathMax(0, val)); -} - -// Parse a base-16 hex value into a base-10 integer -function parseIntFromHex(val) { - return parseInt(val, 16); -} - -// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 -// -function isOnePointZero(n) { - return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; -} - -// Check to see if string passed in is a percentage -function isPercentage(n) { - return typeof n === "string" && n.indexOf('%') != -1; -} - -// Force a hex value to have 2 characters -function pad2(c) { - return c.length == 1 ? '0' + c : '' + c; -} - -// Replace a decimal with it's percentage value -function convertToPercentage(n) { - if (n <= 1) { - n = (n * 100) + "%"; - } - - return n; -} - -// Converts a decimal to a hex value -function convertDecimalToHex(d) { - return Math.round(parseFloat(d) * 255).toString(16); -} -// Converts a hex value to a decimal -function convertHexToDecimal(h) { - return (parseIntFromHex(h) / 255); -} - -var matchers = (function() { - - // - var CSS_INTEGER = "[-\\+]?\\d+%?"; - - // - var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; - - // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. - var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; - - // Actual matching. - // Parentheses and commas are optional, but not required. - // Whitespace can take the place of commas or opening paren - var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - - return { - CSS_UNIT: new RegExp(CSS_UNIT), - rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), - rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), - hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), - hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), - hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), - hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), - hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, - hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ - }; -})(); - -// isValidCSSUnit -// Take in a single string / number and check to see if it looks like a CSS unit -// (see matchers above for definition). -function isValidCSSUnit(color) { - return !!matchers.CSS_UNIT.exec(color); -} - -// stringInputToObject -// Permissive string parsing. Take in a number of formats, and output an object -// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v} -function stringInputToObject(color) { - - color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase(); - var named = false; - if (names[color]) { - color = names[color]; - named = true; - } - else if (color == 'transparent') { - return { r: 0, g: 0, b: 0, a: 0, format: "name" }; - } - - // Try to match string input using regular expressions. - // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] - // Just return an object and let the conversion functions handle that. - // This way the result will be the same whether the tinycolor is initialized with string or object. - var match; - if ((match = matchers.rgb.exec(color))) { - return { r: match[1], g: match[2], b: match[3] }; - } - if ((match = matchers.rgba.exec(color))) { - return { r: match[1], g: match[2], b: match[3], a: match[4] }; - } - if ((match = matchers.hsl.exec(color))) { - return { h: match[1], s: match[2], l: match[3] }; - } - if ((match = matchers.hsla.exec(color))) { - return { h: match[1], s: match[2], l: match[3], a: match[4] }; - } - if ((match = matchers.hsv.exec(color))) { - return { h: match[1], s: match[2], v: match[3] }; - } - if ((match = matchers.hsva.exec(color))) { - return { h: match[1], s: match[2], v: match[3], a: match[4] }; - } - if ((match = matchers.hex8.exec(color))) { - return { - r: parseIntFromHex(match[1]), - g: parseIntFromHex(match[2]), - b: parseIntFromHex(match[3]), - a: convertHexToDecimal(match[4]), - format: named ? "name" : "hex8" - }; - } - if ((match = matchers.hex6.exec(color))) { - return { - r: parseIntFromHex(match[1]), - g: parseIntFromHex(match[2]), - b: parseIntFromHex(match[3]), - format: named ? "name" : "hex" - }; - } - if ((match = matchers.hex4.exec(color))) { - return { - r: parseIntFromHex(match[1] + '' + match[1]), - g: parseIntFromHex(match[2] + '' + match[2]), - b: parseIntFromHex(match[3] + '' + match[3]), - a: convertHexToDecimal(match[4] + '' + match[4]), - format: named ? "name" : "hex8" - }; - } - if ((match = matchers.hex3.exec(color))) { - return { - r: parseIntFromHex(match[1] + '' + match[1]), - g: parseIntFromHex(match[2] + '' + match[2]), - b: parseIntFromHex(match[3] + '' + match[3]), - format: named ? "name" : "hex" - }; - } - - return false; -} - -function validateWCAG2Parms(parms) { - // return valid WCAG2 parms for isReadable. - // If input parms are invalid, return {"level":"AA", "size":"small"} - var level, size; - parms = parms || {"level":"AA", "size":"small"}; - level = (parms.level || "AA").toUpperCase(); - size = (parms.size || "small").toLowerCase(); - if (level !== "AA" && level !== "AAA") { - level = "AA"; - } - if (size !== "small" && size !== "large") { - size = "small"; - } - return {"level":level, "size":size}; -} - -this.tinycolor = tinycolor; - -})()`; -} -// It is hacky way to make this function will be compiled preferentially by less -// resolve error: `ReferenceError: colorPalette is not defined` -// https://github.com/ant-design/ant-motion/issues/44 -.tinyColorMixin(); diff --git a/site/theme/style/compact.less b/site/theme/style/compact.less deleted file mode 100644 index ef0008ba3c..0000000000 --- a/site/theme/style/compact.less +++ /dev/null @@ -1,4 +0,0 @@ -@root-entry-name: default; - -@import './themes/compact.less'; -@import './core/index'; diff --git a/site/theme/style/core/global.less b/site/theme/style/core/global.less deleted file mode 100644 index cb26cce389..0000000000 --- a/site/theme/style/core/global.less +++ /dev/null @@ -1,491 +0,0 @@ -/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */ - -// Reboot -// -// Normalization of HTML elements, manually forked from Normalize.css to remove -// styles targeting irrelevant browsers while applying new styles. -// -// Normalize is licensed MIT. https://github.com/necolas/normalize.css - -// HTML & Body reset -@{html-selector}, -body { - .square(100%); -} - -// remove the clear button of a text input control in IE10+ -input::-ms-clear, -input::-ms-reveal { - display: none; -} - -// Document -// -// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. -// 2. Change the default font family in all browsers. -// 3. Correct the line height in all browsers. -// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. - -*, -*::before, -*::after { - box-sizing: border-box; // 1 -} - -@{html-selector} { - font-family: sans-serif; // 2 - line-height: 1.15; // 3 - -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: fade(@black, 0%); // 6 -} - -// IE10+ doesn't honor `` in some cases. -@-ms-viewport { - width: device-width; -} - -// Body -// -// 1. remove the margin in all browsers. -// 2. As a best practice, apply a default `body-background`. - -body { - margin: 0; // 1 - color: @text-color; - font-size: @font-size-base; - font-family: @font-family; - font-variant: @font-variant-base; - line-height: @line-height-base; - background-color: @body-background; // 2 - font-feature-settings: @font-feature-settings-base; -} - -// Suppress the focus outline on elements that cannot be accessed via keyboard. -// This prevents an unwanted focus outline from appearing around elements that -// might still respond to pointer events. -// -// Credit: https://github.com/suitcss/base -[tabindex='-1']:focus { - outline: none !important; -} - -// Content grouping -// -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. - -hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 -} - -// -// Typography -// - -// remove top margins from headings -// -// By default, `

`-`

` all receive top and bottom margins. We nuke the top -// margin for easier control within type scales as it avoids margin collapsing. -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0.5em; - color: @heading-color; - font-weight: 500; -} - -// Reset margins on paragraphs -// -// Similarly, the top margin on `

`s get reset. However, we also reset the -// bottom margin to use `em` units instead of `em`. -p { - margin-top: 0; - margin-bottom: 1em; -} - -// Abbreviations -// -// 1. remove the bottom border in Firefox 39-. -// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. -// 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin - -abbr[title], -abbr[data-original-title] { - // 4 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 - border-bottom: 0; // 1 - cursor: help; // 3 -} - -address { - margin-bottom: 1em; - font-style: normal; - line-height: inherit; -} - -input[type='text'], -input[type='password'], -input[type='number'], -textarea { - -webkit-appearance: none; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1em; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 500; -} - -dd { - margin-bottom: 0.5em; - margin-left: 0; // Undo browser default -} - -blockquote { - margin: 0 0 1em; -} - -dfn { - font-style: italic; // Add the correct font style in Android 4.3- -} - -b, -strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari -} - -small { - font-size: 80%; // Add the correct font size in all browsers -} - -// -// Prevent `sub` and `sup` elements from affecting the line height in -// all browsers. -// - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -// -// Links -// - -a { - color: @link-color; - text-decoration: @link-decoration; - background-color: transparent; // remove the gray background on active links in IE 10. - outline: none; - cursor: pointer; - transition: color 0.3s; - -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. - - &:hover { - color: @link-hover-color; - } - - &:active { - color: @link-active-color; - } - - &:active, - &:hover { - text-decoration: @link-hover-decoration; - outline: 0; - } - - // https://github.com/ant-design/ant-design/issues/22503 - &:focus { - text-decoration: @link-focus-decoration; - outline: @link-focus-outline; - } - - &[disabled] { - color: @disabled-color; - cursor: not-allowed; - } -} - -// -// Code -// - -pre, -code, -kbd, -samp { - font-size: 1em; // Correct the odd `em` font sizing in all browsers. - font-family: @code-family; -} - -pre { - // remove browser default top margin - margin-top: 0; - // Reset browser default of `1em` to use `em`s - margin-bottom: 1em; - // Don't allow content to break outside - overflow: auto; -} - -// -// Figures -// -figure { - // Apply a consistent margin strategy (matches our type styles). - margin: 0 0 1em; -} - -// -// Images and content -// - -img { - vertical-align: middle; - border-style: none; // remove the border on images inside links in IE 10-. -} - -// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. -// -// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 -// DON'T remove the click delay when `` is present. -// However, they DO support emoving the click delay via `touch-action: manipulation`. -// See: -// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action -// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay - -a, -area, -button, -[role='button'], -input:not([type='range']), -label, -select, -summary, -textarea { - touch-action: manipulation; -} - -// -// Tables -// - -table { - border-collapse: collapse; // Prevent double borders -} - -caption { - padding-top: 0.75em; - padding-bottom: 0.3em; - color: @text-color-secondary; - text-align: left; - caption-side: bottom; -} - -// -// Forms -// - -input, -button, -select, -optgroup, -textarea { - margin: 0; // remove the margin in Firefox and Safari - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; // Show the overflow in Edge -} - -button, -select { - text-transform: none; // remove the inheritance of text transform in Firefox -} - -// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` -// controls in Android 4. -// 2. Correct the inability to style clickable types in iOS and Safari. -button, -@{html-selector} [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; // 2 -} - -// remove inner border and padding from Firefox, but don't restore the outline like Normalize. -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type='radio'], -input[type='checkbox'] { - box-sizing: border-box; // 1. Add the correct box sizing in IE 10- - padding: 0; // 2. remove the padding in IE 10- -} - -input[type='date'], -input[type='time'], -input[type='datetime-local'], -input[type='month'] { - // remove the default appearance of temporal inputs to avoid a Mobile Safari - // bug where setting a custom line-height prevents text from being vertically - // centered within the input. - // See https://bugs.webkit.org/show_bug.cgi?id=139848 - // and https://github.com/twbs/bootstrap/issues/11266 - -webkit-appearance: listbox; -} - -textarea { - overflow: auto; // remove the default vertical scrollbar in IE. - // Textareas should really only resize vertically so they don't break their (horizontal) containers. - resize: vertical; -} - -fieldset { - // Browsers set a default `min-width: min-content;` on fieldsets, - // unlike e.g. `

`s, which have `min-width: 0;` by default. - // So we reset that to ensure fieldsets behave more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359 - // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements - min-width: 0; - margin: 0; - // Reset the default outline behavior of fieldsets so they don't affect page layout. - padding: 0; - border: 0; -} - -// 1. Correct the text wrapping in Edge and IE. -// 2. Correct the color inheritance from `fieldset` elements in IE. -legend { - display: block; - width: 100%; - max-width: 100%; // 1 - margin-bottom: 0.5em; - padding: 0; - color: inherit; // 2 - font-size: 1.5em; - line-height: inherit; - white-space: normal; // 1 -} - -progress { - vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. -} - -// Correct the cursor style of incement and decement buttons in Chrome. -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { - height: auto; -} - -[type='search'] { - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. - outline-offset: -2px; // 2. Correct the outline style in Safari. - -webkit-appearance: none; -} - -// -// remove the inner padding and cancel buttons in Chrome and Safari on macOS. -// - -[type='search']::-webkit-search-cancel-button, -[type='search']::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// 1. Correct the inability to style clickable types in iOS and Safari. -// 2. Change font properties to `inherit` in Safari. -// - -::-webkit-file-upload-button { - font: inherit; // 2 - -webkit-appearance: button; // 1 -} - -// -// Correct element displays -// - -output { - display: inline-block; -} - -summary { - display: list-item; // Add the correct display in all browsers -} - -template { - display: none; // Add the correct display in IE -} - -// Always hide an element with the `hidden` HTML attribute (from PureCSS). -// Needed for proper display in IE 10-. -[hidden] { - display: none !important; -} - -mark { - padding: 0.2em; - background-color: @yellow-1; -} - -::selection { - color: @text-color-inverse; - background: @text-selection-bg; -} - -// Utility classes -.clearfix { - .clearfix(); -} diff --git a/site/theme/style/core/iconfont.less b/site/theme/style/core/iconfont.less deleted file mode 100644 index 597b8549e9..0000000000 --- a/site/theme/style/core/iconfont.less +++ /dev/null @@ -1,22 +0,0 @@ -@import '../themes/index'; -@import '../mixins/iconfont'; - -.@{iconfont-css-prefix} { - .iconfont-mixin(); - - // https://github.com/ant-design/ant-design/issues/33703 - & > & { - line-height: 0; - vertical-align: 0; - } - - &[tabindex] { - cursor: pointer; - } -} - -.@{iconfont-css-prefix}-spin, -.@{iconfont-css-prefix}-spin::before { - display: inline-block; - animation: loadingCircle 1s infinite linear; -} diff --git a/site/theme/style/core/index.less b/site/theme/style/core/index.less deleted file mode 100644 index d2be2092da..0000000000 --- a/site/theme/style/core/index.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../mixins/index'; -@import '../themes/index'; -@import 'global'; diff --git a/site/theme/style/dark.less b/site/theme/style/dark.less deleted file mode 100644 index 12a37313e3..0000000000 --- a/site/theme/style/dark.less +++ /dev/null @@ -1,4 +0,0 @@ -@root-entry-name: default; - -@import './themes/dark.less'; -@import './core/index'; diff --git a/site/theme/style/default.less b/site/theme/style/default.less deleted file mode 100644 index ecec084536..0000000000 --- a/site/theme/style/default.less +++ /dev/null @@ -1,4 +0,0 @@ -// This is same as `index.less` but given `root-entry-name` for `dist/antd.less` usage -@root-entry-name: default; - -@import './index'; diff --git a/site/theme/style/index.less b/site/theme/style/index.less deleted file mode 100644 index 2a2b00d858..0000000000 --- a/site/theme/style/index.less +++ /dev/null @@ -1 +0,0 @@ -@import './core/index'; diff --git a/site/theme/style/index.tsx b/site/theme/style/index.tsx deleted file mode 100644 index d74e52ee9f..0000000000 --- a/site/theme/style/index.tsx +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/site/theme/style/mixins/box.less b/site/theme/style/mixins/box.less deleted file mode 100644 index 4bd3ffad73..0000000000 --- a/site/theme/style/mixins/box.less +++ /dev/null @@ -1,7 +0,0 @@ -.box(@position: absolute) { - position: @position; - top: 0; - right: 0; - bottom: 0; - left: 0; -} diff --git a/site/theme/style/mixins/clearfix.less b/site/theme/style/mixins/clearfix.less deleted file mode 100644 index 07e89f8012..0000000000 --- a/site/theme/style/mixins/clearfix.less +++ /dev/null @@ -1,16 +0,0 @@ -// mixins for clearfix -// ------------------------ -.clearfix() { - // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229 - &::before { - display: table; - content: ''; - } - - &::after { - // https://github.com/ant-design/ant-design/issues/21864 - display: table; - clear: both; - content: ''; - } -} diff --git a/site/theme/style/mixins/compatibility.less b/site/theme/style/mixins/compatibility.less deleted file mode 100644 index 9464a754a7..0000000000 --- a/site/theme/style/mixins/compatibility.less +++ /dev/null @@ -1,13 +0,0 @@ -// Compatibility for browsers. - -// Placeholder text -.placeholder(@color: @input-placeholder-color) { - &::placeholder { - color: @color; - user-select: none; // https://github.com/ant-design/ant-design/pull/32639 - } - - &:placeholder-shown { - text-overflow: ellipsis; - } -} diff --git a/site/theme/style/mixins/index.less b/site/theme/style/mixins/index.less deleted file mode 100644 index 3f1a0ce71c..0000000000 --- a/site/theme/style/mixins/index.less +++ /dev/null @@ -1,7 +0,0 @@ -// Mixins -// -------------------------------------------------- -@import 'size'; -@import 'clearfix'; -@import 'box'; -@import 'reset'; -@import 'operation-unit'; diff --git a/site/theme/style/mixins/modal-mask.less b/site/theme/style/mixins/modal-mask.less deleted file mode 100644 index b406bc1b41..0000000000 --- a/site/theme/style/mixins/modal-mask.less +++ /dev/null @@ -1,30 +0,0 @@ -@import 'box'; - -.modal-mask() { - pointer-events: none; - - &.@{ant-prefix}-zoom-enter, - &.@{ant-prefix}-zoom-appear { - transform: none; // reset scale avoid mousePosition bug - opacity: 0; - animation-duration: @animation-duration-slow; - user-select: none; // https://github.com/ant-design/ant-design/issues/11777 - } - - &-mask { - .box(fixed); - z-index: @zindex-modal-mask; - height: 100%; - background-color: @modal-mask-bg; - - &-hidden { - display: none; - } - } - - &-wrap { - .box(fixed); - overflow: auto; - outline: 0; - } -} diff --git a/site/theme/style/mixins/operation-unit.less b/site/theme/style/mixins/operation-unit.less deleted file mode 100644 index b69517111b..0000000000 --- a/site/theme/style/mixins/operation-unit.less +++ /dev/null @@ -1,15 +0,0 @@ -.operation-unit() { - color: @link-color; - outline: none; - cursor: pointer; - transition: color 0.3s; - - &:focus-visible, - &:hover { - color: @link-hover-color; - } - - &:active { - color: @link-active-color; - } -} diff --git a/site/theme/style/mixins/reset.less b/site/theme/style/mixins/reset.less deleted file mode 100644 index 905c16e247..0000000000 --- a/site/theme/style/mixins/reset.less +++ /dev/null @@ -1,11 +0,0 @@ -.reset-component() { - box-sizing: border-box; - margin: 0; - padding: 0; - color: @text-color; - font-size: @font-size-base; - font-variant: @font-variant-base; - line-height: @line-height-base; - list-style: none; - font-feature-settings: @font-feature-settings-base; -} diff --git a/site/theme/style/mixins/rounded-arrow.less b/site/theme/style/mixins/rounded-arrow.less deleted file mode 100644 index 1c8264336d..0000000000 --- a/site/theme/style/mixins/rounded-arrow.less +++ /dev/null @@ -1,44 +0,0 @@ -.roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) { - @corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2)))); - - @width-without-unit: unit(@width); - @outer-radius-without-unit: unit(@outer-radius); - @inner-radius-without-unit: unit(@arrow-border-radius); - - @a-x: @width-without-unit - @corner-height; - @a-y: 2 * @width-without-unit + @corner-height; - @b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2)); - @b-y: 2 * @width-without-unit; - @c-x: 2 * @width-without-unit - @inner-radius-without-unit; - @c-y: 2 * @width-without-unit; - @d-x: 2 * @width-without-unit; - @d-y: 2 * @width-without-unit - @inner-radius-without-unit; - @e-x: 2 * @width-without-unit; - @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2)); - @f-x: 2 * @width-without-unit + @corner-height; - @f-y: @width-without-unit - @corner-height; - @g-x: @f-x - 1; - @g-y: @f-y; - @h-x: @a-x; - @h-y: @a-y - 1; - - border-radius: 0 0 @arrow-border-radius; - pointer-events: none; - - &::before { - position: absolute; - top: -@width; - left: -@width; - width: @width * 3; - height: @width * 3; - background: @bg-color; - // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825 - background-repeat: no-repeat; - background-position: ceil(-@width + 1px) ceil(-@width + 1px); - content: ''; - clip-path: inset(33% 33%); // For browsers that do not support path() - clip-path: path( - 'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z' - ); - } -} diff --git a/site/theme/style/mixins/size.less b/site/theme/style/mixins/size.less deleted file mode 100644 index a8be650896..0000000000 --- a/site/theme/style/mixins/size.less +++ /dev/null @@ -1,10 +0,0 @@ -// Sizing shortcuts - -.size(@width; @height) { - width: @width; - height: @height; -} - -.square(@size) { - .size(@size; @size); -} diff --git a/site/theme/style/themes/compact.less b/site/theme/style/themes/compact.less deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/site/theme/style/themes/dark.less b/site/theme/style/themes/dark.less deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/site/theme/style/themes/default.less b/site/theme/style/themes/default.less deleted file mode 100644 index 7321f9b20b..0000000000 --- a/site/theme/style/themes/default.less +++ /dev/null @@ -1,1084 +0,0 @@ -/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ -@import '../color/colors'; - -@theme: default; - -// The prefix to use on all css classes from ant. -@ant-prefix: ant; - -// An override for the html selector for theme prefixes -@html-selector: html; - -// [CSS-VARIABLE-REPLACE-BEGIN: html-variables] -// [CSS-VARIABLE-REPLACE-END: html-variables] - -// -------- Colors ----------- -// >>> Primary -@primary-color: @blue-6; -@primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `); -@primary-color-active: color(~`colorPalette('@{primary-color}', 7) `); -@primary-color-outline: fade(@primary-color, @outline-fade); - -@processing-color: @blue-6; - -// >>> Info -@info-color: @primary-color; -@info-color-deprecated-bg: color(~`colorPalette('@{info-color}', 1) `); -@info-color-deprecated-border: color(~`colorPalette('@{info-color}', 3) `); - -// >>> Success -@success-color: @green-6; -@success-color-hover: color(~`colorPalette('@{success-color}', 5) `); -@success-color-active: color(~`colorPalette('@{success-color}', 7) `); -@success-color-outline: fade(@success-color, @outline-fade); -@success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `); -@success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `); - -// >>> Warning -@warning-color: @gold-6; -@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `); -@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `); -@warning-color-outline: fade(@warning-color, @outline-fade); -@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `); -@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `); - -// >>> Error -@error-color: @red-5; -@error-color-hover: color(~`colorPalette('@{error-color}', 5) `); -@error-color-active: color(~`colorPalette('@{error-color}', 7) `); -@error-color-outline: fade(@error-color, @outline-fade); -@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `); -@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `); - -@highlight-color: @red-5; -@normal-color: #d9d9d9; -@white: #fff; -@black: #000; - -// Color used by default to control hover and active backgrounds and for -// alert info backgrounds. -@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%) -@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%) -@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused -@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused -@primary-5: color( - ~`colorPalette('@{primary-color}', 5) ` -); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) -@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color -@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%) -@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused -@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused -@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused - -// Base Scaffolding Variables -// --- - -// Background color for `` -@body-background: #fff; -// Base background color for most components -@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'; -@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -@text-color: fade(@black, 85%); -@text-color-secondary: fade(@black, 45%); -@text-color-inverse: @white; -@icon-color: inherit; -@icon-color-hover: fade(@black, 75%); -@heading-color: fade(@black, 85%); -@text-color-dark: fade(@white, 85%); -@text-color-secondary-dark: fade(@white, 65%); -@text-selection-bg: @primary-color; -@font-variant-base: tabular-nums; -@font-feature-settings-base: 'tnum'; -@font-size-base: 14px; -@font-size-lg: @font-size-base + 2px; -@font-size-sm: 12px; -@heading-1-size: ceil(@font-size-base * 2.71); -@heading-2-size: ceil(@font-size-base * 2.14); -@heading-3-size: ceil(@font-size-base * 1.71); -@heading-4-size: ceil(@font-size-base * 1.42); -@heading-5-size: ceil(@font-size-base * 1.14); -// https://github.com/ant-design/ant-design/issues/20210 -@line-height-base: 1.5715; -@border-radius-base: 2px; -@border-radius-sm: 2px; - -// control border -@control-border-radius: @border-radius-base; - -// arrow border -@arrow-border-radius: 2px; - -// vertical paddings -@padding-lg: 24px; // containers -@padding-md: 16px; // small containers and buttons -@padding-sm: 12px; // Form controls and items -@padding-xs: 8px; // small items -@padding-xss: 4px; // more small - -// vertical padding for all form controls -@control-padding-horizontal: @padding-sm; -@control-padding-horizontal-sm: @padding-xs; - -// vertical margins -@margin-lg: 24px; // containers -@margin-md: 16px; // small containers and buttons -@margin-sm: 12px; // Form controls and items -@margin-xs: 8px; // small items -@margin-xss: 4px; // more small - -// height rules -@height-base: 32px; -@height-lg: 40px; -@height-sm: 24px; - -// The background colors for active and hover states for things like -// list items or table cells. -@item-active-bg: @primary-1; -@item-hover-bg: #f5f5f5; - -// ICONFONT -@iconfont-css-prefix: anticon; - -// LINK -@link-color: @primary-color; -@link-hover-color: color(~`colorPalette('@{link-color}', 5) `); -@link-active-color: color(~`colorPalette('@{link-color}', 7) `); -@link-decoration: none; -@link-hover-decoration: none; -@link-focus-decoration: none; -@link-focus-outline: 0; - -// Animation -@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); -@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); -@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); -@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); -@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); -@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); -@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); -@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); -@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); -@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); -@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); -@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); -@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); -@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); - -// Border color -@border-color-base: hsv(0, 0, 85%); // base border outline a component -@border-color-split: hsv(0, 0, 94%); // split border inside a component -@border-color-inverse: @white; -@border-width-base: 1px; // width of the border for a component -@border-style-base: solid; // style of a components border - -// Outline -@outline-blur-size: 0; -@outline-width: 2px; -@outline-color: @primary-color; // No use anymore -@outline-fade: 20%; - -@background-color-light: hsv(0, 0, 98%); // background of header and selected item -@background-color-base: hsv(0, 0, 96%); // Default grey background color - -// Disabled states -@disabled-color: fade(#000, 25%); -@disabled-bg: @background-color-base; -@disabled-active-bg: tint(@black, 90%); -@disabled-color-dark: fade(#fff, 35%); - -// Shadow -@shadow-color: rgba(0, 0, 0, 0.15); -@shadow-color-inverse: @component-background; -@box-shadow-base: @shadow-2; -@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), - 0 -12px 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), - 0 12px 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), - -12px 0 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), - 12px 0 48px 16px rgba(0, 0, 0, 0.03); -@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - -// Buttons -@btn-font-weight: 400; -@btn-border-radius-base: @border-radius-base; -@btn-border-radius-sm: @border-radius-base; -@btn-border-width: @border-width-base; -@btn-border-style: @border-style-base; -@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); -@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); -@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); - -@btn-primary-color: #fff; -@btn-primary-bg: @primary-color; - -@btn-default-color: @text-color; -@btn-default-bg: @component-background; -@btn-default-border: @border-color-base; - -@btn-danger-color: #fff; -@btn-danger-bg: @error-color; -@btn-danger-border: @error-color; - -@btn-disable-color: @disabled-color; -@btn-disable-bg: @disabled-bg; -@btn-disable-border: @border-color-base; - -@btn-default-ghost-color: @component-background; -@btn-default-ghost-bg: transparent; -@btn-default-ghost-border: @component-background; - -@btn-font-size-lg: @font-size-lg; -@btn-font-size-sm: @font-size-base; -@btn-padding-horizontal-base: @padding-md - 1px; -@btn-padding-horizontal-lg: @btn-padding-horizontal-base; -@btn-padding-horizontal-sm: @padding-xs - 1px; - -@btn-height-base: @height-base; -@btn-height-lg: @height-lg; -@btn-height-sm: @height-sm; - -@btn-line-height: @line-height-base; - -@btn-circle-size: @btn-height-base; -@btn-circle-size-lg: @btn-height-lg; -@btn-circle-size-sm: @btn-height-sm; - -@btn-square-size: @btn-height-base; -@btn-square-size-lg: @btn-height-lg; -@btn-square-size-sm: @btn-height-sm; -@btn-square-only-icon-size: @font-size-base + 2px; -@btn-square-only-icon-size-sm: @font-size-base; -@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px; - -@btn-group-border: @primary-5; - -@btn-link-hover-bg: transparent; -@btn-text-hover-bg: rgba(0, 0, 0, 0.018); - -// Checkbox -@checkbox-size: 16px; -@checkbox-color: @primary-color; -@checkbox-check-color: #fff; -@checkbox-check-bg: @checkbox-check-color; -@checkbox-border-width: @border-width-base; -@checkbox-border-radius: @border-radius-base; -@checkbox-group-item-margin-right: 8px; - -// Descriptions -@descriptions-bg: #fafafa; -@descriptions-title-margin-bottom: 20px; -@descriptions-default-padding: @padding-md @padding-lg; -@descriptions-middle-padding: @padding-sm @padding-lg; -@descriptions-small-padding: @padding-xs @padding-md; -@descriptions-item-padding-bottom: @padding-md; -@descriptions-item-trailing-colon: true; -@descriptions-item-label-colon-margin-right: 8px; -@descriptions-item-label-colon-margin-left: 2px; -@descriptions-extra-color: @text-color; - -// Divider -@divider-text-padding: 1em; -@divider-orientation-margin: 5%; -@divider-color: rgba(0, 0, 0, 6%); -@divider-vertical-gutter: 8px; - -// Dropdown -@dropdown-selected-color: @primary-color; -@dropdown-menu-submenu-disabled-bg: @component-background; -@dropdown-selected-bg: @item-active-bg; - -// Empty -@empty-font-size: @font-size-base; - -// Radio -@radio-size: 16px; -@radio-top: 0.2em; -@radio-border-width: 1px; -@radio-dot-size: @radio-size - 8px; -@radio-dot-color: @primary-color; -@radio-dot-disabled-color: fade(@black, 20%); -@radio-solid-checked-color: @component-background; - -// Radio buttons -@radio-button-bg: @btn-default-bg; -@radio-button-checked-bg: @btn-default-bg; -@radio-button-color: @btn-default-color; -@radio-button-hover-color: @primary-5; -@radio-button-active-color: @primary-7; -@radio-button-padding-horizontal: @padding-md - 1px; -@radio-disabled-button-checked-bg: @disabled-active-bg; -@radio-disabled-button-checked-color: @disabled-color; -@radio-wrapper-margin-right: 8px; - -// Media queries breakpoints -// @screen-xs and @screen-xs-min is not used in Grid -// smallest break point is @screen-md -@screen-xs: 480px; -@screen-xs-min: @screen-xs; -// 👆 Extra small screen / phone - -// 👇 Small screen / tablet -@screen-sm: 576px; -@screen-sm-min: @screen-sm; - -// Medium screen / desktop -@screen-md: 768px; -@screen-md-min: @screen-md; - -// Large screen / wide desktop -@screen-lg: 992px; -@screen-lg-min: @screen-lg; - -// Extra large screen / full hd -@screen-xl: 1200px; -@screen-xl-min: @screen-xl; - -// Extra extra large screen / large desktop -@screen-xxl: 1600px; -@screen-xxl-min: @screen-xxl; - -// provide a maximum -@screen-xs-max: (@screen-sm-min - 1px); -@screen-sm-max: (@screen-md-min - 1px); -@screen-md-max: (@screen-lg-min - 1px); -@screen-lg-max: (@screen-xl-min - 1px); -@screen-xl-max: (@screen-xxl-min - 1px); - -// Grid system -@grid-columns: 24; - -// Layout -@layout-body-background: #f0f2f5; -@layout-header-background: #001529; -@layout-header-height: 64px; -@layout-header-padding: 0 50px; -@layout-header-color: @text-color; -@layout-footer-padding: 24px 50px; -@layout-footer-background: @layout-body-background; -@layout-sider-background: @layout-header-background; -@layout-trigger-height: 48px; -@layout-trigger-background: #002140; -@layout-trigger-color: #fff; -@layout-zero-trigger-width: 36px; -@layout-zero-trigger-height: 42px; -// Layout light theme -@layout-sider-background-light: #fff; -@layout-trigger-background-light: #fff; -@layout-trigger-color-light: @text-color; - -// z-index list, order by `z-index` -@zindex-badge: auto; -@zindex-table-fixed: 2; -@zindex-affix: 10; -@zindex-back-top: 10; -@zindex-picker-panel: 10; -@zindex-popup-close: 10; -@zindex-modal: 1000; -@zindex-modal-mask: 1000; -@zindex-message: 1010; -@zindex-notification: 1010; -@zindex-popover: 1030; -@zindex-dropdown: 1050; -@zindex-picker: 1050; -@zindex-popoconfirm: 1060; -@zindex-tooltip: 1070; -@zindex-image: 1080; - -// Animation -@animation-duration-slow: 0.3s; // Modal -@animation-duration-base: 0.2s; -@animation-duration-fast: 0.1s; // Tooltip - -//CollapsePanel -@collapse-panel-border-radius: @border-radius-base; - -//Dropdown -@dropdown-menu-bg: @component-background; -@dropdown-vertical-padding: 5px; -@dropdown-edge-child-vertical-padding: 4px; -@dropdown-font-size: @font-size-base; -@dropdown-line-height: 22px; - -// Form -// --- -@label-required-color: @highlight-color; -@label-color: @heading-color; -@form-warning-input-bg: @input-bg; -@form-item-margin-bottom: 24px; -@form-item-trailing-colon: true; -@form-vertical-label-padding: 0 0 8px; -@form-vertical-label-margin: 0; -@form-item-label-font-size: @font-size-base; -@form-item-label-height: @input-height-base; -@form-item-label-colon-margin-right: 8px; -@form-item-label-colon-margin-left: 2px; -@form-error-input-bg: @input-bg; - -// Input -// --- -@input-height-base: @height-base; -@input-height-lg: @height-lg; -@input-height-sm: @height-sm; -@input-padding-horizontal: @control-padding-horizontal - 1px; -@input-padding-horizontal-base: @input-padding-horizontal; -@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; -@input-padding-horizontal-lg: @input-padding-horizontal; -@input-padding-vertical-base: max( - (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) - - @border-width-base, - 3px -); -@input-padding-vertical-sm: max( - (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) - - @border-width-base, - 0 -); -@input-padding-vertical-lg: ( - ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10 - ) - @border-width-base; -@input-placeholder-color: hsv(0, 0, 75%); -@input-color: @text-color; -@input-icon-color: @input-color; -@input-border-color: @border-color-base; -@input-bg: @component-background; -@input-number-hover-border-color: @input-hover-border-color; -@input-number-handler-active-bg: #f4f4f4; -@input-number-handler-hover-bg: @primary-5; -@input-number-handler-bg: @component-background; -@input-number-handler-border-color: @border-color-base; -@input-addon-bg: @background-color-light; -@input-hover-border-color: @primary-5; -@input-disabled-bg: @disabled-bg; -@input-outline-offset: 0 0; -@input-icon-hover-color: fade(@black, 85%); -@input-disabled-color: @disabled-color; - -// Mentions -// --- -@mentions-dropdown-bg: @component-background; -@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg; - -// Select -// --- -@select-border-color: @border-color-base; -@select-item-selected-color: @text-color; -@select-item-selected-font-weight: 600; -@select-dropdown-bg: @component-background; -@select-item-selected-bg: @primary-1; -@select-item-active-bg: @item-hover-bg; -@select-dropdown-vertical-padding: @dropdown-vertical-padding; -@select-dropdown-font-size: @dropdown-font-size; -@select-dropdown-line-height: @dropdown-line-height; -@select-dropdown-height: 32px; -@select-background: @component-background; -@select-clear-background: @select-background; -@select-selection-item-bg: @background-color-base; -@select-selection-item-border-color: @border-color-split; -@select-single-item-height-lg: 40px; -@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px -@select-multiple-item-height-lg: 32px; -@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); -@select-multiple-disabled-background: @input-disabled-bg; -@select-multiple-item-disabled-color: #bfbfbf; -@select-multiple-item-disabled-border-color: @select-border-color; - -// Cascader -// --- -@cascader-bg: @component-background; -@cascader-item-selected-bg: @primary-1; -@cascader-menu-bg: @component-background; -@cascader-menu-border-color-split: @border-color-split; - -// Cascader -// ---- -@cascader-dropdown-vertical-padding: @dropdown-vertical-padding; -@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding; -@cascader-dropdown-font-size: @dropdown-font-size; -@cascader-dropdown-line-height: @dropdown-line-height; - -// Anchor -// --- -@anchor-bg: transparent; -@anchor-border-color: @border-color-split; -@anchor-link-top: 4px; -@anchor-link-left: 16px; -@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; - -// Tooltip -// --- -// Tooltip max width -@tooltip-max-width: 250px; -// Tooltip text color -@tooltip-color: #fff; -// Tooltip background color -@tooltip-bg: rgba(0, 0, 0, 0.75); -// Tooltip arrow width -@tooltip-arrow-width: 8px * sqrt(2); -// Tooltip distance with trigger -@tooltip-distance: @tooltip-arrow-width - 1px + 4px; -// Tooltip arrow color -@tooltip-arrow-color: @tooltip-bg; -@tooltip-border-radius: @border-radius-base; - -// Popover -// --- -// Popover body background color -@popover-bg: @component-background; -// Popover text color -@popover-color: @text-color; -// Popover maximum width -@popover-min-width: 177px; -@popover-min-height: 32px; -// Popover arrow width -@popover-arrow-width: @tooltip-arrow-width; -// Popover arrow color -@popover-arrow-color: @popover-bg; -// Popover outer arrow width -// Popover outer arrow color -@popover-arrow-outer-color: @popover-bg; -// Popover distance with trigger -@popover-distance: @popover-arrow-width + 4px; -@popover-padding-horizontal: @padding-md; - -// Modal -// -- -@modal-header-padding-vertical: @padding-md; -@modal-header-padding-horizontal: @padding-lg; -@modal-body-padding: @padding-lg; -@modal-header-bg: @component-background; -@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal; -@modal-header-border-width: @border-width-base; -@modal-header-border-style: @border-style-base; -@modal-header-title-line-height: 22px; -@modal-header-title-font-size: @font-size-lg; -@modal-header-border-color-split: @border-color-split; -@modal-header-close-size: @modal-header-title-line-height + 2 * @modal-header-padding-vertical; -@modal-content-bg: @component-background; -@modal-heading-color: @heading-color; -@modal-close-color: @text-color-secondary; -@modal-footer-bg: transparent; -@modal-footer-border-color-split: @border-color-split; -@modal-footer-border-style: @border-style-base; -@modal-footer-padding-vertical: 10px; -@modal-footer-padding-horizontal: 16px; -@modal-footer-border-width: @border-width-base; -@modal-mask-bg: fade(@black, 45%); -@modal-confirm-body-padding: 32px 32px 24px; -@modal-confirm-title-font-size: @font-size-lg; -@modal-border-radius: @border-radius-base; - -// Progress -// -- -@progress-default-color: @processing-color; -@progress-remaining-color: @background-color-base; -@progress-info-text-color: @progress-text-color; -@progress-radius: 100px; -@progress-steps-item-bg: #f3f3f3; -@progress-text-font-size: 1em; -@progress-text-color: @text-color; // This is for circle text color, should be renamed better -@progress-circle-text-font-size: 1em; -// Menu -// --- -@menu-inline-toplevel-item-height: 40px; -@menu-item-height: 40px; -@menu-item-group-height: @line-height-base; -@menu-collapsed-width: 80px; -@menu-bg: @component-background; -@menu-popup-bg: @component-background; -@menu-item-color: @text-color; -@menu-inline-submenu-bg: @background-color-light; -@menu-highlight-color: @primary-color; -@menu-highlight-danger-color: @error-color; -@menu-item-active-bg: @primary-1; -@menu-item-active-danger-bg: @red-1; -@menu-item-active-border-width: 3px; -@menu-item-group-title-color: @text-color-secondary; -@menu-item-vertical-margin: 4px; -@menu-item-font-size: @font-size-base; -@menu-item-boundary-margin: 8px; -@menu-item-padding-horizontal: 20px; -@menu-item-padding: 0 @menu-item-padding-horizontal; -@menu-horizontal-line-height: 46px; -@menu-icon-margin-right: 10px; -@menu-icon-size: @menu-item-font-size; -@menu-icon-size-lg: @font-size-lg; -@menu-item-group-title-font-size: @menu-item-font-size; - -// dark theme -@menu-dark-color: @text-color-secondary-dark; -@menu-dark-danger-color: @error-color; -@menu-dark-bg: @layout-header-background; -@menu-dark-arrow-color: #fff; -@menu-dark-inline-submenu-bg: #000c17; -@menu-dark-highlight-color: #fff; -@menu-dark-item-active-bg: @primary-color; -@menu-dark-item-active-danger-bg: @error-color; -@menu-dark-selected-item-icon-color: @white; -@menu-dark-selected-item-text-color: @white; -@menu-dark-item-hover-bg: transparent; -// Spin -// --- -@spin-dot-size-sm: 14px; -@spin-dot-size: 20px; -@spin-dot-size-lg: 32px; - -// Table -// -- -@table-bg: @component-background; -@table-header-bg: @background-color-light; -@table-header-color: @heading-color; -@table-header-sort-bg: @background-color-base; -@table-body-sort-bg: #fafafa; -@table-row-hover-bg: @background-color-light; -@table-selected-row-color: inherit; -@table-selected-row-bg: @primary-1; -@table-body-selected-sort-bg: @table-selected-row-bg; -@table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%); -@table-expanded-row-bg: #fbfbfb; -@table-padding-vertical: 16px; -@table-padding-horizontal: 16px; -@table-padding-vertical-md: (@table-padding-vertical * 3 / 4); -@table-padding-horizontal-md: (@table-padding-horizontal / 2); -@table-padding-vertical-sm: (@table-padding-vertical / 2); -@table-padding-horizontal-sm: (@table-padding-horizontal / 2); -@table-border-color: @border-color-split; -@table-border-radius-base: @border-radius-base; -@table-footer-bg: @background-color-light; -@table-footer-color: @heading-color; -@table-header-bg-sm: @table-header-bg; -@table-font-size: @font-size-base; -@table-font-size-md: @table-font-size; -@table-font-size-sm: @table-font-size; -@table-header-cell-split-color: rgba(0, 0, 0, 0.06); -// Sorter -// Legacy: `table-header-sort-active-bg` is used for hover not real active -@table-header-sort-active-bg: rgba(0, 0, 0, 0.04); -@table-fixed-header-sort-active-bg: hsv(0, 0, 96%); - -// Filter -@table-header-filter-active-bg: rgba(0, 0, 0, 0.04); -@table-filter-btns-bg: inherit; -@table-filter-dropdown-bg: @component-background; -@table-expand-icon-bg: @component-background; -@table-selection-column-width: 32px; -// Sticky -@table-sticky-scroll-bar-bg: fade(#000, 35%); -@table-sticky-scroll-bar-radius: 4px; - -// Tag -// -- -@tag-border-radius: @border-radius-base; -@tag-default-bg: @background-color-light; -@tag-default-color: @text-color; -@tag-font-size: @font-size-sm; -@tag-line-height: 20px; - -// TimePicker -// --- -@picker-bg: @component-background; -@picker-basic-cell-hover-color: @item-hover-bg; -@picker-basic-cell-active-with-range-color: @primary-1; -@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%); -@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04); -@picker-border-color: @border-color-split; -@picker-date-hover-range-border-color: lighten(@primary-color, 20%); -@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; -@picker-time-panel-column-width: 56px; -@picker-time-panel-column-height: 224px; -@picker-time-panel-cell-height: 28px; -@picker-panel-cell-height: 24px; -@picker-panel-cell-width: 36px; -@picker-text-height: 40px; -@picker-panel-without-time-cell-height: 66px; - -// Calendar -// --- -@calendar-bg: @component-background; -@calendar-input-bg: @input-bg; -@calendar-border-color: @border-color-inverse; -@calendar-item-active-bg: @item-active-bg; -@calendar-column-active-bg: fade(@calendar-item-active-bg, 20%); -@calendar-full-bg: @calendar-bg; -@calendar-full-panel-bg: @calendar-full-bg; - -// Carousel -// --- -@carousel-dot-width: 16px; -@carousel-dot-height: 3px; -@carousel-dot-active-width: 24px; - -// Badge -// --- -@badge-height: 20px; -@badge-height-sm: 14px; -@badge-dot-size: 6px; -@badge-font-size: @font-size-sm; -@badge-font-size-sm: @font-size-sm; -@badge-font-weight: normal; -@badge-status-size: 6px; -@badge-text-color: @component-background; -@badge-color: @highlight-color; - -// Rate -// --- -@rate-star-color: @yellow-6; -@rate-star-bg: @border-color-split; -@rate-star-size: 20px; -@rate-star-hover-scale: scale(1.1); - -// Card -// --- -@card-head-color: @heading-color; -@card-head-background: transparent; -@card-head-font-size: @font-size-lg; -@card-head-font-size-sm: @font-size-base; -@card-head-padding: 16px; -@card-head-padding-sm: (@card-head-padding / 2); -@card-head-height: 48px; -@card-head-height-sm: 36px; -@card-inner-head-padding: 12px; -@card-padding-base: 24px; -@card-padding-base-sm: (@card-padding-base / 2); -@card-actions-background: @component-background; -@card-actions-li-margin: 12px 0; -@card-skeleton-bg: #cfd8dc; -@card-background: @component-background; -@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), - 0 5px 12px 4px rgba(0, 0, 0, 0.09); -@card-radius: @border-radius-base; -@card-head-tabs-margin-bottom: -17px; -@card-head-extra-color: @text-color; - -// Comment -// --- -@comment-bg: inherit; -@comment-padding-base: @padding-md 0; -@comment-nest-indent: 44px; -@comment-font-size-base: @font-size-base; -@comment-font-size-sm: @font-size-sm; -@comment-author-name-color: @text-color-secondary; -@comment-author-time-color: #ccc; -@comment-action-color: @text-color-secondary; -@comment-action-hover-color: #595959; -@comment-actions-margin-bottom: inherit; -@comment-actions-margin-top: @margin-sm; -@comment-content-detail-p-margin-bottom: inherit; - -// Tabs -// --- -@tabs-card-head-background: @background-color-light; -@tabs-card-height: 40px; -@tabs-card-active-color: @primary-color; -@tabs-card-horizontal-padding: ( - (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 - ) - @border-width-base @padding-md; -@tabs-card-horizontal-padding-sm: 6px @padding-md; -@tabs-card-horizontal-padding-lg: 7px @padding-md 6px; -@tabs-title-font-size: @font-size-base; -@tabs-title-font-size-lg: @font-size-lg; -@tabs-title-font-size-sm: @font-size-base; -@tabs-ink-bar-color: @primary-color; -@tabs-bar-margin: 0 0 @margin-md 0; -@tabs-horizontal-gutter: 32px; -@tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; -@tabs-horizontal-margin-rtl: 0 0 0 32px; -@tabs-horizontal-padding: @padding-sm 0; -@tabs-horizontal-padding-lg: @padding-md 0; -@tabs-horizontal-padding-sm: @padding-xs 0; -@tabs-vertical-padding: @padding-xs @padding-lg; -@tabs-vertical-margin: @margin-md 0 0 0; -@tabs-scrolling-size: 32px; -@tabs-highlight-color: @primary-color; -@tabs-hover-color: @primary-5; -@tabs-active-color: @primary-7; -@tabs-card-gutter: 2px; -@tabs-card-tab-active-border-top: 2px solid transparent; - -// BackTop -// --- -@back-top-color: #fff; -@back-top-bg: @text-color-secondary; -@back-top-hover-bg: @text-color; - -// Avatar -// --- -@avatar-size-base: 32px; -@avatar-size-lg: 40px; -@avatar-size-sm: 24px; -@avatar-font-size-base: 18px; -@avatar-font-size-lg: 24px; -@avatar-font-size-sm: 14px; -@avatar-bg: #ccc; -@avatar-color: #fff; -@avatar-border-radius: @border-radius-base; -@avatar-group-overlapping: -8px; -@avatar-group-space: 3px; -@avatar-group-border-color: #fff; - -// Switch -// --- -@switch-height: 22px; -@switch-sm-height: 16px; -@switch-min-width: 44px; -@switch-sm-min-width: 28px; -@switch-disabled-opacity: 0.4; -@switch-color: @primary-color; -@switch-bg: @component-background; -@switch-shadow-color: fade(#00230b, 20%); -@switch-padding: 2px; -@switch-inner-margin-min: ceil(@switch-height * 0.3); -@switch-inner-margin-max: ceil(@switch-height * 1.1); -@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3); -@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1); - -// Pagination -// --- -@pagination-item-bg: @component-background; -@pagination-item-size: @height-base; -@pagination-item-size-sm: 24px; -@pagination-font-family: @font-family; -@pagination-font-weight-active: 500; -@pagination-item-bg-active: @component-background; -@pagination-item-link-bg: @component-background; -@pagination-item-disabled-color-active: @disabled-color; -@pagination-item-disabled-bg-active: @disabled-active-bg; -@pagination-item-input-bg: @component-background; -@pagination-mini-options-size-changer-top: 0px; - -// PageHeader -// --- -@page-header-padding: @padding-lg; -@page-header-padding-vertical: @padding-md; -@page-header-padding-breadcrumb: @padding-sm; -@page-header-content-padding-vertical: @padding-sm; -@page-header-back-color: #000; -@page-header-ghost-bg: inherit; -@page-header-heading-title: @heading-4-size; -@page-header-heading-sub-title: 14px; -@page-header-tabs-tab-font-size: 16px; - -// Breadcrumb -// --- -@breadcrumb-base-color: @text-color-secondary; -@breadcrumb-last-item-color: @text-color; -@breadcrumb-font-size: @font-size-base; -@breadcrumb-icon-font-size: @font-size-base; -@breadcrumb-link-color: @text-color-secondary; -@breadcrumb-link-color-hover: @text-color; -@breadcrumb-separator-color: @text-color-secondary; -@breadcrumb-separator-margin: 0 @padding-xs; - -// Slider -// --- -@slider-margin: 10px 6px 10px; -@slider-rail-background-color: @background-color-base; -@slider-rail-background-color-hover: #e1e1e1; -@slider-track-background-color: @primary-3; -@slider-track-background-color-hover: @primary-4; -@slider-handle-border-width: 2px; -@slider-handle-background-color: @component-background; -@slider-handle-color: @primary-3; -@slider-handle-color-hover: @primary-4; -@slider-handle-color-focus: tint(@primary-color, 20%); -@slider-handle-color-focus-shadow: fade(@primary-color, 12%); -@slider-handle-color-tooltip-open: @primary-color; -@slider-handle-size: 14px; -@slider-handle-margin-top: -5px; -@slider-handle-margin-left: -5px; -@slider-handle-shadow: 0; -@slider-dot-border-color: @border-color-split; -@slider-dot-border-color-active: tint(@primary-color, 50%); -@slider-disabled-color: @disabled-color; -@slider-disabled-background-color: @component-background; - -// Tree -// --- -@tree-bg: @component-background; -@tree-title-height: 24px; -@tree-child-padding: 18px; -@tree-directory-selected-color: #fff; -@tree-directory-selected-bg: @primary-color; -@tree-node-hover-bg: @item-hover-bg; -@tree-node-selected-bg: @primary-2; - -// Collapse -// --- -@collapse-header-padding: @padding-sm @padding-md; -@collapse-header-padding-extra: 40px; -@collapse-header-bg: @background-color-light; -@collapse-content-padding: @padding-md; -@collapse-content-bg: @component-background; -@collapse-header-arrow-left: 16px; - -// Skeleton -// --- -@skeleton-color: rgba(190, 190, 190, 0.2); -@skeleton-to-color: shade(@skeleton-color, 5%); -@skeleton-paragraph-margin-top: 28px; -@skeleton-paragraph-li-margin-top: @margin-md; -@skeleton-paragraph-li-height: 16px; -@skeleton-title-height: 16px; -@skeleton-title-paragraph-margin-top: @margin-lg; - -// Transfer -// --- -@transfer-header-height: 40px; -@transfer-item-height: @height-base; -@transfer-disabled-bg: @disabled-bg; -@transfer-list-height: 200px; -@transfer-item-hover-bg: @item-hover-bg; -@transfer-item-selected-hover-bg: darken(@item-active-bg, 2%); -@transfer-item-padding-vertical: 6px; -@transfer-list-search-icon-top: 12px; - -// Message -// --- -@message-notice-content-padding: 10px 16px; -@message-notice-content-bg: @component-background; -// Motion -// --- -@wave-animation-width: 6px; - -// Alert -// --- -@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; -@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; -@alert-success-icon-color: @success-color; -@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; -@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; -@alert-info-icon-color: @info-color; -@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; -@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; -@alert-warning-icon-color: @warning-color; -@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; -@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; -@alert-error-icon-color: @error-color; -@alert-message-color: @heading-color; -@alert-text-color: @text-color; -@alert-close-color: @text-color-secondary; -@alert-close-hover-color: @icon-color-hover; -@alert-padding-vertical: @padding-xs; -@alert-padding-horizontal: @padding-md - 1px; -@alert-no-icon-padding-vertical: @padding-xs; -@alert-with-description-no-icon-padding-vertical: @padding-md - 1px; -@alert-with-description-padding-vertical: @padding-md - 1px; -@alert-with-description-padding: @alert-with-description-padding-vertical 15px - @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size; -@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2); -@alert-with-description-icon-size: 24px; - -// List -// --- -@list-header-background: transparent; -@list-footer-background: transparent; -@list-empty-text-padding: @padding-md; -@list-item-padding: @padding-sm 0; -@list-item-padding-sm: @padding-xs @padding-md; -@list-item-padding-lg: 16px 24px; -@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; -@list-item-meta-description-font-size: @font-size-base; - -// Statistic -// --- -@statistic-title-font-size: @font-size-base; -@statistic-content-font-size: 24px; -@statistic-unit-font-size: 24px; -@statistic-font-family: @font-family; - -// Drawer -// --- -@drawer-header-padding: @padding-md @padding-lg; -@drawer-body-padding: @padding-lg; -@drawer-bg: @component-background; -@drawer-footer-padding-vertical: @modal-footer-padding-vertical; -@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal; -@drawer-header-close-size: 56px; -@drawer-title-font-size: @font-size-lg; -@drawer-title-line-height: 22px; - -// Timeline -// --- -@timeline-width: 2px; -@timeline-color: @border-color-split; -@timeline-dot-border-width: 2px; -@timeline-dot-color: @primary-color; -@timeline-dot-bg: @component-background; -@timeline-item-padding-bottom: 20px; - -// Typography -// --- -@typography-title-font-weight: 600; -@typography-title-margin-top: 1.2em; -@typography-title-margin-bottom: 0.5em; - -// Upload -// --- -@upload-actions-color: @text-color-secondary; - -// Steps -// --- -@process-tail-color: @border-color-split; -@steps-nav-arrow-color: fade(@black, 25%); -@steps-background: @component-background; -@steps-icon-size: 32px; -@steps-icon-custom-size: @steps-icon-size; -@steps-icon-custom-top: 0px; -@steps-icon-custom-font-size: 24px; -@steps-icon-top: -0.5px; -@steps-icon-font-size: @font-size-lg; -@steps-icon-margin: 0 8px 0 0; -@steps-title-line-height: @height-base; -@steps-small-icon-size: 24px; -@steps-small-icon-margin: 0 8px 0 0; -@steps-dot-size: 8px; -@steps-dot-top: 2px; -@steps-current-dot-size: 10px; -@steps-description-max-width: 140px; -@steps-nav-content-max-width: auto; -@steps-vertical-icon-width: 16px; -@steps-vertical-tail-width: 16px; -@steps-vertical-tail-width-sm: 12px; - -// Notification -// --- -@notification-bg: @component-background; -@notification-padding-vertical: 16px; -@notification-padding-horizontal: 24px; - -// Result -// --- -@result-title-font-size: 24px; -@result-subtitle-font-size: @font-size-base; -@result-icon-font-size: 72px; -@result-extra-margin: 24px 0 0 0; - -// Image -// --- -@image-size-base: 48px; -@image-font-size-base: 24px; -@image-bg: #f5f5f5; -@image-color: #fff; -@image-mask-font-size: 16px; -@image-preview-operation-size: 18px; -@image-preview-operation-color: @text-color-dark; -@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%); - -// Segmented -// --- -@segmented-bg: fade(@black, 4%); -@segmented-hover-bg: fade(@black, 6%); -@segmented-selected-bg: @white; -@segmented-label-color: fade(@black, 65%); -@segmented-label-hover-color: #262626; diff --git a/site/theme/style/themes/index.less b/site/theme/style/themes/index.less deleted file mode 100644 index fd29f584c3..0000000000 --- a/site/theme/style/themes/index.less +++ /dev/null @@ -1,7 +0,0 @@ -// Default using variable as entry to support site variable version -// This will be replaced in webpack bundle -// @root-entry-name: variable; - -// @import './default.less'; -// @import './variable.less'; -@import './@{root-entry-name}.less'; diff --git a/site/theme/style/themes/variable.less b/site/theme/style/themes/variable.less deleted file mode 100644 index 2a7f995d07..0000000000 --- a/site/theme/style/themes/variable.less +++ /dev/null @@ -1,1139 +0,0 @@ -/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ -@import '../color/colors'; - -@theme: variable; - -// The prefix to use on all css classes from ant. -@ant-prefix: ant; - -// An override for the html selector for theme prefixes -@html-selector: html; - -@{html-selector} { - @base-primary: @blue-6; - - // ========= Primary Color ========= - --@{ant-prefix}-primary-color: @base-primary; - --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `); - --@{ant-prefix}-primary-color-active: color(~`colorPalette('@{base-primary}', 7) `); - --@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade); - - // Legacy - @legacy-primary-1: color(~`colorPalette('@{base-primary}', 1) `); - - --@{ant-prefix}-primary-1: @legacy-primary-1; - --@{ant-prefix}-primary-2: color(~`colorPalette('@{base-primary}', 2) `); - --@{ant-prefix}-primary-3: color(~`colorPalette('@{base-primary}', 3) `); - --@{ant-prefix}-primary-4: color(~`colorPalette('@{base-primary}', 4) `); - --@{ant-prefix}-primary-5: color(~`colorPalette('@{base-primary}', 5) `); - --@{ant-prefix}-primary-6: @base-primary; - --@{ant-prefix}-primary-7: color(~`colorPalette('@{base-primary}', 7) `); - - // Deprecated - --@{ant-prefix}-primary-color-deprecated-pure: ~''; - --@{ant-prefix}-primary-color-deprecated-l-35: lighten(@base-primary, 35%); - --@{ant-prefix}-primary-color-deprecated-l-20: lighten(@base-primary, 20%); - --@{ant-prefix}-primary-color-deprecated-t-20: tint(@base-primary, 20%); - --@{ant-prefix}-primary-color-deprecated-t-50: tint(@base-primary, 50%); - --@{ant-prefix}-primary-color-deprecated-f-12: fade(@base-primary, 12%); - --@{ant-prefix}-primary-color-active-deprecated-f-30: fade(@legacy-primary-1, 30%); - --@{ant-prefix}-primary-color-active-deprecated-d-02: darken(@legacy-primary-1, 2%); - - // ========= Success Color ========= - --@{ant-prefix}-success-color: @green-6; - --@{ant-prefix}-success-color-hover: color(~`colorPalette('@{green-6}', 5) `); - --@{ant-prefix}-success-color-active: color(~`colorPalette('@{green-6}', 7) `); - --@{ant-prefix}-success-color-outline: fade(@green-6, @outline-fade); - --@{ant-prefix}-success-color-deprecated-bg: ~`colorPalette('@{green-6}', 1) `; - --@{ant-prefix}-success-color-deprecated-border: ~`colorPalette('@{green-6}', 3) `; - - // ========== Error Color ========== - --@{ant-prefix}-error-color: @red-5; - --@{ant-prefix}-error-color-hover: color(~`colorPalette('@{red-5}', 5) `); - --@{ant-prefix}-error-color-active: color(~`colorPalette('@{red-5}', 7) `); - --@{ant-prefix}-error-color-outline: fade(@red-5, @outline-fade); - --@{ant-prefix}-error-color-deprecated-bg: ~`colorPalette('@{red-5}', 1) `; - --@{ant-prefix}-error-color-deprecated-border: ~`colorPalette('@{red-5}', 3) `; - - // ========= Warning Color ========= - --@{ant-prefix}-warning-color: @gold-6; - --@{ant-prefix}-warning-color-hover: color(~`colorPalette('@{gold-6}', 5) `); - --@{ant-prefix}-warning-color-active: color(~`colorPalette('@{gold-6}', 7) `); - --@{ant-prefix}-warning-color-outline: fade(@gold-6, @outline-fade); - --@{ant-prefix}-warning-color-deprecated-bg: ~`colorPalette('@{gold-6}', 1) `; - --@{ant-prefix}-warning-color-deprecated-border: ~`colorPalette('@{gold-6}', 3) `; - - // ========== Info Color =========== - --@{ant-prefix}-info-color: @base-primary; - --@{ant-prefix}-info-color-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `; - --@{ant-prefix}-info-color-deprecated-border: ~`colorPalette('@{base-primary}', 3) `; -} - -// -------- Colors ----------- -// >>> Primary -@primary-color: ~'var(--@{ant-prefix}-primary-color)'; -@primary-color-hover: ~'var(--@{ant-prefix}-primary-color-hover)'; -@primary-color-active: ~'var(--@{ant-prefix}-primary-color-active)'; -@primary-color-outline: ~'var(--@{ant-prefix}-primary-color-outline)'; - -@processing-color: @primary-color; - -// >>> Info -@info-color: ~'var(--@{ant-prefix}-info-color)'; -@info-color-deprecated-bg: ~'var(--@{ant-prefix}-info-color-deprecated-bg)'; -@info-color-deprecated-border: ~'var(--@{ant-prefix}-info-color-deprecated-border)'; - -// >>> Success -@success-color: ~'var(--@{ant-prefix}-success-color)'; -@success-color-hover: ~'var(--@{ant-prefix}-success-color-hover)'; -@success-color-active: ~'var(--@{ant-prefix}-success-color-active)'; -@success-color-outline: ~'var(--@{ant-prefix}-success-color-outline)'; -@success-color-deprecated-bg: ~'var(--@{ant-prefix}-success-color-deprecated-bg)'; -@success-color-deprecated-border: ~'var(--@{ant-prefix}-success-color-deprecated-border)'; - -// >>> Warning -@warning-color: ~'var(--@{ant-prefix}-warning-color)'; -@warning-color-hover: ~'var(--@{ant-prefix}-warning-color-hover)'; -@warning-color-active: ~'var(--@{ant-prefix}-warning-color-active)'; -@warning-color-outline: ~'var(--@{ant-prefix}-warning-color-outline)'; -@warning-color-deprecated-bg: ~'var(--@{ant-prefix}-warning-color-deprecated-bg)'; -@warning-color-deprecated-border: ~'var(--@{ant-prefix}-warning-color-deprecated-border)'; - -// >>> Error -@error-color: ~'var(--@{ant-prefix}-error-color)'; -@error-color-hover: ~'var(--@{ant-prefix}-error-color-hover)'; -@error-color-active: ~'var(--@{ant-prefix}-error-color-active)'; -@error-color-outline: ~'var(--@{ant-prefix}-error-color-outline)'; -@error-color-deprecated-bg: ~'var(--@{ant-prefix}-error-color-deprecated-bg)'; -@error-color-deprecated-border: ~'var(--@{ant-prefix}-error-color-deprecated-border)'; - -@highlight-color: @red-5; -@normal-color: #d9d9d9; -@white: #fff; -@black: #000; - -// Color used by default to control hover and active backgrounds and for -// alert info backgrounds. -@primary-1: ~'var(--@{ant-prefix}-primary-1)'; // replace tint(@primary-color, 90%) -@primary-2: ~'var(--@{ant-prefix}-primary-2)'; // replace tint(@primary-color, 80%) -@primary-3: ~'var(--@{ant-prefix}-primary-3)'; // unused -@primary-4: ~'var(--@{ant-prefix}-primary-4)'; // unused -@primary-5: ~'var(--@{ant-prefix}-primary-5)'; // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) -@primary-6: ~'var(--@{ant-prefix}-primary-6)'; // color used to control the text color of active buttons, don't use, use @primary-color -@primary-7: ~'var(--@{ant-prefix}-primary-7)'; // replace shade(@primary-color, 5%) -@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused -@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused -@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused - -// Base Scaffolding Variables -// --- - -// Background color for `` -@body-background: #fff; -// Base background color for most components -@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'; -@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -@text-color: fade(@black, 85%); -@text-color-secondary: fade(@black, 45%); -@text-color-inverse: @white; -@icon-color: inherit; -@icon-color-hover: fade(@black, 75%); -@heading-color: fade(@black, 85%); -@text-color-dark: fade(@white, 85%); -@text-color-secondary-dark: fade(@white, 65%); -@text-selection-bg: @primary-color; -@font-variant-base: tabular-nums; -@font-feature-settings-base: 'tnum'; -@font-size-base: 14px; -@font-size-lg: @font-size-base + 2px; -@font-size-sm: 12px; -@heading-1-size: ceil(@font-size-base * 2.71); -@heading-2-size: ceil(@font-size-base * 2.14); -@heading-3-size: ceil(@font-size-base * 1.71); -@heading-4-size: ceil(@font-size-base * 1.42); -@heading-5-size: ceil(@font-size-base * 1.14); -// https://github.com/ant-design/ant-design/issues/20210 -@line-height-base: 1.5715; -@border-radius-base: 2px; -@border-radius-sm: 2px; - -// control border -@control-border-radius: @border-radius-base; - -// arrow border -@arrow-border-radius: @border-radius-sm; - -// vertical paddings -@padding-lg: 24px; // containers -@padding-md: 16px; // small containers and buttons -@padding-sm: 12px; // Form controls and items -@padding-xs: 8px; // small items -@padding-xss: 4px; // more small - -// vertical padding for all form controls -@control-padding-horizontal: @padding-sm; -@control-padding-horizontal-sm: @padding-xs; - -// vertical margins -@margin-lg: 24px; // containers -@margin-md: 16px; // small containers and buttons -@margin-sm: 12px; // Form controls and items -@margin-xs: 8px; // small items -@margin-xss: 4px; // more small - -// height rules -@height-base: 32px; -@height-lg: 40px; -@height-sm: 24px; - -// The background colors for active and hover states for things like -// list items or table cells. -@item-active-bg: @primary-1; -@item-hover-bg: #f5f5f5; - -// ICONFONT -@iconfont-css-prefix: anticon; - -// LINK -@link-color: @primary-color; -@link-hover-color: @primary-color-hover; -@link-active-color: @primary-color-active; -@link-decoration: none; -@link-hover-decoration: none; -@link-focus-decoration: none; -@link-focus-outline: 0; - -// Animation -@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); -@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); -@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); -@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); -@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); -@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); -@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); -@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); -@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); -@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); -@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); -@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); -@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); -@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); - -// Border color -@border-color-base: hsv(0, 0, 85%); // base border outline a component -@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component -@border-color-inverse: @white; -@border-width-base: 1px; // width of the border for a component -@border-style-base: solid; // style of a components border - -// Outline -@outline-blur-size: 0; -@outline-width: 2px; -@outline-color: @primary-color; // No use anymore -@outline-fade: 20%; - -@background-color-light: hsv(0, 0, 98%); // background of header and selected item -@background-color-base: hsv(0, 0, 96%); // Default grey background color - -// Disabled states -@disabled-color: fade(#000, 25%); -@disabled-bg: @background-color-base; -@disabled-active-bg: tint(@black, 90%); -@disabled-color-dark: fade(#fff, 35%); - -// Shadow -@shadow-color: rgba(0, 0, 0, 0.15); -@shadow-color-inverse: @component-background; -@box-shadow-base: @shadow-2; -@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), - 0 -12px 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), - 0 12px 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), - -12px 0 48px 16px rgba(0, 0, 0, 0.03); -@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), - 12px 0 48px 16px rgba(0, 0, 0, 0.03); -@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - -// Buttons -@btn-font-weight: 400; -@btn-border-radius-base: @border-radius-base; -@btn-border-radius-sm: @border-radius-base; -@btn-border-width: @border-width-base; -@btn-border-style: @border-style-base; -@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); -@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); -@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); - -@btn-primary-color: #fff; -@btn-primary-bg: @primary-color; - -@btn-default-color: @text-color; -@btn-default-bg: @component-background; -@btn-default-border: @border-color-base; - -@btn-danger-color: #fff; -@btn-danger-bg: @error-color; -@btn-danger-border: @error-color; - -@btn-disable-color: @disabled-color; -@btn-disable-bg: @disabled-bg; -@btn-disable-border: @border-color-base; - -@btn-default-ghost-color: @component-background; -@btn-default-ghost-bg: transparent; -@btn-default-ghost-border: @component-background; - -@btn-font-size-lg: @font-size-lg; -@btn-font-size-sm: @font-size-base; -@btn-padding-horizontal-base: @padding-md - 1px; -@btn-padding-horizontal-lg: @btn-padding-horizontal-base; -@btn-padding-horizontal-sm: @padding-xs - 1px; - -@btn-height-base: @height-base; -@btn-height-lg: @height-lg; -@btn-height-sm: @height-sm; - -@btn-line-height: @line-height-base; - -@btn-circle-size: @btn-height-base; -@btn-circle-size-lg: @btn-height-lg; -@btn-circle-size-sm: @btn-height-sm; - -@btn-square-size: @btn-height-base; -@btn-square-size-lg: @btn-height-lg; -@btn-square-size-sm: @btn-height-sm; -@btn-square-only-icon-size: @font-size-base + 2px; -@btn-square-only-icon-size-sm: @font-size-base; -@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px; - -@btn-group-border: @primary-5; - -@btn-link-hover-bg: transparent; -@btn-text-hover-bg: rgba(0, 0, 0, 0.018); - -// Checkbox -@checkbox-size: 16px; -@checkbox-color: @primary-color; -@checkbox-check-color: #fff; -@checkbox-check-bg: @checkbox-check-color; -@checkbox-border-width: @border-width-base; -@checkbox-border-radius: @border-radius-base; -@checkbox-group-item-margin-right: 8px; - -// Descriptions -@descriptions-bg: #fafafa; -@descriptions-title-margin-bottom: 20px; -@descriptions-default-padding: @padding-md @padding-lg; -@descriptions-middle-padding: @padding-sm @padding-lg; -@descriptions-small-padding: @padding-xs @padding-md; -@descriptions-item-padding-bottom: @padding-md; -@descriptions-item-trailing-colon: true; -@descriptions-item-label-colon-margin-right: 8px; -@descriptions-item-label-colon-margin-left: 2px; -@descriptions-extra-color: @text-color; - -// Divider -@divider-text-padding: 1em; -@divider-orientation-margin: 5%; -@divider-color: rgba(0, 0, 0, 6%); -@divider-vertical-gutter: 8px; - -// Dropdown -@dropdown-selected-color: @primary-color; -@dropdown-menu-submenu-disabled-bg: @component-background; -@dropdown-selected-bg: @item-active-bg; - -// Empty -@empty-font-size: @font-size-base; - -// Radio -@radio-size: 16px; -@radio-top: 0.2em; -@radio-border-width: 1px; -@radio-dot-size: @radio-size - 8px; -@radio-dot-color: @primary-color; -@radio-dot-disabled-color: fade(@black, 20%); -@radio-solid-checked-color: @component-background; - -// Radio buttons -@radio-button-bg: @btn-default-bg; -@radio-button-checked-bg: @btn-default-bg; -@radio-button-color: @btn-default-color; -@radio-button-hover-color: @primary-5; -@radio-button-active-color: @primary-7; -@radio-button-padding-horizontal: @padding-md - 1px; -@radio-disabled-button-checked-bg: @disabled-active-bg; -@radio-disabled-button-checked-color: @disabled-color; -@radio-wrapper-margin-right: 8px; - -// Media queries breakpoints -// @screen-xs and @screen-xs-min is not used in Grid -// smallest break point is @screen-md -@screen-xs: 480px; -@screen-xs-min: @screen-xs; -// 👆 Extra small screen / phone - -// 👇 Small screen / tablet -@screen-sm: 576px; -@screen-sm-min: @screen-sm; - -// Medium screen / desktop -@screen-md: 768px; -@screen-md-min: @screen-md; - -// Large screen / wide desktop -@screen-lg: 992px; -@screen-lg-min: @screen-lg; - -// Extra large screen / full hd -@screen-xl: 1200px; -@screen-xl-min: @screen-xl; - -// Extra extra large screen / large desktop -@screen-xxl: 1600px; -@screen-xxl-min: @screen-xxl; - -// provide a maximum -@screen-xs-max: (@screen-sm-min - 1px); -@screen-sm-max: (@screen-md-min - 1px); -@screen-md-max: (@screen-lg-min - 1px); -@screen-lg-max: (@screen-xl-min - 1px); -@screen-xl-max: (@screen-xxl-min - 1px); - -// Grid system -@grid-columns: 24; - -// Layout -@layout-body-background: #f0f2f5; -@layout-header-background: #001529; -@layout-header-height: 64px; -@layout-header-padding: 0 50px; -@layout-header-color: @text-color; -@layout-footer-padding: 24px 50px; -@layout-footer-background: @layout-body-background; -@layout-sider-background: @layout-header-background; -@layout-trigger-height: 48px; -@layout-trigger-background: #002140; -@layout-trigger-color: #fff; -@layout-zero-trigger-width: 36px; -@layout-zero-trigger-height: 42px; -// Layout light theme -@layout-sider-background-light: #fff; -@layout-trigger-background-light: #fff; -@layout-trigger-color-light: @text-color; - -// z-index list, order by `z-index` -@zindex-badge: auto; -@zindex-table-fixed: 2; -@zindex-affix: 10; -@zindex-back-top: 10; -@zindex-picker-panel: 10; -@zindex-popup-close: 10; -@zindex-modal: 1000; -@zindex-modal-mask: 1000; -@zindex-message: 1010; -@zindex-notification: 1010; -@zindex-popover: 1030; -@zindex-dropdown: 1050; -@zindex-picker: 1050; -@zindex-popoconfirm: 1060; -@zindex-tooltip: 1070; -@zindex-image: 1080; - -// Animation -@animation-duration-slow: 0.3s; // Modal -@animation-duration-base: 0.2s; -@animation-duration-fast: 0.1s; // Tooltip - -//CollapsePanel -@collapse-panel-border-radius: @border-radius-base; - -//Dropdown -@dropdown-menu-bg: @component-background; -@dropdown-vertical-padding: 5px; -@dropdown-edge-child-vertical-padding: 4px; -@dropdown-font-size: @font-size-base; -@dropdown-line-height: 22px; - -// Form -// --- -@label-required-color: @highlight-color; -@label-color: @heading-color; -@form-warning-input-bg: @input-bg; -@form-item-margin-bottom: 24px; -@form-item-trailing-colon: true; -@form-vertical-label-padding: 0 0 8px; -@form-vertical-label-margin: 0; -@form-item-label-font-size: @font-size-base; -@form-item-label-height: @input-height-base; -@form-item-label-colon-margin-right: 8px; -@form-item-label-colon-margin-left: 2px; -@form-error-input-bg: @input-bg; - -// Input -// --- -@input-height-base: @height-base; -@input-height-lg: @height-lg; -@input-height-sm: @height-sm; -@input-padding-horizontal: @control-padding-horizontal - 1px; -@input-padding-horizontal-base: @input-padding-horizontal; -@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; -@input-padding-horizontal-lg: @input-padding-horizontal; -@input-padding-vertical-base: max( - (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) - - @border-width-base, - 3px -); -@input-padding-vertical-sm: max( - (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) - - @border-width-base, - 0 -); -@input-padding-vertical-lg: ( - ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10 - ) - @border-width-base; -@input-placeholder-color: hsv(0, 0, 75%); -@input-color: @text-color; -@input-icon-color: @input-color; -@input-border-color: @border-color-base; -@input-bg: @component-background; -@input-number-hover-border-color: @input-hover-border-color; -@input-number-handler-active-bg: #f4f4f4; -@input-number-handler-hover-bg: @primary-5; -@input-number-handler-bg: @component-background; -@input-number-handler-border-color: @border-color-base; -@input-addon-bg: @background-color-light; -@input-hover-border-color: @primary-5; -@input-disabled-bg: @disabled-bg; -@input-outline-offset: 0 0; -@input-icon-hover-color: fade(@black, 85%); -@input-disabled-color: @disabled-color; - -// Mentions -// --- -@mentions-dropdown-bg: @component-background; -@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg; - -// Select -// --- -@select-border-color: @border-color-base; -@select-item-selected-color: @text-color; -@select-item-selected-font-weight: 600; -@select-dropdown-bg: @component-background; -@select-item-selected-bg: @primary-1; -@select-item-active-bg: @item-hover-bg; -@select-dropdown-vertical-padding: @dropdown-vertical-padding; -@select-dropdown-font-size: @dropdown-font-size; -@select-dropdown-line-height: @dropdown-line-height; -@select-dropdown-height: 32px; -@select-background: @component-background; -@select-clear-background: @select-background; -@select-selection-item-bg: @background-color-base; -@select-selection-item-border-color: @border-color-split; -@select-single-item-height-lg: 40px; -@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px -@select-multiple-item-height-lg: 32px; -@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); -@select-multiple-disabled-background: @input-disabled-bg; -@select-multiple-item-disabled-color: #bfbfbf; -@select-multiple-item-disabled-border-color: @select-border-color; - -// Cascader -// --- -@cascader-bg: @component-background; -@cascader-item-selected-bg: @primary-1; -@cascader-menu-bg: @component-background; -@cascader-menu-border-color-split: @border-color-split; - -// Cascader -// ---- -@cascader-dropdown-vertical-padding: @dropdown-vertical-padding; -@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding; -@cascader-dropdown-font-size: @dropdown-font-size; -@cascader-dropdown-line-height: @dropdown-line-height; - -// Anchor -// --- -@anchor-bg: transparent; -@anchor-border-color: @border-color-split; -@anchor-link-top: 4px; -@anchor-link-left: 16px; -@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; - -// Tooltip -// --- -// Tooltip max width -@tooltip-max-width: 250px; -// Tooltip text color -@tooltip-color: #fff; -// Tooltip background color -@tooltip-bg: rgba(0, 0, 0, 0.75); -// Tooltip arrow width -@tooltip-arrow-width: 8px * sqrt(2); -// Tooltip distance with trigger -@tooltip-distance: @tooltip-arrow-width - 1px + 4px; -// Tooltip arrow color -@tooltip-arrow-color: @tooltip-bg; -@tooltip-border-radius: @border-radius-base; - -// Popover -// --- -// Popover body background color -@popover-bg: @component-background; -// Popover text color -@popover-color: @text-color; -// Popover maximum width -@popover-min-width: 177px; -@popover-min-height: 32px; -// Popover arrow width -@popover-arrow-width: @tooltip-arrow-width; -// Popover arrow color -@popover-arrow-color: @popover-bg; -// Popover outer arrow width -// Popover outer arrow color -@popover-arrow-outer-color: @popover-bg; -// Popover distance with trigger -@popover-distance: @popover-arrow-width + 4px; -@popover-padding-horizontal: @padding-md; - -// Modal -// -- -@modal-header-padding-vertical: @padding-md; -@modal-header-padding-horizontal: @padding-lg; -@modal-body-padding: @padding-lg; -@modal-header-bg: @component-background; -@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal; -@modal-header-border-width: @border-width-base; -@modal-header-border-style: @border-style-base; -@modal-header-title-line-height: 22px; -@modal-header-title-font-size: @font-size-lg; -@modal-header-border-color-split: @border-color-split; -@modal-header-close-size: @modal-header-title-line-height + 2 * @modal-header-padding-vertical; -@modal-content-bg: @component-background; -@modal-heading-color: @heading-color; -@modal-close-color: @text-color-secondary; -@modal-footer-bg: transparent; -@modal-footer-border-color-split: @border-color-split; -@modal-footer-border-style: @border-style-base; -@modal-footer-padding-vertical: 10px; -@modal-footer-padding-horizontal: 16px; -@modal-footer-border-width: @border-width-base; -@modal-mask-bg: fade(@black, 45%); -@modal-confirm-body-padding: 32px 32px 24px; -@modal-confirm-title-font-size: @font-size-lg; -@modal-border-radius: @border-radius-base; - -// Progress -// -- -@progress-default-color: @processing-color; -@progress-remaining-color: rgba(0, 0, 0, 0.04); -@progress-info-text-color: @progress-text-color; -@progress-radius: 100px; -@progress-steps-item-bg: #f3f3f3; -@progress-text-font-size: 1em; -@progress-text-color: @text-color; // This is for circle text color, should be renamed better -@progress-circle-text-font-size: 1em; -// Menu -// --- -@menu-inline-toplevel-item-height: 40px; -@menu-item-height: 40px; -@menu-item-group-height: @line-height-base; -@menu-collapsed-width: 80px; -@menu-bg: @component-background; -@menu-popup-bg: @component-background; -@menu-item-color: @text-color; -@menu-inline-submenu-bg: @background-color-light; -@menu-highlight-color: @primary-color; -@menu-highlight-danger-color: @error-color; -@menu-item-active-bg: @primary-1; -@menu-item-active-danger-bg: @red-1; -@menu-item-active-border-width: 3px; -@menu-item-group-title-color: @text-color-secondary; -@menu-item-vertical-margin: 4px; -@menu-item-font-size: @font-size-base; -@menu-item-boundary-margin: 8px; -@menu-item-padding-horizontal: 20px; -@menu-item-padding: 0 @menu-item-padding-horizontal; -@menu-horizontal-line-height: 46px; -@menu-icon-margin-right: 10px; -@menu-icon-size: @menu-item-font-size; -@menu-icon-size-lg: @font-size-lg; -@menu-item-group-title-font-size: @menu-item-font-size; - -// dark theme -@menu-dark-color: @text-color-secondary-dark; -@menu-dark-danger-color: @error-color; -@menu-dark-bg: @layout-header-background; -@menu-dark-arrow-color: #fff; -@menu-dark-inline-submenu-bg: #000c17; -@menu-dark-highlight-color: #fff; -@menu-dark-item-active-bg: @primary-color; -@menu-dark-item-active-danger-bg: @error-color; -@menu-dark-selected-item-icon-color: @white; -@menu-dark-selected-item-text-color: @white; -@menu-dark-item-hover-bg: transparent; -// Spin -// --- -@spin-dot-size-sm: 14px; -@spin-dot-size: 20px; -@spin-dot-size-lg: 32px; - -// Table -// -- -@table-bg: @component-background; -@table-header-bg: @background-color-light; -@table-header-color: @heading-color; -@table-header-sort-bg: @background-color-base; -@table-body-sort-bg: #fafafa; -@table-row-hover-bg: @background-color-light; -@table-selected-row-color: inherit; -@table-selected-row-bg: @primary-1; -@table-body-selected-sort-bg: @table-selected-row-bg; -@table-selected-row-hover-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'; -@table-expanded-row-bg: #fbfbfb; -@table-padding-vertical: 16px; -@table-padding-horizontal: 16px; -@table-padding-vertical-md: (@table-padding-vertical * 3 / 4); -@table-padding-horizontal-md: (@table-padding-horizontal / 2); -@table-padding-vertical-sm: (@table-padding-vertical / 2); -@table-padding-horizontal-sm: (@table-padding-horizontal / 2); -@table-border-color: @border-color-split; -@table-border-radius-base: @border-radius-base; -@table-footer-bg: @background-color-light; -@table-footer-color: @heading-color; -@table-header-bg-sm: @table-header-bg; -@table-font-size: @font-size-base; -@table-font-size-md: @table-font-size; -@table-font-size-sm: @table-font-size; -@table-header-cell-split-color: rgba(0, 0, 0, 0.06); -// Sorter -// Legacy: `table-header-sort-active-bg` is used for hover not real active -@table-header-sort-active-bg: rgba(0, 0, 0, 0.04); -@table-fixed-header-sort-active-bg: hsv(0, 0, 96%); - -// Filter -@table-header-filter-active-bg: rgba(0, 0, 0, 0.04); -@table-filter-btns-bg: inherit; -@table-filter-dropdown-bg: @component-background; -@table-expand-icon-bg: @component-background; -@table-selection-column-width: 32px; -// Sticky -@table-sticky-scroll-bar-bg: fade(#000, 35%); -@table-sticky-scroll-bar-radius: 4px; - -// Tag -// -- -@tag-border-radius: @border-radius-base; -@tag-default-bg: @background-color-light; -@tag-default-color: @text-color; -@tag-font-size: @font-size-sm; -@tag-line-height: 20px; - -// TimePicker -// --- -@picker-bg: @component-background; -@picker-basic-cell-hover-color: @item-hover-bg; -@picker-basic-cell-active-with-range-color: @primary-1; -@picker-basic-cell-hover-with-range-color: ~'var(--@{ant-prefix}-primary-color-deprecated-l-35)'; -@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04); -@picker-border-color: @border-color-split; -@picker-date-hover-range-border-color: ~'var(--@{ant-prefix}-primary-color-deprecated-l-20)'; -@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; -@picker-time-panel-column-width: 56px; -@picker-time-panel-column-height: 224px; -@picker-time-panel-cell-height: 28px; -@picker-panel-cell-height: 24px; -@picker-panel-cell-width: 36px; -@picker-text-height: 40px; -@picker-panel-without-time-cell-height: 66px; - -// Calendar -// --- -@calendar-bg: @component-background; -@calendar-input-bg: @input-bg; -@calendar-border-color: @border-color-inverse; -@calendar-item-active-bg: @item-active-bg; -@calendar-column-active-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-f-30)'; -@calendar-full-bg: @calendar-bg; -@calendar-full-panel-bg: @calendar-full-bg; - -// Carousel -// --- -@carousel-dot-width: 16px; -@carousel-dot-height: 3px; -@carousel-dot-active-width: 24px; - -// Badge -// --- -@badge-height: 20px; -@badge-height-sm: 14px; -@badge-dot-size: 6px; -@badge-font-size: @font-size-sm; -@badge-font-size-sm: @font-size-sm; -@badge-font-weight: normal; -@badge-status-size: 6px; -@badge-text-color: @component-background; -@badge-color: @highlight-color; - -// Rate -// --- -@rate-star-color: @yellow-6; -@rate-star-bg: @border-color-split; -@rate-star-size: 20px; -@rate-star-hover-scale: scale(1.1); - -// Card -// --- -@card-head-color: @heading-color; -@card-head-background: transparent; -@card-head-font-size: @font-size-lg; -@card-head-font-size-sm: @font-size-base; -@card-head-padding: 16px; -@card-head-padding-sm: (@card-head-padding / 2); -@card-head-height: 48px; -@card-head-height-sm: 36px; -@card-inner-head-padding: 12px; -@card-padding-base: 24px; -@card-padding-base-sm: (@card-padding-base / 2); -@card-actions-background: @component-background; -@card-actions-li-margin: 12px 0; -@card-skeleton-bg: #cfd8dc; -@card-background: @component-background; -@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), - 0 5px 12px 4px rgba(0, 0, 0, 0.09); -@card-radius: @border-radius-base; -@card-head-tabs-margin-bottom: -17px; -@card-head-extra-color: @text-color; - -// Comment -// --- -@comment-bg: inherit; -@comment-padding-base: @padding-md 0; -@comment-nest-indent: 44px; -@comment-font-size-base: @font-size-base; -@comment-font-size-sm: @font-size-sm; -@comment-author-name-color: @text-color-secondary; -@comment-author-time-color: #ccc; -@comment-action-color: @text-color-secondary; -@comment-action-hover-color: #595959; -@comment-actions-margin-bottom: inherit; -@comment-actions-margin-top: @margin-sm; -@comment-content-detail-p-margin-bottom: inherit; - -// Tabs -// --- -@tabs-card-head-background: @background-color-light; -@tabs-card-height: 40px; -@tabs-card-active-color: @primary-color; -@tabs-card-horizontal-padding: ( - (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 - ) - @border-width-base @padding-md; -@tabs-card-horizontal-padding-sm: 6px @padding-md; -@tabs-card-horizontal-padding-lg: 7px @padding-md 6px; -@tabs-title-font-size: @font-size-base; -@tabs-title-font-size-lg: @font-size-lg; -@tabs-title-font-size-sm: @font-size-base; -@tabs-ink-bar-color: @primary-color; -@tabs-bar-margin: 0 0 @margin-md 0; -@tabs-horizontal-gutter: 32px; -@tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; -@tabs-horizontal-margin-rtl: 0 0 0 32px; -@tabs-horizontal-padding: @padding-sm 0; -@tabs-horizontal-padding-lg: @padding-md 0; -@tabs-horizontal-padding-sm: @padding-xs 0; -@tabs-vertical-padding: @padding-xs @padding-lg; -@tabs-vertical-margin: @margin-md 0 0 0; -@tabs-scrolling-size: 32px; -@tabs-highlight-color: @primary-color; -@tabs-hover-color: @primary-5; -@tabs-active-color: @primary-7; -@tabs-card-gutter: 2px; -@tabs-card-tab-active-border-top: 2px solid transparent; - -// BackTop -// --- -@back-top-color: #fff; -@back-top-bg: @text-color-secondary; -@back-top-hover-bg: @text-color; - -// Avatar -// --- -@avatar-size-base: 32px; -@avatar-size-lg: 40px; -@avatar-size-sm: 24px; -@avatar-font-size-base: 18px; -@avatar-font-size-lg: 24px; -@avatar-font-size-sm: 14px; -@avatar-bg: #ccc; -@avatar-color: #fff; -@avatar-border-radius: @border-radius-base; -@avatar-group-overlapping: -8px; -@avatar-group-space: 3px; -@avatar-group-border-color: #fff; - -// Switch -// --- -@switch-height: 22px; -@switch-sm-height: 16px; -@switch-min-width: 44px; -@switch-sm-min-width: 28px; -@switch-disabled-opacity: 0.4; -@switch-color: @primary-color; -@switch-bg: @component-background; -@switch-shadow-color: fade(#00230b, 20%); -@switch-padding: 2px; -@switch-inner-margin-min: ceil(@switch-height * 0.3); -@switch-inner-margin-max: ceil(@switch-height * 1.1); -@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3); -@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1); - -// Pagination -// --- -@pagination-item-bg: @component-background; -@pagination-item-size: @height-base; -@pagination-item-size-sm: 24px; -@pagination-font-family: @font-family; -@pagination-font-weight-active: 500; -@pagination-item-bg-active: @component-background; -@pagination-item-link-bg: @component-background; -@pagination-item-disabled-color-active: @disabled-color; -@pagination-item-disabled-bg-active: @disabled-active-bg; -@pagination-item-input-bg: @component-background; -@pagination-mini-options-size-changer-top: 0px; - -// PageHeader -// --- -@page-header-padding: @padding-lg; -@page-header-padding-vertical: @padding-md; -@page-header-padding-breadcrumb: @padding-sm; -@page-header-content-padding-vertical: @padding-sm; -@page-header-back-color: #000; -@page-header-ghost-bg: inherit; -@page-header-heading-title: @heading-4-size; -@page-header-heading-sub-title: 14px; -@page-header-tabs-tab-font-size: 16px; - -// Breadcrumb -// --- -@breadcrumb-base-color: @text-color-secondary; -@breadcrumb-last-item-color: @text-color; -@breadcrumb-font-size: @font-size-base; -@breadcrumb-icon-font-size: @font-size-base; -@breadcrumb-link-color: @text-color-secondary; -@breadcrumb-link-color-hover: @text-color; -@breadcrumb-separator-color: @text-color-secondary; -@breadcrumb-separator-margin: 0 @padding-xs; - -// Slider -// --- -@slider-margin: 10px 6px 10px; -@slider-rail-background-color: @background-color-base; -@slider-rail-background-color-hover: #e1e1e1; -@slider-track-background-color: @primary-3; -@slider-track-background-color-hover: @primary-4; -@slider-handle-border-width: 2px; -@slider-handle-background-color: @component-background; -@slider-handle-color: @primary-3; -@slider-handle-color-hover: @primary-4; -@slider-handle-color-focus: ~'var(--@{ant-prefix}-primary-color-deprecated-t-20)'; -@slider-handle-color-focus-shadow: ~'var(--@{ant-prefix}-primary-color-deprecated-f-12)'; -@slider-handle-color-tooltip-open: @primary-color; -@slider-handle-size: 14px; -@slider-handle-margin-top: -5px; -@slider-handle-margin-left: -5px; -@slider-handle-shadow: 0; -@slider-dot-border-color: @border-color-split; -@slider-dot-border-color-active: ~'var(--@{ant-prefix}-primary-color-deprecated-t-50)'; -@slider-disabled-color: @disabled-color; -@slider-disabled-background-color: @component-background; - -// Tree -// --- -@tree-bg: @component-background; -@tree-title-height: 24px; -@tree-child-padding: 18px; -@tree-directory-selected-color: #fff; -@tree-directory-selected-bg: @primary-color; -@tree-node-hover-bg: @item-hover-bg; -@tree-node-selected-bg: @primary-2; - -// Collapse -// --- -@collapse-header-padding: @padding-sm @padding-md; -@collapse-header-padding-extra: 40px; -@collapse-header-bg: @background-color-light; -@collapse-content-padding: @padding-md; -@collapse-content-bg: @component-background; -@collapse-header-arrow-left: 16px; - -// Skeleton -// --- -@skeleton-color: rgba(190, 190, 190, 0.2); -@skeleton-to-color: shade(@skeleton-color, 5%); -@skeleton-paragraph-margin-top: 28px; -@skeleton-paragraph-li-margin-top: @margin-md; -@skeleton-paragraph-li-height: 16px; -@skeleton-title-height: 16px; -@skeleton-title-paragraph-margin-top: @margin-lg; - -// Transfer -// --- -@transfer-header-height: 40px; -@transfer-item-height: @height-base; -@transfer-disabled-bg: @disabled-bg; -@transfer-list-height: 200px; -@transfer-item-hover-bg: @item-hover-bg; -@transfer-item-selected-hover-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'; -@transfer-item-padding-vertical: 6px; -@transfer-list-search-icon-top: 12px; - -// Message -// --- -@message-notice-content-padding: 10px 16px; -@message-notice-content-bg: @component-background; -// Motion -// --- -@wave-animation-width: 6px; - -// Alert -// --- -@alert-success-border-color: @success-color-deprecated-border; -@alert-success-bg-color: @success-color-deprecated-bg; -@alert-success-icon-color: @success-color; -@alert-info-border-color: @info-color-deprecated-border; -@alert-info-bg-color: @info-color-deprecated-bg; -@alert-info-icon-color: @info-color; -@alert-warning-border-color: @warning-color-deprecated-border; -@alert-warning-bg-color: @warning-color-deprecated-bg; -@alert-warning-icon-color: @warning-color; -@alert-error-border-color: @error-color-deprecated-border; -@alert-error-bg-color: @error-color-deprecated-bg; -@alert-error-icon-color: @error-color; -@alert-message-color: @heading-color; -@alert-text-color: @text-color; -@alert-close-color: @text-color-secondary; -@alert-close-hover-color: @icon-color-hover; -@alert-padding-vertical: @padding-xs; -@alert-padding-horizontal: @padding-md - 1px; -@alert-no-icon-padding-vertical: @padding-xs; -@alert-with-description-no-icon-padding-vertical: @padding-md - 1px; -@alert-with-description-padding-vertical: @padding-md - 1px; -@alert-with-description-padding: @alert-with-description-padding-vertical 15px - @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size; -@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2); -@alert-with-description-icon-size: 24px; - -// List -// --- -@list-header-background: transparent; -@list-footer-background: transparent; -@list-empty-text-padding: @padding-md; -@list-item-padding: @padding-sm 0; -@list-item-padding-sm: @padding-xs @padding-md; -@list-item-padding-lg: 16px 24px; -@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; -@list-item-meta-description-font-size: @font-size-base; - -// Statistic -// --- -@statistic-title-font-size: @font-size-base; -@statistic-content-font-size: 24px; -@statistic-unit-font-size: 24px; -@statistic-font-family: @font-family; - -// Drawer -// --- -@drawer-header-padding: @padding-md @padding-lg; -@drawer-body-padding: @padding-lg; -@drawer-bg: @component-background; -@drawer-footer-padding-vertical: @modal-footer-padding-vertical; -@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal; -@drawer-header-close-size: 56px; -@drawer-title-font-size: @font-size-lg; -@drawer-title-line-height: 22px; - -// Timeline -// --- -@timeline-width: 2px; -@timeline-color: @border-color-split; -@timeline-dot-border-width: 2px; -@timeline-dot-color: @primary-color; -@timeline-dot-bg: @component-background; -@timeline-item-padding-bottom: 20px; - -// Typography -// --- -@typography-title-font-weight: 600; -@typography-title-margin-top: 1.2em; -@typography-title-margin-bottom: 0.5em; - -// Upload -// --- -@upload-actions-color: @text-color-secondary; - -// Steps -// --- -@process-tail-color: @border-color-split; -@steps-nav-arrow-color: fade(@black, 25%); -@steps-background: @component-background; -@steps-icon-size: 32px; -@steps-icon-custom-size: @steps-icon-size; -@steps-icon-custom-top: 0px; -@steps-icon-custom-font-size: 24px; -@steps-icon-top: -0.5px; -@steps-icon-font-size: @font-size-lg; -@steps-icon-margin: 0 8px 0 0; -@steps-title-line-height: @height-base; -@steps-small-icon-size: 24px; -@steps-small-icon-margin: 0 8px 0 0; -@steps-dot-size: 8px; -@steps-dot-top: 2px; -@steps-current-dot-size: 10px; -@steps-description-max-width: 140px; -@steps-nav-content-max-width: auto; -@steps-vertical-icon-width: 16px; -@steps-vertical-tail-width: 16px; -@steps-vertical-tail-width-sm: 12px; - -// Notification -// --- -@notification-bg: @component-background; -@notification-padding-vertical: 16px; -@notification-padding-horizontal: 24px; - -// Result -// --- -@result-title-font-size: 24px; -@result-subtitle-font-size: @font-size-base; -@result-icon-font-size: 72px; -@result-extra-margin: 24px 0 0 0; - -// Image -// --- -@image-size-base: 48px; -@image-font-size-base: 24px; -@image-bg: #f5f5f5; -@image-color: #fff; -@image-mask-font-size: 16px; -@image-preview-operation-size: 18px; -@image-preview-operation-color: @text-color-dark; -@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%); - -// Segmented -// --- -@segmented-bg: fade(@black, 4%); -@segmented-hover-bg: fade(@black, 6%); -@segmented-selected-bg: @white; -@segmented-label-color: fade(@black, 65%); -@segmented-label-hover-color: #262626; diff --git a/site/theme/style/variable.less b/site/theme/style/variable.less deleted file mode 100644 index 6c702934cc..0000000000 --- a/site/theme/style/variable.less +++ /dev/null @@ -1,4 +0,0 @@ -@root-entry-name: variable; - -@import './themes/variable.less'; -@import './core/index'; diff --git a/site/theme/template/AppShell.tsx b/site/theme/template/AppShell.tsx deleted file mode 100644 index aa7de688eb..0000000000 --- a/site/theme/template/AppShell.tsx +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Empty component for app shell - * - * See https://github.com/NekR/offline-plugin/blob/master/docs/app-shell.md - */ -import React from 'react'; - -const AppShell: React.FC = () =>
; - -export default AppShell; diff --git a/site/theme/template/BrowserFrame.tsx b/site/theme/template/BrowserFrame.tsx deleted file mode 100644 index dd42b1aaf2..0000000000 --- a/site/theme/template/BrowserFrame.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -interface BrowserFrameProps { - children?: React.ReactNode; -} - -const BrowserFrame: React.FC = ({ children }) => ( -
{children}
-); - -export default BrowserFrame; diff --git a/site/theme/template/Color/ColorBlock.jsx b/site/theme/template/Color/ColorBlock.jsx deleted file mode 100644 index 282c6a6ca0..0000000000 --- a/site/theme/template/Color/ColorBlock.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { Component } from 'react'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import { message } from 'antd'; - -export default class ColorBlock extends Component { - getTextStyle() { - const { color, index, dark } = this.props; - const colorMap = { - default: ['#fff', 'unset'], - dark: ['#314659', '#fff'], - }; - const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default; - return { - background: color, - color: index > 5 ? lastColor : firstColor, - fontWeight: index === 6 ? 'bold' : 'normal', - }; - } - - onCopied = () => { - const { color } = this.props; - message.success(`Copied: ${color}`); - }; - - render() { - const { color, index } = this.props; - return ( - -
- color-{index} - {color.toLowerCase()} -
- - ); - } -} diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx deleted file mode 100644 index 3030210de0..0000000000 --- a/site/theme/template/Color/ColorPaletteTool.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { Component } from 'react'; -import { FormattedMessage } from 'react-intl'; -import ColorPicker from './ColorPicker'; -import ColorPatterns from './ColorPatterns'; - -const primaryMinSaturation = 70; // 主色推荐最小饱和度 -const primaryMinBrightness = 70; // 主色推荐最小亮度 - -export default class ColorPaletteTool extends Component { - state = { - primaryColor: '#1890ff', - primaryColorInstance: null, - }; - - handleChangeColor = (e, color) => { - const value = e.target ? e.target.value : e; - this.setState({ - primaryColor: value, - primaryColorInstance: color, - }); - }; - - renderColorValidation() { - const { primaryColorInstance } = this.state; - let text = ''; - if (primaryColorInstance) { - if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${( - primaryColorInstance.hsv.s * 100 - ).toFixed(2)}）`; - } - if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${( - primaryColorInstance.hsv.v * 100 - ).toFixed(2)}）`; - } - } - return {text.trim()}; - } - - render() { - const { primaryColor } = this.state; - return ( -
-
- -
-
- -
-
- - - - {primaryColor} - {this.renderColorValidation()} -
-
- ); - } -} diff --git a/site/theme/template/Color/ColorPaletteToolDark.jsx b/site/theme/template/Color/ColorPaletteToolDark.jsx deleted file mode 100644 index 46ea8cedaa..0000000000 --- a/site/theme/template/Color/ColorPaletteToolDark.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import React, { Component } from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Row, Col } from 'antd'; -import ColorPicker from './ColorPicker'; -import ColorPatterns from './ColorPatterns'; - -const primaryMinSaturation = 70; // 主色推荐最小饱和度 -const primaryMinBrightness = 70; // 主色推荐最小亮度 - -export default class ColorPaletteTool extends Component { - state = { - primaryColor: '#1890ff', - backgroundColor: '#141414', - primaryColorInstance: null, - }; - - handleChangeColor = (e, color) => { - const value = e.target ? e.target.value : e; - this.setState({ - primaryColor: value, - primaryColorInstance: color, - }); - }; - - handleChangeBackgroundColor = e => { - const value = e.target ? e.target.value : e; - this.setState({ - backgroundColor: value, - }); - }; - - renderColorValidation() { - const { primaryColorInstance } = this.state; - let text = ''; - if (primaryColorInstance) { - if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${( - primaryColorInstance.hsv.s * 100 - ).toFixed(2)}）`; - } - if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${( - primaryColorInstance.hsv.v * 100 - ).toFixed(2)}）`; - } - } - return ( - - {text.trim()} - - ); - } - - render() { - const { primaryColor, backgroundColor } = this.state; - return ( -
-
- -
-
- -
-
- -
- - - - - - - {primaryColor} - - - - - -
- -
- - - - - - - {backgroundColor} - - - - - - {this.renderColorValidation()} - - - ); - } -} diff --git a/site/theme/template/Color/ColorPalettes.jsx b/site/theme/template/Color/ColorPalettes.jsx deleted file mode 100644 index a2c2869f01..0000000000 --- a/site/theme/template/Color/ColorPalettes.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import cls from 'classnames'; -import Palette from './Palette'; - -const ColorPalettes = props => { - const { dark } = props; - - const colors = [ - { - name: 'red', - english: 'Dust Red', - chinese: '薄暮', - description: '斗志、奔放', - }, - { - name: 'volcano', - english: 'Volcano', - chinese: '火山', - description: '醒目、澎湃', - }, - { - name: 'orange', - english: 'Sunset Orange', - chinese: '日暮', - description: '温暖、欢快', - }, - { - name: 'gold', - english: 'Calendula Gold', - chinese: '金盏花', - description: '活力、积极', - }, - { - name: 'yellow', - english: 'Sunrise Yellow', - chinese: '日出', - description: '出生、阳光', - }, - { - name: 'lime', - english: 'Lime', - chinese: '青柠', - description: '自然、生机', - }, - { - name: 'green', - english: 'Polar Green', - chinese: '极光绿', - description: '健康、创新', - }, - { - name: 'cyan', - english: 'Cyan', - chinese: '明青', - description: '希望、坚强', - }, - { - name: 'blue', - english: 'Daybreak Blue', - chinese: '拂晓蓝', - description: '包容、科技、普惠', - }, - { - name: 'geekblue', - english: 'Geek Blue', - chinese: '极客蓝', - description: '探索、钻研', - }, - { - name: 'purple', - english: 'Golden Purple', - chinese: '酱紫', - description: '优雅、浪漫', - }, - { - name: 'magenta', - english: 'Magenta', - chinese: '法式洋红', - description: '明快、感性', - }, - ]; - const colorCls = cls('color-palettes', { - 'color-palettes-dark': !!dark, - }); - return ( -
- {colors.map(color => ( - - ))} -
- ); -}; - -export default ColorPalettes; diff --git a/site/theme/template/Color/ColorPatterns.jsx b/site/theme/template/Color/ColorPatterns.jsx deleted file mode 100644 index 6989b20215..0000000000 --- a/site/theme/template/Color/ColorPatterns.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { generate } from '@ant-design/colors'; -import uniq from 'lodash/uniq'; -import ColorBlock from './ColorBlock'; - -export default function ColorPatterns({ color, dark, backgroundColor }) { - const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); -} diff --git a/site/theme/template/Color/ColorPicker.tsx b/site/theme/template/Color/ColorPicker.tsx deleted file mode 100644 index 5e7fe77f5b..0000000000 --- a/site/theme/template/Color/ColorPicker.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import React, { Component } from 'react'; -import { SketchPicker } from 'react-color'; - -const noop = () => {}; - -interface ColorPickerProps { - color?: string; - small: boolean; - position: string; - presetColors?: string[]; - onChange: (hex: string, color: { hex: string }) => void; - onChangeComplete: (hex: string) => void; -} - -export default class ColorPicker extends Component { - static getDerivedStateFromProps(props: ColorPickerProps) { - if ('color' in props) { - return { - color: props.color, - }; - } - return null; - } - - state = { - displayColorPicker: false, - color: undefined, - }; - - handleClick = () => { - const { displayColorPicker } = this.state; - this.setState({ displayColorPicker: !displayColorPicker }); - }; - - handleClose = () => { - this.setState({ displayColorPicker: false }); - }; - - handleChange = (color: { hex: string }) => { - const { onChange = noop } = this.props; - this.setState({ color: color.hex }); - onChange(color.hex, color); - }; - - handleChangeComplete = (color: { hex: string }) => { - const { onChangeComplete = noop } = this.props; - this.setState({ color: color.hex }); - onChangeComplete(color.hex); - }; - - render() { - const { small, position = 'bottom', presetColors } = this.props; - const { color, displayColorPicker } = this.state; - const width = small ? 80 : 120; - const styles: Record = { - color: { - width: `${width}px`, - height: small ? '16px' : '24px', - borderRadius: '2px', - background: color, - }, - swatch: { - padding: '4px', - background: '#fff', - borderRadius: '2px', - boxShadow: '0 0 0 1px rgba(0,0,0,.1)', - display: 'inline-block', - cursor: 'pointer', - }, - popover: { - position: 'absolute', - zIndex: 10, - }, - cover: { - position: 'fixed', - top: '0px', - right: '0px', - bottom: '0px', - left: '0px', - }, - wrapper: { - position: 'inherit', - zIndex: 100, - }, - }; - - if (position === 'top') { - styles.wrapper.transform = `translate(calc(-100% + ${width + 8}px), -100%)`; - styles.wrapper.paddingBottom = 8; - } - - const swatch = ( -
-
-
- ); - const picker = displayColorPicker ? ( -
-
-
- -
-
- ) : null; - - if (position === 'top') { - return ( -
- {picker} - {swatch} -
- ); - } - return ( -
- {swatch} - {picker} -
- ); - } -} diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx deleted file mode 100644 index cfff5d67ca..0000000000 --- a/site/theme/template/Color/Palette.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; -import { message } from 'antd'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import { presetDarkPalettes } from '@ant-design/colors'; - -const rgbToHex = rgbString => { - const rgb = rgbString.match(/\d+/g); - let r = parseInt(rgb[0], 10).toString(16); - let g = parseInt(rgb[1], 10).toString(16); - let b = parseInt(rgb[2], 10).toString(16); - r = r.length === 1 ? `0${r}` : r; - g = g.length === 1 ? `0${g}` : g; - b = b.length === 1 ? `0${b}` : b; - return `#${r}${g}${b}`; -}; - -export default class Palette extends React.Component { - componentDidMount() { - this.hexColors = {}; - Object.keys(this.colorNodes).forEach(key => { - const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; - if (computedColor.includes('rgba')) { - this.hexColors[key] = computedColor; - } else { - this.hexColors[key] = rgbToHex(computedColor); - } - }); - this.forceUpdate(); - } - - render() { - this.colorNodes = this.colorNodes || {}; - const { - showTitle, - direction, - dark, - color: { name, description, english, chinese, count = 10 }, - } = this.props; - const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; - const colors = []; - const colorName = `${english} / ${chinese}`; - const colorPaletteMap = { - dark: ['#fff', 'unset'], - default: ['rgba(0,0,0,0.85)', '#fff'], - }; - const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default; - for (let i = 1; i <= count; i += 1) { - const colorText = `${name}-${i}`; - const defaultBgStyle = dark ? presetDarkPalettes[name][i - 1] : ''; - colors.push( - message.success(`@${colorText} copied: ${this.hexColors[colorText]}`)} - key={colorText} - > -
{ - this.colorNodes[`${name}-${i}`] = node; - }} - className={`main-color-item palette-${name}-${i}`} - style={{ - color: (name === 'yellow' ? i > 6 : i > 5) ? firstColor : lastColor, - fontWeight: i === 6 ? 'bold' : 'normal', - backgroundColor: defaultBgStyle, - }} - title="click to copy color" - > - {colorText} - {this.hexColors ? ( - {this.hexColors[colorText]} - ) : null} -
- , - ); - } - return ( -
- {showTitle && ( -
- {colorName} - {description} -
- )} -
{colors}
-
- ); - } -} diff --git a/site/theme/template/Content/Article.tsx b/site/theme/template/Content/Article.tsx deleted file mode 100644 index 0796ec2804..0000000000 --- a/site/theme/template/Content/Article.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React, { Children, cloneElement } from 'react'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import { getChildren } from 'jsonml.js/lib/utils'; -import { Timeline, Alert, Affix } from 'antd'; -import EditButton from './EditButton'; -import { getMetaDescription } from '../utils'; -import WrapHelmet from '../Components/Helmet'; - -interface LocaleString { - [locale: string]: string; -} - -export interface ArticleProps { - titleRegionClassName?: string; - location: { - pathname: string; - }; - content: { - meta: { - toc?: boolean; - timeline?: boolean; - title: string | LocaleString; - subtitle?: string; - filename?: string; - }; - description?: any[]; - toc: string[]; - content: any[]; - api?: any; - }; - intl: { locale: string }; - utils: { - toReactComponent: (content: any[]) => React.ReactElement; - }; -} - -class Article extends React.Component { - shouldComponentUpdate(nextProps: ArticleProps) { - const { location } = this.props; - const { location: nextLocation } = nextProps; - - if (nextLocation.pathname === location.pathname) { - return false; - } - return true; - } - - // eslint-disable-next-line class-methods-use-this - onResourceClick: React.MouseEventHandler = event => { - const { target } = event as unknown as { target: HTMLAnchorElement }; - if (!window.gtag) { - return; - } - const cardNode = target.closest('.resource-card') as HTMLAnchorElement; - if (cardNode) { - window.gtag('event', 'resource', { - event_category: 'Download', - event_label: cardNode.href, - }); - } - if ( - window.location.href.indexOf('docs/react/recommendation') > 0 && - target.matches('.markdown > table td > a[href]') - ) { - window.gtag('event', 'recommendation', { - event_category: 'Click', - event_label: target.href, - }); - } - }; - - getArticle(article: React.ReactElement) { - const { content } = this.props; - const { meta } = content; - if (!meta.timeline) { - return article; - } - const timelineItems = []; - let temp: React.ReactNode[] = []; - let i = 1; - Children.forEach(article.props.children, child => { - if (child.type === 'h2' && temp.length > 0) { - timelineItems.push({temp}); - temp = []; - i += 1; - } - temp.push(child); - }); - if (temp.length > 0) { - timelineItems.push({temp}); - } - return cloneElement(article, { - children: {timelineItems}, - }); - } - - render() { - const { - titleRegionClassName, - content, - intl: { locale }, - utils, - } = this.props; - const { meta, description } = content; - const { title, subtitle, filename } = meta; - const isNotTranslated = locale === 'en-US' && typeof title === 'object'; - const helmetTitle = `${(title as LocaleString)[locale] || title} - Ant Design`; - const helmetDesc = getMetaDescription(description); - const contentChild = getMetaDescription(getChildren(content.content)); - const metaDesc = helmetDesc || contentChild; - - return ( -
- - {helmetTitle && {helmetTitle}} - {helmetTitle && } - {metaDesc && } - - {isNotTranslated && ( - - This article has not been translated yet. Wanna help us out?  - - See this issue on GitHub. - - - } - /> - )} -
-

- {typeof title === 'object' && title ? title[locale] : title} - {!subtitle || locale === 'en-US' ? null : {subtitle}} - } - filename={filename} - /> -

- {!description - ? null - : utils.toReactComponent( - ['section', { className: 'markdown' }].concat(getChildren(description)), - )} -
- {!content.toc || content.toc.length <= 1 || meta.toc === false ? null : ( - - {utils.toReactComponent(['ul', { className: 'toc' }].concat(getChildren(content.toc)))} - - )} - {this.getArticle( - utils.toReactComponent( - ['section', { className: 'markdown' }].concat(getChildren(content.content)), - ), - )} - {utils.toReactComponent( - [ - 'section', - { - className: 'markdown api-container', - }, - ].concat(getChildren(content.api || ['placeholder'])), - )} -
- ); - } -} - -export default injectIntl(Article as any) as any as React.ComponentClass; diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx deleted file mode 100644 index c2d0a2dd18..0000000000 --- a/site/theme/template/Content/ComponentDoc.jsx +++ /dev/null @@ -1,243 +0,0 @@ -import React from 'react'; -import { Helmet } from 'react-helmet-async'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import classNames from 'classnames'; -import { Row, Col, Affix, Tooltip } from 'antd'; -import { getChildren } from 'jsonml.js/lib/utils'; -import { CodeFilled, CodeOutlined, BugFilled, BugOutlined } from '@ant-design/icons'; -import Demo from './Demo'; -import EditButton from './EditButton'; -import { ping, getMetaDescription } from '../utils'; - -const ComponentInMarkdown = React.memo(({ content, utils }) => - utils.toReactComponent(['section', { className: 'markdown' }].concat(getChildren(content))), -); - -class ComponentDoc extends React.Component { - state = { - expandAll: false, - visibleAll: process.env.NODE_ENV !== 'production', - showRiddleButton: false, - }; - - componentDidMount() { - const { demos = {}, location = {} } = this.props; - if (location.hash) { - const demoKey = location.hash.split('-demo-')[1]; - const demoData = demos[demoKey]; - if (demoData && demoData.meta && demoData.meta.debug) { - this.setState({ visibleAll: true }); - } - } - this.pingTimer = ping(status => { - if (status !== 'timeout' && status !== 'error') { - this.setState({ - showRiddleButton: true, - }); - } - }); - } - - shouldComponentUpdate(nextProps, nextState) { - const { location, theme } = this.props; - const { location: nextLocation, theme: nextTheme } = nextProps; - const { expandAll, visibleAll, showRiddleButton, react17Demo } = this.state; - const { - expandAll: nextExpandAll, - visibleAll: nextVisibleAll, - showRiddleButton: nextShowRiddleButton, - react17Demo: nextReact17Demo, - } = nextState; - - if ( - nextLocation.pathname === location.pathname && - expandAll === nextExpandAll && - showRiddleButton === nextShowRiddleButton && - theme === nextTheme && - visibleAll === nextVisibleAll && - showRiddleButton === nextShowRiddleButton && - react17Demo === nextReact17Demo - ) { - return false; - } - return true; - } - - componentWillUnmount() { - clearTimeout(this.pingTimer); - } - - handleExpandToggle = () => { - const { expandAll } = this.state; - this.setState({ - expandAll: !expandAll, - }); - }; - - handleVisibleToggle = () => { - const { visibleAll } = this.state; - this.setState({ - visibleAll: !visibleAll, - }); - }; - - handleDemoVersionToggle = () => { - const { react17Demo } = this.state; - this.setState({ - react17Demo: !react17Demo, - }); - }; - - render() { - const { - doc, - location, - intl: { locale }, - utils, - theme, - setIframeTheme, - demos, - } = this.props; - const { content, meta } = doc; - const demoValues = Object.keys(demos).map(key => demos[key]); - const { expandAll, visibleAll, showRiddleButton } = this.state; - const isSingleCol = meta.cols === 1; - const leftChildren = []; - const rightChildren = []; - let showedDemo = demoValues.some(demo => demo.meta.only) - ? demoValues.filter(demo => demo.meta.only) - : demoValues.filter(demo => demo.preview); - if (!visibleAll) { - showedDemo = showedDemo.filter(item => !item.meta.debug); - } - showedDemo - .sort((a, b) => a.meta.order - b.meta.order) - .forEach((demoData, index) => { - const demoElem = ( - - ); - if (index % 2 === 0 || isSingleCol) { - leftChildren.push(demoElem); - } else { - rightChildren.push(demoElem); - } - }); - const expandTriggerClass = classNames('code-box-expand-trigger', { - 'code-box-expand-trigger-active': expandAll, - }); - - const jumper = showedDemo.map(demo => { - const { title } = demo.meta; - const localizeTitle = title[locale] || title; - return ( -
  • - {localizeTitle} -
    • - ); - }); - - const { title, subtitle, filename } = meta; - const helmetTitle = `${subtitle || ''} ${title[locale] || title} - Ant Design`; - const contentChild = getMetaDescription(getChildren(content)); - - return ( -
    - - {helmetTitle} - - {contentChild && } - - -
      - {jumper} - {doc.api && ( -
    • - API -
      • - )} -
    -     -
    -

    - {title[locale] || title} - {!subtitle ? null : {subtitle}} - } - filename={filename} - /> -

    - -

    - - - - } - > - {expandAll ? ( - - ) : ( - - )} - - - } - > - {visibleAll ? ( - - ) : ( - - )} - - -

    -
    - -
    - {leftChildren} - - {isSingleCol ? null : ( - - {rightChildren} - - )} - - {utils.toReactComponent( - [ - 'section', - { - className: 'markdown api-container', - }, - ].concat(getChildren(doc.api || ['placeholder'])), - )} - - ); - } -} - -export default injectIntl(ComponentDoc); diff --git a/site/theme/template/Content/ComponentOverview.jsx b/site/theme/template/Content/ComponentOverview.jsx deleted file mode 100644 index 68810de31d..0000000000 --- a/site/theme/template/Content/ComponentOverview.jsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useState } from 'react'; -import { Helmet } from 'react-helmet-async'; -import { Link } from 'bisheng/router'; -import { useIntl } from 'react-intl'; -import debounce from 'lodash/debounce'; -import { Input, Divider, Row, Col, Card, Typography, Tag, Space } from 'antd'; -import { SearchOutlined } from '@ant-design/icons'; -import { getChildren } from 'jsonml.js/lib/utils'; -import { getMetaDescription, getLocalizedPathname, getThemeConfig, getMenuItems } from '../utils'; -import './ComponentOverview.less'; - -const onClickCard = pathname => { - if (window.gtag) { - window.gtag('event', '点击', { - event_category: '组件总览卡片', - event_label: pathname, - }); - } -}; - -const reportSearch = debounce(value => { - if (window.gtag) { - window.gtag('event', '搜索', { - event_category: '组件总览卡片', - event_label: value, - }); - } -}, 2000); - -const { Title } = Typography; -const ComponentOverview = ({ - componentsData = [], - doc: { - meta: { title }, - content, - }, - location, - utils: { toReactComponent }, -}) => { - const { locale, formatMessage } = useIntl(); - const documentTitle = `${title} - Ant Design`; - const contentChild = getMetaDescription(getChildren(content)); - const themeConfig = getThemeConfig(); - const menuItems = getMenuItems( - componentsData, - locale, - themeConfig.categoryOrder, - themeConfig.typeOrder, - ); - const [search, setSearch] = useState(''); - - // keydown.enter goto first component - const sectionRef = React.createRef(); - const onKeyDown = event => { - if (event.keyCode === 13 && search.trim().length) { - sectionRef.current?.querySelector('.components-overview-card')?.click(); - } - }; - - return ( -
    - - {documentTitle} - - {contentChild && } - -

    {title}

    - {toReactComponent(['section', { className: 'markdown' }].concat(getChildren(content)))} - - { - setSearch(e.target.value); - reportSearch(e.target.value); - }} - onKeyDown={onKeyDown} - autoFocus // eslint-disable-line jsx-a11y/no-autofocus - suffix={} - /> - - {menuItems - .filter(i => i.order > -1) - .map(group => { - const components = group.children.filter( - component => - !search.trim() || - component.title.toLowerCase().includes(search.trim().toLowerCase()) || - (component.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()), - ); - return components.length ? ( -
    - - <Space align="center"> - {group.title} - <Tag style={{ display: 'block' }}>{components.length}</Tag> - </Space> - - - {components - .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) - .map(component => { - const url = `${component.filename - .replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '') - .toLowerCase()}/`; - - // 如果是 https 就不用处理了 - const href = url.startsWith('http') - ? url - : getLocalizedPathname(url, locale === 'zh-CN', location.query); - - /** Link 不能跳转到外链 */ - const ComponentLink = !url.startsWith('http') ? Link : 'a'; - - return ( -
    - onClickCard(href.onClickCard)} - > - - {component.title} {component.subtitle} - - } - > -
    - {component.title} -
    -     -     - - ); - })} - - - ) : null; - })} - - ); -}; - -export default ComponentOverview; diff --git a/site/theme/template/Content/ComponentOverview.less b/site/theme/template/Content/ComponentOverview.less deleted file mode 100644 index 8d81d0d1e0..0000000000 --- a/site/theme/template/Content/ComponentOverview.less +++ /dev/null @@ -1,48 +0,0 @@ -@import (reference) '../../style/themes/index.less'; - -.components-overview { - padding: 0; - - &-group-title { - margin-bottom: 24px !important; - } - - &-title { - overflow: hidden; - color: @text-color; - text-overflow: ellipsis; - } - - &-img { - display: flex; - align-items: center; - justify-content: center; - height: 152px; - } - - &-card { - cursor: pointer; - transition: all 0.5s; - - &:hover { - box-shadow: @shadow-1-down; - } - } -} - -.components-overview-search.ant-input-affix-wrapper { - width: 100%; - padding: 0; - font-size: 20px; - border: 0; - box-shadow: none; - - input { - color: rgba(0, 0, 0, 0.85); - font-size: 20px; - } - - .anticon { - color: #bbb; - } -} diff --git a/site/theme/template/Content/EditButton.tsx b/site/theme/template/Content/EditButton.tsx deleted file mode 100644 index 031cad4368..0000000000 --- a/site/theme/template/Content/EditButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Tooltip } from 'antd'; -import { EditOutlined } from '@ant-design/icons'; - -const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/'; - -export interface EditButtonProps { - title: React.ReactNode; - filename?: string; -} - -export default function EditButton({ title, filename }: EditButtonProps) { - return ( - - - - - - ); -} diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx deleted file mode 100644 index bea871872a..0000000000 --- a/site/theme/template/Content/MainContent.jsx +++ /dev/null @@ -1,558 +0,0 @@ -import React, { cloneElement, Component } from 'react'; -import { browserHistory, Link } from 'bisheng/router'; -import { Affix, Avatar, Col, Drawer, Menu, Row, Tooltip } from 'antd'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import { - DoubleRightOutlined, - ExportOutlined, - LeftOutlined, - RightOutlined, -} from '@ant-design/icons'; -import ContributorsList from '@qixian.cs/github-contributors-list'; -import classNames from 'classnames'; -import get from 'lodash/get'; -import Article from './Article'; -import PrevAndNext from './PrevAndNext'; -import Footer from '../Layout/Footer'; -import SiteContext from '../Layout/SiteContext'; -import ComponentDoc from './ComponentDoc'; -import ComponentOverview from './ComponentOverview'; -import * as utils from '../utils'; - -function getModuleData(props) { - const { pathname } = props.location; - const moduleName = /^\/?components/.test(pathname) - ? 'components' - : pathname - .split('/') - .filter(item => item) - .slice(0, 2) - .join('/'); - const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md'; - let data; - switch (moduleName) { - case 'docs/react': - case 'changelog': - case 'changelog-cn': - data = [...props.picked['docs/react'], ...props.picked.changelog]; - break; - default: - data = props.picked[moduleName]; - } - return data.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)); -} - -function fileNameToPath(filename) { - const snippets = filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').split('/'); - return snippets[snippets.length - 1]; -} - -function getSideBarOpenKeys(nextProps) { - const { themeConfig } = nextProps; - const { pathname } = nextProps.location; - const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US'; - const moduleData = getModuleData(nextProps); - const shouldOpenKeys = utils - .getMenuItems(moduleData, locale, themeConfig.categoryOrder, themeConfig.typeOrder) - .map(m => (m.title && m.title[locale]) || m.title); - return shouldOpenKeys; -} - -function clearActiveToc() { - [].forEach.call(document.querySelectorAll('.toc-affix li a'), node => { - node.className = ''; - }); -} - -function updateActiveToc(id) { - const currentNode = document.querySelectorAll(`.toc-affix li a[href="#${id}"]`)[0]; - if (currentNode) { - clearActiveToc(); - currentNode.className = 'current'; - } -} - -class MainContent extends Component { - static contextType = SiteContext; - - state = { - openKeys: undefined, - }; - - componentDidMount() { - window.addEventListener('load', this.handleLoad); - window.addEventListener('hashchange', this.handleHashChange); - } - - static getDerivedStateFromProps(props, state) { - if (!state.openKeys) { - return { - ...state, - openKeys: getSideBarOpenKeys(props), - }; - } - return null; - } - - componentDidUpdate(prevProps) { - const { location } = this.props; - const { location: prevLocation = {} } = prevProps || {}; - if (!prevProps || prevLocation.pathname !== location.pathname) { - this.bindScroller(); - } - if (!window.location.hash && prevLocation.pathname !== location.pathname) { - clearActiveToc(); - window.scrollTo(0, 0); - } - // when subMenu not equal - if (get(this.props, 'route.path') !== get(prevProps, 'route.path')) { - // reset menu OpenKeys - this.handleMenuOpenChange(); - } - } - - componentWillUnmount() { - if (this.scroller) { - this.scroller.destroy(); - } - window.removeEventListener('load', this.handleLoad); - window.removeEventListener('hashchange', this.handleHashChange); - clearTimeout(this.timeout); - } - - getMenuItems(footerNavIcons = {}) { - const { - themeConfig, - intl: { locale }, - } = this.props; - const moduleData = getModuleData(this.props); - const menuItems = utils.getMenuItems( - moduleData, - locale, - themeConfig.categoryOrder, - themeConfig.typeOrder, - ); - return menuItems.map(menuItem => { - if (menuItem.title === 'Overview' || menuItem.title === '组件总览') { - return menuItem.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons)); - } - if (menuItem.type === 'type') { - return ( - - {menuItem.children - .sort((a, b) => a.title.localeCompare(b.title)) - .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))} - - ); - } - if (menuItem.children) { - return ( - - {menuItem.children.map(child => { - if (child.type === 'type') { - return ( - - {child.children.map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))} - - ); - } - return this.generateMenuItem(false, child, footerNavIcons); - })} - - ); - } - return this.generateMenuItem(true, menuItem, footerNavIcons); - }); - } - - getFooterNav(menuItems, activeMenuItem) { - const menuItemsList = this.flattenMenu(menuItems); - let activeMenuItemIndex = -1; - menuItemsList.forEach((menuItem, i) => { - if (menuItem && menuItem.key === activeMenuItem) { - activeMenuItemIndex = i; - } - }); - const prev = menuItemsList[activeMenuItemIndex - 1]; - const next = menuItemsList[activeMenuItemIndex + 1]; - return { prev, next }; - } - - getActiveMenuItem() { - const { - params: { children }, - location, - } = this.props; - return ( - (children && children.replace('-cn', '')) || location.pathname.replace(/(^\/|-cn$)/g, '') - ); - } - - handleMenuOpenChange = openKeys => { - this.setState({ openKeys }); - }; - - handleLoad = () => { - if (window.location.hash) { - updateActiveToc(window.location.hash.replace(/^#/, '')); - - // 有时候不滚动，强制触发一次滚动逻辑 - setTimeout(() => { - const target = document.querySelector(window.location.hash); - if (target) { - target.scrollIntoView(); - } - }, 100); - } - this.bindScroller(); - }; - - handleHashChange = () => { - this.timeout = setTimeout(() => { - updateActiveToc(window.location.hash.replace(/^#/, '')); - }); - }; - - bindScroller() { - if (this.scroller) { - this.scroller.destroy(); - } - if (!document.querySelector('.markdown > h2, .code-box')) { - return; - } - // eslint-disable-next-line global-require - require('intersection-observer'); - // eslint-disable-next-line global-require - const scrollama = require('scrollama'); - this.scroller = scrollama(); - this.scroller - .setup({ - step: '.markdown > h2, .code-box', // required - offset: '10px', - }) - .onStepEnter(({ element }) => { - updateActiveToc(element.id); - }); - } - - generateMenuItem(isTop, item, { before = null, after = null }) { - const { - intl: { locale }, - location, - } = this.props; - const key = fileNameToPath(item.filename); - if (!item.title) { - return null; - } - const title = item.title[locale] || item.title; - const text = isTop - ? title - : [ - {title}, - - {item.subtitle} - , - ]; - const { disabled } = item; - const url = item.filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').toLowerCase(); - - const child = !item.link ? ( - - {before} - {text} - {after} - - ) : ( - - {before} - {text} - {after} - - ); - - return ( - - {child} - - ); - } - - getThemeSwitchMenu() { - const { theme } = this.context; - const { - intl: { formatMessage }, - } = this.props; - return { - onClick: ({ key }) => this.changeThemeMode(key), - selectedKeys: [theme], - items: [ - { key: 'default', label: formatMessage({ id: 'app.theme.switch.default' }) }, - { key: 'dark', label: formatMessage({ id: 'app.theme.switch.dark' }) }, - { key: 'compact', label: formatMessage({ id: 'app.theme.switch.compact' }) }, - ], - }; - } - - flattenMenu(menu) { - if (!menu) { - return null; - } - if (menu.type && menu.type === Menu.Item) { - return menu; - } - if (Array.isArray(menu)) { - return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []); - } - return this.flattenMenu((menu.props && menu.props.children) || menu.children); - } - - changeThemeMode = theme => { - const { setTheme, theme: selectedTheme } = this.context; - const { pathname, hash, query } = this.props.location; - if (selectedTheme !== theme) { - setTheme(theme); - if (theme === 'default') { - document.documentElement.style.colorScheme = 'light'; - setColor(false); - delete query.theme; - } else { - if (theme === 'dark') { - document.documentElement.style.colorScheme = 'dark'; - setColor(true); - } - query.theme = theme; - } - browserHistory.push({ - pathname: `/${pathname}`, - query, - hash, - }); - } - }; - - renderContributors() { - const { - localizedPageData: { meta }, - intl: { formatMessage }, - } = this.props; - return ( - - loading ? ( - - ) : ( - - - {item.username} - - - ) - } - repo="ant-design" - owner="ant-design" - /> - ); - } - - renderMainContent({ theme, setIframeTheme }) { - const { localizedPageData, demos, location } = this.props; - if (location.pathname.includes('components/overview')) { - const type = utils.isZhCN(location.pathname) ? '重型组件' : 'ProComponents'; - return ( - meta.category === 'Components') - .concat([ - { - meta: { - category: 'Components', - cover: - 'https://gw.alipayobjects.com/zos/antfincdn/4n5H%24UX%24j/bianzu%2525204.svg', - filename: 'https://procomponents.ant.design/components/layout', - subtitle: '高级布局', - title: 'ProLayout', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - { - meta: { - category: 'Components', - cover: 'https://gw.alipayobjects.com/zos/antfincdn/mStei5BFC/bianzu%2525207.svg', - filename: 'https://procomponents.ant.design/components/form', - subtitle: '高级表单', - title: 'ProForm', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - { - meta: { - category: 'Components', - cover: - 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg', - filename: 'https://procomponents.ant.design/components/table', - subtitle: '高级表格', - title: 'ProTable', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - { - meta: { - category: 'Components', - cover: - 'https://gw.alipayobjects.com/zos/antfincdn/H0%26LSYYfh/bianzu%2525209.svg', - filename: 'https://procomponents.ant.design/components/descriptions', - subtitle: '高级定义列表', - title: 'ProDescriptions', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - { - meta: { - category: 'Components', - cover: 'https://gw.alipayobjects.com/zos/antfincdn/uZUmLtne5/bianzu%2525209.svg', - filename: 'https://procomponents.ant.design/components/list', - subtitle: '高级列表', - title: 'ProList', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - { - meta: { - category: 'Components', - cover: 'https://gw.alipayobjects.com/zos/antfincdn/N3eU432oA/bianzu%2525209.svg', - filename: 'https://procomponents.ant.design/components/editable-table', - subtitle: '可编辑表格', - title: 'EditableProTable', - type, - tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg', - }, - }, - ])} - /> - ); - } - if (demos) { - return ( - <> - - {this.renderContributors()} - - ); - } - return ( - <> -
    - {this.renderContributors()} - - ); - } - - render() { - const { demos, location } = this.props; - const { openKeys, mobileMenuOpen } = this.state; - const { isMobile, theme, setIframeTheme } = this.context; - const activeMenuItem = this.getActiveMenuItem(); - const menuItems = this.getMenuItems(); - const menuItemsForFooterNav = this.getMenuItems({ - before: , - after: , - }); - const { prev, next } = this.getFooterNav(menuItemsForFooterNav, activeMenuItem); - const mainContainerClass = classNames('main-container', { - 'main-container-component': !!demos, - }); - const menuChild = ( - this.setState({ mobileMenuOpen: false })} - > - {menuItems} - - ); - return ( -
    - - {isMobile ? ( - <> - this.setState({ mobileMenuOpen: true })} - className="mobile-menu-trigger" - > - - - - this.setState({ mobileMenuOpen: false })} - > - {cloneElement(menuChild, { - style: { margin: '0 -24px' }, - })} - - - ) : ( -
    - -
    {menuChild}
    -     - - )} - -
    - {this.renderMainContent({ theme, setIframeTheme })} -
    - -
    - - - - ); - } -} - -export default injectIntl(MainContent); diff --git a/site/theme/template/Content/PrevAndNext.jsx b/site/theme/template/Content/PrevAndNext.jsx deleted file mode 100644 index 7f9a1083ad..0000000000 --- a/site/theme/template/Content/PrevAndNext.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -const PrevAndNext = ({ prev, next }) => ( -
    - {prev - ? React.cloneElement(prev.props.children || prev.children[0], { - className: 'prev-page', - }) - : null} - {next - ? React.cloneElement(next.props.children || next.children[0], { - className: 'next-page', - }) - : null} -
    -); - -export default PrevAndNext; diff --git a/site/theme/template/Content/ThemeIcon.jsx b/site/theme/template/Content/ThemeIcon.jsx deleted file mode 100644 index 440cb04ec5..0000000000 --- a/site/theme/template/Content/ThemeIcon.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import Icon from '@ant-design/icons'; - -const ThemeIcon = props => { - const SVGIcon = React.useCallback( - () => ( - - - - - - - - ), - [props], - ); - return ; -}; - -export default ThemeIcon; diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx deleted file mode 100644 index 8e5a7b3c04..0000000000 --- a/site/theme/template/Content/index.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import collect from 'bisheng/collect'; -import MainContent from './MainContent'; -import * as utils from '../utils'; - -function isChangelog(pathname) { - return pathname.includes('changelog'); -} - -export default collect(async nextProps => { - const { pathname } = nextProps.location; - const pageDataPath = pathname.replace('-cn', '').split('/'); - const pageData = isChangelog(pathname) - ? nextProps.data.changelog.CHANGELOG - : nextProps.utils.get(nextProps.data, pageDataPath); - if (!pageData) { - throw 404; // eslint-disable-line no-throw-literal - } - - const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US'; - const pageDataPromise = - typeof pageData === 'function' - ? pageData() - : (pageData[locale] || pageData.index[locale] || pageData.index)(); - const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']); - if (demosFetcher) { - const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]); - return { localizedPageData, demos }; - } - return { localizedPageData: await pageDataPromise }; -})(MainContent); diff --git a/site/theme/template/Home/Banner/Background.less b/site/theme/template/Home/Banner/Background.less deleted file mode 100644 index a81991f6bb..0000000000 --- a/site/theme/template/Home/Banner/Background.less +++ /dev/null @@ -1,35 +0,0 @@ -@import (reference) '../../../style/themes/index.less'; - -.home-banner-background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - > * { - width: 100%; - height: 100%; - vertical-align: top; - } - - > img { - display: block; - } - - > svg { - display: none; - } -} - -@media (min-width: @screen-sm-min) { - .home-banner-background { - > img { - display: none; - } - - > svg { - display: block; - } - } -} diff --git a/site/theme/template/Home/Banner/Background.tsx b/site/theme/template/Home/Banner/Background.tsx deleted file mode 100644 index 132fd674ff..0000000000 --- a/site/theme/template/Home/Banner/Background.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import * as React from 'react'; -import Hitu from '@ant-design/hitu'; -import './Background.less'; - -const RANDOM_OFFSET = 50; -const TOTAL_FRAMES = 600; - -function randomFrames(x: number, y: number): any[] { - const common = { x, y, cubic: Hitu.CUBIC_EASE_IN_OUT }; - - return [ - { - frame: 0, - ...common, - }, - { - frame: TOTAL_FRAMES / 2, - ...common, - x: x - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET, - y: y - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET, - }, - { - frame: TOTAL_FRAMES, - ...common, - }, - ]; -} - -const ShadowSize = 30; - -// =================================== Circle 1 =================================== -const CircleSize1 = 140; -const Circle1 = () => ( - - - - - - - -); -Circle1.width = (CircleSize1 + ShadowSize) * 2; -Circle1.height = (CircleSize1 + ShadowSize) * 2; - -// =================================== Circle 2 =================================== -const CircleSize2 = 200; -const Circle2 = () => ( - - - - - - - -); -Circle2.width = (CircleSize2 + ShadowSize) * 2; -Circle2.height = (CircleSize2 + ShadowSize) * 2; - -// ==================================== Rect 1 ==================================== -const ReactSize1 = 90; -const React1 = () => ( - - - - - - - -); -React1.width = (ReactSize1 + ShadowSize) * 2; -React1.height = (ReactSize1 + ShadowSize) * 2; - -// ================================== Diamond 1 =================================== -const DiamondSize1 = 400; -const Diamond1 = () => { - const start = ShadowSize; - const center = ShadowSize + DiamondSize1; - const end = ShadowSize + DiamondSize1 * 2; - - return ( - - - - - - - - - ); -}; -Diamond1.width = (DiamondSize1 + ShadowSize) * 2; -Diamond1.height = (DiamondSize1 + ShadowSize) * 2; - -export default function Background() { - const [circleFrames, setCircleFrames] = React.useState(() => randomFrames(550, 200)); - const [circle2Frames, setCircle2Frames] = React.useState(() => randomFrames(0, 448)); - const [reactFrames, setReactFrames] = React.useState(() => randomFrames(1400, 300)); - const [diamondFrames, setDiamondFrames] = React.useState(() => randomFrames(1100, -230)); - - return ( -
    - background - { - if (frame === 0) { - setCircleFrames(randomFrames(550, 200)); - setCircle2Frames(randomFrames(0, 448)); - setReactFrames(randomFrames(1400, 300)); - setDiamondFrames(randomFrames(1100, -230)); - } - }} - shapes={[ - { - type: 'shape', - source: Circle1, - frames: circleFrames, - }, - { - type: 'shape', - source: Circle2, - frames: circle2Frames, - }, - { - type: 'shape', - source: React1, - frames: reactFrames, - }, - { - type: 'shape', - source: Diamond1, - frames: diamondFrames, - }, - ]} - /> -
    - ); -} diff --git a/site/theme/template/Home/Banner/Logo.less b/site/theme/template/Home/Banner/Logo.less deleted file mode 100644 index 2ce2837705..0000000000 --- a/site/theme/template/Home/Banner/Logo.less +++ /dev/null @@ -1,46 +0,0 @@ -@import (reference) '../../../style/themes/index.less'; - -.home-card-logo { - position: relative; - display: inline-block; - max-width: 500px; - margin: 0 32px; - cursor: pointer; - - .home-card-logo-icon { - position: absolute; - top: -38px; - left: 339px; - display: none; - width: 64px; - height: 64px; - } - - .home-banner-mini { - display: block; - max-width: 100%; - } - - .home-banner-normal { - display: none; - } -} - -@media (min-width: @screen-sm-min) { - .home-card-logo { - height: 90px; - vertical-align: top; - - .home-banner-mini { - display: none; - } - - .home-banner-normal { - display: block; - } - - .home-card-logo-icon { - display: block; - } - } -} diff --git a/site/theme/template/Home/Banner/Logo.tsx b/site/theme/template/Home/Banner/Logo.tsx deleted file mode 100644 index 60a3f31170..0000000000 --- a/site/theme/template/Home/Banner/Logo.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; -import Hitu from '@ant-design/hitu'; -import type { HiTuRefObject } from '@ant-design/hitu/lib/HiTu'; -import './Logo.less'; -import { preLoad } from '../util'; - -const ICON_IMAGES = [ - 'https://gw.alipayobjects.com/zos/basement_prod/fef2f3d5-9326-48e3-a8f3-a99584efd425.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/95736b64-de90-4fcd-bae9-a827091a247d.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/7002f57b-bf16-4640-8373-2c4cfcfa7f8c.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/29aa8cd8-de97-42b8-a370-f901be43e18a.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/d7bc5cdf-07f9-4ddf-8135-78d3cc6ca009.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/8737ccb7-3b5d-40ca-ae36-6a904047caa4.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/1fdf5981-2d9d-4315-bb84-4590d5c5b989.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/b9d17ebc-2af1-4926-ba1b-c1376ddaa479.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/dcb1b8f8-becd-4f90-ba32-574260a7b18d.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/ba0958ce-b194-4910-84de-7e3274742dbb.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/ad510b94-5f85-4b30-b929-2e3a34ad673c.svg', - 'https://gw.alipayobjects.com/zos/basement_prod/43d010fa-71ac-44e3-8475-bb77d95c331c.svg', -]; - -preLoad(ICON_IMAGES); - -const AntDesign = () => ( - - - -); - -AntDesign.width = 32; -AntDesign.height = 32; - -const ICONS = ICON_IMAGES.map(href => { - function Icon() { - return ( - - {/* Image size will follow outer svg size, let's cut to half here */} - - - ); - } - - Icon.width = 32; - Icon.height = 32; - - return Icon; -}); - -export default function Logo() { - const hituRef = React.useRef(null); - const [loop, setLoop] = React.useState(false); - const [iconIndex, setIconIndex] = React.useState(-1); - const Icon = ICONS[iconIndex] || AntDesign; - - return ( -
    { - setLoop(true); - if (hituRef.current) { - hituRef.current.triggerMotion(true); - } - }} - onMouseLeave={() => { - setLoop(false); - }} - > - Ant Design - Ant Design - { - if (frame === 5) { - const newIndex = (iconIndex + 1) % ICONS.length; - setIconIndex(newIndex); - } - }} - shapes={[ - { - type: 'shape', - source: Icon, - frames: [ - { - frame: 0, - x: 32, - y: 32, - scaleX: 1, - scaleY: 1, - opacity: 1, - cubic: Hitu.CUBIC_EASE, - }, - ], - }, - ]} - /> -
    - ); -} diff --git a/site/theme/template/Home/Banner/index.less b/site/theme/template/Home/Banner/index.less deleted file mode 100644 index 5a672e4683..0000000000 --- a/site/theme/template/Home/Banner/index.less +++ /dev/null @@ -1,137 +0,0 @@ -@import (reference) '../../../style/themes/index.less'; - -@home-color: #0170fe; - -.home-banner { - position: relative; - height: 512px; - overflow: hidden; - // background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(235, 245, 255, 0.58)), - // linear-gradient(150deg, #fbfcfd, #f8fcff); - background: url('https://gw.alipayobjects.com/zos/basement_prod/a8cf2dfe-ff6a-4a2e-ab73-f72dced0df99.svg'); - background-size: cover; - - &-holder { - position: relative; - z-index: 1; - margin-top: 160px; - } - - &-content { - margin: 0 auto; - padding: 0 16px; - font-size: 14px; - text-align: center; - - p { - margin: 16px 0 0; - font-weight: lighter; - } - - .banner-video { - display: none; - margin: 20px auto 0; - color: @home-color; - } - - .banner-qr { - margin: 8px auto 0; - font-weight: normal; - text-align: center; - - a { - color: #0170fe; - } - - img { - display: inline-block; - width: 18px; - margin-right: 8px; - vertical-align: text-bottom; - - .rtl & { - margin-right: 0; - margin-left: 8px; - } - } - } - - &-operations { - margin-top: 72px; - white-space: nowrap; - - a { - margin: 0 8px; - } - - button.ant-btn { - height: auto; - padding: 8px 24px; - color: @home-color; - font-size: 14px; - border-color: @home-color; - - &:hover { - color: tint(@home-color, 20%); - border-color: tint(@home-color, 20%); - } - - &.ant-btn-primary { - color: #fff; - background: @home-color; - - &:hover { - background-color: tint(@home-color, 20%); - } - } - } - } - } -} - -.banner-qr-code { - .ant-popover-inner-content { - padding: 12px; - } - - img { - width: 136px; - height: 136px; - } - - p { - margin: 8px 0 0; - color: #314659; - text-align: center; - } -} - -@media (min-width: @screen-sm-min) { - .home-banner { - height: 448px; - - &-holder { - margin-top: 130px; - } - - &-content { - font-size: 16px; - - p { - margin-top: 24px; - } - - .video { - margin: 8px auto; - } - - &-operations { - margin-top: 40px; - - button.ant-btn { - font-size: 16px; - } - } - } - } -} diff --git a/site/theme/template/Home/Banner/index.tsx b/site/theme/template/Home/Banner/index.tsx deleted file mode 100644 index bf08652e80..0000000000 --- a/site/theme/template/Home/Banner/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { Button } from 'antd'; -import { Link } from 'bisheng/router'; -import { FormattedMessage, useIntl } from 'react-intl'; -import Background from './Background'; -import { getLocalizedPathname } from '../../utils'; -import Logo from './Logo'; - -import './index.less'; - -const Banner = (props: { location: any }) => { - const { location } = props; - const { locale } = useIntl(); - const isZhCN = locale === 'zh-CN'; - - return ( -
    - - -

    - -

    - -
    -
    -
    - -
    -

    - -

    - -
    - - - - - - -
    -
    -
    -
    - ); -}; - -export default Banner; diff --git a/site/theme/template/Home/DesignPage/Certainty.tsx b/site/theme/template/Home/DesignPage/Certainty.tsx deleted file mode 100644 index 37fb00da7c..0000000000 --- a/site/theme/template/Home/DesignPage/Certainty.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import Hitu from '@ant-design/hitu'; -import type { Shape, FrameInfo } from '@ant-design/hitu/lib/interface'; -import InteractiveIcon from './InteractiveIcon'; - -function Rect() { - return ; -} - -Rect.width = 14; -Rect.height = 14; - -function getFrames(x: number, y: number): FrameInfo[] { - const delay = (x + y) * 5 + 1; - - const position = { - x: x * (14 + 12) + 21, - y: y * (14 + 12) + 21, - }; - - return [ - { - frame: 0, - rotate: 0, - ...position, - }, - { - frame: delay, - rotate: 0, - ...position, - cubic: Hitu.CUBIC_EASE, - }, - { - frame: 15 + delay, - scaleX: 1.3, - scaleY: 1.3, - cubic: Hitu.CUBIC_EASE, - }, - { - frame: 30 + delay, - scaleX: 1, - scaleY: 1, - }, - ]; -} - -const shapes: Shape[] = []; - -for (let x = 0; x < 4; x += 1) { - for (let y = 0; y < 4; y += 1) { - shapes.push({ - type: 'shape', - source: Rect, - frames: getFrames(x, y), - }); - } -} - -export default function Certainty() { - return ; -} diff --git a/site/theme/template/Home/DesignPage/Growth.tsx b/site/theme/template/Home/DesignPage/Growth.tsx deleted file mode 100644 index 5f151276e6..0000000000 --- a/site/theme/template/Home/DesignPage/Growth.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -import Hitu from '@ant-design/hitu'; -import type { Shape, FrameInfo } from '@ant-design/hitu/lib/interface'; -import InteractiveIcon from './InteractiveIcon'; - -function Arrow() { - return ( - - ); -} - -Arrow.width = 84; -Arrow.height = 70; - -function Rect() { - return ; -} - -Rect.width = 10; -Rect.height = 10; - -const rectShared: Partial = { - originX: 0, - originY: 1, - y: 98, -}; - -const rectDistance = Rect.width + 9; -function getRectFrames(scaleY: number, index: number): FrameInfo[] { - const delay = index * 3; - - return [ - { - frame: 0, - scaleY, - ...rectShared, - x: 18 + rectDistance * index, - cubic: Hitu.CUBIC_EASE, - }, - { - frame: 1 + delay, - scaleY: 0, - cubic: Hitu.CUBIC_EASE, - }, - { - frame: 30 + delay, - scaleY: scaleY * 1.05, - }, - { - frame: 40 + delay, - scaleY: scaleY * 0.95, - }, - { - frame: 50 + delay, - scaleY, - }, - ]; -} - -const shapes: Shape[] = [ - { - type: 'shape', - source: Arrow, - frames: [ - { - frame: 0, - originX: 0, - originY: 0, - x: 20, - y: 12, - opacity: 1, - cubic: Hitu.CUBIC_EASE, - }, - { - frame: 1, - y: 17, - opacity: 0, - }, - { - frame: 30, - y: 12, - opacity: 1, - }, - ], - }, -]; - -[1.2, 2.1, 3.1, 4.5, 6].forEach((scaleY, index) => { - shapes.push({ - type: 'shape', - source: Rect, - frames: getRectFrames(scaleY, index), - }); -}); - -export default function Meaningful() { - return ; -} diff --git a/site/theme/template/Home/DesignPage/InteractiveIcon.tsx b/site/theme/template/Home/DesignPage/InteractiveIcon.tsx deleted file mode 100644 index e008635866..0000000000 --- a/site/theme/template/Home/DesignPage/InteractiveIcon.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import type { HiTuRefObject } from '@ant-design/hitu'; -import Hitu from '@ant-design/hitu'; -import type { Shape } from '@ant-design/hitu/lib/interface'; - -const HOVER_LOOP = false; - -export interface InteractiveIconProps { - shapes: Shape[]; - debug?: boolean; - frames?: number; -} - -export default function InteractiveIcon({ shapes, debug, frames }: InteractiveIconProps) { - const hituRef = React.useRef(null); - const [loop, setLoop] = React.useState(false); - - return ( - { - if (HOVER_LOOP) { - setLoop(true); - } - - if (hituRef.current) { - hituRef.current.triggerMotion(true); - } - }} - onMouseLeave={() => { - setLoop(false); - }} - > - - - ); -} diff --git a/site/theme/template/Home/DesignPage/Meaningful.tsx b/site/theme/template/Home/DesignPage/Meaningful.tsx deleted file mode 100644 index 7b748f19ad..0000000000 --- a/site/theme/template/Home/DesignPage/Meaningful.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import Hitu from '@ant-design/hitu'; -import type { Shape } from '@ant-design/hitu/lib/interface'; -import InteractiveIcon from './InteractiveIcon'; - -function Heart() { - return ( - - ); -} - -Heart.width = 26; -Heart.height = 24; - -function Circle() { - return ; -} - -Circle.width = 72; -Circle.height = 72; - -const center = { x: 60, y: 60 }; - -const shapes: Shape[] = [ - { - type: 'shape', - source: Circle, - frames: [ - { - frame: 0, - scaleX: 1.3, - scaleY: 1.3, - opacity: 0.4, - ...center, - }, - { - frame: 20, - scaleX: 1.5, - scaleY: 1.5, - opacity: 0, - }, - { - frame: 21, - scaleX: 1, - scaleY: 1, - opacity: 0, - }, - { - frame: 40, - scaleX: 1.3, - scaleY: 1.3, - opacity: 0.4, - }, - ], - }, - { - type: 'shape', - source: Circle, - frames: [ - { - frame: 0, - scaleX: 1, - scaleY: 1, - ...center, - }, - ], - }, - { - type: 'shape', - source: Heart, - frames: [ - { - frame: 0, - ...center, - cubic: Hitu.CUBIC_EASE, - }, - ], - }, -]; - -export default function Meaningful() { - return ; -} diff --git a/site/theme/template/Home/DesignPage/Natural.tsx b/site/theme/template/Home/DesignPage/Natural.tsx deleted file mode 100644 index 321539fd8a..0000000000 --- a/site/theme/template/Home/DesignPage/Natural.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import * as React from 'react'; -import type { Shape } from '@ant-design/hitu'; -import Hitu from '@ant-design/hitu'; -import InteractiveIcon from './InteractiveIcon'; - -const CenterLeaf = () => ( - - - -); -CenterLeaf.width = 40; -CenterLeaf.height = 52; - -const LeftLeaf = () => ( - - - - -); -LeftLeaf.width = 38; -LeftLeaf.height = 38; - -const RightLeaf = () => ( - - - -); -RightLeaf.width = 38; -RightLeaf.height = 38; - -const shapes: Shape[] = [ - { - type: 'shape', - source: CenterLeaf, - frames: [ - { frame: 0, originY: 1, x: 60, y: 62, rotate: 0 }, - { frame: 20, rotate: -7 }, - { frame: 40, rotate: 9 }, - { frame: 60, rotate: -7 }, - { frame: 80, rotate: 0 }, - ], - }, - { - type: 'shape', - source: LeftLeaf, - frames: [ - { - frame: 0, - originX: 1, - originY: 1, - x: 56, - y: 96, - cubic: Hitu.CUBIC_EASE_IN_OUT, - }, - { - frame: 20, - rotate: 7, - - cubic: Hitu.CUBIC_EASE_IN_OUT, - }, - { - frame: 40, - rotate: -5, - cubic: Hitu.CUBIC_EASE_IN_OUT, - }, - { - frame: 60, - rotate: 7, - }, - { - frame: 80, - rotate: 0, - }, - ], - }, - { - type: 'shape', - source: RightLeaf, - frames: [ - { - frame: 0, - originX: 0, - originY: 1, - x: 64, - y: 96, - }, - { - frame: 20, - rotate: -5, - cubic: Hitu.CUBIC_EASE_IN_OUT, - }, - { - frame: 40, - rotate: 7, - cubic: Hitu.CUBIC_EASE_IN_OUT, - }, - { - frame: 60, - rotate: -5, - }, - { - frame: 80, - rotate: 0, - }, - ], - }, -]; - -export default function Natural() { - return ; -} diff --git a/site/theme/template/Home/DesignPage/index.less b/site/theme/template/Home/DesignPage/index.less deleted file mode 100644 index 1da09fe509..0000000000 --- a/site/theme/template/Home/DesignPage/index.less +++ /dev/null @@ -1,197 +0,0 @@ -@import (reference) '../../../style/themes/index.less'; - -.design-card { - position: relative; - min-height: 278px; - padding: 32px 40px; - color: #697b8c; - line-height: 2; - background: rgba(0, 0, 0, 0.1); - - &.main-card { - background-image: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i1EySrFVZvAAAAAAAAAAAABkARQnAQ'); - background-size: cover; - } - - h3, - h4 { - color: #0d1a26; - } - - a { - color: #2f54eb; - } - - .design-card-detail { - display: block; - margin-top: 12px; - } - - .design-values { - text-align: center; - - img { - display: block; - display: none; - width: 56px; - height: 56px; - margin: 20px auto 0; - } - - h4 { - margin-top: 18px; - font-weight: normal; - } - } - - &.sub-card { - padding: 0; - - .card-info { - display: flex; - flex-direction: column; - padding: 40px 0 32px 40px; - - .ant-row-rtl & { - padding: 40px 40px 32px 0; - } - - ul { - margin-top: auto; - - li { - margin-top: 16px; - - a { - color: #2f54eb; - } - } - } - } - } -} - -.design-mini-panel { - &:hover { - box-shadow: @shadow-2; - } - - .ant-card-meta-title { - color: #0d1a26; - font-weight: 400; - font-size: 20px; - } - - .ant-card-body { - padding: 16px 20px 20px; - } - - .ant-card-meta-description { - color: #697b8c; - } -} - -@media (min-width: @screen-sm-min) { - .design-card { - &.main-card { - padding-right: 0; - - .ant-row-rtl & { - padding-right: 40px; - padding-left: 0; - } - } - - &.sub-card { - background-image: none !important; - } - } -} - -@media (max-width: @screen-sm-min) { - .design-card { - height: 478px; - padding: 24px 16px; - - &.main-card { - height: auto; - padding-bottom: 16px; - background-image: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*a8u5Q4QIJzcAAAAAAAAAAABkARQnAQ'); - } - - h3.ant-typography { - margin-bottom: 16px; - font-size: 18px; - } - - .design-card-detail { - position: relative; - display: block; - margin-top: 12px; - line-height: 22px; - } - - .design-values { - img { - display: block; - } - - svg { - display: none; - } - - h4 { - margin-top: 8px; - } - } - - &.sub-card { - padding: 0; - line-height: 1.5; - background-repeat: no-repeat !important; - background-position: left 50% bottom 0% !important; - background-size: contain !important; - - h3.ant-typography { - margin-bottom: 4px; - } - - .card-info { - padding: 24px 16px 0; - } - - ul { - margin-top: auto; - - li { - margin-top: 12px; - } - } - } - - .design-card-img-col { - display: none; - } - } - - .design-mini-panels { - margin-top: -23px !important; - - .design-mini-panel { - .ant-card-body { - padding: 16px 16px 20px; - - .ant-card-meta-title { - margin-bottom: 4px; - font-size: 18px; - } - } - } - } -} - -html.en-us { - .design-card.main-card { - line-height: 22px; - } -} diff --git a/site/theme/template/Home/DesignPage/index.tsx b/site/theme/template/Home/DesignPage/index.tsx deleted file mode 100644 index 4ae8375181..0000000000 --- a/site/theme/template/Home/DesignPage/index.tsx +++ /dev/null @@ -1,306 +0,0 @@ -import * as React from 'react'; -import { Row, Col, Typography, Card } from 'antd'; -import { RightOutlined, LeftOutlined } from '@ant-design/icons'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Link } from 'bisheng/router'; -import { getLocalizedPathname } from '../../utils'; -import './index.less'; -import Certainty from './Certainty'; -import Meaningful from './Meaningful'; -import Growth from './Growth'; -import Natural from './Natural'; -import SiteContext from '../../Layout/SiteContext'; - -const { Title } = Typography; - -interface PanelProps { - img: string; - title: React.ReactNode; - description: string; - href?: string; - link?: string; -} - -const MINI_LIST: PanelProps[] = [ - { - img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ZhzDQLMyYlYAAAAAAAAAAABkARQnAQ', - title: 'AntV', - description: 'app.home.product-antv-slogan', - href: 'https://antv.vision', - }, - { - img: - 'https://gw.alipayobjects.com/zos/antfincdn/888xda6kBc/Ant%252520Design%252520shouyepeitu.svg', - title: 'Ant Design Pro', - description: 'app.home.product-pro-slogan', - href: 'https://pro.ant.design/', - }, - { - img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mb-WQILTlSEAAAAAAAAAAABkARQnAQ', - title: 'Ant Design Mobile', - description: 'app.home.product-mobile-slogan', - href: 'https://mobile.ant.design/', - }, - { - img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PrLWSpmWZmIAAAAAAAAAAABkARQnAQ', - title: , - description: 'app.home.product-hitu-slogan', - link: '/docs/spec/illustration', - }, - { - img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MaL2SYtHPuMAAAAAAAAAAABkARQnAQ', - title: 'Kitchen', - description: 'app.home.product-kitchen-slogan', - href: 'https://kitchen.alipay.com/', - }, - { - img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*T_HeSIJ30IIAAAAAAAAAAABkARQnAQ', - title: 'Icons', - description: 'app.home.product-icons-slogan', - link: '/components/icon/', - }, -]; - -const MiniPanel = ({ - title, - img, - description, - href, - link, - isZhCN, - query, -}: PanelProps & { isZhCN: boolean } & { query: object }) => { - let content = ( - } - > - } /> - - ); - - if (href) { - content = ( - - {content} - - ); - } else if (link) { - content = {content}; - } - - return ( -
    - {content} - - ); -}; - -const DesignPage = (props: { location: any }) => { - const { location } = props; - const { locale } = useIntl(); - const isZhCN = locale === 'zh-CN'; - const { direction } = React.useContext(SiteContext); - let IconComponent = ; - - if (direction === 'rtl') { - IconComponent = ; - } - - const smallStyle = { fontSize: 12, color: '#888', marginLeft: '0.3em' }; - - return ( -
    - {/* ***************************** Group 1 ***************************** */} - - {/* *********************** Design Values *********************** */} -
    -
    - - <FormattedMessage id="app.home.design-values" /> - - - -
    - - - - - {IconComponent} - - - - - - certainty - -

    - -

    - -     - meaningful - -

    - -

    - -     - growth - -

    - -

    - -     - natural - -

    - -

    - - - - - - - - {/* *********************** Design Guides *********************** */} -     -
    - -
    - - <FormattedMessage id="app.home.design-guide" /> - - -
      -
    • - - - {IconComponent} - -
      • -
    • - - - {IconComponent} - -
      • -
    - - - design guide - - - - - - {/* ************************* Component ************************* */} - -
    - -
    - - <FormattedMessage id="app.home.components" /> - - - - - - components - - - - - - - {/* ***************************** Group 2 ***************************** */} - - {MINI_LIST.map(panel => ( - - ))} - - - ); -}; - -export default DesignPage; diff --git a/site/theme/template/Home/MorePage.less b/site/theme/template/Home/MorePage.less deleted file mode 100644 index df2b94c902..0000000000 --- a/site/theme/template/Home/MorePage.less +++ /dev/null @@ -1,73 +0,0 @@ -@import (reference) '../../style/themes/index.less'; - -.more-card { - &:hover { - box-shadow: @shadow-2; - } - - .ant-card-cover { - padding: 24px 24px 0; - } - - .ant-card-body { - color: #314659; - } - - .ant-card-meta-detail { - display: flex; - flex-direction: column; - min-height: 170px; - - .ant-card-meta-title { - min-height: 50px; - margin-bottom: 16px; - color: #0d1a26; - font-weight: 400; - white-space: normal; - text-overflow: initial; - word-break: break-word; - } - - .ant-card-meta-description { - flex: auto; - color: #697b8c; - } - } - - .more-card-source { - float: right; - - .ant-row-rtl & { - float: left; - } - - > img { - vertical-align: baseline; - } - } -} - -@media (max-width: @screen-sm-min) { - .more-card { - .ant-card-cover { - margin-bottom: 12px; - padding: 16px 16px 0; - - img { - height: 184px; - } - } - - .ant-card-meta-title { - font-size: 18px; - } - - .ant-card-body { - padding: 16px; - - .ant-card-meta-detail { - min-height: 150px; - } - } - } -} diff --git a/site/theme/template/Home/MorePage.tsx b/site/theme/template/Home/MorePage.tsx deleted file mode 100644 index 95022a72e4..0000000000 --- a/site/theme/template/Home/MorePage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { useIntl } from 'react-intl'; -import { Card, Row, Col } from 'antd'; -import { useSiteData } from './util'; -import type { Icons, Extra } from './util'; -import './MorePage.less'; - -type MoreProps = Partial & { - icons?: Icons; - loading?: boolean; -}; - -const MoreCard = ({ title, description, date, img, source, href, icons, loading }: MoreProps) => ( - - { - window?.gtag('event', '点击', { - event_category: '首页文章', - event_label: href, - }); - }} - > - } - loading={loading} - className="more-card" - > - -
    - {date} - - {icons ? ( - icon.name === source)?.href} alt={source} /> - ) : null} - -
    -     -     - -); - -export default function MorePage() { - const { locale } = useIntl(); - const [{ extras, icons }, loading] = useSiteData(); - const list = extras?.[locale === 'zh-CN' ? 'cn' : 'en'] || []; - const loadingProps = { loading: loading || list.length === 0 } as MoreProps; - return ( - - {(list ?? [loadingProps, loadingProps, loadingProps, loadingProps]).map((more, i) => ( - - ))} - - ); -} diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less deleted file mode 100644 index 61747019aa..0000000000 --- a/site/theme/template/Home/RecommendPage.less +++ /dev/null @@ -1,141 +0,0 @@ -@import (reference) '../../style/themes/index.less'; - -.linear-gradient(@mid-pos, @end-pos) { - background: linear-gradient( - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.25) @mid-pos, - rgba(0, 0, 0, 0.65) @end-pos - ); -} - -.recommend-block { - position: relative; - display: block; - height: 192px; - overflow: hidden; - border-radius: 2px; - - img { - position: relative; - z-index: -1; - width: 100%; - height: 100%; - vertical-align: top; - background-clip: cover; - transition: all 0.36s ease-out; - } - - &-loading { - background: linear-gradient( - 90deg, - rgba(207, 216, 220, 0.2), - rgba(207, 216, 220, 0.4), - rgba(207, 216, 220, 0.2) - ); - border-radius: 4px; - - img, - &::before { - display: none; - } - } - - &:hover img { - transform: scale(1.04); - } - - &::before { - .linear-gradient(40%, 100%); - - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0.3; - transition: all 0.5s; - content: ''; - pointer-events: none; - } - - .recommend-popularize { - position: absolute; - top: 0; - left: 0; - padding: 0 8px; - color: #314659; - line-height: 28px; - background: #ffd75a; - border-radius: 0 0 4px; - } - - .recommend-content { - position: absolute; - right: 0; - bottom: 0; - left: 0; - padding: 0 16px 16px; - transform: translateY(100%); - transition: transform 0.3s; - - .ant-typography { - margin: 0; - color: #fff; - } - - h4 { - position: absolute; - top: 0; - right: 0; - left: 0; - padding: 0 16px 16px; - transform: translateY(-100%); - transition: padding 0.3s; - } - - p { - color: rgba(255, 255, 255, 0.85); - opacity: 0; - transition: opacity 0.3s, margin 0.3s; - } - } -} - -@media (max-width: @screen-sm-min) { - .recommend-block { - h4.ant-typography { - padding: 0 16px 16px; - font-size: 18px; - } - } -} - -@media (min-width: @screen-sm-min) { - .recommend-block { - &-main { - height: 408px; - - &::before { - .linear-gradient(70%, 100%); - } - } - - &:hover { - &::before { - opacity: 1; - } - - .recommend-content { - transform: translateY(0); - - h4 { - padding-bottom: 8px; - } - - p { - opacity: 1; - } - } - } - } -} diff --git a/site/theme/template/Home/RecommendPage.tsx b/site/theme/template/Home/RecommendPage.tsx deleted file mode 100644 index 781ab974e4..0000000000 --- a/site/theme/template/Home/RecommendPage.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; -import classNames from 'classnames'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Row, Col, Typography } from 'antd'; -import { useSiteData } from './util'; -import type { Recommendation } from './util'; -import './RecommendPage.less'; - -const { Title, Paragraph } = Typography; - -interface RecommendBlockProps extends Recommendation { - main?: boolean; - loading?: boolean; -} - -const RecommendBlock = ({ - main, - title, - popularize, - description, - img, - href, - loading, -}: RecommendBlockProps) => ( - { - window?.gtag('event', '点击', { - event_category: '首页推广', - event_label: href, - }); - }} - > - {title} - {popularize && ( - - - - )} -
    - {title} - {description} -
    -     -); - -export default function RecommendPage() { - const { locale } = useIntl(); - const [{ recommendations }, loading] = useSiteData(); - const list = recommendations?.[locale === 'zh-CN' ? 'cn' : 'en']; - const isLoading = loading || !list || list.length === 0; - return ( - - - - - - - - - - - - - - - - ); -} diff --git a/site/theme/template/Home/index.less b/site/theme/template/Home/index.less deleted file mode 100644 index 2dd5e9b6e4..0000000000 --- a/site/theme/template/Home/index.less +++ /dev/null @@ -1,80 +0,0 @@ -@import (reference) '../../style/themes/index.less'; - -.home-container { - h1, - h2, - h3, - h4 { - &.ant-typography { - font-weight: 400; - } - } - - img { - object-fit: cover; - } - - .home-block-content { - margin: 88px 40px 124px; - - h2.ant-typography { - margin-bottom: 56px; - } - - &-extra { - float: right; - padding-top: 12px; - font-weight: 200; - font-size: 16px; - - html.rtl & { - float: left; - } - } - } - - .home-link-arrow { - position: relative; - margin-left: 0.3em; - font-size: 0.85em; - opacity: 0.75; - transition: all 0.2s; - - &-rtl { - margin-right: 0.3em; - margin-left: 0; - } - } - - a:hover .home-link-arrow { - transform: translateX(3px); - opacity: 1; - } - - a:hover .home-link-arrow-rtl { - transform: translateX(-3px); - opacity: 1; - } -} - -@media (max-width: @screen-sm-min) { - .home-container { - .home-block-content { - margin-top: 64px; - margin-bottom: 96px; - - h2.ant-typography { - margin-bottom: 44px; - } - } - } -} - -@media only screen and (max-width: 767.99px) { - .home-container { - .home-block-content { - margin-right: 24px; - margin-left: 24px; - } - } -} diff --git a/site/theme/template/Home/index.tsx b/site/theme/template/Home/index.tsx deleted file mode 100644 index 6b7c199d29..0000000000 --- a/site/theme/template/Home/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Typography } from 'antd'; -import { Link } from 'bisheng/router'; -import Banner from './Banner'; -import RecommendPage from './RecommendPage'; -import DesignPage from './DesignPage'; -import MorePage from './MorePage'; -import Footer from '../Layout/Footer'; -import { getLocalizedPathname } from '../utils'; -import './index.less'; - -const { Title } = Typography; - -function getStyle() { - return ` - .rc-footer-container { - padding-left: 0; - padding-right: 0; - } - - .rc-footer-columns { - max-width: 1208px; - margin: 0 auto; - } - `; -} - -interface BlockContentProps { - title: React.ReactNode; - extra?: React.ReactNode; - children?: React.ReactNode; -} - -const BlockContent: React.FC = ({ title, children, extra }) => ( -
    - - {title} - - {extra && <div className="home-block-content-extra">{extra}</div>} - - {children} -
    -); - -const Home = (props: { location: any }) => { - const { location } = props; - const { locale } = useIntl(); - const isZhCN = locale === 'zh-CN'; - - const getLink = () => { - const path = getLocalizedPathname('/docs/resources', isZhCN, location.query, { - zhCN: '文章', - enUS: 'Articles', - }); - const { pathname, query = {} } = path; - const pathnames = pathname.split('#'); - if ('direction' in query) { - return `${pathnames[0]}?direction=rtl#${pathnames[1]}`; - } - return path; - }; - - return ( -
    -