Update theme

fabric/src/theme/tokens/colors.ts

@@ -1,35 +1,36 @@
 export const black = '#252B34'
-export const gold = '#FFC500'
+export const gold = '#FFC012'
 
 export const grayScale = {
-  50: '#fbfbfb',
-  100: '#f5f5f5',
-  300: '#e0e0e0',
-  500: '#82888D',
-  800: '#424242',
-  900: black,
+  50: '#F6F6F6',
+  100: '#E7E7E7',
+  300: '#CFCFCF',
+  500: '#91969B',
+  800: '#252B34',
+  900: '#0F1115',
 }
 
 export const yellowScale = {
-  50: '#FFF4D9',
+  50: '#FFFAE9',
   100: '#FFE299',
   500: '#FFC012',
-  800: '#6B4F00',
+  800: '#806009',
 }
 
 export const blackScale = {
   50: '#E2E4E7',
   100: '#C5C9D0',
   500: '#252B34',
-  800: '#1A1F27',
+  800: '#0F1115',
 }
 
-// Only for altair
 export const blueScale = {
-  50: '#f0f4ff',
-  100: '#dbe5ff',
-  500: '#1253ff',
-  700: '#002b9e',
+  50: '#E3F1FF',
+  100: '#E6EFF5',
+  500: '#5291E0',
+  700: '#005B96',
+  800: '#213A5A',
+  900: '#00243C',
 }
 
 export const centrifugeBlue = blueScale[500]

fabric/src/theme/tokens/theme.ts

@@ -1,37 +1,37 @@
-import { black, blackScale, centrifugeBlue, gold, grayScale, yellowScale } from './colors'
+import { black, blackScale, blueScale, centrifugeBlue, gold, grayScale, yellowScale } from './colors'
 
 const statusDefault = grayScale[800]
-const statusInfo = '#1253ff'
+const statusInfo = blueScale[500]
 const statusOk = '#519b10'
 const statusWarning = yellowScale[800]
 const statusCritical = '#d43f2b'
 const statusPromote = '#f81071'
 
 const statusDefaultBg = grayScale[300]
-const statusInfoBg = grayScale[300]
+const statusInfoBg = blueScale[50]
 const statusOkBg = '#f1f7ec'
 const statusWarningBg = yellowScale[50]
 const statusCriticalBg = '#fcf0ee'
 const statusPromoteBg = '#f8107114'
 
 const colors = {
-  textPrimary: grayScale[900],
-  textSecondary: grayScale[800],
-  textDisabled: grayScale[500],
+  textPrimary: grayScale[800],
+  textSecondary: grayScale[500],
+  textDisabled: grayScale[300],
   textInverted: 'white',
   textGold: gold,
 
   backgroundPrimary: 'white',
-  backgroundSecondary: grayScale[100],
-  backgroundTertiary: grayScale[50],
-  backgroundAccentPrimary: '#dbe5ff',
-  backgroundAccentSecondary: '#e9eff2',
+  backgroundSecondary: grayScale[50],
+  backgroundTertiary: grayScale[100],
+  backgroundAccentPrimary: blueScale[50],
+  backgroundAccentSecondary: blueScale[100],
   backgroundPage: 'white',
   backgroundInput: 'white',
   backgroundThumbnail: grayScale[500],
   backgroundInverted: grayScale[900],
 
-  borderPrimary: grayScale[300],
+  borderPrimary: grayScale[100],
   borderSecondary: grayScale[300],
 
   statusDefault,
@@ -50,7 +50,7 @@ const colors = {
   backgroundButtonPrimary: gold,
   backgroundButtonPrimaryFocus: gold,
   backgroundButtonPrimaryHover: gold,
-  backgroundButtonPrimaryPressed: yellowScale[500],
+  backgroundButtonPrimaryPressed: yellowScale[800],
   backgroundButtonPrimaryDisabled: grayScale[300],
   textButtonPrimary: black,
   textButtonPrimaryFocus: black,