Fix storybook colors

centrifuge · Sep 3, 2024 · 794fca6 · 794fca6
1 parent 14f23fa
commit 794fca6
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 16 deletions.
diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts
@@ -1,6 +1,6 @@
 import { TransactionOptions } from '@centrifuge/centrifuge-js'
 import { EvmChains } from '@centrifuge/centrifuge-react'
-import { centrifugeLight } from '@centrifuge/fabric'
+import { centrifugeTheme } from '@centrifuge/fabric'
 import arbitrumLogo from '@centrifuge/fabric/assets/logos/arbitrum.svg'
 import assetHubLogo from '@centrifuge/fabric/assets/logos/assethub.svg'
 import baseLogo from '@centrifuge/fabric/assets/logos/base.svg'
@@ -23,17 +23,17 @@ export const FEATURED_COLLECTIONS = [
 ]
 
 const lightTheme: DefaultTheme = {
-  ...centrifugeLight,
+  ...centrifugeTheme,
   sizes: {
-    ...centrifugeLight.sizes,
+    ...centrifugeTheme.sizes,
     mainContent: 1800,
   },
   colors: {
-    ...centrifugeLight.colors,
-    placeholderBackground: centrifugeLight.colors.backgroundSecondary,
+    ...centrifugeTheme.colors,
+    placeholderBackground: centrifugeTheme.colors.backgroundSecondary,
   },
   typography: {
-    ...centrifugeLight.typography,
+    ...centrifugeTheme.typography,
     headingLarge: {
       fontSize: [24, 24, 36],
       lineHeight: 1.25,

diff --git a/fabric/.storybook/preview.jsx b/fabric/.storybook/preview.jsx
@@ -3,14 +3,12 @@ import { ThemeProvider } from 'styled-components'
 import { Box, GlobalStyle } from '../src'
 import altairDark from '../src/theme/altairDark'
 import altairLight from '../src/theme/altairLight'
-import centrifugeDark from '../src/theme/centrifugeDark'
-import centrifugeLight from '../src/theme/centrifugeLight'
+import centrifugeTheme from '../src/theme/centrifugeTheme'
 
 const themes = {
   altairDark,
   altairLight,
-  centrifugeDark,
-  centrifugeLight,
+  centrifugeTheme,
 }
 
 export const parameters = {
@@ -40,7 +38,7 @@ export const globalTypes = {
 
 export const decorators = [
   (Story, context) => (
-    <ThemeProvider theme={themes[context.globals.theme] || themes.centrifugeLight}>
+    <ThemeProvider theme={themes[context.globals.theme] || themes.centrifugeTheme}>
       <>
         <GlobalStyle />
         <Box p={3} bg="backgroundPage" minHeight="100vh">

diff --git a/fabric/src/components/CurrencyInput/index.tsx b/fabric/src/components/CurrencyInput/index.tsx
@@ -17,7 +17,7 @@ const StyledMaxButton = styled(Box)`
   padding: 0 8px;
   border: 0;
   border-radius: 12px;
-  color: ${({ theme }) => theme.colors.textPrimary};
+  color: ${({ theme }) => theme.colors.textInverted};
   background-color: ${({ theme }) => theme.colors.backgroundPrimary};
   cursor: pointer;
   appearance: none;

diff --git a/fabric/src/theme/centrifugeLight.ts → fabric/src/theme/centrifugeTheme.ts b/fabric/src/theme/centrifugeLight.ts → fabric/src/theme/centrifugeTheme.ts
@@ -4,7 +4,7 @@ import { blueScale, grayScale, yellowScale } from './tokens/colors'
 import { colorTheme } from './tokens/theme'
 import { FabricTheme } from './types'
 
-export const centrifugeLight: FabricTheme = {
+export const centrifugeTheme: FabricTheme = {
   ...baseTheme,
   scheme: 'light',
   colors: {
@@ -25,4 +25,4 @@ export const centrifugeLight: FabricTheme = {
   },
 }
 
-export default centrifugeLight
+export default centrifugeTheme
diff --git a/fabric/src/theme/index.ts b/fabric/src/theme/index.ts
@@ -1,4 +1,4 @@
 export * from './altairDark'
 export * from './altairLight'
-export * from './centrifugeLight'
+export * from './centrifugeTheme'
 export * from './types'
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -51,7 +51,7 @@ const colors = {
   backgroundButtonPrimaryFocus: gold,
   backgroundButtonPrimaryHover: gold,
   backgroundButtonPrimaryPressed: yellowScale[500],
-  backgroundButtonPrimaryDisabled: yellowScale[500],
+  backgroundButtonPrimaryDisabled: grayScale[300],
   textButtonPrimary: black,
   textButtonPrimaryFocus: black,
   textButtonPrimaryHover: black,