feat: theme color updates under feature flag (#4252)

* toggle

* fixed position

* im bad at spelling

* rm button

* fix

* add feature flag

* naming

* rm blue5

* uppercase

* rm file

src/featureFlag/index.tsx

@@ -35,7 +35,7 @@ export function useFeatureFlagsIsLoaded(): boolean {
 
 // feature flag hooks
 
-enum Phase0Variant {
+export enum Phase0Variant {
   Control = 'Control',
   Enabled = 'Enabled',
 }

src/theme/styled.d.ts

 import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'
 
 export type Color = string
+export interface ThemeColors {
+  userThemeColor: string
+
+  backgroundBackdrop: Color
+  backgroundSurface: Color
+  backgroundContainer: Color
+  backgroundAction: Color
+  backgroundOutline: Color
+  backgroundScrim: Color
+
+  textPrimary: Color
+  textSecondary: Color
+  textTertiary: Color
+
+  accentAction: Color
+  accentActive: Color
+  accentSuccess: Color
+  accentWarning: Color
+  accentFailure: Color
+
+  accentActionSoft: Color
+  accentActiveSoft: Color
+  accentSuccessSoft: Color
+  accentWarningSoft: Color
+  accentFailureSoft: Color
+
+  accentTextDarkPrimary: Color
+  accentTextDarkSecondary: Color
+  accentTextDarkTertiary: Color
+
+  accentTextLightPrimary: Color
+  accentTextLightSecondary: Color
+  accentTextLightTertiary: Color
+
+  white: Color
+  black: Color
+  none: Color
+
+  chain_1: Color
+  chain_3: Color
+  chain_4: Color
+  chain_5: Color
+  chain_10: Color
+  chain_137: Color
+  chain_42: Color
+  chain_69: Color
+  chain_42161: Color
+  chain_421611: Color
+  chain_80001: Color
+
+  blue200: Color
+}
+
 export interface Colors {
   darkMode: boolean
 
@@ -53,65 +106,15 @@ export interface Colors {
   deprecated_blue2: Color
 
   deprecated_blue4: Color
+  // deprecated_blue5: Color
 
   deprecated_error: Color
   deprecated_success: Color
   deprecated_warning: Color
-
-  userThemeColor: string
-
-  backgroundBackdrop: Color
-  backgroundSurface: Color
-  backgroundContainer: Color
-  backgroundAction: Color
-  backgroundOutline: Color
-  backgroundScrim: Color
-
-  textPrimary: Color
-  textSecondary: Color
-  textTertiary: Color
-
-  accentAction: Color
-  accentActive: Color
-  accentSuccess: Color
-  accentWarning: Color
-  accentFailure: Color
-
-  accentActionSoft: Color
-  accentActiveSoft: Color
-  accentSuccessSoft: Color
-  accentWarningSoft: Color
-  accentFailureSoft: Color
-
-  accentTextDarkPrimary: Color
-  accentTextDarkSecondary: Color
-  accentTextDarkTertiary: Color
-
-  accentTextLightPrimary: Color
-  accentTextLightSecondary: Color
-  accentTextLightTertiary: Color
-
-  white: Color
-  black: Color
-  none: Color
-
-  chain_1: Color
-  chain_3: Color
-  chain_4: Color
-  chain_5: Color
-  chain_10: Color
-  chain_137: Color
-  chain_42: Color
-  chain_69: Color
-  chain_42161: Color
-  chain_421611: Color
-  chain_80001: Color
-
-  blue200: Color
 }
 
 declare module 'styled-components/macro' {
-  export interface DefaultTheme extends Colors {
+  export interface DefaultTheme extends Colors, ThemeColors {
     grids: Grids
 
     // shadows