From 8d6167573ed29844b4dcdd08cc9aaaebbb4cc8e0 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 20 Sep 2024 21:48:17 +0200 Subject: [PATCH] feat: upgrade style --- src/styles/_variables.css | 87 +++++++++++++++++++------------------- src/styles/style.ts | 88 ++++++++++++++++++++------------------- 2 files changed, 90 insertions(+), 85 deletions(-) diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 0f6fdc738..c815baad0 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,10 +1,10 @@ :root { - --blue: #1677ff; + --blue: #1677FF; --purple: #722ED1; --cyan: #13C2C2; --green: #52C41A; --magenta: #EB2F96; - --pink: #eb2f96; + --pink: #EB2F96; --red: #F5222D; --orange: #FA8C16; --yellow: #FADB14; @@ -20,8 +20,8 @@ --color-link: #3600d1; --color-text-base: #000; --color-bg-base: #fff; - --font-family: 'GT America', -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'; - --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --font-family: 'GT America', -system-ui, sans-serif; + --font-family-code: ‘Roboto Mono’, monospace; --font-size: 14px; --line-width: 1px; --line-type: solid; @@ -45,49 +45,38 @@ --opacity-image: 1; --wireframe: false; --motion: true; - --color-link-hover: #ab8eff; - --control-outline: rgba(54, 0, 209, 0.1); - --color-warning-outline: #fffbe6; - --color-error-outline: #fff2f0; - --control-item-bg-hover: #f8f6fb; - --control-item-bg-active: #ebe8f8; - --control-item-bg-active-hover: #c3aeff; --color-text: rgba(0, 0, 0, 0.95); --color-text-secondary: rgba(0, 0, 0, 0.75); --color-text-tertiary: rgba(0, 0, 0, 0.55); --color-text-quaternary: rgba(0, 0, 0, 0.4); - --color-fill: rgba(15, 14, 14, 0.15); - --color-fill-secondary: rgba(32, 0, 122, 0.06); - --color-fill-tertiary: rgba(15, 14, 14, 0.04); - --color-fill-quaternary: rgba(32, 0, 122, 0.03); --color-border: #c3aeff; --color-border-secondary: #eceae9; - --color-primary-bg: #f8f6fb; - --color-primary-bg-hover: #ebe8f8; - --color-primary-border: #c3aeff; - --color-primary-border-hover: #ab8eff; - --color-primary-hover: #ab8eff; - --color-primary-active: #8255ff; - --color-primary-text-hover: #5f29f8; - --color-primary-text: #2c00aa; - --color-primary-text-active: #20007a; - --color-success-hover: #73d13d; - --color-success-text-hover: #237804; - --color-success-text: #135200; - --color-success-text-active: #092b00; - --color-warning-hover: #ffc53d; - --color-warning-text-hover: #ad6800; - --color-warning-text: #874d00; - --color-warning-text-active: #613400; + --color-fill: rgba(32, 0, 122, 0.15); + --color-fill-secondary: rgba(32, 0, 122, 0.06); + --color-fill-tertiary: rgba(32, 0, 122, 0.04); + --color-fill-quaternary: rgba(32, 0, 122, 0.02); --color-info-bg: #f8f6fb; --color-info-bg-hover: #ebe8f8; --color-info-border: #c3aeff; --color-info-border-hover: #ab8eff; - --color-info-hover: #ab8eff; - --color-info-active: #8255ff; + --color-info-hover: #5f29f8; + --color-info-active: #2c00aa; --color-info-text-hover: #5f29f8; --color-info-text: #2c00aa; --color-info-text-active: #20007a; + --color-primary-bg: #f8f6fb; + --color-primary-bg-hover: #ebe8f8; + --color-primary-border: #c3aeff; + --color-primary-border-hover: #ab8eff; + --color-primary-hover: #5f29f8; + --color-primary-active: #2c00aa; + --color-primary-text-hover: #5f29f8; + --color-primary-text: #2c00aa; + --color-primary-text-active: #20007a; + --control-outline: rgba(54, 0, 209, 0.1); + --font-weight-strong: 500; + --color-fill-alter-solid: #f8f6fb; + --color-filled-handle-bg: #ebe8f8; --mp-brand-primary-1: #f8f6fb; --mp-brand-primary-2: #ebe8f8; --mp-brand-primary-3: #dbceff; @@ -108,9 +97,9 @@ --mp-brand-secondary-8: #2c2d2b; --mp-brand-secondary-9: #212020; --mp-brand-secondary-10: #0f0e0e; - --mp-color-border-disabled: #dcdcd8; --mp-color-icon-strong: #0f0e0e; --mp-color-icon-brand: #20007a; + --mp-color-border-disabled: #dcdcd8; --mp-icon-size-xs: 12px; --mp-icon-size-sm: 16px; --mp-icon-size-md: 20px; @@ -283,9 +272,14 @@ --color-success-bg-hover: #d9f7be; --color-success-border: #b7eb8f; --color-success-border-hover: #95de64; + --color-success-hover: #95de64; --color-success-active: #389e0d; + --color-success-text-hover: #73d13d; + --color-success-text: #52c41a; + --color-success-text-active: #389e0d; --color-error-bg: #fff2f0; --color-error-bg-hover: #fff1f0; + --color-error-bg-active: #ffccc7; --color-error-border: #ffccc7; --color-error-border-hover: #ffa39e; --color-error-hover: #ff7875; @@ -297,7 +291,12 @@ --color-warning-bg-hover: #fff1b8; --color-warning-border: #ffe58f; --color-warning-border-hover: #ffd666; + --color-warning-hover: #ffd666; --color-warning-active: #d48806; + --color-warning-text-hover: #ffc53d; + --color-warning-text: #faad14; + --color-warning-text-active: #d48806; + --color-link-hover: #804beb; --color-link-active: #2800ab; --color-bg-mask: rgba(0, 0, 0, 0.45); --color-white: #fff; @@ -341,9 +340,9 @@ --border-radius-lg: 8px; --border-radius-outer: 4px; --color-fill-content: rgba(32, 0, 122, 0.06); - --color-fill-content-hover: rgba(15, 14, 14, 0.15); - --color-fill-alter: rgba(32, 0, 122, 0.03); - --color-bg-container-disabled: rgba(15, 14, 14, 0.04); + --color-fill-content-hover: rgba(32, 0, 122, 0.15); + --color-fill-alter: rgba(32, 0, 122, 0.02); + --color-bg-container-disabled: rgba(32, 0, 122, 0.04); --color-border-bg: #ffffff; --color-split: rgba(44, 22, 11, 0.09); --color-text-placeholder: rgba(0, 0, 0, 0.4); @@ -354,16 +353,20 @@ --color-text-light-solid: #fff; --color-highlight: #ff4d4f; --color-bg-text-hover: rgba(32, 0, 122, 0.06); - --color-bg-text-active: rgba(15, 14, 14, 0.15); + --color-bg-text-active: rgba(32, 0, 122, 0.15); --color-icon: rgba(0, 0, 0, 0.55); --color-icon-hover: rgba(0, 0, 0, 0.95); + --color-error-outline: rgba(255, 38, 5, 0.06); + --color-warning-outline: rgba(255, 215, 5, 0.1); --font-size-icon: 12px; --line-width-focus: 4px; --control-outline-width: 2px; --control-interactive-size: 16px; - --control-item-bg-active-disabled: rgba(15, 14, 14, 0.15); - --control-tmp-outline: rgba(32, 0, 122, 0.03); - --font-weight-strong: 600; + --control-item-bg-hover: rgba(32, 0, 122, 0.04); + --control-item-bg-active: #f8f6fb; + --control-item-bg-active-hover: #ebe8f8; + --control-item-bg-active-disabled: rgba(32, 0, 122, 0.15); + --control-tmp-outline: rgba(32, 0, 122, 0.02); --opacity-loading: 0.65; --link-decoration: none; --link-hover-decoration: none; diff --git a/src/styles/style.ts b/src/styles/style.ts index a81654c57..29109cac5 100644 --- a/src/styles/style.ts +++ b/src/styles/style.ts @@ -1,9 +1,9 @@ -export const Blue = '#1677ff' +export const Blue = '#1677FF' export const Purple = '#722ED1' export const Cyan = '#13C2C2' export const Green = '#52C41A' export const Magenta = '#EB2F96' -export const Pink = '#eb2f96' +export const Pink = '#EB2F96' export const Red = '#F5222D' export const Orange = '#FA8C16' export const Yellow = '#FADB14' @@ -19,9 +19,8 @@ export const ColorInfo = '#3600d1' export const ColorLink = '#3600d1' export const ColorTextBase = '#000' export const ColorBgBase = '#fff' -export const FontFamily = - "'GT America', -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'" -export const FontFamilyCode = "'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace" +export const FontFamily = "'GT America', -system-ui, sans-serif" +export const FontFamilyCode = '‘Roboto Mono’, monospace' export const FontSize = '14px' export const LineWidth = '1px' export const LineType = 'solid' @@ -45,49 +44,38 @@ export const ZIndexPopupBase = 1000 export const OpacityImage = 1 export const Wireframe = false export const Motion = true -export const ColorLinkHover = '#ab8eff' -export const ControlOutline = 'rgba(54, 0, 209, 0.1)' -export const ColorWarningOutline = '#fffbe6' -export const ColorErrorOutline = '#fff2f0' -export const ControlItemBgHover = '#f8f6fb' -export const ControlItemBgActive = '#ebe8f8' -export const ControlItemBgActiveHover = '#c3aeff' export const ColorText = 'rgba(0, 0, 0, 0.95)' export const ColorTextSecondary = 'rgba(0, 0, 0, 0.75)' export const ColorTextTertiary = 'rgba(0, 0, 0, 0.55)' export const ColorTextQuaternary = 'rgba(0, 0, 0, 0.4)' -export const ColorFill = 'rgba(15, 14, 14, 0.15)' -export const ColorFillSecondary = 'rgba(32, 0, 122, 0.06)' -export const ColorFillTertiary = 'rgba(15, 14, 14, 0.04)' -export const ColorFillQuaternary = 'rgba(32, 0, 122, 0.03)' export const ColorBorder = '#c3aeff' export const ColorBorderSecondary = '#eceae9' -export const ColorPrimaryBg = '#f8f6fb' -export const ColorPrimaryBgHover = '#ebe8f8' -export const ColorPrimaryBorder = '#c3aeff' -export const ColorPrimaryBorderHover = '#ab8eff' -export const ColorPrimaryHover = '#ab8eff' -export const ColorPrimaryActive = '#8255ff' -export const ColorPrimaryTextHover = '#5f29f8' -export const ColorPrimaryText = '#2c00aa' -export const ColorPrimaryTextActive = '#20007a' -export const ColorSuccessHover = '#73d13d' -export const ColorSuccessTextHover = '#237804' -export const ColorSuccessText = '#135200' -export const ColorSuccessTextActive = '#092b00' -export const ColorWarningHover = '#ffc53d' -export const ColorWarningTextHover = '#ad6800' -export const ColorWarningText = '#874d00' -export const ColorWarningTextActive = '#613400' +export const ColorFill = 'rgba(32, 0, 122, 0.15)' +export const ColorFillSecondary = 'rgba(32, 0, 122, 0.06)' +export const ColorFillTertiary = 'rgba(32, 0, 122, 0.04)' +export const ColorFillQuaternary = 'rgba(32, 0, 122, 0.02)' export const ColorInfoBg = '#f8f6fb' export const ColorInfoBgHover = '#ebe8f8' export const ColorInfoBorder = '#c3aeff' export const ColorInfoBorderHover = '#ab8eff' -export const ColorInfoHover = '#ab8eff' -export const ColorInfoActive = '#8255ff' +export const ColorInfoHover = '#5f29f8' +export const ColorInfoActive = '#2c00aa' export const ColorInfoTextHover = '#5f29f8' export const ColorInfoText = '#2c00aa' export const ColorInfoTextActive = '#20007a' +export const ColorPrimaryBg = '#f8f6fb' +export const ColorPrimaryBgHover = '#ebe8f8' +export const ColorPrimaryBorder = '#c3aeff' +export const ColorPrimaryBorderHover = '#ab8eff' +export const ColorPrimaryHover = '#5f29f8' +export const ColorPrimaryActive = '#2c00aa' +export const ColorPrimaryTextHover = '#5f29f8' +export const ColorPrimaryText = '#2c00aa' +export const ColorPrimaryTextActive = '#20007a' +export const ControlOutline = 'rgba(54, 0, 209, 0.1)' +export const FontWeightStrong = 500 +export const ColorFillAlterSolid = '#f8f6fb' +export const ColorFilledHandleBg = '#ebe8f8' export const MpBrandPrimary1 = '#f8f6fb' export const MpBrandPrimary2 = '#ebe8f8' export const MpBrandPrimary3 = '#dbceff' @@ -108,9 +96,9 @@ export const MpBrandSecondary7 = '#505249' export const MpBrandSecondary8 = '#2c2d2b' export const MpBrandSecondary9 = '#212020' export const MpBrandSecondary10 = '#0f0e0e' -export const MpColorBorderDisabled = '#dcdcd8' export const MpColorIconStrong = '#0f0e0e' export const MpColorIconBrand = '#20007a' +export const MpColorBorderDisabled = '#dcdcd8' export const MpIconSizeXs = '12px' export const MpIconSizeSm = '16px' export const MpIconSizeMd = '20px' @@ -283,9 +271,14 @@ export const ColorSuccessBg = '#f6ffed' export const ColorSuccessBgHover = '#d9f7be' export const ColorSuccessBorder = '#b7eb8f' export const ColorSuccessBorderHover = '#95de64' +export const ColorSuccessHover = '#95de64' export const ColorSuccessActive = '#389e0d' +export const ColorSuccessTextHover = '#73d13d' +export const ColorSuccessText = '#52c41a' +export const ColorSuccessTextActive = '#389e0d' export const ColorErrorBg = '#fff2f0' export const ColorErrorBgHover = '#fff1f0' +export const ColorErrorBgActive = '#ffccc7' export const ColorErrorBorder = '#ffccc7' export const ColorErrorBorderHover = '#ffa39e' export const ColorErrorHover = '#ff7875' @@ -297,7 +290,12 @@ export const ColorWarningBg = '#fffbe6' export const ColorWarningBgHover = '#fff1b8' export const ColorWarningBorder = '#ffe58f' export const ColorWarningBorderHover = '#ffd666' +export const ColorWarningHover = '#ffd666' export const ColorWarningActive = '#d48806' +export const ColorWarningTextHover = '#ffc53d' +export const ColorWarningText = '#faad14' +export const ColorWarningTextActive = '#d48806' +export const ColorLinkHover = '#804beb' export const ColorLinkActive = '#2800ab' export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' export const ColorWhite = '#fff' @@ -341,9 +339,9 @@ export const BorderRadiusSm = '4px' export const BorderRadiusLg = '8px' export const BorderRadiusOuter = '4px' export const ColorFillContent = 'rgba(32, 0, 122, 0.06)' -export const ColorFillContentHover = 'rgba(15, 14, 14, 0.15)' -export const ColorFillAlter = 'rgba(32, 0, 122, 0.03)' -export const ColorBgContainerDisabled = 'rgba(15, 14, 14, 0.04)' +export const ColorFillContentHover = 'rgba(32, 0, 122, 0.15)' +export const ColorFillAlter = 'rgba(32, 0, 122, 0.02)' +export const ColorBgContainerDisabled = 'rgba(32, 0, 122, 0.04)' export const ColorBorderBg = '#ffffff' export const ColorSplit = 'rgba(44, 22, 11, 0.09)' export const ColorTextPlaceholder = 'rgba(0, 0, 0, 0.4)' @@ -354,16 +352,20 @@ export const ColorTextDescription = 'rgba(0, 0, 0, 0.55)' export const ColorTextLightSolid = '#fff' export const ColorHighlight = '#ff4d4f' export const ColorBgTextHover = 'rgba(32, 0, 122, 0.06)' -export const ColorBgTextActive = 'rgba(15, 14, 14, 0.15)' +export const ColorBgTextActive = 'rgba(32, 0, 122, 0.15)' export const ColorIcon = 'rgba(0, 0, 0, 0.55)' export const ColorIconHover = 'rgba(0, 0, 0, 0.95)' +export const ColorErrorOutline = 'rgba(255, 38, 5, 0.06)' +export const ColorWarningOutline = 'rgba(255, 215, 5, 0.1)' export const FontSizeIcon = '12px' export const LineWidthFocus = '4px' export const ControlOutlineWidth = '2px' export const ControlInteractiveSize = '16px' -export const ControlItemBgActiveDisabled = 'rgba(15, 14, 14, 0.15)' -export const ControlTmpOutline = 'rgba(32, 0, 122, 0.03)' -export const FontWeightStrong = 600 +export const ControlItemBgHover = 'rgba(32, 0, 122, 0.04)' +export const ControlItemBgActive = '#f8f6fb' +export const ControlItemBgActiveHover = '#ebe8f8' +export const ControlItemBgActiveDisabled = 'rgba(32, 0, 122, 0.15)' +export const ControlTmpOutline = 'rgba(32, 0, 122, 0.02)' export const OpacityLoading = 0.65 export const LinkDecoration = 'none' export const LinkHoverDecoration = 'none'