mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
feat: v5 hover (#37433)
* feat: v5 hover * feat: breadcrumb margin * feat: badge hover * feat: v5 error * fix: badge ribbon corner
This commit is contained in:
MadCcc
GitHub
parent
b854129b49
commit
229d0d81b7
@ -13,6 +13,7 @@ interface BadgeToken extends FullToken<'Badge'> {
|
||||
badgeFontWeight: string;
|
||||
badgeFontSize: number;
|
||||
badgeColor: string;
|
||||
badgeColorHover: string;
|
||||
badgeDotSize: number;
|
||||
badgeFontSizeSm: number;
|
||||
badgeStatusSize: number;
|
||||
@ -115,12 +116,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
background: token.badgeColor,
|
||||
borderRadius: token.badgeHeight / 2,
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
|
||||
transition: `background ${token.motionDurationSlow}`,
|
||||
|
||||
a: {
|
||||
color: token.badgeTextColor,
|
||||
},
|
||||
'a:hover': {
|
||||
color: token.badgeTextColor,
|
||||
},
|
||||
|
||||
'a:hover &': {
|
||||
background: token.badgeColorHover,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-count-sm`]: {
|
||||
minWidth: badgeHeightSm,
|
||||
@ -277,7 +284,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
top: marginXS,
|
||||
height: badgeFontHeight,
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
color: token.badgeTextColor,
|
||||
color: token.colorPrimary,
|
||||
lineHeight: `${badgeFontHeight}px`,
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: token.colorPrimary,
|
||||
@ -327,6 +334,7 @@ export default genComponentStyleHook('Badge', token => {
|
||||
const badgeFontWeight = 'normal';
|
||||
const badgeFontSize = fontSizeSM;
|
||||
const badgeColor = token.colorError;
|
||||
const badgeColorHover = token.colorErrorHover;
|
||||
const badgeHeightSm = fontSize;
|
||||
const badgeDotSize = fontSizeSM / 2;
|
||||
const badgeFontSizeSm = fontSizeSM;
|
||||
@ -341,6 +349,7 @@ export default genComponentStyleHook('Badge', token => {
|
||||
badgeFontWeight,
|
||||
badgeFontSize,
|
||||
badgeColor,
|
||||
badgeColorHover,
|
||||
badgeShadowColor: colorBorderBg,
|
||||
badgeHeightSm,
|
||||
badgeDotSize,
|
||||
|
||||
@ -38,17 +38,15 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
a: {
|
||||
color: token.breadcrumbLinkColor,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
borderRadius: token.radiusSM,
|
||||
height: token.lineHeight * token.fontSize,
|
||||
display: 'inline-block',
|
||||
marginInline: -token.marginXXS,
|
||||
|
||||
'&:hover': {
|
||||
color: token.breadcrumbLinkColorHover,
|
||||
},
|
||||
},
|
||||
|
||||
'li:last-child': {
|
||||
color: token.breadcrumbLastItemColor,
|
||||
|
||||
a: {
|
||||
color: token.breadcrumbLastItemColor,
|
||||
backgroundColor: token.colorBgTextHover,
|
||||
},
|
||||
},
|
||||
|
||||
@ -63,16 +61,38 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
|
||||
|
||||
[`${componentCls}-link`]: {
|
||||
[`
|
||||
> ${iconCls} + span,
|
||||
> ${iconCls} + a
|
||||
`]: {
|
||||
> ${iconCls} + span,
|
||||
> ${iconCls} + a
|
||||
`]: {
|
||||
marginInlineStart: token.marginXXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-overlay-link`]: {
|
||||
borderRadius: token.radiusSM,
|
||||
height: token.lineHeight * token.fontSize,
|
||||
display: 'inline-block',
|
||||
padding: `0 ${token.paddingXXS}px`,
|
||||
marginInline: -token.marginXXS,
|
||||
|
||||
[`> ${iconCls}`]: {
|
||||
marginInlineStart: token.marginXXS,
|
||||
fontSize: token.fontSizeIcon,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
color: token.breadcrumbLinkColorHover,
|
||||
backgroundColor: token.colorBgTextHover,
|
||||
|
||||
a: {
|
||||
color: token.breadcrumbLinkColorHover,
|
||||
},
|
||||
},
|
||||
|
||||
a: {
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -93,7 +113,7 @@ export default genComponentStyleHook('Breadcrumb', token => {
|
||||
breadcrumbLinkColor: token.colorTextDescription,
|
||||
breadcrumbLinkColorHover: token.colorText,
|
||||
breadcrumbLastItemColor: token.colorText,
|
||||
breadcrumbSeparatorMargin: token.paddingXS,
|
||||
breadcrumbSeparatorMargin: token.marginXS,
|
||||
breadcrumbSeparatorColor: token.colorTextDescription,
|
||||
});
|
||||
|
||||
|
||||
@ -7,8 +7,6 @@ import genGroupStyle from './group';
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface ButtonToken extends FullToken<'Button'> {
|
||||
colorBgTextHover: string;
|
||||
colorBgTextActive: string;
|
||||
// FIXME: should be removed
|
||||
colorOutlineDefault: string;
|
||||
}
|
||||
@ -387,11 +385,9 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Button', token => {
|
||||
const { controlTmpOutline, colorFillQuaternary, colorFillTertiary } = token;
|
||||
const { controlTmpOutline } = token;
|
||||
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
colorBgTextHover: colorFillQuaternary,
|
||||
colorBgTextActive: colorFillTertiary,
|
||||
colorOutlineDefault: controlTmpOutline,
|
||||
});
|
||||
|
||||
|
||||
@ -159,12 +159,13 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
},
|
||||
|
||||
// Wrapper & Wrapper > Checkbox
|
||||
|
||||
[`
|
||||
${wrapperCls}:hover:not(${wrapperCls}-disabled),
|
||||
${checkboxCls}:hover:not(${checkboxCls}-disabled),
|
||||
${checkboxCls}-input:focus +
|
||||
`]: {
|
||||
[`${checkboxCls}-inner`]: {
|
||||
${wrapperCls}:not(${wrapperCls}-disabled),
|
||||
${checkboxCls}:not(${checkboxCls}-disabled)
|
||||
`]: {
|
||||
[`&:hover ${checkboxCls}-inner,
|
||||
${checkboxCls}-input:focus + ${checkboxCls}-inner`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
@ -192,7 +193,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
visibility: 'hidden',
|
||||
animationName: antCheckboxEffect,
|
||||
@ -202,6 +202,17 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
${wrapperCls}-checked:not(${wrapperCls}-disabled),
|
||||
${checkboxCls}-checked:not(${checkboxCls}-disabled)
|
||||
`]: {
|
||||
[`&:hover ${checkboxCls}-inner,
|
||||
${checkboxCls}-input:focus + ${checkboxCls}-inner`]: {
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ==================== Disable ====================
|
||||
|
||||
@ -1,241 +0,0 @@
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
|
||||
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
|
||||
// 一般状态
|
||||
.@{checkbox-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
|
||||
&:hover &-inner,
|
||||
&-input:focus + &-inner {
|
||||
border-color: @checkbox-color;
|
||||
}
|
||||
|
||||
&-checked::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid @checkbox-color;
|
||||
border-radius: @checkbox-border-radius;
|
||||
visibility: hidden;
|
||||
animation: antCheckboxEffect 0.36s ease-in-out;
|
||||
animation-fill-mode: backwards;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover::after,
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
direction: ltr;
|
||||
background-color: @checkbox-check-bg;
|
||||
border: @checkbox-border-width @border-style-base @border-color-base;
|
||||
border-radius: @checkbox-border-radius;
|
||||
// Fix IE checked style
|
||||
// https://github.com/ant-design/ant-design/issues/12597
|
||||
border-collapse: separate;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after {
|
||||
@check-width: (@checkbox-size / 14) * 5px;
|
||||
@check-height: (@checkbox-size / 14) * 8px;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// https://github.com/ant-design/ant-design/pull/19452
|
||||
// https://github.com/ant-design/ant-design/pull/31726
|
||||
left: 21.5%;
|
||||
display: table;
|
||||
width: @check-width;
|
||||
height: @check-height;
|
||||
border: 2px solid @checkbox-check-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.1s @ease-in-back, opacity 0.1s;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态
|
||||
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
|
||||
position: absolute;
|
||||
display: table;
|
||||
border: 2px solid @checkbox-check-color;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
transition: all 0.2s @ease-out-back 0.1s;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-checked {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: @checkbox-color;
|
||||
border-color: @checkbox-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&.@{checkbox-prefix-cls}-checked {
|
||||
.@{checkbox-inner-prefix-cls}::after {
|
||||
border-color: @disabled-color;
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-input {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base !important;
|
||||
|
||||
&::after {
|
||||
border-color: @input-disabled-bg;
|
||||
border-collapse: separate;
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + span {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Not show highlight border of checkbox when disabled
|
||||
&:hover::after,
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper {
|
||||
.reset-component();
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
line-height: unset;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&&-in-form-item {
|
||||
input[type='checkbox'] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls} + span {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-group {
|
||||
.reset-component();
|
||||
display: inline-block;
|
||||
|
||||
&-item {
|
||||
margin-right: @checkbox-group-item-margin-right;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item + &-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 半选状态
|
||||
.@{checkbox-prefix-cls}-indeterminate {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: @checkbox-check-bg;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
.@{checkbox-inner-prefix-cls}::after {
|
||||
@indeterminate-width: @checkbox-size - 8px;
|
||||
@indeterminate-height: @checkbox-size - 8px;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: @indeterminate-width;
|
||||
height: @indeterminate-height;
|
||||
background-color: @checkbox-color;
|
||||
border: 0;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
|
||||
background-color: @disabled-color;
|
||||
border-color: @disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antCheckboxEffect {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -330,13 +330,16 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
}
|
||||
: [],
|
||||
|
||||
[`&:hover, &-active`]: {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
'&-selected': {
|
||||
color: token.colorPrimary,
|
||||
backgroundColor: token.controlItemBgActive,
|
||||
},
|
||||
|
||||
[`&:hover, &-active`]: {
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
'&:hover, &-active': {
|
||||
backgroundColor: token.controlItemBgActiveHover,
|
||||
},
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
|
||||
@ -69,13 +69,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
direction: 'rtl',
|
||||
},
|
||||
|
||||
// hover/focus styles
|
||||
[`&:not(${componentCls}-disabled)`]: {
|
||||
'&:hover, &:focus': {
|
||||
backgroundColor: token.bgColorHover,
|
||||
},
|
||||
},
|
||||
|
||||
// block styles
|
||||
'&&-block': {
|
||||
display: 'flex',
|
||||
@ -91,16 +84,17 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
position: 'relative',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}, background-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
|
||||
'&-selected': {
|
||||
...getSegmentedItemSelectedStyle(token),
|
||||
borderRadius: token.controlRadiusSM,
|
||||
color: token.labelColorHover,
|
||||
},
|
||||
|
||||
'&:hover, &:focus': {
|
||||
color: token.labelColorHover,
|
||||
backgroundColor: token.bgColorHover,
|
||||
},
|
||||
|
||||
'&-label': {
|
||||
@ -185,7 +179,6 @@ export default genComponentStyleHook('Segmented', token => {
|
||||
colorTextLabel,
|
||||
colorText,
|
||||
colorFillSecondary,
|
||||
colorFill,
|
||||
colorBgContainer,
|
||||
} = token;
|
||||
|
||||
@ -196,7 +189,7 @@ export default genComponentStyleHook('Segmented', token => {
|
||||
labelColor: colorTextLabel,
|
||||
labelColorHover: colorText,
|
||||
bgColor: colorFillSecondary,
|
||||
bgColorHover: colorFill,
|
||||
bgColorHover: colorFillSecondary,
|
||||
bgColorSelected: colorBgContainer,
|
||||
});
|
||||
return [genSegmentedStyle(segmentedToken)];
|
||||
|
||||
@ -15,7 +15,8 @@ export interface ComponentToken {
|
||||
controlSize: number;
|
||||
railSize: number;
|
||||
handleSize: number;
|
||||
lineHandleWidth: number;
|
||||
handleLineWidth: number;
|
||||
handleLineWidthHover: number;
|
||||
dotSize: number;
|
||||
}
|
||||
|
||||
@ -55,7 +56,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
[`${componentCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
backgroundColor: token.colorFillTertiary,
|
||||
borderRadius: token.controlRadiusXS,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
},
|
||||
@ -72,31 +73,30 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: token.handleSize,
|
||||
height: token.handleSize,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
border: `${token.lineHandleWidth}px solid ${token.colorPrimaryBorder}`,
|
||||
border: `${token.handleLineWidth}px solid ${token.colorPrimaryBorder}`,
|
||||
outline: `0 solid ${token.colorPrimaryBorder}`,
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `
|
||||
border-color ${token.motionDurationSlow},
|
||||
box-shadow ${token.motionDurationSlow},
|
||||
transform ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28)
|
||||
border ${token.motionDurationSlow},
|
||||
outline ${token.motionDurationSlow}
|
||||
`,
|
||||
outline: 'none',
|
||||
|
||||
[`${componentCls}-dragging`]: {
|
||||
zIndex: 1,
|
||||
},
|
||||
|
||||
'&:focus': {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
outline: 'none',
|
||||
boxShadow: token.handleFocusShadow,
|
||||
'&:hover, &:active, &:focus': {
|
||||
boxShadow: `none`,
|
||||
outlineWidth: token.handleLineWidthHover,
|
||||
outlineColor: token.colorPrimary,
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
[`${componentCls}-rail`]: {
|
||||
backgroundColor: colorFillContentHover,
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
},
|
||||
|
||||
[`${componentCls}-track`]: {
|
||||
@ -109,6 +109,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
[`${componentCls}-handle${antCls}-tooltip-open`]: {
|
||||
borderColor: token.colorPrimary,
|
||||
outlineColor: token.colorPrimary,
|
||||
},
|
||||
|
||||
// We use below style instead
|
||||
@ -120,7 +121,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
${componentCls}-handle,
|
||||
${componentCls}-dot-active
|
||||
`]: {
|
||||
borderColor: token.colorPrimaryHover,
|
||||
borderColor: token.colorPrimary,
|
||||
outlineColor: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
@ -154,7 +156,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
border: `${token.lineHandleWidth}px solid ${token.colorSplit}`,
|
||||
border: `${token.handleLineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
@ -295,13 +297,15 @@ export default genComponentStyleHook(
|
||||
// Handle line width is always width-er 1px
|
||||
const increaseHandleWidth = 1;
|
||||
const controlSize = token.controlHeightSM / 2;
|
||||
const lineHandleWidth = token.lineWidth + increaseHandleWidth;
|
||||
const handleLineWidth = token.lineWidth + increaseHandleWidth;
|
||||
const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
|
||||
return {
|
||||
controlSize,
|
||||
railSize: controlSize / 3,
|
||||
handleSize: controlSize + lineHandleWidth,
|
||||
handleSize: controlSize + handleLineWidth,
|
||||
dotSize: (controlSize / 3) * 2,
|
||||
lineHandleWidth,
|
||||
handleLineWidth,
|
||||
handleLineWidthHover,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -152,13 +152,17 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
height: token.switchHeight,
|
||||
lineHeight: `${token.switchHeight}px`,
|
||||
verticalAlign: 'middle',
|
||||
backgroundImage: `linear-gradient(to right, ${token.colorTextDisabled}, ${token.colorTextDisabled}), linear-gradient(to right, ${token.colorBgContainer}, ${token.colorBgContainer})`,
|
||||
background: token.colorTextQuaternary,
|
||||
border: '0',
|
||||
borderRadius: 100,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.switchDuration}`,
|
||||
userSelect: 'none',
|
||||
|
||||
'&:hover': {
|
||||
background: token.colorTextTertiary,
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
outline: 0,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlTmpOutline}`,
|
||||
@ -174,6 +178,10 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
|
||||
[`&${token.componentCls}-checked`]: {
|
||||
background: token.switchColor,
|
||||
|
||||
'&:hover': {
|
||||
background: token.colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${token.componentCls}-loading, &${token.componentCls}-disabled`]: {
|
||||
|
||||
@ -113,6 +113,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
|
||||
'&:not(&-checked):hover': {
|
||||
color: token.colorPrimary,
|
||||
backgroundColor: token.colorFillSecondary,
|
||||
},
|
||||
|
||||
'&:active, &-checked': {
|
||||
@ -121,6 +122,9 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
|
||||
'&-checked': {
|
||||
backgroundColor: token.colorPrimary,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
|
||||
@ -364,6 +364,8 @@ export interface AliasToken extends MapToken {
|
||||
colorTextHeading: string;
|
||||
colorTextLabel: string;
|
||||
colorTextDescription: string;
|
||||
colorBgTextHover: string;
|
||||
colorBgTextActive: string;
|
||||
|
||||
/** Weak action. Such as `allowClear` or Alert close button */
|
||||
colorIcon: string;
|
||||
|
||||
@ -32,12 +32,12 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
|
||||
colorBgBase,
|
||||
colorTextBase,
|
||||
|
||||
colorText: getAlphaColor(colorTextBase, 0.85),
|
||||
colorText: getAlphaColor(colorTextBase, 0.88),
|
||||
colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
|
||||
colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
|
||||
colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
|
||||
|
||||
colorFill: getAlphaColor(colorTextBase, 0.12),
|
||||
colorFill: getAlphaColor(colorTextBase, 0.15),
|
||||
colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
|
||||
colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
|
||||
colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { PresetColorType, SeedToken } from '..';
|
||||
|
||||
export const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1890FF',
|
||||
blue: '#1677ff',
|
||||
purple: '#722ED1',
|
||||
cyan: '#13C2C2',
|
||||
green: '#52C41A',
|
||||
@ -24,8 +24,8 @@ const seedToken: SeedToken = {
|
||||
colorPrimary: '#1677ff',
|
||||
colorSuccess: '#52c41a',
|
||||
colorWarning: '#faad14',
|
||||
colorError: '#ff4d4f',
|
||||
colorInfo: '#1890ff',
|
||||
colorError: '#f5222d',
|
||||
colorInfo: '#1677ff',
|
||||
colorTextBase: '',
|
||||
colorTextLightSolid: '#fff',
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ export default function genColorMapToken(
|
||||
colorSuccessBgHover: successColors[2],
|
||||
colorSuccessBorder: successColors[3],
|
||||
colorSuccessBorderHover: successColors[4],
|
||||
colorSuccessHover: successColors[5],
|
||||
colorSuccessHover: successColors[4],
|
||||
colorSuccess: successColors[6],
|
||||
colorSuccessActive: successColors[7],
|
||||
colorSuccessTextHover: successColors[8],
|
||||
@ -57,8 +57,8 @@ export default function genColorMapToken(
|
||||
colorErrorBgHover: errorColors[2],
|
||||
colorErrorBorder: errorColors[3],
|
||||
colorErrorBorderHover: errorColors[4],
|
||||
colorErrorHover: errorColors[5],
|
||||
colorError: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorError: errorColors[5],
|
||||
colorErrorActive: errorColors[7],
|
||||
colorErrorTextHover: errorColors[8],
|
||||
colorErrorText: errorColors[9],
|
||||
@ -68,7 +68,7 @@ export default function genColorMapToken(
|
||||
colorWarningBgHover: warningColors[2],
|
||||
colorWarningBorder: warningColors[3],
|
||||
colorWarningBorderHover: warningColors[4],
|
||||
colorWarningHover: warningColors[5],
|
||||
colorWarningHover: warningColors[4],
|
||||
colorWarning: warningColors[6],
|
||||
colorWarningActive: warningColors[7],
|
||||
colorWarningTextHover: warningColors[8],
|
||||
@ -79,7 +79,7 @@ export default function genColorMapToken(
|
||||
colorInfoBgHover: infoColors[2],
|
||||
colorInfoBorder: infoColors[3],
|
||||
colorInfoBorderHover: infoColors[4],
|
||||
colorInfoHover: infoColors[5],
|
||||
colorInfoHover: infoColors[4],
|
||||
colorInfo: infoColors[6],
|
||||
colorInfoActive: infoColors[7],
|
||||
colorInfoTextHover: infoColors[8],
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { DerivativeFunc } from '@ant-design/cssinjs';
|
||||
import { generate } from '@ant-design/colors';
|
||||
import genColorMapToken from '../shared/genColorMapToken';
|
||||
import genColorMapToken from './genColorMapToken';
|
||||
import type { MapToken, SeedToken } from '../../interface';
|
||||
import defaultAlgorithm from '../dark';
|
||||
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { DerivativeFunc } from '@ant-design/cssinjs';
|
||||
import { generate } from '@ant-design/colors';
|
||||
import genColorMapToken from '../shared/genColorMapToken';
|
||||
import genColorMapToken from './genColorMapToken';
|
||||
import type { MapToken, SeedToken } from '../../interface';
|
||||
import defaultAlgorithm from '../default';
|
||||
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
|
||||
|
||||
91
components/theme/themes/v4/genColorMapToken.ts
Normal file
91
components/theme/themes/v4/genColorMapToken.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { ColorMapToken, SeedToken } from '../../interface';
|
||||
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
|
||||
|
||||
interface PaletteGenerators {
|
||||
generateColorPalettes: GenerateColorMap;
|
||||
generateNeutralColorPalettes: GenerateNeutralColorMap;
|
||||
}
|
||||
|
||||
export default function genColorMapToken(
|
||||
seed: SeedToken,
|
||||
{ generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
|
||||
): ColorMapToken {
|
||||
const {
|
||||
colorSuccess: colorSuccessBase,
|
||||
colorWarning: colorWarningBase,
|
||||
colorError: colorErrorBase,
|
||||
colorInfo: colorInfoBase,
|
||||
colorPrimary: colorPrimaryBase,
|
||||
colorBgBase,
|
||||
colorTextBase,
|
||||
} = seed;
|
||||
|
||||
const primaryColors = generateColorPalettes(colorPrimaryBase);
|
||||
const successColors = generateColorPalettes(colorSuccessBase);
|
||||
const warningColors = generateColorPalettes(colorWarningBase);
|
||||
const errorColors = generateColorPalettes(colorErrorBase);
|
||||
const infoColors = generateColorPalettes(colorInfoBase);
|
||||
const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
|
||||
|
||||
return {
|
||||
...neutralColors,
|
||||
|
||||
colorPrimaryBg: primaryColors[1],
|
||||
colorPrimaryBgHover: primaryColors[2],
|
||||
colorPrimaryBorder: primaryColors[3],
|
||||
colorPrimaryBorderHover: primaryColors[4],
|
||||
colorPrimaryHover: primaryColors[5],
|
||||
colorPrimary: primaryColors[6],
|
||||
colorPrimaryActive: primaryColors[7],
|
||||
colorPrimaryTextHover: primaryColors[8],
|
||||
colorPrimaryText: primaryColors[9],
|
||||
colorPrimaryTextActive: primaryColors[10],
|
||||
|
||||
colorSuccessBg: successColors[1],
|
||||
colorSuccessBgHover: successColors[2],
|
||||
colorSuccessBorder: successColors[3],
|
||||
colorSuccessBorderHover: successColors[4],
|
||||
colorSuccessHover: successColors[5],
|
||||
colorSuccess: successColors[6],
|
||||
colorSuccessActive: successColors[7],
|
||||
colorSuccessTextHover: successColors[8],
|
||||
colorSuccessText: successColors[9],
|
||||
colorSuccessTextActive: successColors[10],
|
||||
|
||||
colorErrorBg: errorColors[1],
|
||||
colorErrorBgHover: errorColors[2],
|
||||
colorErrorBorder: errorColors[3],
|
||||
colorErrorBorderHover: errorColors[4],
|
||||
colorErrorHover: errorColors[5],
|
||||
colorError: errorColors[6],
|
||||
colorErrorActive: errorColors[7],
|
||||
colorErrorTextHover: errorColors[8],
|
||||
colorErrorText: errorColors[9],
|
||||
colorErrorTextActive: errorColors[10],
|
||||
|
||||
colorWarningBg: warningColors[1],
|
||||
colorWarningBgHover: warningColors[2],
|
||||
colorWarningBorder: warningColors[3],
|
||||
colorWarningBorderHover: warningColors[4],
|
||||
colorWarningHover: warningColors[5],
|
||||
colorWarning: warningColors[6],
|
||||
colorWarningActive: warningColors[7],
|
||||
colorWarningTextHover: warningColors[8],
|
||||
colorWarningText: warningColors[9],
|
||||
colorWarningTextActive: warningColors[10],
|
||||
|
||||
colorInfoBg: infoColors[1],
|
||||
colorInfoBgHover: infoColors[2],
|
||||
colorInfoBorder: infoColors[3],
|
||||
colorInfoBorderHover: infoColors[4],
|
||||
colorInfoHover: infoColors[5],
|
||||
colorInfo: infoColors[6],
|
||||
colorInfoActive: infoColors[7],
|
||||
colorInfoTextHover: infoColors[8],
|
||||
colorInfoText: infoColors[9],
|
||||
colorInfoTextActive: infoColors[10],
|
||||
|
||||
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
};
|
||||
}
|
||||
@ -31,9 +31,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
const aliasToken: AliasToken = {
|
||||
...mergedToken,
|
||||
|
||||
colorLink: mergedToken.colorPrimaryText,
|
||||
colorLinkHover: mergedToken.colorPrimaryTextHover,
|
||||
colorLinkActive: mergedToken.colorPrimaryActive,
|
||||
colorLink: mergedToken.colorInfoText,
|
||||
colorLinkHover: mergedToken.colorInfoHover,
|
||||
colorLinkActive: mergedToken.colorInfoActive,
|
||||
|
||||
// ============== Background ============== //
|
||||
colorFillContent: mergedToken.colorFillSecondary,
|
||||
@ -51,6 +51,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
colorTextLabel: mergedToken.colorTextSecondary,
|
||||
colorTextDescription: mergedToken.colorTextTertiary,
|
||||
colorHighlight: mergedToken.colorError,
|
||||
colorBgTextHover: mergedToken.colorFillSecondary,
|
||||
colorBgTextActive: mergedToken.colorFill,
|
||||
|
||||
colorIcon: mergedToken.colorTextTertiary,
|
||||
colorIconHover: mergedToken.colorText,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user