From e818591210d161056febe306a997b0d394178750 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 20 Aug 2024 18:50:44 +0200 Subject: [PATCH] fix: update design tokens (#375) --- design/GlobalToken.json | 1653 +++++++++++++++++++------- design/LightTheme.ts | 42 +- src/components/general/Icon/icon.css | 2 +- src/styles/_variables.css | 190 ++- src/styles/style.ts | 140 +-- 5 files changed, 1428 insertions(+), 599 deletions(-) diff --git a/design/GlobalToken.json b/design/GlobalToken.json index b30d993c4..158cb8753 100644 --- a/design/GlobalToken.json +++ b/design/GlobalToken.json @@ -1,399 +1,1180 @@ { - "blue": { "value": "#1677ff" }, - "purple": { "value": "#722ED1" }, - "cyan": { "value": "#13C2C2" }, - "green": { "value": "#52C41A" }, - "magenta": { "value": "#EB2F96" }, - "pink": { "value": "#eb2f96" }, - "red": { "value": "#F5222D" }, - "orange": { "value": "#FA8C16" }, - "yellow": { "value": "#FADB14" }, - "volcano": { "value": "#FA541C" }, - "geekblue": { "value": "#2F54EB" }, - "gold": { "value": "#FAAD14" }, - "lime": { "value": "#A0D911" }, - "colorPrimary": { "value": "#3600d1" }, - "colorSuccess": { "value": "#52c41a" }, - "colorWarning": { "value": "#faad14" }, - "colorError": { "value": "#ff4d4f" }, - "colorInfo": { "value": "#1677ff" }, - "colorLink": { "value": "#1677ff" }, - "colorTextBase": { "value": "#000" }, - "colorBgBase": { "value": "#fff" }, + "blue": { + "value": "#1677ff" + }, + "purple": { + "value": "#722ED1" + }, + "cyan": { + "value": "#13C2C2" + }, + "green": { + "value": "#52C41A" + }, + "magenta": { + "value": "#EB2F96" + }, + "pink": { + "value": "#eb2f96" + }, + "red": { + "value": "#F5222D" + }, + "orange": { + "value": "#FA8C16" + }, + "yellow": { + "value": "#FADB14" + }, + "volcano": { + "value": "#FA541C" + }, + "geekblue": { + "value": "#2F54EB" + }, + "gold": { + "value": "#FAAD14" + }, + "lime": { + "value": "#A0D911" + }, + "colorPrimary": { + "value": "#3600d1" + }, + "colorSuccess": { + "value": "#52c41a" + }, + "colorWarning": { + "value": "#faad14" + }, + "colorError": { + "value": "#ff4d4f" + }, + "colorInfo": { + "value": "#3600d1" + }, + "colorLink": { + "value": "#3600d1" + }, + "colorTextBase": { + "value": "#000" + }, + "colorBgBase": { + "value": "#fff" + }, "fontFamily": { "value": "'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'" }, - "fontFamilyCode": { "value": "'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace" }, - "fontSize": { "value": "14px" }, - "lineWidth": { "value": "1px" }, - "lineType": { "value": "solid" }, - "motionUnit": { "value": 0.1 }, - "motionBase": { "value": 0 }, - "motionEaseOutCirc": { "value": "cubic-bezier(0.08, 0.82, 0.17, 1)" }, - "motionEaseInOutCirc": { "value": "cubic-bezier(0.78, 0.14, 0.15, 0.86)" }, - "motionEaseOut": { "value": "cubic-bezier(0.215, 0.61, 0.355, 1)" }, - "motionEaseInOut": { "value": "cubic-bezier(0.645, 0.045, 0.355, 1)" }, - "motionEaseOutBack": { "value": "cubic-bezier(0.12, 0.4, 0.29, 1.46)" }, - "motionEaseInBack": { "value": "cubic-bezier(0.71, -0.46, 0.88, 0.6)" }, - "motionEaseInQuint": { "value": "cubic-bezier(0.755, 0.05, 0.855, 0.06)" }, - "motionEaseOutQuint": { "value": "cubic-bezier(0.23, 1, 0.32, 1)" }, - "borderRadius": { "value": "8px" }, - "sizeUnit": { "value": "4px" }, - "sizeStep": { "value": "4px" }, - "sizePopupArrow": { "value": "16px" }, - "controlHeight": { "value": "32px" }, - "zIndexBase": { "value": 0 }, - "zIndexPopupBase": { "value": 1000 }, - "opacityImage": { "value": 1 }, - "wireframe": { "value": false }, - "motion": { "value": true }, - "colorLinkHover": { "value": "#ab8eff" }, - "controlOutline": { "value": "rgba(54, 0, 209, 0.1)" }, - "colorWarningOutline": { "value": "#fffbe6" }, - "colorErrorOutline": { "value": "#fff2f0" }, - "controlItemBgHover": { "value": "#f8f6fb" }, - "controlItemBgActive": { "value": "#ebe8f8" }, - "controlItemBgActiveHover": { "value": "#c3aeff" }, - "colorFill": { "value": "rgba(15, 14, 14, 0.15)" }, - "colorFillSecondary": { "value": "rgba(32, 0, 122, 0.06)" }, - "colorFillTertiary": { "value": "rgba(15, 14, 14, 0.04)" }, - "colorFillQuaternary": { "value": "rgba(32, 0, 122, 0.03)" }, - "colorBorder": { "value": "#c3aeff" }, - "colorBorderSecondary": { "value": "#eceae9" }, - "colorPrimaryBg": { "value": "#f8f6fb" }, - "colorPrimaryBgHover": { "value": "#ebe8f8" }, - "colorPrimaryBorder": { "value": "#c3aeff" }, - "colorPrimaryBorderHover": { "value": "#ab8eff" }, - "colorPrimaryHover": { "value": "#ab8eff" }, - "colorPrimaryActive": { "value": "#8255ff" }, - "colorPrimaryTextHover": { "value": "#5f29f8" }, - "colorPrimaryText": { "value": "#2c00aa" }, - "colorPrimaryTextActive": { "value": "#20007a" }, - "colorSuccessHover": { "value": "#73d13d" }, - "colorSuccessTextHover": { "value": "#237804" }, - "colorSuccessText": { "value": "#135200" }, - "colorSuccessTextActive": { "value": "#092b00" }, - "colorWarningHover": { "value": "#ffc53d" }, - "colorWarningTextHover": { "value": "#ad6800" }, - "colorWarningText": { "value": "#874d00" }, - "colorWarningTextActive": { "value": "#613400" }, - "borderRadiusLG": { "value": "16px" }, - "mpBrandPrimary.1": { "value": "#f8f6fb" }, - "mpBrandPrimary.2": { "value": "#ebe8f8" }, - "mpBrandPrimary.3": { "value": "#dbceff" }, - "mpBrandPrimary.4": { "value": "#c3aeff" }, - "mpBrandPrimary.5": { "value": "#ab8eff" }, - "mpBrandPrimary.6": { "value": "#8255ff" }, - "mpBrandPrimary.7": { "value": "#5f29f8" }, - "mpBrandPrimary.8": { "value": "#3600d1" }, - "mpBrandPrimary.9": { "value": "#2c00aa" }, - "mpBrandPrimary.10": { "value": "#20007a" }, - "mpBrandSecondary.1": { "value": "#ffffff" }, - "mpBrandSecondary.2": { "value": "#faf9f8" }, - "mpBrandSecondary.3": { "value": "#eceae9" }, - "mpBrandSecondary.4": { "value": "#dcdcd8" }, - "mpBrandSecondary.5": { "value": "#babbb5" }, - "mpBrandSecondary.6": { "value": "#717368" }, - "mpBrandSecondary.7": { "value": "#505249" }, - "mpBrandSecondary.8": { "value": "#2c2d2b" }, - "mpBrandSecondary.9": { "value": "#212020" }, - "mpBrandSecondary.10": { "value": "#0f0e0e" }, - "mpColorBorderDisabled": { "value": "#dcdcd8" }, - "mpColorIconStrong": { "value": "#0f0e0e" }, - "mpColorIconBrand": { "value": "#20007a" }, - "mpIconSizeXS": { "value": "12px" }, - "mpIconSizeSM": { "value": "16px" }, - "mpIconSizeMD": { "value": "20px" }, - "mpIconSizeLG": { "value": "24px" }, - "mpIconSizeXL": { "value": "28px" }, - "mpIconSizeXXL": { "value": "32px" }, - "mpIconSizeXXXL": { "value": "40px" }, - "mpIconSizeXXXXL": { "value": "48px" }, - "mpQueryItem_borderWidth": { "value": "0 0 1px 0" }, - "mpQueryItem_borderColor": { "value": "#c3aeff" }, - "mpQueryItem_borderColor_active": { "value": "#3600d1" }, - "mpQueryItem_borderColor_disabled": { "value": "#dcdcd8" }, - "mpQueryItem_borderColor_error": { "value": "#f5222d" }, - "mpQueryItem_bgColor": { "value": "#ffffff" }, - "mpQueryItem_bgColor_hover": { "value": "#f8f6fb" }, - "mpQueryItem_bgColor_active": { "value": "#ebe8f8" }, - "mpQueryItem_bgColor_disabled": { "value": "#faf9f8" }, - "mpQueryItem_borderWidth_active": { "value": "0 0 2px 0" }, - "mpQueryItem_shadow_focus": { "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" }, - "mpQueryItem_color_disabled": { "value": "#505249" }, - "mpQueryItem|valueSelector_fontWeight": { "value": "500" }, - "mpQueryItem|valueSelector_color": { "value": "#20007a" }, - "mpQueryItem_padding": { "value": "4px" }, - "mpQueryItem_gap": { "value": "4px" }, - "mpQueryItem_height": { "value": "32px" }, - "mpQueryItem_borderRadius": { "value": "2px" }, - "mpQueryItem|action|primary_color": { "value": "#3600d1" }, - "mpQueryItem|action|secondary_color": { "value": "#505249" }, - "mpQueryItem|action_fontWeight": { "value": "400" }, - "mpQueryItem_shadow_active": { "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" }, - "mpQueryItem_shadow": { "value": "none" }, - "mpQueryItem_borderColor_focus": { "value": "#3600d1" }, - "mpQueryItem_borderColor_hover": { "value": "#3600d1" }, - "blue1": { "value": "#e6f4ff" }, - "blue2": { "value": "#bae0ff" }, - "blue3": { "value": "#91caff" }, - "blue4": { "value": "#69b1ff" }, - "blue5": { "value": "#4096ff" }, - "blue6": { "value": "#1677ff" }, - "blue7": { "value": "#0958d9" }, - "blue8": { "value": "#003eb3" }, - "blue9": { "value": "#002c8c" }, - "blue10": { "value": "#001d66" }, - "purple1": { "value": "#f9f0ff" }, - "purple2": { "value": "#efdbff" }, - "purple3": { "value": "#d3adf7" }, - "purple4": { "value": "#b37feb" }, - "purple5": { "value": "#9254de" }, - "purple6": { "value": "#722ed1" }, - "purple7": { "value": "#531dab" }, - "purple8": { "value": "#391085" }, - "purple9": { "value": "#22075e" }, - "purple10": { "value": "#120338" }, - "cyan1": { "value": "#e6fffb" }, - "cyan2": { "value": "#b5f5ec" }, - "cyan3": { "value": "#87e8de" }, - "cyan4": { "value": "#5cdbd3" }, - "cyan5": { "value": "#36cfc9" }, - "cyan6": { "value": "#13c2c2" }, - "cyan7": { "value": "#08979c" }, - "cyan8": { "value": "#006d75" }, - "cyan9": { "value": "#00474f" }, - "cyan10": { "value": "#002329" }, - "green1": { "value": "#f6ffed" }, - "green2": { "value": "#d9f7be" }, - "green3": { "value": "#b7eb8f" }, - "green4": { "value": "#95de64" }, - "green5": { "value": "#73d13d" }, - "green6": { "value": "#52c41a" }, - "green7": { "value": "#389e0d" }, - "green8": { "value": "#237804" }, - "green9": { "value": "#135200" }, - "green10": { "value": "#092b00" }, - "magenta1": { "value": "#fff0f6" }, - "magenta2": { "value": "#ffd6e7" }, - "magenta3": { "value": "#ffadd2" }, - "magenta4": { "value": "#ff85c0" }, - "magenta5": { "value": "#f759ab" }, - "magenta6": { "value": "#eb2f96" }, - "magenta7": { "value": "#c41d7f" }, - "magenta8": { "value": "#9e1068" }, - "magenta9": { "value": "#780650" }, - "magenta10": { "value": "#520339" }, - "pink1": { "value": "#fff0f6" }, - "pink2": { "value": "#ffd6e7" }, - "pink3": { "value": "#ffadd2" }, - "pink4": { "value": "#ff85c0" }, - "pink5": { "value": "#f759ab" }, - "pink6": { "value": "#eb2f96" }, - "pink7": { "value": "#c41d7f" }, - "pink8": { "value": "#9e1068" }, - "pink9": { "value": "#780650" }, - "pink10": { "value": "#520339" }, - "red1": { "value": "#fff1f0" }, - "red2": { "value": "#ffccc7" }, - "red3": { "value": "#ffa39e" }, - "red4": { "value": "#ff7875" }, - "red5": { "value": "#ff4d4f" }, - "red6": { "value": "#f5222d" }, - "red7": { "value": "#cf1322" }, - "red8": { "value": "#a8071a" }, - "red9": { "value": "#820014" }, - "red10": { "value": "#5c0011" }, - "orange1": { "value": "#fff7e6" }, - "orange2": { "value": "#ffe7ba" }, - "orange3": { "value": "#ffd591" }, - "orange4": { "value": "#ffc069" }, - "orange5": { "value": "#ffa940" }, - "orange6": { "value": "#fa8c16" }, - "orange7": { "value": "#d46b08" }, - "orange8": { "value": "#ad4e00" }, - "orange9": { "value": "#873800" }, - "orange10": { "value": "#612500" }, - "yellow1": { "value": "#feffe6" }, - "yellow2": { "value": "#ffffb8" }, - "yellow3": { "value": "#fffb8f" }, - "yellow4": { "value": "#fff566" }, - "yellow5": { "value": "#ffec3d" }, - "yellow6": { "value": "#fadb14" }, - "yellow7": { "value": "#d4b106" }, - "yellow8": { "value": "#ad8b00" }, - "yellow9": { "value": "#876800" }, - "yellow10": { "value": "#614700" }, - "volcano1": { "value": "#fff2e8" }, - "volcano2": { "value": "#ffd8bf" }, - "volcano3": { "value": "#ffbb96" }, - "volcano4": { "value": "#ff9c6e" }, - "volcano5": { "value": "#ff7a45" }, - "volcano6": { "value": "#fa541c" }, - "volcano7": { "value": "#d4380d" }, - "volcano8": { "value": "#ad2102" }, - "volcano9": { "value": "#871400" }, - "volcano10": { "value": "#610b00" }, - "geekblue1": { "value": "#f0f5ff" }, - "geekblue2": { "value": "#d6e4ff" }, - "geekblue3": { "value": "#adc6ff" }, - "geekblue4": { "value": "#85a5ff" }, - "geekblue5": { "value": "#597ef7" }, - "geekblue6": { "value": "#2f54eb" }, - "geekblue7": { "value": "#1d39c4" }, - "geekblue8": { "value": "#10239e" }, - "geekblue9": { "value": "#061178" }, - "geekblue10": { "value": "#030852" }, - "gold1": { "value": "#fffbe6" }, - "gold2": { "value": "#fff1b8" }, - "gold3": { "value": "#ffe58f" }, - "gold4": { "value": "#ffd666" }, - "gold5": { "value": "#ffc53d" }, - "gold6": { "value": "#faad14" }, - "gold7": { "value": "#d48806" }, - "gold8": { "value": "#ad6800" }, - "gold9": { "value": "#874d00" }, - "gold10": { "value": "#613400" }, - "lime1": { "value": "#fcffe6" }, - "lime2": { "value": "#f4ffb8" }, - "lime3": { "value": "#eaff8f" }, - "lime4": { "value": "#d3f261" }, - "lime5": { "value": "#bae637" }, - "lime6": { "value": "#a0d911" }, - "lime7": { "value": "#7cb305" }, - "lime8": { "value": "#5b8c00" }, - "lime9": { "value": "#3f6600" }, - "lime10": { "value": "#254000" }, - "colorText": { "value": "rgba(0, 0, 0, 0.88)" }, - "colorTextSecondary": { "value": "rgba(0, 0, 0, 0.65)" }, - "colorTextTertiary": { "value": "rgba(0, 0, 0, 0.45)" }, - "colorTextQuaternary": { "value": "rgba(0, 0, 0, 0.25)" }, - "colorBgLayout": { "value": "#f5f5f5" }, - "colorBgContainer": { "value": "#ffffff" }, - "colorBgElevated": { "value": "#ffffff" }, - "colorBgSpotlight": { "value": "rgba(0, 0, 0, 0.85)" }, - "colorBgBlur": { "value": "transparent" }, - "colorSuccessBg": { "value": "#f6ffed" }, - "colorSuccessBgHover": { "value": "#d9f7be" }, - "colorSuccessBorder": { "value": "#b7eb8f" }, - "colorSuccessBorderHover": { "value": "#95de64" }, - "colorSuccessActive": { "value": "#389e0d" }, - "colorErrorBg": { "value": "#fff2f0" }, - "colorErrorBgHover": { "value": "#fff1f0" }, - "colorErrorBgActive": { "value": "#ffccc7" }, - "colorErrorBorder": { "value": "#ffccc7" }, - "colorErrorBorderHover": { "value": "#ffa39e" }, - "colorErrorHover": { "value": "#ff7875" }, - "colorErrorActive": { "value": "#d9363e" }, - "colorErrorTextHover": { "value": "#ff7875" }, - "colorErrorText": { "value": "#ff4d4f" }, - "colorErrorTextActive": { "value": "#d9363e" }, - "colorWarningBg": { "value": "#fffbe6" }, - "colorWarningBgHover": { "value": "#fff1b8" }, - "colorWarningBorder": { "value": "#ffe58f" }, - "colorWarningBorderHover": { "value": "#ffd666" }, - "colorWarningActive": { "value": "#d48806" }, - "colorInfoBg": { "value": "#e6f4ff" }, - "colorInfoBgHover": { "value": "#bae0ff" }, - "colorInfoBorder": { "value": "#91caff" }, - "colorInfoBorderHover": { "value": "#69b1ff" }, - "colorInfoHover": { "value": "#69b1ff" }, - "colorInfoActive": { "value": "#0958d9" }, - "colorInfoTextHover": { "value": "#4096ff" }, - "colorInfoText": { "value": "#1677ff" }, - "colorInfoTextActive": { "value": "#0958d9" }, - "colorLinkActive": { "value": "#0958d9" }, - "colorBgMask": { "value": "rgba(0, 0, 0, 0.45)" }, - "colorWhite": { "value": "#fff" }, - "fontSizeSM": { "value": "12px" }, - "fontSizeLG": { "value": "16px" }, - "fontSizeXL": { "value": "20px" }, - "fontSizeHeading1": { "value": "38px" }, - "fontSizeHeading2": { "value": "30px" }, - "fontSizeHeading3": { "value": "24px" }, - "fontSizeHeading4": { "value": "20px" }, - "fontSizeHeading5": { "value": "16px" }, - "lineHeight": { "value": 1.5714285714285714 }, - "lineHeightLG": { "value": 1.5 }, - "lineHeightSM": { "value": 1.6666666666666667 }, - "fontHeight": { "value": "22px" }, - "fontHeightLG": { "value": "24px" }, - "fontHeightSM": { "value": "20px" }, - "lineHeightHeading1": { "value": 1.2105263157894737 }, - "lineHeightHeading2": { "value": 1.2666666666666666 }, - "lineHeightHeading3": { "value": 1.3333333333333333 }, - "lineHeightHeading4": { "value": 1.4 }, - "lineHeightHeading5": { "value": 1.5 }, - "sizeXXL": { "value": "48px" }, - "sizeXL": { "value": "32px" }, - "sizeLG": { "value": "24px" }, - "sizeMD": { "value": "20px" }, - "sizeMS": { "value": "16px" }, - "size": { "value": "16px" }, - "sizeSM": { "value": "12px" }, - "sizeXS": { "value": "8px" }, - "sizeXXS": { "value": "4px" }, - "controlHeightSM": { "value": "24px" }, - "controlHeightXS": { "value": "16px" }, - "controlHeightLG": { "value": "40px" }, - "motionDurationFast": { "value": "0.1s" }, - "motionDurationMid": { "value": "0.2s" }, - "motionDurationSlow": { "value": "0.3s" }, - "lineWidthBold": { "value": "2px" }, - "borderRadiusXS": { "value": "2px" }, - "borderRadiusSM": { "value": "6px" }, - "borderRadiusOuter": { "value": "6px" }, - "colorFillContent": { "value": "rgba(32, 0, 122, 0.06)" }, - "colorFillContentHover": { "value": "rgba(15, 14, 14, 0.15)" }, - "colorFillAlter": { "value": "rgba(32, 0, 122, 0.03)" }, - "colorBgContainerDisabled": { "value": "rgba(15, 14, 14, 0.04)" }, - "colorBorderBg": { "value": "#ffffff" }, - "colorSplit": { "value": "rgba(44, 22, 11, 0.09)" }, - "colorTextPlaceholder": { "value": "rgba(0, 0, 0, 0.25)" }, - "colorTextDisabled": { "value": "rgba(0, 0, 0, 0.25)" }, - "colorTextHeading": { "value": "rgba(0, 0, 0, 0.88)" }, - "colorTextLabel": { "value": "rgba(0, 0, 0, 0.65)" }, - "colorTextDescription": { "value": "rgba(0, 0, 0, 0.45)" }, - "colorTextLightSolid": { "value": "#fff" }, - "colorHighlight": { "value": "#ff4d4f" }, - "colorBgTextHover": { "value": "rgba(32, 0, 122, 0.06)" }, - "colorBgTextActive": { "value": "rgba(15, 14, 14, 0.15)" }, - "colorIcon": { "value": "rgba(0, 0, 0, 0.45)" }, - "colorIconHover": { "value": "rgba(0, 0, 0, 0.88)" }, - "fontSizeIcon": { "value": "12px" }, - "lineWidthFocus": { "value": "4px" }, - "controlOutlineWidth": { "value": "2px" }, - "controlInteractiveSize": { "value": "16px" }, - "controlItemBgActiveDisabled": { "value": "rgba(15, 14, 14, 0.15)" }, - "controlTmpOutline": { "value": "rgba(32, 0, 122, 0.03)" }, - "fontWeightStrong": { "value": 600 }, - "opacityLoading": { "value": 0.65 }, - "linkDecoration": { "value": "none" }, - "linkHoverDecoration": { "value": "none" }, - "linkFocusDecoration": { "value": "none" }, - "controlPaddingHorizontal": { "value": "12px" }, - "controlPaddingHorizontalSM": { "value": "8px" }, - "paddingXXS": { "value": "4px" }, - "paddingXS": { "value": "8px" }, - "paddingSM": { "value": "12px" }, - "padding": { "value": "16px" }, - "paddingMD": { "value": "20px" }, - "paddingLG": { "value": "24px" }, - "paddingXL": { "value": "32px" }, - "paddingContentHorizontalLG": { "value": "24px" }, - "paddingContentVerticalLG": { "value": "16px" }, - "paddingContentHorizontal": { "value": "16px" }, - "paddingContentVertical": { "value": "12px" }, - "paddingContentHorizontalSM": { "value": "16px" }, - "paddingContentVerticalSM": { "value": "8px" }, - "marginXXS": { "value": "4px" }, - "marginXS": { "value": "8px" }, - "marginSM": { "value": "12px" }, - "margin": { "value": "16px" }, - "marginMD": { "value": "20px" }, - "marginLG": { "value": "24px" }, - "marginXL": { "value": "32px" }, - "marginXXL": { "value": "48px" }, + "fontFamilyCode": { + "value": "'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace" + }, + "fontSize": { + "value": "14px" + }, + "lineWidth": { + "value": "1px" + }, + "lineType": { + "value": "solid" + }, + "motionUnit": { + "value": 0.1 + }, + "motionBase": { + "value": 0 + }, + "motionEaseOutCirc": { + "value": "cubic-bezier(0.08, 0.82, 0.17, 1)" + }, + "motionEaseInOutCirc": { + "value": "cubic-bezier(0.78, 0.14, 0.15, 0.86)" + }, + "motionEaseOut": { + "value": "cubic-bezier(0.215, 0.61, 0.355, 1)" + }, + "motionEaseInOut": { + "value": "cubic-bezier(0.645, 0.045, 0.355, 1)" + }, + "motionEaseOutBack": { + "value": "cubic-bezier(0.12, 0.4, 0.29, 1.46)" + }, + "motionEaseInBack": { + "value": "cubic-bezier(0.71, -0.46, 0.88, 0.6)" + }, + "motionEaseInQuint": { + "value": "cubic-bezier(0.755, 0.05, 0.855, 0.06)" + }, + "motionEaseOutQuint": { + "value": "cubic-bezier(0.23, 1, 0.32, 1)" + }, + "borderRadius": { + "value": "6px" + }, + "sizeUnit": { + "value": "4px" + }, + "sizeStep": { + "value": "4px" + }, + "sizePopupArrow": { + "value": "16px" + }, + "controlHeight": { + "value": "32px" + }, + "zIndexBase": { + "value": 0 + }, + "zIndexPopupBase": { + "value": 1000 + }, + "opacityImage": { + "value": 1 + }, + "wireframe": { + "value": false + }, + "motion": { + "value": true + }, + "colorLinkHover": { + "value": "#ab8eff" + }, + "controlOutline": { + "value": "rgba(54, 0, 209, 0.1)" + }, + "colorWarningOutline": { + "value": "#fffbe6" + }, + "colorErrorOutline": { + "value": "#fff2f0" + }, + "controlItemBgHover": { + "value": "#f8f6fb" + }, + "controlItemBgActive": { + "value": "#ebe8f8" + }, + "controlItemBgActiveHover": { + "value": "#c3aeff" + }, + "colorText": { + "value": "rgba(0, 0, 0, 0.95)" + }, + "colorTextSecondary": { + "value": "rgba(0, 0, 0, 0.75)" + }, + "colorTextTertiary": { + "value": "rgba(0, 0, 0, 0.55)" + }, + "colorTextQuaternary": { + "value": "rgba(0, 0, 0, 0.4)" + }, + "colorFill": { + "value": "rgba(15, 14, 14, 0.15)" + }, + "colorFillSecondary": { + "value": "rgba(32, 0, 122, 0.06)" + }, + "colorFillTertiary": { + "value": "rgba(15, 14, 14, 0.04)" + }, + "colorFillQuaternary": { + "value": "rgba(32, 0, 122, 0.03)" + }, + "colorBorder": { + "value": "#c3aeff" + }, + "colorBorderSecondary": { + "value": "#eceae9" + }, + "colorPrimaryBg": { + "value": "#f8f6fb" + }, + "colorPrimaryBgHover": { + "value": "#ebe8f8" + }, + "colorPrimaryBorder": { + "value": "#c3aeff" + }, + "colorPrimaryBorderHover": { + "value": "#ab8eff" + }, + "colorPrimaryHover": { + "value": "#ab8eff" + }, + "colorPrimaryActive": { + "value": "#8255ff" + }, + "colorPrimaryTextHover": { + "value": "#5f29f8" + }, + "colorPrimaryText": { + "value": "#2c00aa" + }, + "colorPrimaryTextActive": { + "value": "#20007a" + }, + "colorSuccessHover": { + "value": "#73d13d" + }, + "colorSuccessTextHover": { + "value": "#237804" + }, + "colorSuccessText": { + "value": "#135200" + }, + "colorSuccessTextActive": { + "value": "#092b00" + }, + "colorWarningHover": { + "value": "#ffc53d" + }, + "colorWarningTextHover": { + "value": "#ad6800" + }, + "colorWarningText": { + "value": "#874d00" + }, + "colorWarningTextActive": { + "value": "#613400" + }, + "colorInfoBg": { + "value": "#f8f6fb" + }, + "colorInfoBgHover": { + "value": "#ebe8f8" + }, + "colorInfoBorder": { + "value": "#c3aeff" + }, + "colorInfoBorderHover": { + "value": "#ab8eff" + }, + "colorInfoHover": { + "value": "#ab8eff" + }, + "colorInfoActive": { + "value": "#8255ff" + }, + "colorInfoTextHover": { + "value": "#5f29f8" + }, + "colorInfoText": { + "value": "#2c00aa" + }, + "colorInfoTextActive": { + "value": "#20007a" + }, + "mpBrandPrimary.1": { + "value": "#f8f6fb" + }, + "mpBrandPrimary.2": { + "value": "#ebe8f8" + }, + "mpBrandPrimary.3": { + "value": "#dbceff" + }, + "mpBrandPrimary.4": { + "value": "#c3aeff" + }, + "mpBrandPrimary.5": { + "value": "#ab8eff" + }, + "mpBrandPrimary.6": { + "value": "#8255ff" + }, + "mpBrandPrimary.7": { + "value": "#5f29f8" + }, + "mpBrandPrimary.8": { + "value": "#3600d1" + }, + "mpBrandPrimary.9": { + "value": "#2c00aa" + }, + "mpBrandPrimary.10": { + "value": "#20007a" + }, + "mpBrandSecondary.1": { + "value": "#ffffff" + }, + "mpBrandSecondary.2": { + "value": "#faf9f8" + }, + "mpBrandSecondary.3": { + "value": "#eceae9" + }, + "mpBrandSecondary.4": { + "value": "#dcdcd8" + }, + "mpBrandSecondary.5": { + "value": "#babbb5" + }, + "mpBrandSecondary.6": { + "value": "#717368" + }, + "mpBrandSecondary.7": { + "value": "#505249" + }, + "mpBrandSecondary.8": { + "value": "#2c2d2b" + }, + "mpBrandSecondary.9": { + "value": "#212020" + }, + "mpBrandSecondary.10": { + "value": "#0f0e0e" + }, + "mpColorBorderDisabled": { + "value": "#dcdcd8" + }, + "mpColorIconStrong": { + "value": "#0f0e0e" + }, + "mpColorIconBrand": { + "value": "#20007a" + }, + "mpIconSizeXS": { + "value": "12px" + }, + "mpIconSizeSM": { + "value": "16px" + }, + "mpIconSizeMD": { + "value": "20px" + }, + "mpIconSizeLG": { + "value": "24px" + }, + "mpIconSizeXL": { + "value": "28px" + }, + "mpIconSizeXXL": { + "value": "32px" + }, + "mpIconSizeXXXL": { + "value": "40px" + }, + "mpIconSizeXXXXL": { + "value": "48px" + }, + "mpQueryItem_height": { + "value": "32px" + }, + "mpQueryItem_padding": { + "value": "4px" + }, + "mpQueryItem_gap": { + "value": "4px" + }, + "mpQueryItem_borderWidth": { + "value": "0 0 1px 0" + }, + "mpQueryItem_borderWidth_active": { + "value": "0 0 2px 0" + }, + "mpQueryItem_borderRadius": { + "value": "2px" + }, + "mpQueryItem_borderColor": { + "value": "#c3aeff" + }, + "mpQueryItem_borderColor_focus": { + "value": "#3600d1" + }, + "mpQueryItem_borderColor_hover": { + "value": "#3600d1" + }, + "mpQueryItem_borderColor_active": { + "value": "#3600d1" + }, + "mpQueryItem_borderColor_disabled": { + "value": "#dcdcd8" + }, + "mpQueryItem_borderColor_error": { + "value": "#ff4d4f" + }, + "mpQueryItem_bgColor": { + "value": "#ffffff" + }, + "mpQueryItem_bgColor_hover": { + "value": "#f8f6fb" + }, + "mpQueryItem_bgColor_active": { + "value": "#ebe8f8" + }, + "mpQueryItem_bgColor_disabled": { + "value": "rgba(15, 14, 14, 0.04)" + }, + "mpQueryItem_color_disabled": { + "value": "rgba(0, 0, 0, 0.4)" + }, + "mpQueryItem_shadow": { + "value": "none" + }, + "mpQueryItem_shadow_focus": { + "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" + }, + "mpQueryItem_shadow_active": { + "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" + }, + "mpQueryItem|valueSelector_fontWeight": { + "value": "500" + }, + "mpQueryItem|valueSelector_color": { + "value": "#20007a" + }, + "mpQueryItem|action|primary_color": { + "value": "#3600d1" + }, + "mpQueryItem|action|secondary_color": { + "value": "rgba(0, 0, 0, 0.55)" + }, + "mpQueryItem|action_fontWeight": { + "value": "400" + }, + "blue1": { + "value": "#e6f4ff" + }, + "blue2": { + "value": "#bae0ff" + }, + "blue3": { + "value": "#91caff" + }, + "blue4": { + "value": "#69b1ff" + }, + "blue5": { + "value": "#4096ff" + }, + "blue6": { + "value": "#1677ff" + }, + "blue7": { + "value": "#0958d9" + }, + "blue8": { + "value": "#003eb3" + }, + "blue9": { + "value": "#002c8c" + }, + "blue10": { + "value": "#001d66" + }, + "purple1": { + "value": "#f9f0ff" + }, + "purple2": { + "value": "#efdbff" + }, + "purple3": { + "value": "#d3adf7" + }, + "purple4": { + "value": "#b37feb" + }, + "purple5": { + "value": "#9254de" + }, + "purple6": { + "value": "#722ed1" + }, + "purple7": { + "value": "#531dab" + }, + "purple8": { + "value": "#391085" + }, + "purple9": { + "value": "#22075e" + }, + "purple10": { + "value": "#120338" + }, + "cyan1": { + "value": "#e6fffb" + }, + "cyan2": { + "value": "#b5f5ec" + }, + "cyan3": { + "value": "#87e8de" + }, + "cyan4": { + "value": "#5cdbd3" + }, + "cyan5": { + "value": "#36cfc9" + }, + "cyan6": { + "value": "#13c2c2" + }, + "cyan7": { + "value": "#08979c" + }, + "cyan8": { + "value": "#006d75" + }, + "cyan9": { + "value": "#00474f" + }, + "cyan10": { + "value": "#002329" + }, + "green1": { + "value": "#f6ffed" + }, + "green2": { + "value": "#d9f7be" + }, + "green3": { + "value": "#b7eb8f" + }, + "green4": { + "value": "#95de64" + }, + "green5": { + "value": "#73d13d" + }, + "green6": { + "value": "#52c41a" + }, + "green7": { + "value": "#389e0d" + }, + "green8": { + "value": "#237804" + }, + "green9": { + "value": "#135200" + }, + "green10": { + "value": "#092b00" + }, + "magenta1": { + "value": "#fff0f6" + }, + "magenta2": { + "value": "#ffd6e7" + }, + "magenta3": { + "value": "#ffadd2" + }, + "magenta4": { + "value": "#ff85c0" + }, + "magenta5": { + "value": "#f759ab" + }, + "magenta6": { + "value": "#eb2f96" + }, + "magenta7": { + "value": "#c41d7f" + }, + "magenta8": { + "value": "#9e1068" + }, + "magenta9": { + "value": "#780650" + }, + "magenta10": { + "value": "#520339" + }, + "pink1": { + "value": "#fff0f6" + }, + "pink2": { + "value": "#ffd6e7" + }, + "pink3": { + "value": "#ffadd2" + }, + "pink4": { + "value": "#ff85c0" + }, + "pink5": { + "value": "#f759ab" + }, + "pink6": { + "value": "#eb2f96" + }, + "pink7": { + "value": "#c41d7f" + }, + "pink8": { + "value": "#9e1068" + }, + "pink9": { + "value": "#780650" + }, + "pink10": { + "value": "#520339" + }, + "red1": { + "value": "#fff1f0" + }, + "red2": { + "value": "#ffccc7" + }, + "red3": { + "value": "#ffa39e" + }, + "red4": { + "value": "#ff7875" + }, + "red5": { + "value": "#ff4d4f" + }, + "red6": { + "value": "#f5222d" + }, + "red7": { + "value": "#cf1322" + }, + "red8": { + "value": "#a8071a" + }, + "red9": { + "value": "#820014" + }, + "red10": { + "value": "#5c0011" + }, + "orange1": { + "value": "#fff7e6" + }, + "orange2": { + "value": "#ffe7ba" + }, + "orange3": { + "value": "#ffd591" + }, + "orange4": { + "value": "#ffc069" + }, + "orange5": { + "value": "#ffa940" + }, + "orange6": { + "value": "#fa8c16" + }, + "orange7": { + "value": "#d46b08" + }, + "orange8": { + "value": "#ad4e00" + }, + "orange9": { + "value": "#873800" + }, + "orange10": { + "value": "#612500" + }, + "yellow1": { + "value": "#feffe6" + }, + "yellow2": { + "value": "#ffffb8" + }, + "yellow3": { + "value": "#fffb8f" + }, + "yellow4": { + "value": "#fff566" + }, + "yellow5": { + "value": "#ffec3d" + }, + "yellow6": { + "value": "#fadb14" + }, + "yellow7": { + "value": "#d4b106" + }, + "yellow8": { + "value": "#ad8b00" + }, + "yellow9": { + "value": "#876800" + }, + "yellow10": { + "value": "#614700" + }, + "volcano1": { + "value": "#fff2e8" + }, + "volcano2": { + "value": "#ffd8bf" + }, + "volcano3": { + "value": "#ffbb96" + }, + "volcano4": { + "value": "#ff9c6e" + }, + "volcano5": { + "value": "#ff7a45" + }, + "volcano6": { + "value": "#fa541c" + }, + "volcano7": { + "value": "#d4380d" + }, + "volcano8": { + "value": "#ad2102" + }, + "volcano9": { + "value": "#871400" + }, + "volcano10": { + "value": "#610b00" + }, + "geekblue1": { + "value": "#f0f5ff" + }, + "geekblue2": { + "value": "#d6e4ff" + }, + "geekblue3": { + "value": "#adc6ff" + }, + "geekblue4": { + "value": "#85a5ff" + }, + "geekblue5": { + "value": "#597ef7" + }, + "geekblue6": { + "value": "#2f54eb" + }, + "geekblue7": { + "value": "#1d39c4" + }, + "geekblue8": { + "value": "#10239e" + }, + "geekblue9": { + "value": "#061178" + }, + "geekblue10": { + "value": "#030852" + }, + "gold1": { + "value": "#fffbe6" + }, + "gold2": { + "value": "#fff1b8" + }, + "gold3": { + "value": "#ffe58f" + }, + "gold4": { + "value": "#ffd666" + }, + "gold5": { + "value": "#ffc53d" + }, + "gold6": { + "value": "#faad14" + }, + "gold7": { + "value": "#d48806" + }, + "gold8": { + "value": "#ad6800" + }, + "gold9": { + "value": "#874d00" + }, + "gold10": { + "value": "#613400" + }, + "lime1": { + "value": "#fcffe6" + }, + "lime2": { + "value": "#f4ffb8" + }, + "lime3": { + "value": "#eaff8f" + }, + "lime4": { + "value": "#d3f261" + }, + "lime5": { + "value": "#bae637" + }, + "lime6": { + "value": "#a0d911" + }, + "lime7": { + "value": "#7cb305" + }, + "lime8": { + "value": "#5b8c00" + }, + "lime9": { + "value": "#3f6600" + }, + "lime10": { + "value": "#254000" + }, + "colorBgLayout": { + "value": "#f5f5f5" + }, + "colorBgContainer": { + "value": "#ffffff" + }, + "colorBgElevated": { + "value": "#ffffff" + }, + "colorBgSpotlight": { + "value": "rgba(0, 0, 0, 0.85)" + }, + "colorBgBlur": { + "value": "transparent" + }, + "colorSuccessBg": { + "value": "#f6ffed" + }, + "colorSuccessBgHover": { + "value": "#d9f7be" + }, + "colorSuccessBorder": { + "value": "#b7eb8f" + }, + "colorSuccessBorderHover": { + "value": "#95de64" + }, + "colorSuccessActive": { + "value": "#389e0d" + }, + "colorErrorBg": { + "value": "#fff2f0" + }, + "colorErrorBgHover": { + "value": "#fff1f0" + }, + "colorErrorBorder": { + "value": "#ffccc7" + }, + "colorErrorBorderHover": { + "value": "#ffa39e" + }, + "colorErrorHover": { + "value": "#ff7875" + }, + "colorErrorActive": { + "value": "#d9363e" + }, + "colorErrorTextHover": { + "value": "#ff7875" + }, + "colorErrorText": { + "value": "#ff4d4f" + }, + "colorErrorTextActive": { + "value": "#d9363e" + }, + "colorWarningBg": { + "value": "#fffbe6" + }, + "colorWarningBgHover": { + "value": "#fff1b8" + }, + "colorWarningBorder": { + "value": "#ffe58f" + }, + "colorWarningBorderHover": { + "value": "#ffd666" + }, + "colorWarningActive": { + "value": "#d48806" + }, + "colorLinkActive": { + "value": "#2800ab" + }, + "colorBgMask": { + "value": "rgba(0, 0, 0, 0.45)" + }, + "colorWhite": { + "value": "#fff" + }, + "fontSizeSM": { + "value": "12px" + }, + "fontSizeLG": { + "value": "16px" + }, + "fontSizeXL": { + "value": "20px" + }, + "fontSizeHeading1": { + "value": "38px" + }, + "fontSizeHeading2": { + "value": "30px" + }, + "fontSizeHeading3": { + "value": "24px" + }, + "fontSizeHeading4": { + "value": "20px" + }, + "fontSizeHeading5": { + "value": "16px" + }, + "lineHeight": { + "value": 1.5714285714285714 + }, + "lineHeightLG": { + "value": 1.5 + }, + "lineHeightSM": { + "value": 1.6666666666666667 + }, + "fontHeight": { + "value": "22px" + }, + "fontHeightLG": { + "value": "24px" + }, + "fontHeightSM": { + "value": "20px" + }, + "lineHeightHeading1": { + "value": 1.2105263157894737 + }, + "lineHeightHeading2": { + "value": 1.2666666666666666 + }, + "lineHeightHeading3": { + "value": 1.3333333333333333 + }, + "lineHeightHeading4": { + "value": 1.4 + }, + "lineHeightHeading5": { + "value": 1.5 + }, + "sizeXXL": { + "value": "48px" + }, + "sizeXL": { + "value": "32px" + }, + "sizeLG": { + "value": "24px" + }, + "sizeMD": { + "value": "20px" + }, + "sizeMS": { + "value": "16px" + }, + "size": { + "value": "16px" + }, + "sizeSM": { + "value": "12px" + }, + "sizeXS": { + "value": "8px" + }, + "sizeXXS": { + "value": "4px" + }, + "controlHeightSM": { + "value": "24px" + }, + "controlHeightXS": { + "value": "16px" + }, + "controlHeightLG": { + "value": "40px" + }, + "motionDurationFast": { + "value": "0.1s" + }, + "motionDurationMid": { + "value": "0.2s" + }, + "motionDurationSlow": { + "value": "0.3s" + }, + "lineWidthBold": { + "value": "2px" + }, + "borderRadiusXS": { + "value": "2px" + }, + "borderRadiusSM": { + "value": "4px" + }, + "borderRadiusLG": { + "value": "8px" + }, + "borderRadiusOuter": { + "value": "4px" + }, + "colorFillContent": { + "value": "rgba(32, 0, 122, 0.06)" + }, + "colorFillContentHover": { + "value": "rgba(15, 14, 14, 0.15)" + }, + "colorFillAlter": { + "value": "rgba(32, 0, 122, 0.03)" + }, + "colorBgContainerDisabled": { + "value": "rgba(15, 14, 14, 0.04)" + }, + "colorBorderBg": { + "value": "#ffffff" + }, + "colorSplit": { + "value": "rgba(44, 22, 11, 0.09)" + }, + "colorTextPlaceholder": { + "value": "rgba(0, 0, 0, 0.4)" + }, + "colorTextDisabled": { + "value": "rgba(0, 0, 0, 0.4)" + }, + "colorTextHeading": { + "value": "rgba(0, 0, 0, 0.95)" + }, + "colorTextLabel": { + "value": "rgba(0, 0, 0, 0.75)" + }, + "colorTextDescription": { + "value": "rgba(0, 0, 0, 0.55)" + }, + "colorTextLightSolid": { + "value": "#fff" + }, + "colorHighlight": { + "value": "#ff4d4f" + }, + "colorBgTextHover": { + "value": "rgba(32, 0, 122, 0.06)" + }, + "colorBgTextActive": { + "value": "rgba(15, 14, 14, 0.15)" + }, + "colorIcon": { + "value": "rgba(0, 0, 0, 0.55)" + }, + "colorIconHover": { + "value": "rgba(0, 0, 0, 0.95)" + }, + "fontSizeIcon": { + "value": "12px" + }, + "lineWidthFocus": { + "value": "4px" + }, + "controlOutlineWidth": { + "value": "2px" + }, + "controlInteractiveSize": { + "value": "16px" + }, + "controlItemBgActiveDisabled": { + "value": "rgba(15, 14, 14, 0.15)" + }, + "controlTmpOutline": { + "value": "rgba(32, 0, 122, 0.03)" + }, + "fontWeightStrong": { + "value": 600 + }, + "opacityLoading": { + "value": 0.65 + }, + "linkDecoration": { + "value": "none" + }, + "linkHoverDecoration": { + "value": "none" + }, + "linkFocusDecoration": { + "value": "none" + }, + "controlPaddingHorizontal": { + "value": "12px" + }, + "controlPaddingHorizontalSM": { + "value": "8px" + }, + "paddingXXS": { + "value": "4px" + }, + "paddingXS": { + "value": "8px" + }, + "paddingSM": { + "value": "12px" + }, + "padding": { + "value": "16px" + }, + "paddingMD": { + "value": "20px" + }, + "paddingLG": { + "value": "24px" + }, + "paddingXL": { + "value": "32px" + }, + "paddingContentHorizontalLG": { + "value": "24px" + }, + "paddingContentVerticalLG": { + "value": "16px" + }, + "paddingContentHorizontal": { + "value": "16px" + }, + "paddingContentVertical": { + "value": "12px" + }, + "paddingContentHorizontalSM": { + "value": "16px" + }, + "paddingContentVerticalSM": { + "value": "8px" + }, + "marginXXS": { + "value": "4px" + }, + "marginXS": { + "value": "8px" + }, + "marginSM": { + "value": "12px" + }, + "margin": { + "value": "16px" + }, + "marginMD": { + "value": "20px" + }, + "marginLG": { + "value": "24px" + }, + "marginXL": { + "value": "32px" + }, + "marginXXL": { + "value": "48px" + }, "boxShadow": { "value": " 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) " }, @@ -403,24 +1184,60 @@ "boxShadowTertiary": { "value": " 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) " }, - "screenXS": { "value": "480px" }, - "screenXSMin": { "value": "480px" }, - "screenXSMax": { "value": "575px" }, - "screenSM": { "value": "576px" }, - "screenSMMin": { "value": "576px" }, - "screenSMMax": { "value": "767px" }, - "screenMD": { "value": "768px" }, - "screenMDMin": { "value": "768px" }, - "screenMDMax": { "value": "991px" }, - "screenLG": { "value": "992px" }, - "screenLGMin": { "value": "992px" }, - "screenLGMax": { "value": "1199px" }, - "screenXL": { "value": "1200px" }, - "screenXLMin": { "value": "1200px" }, - "screenXLMax": { "value": "1599px" }, - "screenXXL": { "value": "1600px" }, - "screenXXLMin": { "value": "1600px" }, - "boxShadowPopoverArrow": { "value": "2px 2px 5px rgba(0, 0, 0, 0.05)" }, + "screenXS": { + "value": "480px" + }, + "screenXSMin": { + "value": "480px" + }, + "screenXSMax": { + "value": "575px" + }, + "screenSM": { + "value": "576px" + }, + "screenSMMin": { + "value": "576px" + }, + "screenSMMax": { + "value": "767px" + }, + "screenMD": { + "value": "768px" + }, + "screenMDMin": { + "value": "768px" + }, + "screenMDMax": { + "value": "991px" + }, + "screenLG": { + "value": "992px" + }, + "screenLGMin": { + "value": "992px" + }, + "screenLGMax": { + "value": "1199px" + }, + "screenXL": { + "value": "1200px" + }, + "screenXLMin": { + "value": "1200px" + }, + "screenXLMax": { + "value": "1599px" + }, + "screenXXL": { + "value": "1600px" + }, + "screenXXLMin": { + "value": "1600px" + }, + "boxShadowPopoverArrow": { + "value": "2px 2px 5px rgba(0, 0, 0, 0.05)" + }, "boxShadowCard": { "value": " 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) " }, @@ -436,8 +1253,16 @@ "boxShadowDrawerDown": { "value": " 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) " }, - "boxShadowTabsOverflowLeft": { "value": "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)" }, - "boxShadowTabsOverflowRight": { "value": "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)" }, - "boxShadowTabsOverflowTop": { "value": "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)" }, - "boxShadowTabsOverflowBottom": { "value": "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)" } + "boxShadowTabsOverflowLeft": { + "value": "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)" + }, + "boxShadowTabsOverflowRight": { + "value": "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)" + }, + "boxShadowTabsOverflowTop": { + "value": "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)" + }, + "boxShadowTabsOverflowBottom": { + "value": "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)" + } } diff --git a/design/LightTheme.ts b/design/LightTheme.ts index 78a0100d0..9a41eff3d 100644 --- a/design/LightTheme.ts +++ b/design/LightTheme.ts @@ -13,6 +13,10 @@ export const LightTheme: IMpThemeConfig = { controlItemBgHover: '#f8f6fb', controlItemBgActive: '#ebe8f8', controlItemBgActiveHover: '#c3aeff', + colorText: 'rgba(0, 0, 0, 0.95)', + colorTextSecondary: 'rgba(0, 0, 0, 0.75)', + colorTextTertiary: 'rgba(0, 0, 0, 0.55)', + colorTextQuaternary: 'rgba(0, 0, 0, 0.4)', colorFill: 'rgba(15, 14, 14, 0.15)', colorFillSecondary: 'rgba(32, 0, 122, 0.06)', colorFillTertiary: 'rgba(15, 14, 14, 0.04)', @@ -36,9 +40,17 @@ export const LightTheme: IMpThemeConfig = { colorWarningTextHover: '#ad6800', colorWarningText: '#874d00', colorWarningTextActive: '#613400', + colorInfoBg: '#f8f6fb', + colorInfoBgHover: '#ebe8f8', + colorInfoBorder: '#c3aeff', + colorInfoBorderHover: '#ab8eff', + colorInfoHover: '#ab8eff', + colorInfoActive: '#8255ff', + colorInfoTextHover: '#5f29f8', + colorInfoText: '#2c00aa', + colorInfoTextActive: '#20007a', colorPrimary: '#3600d1', - borderRadiusLG: 16, - borderRadius: 8, + colorInfo: '#3600d1', 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'", fontFamilyCode: "'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace", @@ -73,31 +85,31 @@ export const LightTheme: IMpThemeConfig = { mpIconSizeXXL: 32, mpIconSizeXXXL: 40, mpIconSizeXXXXL: 48, + mpQueryItem_height: 32, + mpQueryItem_padding: 4, + mpQueryItem_gap: 4, mpQueryItem_borderWidth: '0 0 1px 0', + mpQueryItem_borderWidth_active: '0 0 2px 0', + mpQueryItem_borderRadius: 2, mpQueryItem_borderColor: '#c3aeff', + mpQueryItem_borderColor_focus: '#3600d1', + mpQueryItem_borderColor_hover: '#3600d1', mpQueryItem_borderColor_active: '#3600d1', mpQueryItem_borderColor_disabled: '#dcdcd8', - mpQueryItem_borderColor_error: '#f5222d', + mpQueryItem_borderColor_error: '#ff4d4f', mpQueryItem_bgColor: '#ffffff', mpQueryItem_bgColor_hover: '#f8f6fb', mpQueryItem_bgColor_active: '#ebe8f8', - mpQueryItem_bgColor_disabled: '#faf9f8', - mpQueryItem_borderWidth_active: '0 0 2px 0', + mpQueryItem_bgColor_disabled: 'rgba(15, 14, 14, 0.04)', + mpQueryItem_color_disabled: 'rgba(0, 0, 0, 0.4)', + mpQueryItem_shadow: 'none', mpQueryItem_shadow_focus: '0 0 0 2px rgba(54, 0, 209, 0.1)', - mpQueryItem_color_disabled: '#505249', + mpQueryItem_shadow_active: '0 0 0 2px rgba(54, 0, 209, 0.1)', 'mpQueryItem|valueSelector_fontWeight': '500', 'mpQueryItem|valueSelector_color': '#20007a', - mpQueryItem_padding: 4, - mpQueryItem_gap: 4, - mpQueryItem_height: 32, - mpQueryItem_borderRadius: 2, 'mpQueryItem|action|primary_color': '#3600d1', - 'mpQueryItem|action|secondary_color': '#505249', + 'mpQueryItem|action|secondary_color': 'rgba(0, 0, 0, 0.55)', 'mpQueryItem|action_fontWeight': '400', - mpQueryItem_shadow_active: '0 0 0 2px rgba(54, 0, 209, 0.1)', - mpQueryItem_shadow: 'none', - mpQueryItem_borderColor_focus: '#3600d1', - mpQueryItem_borderColor_hover: '#3600d1', }, components: { Steps: { diff --git a/src/components/general/Icon/icon.css b/src/components/general/Icon/icon.css index 7e3d3385d..8bf83b32e 100644 --- a/src/components/general/Icon/icon.css +++ b/src/components/general/Icon/icon.css @@ -71,7 +71,7 @@ } .icon-color-default { - color: var(--color-icon); + color: var(--mp-color-icon-strong); } .icon-color-brand { diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 6c637daa2..0f6fdc738 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,27 +1,26 @@ :root { --blue: #1677ff; - --purple: #722ed1; - --cyan: #13c2c2; - --green: #52c41a; - --magenta: #eb2f96; + --purple: #722ED1; + --cyan: #13C2C2; + --green: #52C41A; + --magenta: #EB2F96; --pink: #eb2f96; - --red: #f5222d; - --orange: #fa8c16; - --yellow: #fadb14; - --volcano: #fa541c; - --geekblue: #2f54eb; - --gold: #faad14; - --lime: #a0d911; + --red: #F5222D; + --orange: #FA8C16; + --yellow: #FADB14; + --volcano: #FA541C; + --geekblue: #2F54EB; + --gold: #FAAD14; + --lime: #A0D911; --color-primary: #3600d1; --color-success: #52c41a; --color-warning: #faad14; - --color-error: #f5222d; - --color-info: #1677ff; - --color-link: #1677ff; - --color-text-base: #0f0e0e; + --color-error: #ff4d4f; + --color-info: #3600d1; + --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: '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-size: 14px; --line-width: 1px; @@ -36,7 +35,7 @@ --motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); --motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --border-radius: 8px; + --border-radius: 6px; --size-unit: 4px; --size-step: 4px; --size-popup-arrow: 16px; @@ -49,23 +48,20 @@ --color-link-hover: #ab8eff; --control-outline: rgba(54, 0, 209, 0.1); --color-warning-outline: #fffbe6; - --color-error-outline: #fff1f0; + --color-error-outline: #fff2f0; --control-item-bg-hover: #f8f6fb; --control-item-bg-active: #ebe8f8; --control-item-bg-active-hover: #c3aeff; - --color-text: #0f0e0e; - --color-text-secondary: #212020; - --color-text-tertiary: #2c2d2b; - --color-text-quaternary: #505249; - --color-fill: #dcdcd8; - --color-fill-secondary: #ebe8f8; - --color-fill-tertiary: #faf9f8; - --color-fill-quaternary: #f8f6fb; - --color-bg-layout: #ffffff; - --color-bg-spotlight: #2c2d2b; + --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-split: #eceae9; --color-primary-bg: #f8f6fb; --color-primary-bg-hover: #ebe8f8; --color-primary-border: #c3aeff; @@ -83,17 +79,15 @@ --color-warning-text-hover: #ad6800; --color-warning-text: #874d00; --color-warning-text-active: #613400; - --color-error-bg: #fff1f0; - --color-error-bg-hover: #ffccc7; - --color-error-border: #ffa39e; - --color-error-border-hover: #ff7875; - --color-error-hover: #ff4d4f; - --color-error-active: #cf1322; - --color-error-text-hover: #a8071a; - --color-error-text: #820014; - --color-error-text-active: #5c0011; - --color-bg-mask: rgba(0, 0, 0, 0.45); - --border-radius-lg: 16px; + --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-text-hover: #5f29f8; + --color-info-text: #2c00aa; + --color-info-text-active: #20007a; --mp-brand-primary-1: #f8f6fb; --mp-brand-primary-2: #ebe8f8; --mp-brand-primary-3: #dbceff; @@ -104,7 +98,7 @@ --mp-brand-primary-8: #3600d1; --mp-brand-primary-9: #2c00aa; --mp-brand-primary-10: #20007a; - --mp-brand-secondary-1: #fff; + --mp-brand-secondary-1: #ffffff; --mp-brand-secondary-2: #faf9f8; --mp-brand-secondary-3: #eceae9; --mp-brand-secondary-4: #dcdcd8; @@ -125,31 +119,31 @@ --mp-icon-size-xxl: 32px; --mp-icon-size-xxxl: 40px; --mp-icon-size-xxxxl: 48px; + --mp-query-item-height: 32px; + --mp-query-item-padding: 4px; + --mp-query-item-gap: 4px; --mp-query-item-border-width: 0 0 1px 0; + --mp-query-item-border-width-active: 0 0 2px 0; + --mp-query-item-border-radius: 2px; --mp-query-item-border-color: #c3aeff; + --mp-query-item-border-color-focus: #3600d1; + --mp-query-item-border-color-hover: #3600d1; --mp-query-item-border-color-active: #3600d1; --mp-query-item-border-color-disabled: #dcdcd8; - --mp-query-item-border-color-error: #f5222d; + --mp-query-item-border-color-error: #ff4d4f; --mp-query-item-bg-color: #ffffff; --mp-query-item-bg-color-hover: #f8f6fb; --mp-query-item-bg-color-active: #ebe8f8; - --mp-query-item-bg-color-disabled: #faf9f8; - --mp-query-item-border-width-active: 0 0 2px 0; + --mp-query-item-bg-color-disabled: rgba(15, 14, 14, 0.04); + --mp-query-item-color-disabled: rgba(0, 0, 0, 0.4); + --mp-query-item-shadow: none; --mp-query-item-shadow-focus: 0 0 0 2px rgba(54, 0, 209, 0.1); - --mp-query-item-color-disabled: #505249; + --mp-query-item-shadow-active: 0 0 0 2px rgba(54, 0, 209, 0.1); --mp-query-item-value-selector-font-weight: 500; --mp-query-item-value-selector-color: #20007a; - --mp-query-item-padding: 4px; - --mp-query-item-gap: 4px; - --mp-query-item-height: 32px; - --mp-query-item-border-radius: 2px; --mp-query-item-action-primary-color: #3600d1; - --mp-query-item-action-secondary-color: #505249; + --mp-query-item-action-secondary-color: rgba(0, 0, 0, 0.55); --mp-query-item-action-font-weight: 400; - --mp-query-item-shadow-active: 0 0 0 2px rgba(54, 0, 209, 0.1); - --mp-query-item-shadow: none; - --mp-query-item-border-color-focus: #3600d1; - --mp-query-item-border-color-hover: #3600d1; --blue1: #e6f4ff; --blue2: #bae0ff; --blue3: #91caff; @@ -280,29 +274,32 @@ --lime8: #5b8c00; --lime9: #3f6600; --lime10: #254000; + --color-bg-layout: #f5f5f5; --color-bg-container: #ffffff; --color-bg-elevated: #ffffff; + --color-bg-spotlight: rgba(0, 0, 0, 0.85); --color-bg-blur: transparent; --color-success-bg: #f6ffed; --color-success-bg-hover: #d9f7be; --color-success-border: #b7eb8f; --color-success-border-hover: #95de64; --color-success-active: #389e0d; + --color-error-bg: #fff2f0; + --color-error-bg-hover: #fff1f0; + --color-error-border: #ffccc7; + --color-error-border-hover: #ffa39e; + --color-error-hover: #ff7875; + --color-error-active: #d9363e; + --color-error-text-hover: #ff7875; + --color-error-text: #ff4d4f; + --color-error-text-active: #d9363e; --color-warning-bg: #fffbe6; --color-warning-bg-hover: #fff1b8; --color-warning-border: #ffe58f; --color-warning-border-hover: #ffd666; --color-warning-active: #d48806; - --color-info-bg: #e6f4ff; - --color-info-bg-hover: #bae0ff; - --color-info-border: #91caff; - --color-info-border-hover: #69b1ff; - --color-info-hover: #69b1ff; - --color-info-active: #0958d9; - --color-info-text-hover: #4096ff; - --color-info-text: #1677ff; - --color-info-text-active: #0958d9; - --color-link-active: #0958d9; + --color-link-active: #2800ab; + --color-bg-mask: rgba(0, 0, 0, 0.45); --color-white: #fff; --font-size-sm: 12px; --font-size-lg: 16px; @@ -328,7 +325,7 @@ --size-lg: 24px; --size-md: 20px; --size-ms: 16px; - --size: 16rem; + --size: 16px; --size-sm: 12px; --size-xs: 8px; --size-xxs: 4px; @@ -340,30 +337,32 @@ --motion-duration-slow: 0.3s; --line-width-bold: 2px; --border-radius-xs: 2px; - --border-radius-sm: 6px; - --border-radius-outer: 6px; - --color-fill-content: #ebe8f8; - --color-fill-content-hover: #dcdcd8; - --color-fill-alter: #f8f6fb; - --color-bg-container-disabled: #faf9f8; + --border-radius-sm: 4px; + --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-border-bg: #ffffff; - --color-text-placeholder: #505249; - --color-text-disabled: #505249; - --color-text-heading: #0f0e0e; - --color-text-label: #212020; - --color-text-description: #2c2d2b; + --color-split: rgba(44, 22, 11, 0.09); + --color-text-placeholder: rgba(0, 0, 0, 0.4); + --color-text-disabled: rgba(0, 0, 0, 0.4); + --color-text-heading: rgba(0, 0, 0, 0.95); + --color-text-label: rgba(0, 0, 0, 0.75); + --color-text-description: rgba(0, 0, 0, 0.55); --color-text-light-solid: #fff; - --color-highlight: #f5222d; - --color-bg-text-hover: #ebe8f8; - --color-bg-text-active: #dcdcd8; - --color-icon: #2c2d2b; - --color-icon-hover: #0f0e0e; + --color-highlight: #ff4d4f; + --color-bg-text-hover: rgba(32, 0, 122, 0.06); + --color-bg-text-active: rgba(15, 14, 14, 0.15); + --color-icon: rgba(0, 0, 0, 0.55); + --color-icon-hover: rgba(0, 0, 0, 0.95); --font-size-icon: 12px; --line-width-focus: 4px; --control-outline-width: 2px; --control-interactive-size: 16px; - --control-item-bg-active-disabled: #dcdcd8; - --control-tmp-outline: #f8f6fb; + --control-item-bg-active-disabled: rgba(15, 14, 14, 0.15); + --control-tmp-outline: rgba(32, 0, 122, 0.03); --font-weight-strong: 600; --opacity-loading: 0.65; --link-decoration: none; @@ -392,11 +391,9 @@ --margin-lg: 24px; --margin-xl: 32px; --margin-xxl: 48px; - --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), - 0 2px 4px 0 rgba(0, 0, 0, 0.02); + --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02) ; --screen-xs: 480px; --screen-xs-min: 480px; --screen-xs-max: 575px; @@ -415,16 +412,11 @@ --screen-xxl: 1600px; --screen-xxl-min: 1600px; --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05); - --box-shadow-card: 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); - --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), - -9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), - 9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), - 0 -9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-card: 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) ; + --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) ; + --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) ; --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08); --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08); --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08); diff --git a/src/styles/style.ts b/src/styles/style.ts index 6d8fc365e..a81654c57 100644 --- a/src/styles/style.ts +++ b/src/styles/style.ts @@ -14,10 +14,10 @@ export const Lime = '#A0D911' export const ColorPrimary = '#3600d1' export const ColorSuccess = '#52c41a' export const ColorWarning = '#faad14' -export const ColorError = '#f5222d' -export const ColorInfo = '#1677ff' -export const ColorLink = '#1677ff' -export const ColorTextBase = '#0f0e0e' +export const ColorError = '#ff4d4f' +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'" @@ -35,7 +35,7 @@ export const MotionEaseOutBack = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)' export const MotionEaseInBack = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)' export const MotionEaseInQuint = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)' export const MotionEaseOutQuint = 'cubic-bezier(0.23, 1, 0.32, 1)' -export const BorderRadius = '8px' +export const BorderRadius = '6px' export const SizeUnit = '4px' export const SizeStep = '4px' export const SizePopupArrow = '16px' @@ -48,23 +48,20 @@ export const Motion = true export const ColorLinkHover = '#ab8eff' export const ControlOutline = 'rgba(54, 0, 209, 0.1)' export const ColorWarningOutline = '#fffbe6' -export const ColorErrorOutline = '#fff1f0' +export const ColorErrorOutline = '#fff2f0' export const ControlItemBgHover = '#f8f6fb' export const ControlItemBgActive = '#ebe8f8' export const ControlItemBgActiveHover = '#c3aeff' -export const ColorText = '#0f0e0e' -export const ColorTextSecondary = '#212020' -export const ColorTextTertiary = '#2c2d2b' -export const ColorTextQuaternary = '#505249' -export const ColorFill = '#dcdcd8' -export const ColorFillSecondary = '#ebe8f8' -export const ColorFillTertiary = '#faf9f8' -export const ColorFillQuaternary = '#f8f6fb' -export const ColorBgLayout = '#ffffff' -export const ColorBgSpotlight = '#2c2d2b' +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 ColorSplit = '#eceae9' export const ColorPrimaryBg = '#f8f6fb' export const ColorPrimaryBgHover = '#ebe8f8' export const ColorPrimaryBorder = '#c3aeff' @@ -82,17 +79,15 @@ export const ColorWarningHover = '#ffc53d' export const ColorWarningTextHover = '#ad6800' export const ColorWarningText = '#874d00' export const ColorWarningTextActive = '#613400' -export const ColorErrorBg = '#fff1f0' -export const ColorErrorBgHover = '#ffccc7' -export const ColorErrorBorder = '#ffa39e' -export const ColorErrorBorderHover = '#ff7875' -export const ColorErrorHover = '#ff4d4f' -export const ColorErrorActive = '#cf1322' -export const ColorErrorTextHover = '#a8071a' -export const ColorErrorText = '#820014' -export const ColorErrorTextActive = '#5c0011' -export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' -export const BorderRadiusLg = '16px' +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 ColorInfoTextHover = '#5f29f8' +export const ColorInfoText = '#2c00aa' +export const ColorInfoTextActive = '#20007a' export const MpBrandPrimary1 = '#f8f6fb' export const MpBrandPrimary2 = '#ebe8f8' export const MpBrandPrimary3 = '#dbceff' @@ -124,31 +119,31 @@ export const MpIconSizeXl = '28px' export const MpIconSizeXxl = '32px' export const MpIconSizeXxxl = '40px' export const MpIconSizeXxxxl = '48px' +export const MpQueryItemHeight = '32px' +export const MpQueryItemPadding = '4px' +export const MpQueryItemGap = '4px' export const MpQueryItemBorderWidth = '0 0 1px 0' +export const MpQueryItemBorderWidthActive = '0 0 2px 0' +export const MpQueryItemBorderRadius = '2px' export const MpQueryItemBorderColor = '#c3aeff' +export const MpQueryItemBorderColorFocus = '#3600d1' +export const MpQueryItemBorderColorHover = '#3600d1' export const MpQueryItemBorderColorActive = '#3600d1' export const MpQueryItemBorderColorDisabled = '#dcdcd8' -export const MpQueryItemBorderColorError = '#f5222d' +export const MpQueryItemBorderColorError = '#ff4d4f' export const MpQueryItemBgColor = '#ffffff' export const MpQueryItemBgColorHover = '#f8f6fb' export const MpQueryItemBgColorActive = '#ebe8f8' -export const MpQueryItemBgColorDisabled = '#faf9f8' -export const MpQueryItemBorderWidthActive = '0 0 2px 0' +export const MpQueryItemBgColorDisabled = 'rgba(15, 14, 14, 0.04)' +export const MpQueryItemColorDisabled = 'rgba(0, 0, 0, 0.4)' +export const MpQueryItemShadow = 'none' export const MpQueryItemShadowFocus = '0 0 0 2px rgba(54, 0, 209, 0.1)' -export const MpQueryItemColorDisabled = '#505249' +export const MpQueryItemShadowActive = '0 0 0 2px rgba(54, 0, 209, 0.1)' export const MpQueryItemValueSelectorFontWeight = '500' export const MpQueryItemValueSelectorColor = '#20007a' -export const MpQueryItemPadding = '4px' -export const MpQueryItemGap = '4px' -export const MpQueryItemHeight = '32px' -export const MpQueryItemBorderRadius = '2px' export const MpQueryItemActionPrimaryColor = '#3600d1' -export const MpQueryItemActionSecondaryColor = '#505249' +export const MpQueryItemActionSecondaryColor = 'rgba(0, 0, 0, 0.55)' export const MpQueryItemActionFontWeight = '400' -export const MpQueryItemShadowActive = '0 0 0 2px rgba(54, 0, 209, 0.1)' -export const MpQueryItemShadow = 'none' -export const MpQueryItemBorderColorFocus = '#3600d1' -export const MpQueryItemBorderColorHover = '#3600d1' export const Blue1 = '#e6f4ff' export const Blue2 = '#bae0ff' export const Blue3 = '#91caff' @@ -279,29 +274,32 @@ export const Lime7 = '#7cb305' export const Lime8 = '#5b8c00' export const Lime9 = '#3f6600' export const Lime10 = '#254000' +export const ColorBgLayout = '#f5f5f5' export const ColorBgContainer = '#ffffff' export const ColorBgElevated = '#ffffff' +export const ColorBgSpotlight = 'rgba(0, 0, 0, 0.85)' export const ColorBgBlur = 'transparent' export const ColorSuccessBg = '#f6ffed' export const ColorSuccessBgHover = '#d9f7be' export const ColorSuccessBorder = '#b7eb8f' export const ColorSuccessBorderHover = '#95de64' export const ColorSuccessActive = '#389e0d' +export const ColorErrorBg = '#fff2f0' +export const ColorErrorBgHover = '#fff1f0' +export const ColorErrorBorder = '#ffccc7' +export const ColorErrorBorderHover = '#ffa39e' +export const ColorErrorHover = '#ff7875' +export const ColorErrorActive = '#d9363e' +export const ColorErrorTextHover = '#ff7875' +export const ColorErrorText = '#ff4d4f' +export const ColorErrorTextActive = '#d9363e' export const ColorWarningBg = '#fffbe6' export const ColorWarningBgHover = '#fff1b8' export const ColorWarningBorder = '#ffe58f' export const ColorWarningBorderHover = '#ffd666' export const ColorWarningActive = '#d48806' -export const ColorInfoBg = '#e6f4ff' -export const ColorInfoBgHover = '#bae0ff' -export const ColorInfoBorder = '#91caff' -export const ColorInfoBorderHover = '#69b1ff' -export const ColorInfoHover = '#69b1ff' -export const ColorInfoActive = '#0958d9' -export const ColorInfoTextHover = '#4096ff' -export const ColorInfoText = '#1677ff' -export const ColorInfoTextActive = '#0958d9' -export const ColorLinkActive = '#0958d9' +export const ColorLinkActive = '#2800ab' +export const ColorBgMask = 'rgba(0, 0, 0, 0.45)' export const ColorWhite = '#fff' export const FontSizeSm = '12px' export const FontSizeLg = '16px' @@ -327,7 +325,7 @@ export const SizeXl = '32px' export const SizeLg = '24px' export const SizeMd = '20px' export const SizeMs = '16px' -export const Size = '16rem' +export const Size = '16px' export const SizeSm = '12px' export const SizeXs = '8px' export const SizeXxs = '4px' @@ -339,30 +337,32 @@ export const MotionDurationMid = '0.2s' export const MotionDurationSlow = '0.3s' export const LineWidthBold = '2px' export const BorderRadiusXs = '2px' -export const BorderRadiusSm = '6px' -export const BorderRadiusOuter = '6px' -export const ColorFillContent = '#ebe8f8' -export const ColorFillContentHover = '#dcdcd8' -export const ColorFillAlter = '#f8f6fb' -export const ColorBgContainerDisabled = '#faf9f8' +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 ColorBorderBg = '#ffffff' -export const ColorTextPlaceholder = '#505249' -export const ColorTextDisabled = '#505249' -export const ColorTextHeading = '#0f0e0e' -export const ColorTextLabel = '#212020' -export const ColorTextDescription = '#2c2d2b' +export const ColorSplit = 'rgba(44, 22, 11, 0.09)' +export const ColorTextPlaceholder = 'rgba(0, 0, 0, 0.4)' +export const ColorTextDisabled = 'rgba(0, 0, 0, 0.4)' +export const ColorTextHeading = 'rgba(0, 0, 0, 0.95)' +export const ColorTextLabel = 'rgba(0, 0, 0, 0.75)' +export const ColorTextDescription = 'rgba(0, 0, 0, 0.55)' export const ColorTextLightSolid = '#fff' -export const ColorHighlight = '#f5222d' -export const ColorBgTextHover = '#ebe8f8' -export const ColorBgTextActive = '#dcdcd8' -export const ColorIcon = '#2c2d2b' -export const ColorIconHover = '#0f0e0e' +export const ColorHighlight = '#ff4d4f' +export const ColorBgTextHover = 'rgba(32, 0, 122, 0.06)' +export const ColorBgTextActive = 'rgba(15, 14, 14, 0.15)' +export const ColorIcon = 'rgba(0, 0, 0, 0.55)' +export const ColorIconHover = 'rgba(0, 0, 0, 0.95)' export const FontSizeIcon = '12px' export const LineWidthFocus = '4px' export const ControlOutlineWidth = '2px' export const ControlInteractiveSize = '16px' -export const ControlItemBgActiveDisabled = '#dcdcd8' -export const ControlTmpOutline = '#f8f6fb' +export const ControlItemBgActiveDisabled = 'rgba(15, 14, 14, 0.15)' +export const ControlTmpOutline = 'rgba(32, 0, 122, 0.03)' export const FontWeightStrong = 600 export const OpacityLoading = 0.65 export const LinkDecoration = 'none'