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,
leftLabel,
rightLabel,
leftColor = Colors.vega.pink,
rightColor = Colors.vega.green,
leftColor = Colors.vega.pink.DEFAULT,
rightColor = Colors.vega.green.DEFAULT,
decimals = 2,
}: LockedProgressProps) => {
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(
[
{ 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,
offset: 0.8,
},
@ -53,11 +56,11 @@ export function useAnimateValue(
elRef.current?.animate(
[
{
backgroundColor: customColors.vega.green,
backgroundColor: customColors.vega.green.DEFAULT,
color: colors.white,
},
{
backgroundColor: customColors.vega.green,
backgroundColor: customColors.vega.green.DEFAULT,
color: colors.white,
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>
<ProgressBar
width={220}
color={Colors.vega.pink}
color={Colors.vega.pink.DEFAULT}
percentage={lockedPercentage}
/>
<span className="tranches__progress-numbers">
@ -40,7 +40,7 @@ export const TrancheProgress = ({
<span className="tranches__progress-title">{t('Redeemed')}</span>
<ProgressBar
width={220}
color={Colors.vega.green}
color={Colors.vega.green.DEFAULT}
percentage={removedPercentage}
/>
<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}>
<defs>
{[
['pink', Colors.vega.pink],
['green', Colors.vega.green],
['pink', Colors.vega.pink.DEFAULT],
['green', Colors.vega.green.DEFAULT],
['orange', Colors.warning],
['yellow', Colors.vega.yellow],
['yellow', Colors.vega.yellow.DEFAULT],
].map(([key, color]) => (
<linearGradient key={key} id={key} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={color} stopOpacity={0.85} />
@ -97,7 +97,7 @@ export const VestingChart = () => {
dot={false}
type="linear"
dataKey="team"
stroke={Colors.vega.pink}
stroke={Colors.vega.pink.DEFAULT}
fill="url(#pink)"
yAxisId={0}
strokeWidth={2}
@ -109,7 +109,7 @@ export const VestingChart = () => {
dot={false}
type="monotone"
dataKey="earlyInvestors"
stroke={Colors.vega.green}
stroke={Colors.vega.green.DEFAULT}
fill="url(#green)"
yAxisId={0}
strokeWidth={2}
@ -121,7 +121,7 @@ export const VestingChart = () => {
dot={false}
type="monotone"
dataKey="publicSale"
stroke={Colors.vega.yellow}
stroke={Colors.vega.yellow.DEFAULT}
fill="url(#yellow)"
yAxisId={0}
strokeWidth={2}

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

@ -10,49 +10,49 @@ body,
/* Styles for allotment */
html {
--focus-border: theme('colors.vega.pink');
--separator-border: theme('colors.neutral.300');
--pennant-color-danger: theme('colors.vega.pink');
--focus-border: theme('colors.vega.pink.500');
--separator-border: theme('colors.vega.light.200');
--pennant-color-danger: theme('colors.vega.pink.500');
}
html.dark {
--focus-border: theme('colors.vega.yellow');
--separator-border: theme('colors.neutral.600');
--focus-border: theme('colors.vega.yellow.500');
--separator-border: theme('colors.vega.dark.200');
}
.border-default {
@apply border-neutral-300 dark:border-neutral-600;
@apply border-vega-light-200 dark:border-vega-dark-200;
}
/* Styles for charts */
html [data-theme='dark'] {
--pennant-color-danger: theme('colors.vega.pink');
--pennant-color-danger: theme('colors.vega.pink.DEFAULT');
/* candles */
--pennant-color-buy-fill: theme('colors.vega.green-data-dark');
--pennant-color-buy-stroke: theme('colors.vega.green');
--pennant-color-buy-fill: theme('colors.vega.green.650');
--pennant-color-buy-stroke: theme('colors.vega.green.500');
/* 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 */
--pennant-color-depth-buy-fill: theme('colors.vega.green-data-dark');
--pennant-color-depth-buy-stroke: theme('colors.vega.green');
--pennant-color-depth-sell-fill: theme('colors.vega.pink-data-dark');
--pennant-color-depth-sell-stroke: theme('colors.vega.pink');
--pennant-color-depth-buy-fill: theme('colors.vega.green.650');
--pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
--pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
--pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
}
html [data-theme='light'] {
--pennant-color-danger: theme('colors.vega.pink');
--pennant-color-danger: theme('colors.vega.pink.500');
/* candles */
--pennant-color-buy-fill: theme('colors.vega.green-data-light');
--pennant-color-buy-stroke: theme('colors.vega.green-dark');
--pennant-color-buy-fill: theme('colors.vega.green.400');
--pennant-color-buy-stroke: theme('colors.vega.green.550');
/* 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 */
--pennant-color-depth-buy-fill: theme('colors.vega.green-data-light');
--pennant-color-depth-buy-stroke: theme('colors.vega.green-dark');
--pennant-color-depth-sell-fill: theme('colors.vega.pink-data-light');
--pennant-color-depth-sell-stroke: theme('colors.vega.pink-dark');
--pennant-color-depth-buy-fill: theme('colors.vega.green.400');
--pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
--pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
--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) {
ref.current?.animate(
[
{ color: theme.colors.vega.pink },
{ color: theme.colors.vega.pink, offset: 0.8 },
{ color: theme.colors.vega.pink.DEFAULT },
{ color: theme.colors.vega.pink.DEFAULT, offset: 0.8 },
{ color: 'inherit' },
],
FLASH_DURATION
@ -80,8 +80,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
} else if (value > previousValue) {
ref.current?.animate(
[
{ color: theme.colors.vega.green },
{ color: theme.colors.vega.green, offset: 0.8 },
{ color: theme.colors.vega.green.DEFAULT },
{ color: theme.colors.vega.green.DEFAULT, offset: 0.8 },
{ color: 'inherit' },
],
FLASH_DURATION

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

@ -19,16 +19,16 @@ export const Size = ({
data-testid="size"
className={classNames('text-right', {
// BUY
'text-vega-green-dark dark:text-vega-green':
'text-vega-green-550 dark:text-vega-green':
side === Schema.Side.SIDE_BUY && !forceTheme,
'text-vega-green-dark':
'text-vega-green-550':
side === Schema.Side.SIDE_BUY && forceTheme === 'light',
'text-vega-green':
side === Schema.Side.SIDE_BUY && forceTheme === 'dark',
// SELL
'text-vega-pink-dark dark:text-vega-pink':
'text-vega-pink-550 dark:text-vega-pink':
side === Schema.Side.SIDE_SELL && !forceTheme,
'text-vega-pink-dark':
'text-vega-pink-550':
side === Schema.Side.SIDE_SELL && forceTheme === 'light',
'text-vega-pink':
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'>;
}
export const BID_COLOR = tailwind.theme.colors.vega['green'];
export const ASK_COLOR = tailwind.theme.colors.vega['pink'];
export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;
export const Vol = React.memo(
({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {

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

@ -10,22 +10,113 @@ module.exports = {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000000',
white: '#FFFFFF',
vega: {
yellow: '#DFFF0B',
'yellow-dark': '#B6DC26',
pink: '#FF077F',
'pink-data-light': '#FF6AB2',
'pink-dark': '#CF0064',
'pink-data-dark': '#7A033D',
green: '#00F780',
'green-data-light': '#85FBC2',
'green-dark': '#00D46E',
'green-data-dark': '#006333',
orange: '#FF7A1A',
blue: '#1DA2FB',
// YELLOW
yellow: {
700: '#23290E',
650: '#515E1E',
600: '#7E932F',
550: '#ABC840',
DEFAULT: '#D7FB50',
500: '#D7FB50',
450: '#E0FC75',
400: '#E8FD9A',
350: '#F0FDBE',
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',
warning: '#FF7A1A',
warning: '#FF8700',
success: '#00F780',
},
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': {
background: colors.neutral[800],
color: theme.colors.vega.green,
color: theme.colors.vega.green.DEFAULT,
border: 0,
},
'.syntax-highlighter-wrapper .hljs-literal': {
color: theme.colors.vega.pink,
color: theme.colors.vega.pink.DEFAULT,
},
'.syntax-highlighter-wrapper .hljs-number': {
color: theme.colors.vega.orange,
color: theme.colors.vega.orange.DEFAULT,
},
'.syntax-highlighter-wrapper .hljs-string': {
color: theme.colors.vega.blue,
color: theme.colors.vega.blue.DEFAULT,
},
'.clip-path-rounded': {
clipPath: 'circle(50%)',

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

@ -27,20 +27,20 @@ const primary = [
'text-black',
'border-vega-yellow',
'bg-vega-yellow',
'enabled:hover:bg-vega-yellow-dark enabled:hover:border-vega-yellow-dark',
'enabled:active:bg-vega-yellow-dark enabled:active:border-vega-yellow-dark',
'enabled:hover:bg-vega-yellow-550 enabled:hover:border-vega-yellow-550',
'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
];
const secondary = [
'text-white dark:text-black',
'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:active:bg-vega-pink enabled:active:border-vega-pink',
];
const ternary = [
'text-white dark:text-black',
'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: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':
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',
'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',
},
'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
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
### Shared
<ColorPalette>
<ColorItem title="White" colors={colors.white} />
<ColorItem title="Black" colors={colors.black} />
</ColorPalette>
### Vega
<ColorPalette>
<ColorItem
title="theme.color.vega"
subtitle="Vega colors"
colors={theme.colors.vega}
title="dark"
colors={{ ...theme.colors.vega.dark, black: theme.colors.black }}
/>
</ColorPalette>
### Intent
<ColorPalette>
<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={{
danger: theme.colors.danger,
warning: theme.colors.warning,
@ -47,3 +44,33 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
}}
/>
</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>