remove colors.css file

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);

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);

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;

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',
+}

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;
 };

src/index.css

@@ -1,6 +1,5 @@
 @import 'styles/fonts.css';
 @import 'styles/text.css';
-@import 'styles/colors.css';
 @import 'styles/animations.css';
 
 :root {

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}`;
+};

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%
   );
 `;
 

src/styles/colors.css

@@ -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%;
-}

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};

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 = {