LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(ui-toolkit): new colour palette (#2783)

Browse Source
This commit is contained in:
Art 2023-01-31 16:33:16 +01:00 committed by GitHub
parent df7755dbc4
commit 01f0934da3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 209 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/token/src/components/locked-progress/locked-progress.tsx
View File

@ -72,8 +72,8 @@ export const LockedProgress = ({
unlocked, unlocked,
leftLabel, leftLabel,
rightLabel, rightLabel,
leftColor = Colors.vega.pink, leftColor = Colors.vega.pink.DEFAULT,
rightColor = Colors.vega.green, rightColor = Colors.vega.green.DEFAULT,
decimals = 2, decimals = 2,
}: LockedProgressProps) => { }: LockedProgressProps) => {
const lockedPercentage = React.useMemo(() => { const lockedPercentage = React.useMemo(() => {

11
apps/token/src/hooks/use-animate-value.ts
View File

@ -30,9 +30,12 @@ export function useAnimateValue(
) { ) {
elRef.current?.animate( elRef.current?.animate(
[ [
{ backgroundColor: customColors.vega.pink, color: colors.white },
{ {
backgroundColor: customColors.vega.pink, backgroundColor: customColors.vega.pink.DEFAULT,
color: colors.white,
},
{
backgroundColor: customColors.vega.pink.DEFAULT,
color: colors.white, color: colors.white,
offset: 0.8, offset: 0.8,
}, },
@ -53,11 +56,11 @@ export function useAnimateValue(
elRef.current?.animate( elRef.current?.animate(
[ [
{ {
backgroundColor: customColors.vega.green, backgroundColor: customColors.vega.green.DEFAULT,
color: colors.white, color: colors.white,
}, },
{ {
backgroundColor: customColors.vega.green, backgroundColor: customColors.vega.green.DEFAULT,
color: colors.white, color: colors.white,
offset: 0.8, offset: 0.8,
}, },

4
apps/token/src/routes/tranches/tranche-progress.tsx
View File

@ -29,7 +29,7 @@ export const TrancheProgress = ({
<span className="tranches__progress-title">{t('Locked')}</span> <span className="tranches__progress-title">{t('Locked')}</span>
<ProgressBar <ProgressBar
width={220} width={220}
color={Colors.vega.pink} color={Colors.vega.pink.DEFAULT}
percentage={lockedPercentage} percentage={lockedPercentage}
/> />
<span className="tranches__progress-numbers"> <span className="tranches__progress-numbers">
@ -40,7 +40,7 @@ export const TrancheProgress = ({
<span className="tranches__progress-title">{t('Redeemed')}</span> <span className="tranches__progress-title">{t('Redeemed')}</span>
<ProgressBar <ProgressBar
width={220} width={220}
color={Colors.vega.green} color={Colors.vega.green.DEFAULT}
percentage={removedPercentage} percentage={removedPercentage}
/> />
<span className="tranches__progress-numbers"> <span className="tranches__progress-numbers">

12
apps/token/src/routes/tranches/vesting-chart.tsx
View File

@ -34,10 +34,10 @@ export const VestingChart = () => {
<AreaChart data={data}> <AreaChart data={data}>
<defs> <defs>
{[ {[
['pink', Colors.vega.pink], ['pink', Colors.vega.pink.DEFAULT],
['green', Colors.vega.green], ['green', Colors.vega.green.DEFAULT],
['orange', Colors.warning], ['orange', Colors.warning],
['yellow', Colors.vega.yellow], ['yellow', Colors.vega.yellow.DEFAULT],
].map(([key, color]) => ( ].map(([key, color]) => (
<linearGradient key={key} id={key} x1="0" y1="0" x2="0" y2="1"> <linearGradient key={key} id={key} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={color} stopOpacity={0.85} /> <stop offset="0%" stopColor={color} stopOpacity={0.85} />
@ -97,7 +97,7 @@ export const VestingChart = () => {
dot={false} dot={false}
type="linear" type="linear"
dataKey="team" dataKey="team"
stroke={Colors.vega.pink} stroke={Colors.vega.pink.DEFAULT}
fill="url(#pink)" fill="url(#pink)"
yAxisId={0} yAxisId={0}
strokeWidth={2} strokeWidth={2}
@ -109,7 +109,7 @@ export const VestingChart = () => {
dot={false} dot={false}
type="monotone" type="monotone"
dataKey="earlyInvestors" dataKey="earlyInvestors"
stroke={Colors.vega.green} stroke={Colors.vega.green.DEFAULT}
fill="url(#green)" fill="url(#green)"
yAxisId={0} yAxisId={0}
strokeWidth={2} strokeWidth={2}
@ -121,7 +121,7 @@ export const VestingChart = () => {
dot={false} dot={false}
type="monotone" type="monotone"
dataKey="publicSale" dataKey="publicSale"
stroke={Colors.vega.yellow} stroke={Colors.vega.yellow.DEFAULT}
fill="url(#yellow)" fill="url(#yellow)"
yAxisId={0} yAxisId={0}
strokeWidth={2} strokeWidth={2}

44
apps/trading/pages/styles.css
View File

@ -10,49 +10,49 @@ body,
/* Styles for allotment */ /* Styles for allotment */
html { html {
--focus-border: theme('colors.vega.pink'); --focus-border: theme('colors.vega.pink.500');
--separator-border: theme('colors.neutral.300'); --separator-border: theme('colors.vega.light.200');
--pennant-color-danger: theme('colors.vega.pink'); --pennant-color-danger: theme('colors.vega.pink.500');
} }
html.dark { html.dark {
--focus-border: theme('colors.vega.yellow'); --focus-border: theme('colors.vega.yellow.500');
--separator-border: theme('colors.neutral.600'); --separator-border: theme('colors.vega.dark.200');
} }
.border-default { .border-default {
@apply border-neutral-300 dark:border-neutral-600; @apply border-vega-light-200 dark:border-vega-dark-200;
} }
/* Styles for charts */ /* Styles for charts */
html [data-theme='dark'] { html [data-theme='dark'] {
--pennant-color-danger: theme('colors.vega.pink'); --pennant-color-danger: theme('colors.vega.pink.DEFAULT');
/* candles */ /* candles */
--pennant-color-buy-fill: theme('colors.vega.green-data-dark'); --pennant-color-buy-fill: theme('colors.vega.green.650');
--pennant-color-buy-stroke: theme('colors.vega.green'); --pennant-color-buy-stroke: theme('colors.vega.green.500');
/* sell candles only use stroke as the candle is solid (without border) */ /* sell candles only use stroke as the candle is solid (without border) */
--pennant-color-sell-stroke: theme('colors.vega.pink'); --pennant-color-sell-stroke: theme('colors.vega.pink.500');
/* depth chart */ /* depth chart */
--pennant-color-depth-buy-fill: theme('colors.vega.green-data-dark'); --pennant-color-depth-buy-fill: theme('colors.vega.green.650');
--pennant-color-depth-buy-stroke: theme('colors.vega.green'); --pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
--pennant-color-depth-sell-fill: theme('colors.vega.pink-data-dark'); --pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
--pennant-color-depth-sell-stroke: theme('colors.vega.pink'); --pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
} }
html [data-theme='light'] { html [data-theme='light'] {
--pennant-color-danger: theme('colors.vega.pink'); --pennant-color-danger: theme('colors.vega.pink.500');
/* candles */ /* candles */
--pennant-color-buy-fill: theme('colors.vega.green-data-light'); --pennant-color-buy-fill: theme('colors.vega.green.400');
--pennant-color-buy-stroke: theme('colors.vega.green-dark'); --pennant-color-buy-stroke: theme('colors.vega.green.550');
/* sell candles only use stroke as the candle is solid (without border) */ /* sell candles only use stroke as the candle is solid (without border) */
--pennant-color-sell-stroke: theme('colors.vega.pink-data-light'); --pennant-color-sell-stroke: theme('colors.vega.pink.400');
/* depth chart */ /* depth chart */
--pennant-color-depth-buy-fill: theme('colors.vega.green-data-light'); --pennant-color-depth-buy-fill: theme('colors.vega.green.400');
--pennant-color-depth-buy-stroke: theme('colors.vega.green-dark'); --pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
--pennant-color-depth-sell-fill: theme('colors.vega.pink-data-light'); --pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
--pennant-color-depth-sell-stroke: theme('colors.vega.pink-dark'); --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
} }

8
libs/react-helpers/src/lib/grid/flash-cell.tsx
View File

@ -71,8 +71,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
if (value < previousValue) { if (value < previousValue) {
ref.current?.animate( ref.current?.animate(
[ [
{ color: theme.colors.vega.pink }, { color: theme.colors.vega.pink.DEFAULT },
{ color: theme.colors.vega.pink, offset: 0.8 }, { color: theme.colors.vega.pink.DEFAULT, offset: 0.8 },
{ color: 'inherit' }, { color: 'inherit' },
], ],
FLASH_DURATION FLASH_DURATION
@ -80,8 +80,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
} else if (value > previousValue) { } else if (value > previousValue) {
ref.current?.animate( ref.current?.animate(
[ [
{ color: theme.colors.vega.green }, { color: theme.colors.vega.green.DEFAULT },
{ color: theme.colors.vega.green, offset: 0.8 }, { color: theme.colors.vega.green.DEFAULT, offset: 0.8 },
{ color: 'inherit' }, { color: 'inherit' },
], ],
FLASH_DURATION FLASH_DURATION

8
libs/react-helpers/src/lib/grid/size.tsx
View File

@ -19,16 +19,16 @@ export const Size = ({
data-testid="size" data-testid="size"
className={classNames('text-right', { className={classNames('text-right', {
// BUY // BUY
'text-vega-green-dark dark:text-vega-green': 'text-vega-green-550 dark:text-vega-green':
side === Schema.Side.SIDE_BUY && !forceTheme, side === Schema.Side.SIDE_BUY && !forceTheme,
'text-vega-green-dark': 'text-vega-green-550':
side === Schema.Side.SIDE_BUY && forceTheme === 'light', side === Schema.Side.SIDE_BUY && forceTheme === 'light',
'text-vega-green': 'text-vega-green':
side === Schema.Side.SIDE_BUY && forceTheme === 'dark', side === Schema.Side.SIDE_BUY && forceTheme === 'dark',
// SELL // SELL
'text-vega-pink-dark dark:text-vega-pink': 'text-vega-pink-550 dark:text-vega-pink':
side === Schema.Side.SIDE_SELL && !forceTheme, side === Schema.Side.SIDE_SELL && !forceTheme,
'text-vega-pink-dark': 'text-vega-pink-550':
side === Schema.Side.SIDE_SELL && forceTheme === 'light', side === Schema.Side.SIDE_SELL && forceTheme === 'light',
'text-vega-pink': 'text-vega-pink':
side === Schema.Side.SIDE_SELL && forceTheme === 'dark', side === Schema.Side.SIDE_SELL && forceTheme === 'dark',

4
libs/react-helpers/src/lib/grid/vol-cell.tsx
View File

@ -20,8 +20,8 @@ export interface IVolCellProps extends ICellRendererParams {
valueFormatted: Omit<VolProps, 'value'>; valueFormatted: Omit<VolProps, 'value'>;
} }
export const BID_COLOR = tailwind.theme.colors.vega['green']; export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
export const ASK_COLOR = tailwind.theme.colors.vega['pink']; export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;
export const Vol = React.memo( export const Vol = React.memo(
({ value, valueFormatted, relativeValue, type, testId }: VolProps) => { ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {

117
libs/tailwindcss-config/src/theme.js
View File

@ -10,22 +10,113 @@ module.exports = {
colors: { colors: {
transparent: 'transparent', transparent: 'transparent',
current: 'currentColor', current: 'currentColor',
black: '#000000',
white: '#FFFFFF',
vega: { vega: {
yellow: '#DFFF0B', // YELLOW
'yellow-dark': '#B6DC26', yellow: {
pink: '#FF077F', 700: '#23290E',
'pink-data-light': '#FF6AB2', 650: '#515E1E',
'pink-dark': '#CF0064', 600: '#7E932F',
'pink-data-dark': '#7A033D', 550: '#ABC840',
green: '#00F780', DEFAULT: '#D7FB50',
'green-data-light': '#85FBC2', 500: '#D7FB50',
'green-dark': '#00D46E', 450: '#E0FC75',
'green-data-dark': '#006333', 400: '#E8FD9A',
orange: '#FF7A1A', 350: '#F0FDBE',
blue: '#1DA2FB', 300: '#F9FEE3',
},
// GREEN
green: {
700: '#012915',
650: '#015D30',
600: '#01914B',
550: '#01C566',
DEFAULT: '#00F780',
500: '#00F780',
450: '#37F99B',
400: '#6CFAB6',
350: '#A1FCD0',
300: '#D6FEEB',
},
// BLUE
blue: {
700: '#01142A',
650: '#012C60',
600: '#014595',
550: '#015ECB',
DEFAULT: '#0075FF',
500: '#0075FF',
450: '#3793FF',
400: '#6CAFFF',
350: '#A1CCFF',
300: '#D6E9FF',
},
// PURPLE
purple: {
700: '#15072A',
650: '#301060',
600: '#4B1895',
550: '#6620CB',
DEFAULT: '#8028FF',
500: '#8028FF',
450: '#9B56FF',
400: '#B683FF',
350: '#D0B0FF',
300: '#EBDDFF',
},
// PINK
pink: {
700: '#210215',
650: '#600330',
600: '#95054B',
550: '#CB0666',
DEFAULT: '#FF077F',
500: '#FF077F',
450: '#FF3C9A',
400: '#FF70B5',
350: '#FFA3D0',
300: '#FFD7EA',
},
// ORANGE
orange: {
700: '#2A1701',
650: '#603301',
600: '#954F01',
550: '#CB6C01',
DEFAULT: '#FF8700',
500: '#FF8700',
450: '#FFA137',
400: '#FFBA6C',
350: '#FFD3A1',
300: '#FFECD6',
},
// DARK
dark: {
400: '#161616',
300: '#262626',
200: '#404040',
150: '#8B8B8B',
100: '#C0C0C0',
},
// LIGHT
light: {
400: '#F0F0F0',
300: '#E9E9E9',
200: '#D2D2D2',
150: '#939393',
100: '#626262',
},
}, },
danger: '#FF077F', danger: '#FF077F',
warning: '#FF7A1A', warning: '#FF8700',
success: '#00F780', success: '#00F780',
}, },
fontFamily: { fontFamily: {

8
libs/tailwindcss-config/src/vega-custom-classes.js
View File

@ -22,17 +22,17 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
}, },
'.dark .syntax-highlighter-wrapper .hljs': { '.dark .syntax-highlighter-wrapper .hljs': {
background: colors.neutral[800], background: colors.neutral[800],
color: theme.colors.vega.green, color: theme.colors.vega.green.DEFAULT,
border: 0, border: 0,
}, },
'.syntax-highlighter-wrapper .hljs-literal': { '.syntax-highlighter-wrapper .hljs-literal': {
color: theme.colors.vega.pink, color: theme.colors.vega.pink.DEFAULT,
}, },
'.syntax-highlighter-wrapper .hljs-number': { '.syntax-highlighter-wrapper .hljs-number': {
color: theme.colors.vega.orange, color: theme.colors.vega.orange.DEFAULT,
}, },
'.syntax-highlighter-wrapper .hljs-string': { '.syntax-highlighter-wrapper .hljs-string': {
color: theme.colors.vega.blue, color: theme.colors.vega.blue.DEFAULT,
}, },
'.clip-path-rounded': { '.clip-path-rounded': {
clipPath: 'circle(50%)', clipPath: 'circle(50%)',

8
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -27,20 +27,20 @@ const primary = [
'text-black', 'text-black',
'border-vega-yellow', 'border-vega-yellow',
'bg-vega-yellow', 'bg-vega-yellow',
'enabled:hover:bg-vega-yellow-dark enabled:hover:border-vega-yellow-dark', 'enabled:hover:bg-vega-yellow-550 enabled:hover:border-vega-yellow-550',
'enabled:active:bg-vega-yellow-dark enabled:active:border-vega-yellow-dark', 'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
]; ];
const secondary = [ const secondary = [
'text-white dark:text-black', 'text-white dark:text-black',
'border-vega-pink', 'border-vega-pink',
'dark:bg-vega-pink bg-vega-pink-dark', 'dark:bg-vega-pink bg-vega-pink-550',
'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink', 'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
'enabled:active:bg-vega-pink enabled:active:border-vega-pink', 'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
]; ];
const ternary = [ const ternary = [
'text-white dark:text-black', 'text-white dark:text-black',
'border-vega-green', 'border-vega-green',
'dark:bg-vega-green bg-vega-green-dark', 'dark:bg-vega-green bg-vega-green-550',
'enabled:hover:bg-vega-green enabled:hover:border-vega-green', 'enabled:hover:bg-vega-green enabled:hover:border-vega-green',
'enabled:active:bg-vega-green enabled:active:border-vega-green', 'enabled:active:bg-vega-green enabled:active:border-vega-green',
]; ];

4
libs/ui-toolkit/src/components/toggle/toggle.tsx
View File

@ -40,9 +40,9 @@ export const Toggle = ({
{ {
'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black': 'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black':
type === 'primary', type === 'primary',
'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-dark': 'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-550':
type === 'buy', type === 'buy',
'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-dark': 'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-550':
type === 'sell', type === 'sell',
}, },
'peer-checked:text-white dark:peer-checked:text-black', 'peer-checked:text-white dark:peer-checked:text-black',

65
libs/ui-toolkit/src/primitives/colors.stories.mdx
View File

@ -14,32 +14,29 @@ import colors from 'tailwindcss/colors';
This project uses Tailwindcss so a lot of colour props are passed in as CSS classes that This project uses Tailwindcss so a lot of colour props are passed in as CSS classes that
Tailwind applies styling to i.e. `text-blue-500` to use the primary blue. You can find the Tailwind applies styling to i.e. `text-blue-500` to use the primary blue. You can find the
full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette). full tailiwnd's colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette).
The Vega's colour palette can be found [here](https://www.figma.com/file/8lCQ6iNK3dbw42bIKwGCRk/Foundations?node-id=3750%3A77046)
## Colours ## Colours
### Shared
<ColorPalette>
<ColorItem title="White" colors={colors.white} />
<ColorItem title="Black" colors={colors.black} />
</ColorPalette>
### Vega
<ColorPalette> <ColorPalette>
<ColorItem <ColorItem
title="theme.color.vega" title="dark"
subtitle="Vega colors" colors={{ ...theme.colors.vega.dark, black: theme.colors.black }}
colors={theme.colors.vega}
/> />
</ColorPalette>
### Intent
<ColorPalette>
<ColorItem <ColorItem
title="theme.color[danger|warning|success]" title="light"
colors={{ ...theme.colors.vega.light, white: theme.colors.white }}
/>
<ColorItem title="yellow" colors={theme.colors.vega.yellow} />
<ColorItem title="green" colors={theme.colors.vega.green} />
<ColorItem title="blue" colors={theme.colors.vega.blue} />
<ColorItem title="purple" colors={theme.colors.vega.purple} />
<ColorItem title="pink" colors={theme.colors.vega.pink} />
<ColorItem title="orange" colors={theme.colors.vega.orange} />
<ColorItem
title="intent"
colors={{ colors={{
danger: theme.colors.danger, danger: theme.colors.danger,
warning: theme.colors.warning, warning: theme.colors.warning,
@ -47,3 +44,33 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
}} }}
/> />
</ColorPalette> </ColorPalette>
# Replacement for legacy shades
<ColorPalette>
<ColorItem
title="legacy shades"
colors={{
'vega-yellow-dark': '#B6DC26', // vega-yellow-dark -> vega-yellow-550
'vega-pink-data-light': '#FF6AB2', // vega-pink-data-light -> vega-pink-400
'vega-pink-dark': '#CF0064', // vega-pink-dark -> vega-pink-550
'vega-pink-data-dark': '#7A033D', // vega-pink-data-dark -> vega-pink-650
'vega-green-data-light': '#85FBC2', // vega-green-data-light -> vega-green-400
'vega-green-dark': '#00D46E', // vega-green-dark -> vega-green-550
'vega-green-data-dark': '#006333', // vega-green-data-dark -> vega-green-650
}}
/>
<ColorItem
title="replacement"
colors={{
'vega-yellow-550': theme.colors.vega.yellow[550],
'vega-pink-400': theme.colors.vega.pink[400],
'vega-pink-550': theme.colors.vega.pink[550],
'vega-pink-650': theme.colors.vega.pink[650],
'vega-green-400': theme.colors.vega.green[400],
'vega-green-550': theme.colors.vega.green[550],
'vega-green-650': theme.colors.vega.green[650],
}}
/>
</ColorPalette>