d0452aeb81
* [#151] market-depth code cleanup
* [#303] Make ask and bid relative volume bars relative to maximum bid or ask volume
* [#151] align cmulative vol bars to left
* [#151] replace orderbook zoom in zoom out buttons with dropdown
* [#151] fill gaps in orderbook data
* Order book mocks added
* [#151] mark mid price in orderbook
* [303] Show number in orderbook cumulative volume column
* [#808] show indicative uncrossing volume instead of volume if market is in auction mode
* Method for asserting order book style
* [#303] Add test id attributes to orderbook cells
* Cleanup steps after merge
* Order book test passing
* Change method name
* Revert "[#151] fill gaps in orderbook data"
This reverts commit 90ea4e4ab3.
* [#303] Orderbook rows render optimization
* test: update feature with @todo tests
Same tests can be found in Notion
* [#303] Orderbook scroll to mid price
* [#303] orderbook scroll to row pixel perfect alignment
* [#303] Bring back best offer horizontal lines
* [#303] Preserve center price level on row number change, adjust indicativePrice to resoluton
* feat(orderbook): add storybook
Refs: #303
* feat(orderbook): fix no rows handling
Refs: #303
* feat(orderbook): add orderbook stories for auction and continous market
Refs: #303
* feat(orderbook): add stories for empty orderbook
Refs: #303
* feat(orderbook): fix footer position when there is no data
Refs: #303
* feat(orderbook): seperate number of rows for buy and sell in storybook
Refs: #303
* feat(orderbook): keep mid price in middle until user will scroll
Refs: #303
* feat(orderbook): style scrollbar
* feat(orderbook): style scrollbar
* feat(orderbook): adjust gaps
* feat(orderbook): adjust gaps
* test: addition for autofilled order and mid price lines
* fix: lint
* feat(orderbook): make it posiible to write RTL tests
* feat(orderbook): fix price focus, add unit tests
* feat(orderbook): fix price scroll to mid proce, add unit tests
* feat(orderbook): improvements
- fix scrollbar colors in firefox
- bring back resolution dropdown chevron
- hide go to mid button when locked on mid price
- right align ask vol bar
- change grid gap to 5px
- add vertical lines between columns
- display "No data" if theis no orderbook data
- align header labels to right
* feat(orderbook): fix formatting
* feat(orderbook): add 5px gap
* feat(orderbook): improvements after code review
* feat(orderbook): display full height vertical lines
* fix: change in mid position
* feat(orderbook): fix number cannot be converted to BigInt because it is not integer
* feat(orderbook): fix TS2307 in trading-e2e caused by .module.scss import
Co-authored-by: Joe <joe@vega.xyz>
186 lines
4.1 KiB
JavaScript
186 lines
4.1 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
module.exports = {
|
|
screens: {
|
|
xs: '500px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '960px',
|
|
xl: '1280px',
|
|
xxl: '1536px',
|
|
},
|
|
colors: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
vega: {
|
|
yellow: '#EDFF22',
|
|
pink: '#FF2D5E',
|
|
green: '#00F780',
|
|
},
|
|
red: {
|
|
DEFAULT: '#ED1515',
|
|
transparent: 'rgba(255, 38, 65, 0.3)',
|
|
vega: '#FF261A',
|
|
dark: '#EB001B',
|
|
},
|
|
green: {
|
|
DEFAULT: '#26FF8A',
|
|
transparent: 'rgba(38, 255, 138, 0.3)',
|
|
dark: '#008545',
|
|
vega: '#00F780',
|
|
},
|
|
text: '#C7C7C7',
|
|
deemphasise: '#8A9BA8',
|
|
white: {
|
|
DEFAULT: '#FFF',
|
|
'02': 'rgba(255, 255, 255, 0.02)',
|
|
'05': 'rgba(255, 255, 255, 0.05)',
|
|
10: 'rgba(255, 255, 255, 0.10)',
|
|
25: 'rgba(255, 255, 255, 0.25)',
|
|
40: 'rgba(255, 255, 255, 0.40)',
|
|
60: 'rgba(255, 255, 255, 0.60)',
|
|
80: 'rgba(255, 255, 255, 0.80)',
|
|
95: 'rgba(255, 255, 255, 0.95)',
|
|
100: 'rgba(255, 255, 255, 1.00)',
|
|
},
|
|
black: {
|
|
DEFAULT: '#000',
|
|
'02': 'rgba(0, 0, 0, 0.02)',
|
|
'05': 'rgba(0, 0, 0, 0.05)',
|
|
10: 'rgba(0, 0, 0, 0.10)',
|
|
25: 'rgba(0, 0, 0, 0.25)',
|
|
40: 'rgba(0, 0, 0, 0.40)',
|
|
60: 'rgba(0, 0, 0, 0.60)',
|
|
80: 'rgba(0, 0, 0, 0.80)',
|
|
95: 'rgba(0, 0, 0, 0.95)',
|
|
100: 'rgba(0, 0, 0, 1)',
|
|
},
|
|
blue: '#1DA2FB',
|
|
coral: '#FF6057',
|
|
pink: '#FF2D5E',
|
|
orange: '#D9822B',
|
|
yellow: {
|
|
DEFAULT: '#EDFF22',
|
|
dark: '#474B0A', // yellow 0.3 opacity on black
|
|
},
|
|
intent: {
|
|
danger: '#FF261A',
|
|
warning: '#FF7A1A',
|
|
prompt: '#EDFF22',
|
|
success: '#26FF8A',
|
|
help: '#494949',
|
|
highlight: '#E5E5E5',
|
|
},
|
|
'intent-background': {
|
|
danger: '#9E0025', // for white text
|
|
},
|
|
},
|
|
spacing: {
|
|
0: '0px',
|
|
2: '0.125rem',
|
|
4: '0.25rem',
|
|
5: '0.3125rem',
|
|
8: '0.5rem',
|
|
12: '0.75rem',
|
|
16: '1rem',
|
|
20: '1.25rem',
|
|
24: '1.5rem',
|
|
28: '1.75rem',
|
|
32: '2rem',
|
|
40: '2.5rem',
|
|
44: '2.75rem',
|
|
64: '4rem',
|
|
},
|
|
opacity: {
|
|
0: '0',
|
|
2: '0.02',
|
|
5: '0.05',
|
|
10: '0.1',
|
|
15: '0.15',
|
|
20: '0.2',
|
|
25: '0.25',
|
|
30: '0.3',
|
|
35: '0.35',
|
|
40: '0.4',
|
|
45: '0.45',
|
|
50: '0.5',
|
|
55: '0.55',
|
|
60: '0.6',
|
|
65: '0.65',
|
|
70: '0.7',
|
|
75: '0.75',
|
|
80: '0.8',
|
|
85: '0.85',
|
|
90: '0.9',
|
|
95: '0.95',
|
|
100: '1',
|
|
},
|
|
borderWidth: {
|
|
DEFAULT: '1px',
|
|
1: '1px',
|
|
4: '4px',
|
|
},
|
|
borderRadius: {
|
|
none: '0',
|
|
sm: '0.125rem',
|
|
DEFAULT: '0.225rem',
|
|
md: '0.3rem',
|
|
lg: '0.5rem',
|
|
full: '100%',
|
|
},
|
|
fontFamily: {
|
|
mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
|
|
serif: defaultTheme.fontFamily.serif,
|
|
sans: [
|
|
'"Helvetica Neue"',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'Arial',
|
|
'"Noto Sans"',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
'"Noto Color Emoji"',
|
|
],
|
|
alpha: [
|
|
'AlphaLyrae',
|
|
'"Helvetica Neue"',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'Arial',
|
|
'"Noto Sans"',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
'"Noto Color Emoji"',
|
|
],
|
|
},
|
|
fontSize: {
|
|
h1: ['72px', { lineHeight: '92px', letterSpacing: '-0.01em' }],
|
|
h2: ['48px', { lineHeight: '64px', letterSpacing: '-0.01em' }],
|
|
h3: ['32px', { lineHeight: '40px', letterSpacing: '-0.01em' }],
|
|
|
|
h4: ['24px', { lineHeight: '36px', letterSpacing: '-0.01em' }],
|
|
h5: ['18px', { lineHeight: '28px', letterSpacing: '-0.01em' }],
|
|
|
|
'body-large': ['16px', '24px'],
|
|
body: ['14px', '20px'],
|
|
|
|
ui: ['14px', '20px'],
|
|
'ui-small': ['12px', '16px'],
|
|
},
|
|
|
|
boxShadow: {
|
|
callout: '5px 5px 0 1px rgba(255, 255, 255, 0.05)',
|
|
focus: '0px 0px 0px 1px #FFFFFF, 0px 0px 3px 2px #FFE600',
|
|
'focus-dark': '0px 0px 0px 1px #000000, 0px 0px 3px 2px #FFE600',
|
|
radio: '1px 1px 0 0',
|
|
},
|
|
};
|