Skip to content

Commit

Permalink
fix: rollback variables/style (#310)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsiemens
danielsiemens authored Jun 25, 2024
1 parent 56967d9 commit efcaf5c
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 103 deletions.
131 changes: 69 additions & 62 deletions src/styles/_variables.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
: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: #ff4d4f;
--color-error: #f5222d;
--color-info: #1677ff;
--color-link: #1677ff;
--color-text-base: #000;
--color-text-base: #0f0e0e;
--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;
Expand Down Expand Up @@ -48,16 +49,23 @@
--color-link-hover: #ab8eff;
--control-outline: rgba(54, 0, 209, 0.1);
--color-warning-outline: #fffbe6;
--color-error-outline: #fff2f0;
--color-error-outline: #fff1f0;
--control-item-bg-hover: #f8f6fb;
--control-item-bg-active: #ebe8f8;
--control-item-bg-active-hover: #c3aeff;
--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-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-border: #c3aeff;
--color-border-secondary: #eceae9;
--color-split: #eceae9;
--color-primary-bg: #f8f6fb;
--color-primary-bg-hover: #ebe8f8;
--color-primary-border: #c3aeff;
Expand All @@ -75,6 +83,16 @@
--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;
--mp-brand-primary-1: #f8f6fb;
--mp-brand-primary-2: #ebe8f8;
Expand All @@ -86,7 +104,7 @@
--mp-brand-primary-8: #3600d1;
--mp-brand-primary-9: #2c00aa;
--mp-brand-primary-10: #20007a;
--mp-brand-secondary-1: #ffffff;
--mp-brand-secondary-1: #fff;
--mp-brand-secondary-2: #faf9f8;
--mp-brand-secondary-3: #eceae9;
--mp-brand-secondary-4: #dcdcd8;
Expand Down Expand Up @@ -262,30 +280,14 @@
--lime8: #5b8c00;
--lime9: #3f6600;
--lime10: #254000;
--color-text: rgba(0, 0, 0, 0.88);
--color-text-secondary: rgba(0, 0, 0, 0.65);
--color-text-tertiary: rgba(0, 0, 0, 0.45);
--color-text-quaternary: rgba(0, 0, 0, 0.25);
--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-bg-active: #ffccc7;
--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;
Expand All @@ -301,7 +303,6 @@
--color-info-text: #1677ff;
--color-info-text-active: #0958d9;
--color-link-active: #0958d9;
--color-bg-mask: rgba(0, 0, 0, 0.45);
--color-white: #fff;
--font-size-sm: 12px;
--font-size-lg: 16px;
Expand Down Expand Up @@ -341,29 +342,28 @@
--border-radius-xs: 2px;
--border-radius-sm: 6px;
--border-radius-outer: 6px;
--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: #ebe8f8;
--color-fill-content-hover: #dcdcd8;
--color-fill-alter: #f8f6fb;
--color-bg-container-disabled: #faf9f8;
--color-border-bg: #ffffff;
--color-split: rgba(44, 22, 11, 0.09);
--color-text-placeholder: rgba(0, 0, 0, 0.25);
--color-text-disabled: rgba(0, 0, 0, 0.25);
--color-text-heading: rgba(0, 0, 0, 0.88);
--color-text-label: rgba(0, 0, 0, 0.65);
--color-text-description: rgba(0, 0, 0, 0.45);
--color-text-placeholder: #505249;
--color-text-disabled: #505249;
--color-text-heading: #0f0e0e;
--color-text-label: #212020;
--color-text-description: #2c2d2b;
--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-icon: rgba(0, 0, 0, 0.45);
--color-icon-hover: rgba(0, 0, 0, 0.88);
--color-highlight: #f5222d;
--color-bg-text-hover: #ebe8f8;
--color-bg-text-active: #dcdcd8;
--color-icon: #2c2d2b;
--color-icon-hover: #0f0e0e;
--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);
--control-item-bg-active-disabled: #dcdcd8;
--control-tmp-outline: #f8f6fb;
--font-weight-strong: 600;
--opacity-loading: 0.65;
--link-decoration: none;
Expand Down Expand Up @@ -392,9 +392,11 @@
--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;
Expand All @@ -413,11 +415,16 @@
--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);
Expand Down
81 changes: 40 additions & 41 deletions src/styles/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ export const Lime = '#A0D911'
export const ColorPrimary = '#3600d1'
export const ColorSuccess = '#52c41a'
export const ColorWarning = '#faad14'
export const ColorError = '#ff4d4f'
export const ColorError = '#f5222d'
export const ColorInfo = '#1677ff'
export const ColorLink = '#1677ff'
export const ColorTextBase = '#000'
export const ColorTextBase = '#0f0e0e'
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'"
Expand Down Expand Up @@ -48,16 +48,23 @@ 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 ColorErrorOutline = '#fff1f0'
export const ControlItemBgHover = '#f8f6fb'
export const ControlItemBgActive = '#ebe8f8'
export const ControlItemBgActiveHover = '#c3aeff'
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 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 ColorBorder = '#c3aeff'
export const ColorBorderSecondary = '#eceae9'
export const ColorSplit = '#eceae9'
export const ColorPrimaryBg = '#f8f6fb'
export const ColorPrimaryBgHover = '#ebe8f8'
export const ColorPrimaryBorder = '#c3aeff'
Expand All @@ -75,6 +82,16 @@ 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 MpBrandPrimary1 = '#f8f6fb'
export const MpBrandPrimary2 = '#ebe8f8'
Expand Down Expand Up @@ -262,30 +279,14 @@ export const Lime7 = '#7cb305'
export const Lime8 = '#5b8c00'
export const Lime9 = '#3f6600'
export const Lime10 = '#254000'
export const ColorText = 'rgba(0, 0, 0, 0.88)'
export const ColorTextSecondary = 'rgba(0, 0, 0, 0.65)'
export const ColorTextTertiary = 'rgba(0, 0, 0, 0.45)'
export const ColorTextQuaternary = 'rgba(0, 0, 0, 0.25)'
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 ColorErrorBgActive = '#ffccc7'
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'
Expand All @@ -301,7 +302,6 @@ export const ColorInfoTextHover = '#4096ff'
export const ColorInfoText = '#1677ff'
export const ColorInfoTextActive = '#0958d9'
export const ColorLinkActive = '#0958d9'
export const ColorBgMask = 'rgba(0, 0, 0, 0.45)'
export const ColorWhite = '#fff'
export const FontSizeSm = '12px'
export const FontSizeLg = '16px'
Expand Down Expand Up @@ -341,29 +341,28 @@ export const LineWidthBold = '2px'
export const BorderRadiusXs = '2px'
export const BorderRadiusSm = '6px'
export const BorderRadiusOuter = '6px'
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 ColorFillContent = '#ebe8f8'
export const ColorFillContentHover = '#dcdcd8'
export const ColorFillAlter = '#f8f6fb'
export const ColorBgContainerDisabled = '#faf9f8'
export const ColorBorderBg = '#ffffff'
export const ColorSplit = 'rgba(44, 22, 11, 0.09)'
export const ColorTextPlaceholder = 'rgba(0, 0, 0, 0.25)'
export const ColorTextDisabled = 'rgba(0, 0, 0, 0.25)'
export const ColorTextHeading = 'rgba(0, 0, 0, 0.88)'
export const ColorTextLabel = 'rgba(0, 0, 0, 0.65)'
export const ColorTextDescription = 'rgba(0, 0, 0, 0.45)'
export const ColorTextPlaceholder = '#505249'
export const ColorTextDisabled = '#505249'
export const ColorTextHeading = '#0f0e0e'
export const ColorTextLabel = '#212020'
export const ColorTextDescription = '#2c2d2b'
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 ColorIcon = 'rgba(0, 0, 0, 0.45)'
export const ColorIconHover = 'rgba(0, 0, 0, 0.88)'
export const ColorHighlight = '#f5222d'
export const ColorBgTextHover = '#ebe8f8'
export const ColorBgTextActive = '#dcdcd8'
export const ColorIcon = '#2c2d2b'
export const ColorIconHover = '#0f0e0e'
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 ControlItemBgActiveDisabled = '#dcdcd8'
export const ControlTmpOutline = '#f8f6fb'
export const FontWeightStrong = 600
export const OpacityLoading = 0.65
export const LinkDecoration = 'none'
Expand Down

0 comments on commit efcaf5c

Please sign in to comment.