Merge pull request #1696 from curvefi/feat/sync-theme-variables-with-figma

feat: sync theme variables with figma

Author: OnlyJousting

apps/main/src/llamalend/features/bands-chart/hooks/useBandsChartPalette.ts

@@ -24,7 +24,9 @@ export const useBandsChartPalette = (): BandsChartPalette => {
       borderColor: theme.design.Layer[1].Outline,
       userRangeHighlightColor: theme.design.Chart.LiquidationZone.Current,
       userRangeTopLabelBackgroundColor: theme.design.Chart.Candles.Negative,
+      userRangeTopLabelTextColor: theme.design.Text.TextColors.FilledFeedback.Alert.Primary,
       userRangeBottomLabelBackgroundColor: theme.design.Chart.Lines.Line2,
+      userRangeBottomLabelTextColor: theme.design.Text.TextColors.FilledFeedback.Warning.Primary,
       oraclePriceLineColor: theme.design.Color.Primary[500],
       liquidationBandOutlineColor: theme.design.Color.Tertiary[600],
       zoomTrackBackgroundColor: theme.design.Color.Primary[200],

apps/main/src/llamalend/features/bands-chart/markLines.ts

@@ -74,8 +74,8 @@ export const createLabelStyle = (lineStyle: { color: string }, palette: BandsCha
         : palette.userRangeBottomLabelBackgroundColor,
   color:
     lineStyle.color === palette.oraclePriceLineColor || lineStyle.color === palette.userRangeTopLabelBackgroundColor
-      ? palette.textColorInverted
-      : palette.textColor,
+      ? palette.userRangeTopLabelTextColor
+      : palette.userRangeBottomLabelTextColor,
 })
 
 /**

apps/main/src/llamalend/features/bands-chart/types.ts

@@ -32,7 +32,9 @@ export type BandsChartPalette = {
   borderColor: string
   userRangeHighlightColor: string
   userRangeTopLabelBackgroundColor: string
+  userRangeTopLabelTextColor: string
   userRangeBottomLabelBackgroundColor: string
+  userRangeBottomLabelTextColor: string
   oraclePriceLineColor: string
   liquidationBandOutlineColor: string
   zoomTrackBackgroundColor: string

packages/curve-ui-kit/src/shared/ui/Tooltip.tsx

@@ -20,7 +20,7 @@ export const TooltipContent = ({ title, children }: { title: ReactNode; children
   // cancel any theme inversion as it's often applied on hover
   <InvertTheme inverted={false}>
     <Box
-      sx={{ padding: Spacing.md, backgroundColor: (t) => t.design.Layer[3].Fill, width: '100%' }}
+      sx={{ padding: Spacing.md, backgroundColor: (t) => t.design.Layer[1].Fill, width: '100%' }}
       onClick={(e) => e.stopPropagation()} // prevent changing pages when clicking on the tooltip
     >
       <Typography variant="bodyMBold" color="textPrimary" component="div">

packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts

@@ -17,7 +17,18 @@ export const basicMuiTheme = createMuiTheme({
     },
     unit: 'px',
   },
-  spacing: Object.values(Spacing),
+  spacing: [
+    Spacing[0],
+    Spacing[100],
+    Spacing[200],
+    Spacing[300],
+    Spacing[350],
+    Spacing[400],
+    Spacing[500],
+    Spacing[600],
+    Spacing[700],
+    Spacing[800],
+  ],
   direction: 'ltr',
   zIndex: {
     tableStickyColumn: 100, // the sticky column in the table

packages/curve-ui-kit/src/themes/components/index.ts

@@ -144,7 +144,7 @@ export const createComponents = (
     },
     styleOverrides: {
       paper: {
-        backgroundColor: design.Layer[3].Fill,
+        backgroundColor: design.Layer[2].Fill,
         '& .MuiMenu-list': {
           maxHeight: SizesAndSpaces.MaxHeight.popover,
         },

packages/curve-ui-kit/src/themes/components/mui-input-base.ts

@@ -14,7 +14,7 @@ export const defineMuiInputBase = (
 ): Components['MuiInputBase'] => ({
   styleOverrides: {
     root: {
-      backgroundColor: Base.Default.Fill,
+      backgroundColor: Base.Default.Fill.Default,
       // color the whole input base when accepting autofill suggestions in Chromium browsers
       ':has(input:autofill)': {
         backgroundColor: 'light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4))',

packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts

@@ -82,7 +82,7 @@ const tabStyle = ({ Label, Fill, Outline }: TabStyle, inset?: string) => ({
   color: Label,
   backgroundColor: Fill,
   '::after': {
-    backgroundColor: Outline ?? 'transparant',
+    backgroundColor: Outline ?? 'transparent',
     inset,
   },
 })

packages/curve-ui-kit/src/themes/design/0_primitives.ts

@@ -54,20 +54,6 @@ export const Blues = {
   '950': '#171e55',
 } as const
 
-export const Yellows = {
-  '50': '#fff9e6',
-  '100': '#fff9f0',
-  '200': '#fff1db',
-  '300': '#ffe6bd',
-  '400': '#ffd88b',
-  '500': '#ffc300',
-  '600': '#e0ab00',
-  '700': '#c19300',
-  '800': '#a37c0c',
-  '900': '#84671d',
-  '950': '#665223',
-} as const
-
 export const Oranges = {
   '50': '#f0ddd1',
   '100': '#f3cfb9',
@@ -82,6 +68,20 @@ export const Oranges = {
   '950': '#4e2708',
 } as const
 
+export const Yellows = {
+  '50': '#fffbf5',
+  '100': '#fff9f0',
+  '200': '#fff1db',
+  '300': '#ffe6bd',
+  '400': '#ffd88b',
+  '500': '#ffc300',
+  '600': '#e0ab00',
+  '700': '#c19300',
+  '800': '#a37c0c',
+  '900': '#84671d',
+  '950': '#665223',
+} as const
+
 export const Violets = {
   '50': '#efedfc',
   '100': '#dbd9f7',
@@ -96,20 +96,26 @@ export const Violets = {
   '950': '#2f2862',
 } as const
 
+export const Transparent = '#ffffff00' as const
+
 export const Spacing = {
-  '50': '0',
+  '0': '0rem',
+  '75': '0.062rem', // ~1px
   '100': '0.125rem', // 2px
   '200': '0.25rem', // 4px
   '300': '0.5rem', // 8px
   '350': '0.875rem', // 14px
   '400': '1rem', // 16px
+  '450': '1.25rem', // 20px
   '500': '1.5rem', // 24px
   '600': '2rem', // 32px
   '700': '3rem', // 48px
   '800': '4rem', // 64px
 } as const
 
 export const Sizing = {
+  '10': '0.062rem', // ~1px
+  '25': '0.125rem', // 2px
   '50': '0.25rem', // 4px
   '100': '0.5rem', // 8px
   '125': '0.75rem', // 12px