c259622848
* feat: create new buttons * feat: update anchor and button link styles * feat: add icon support * feat: fix full width with icon * feat: convert invalid button props to use new props * feat: tidy up explorer * feat: more tidy up for token and trading * feat: move styles to css file using @apply * chore: remove css with @apply as its not working in apps * fix: deposit form button * feat: use default tailwind config, start on forms * feat: fixup trade grid styles * feat: form styles * feat: styles for order book and tables * feat: make key management use dropdown * feat: update various components * feat: tidy up wallet section * feat: token tidy up * feat: token governance styles * Feat/927: Dialog styling * feat: token styles * feat: add font familys * feat: change token borders to be softer * feat: console-lite changes to support new theme * Feat/927: Centered key-value-table.tsx spacing * Feat/927: Tweak to Explorer site border colours to be inline with trading * Feat/927: Tweak to Explorer header * Feat/927: Theme switcher icon colours * Feat/927: Fix for Explorer block data styling * feat: fix tests, add status footer and change logos * feat: render both theme icons to avoid hydration error * chore: run migrations for project * fix: tailwindconfig build to work with new next version * feat: use document page for next as per documentation * chore: update build targets to use development mode when serving * fix: console-lite default text colors * chore: fix tooltip text break, change submit button * feat: adjust console-lite styles to work with tabs * feat: add bespoke dialog for console-lite market-selector * Feat/927: Theme switcher now has prop for fixed bg colour * Feat/927: Font size and border radius tweak for toggles * Feat/927: Cleaned up trade-grid.tsx spacing * feat: responsive styles for market header and nav * feat: update designs for market popover * fix: nav active state * chore: allow classname to be passed to button * Feat/927: Fix Token width on desktop (was overflowing) * Feat/927: Fix token header h1 from wrapping * Feat/927: Tweak for claim-flow.tsx * fix: connect button test * Feat/927: Proposals list styling polish * Feat/927: key-value-table.tsx spacing tweak * feat: add copy button to kp dropdown * Feat/927: Removing old theme params and uses * Feat/927: Removing old theme params and uses, documenting the now used otb sizes * feat: use key val table in asset dialog * feat: align tooltip styles * fix: orderbook grid alignment * chore: linting * fix: dialog sizing in medium mode, node switcher styles * chore: remove unused color classes * feat: update radio and checkbox designs * feat: updates to storybook * feat: update design system stories * chore: stories update * chore: rename resize panels and tidy * feat: fix checkbox tick * fix: add poyfills for jest in trading test setup * chore: fix checkbox tests * chore: fix tests * chore: fix tests again * chore: revert token wallet name test * fix: tooltip tests on console-lite * fix: wallet dropdown test Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
const colors = require('tailwindcss/colors');
|
|
const themelite = require('./theme-lite');
|
|
|
|
const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.percent-change-up::before': {
|
|
content: ' ',
|
|
display: 'block',
|
|
borderLeft: '4px solid transparent',
|
|
borderRight: '4px solid transparent',
|
|
borderBottom: '4px solid',
|
|
marginBottom: '11px',
|
|
marginRight: '5px',
|
|
},
|
|
'.percent-change-down::before': {
|
|
content: ' ',
|
|
display: 'block',
|
|
borderLeft: '4px solid transparent',
|
|
borderRight: '4px solid transparent',
|
|
borderTop: '4px solid',
|
|
marginTop: '11px',
|
|
marginRight: '5px',
|
|
},
|
|
'.percent-change-unchanged::before': {
|
|
content: ' ',
|
|
width: '4px',
|
|
height: '4px',
|
|
borderRadius: '50%',
|
|
backgroundColor: colors.neutral[900],
|
|
marginTop: '10px',
|
|
marginRight: '5px',
|
|
},
|
|
'.buyButton': {
|
|
textTransform: 'uppercase',
|
|
textDecoration: 'none',
|
|
backgroundColor: 'rgba(0, 143, 74, 0.1)',
|
|
border: `1px solid ${themelite.colors.darkerGreen}`,
|
|
color: themelite.colors.darkerGreen,
|
|
'&:hover': {
|
|
backgroundColor: themelite.colors.darkerGreen,
|
|
color: colors.white,
|
|
},
|
|
'&.selected': {
|
|
backgroundColor: themelite.colors.darkerGreen,
|
|
color: colors.white,
|
|
},
|
|
},
|
|
'.buyButtonDark': {
|
|
color: themelite.colors.darkerGreen,
|
|
'&:hover': {
|
|
color: colors.black,
|
|
},
|
|
'&.selected': {
|
|
color: colors.black,
|
|
},
|
|
},
|
|
'.sellButton': {
|
|
textTransform: 'uppercase',
|
|
textDecoration: 'none',
|
|
backgroundColor: 'rgba(255, 8, 126, 0.1)',
|
|
border: `1px solid ${themelite.colors.pink}`,
|
|
color: themelite.colors.pink,
|
|
'&:hover': {
|
|
color: colors.white,
|
|
backgroundColor: themelite.colors.pink,
|
|
},
|
|
'&.selected': {
|
|
backgroundColor: themelite.colors.pink,
|
|
color: colors.white,
|
|
},
|
|
},
|
|
'.sellButtonDark': {
|
|
color: themelite.colors.pink,
|
|
'&:hover': {
|
|
color: colors.black,
|
|
},
|
|
'&.selected': {
|
|
color: colors.black,
|
|
},
|
|
},
|
|
// '.tooltip-content': {
|
|
// '& > div': {
|
|
// fontSize: '12px',
|
|
// borderWeight: '1px',
|
|
// borderRadius: '7px',
|
|
// borderColor: theme.colors.black.DEFAULT,
|
|
// backgroundColor: theme.colors.black.DEFAULT,
|
|
// color: theme.colors.white.DEFAULT,
|
|
// },
|
|
// '& svg[width="10"]': {
|
|
// fill: theme.colors.black.DEFAULT,
|
|
// },
|
|
// '& svg[width="8"]': {
|
|
// fill: theme.colors.black.DEFAULT,
|
|
// },
|
|
// },
|
|
// '.tooltip-content-dark': {
|
|
// '& > div': {
|
|
// borderColor: theme.colors.black.DEFAULT,
|
|
// backgroundColor: '#dcdcc8',
|
|
// color: '#333333',
|
|
// },
|
|
// '& svg[width="10"]': {
|
|
// fill: theme.colors.white.DEFAULT,
|
|
// },
|
|
// '& svg[width="8"]': {
|
|
// fill: '#dcdcc8',
|
|
// },
|
|
// },
|
|
});
|
|
});
|
|
|
|
module.exports = vegaCustomClassesLite;
|