From b61d9e413354fb8998f65f50f57ab36a2b94a908 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 11 Jun 2024 15:09:55 +0200 Subject: [PATCH] update design tokens --- design/GlobalToken.json | 79 +++++++++++++++++++++-------------------- design/LightTheme.ts | 36 +++++-------------- 2 files changed, 49 insertions(+), 66 deletions(-) diff --git a/design/GlobalToken.json b/design/GlobalToken.json index 405299eb6..b30d993c4 100644 --- a/design/GlobalToken.json +++ b/design/GlobalToken.json @@ -15,10 +15,10 @@ "colorPrimary": { "value": "#3600d1" }, "colorSuccess": { "value": "#52c41a" }, "colorWarning": { "value": "#faad14" }, - "colorError": { "value": "#f5222d" }, + "colorError": { "value": "#ff4d4f" }, "colorInfo": { "value": "#1677ff" }, "colorLink": { "value": "#1677ff" }, - "colorTextBase": { "value": "#0f0e0e" }, + "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'" @@ -50,23 +50,16 @@ "colorLinkHover": { "value": "#ab8eff" }, "controlOutline": { "value": "rgba(54, 0, 209, 0.1)" }, "colorWarningOutline": { "value": "#fffbe6" }, - "colorErrorOutline": { "value": "#fff1f0" }, + "colorErrorOutline": { "value": "#fff2f0" }, "controlItemBgHover": { "value": "#f8f6fb" }, "controlItemBgActive": { "value": "#ebe8f8" }, "controlItemBgActiveHover": { "value": "#c3aeff" }, - "colorText": { "value": "#0f0e0e" }, - "colorTextSecondary": { "value": "#212020" }, - "colorTextTertiary": { "value": "#2c2d2b" }, - "colorTextQuaternary": { "value": "#505249" }, - "colorFill": { "value": "#dcdcd8" }, - "colorFillSecondary": { "value": "#ebe8f8" }, - "colorFillTertiary": { "value": "#faf9f8" }, - "colorFillQuaternary": { "value": "#f8f6fb" }, - "colorBgLayout": { "value": "#ffffff" }, - "colorBgSpotlight": { "value": "#2c2d2b" }, + "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" }, - "colorSplit": { "value": "#eceae9" }, "colorPrimaryBg": { "value": "#f8f6fb" }, "colorPrimaryBgHover": { "value": "#ebe8f8" }, "colorPrimaryBorder": { "value": "#c3aeff" }, @@ -84,15 +77,6 @@ "colorWarningTextHover": { "value": "#ad6800" }, "colorWarningText": { "value": "#874d00" }, "colorWarningTextActive": { "value": "#613400" }, - "colorErrorBg": { "value": "#fff1f0" }, - "colorErrorBgHover": { "value": "#ffccc7" }, - "colorErrorBorder": { "value": "#ffa39e" }, - "colorErrorBorderHover": { "value": "#ff7875" }, - "colorErrorHover": { "value": "#ff4d4f" }, - "colorErrorActive": { "value": "#cf1322" }, - "colorErrorTextHover": { "value": "#a8071a" }, - "colorErrorText": { "value": "#820014" }, - "colorErrorTextActive": { "value": "#5c0011" }, "borderRadiusLG": { "value": "16px" }, "mpBrandPrimary.1": { "value": "#f8f6fb" }, "mpBrandPrimary.2": { "value": "#ebe8f8" }, @@ -280,14 +264,30 @@ "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" }, @@ -343,28 +343,29 @@ "borderRadiusXS": { "value": "2px" }, "borderRadiusSM": { "value": "6px" }, "borderRadiusOuter": { "value": "6px" }, - "colorFillContent": { "value": "#ebe8f8" }, - "colorFillContentHover": { "value": "#dcdcd8" }, - "colorFillAlter": { "value": "#f8f6fb" }, - "colorBgContainerDisabled": { "value": "#faf9f8" }, + "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" }, - "colorTextPlaceholder": { "value": "#505249" }, - "colorTextDisabled": { "value": "#505249" }, - "colorTextHeading": { "value": "#0f0e0e" }, - "colorTextLabel": { "value": "#212020" }, - "colorTextDescription": { "value": "#2c2d2b" }, + "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": "#f5222d" }, - "colorBgTextHover": { "value": "#ebe8f8" }, - "colorBgTextActive": { "value": "#dcdcd8" }, - "colorIcon": { "value": "#2c2d2b" }, - "colorIconHover": { "value": "#0f0e0e" }, + "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": "#dcdcd8" }, - "controlTmpOutline": { "value": "#f8f6fb" }, + "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" }, diff --git a/design/LightTheme.ts b/design/LightTheme.ts index 5c8badeb8..78a0100d0 100644 --- a/design/LightTheme.ts +++ b/design/LightTheme.ts @@ -9,23 +9,16 @@ export const LightTheme: IMpThemeConfig = { colorLinkHover: '#ab8eff', controlOutline: 'rgba(54, 0, 209, 0.1)', colorWarningOutline: '#fffbe6', - colorErrorOutline: '#fff1f0', + colorErrorOutline: '#fff2f0', controlItemBgHover: '#f8f6fb', controlItemBgActive: '#ebe8f8', controlItemBgActiveHover: '#c3aeff', - colorText: '#0f0e0e', - colorTextSecondary: '#212020', - colorTextTertiary: '#2c2d2b', - colorTextQuaternary: '#505249', - colorFill: '#dcdcd8', - colorFillSecondary: '#ebe8f8', - colorFillTertiary: '#faf9f8', - colorFillQuaternary: '#f8f6fb', - colorBgLayout: '#ffffff', - colorBgSpotlight: '#2c2d2b', + colorFill: 'rgba(15, 14, 14, 0.15)', + colorFillSecondary: 'rgba(32, 0, 122, 0.06)', + colorFillTertiary: 'rgba(15, 14, 14, 0.04)', + colorFillQuaternary: 'rgba(32, 0, 122, 0.03)', colorBorder: '#c3aeff', colorBorderSecondary: '#eceae9', - colorSplit: '#eceae9', colorPrimaryBg: '#f8f6fb', colorPrimaryBgHover: '#ebe8f8', colorPrimaryBorder: '#c3aeff', @@ -43,18 +36,7 @@ export const LightTheme: IMpThemeConfig = { colorWarningTextHover: '#ad6800', colorWarningText: '#874d00', colorWarningTextActive: '#613400', - colorErrorBg: '#fff1f0', - colorErrorBgHover: '#ffccc7', - colorErrorBorder: '#ffa39e', - colorErrorBorderHover: '#ff7875', - colorErrorHover: '#ff4d4f', - colorErrorActive: '#cf1322', - colorErrorTextHover: '#a8071a', - colorErrorText: '#820014', - colorErrorTextActive: '#5c0011', - colorTextBase: '#0f0e0e', colorPrimary: '#3600d1', - colorError: '#f5222d', borderRadiusLG: 16, borderRadius: 8, fontFamily: @@ -131,12 +113,12 @@ export const LightTheme: IMpThemeConfig = { }, Menu: { darkItemBg: '#212020', - darkItemColor: '#babbb5', - darkItemDisabledColor: '#505249', + darkItemColor: 'rgba(255, 255, 255, 0.65)', + darkItemDisabledColor: 'rgba(255, 255, 255, 0.25)', darkSubMenuItemBg: '#0f0e0e', itemHoverBg: '#f8f6fb', subMenuItemBg: '#faf9f8', - darkGroupTitleColor: '#babbb5', + darkGroupTitleColor: 'rgba(255, 255, 255, 0.65)', }, Progress: { defaultColor: '#2c2d2b', @@ -154,7 +136,7 @@ export const LightTheme: IMpThemeConfig = { Table: { footerBg: '#faf9f8', headerBg: '#faf9f8', - headerSplitColor: '#eceae9', + headerSplitColor: 'rgba(0, 0, 0, 0.06)', rowSelectedHoverBg: '#ebe8f8', }, Input: {