diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts index 99a2d7e39..255d126a5 100644 --- a/packages/design/src/theme/default.ts +++ b/packages/design/src/theme/default.ts @@ -9,6 +9,7 @@ const defaultTheme: ThemeConfig = { colorPrimaryBorder: '#b3ccff', colorPrimaryBorderHover: '#5189FB', colorPrimaryHover: '#5189fb', + colorPrimaryActive: '#004CE6', colorPrimaryTextHover: '#5189FB', colorPrimaryText: '#006AFF', colorPrimaryTextActive: '#004CE6', @@ -53,39 +54,30 @@ const defaultTheme: ThemeConfig = { colorInfoText: '#006AFF', colorInfoTextActive: '#004CE6', colorTextBase: '#132039', - colorBgBase: '#ffffff', colorText: '#132039', - colorTextSecondary: '#5C6B8A', - colorTextQuaternary: '#ABB7CF', + colorTextSecondary: '#5c6b8a', + colorTextQuaternary: '#c1cbe0', colorTextTertiary: '#8592AD', + colorBgBase: '#ffffff', colorBgContainer: '#ffffff', - colorBgLayout: '#F8FAFE', - colorBgSpotlight: 'rgba(19, 32, 57, 0.8)', - colorBgMask: 'rgba(19, 32, 57, 0.6)', + colorBgLayout: '#f3f6fc', + colorBgSpotlight: '#132039', colorBorder: '#CDD5E4', colorBorderSecondary: '#E2E8F3', colorFillQuaternary: '#F8FAFE', - colorFillTertiary: '#F8FAFE', - colorFillSecondary: '#F3F6FC', - colorFill: '#E2E8F3', + colorFillTertiary: '#f3f6fc', + colorFillSecondary: '#e2e8f3', + colorFill: '#cdd5e4', + colorBgMask: 'rgba(19, 32, 57, 0.45)', + colorBgElevated: '#ffffff', boxShadowSecondary: '0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)', boxShadow: '0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)', borderRadius: 6, wireframe: false, - colorPrimaryActive: '#004CE6', }, components: { - Segmented: { - itemColor: '#5C6B8A', - itemHoverColor: '#132039', - itemHoverBg: '#ffffff', - }, - Rate: { - colorFillContent: '#E2E8F3', - colorText: '#F20000', - }, InputNumber: { handleVisible: true, }, diff --git a/packages/design/src/theme/style/compact.less b/packages/design/src/theme/style/compact.less index e4aa3ebd2..6d0d4f7ea 100644 --- a/packages/design/src/theme/style/compact.less +++ b/packages/design/src/theme/style/compact.less @@ -309,15 +309,15 @@ @colorText: #132039; @colorTextSecondary: #5c6b8a; @colorTextTertiary: #8592ad; -@colorTextQuaternary: #abb7cf; -@colorFill: #e2e8f3; -@colorFillSecondary: #f3f6fc; -@colorFillTertiary: #f8fafe; +@colorTextQuaternary: #c1cbe0; +@colorFill: #cdd5e4; +@colorFillSecondary: #e2e8f3; +@colorFillTertiary: #f3f6fc; @colorFillQuaternary: #f8fafe; -@colorBgLayout: #f8fafe; +@colorBgLayout: #f3f6fc; @colorBgContainer: #ffffff; @colorBgElevated: #ffffff; -@colorBgSpotlight: rgba(19, 32, 57, 0.8); +@colorBgSpotlight: #132039; @colorBgBlur: transparent; @colorBorder: #cdd5e4; @colorBorderSecondary: #e2e8f3; @@ -368,7 +368,7 @@ @colorInfoTextActive: #004ce6; @colorLinkHover: #52a5ff; @colorLinkActive: #0053d9; -@colorBgMask: rgba(19, 32, 57, 0.6); +@colorBgMask: rgba(19, 32, 57, 0.45); @colorWhite: #fff; @fontSizeSM: 10; @fontSizeLG: 14; @@ -419,21 +419,21 @@ 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; -@colorFillContent: #f3f6fc; -@colorFillContentHover: #e2e8f3; +@colorFillContent: #e2e8f3; +@colorFillContentHover: #cdd5e4; @colorFillAlter: #f8fafe; -@colorBgContainerDisabled: #f8fafe; +@colorBgContainerDisabled: #f3f6fc; @colorBorderBg: #ffffff; @colorSplit: rgba(13, 63, 155, 0.12); -@colorTextPlaceholder: #abb7cf; -@colorTextDisabled: #abb7cf; +@colorTextPlaceholder: #c1cbe0; +@colorTextDisabled: #c1cbe0; @colorTextHeading: #132039; @colorTextLabel: #5c6b8a; @colorTextDescription: #8592ad; @colorTextLightSolid: #fff; @colorHighlight: #f93939; -@colorBgTextHover: #f3f6fc; -@colorBgTextActive: #e2e8f3; +@colorBgTextHover: #e2e8f3; +@colorBgTextActive: #cdd5e4; @colorIcon: #8592ad; @colorIconHover: #132039; @colorErrorOutline: rgba(255, 5, 5, 0.08); @@ -442,10 +442,10 @@ @lineWidthFocus: 4; @controlOutlineWidth: 2; @controlInteractiveSize: 14; -@controlItemBgHover: #f8fafe; +@controlItemBgHover: #f3f6fc; @controlItemBgActive: #eaf1ff; @controlItemBgActiveHover: #eaf1ff; -@controlItemBgActiveDisabled: #e2e8f3; +@controlItemBgActiveDisabled: #cdd5e4; @controlTmpOutline: #f8fafe; @controlOutline: rgba(22, 99, 255, 0.09); @fontWeightStrong: 600; diff --git a/packages/design/src/theme/style/default.less b/packages/design/src/theme/style/default.less index 6fbf36b58..ff29f4cd5 100644 --- a/packages/design/src/theme/style/default.less +++ b/packages/design/src/theme/style/default.less @@ -309,15 +309,15 @@ @colorText: #132039; @colorTextSecondary: #5c6b8a; @colorTextTertiary: #8592ad; -@colorTextQuaternary: #abb7cf; -@colorFill: #e2e8f3; -@colorFillSecondary: #f3f6fc; -@colorFillTertiary: #f8fafe; +@colorTextQuaternary: #c1cbe0; +@colorFill: #cdd5e4; +@colorFillSecondary: #e2e8f3; +@colorFillTertiary: #f3f6fc; @colorFillQuaternary: #f8fafe; -@colorBgLayout: #f8fafe; +@colorBgLayout: #f3f6fc; @colorBgContainer: #ffffff; @colorBgElevated: #ffffff; -@colorBgSpotlight: rgba(19, 32, 57, 0.8); +@colorBgSpotlight: #132039; @colorBgBlur: transparent; @colorBorder: #cdd5e4; @colorBorderSecondary: #e2e8f3; @@ -368,7 +368,7 @@ @colorInfoTextActive: #004ce6; @colorLinkHover: #52a5ff; @colorLinkActive: #0053d9; -@colorBgMask: rgba(19, 32, 57, 0.6); +@colorBgMask: rgba(19, 32, 57, 0.45); @colorWhite: #fff; @fontSizeSM: 12; @fontSizeLG: 16; @@ -419,21 +419,21 @@ 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; -@colorFillContent: #f3f6fc; -@colorFillContentHover: #e2e8f3; +@colorFillContent: #e2e8f3; +@colorFillContentHover: #cdd5e4; @colorFillAlter: #f8fafe; -@colorBgContainerDisabled: #f8fafe; +@colorBgContainerDisabled: #f3f6fc; @colorBorderBg: #ffffff; @colorSplit: rgba(13, 63, 155, 0.12); -@colorTextPlaceholder: #abb7cf; -@colorTextDisabled: #abb7cf; +@colorTextPlaceholder: #c1cbe0; +@colorTextDisabled: #c1cbe0; @colorTextHeading: #132039; @colorTextLabel: #5c6b8a; @colorTextDescription: #8592ad; @colorTextLightSolid: #fff; @colorHighlight: #f93939; -@colorBgTextHover: #f3f6fc; -@colorBgTextActive: #e2e8f3; +@colorBgTextHover: #e2e8f3; +@colorBgTextActive: #cdd5e4; @colorIcon: #8592ad; @colorIconHover: #132039; @colorErrorOutline: rgba(255, 5, 5, 0.08); @@ -442,10 +442,10 @@ @lineWidthFocus: 4; @controlOutlineWidth: 2; @controlInteractiveSize: 16; -@controlItemBgHover: #f8fafe; +@controlItemBgHover: #f3f6fc; @controlItemBgActive: #eaf1ff; @controlItemBgActiveHover: #eaf1ff; -@controlItemBgActiveDisabled: #e2e8f3; +@controlItemBgActiveDisabled: #cdd5e4; @controlTmpOutline: #f8fafe; @controlOutline: rgba(22, 99, 255, 0.09); @fontWeightStrong: 600;