feat: upgrade style

mParticle · Sep 20, 2024 · 8d61675 · 8d61675
1 parent e3bb862
commit 8d61675
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 85 deletions.
diff --git 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
@@ -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'