From 16136c36173f409b0206ceb5ab1c169d30a3b89b Mon Sep 17 00:00:00 2001 From: mulan xia Date: Tue, 23 Jan 2024 18:17:12 -0500 Subject: [PATCH] remove colors.css file --- src/components/Switch.tsx | 2 +- src/components/WithTooltip.tsx | 7 +-- src/components/visx/TooltipContent.tsx | 7 +-- src/constants/styles/base.ts | 8 +++ src/constants/styles/colors.ts | 24 +++++++- src/index.css | 1 - src/lib/styles.ts | 4 ++ src/pages/Profile.tsx | 4 +- src/styles/colors.css | 76 -------------------------- src/styles/globalStyle.ts | 6 ++ src/styles/themes.ts | 51 ++++++++++++++--- 11 files changed, 88 insertions(+), 102 deletions(-) delete mode 100644 src/styles/colors.css diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index 103f933..cc8b149 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -47,7 +47,7 @@ Styled.Root = styled(Root)` --switch-thumb-backgroundColor: var(--color-layer-6); --switch-active-backgroundColor: var(--color-accent); - --switch-active-thumb-backgroundColor: var(--color-white); + --switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground}; position: relative; width: var(--switch-width); diff --git a/src/components/WithTooltip.tsx b/src/components/WithTooltip.tsx index 34b0f14..a817f3a 100644 --- a/src/components/WithTooltip.tsx +++ b/src/components/WithTooltip.tsx @@ -110,12 +110,7 @@ Styled.Abbr = styled.abbr` Styled.Content = styled(Content)` --tooltip-backgroundColor: var(--color-layer-4); - --tooltip-backgroundColor: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness) + 4%), - 0.66 - ); + --tooltip-backgroundColor: ${({ theme }) => theme.tooltipBackground}; ${popoverMixins.popover} --popover-backgroundColor: var(--tooltip-backgroundColor); diff --git a/src/components/visx/TooltipContent.tsx b/src/components/visx/TooltipContent.tsx index db3d108..7b594f1 100644 --- a/src/components/visx/TooltipContent.tsx +++ b/src/components/visx/TooltipContent.tsx @@ -27,12 +27,7 @@ Styled.TooltipContent = styled.aside<{ accentColor?: string }>` ${popoverMixins.popover} --popover-radius: 0.5rem; - --popover-background-color: hsl( - var(--layer-base-hue), - var(--layer-base-saturation), - calc(var(--layer-base-lightness)), - 0.9 - ); + --popover-background-color: ${({ theme }) => theme.popoverBackground}; --popover-backdrop-filter: saturate(120%) blur(12px); display: grid; diff --git a/src/constants/styles/base.ts b/src/constants/styles/base.ts index 243c497..bbff6b0 100644 --- a/src/constants/styles/base.ts +++ b/src/constants/styles/base.ts @@ -54,8 +54,16 @@ export enum ColorToken { Green3 = '#3EB68A', Yellow0 = '#FFCC48', + Yellow1 = '#FFB647', Red0 = '#FF5C5C', Red1 = '#E76565', Red2 = '#E45555', } + +/** Maps opacity to corresponding hex value */ +export enum OpacityToken { + Opacity16 = '29', + Opacity66 = 'A8', + Opacity90 = 'E6', +} diff --git a/src/constants/styles/colors.ts b/src/constants/styles/colors.ts index 7fe0a26..a7c9eb1 100644 --- a/src/constants/styles/colors.ts +++ b/src/constants/styles/colors.ts @@ -1,10 +1,12 @@ export type ThemeColors = LayerColors & BorderColors & TextColors & + GradientColors & AccentColors & StatusColors & DirectionalColors & RiskColors & + IconColors & ComponentColors; type LayerColors = { @@ -30,8 +32,14 @@ type TextColors = { textTertiary: string; }; +type GradientColors = { + gradientBase0: string; + gradientBase1: string; +}; + type AccentColors = { accent: string; + accentFaded: string; favorite: string; }; @@ -44,6 +52,8 @@ type StatusColors = { type DirectionalColors = { positive: string; negative: string; + positiveFaded: string; + negativeFaded: string; }; type RiskColors = { @@ -52,8 +62,16 @@ type RiskColors = { riskHigh: string; }; -type ComponentColors = { - toggleBackground: string; - inputBackground: string; +type IconColors = { logoFill: string; + profileYellow: string; + profileRed: string; +}; + +type ComponentColors = { + inputBackground: string; + popoverBackground: string; + switchThumbActiveBackground: string; + toggleBackground: string; + tooltipBackground: string; }; diff --git a/src/index.css b/src/index.css index 869904f..fc5919b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,5 @@ @import 'styles/fonts.css'; @import 'styles/text.css'; -@import 'styles/colors.css'; @import 'styles/animations.css'; :root { diff --git a/src/lib/styles.ts b/src/lib/styles.ts index b306627..ede2dd4 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -14,3 +14,7 @@ export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) => color: var(--color-risk-high); `, }[riskLevel.name]); + +export const generateFadedColorVariant = (colorHex: string, opacityHex: string) => { + return `${colorHex}${opacityHex}`; +}; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 2f9a0bd..d2faac6 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -259,8 +259,8 @@ Styled.ProfileIcon = styled.div` border-radius: 50%; background: linear-gradient( 135deg, - var(--theme-classic-color-yellow) 0%, - var(--theme-classic-color-red) 100% + ${({ theme }) => theme.profileYellow} 0%, + ${({ theme }) => theme.profileRed} 100% ); `; diff --git a/src/styles/colors.css b/src/styles/colors.css deleted file mode 100644 index 1918da5..0000000 --- a/src/styles/colors.css +++ /dev/null @@ -1,76 +0,0 @@ -:root { - /* Parameters */ - - /* - --layer-base-hue - --layer-base-saturation - --layer-base-lightness - */ - - --color-gradient-base-0: hsl( - var(--layer-base-hue), - calc(var(--layer-base-saturation) - 5%), - var(--layer-base-lightness) - ); - - --color-gradient-base-1: hsl( - var(--layer-base-hue), - calc(var(--layer-base-saturation) - 1%), - calc(var(--layer-base-lightness) + 7%) - ); -} - -/* Theme: Classic (default) */ -:root { - /* Constants */ - - --theme-classic-hue-purple: 240; - --theme-classic-color-green: hsl(159, 67%, 39%); - --theme-classic-color-yellow: hsl(36, 100%, 64%); - --theme-classic-color-red: hsl(360, 73%, 61%); - - /* Parameters */ - - --layer-base-hue: var(--theme-classic-hue-purple); - --layer-base-saturation: 20%; - --layer-base-lightness: 16%; - - --color-white: #fff; - --color-black: #000; - - --color-gradient-positive: hsla(158, 49%, 48%, 0.16); - --color-gradient-negative: hsla(0, 100%, 66%, 0.16); - --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16); -} - -/* Theme: Light */ -:root.theme-light { - /* Constants */ - - --theme-light-hue-purple: 234; - --theme-light-color-green: hsl(159, 67%, 39%); - --theme-light-color-yellow: hsl(36, 100%, 64%); - --theme-light-color-red: hsl(360, 73%, 61%); - - /* Parameters */ - - --layer-base-hue: var(--theme-light-hue-purple); - --layer-base-saturation: 0%; - --layer-base-lightness: 86%; -} - -/* Theme: Dark */ -:root.theme-dark { - /* Constants */ - - --theme-dark-hue-purple: 240; - --theme-dark-color-green: hsl(159, 67%, 39%); - --theme-dark-color-yellow: hsl(36, 100%, 64%); - --theme-dark-color-red: hsl(360, 73%, 61%); - - /* Parameters */ - - --layer-base-hue: 0; - --layer-base-saturation: 0%; - --layer-base-lightness: 16%; -} diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index f3579f2..bf534cd 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -19,7 +19,11 @@ export const GlobalStyle = createGlobalStyle` --color-text-1: ${({ theme }) => theme.textSecondary}; --color-text-2: ${({ theme }) => theme.textPrimary}; + --color-gradient-base-0: ${({ theme }) => theme.gradientBase0}; + --color-gradient-base-1: ${({ theme }) => theme.gradientBase1}; + --color-accent: ${({ theme }) => theme.accent}; + --color-accent-faded: ${({ theme }) => theme.accentFaded}; --color-favorite: ${({ theme }) => theme.favorite}; --color-success: ${({ theme }) => theme.success}; @@ -28,6 +32,8 @@ export const GlobalStyle = createGlobalStyle` --color-positive: ${({ theme }) => theme.positive}; --color-negative: ${({ theme }) => theme.negative}; + --color-gradient-positive: ${({ theme }) => theme.positiveFaded}; + --color-gradient-negative: ${({ theme }) => theme.negativeFaded}; --color-risk-low: ${({ theme }) => theme.riskLow}; --color-risk-medium: ${({ theme }) => theme.riskMedium}; diff --git a/src/styles/themes.ts b/src/styles/themes.ts index 7f0d4e5..0ebd6fc 100644 --- a/src/styles/themes.ts +++ b/src/styles/themes.ts @@ -1,6 +1,7 @@ import { AppTheme } from '@/state/configs'; import { ThemeColors } from '@/constants/styles/colors'; -import { ColorToken } from '@/constants/styles/base'; +import { ColorToken, OpacityToken } from '@/constants/styles/base'; +import { generateFadedColorVariant } from '@/lib/styles'; const ClassicTheme: ThemeColors = { layer0: ColorToken.GrayBlue7, @@ -20,7 +21,11 @@ const ClassicTheme: ThemeColors = { textSecondary: ColorToken.GrayPurple1, textTertiary: ColorToken.GrayPurple2, + gradientBase0: ColorToken.DarkGray9, + gradientBase1: ColorToken.GrayBlue2, + accent: ColorToken.Purple1, + accentFaded: generateFadedColorVariant(ColorToken.Purple1, OpacityToken.Opacity16), favorite: ColorToken.Yellow0, success: ColorToken.Green1, @@ -29,14 +34,22 @@ const ClassicTheme: ThemeColors = { positive: ColorToken.Green1, negative: ColorToken.Red2, + positiveFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16), + negativeFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16), riskLow: ColorToken.Green1, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red2, - inputBackground: ColorToken.GrayBlue3, - toggleBackground: ColorToken.GrayBlue3, logoFill: ColorToken.White, + profileYellow: ColorToken.Yellow1, + profileRed: ColorToken.Red2, + + inputBackground: ColorToken.GrayBlue3, + popoverBackground: generateFadedColorVariant(ColorToken.GrayBlue4, OpacityToken.Opacity90), + switchThumbActiveBackground: ColorToken.White, + toggleBackground: ColorToken.GrayBlue3, + tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66), }; const DarkTheme: ThemeColors = { @@ -57,7 +70,11 @@ const DarkTheme: ThemeColors = { textSecondary: ColorToken.MediumGray0, textTertiary: ColorToken.DarkGray0, + gradientBase0: ColorToken.DarkGray8, + gradientBase1: ColorToken.DarkGray5, + accent: ColorToken.Purple0, + accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16), favorite: ColorToken.Yellow0, success: ColorToken.Green0, @@ -66,14 +83,22 @@ const DarkTheme: ThemeColors = { positive: ColorToken.Green0, negative: ColorToken.Red0, + positiveFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16), + negativeFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16), riskLow: ColorToken.Green0, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red0, - inputBackground: ColorToken.DarkGray6, - toggleBackground: ColorToken.DarkGray6, logoFill: ColorToken.White, + profileYellow: ColorToken.Yellow1, + profileRed: ColorToken.Red2, + + inputBackground: ColorToken.DarkGray6, + popoverBackground: generateFadedColorVariant(ColorToken.DarkGray8, OpacityToken.Opacity90), + switchThumbActiveBackground: ColorToken.White, + toggleBackground: ColorToken.DarkGray6, + tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66), }; const LightTheme: ThemeColors = { @@ -94,7 +119,11 @@ const LightTheme: ThemeColors = { textSecondary: ColorToken.DarkGray3, textTertiary: ColorToken.DarkGray1, + gradientBase0: ColorToken.LightGray8, + gradientBase1: ColorToken.LightGray5, + accent: ColorToken.Purple0, + accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16), favorite: ColorToken.Yellow0, success: ColorToken.Green2, @@ -103,14 +132,22 @@ const LightTheme: ThemeColors = { positive: ColorToken.Green2, negative: ColorToken.Red1, + positiveFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16), + negativeFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16), riskLow: ColorToken.Green2, riskMedium: ColorToken.Yellow0, riskHigh: ColorToken.Red1, - inputBackground: ColorToken.White, - toggleBackground: ColorToken.LightGray4, logoFill: ColorToken.Black, + profileYellow: ColorToken.Yellow1, + profileRed: ColorToken.Red2, + + inputBackground: ColorToken.White, + popoverBackground: generateFadedColorVariant(ColorToken.LightGray8, OpacityToken.Opacity90), + switchThumbActiveBackground: ColorToken.White, + toggleBackground: ColorToken.LightGray4, + tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66), }; export const Themes = {