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

Adjust ui-toolkit colors

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-03-04 17:21:24 +01:00 committed by Matthew Russell
parent 809d136994
commit 20a053a4f5
6 changed files with 341 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ module.exports = {
pink: '#FF2D5E',
green: '#00F780',
},
'vega-yellow-dark': '#474B0A', // yellow 0.3 opacity on black
intent: {
danger: '#FF261A',
warning: '#FF7A1A',
@ -60,6 +61,31 @@ module.exports = {
32: '2rem',
44: '2.75rem',
},
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',
99: '0.98',
100: '1',
},
/*
backgroundColor: ({ theme }) => ({
transparent: 'transparent',
@ -131,3 +157,31 @@ module.exports = {
},
},
};
/*
trueGray: {
50: '#fafafa', 0.02, 0.98
100: '#f5f5f5', 0.04, 0.96
200: '#e5e5e5', 0.10, 0.9
300: '#d4d4d4', 0.17, 0.83
400: '#a3a3a3', 0.36, 0.64
500: '#737373', 0.55, 0.45
600: '#525252', 0.68, 0.32
700: '#404040', 0.75, 0.25
800: '#262626', 0.85, 0.15
900: '#171717', 0.9, 0.1
}
/*
contrasts on #FFF
rgba(0,0,0,0.768) or #595959 7:1
rgba(0,0,0,0.7019) or #767676 4.5:1
rgba(0,0,0,0.63) or #949494 3:1
*/
/*
contrasts on #F2F2F2 (which is rgba(0,0,0,0.5))
rgba(0,0,0,0.8636) or #595959 7:1
*/

19
libs/ui-toolkit/.storybook/preview.js
View File

@ -11,14 +11,19 @@ export const parameters = {
};
export const decorators = [
(Story) => (
<div className="text-body">
<div className="dark bg-black p-16">
(Story, context) =>
context.parameters.themes === false ? (
<div className="text-body">
<Story />
</div>
<div className="p-16">
<Story />
) : (
<div className="text-body">
<div className="dark bg-black p-16">
<Story />
</div>
<div className="p-16">
<Story />
</div>
</div>
</div>
),
),
];

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

@ -28,7 +28,7 @@ export function Button({
'inline-flex',
'items-center',
'justify-center',
'bg-clip-padding',
// 'bg-clip-padding',
'box-border',
'h-28',
'border',
@ -71,18 +71,20 @@ export function Button({
'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
'border-transparent dark:border-transparent':
variant === 'accent' || variant === 'inline',
'hover:bg-vega-yellow/30 dark:hover:bg-vega-yellow/30':
'hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30':
variant === 'accent',
'hover:text-white dark:hover:text-white': variant === 'accent',
'pl-4': variant === 'inline',
'pr-4': variant === 'inline',
'border-0': variant === 'inline',
underline: variant === 'inline',
'hover:no-underline': variant === 'inline',
'hover:border-transparent': variant === 'inline',
'active:border-transparent': variant === 'inline',
'active:text-vega-yellow dark:active:text-vega-yellow':
'hover:border-transparent dark:hover:border-transparent':
variant === 'inline',
'active:border-transparent dark:active:border-transparent':
variant === 'inline',
'active:text-black dark:active:text-vega-yellow': variant === 'inline',
'text-black/95 dark:text-white/95': variant === 'inline',
'hover:text-black hover:dark:text-white': variant === 'inline',

2
libs/ui-toolkit/src/components/input/input.tsx
View File

@ -37,7 +37,7 @@ export const inputClassNames = ({
{
'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/),
'border-vega-pink': hasError,
'border-vega-pink dark:border-vega-pink': hasError,
},
className
);

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

@ -23,27 +23,18 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
<ColorItem
title="theme.color.white"
subtitle="White"
colors={[theme.colors.white.DEFAULT]}
colors={[theme.colors.white]}
/>
<ColorItem
title="theme.color.black"
subtitle="Black"
colors={[theme.colors.black.DEFAULT]}
colors={[theme.colors.black]}
/>
<ColorItem
title="theme.color.coral"
subtitle="Coral"
colors={[theme.colors.coral]}
/>
<ColorItem
title="theme.color.neutral"
subtitle="Neutral"
colors={{
593: theme.colors.neutral[593],
753: theme.colors.neutral[753],
800: theme.colors.neutral[800],
}}
/>
</ColorPalette>
### Vega
@ -78,7 +69,6 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
title="theme.color.backgroundColor"
subtitle="Intent backgroundColor"
colors={{
dark: theme.colors.neutral[753],
black: theme.colors.black.DEFAULT,
white: theme.colors.white.DEFAULT,
danger: theme.colors['intent-background'].danger,

265
libs/ui-toolkit/src/utils/contrast.stories.tsx Normal file
View File

@ -0,0 +1,265 @@
import { Story, Meta } from '@storybook/react';
interface ContrastCheckerProps {
backgrounds: string[];
foregrounds: string[];
backgroundColor: string;
}
const ContrastChecker = ({
backgrounds,
foregrounds,
backgroundColor,
}: ContrastCheckerProps) => (
<div style={{ backgroundColor }}>
{backgrounds.map((backgroundColor) => (
<div key={backgroundColor} style={{ backgroundColor, margin: '16px' }}>
{foregrounds.map((color) => (
<div
id={`${backgroundColor}-${color}`}
style={{ color, padding: '8px' }}
key={color}
>
{color} on {backgroundColor}
</div>
))}
</div>
))}
</div>
);
export default {
component: ContrastChecker,
title: 'Primitives/Contrast',
parameters: { themes: false },
} as Meta;
const Template: Story = (args) => (
<ContrastChecker {...(args as ContrastCheckerProps)} />
);
export const GrayAlpha = Template.bind({});
GrayAlpha.args = {
backgroundColor: 'white',
backgrounds: [
'white',
' rgba(0,0,0,0.02)',
' rgba(0,0,0,0.05)',
' rgba(0,0,0,0.10)',
' rgba(0,0,0,0.15)',
' rgba(0,0,0,0.20)',
' rgba(0,0,0,0.25)',
' rgba(0,0,0,0.30)',
],
foregrounds: [
'black',
' rgba(0,0,0,0.98)',
' rgba(0,0,0,0.95)',
' rgba(0,0,0,0.90)',
' rgba(0,0,0,0.85)',
' rgba(0,0,0,0.80)',
' rgba(0,0,0,0.75)',
' rgba(0,0,0,0.70)',
' rgba(0,0,0,0.65)',
' rgba(0,0,0,0.60)',
' rgba(0,0,0,0.55)',
' rgba(0,0,0,0.50)',
],
};
export const GrayAlphaDark = Template.bind({});
GrayAlphaDark.args = {
backgroundColor: 'black',
backgrounds: [
'black',
' rgba(255,255,255,0.02)',
' rgba(255,255,255,0.05)',
' rgba(255,255,255,0.10)',
' rgba(255,255,255,0.15)',
' rgba(255,255,255,0.20)',
' rgba(255,255,255,0.25)',
' rgba(255,255,255,0.30)',
],
foregrounds: [
'white',
' rgba(255,255,255,0.98)',
' rgba(255,255,255,0.95)',
' rgba(255,255,255,0.90)',
' rgba(255,255,255,0.85)',
' rgba(255,255,255,0.80)',
' rgba(255,255,255,0.75)',
' rgba(255,255,255,0.70)',
' rgba(255,255,255,0.65)',
' rgba(255,255,255,0.60)',
' rgba(255,255,255,0.55)',
' rgba(255,255,255,0.50)',
],
};
export const VegaYellowBackground = Template.bind({});
VegaYellowBackground.args = {
backgroundColor: 'white',
backgrounds: [
'rgba(237, 255, 34)',
'rgba(237, 255, 34, 0.98)',
'rgba(237, 255, 34, 0.95)',
'rgba(237, 255, 34, 0.90)',
'rgba(237, 255, 34, 0.85)',
'rgba(237, 255, 34, 0.80)',
'rgba(237, 255, 34, 0.75)',
'rgba(237, 255, 34, 0.70)',
'rgba(237, 255, 34, 0.65)',
'rgba(237, 255, 34, 0.60)',
],
foregrounds: [
'black',
' rgba(0,0,0,0.98)',
' rgba(0,0,0,0.95)',
' rgba(0,0,0,0.90)',
' rgba(0,0,0,0.85)',
' rgba(0,0,0,0.80)',
' rgba(0,0,0,0.75)',
' rgba(0,0,0,0.70)',
' rgba(0,0,0,0.65)',
' rgba(0,0,0,0.60)',
' rgba(0,0,0,0.55)',
' rgba(0,0,0,0.50)',
],
};
export const VegaYellowBackgroundDark = Template.bind({});
VegaYellowBackgroundDark.args = {
backgroundColor: 'black',
backgrounds: [
'rgba(237, 255, 34)',
'rgba(237, 255, 34, 0.98)',
'rgba(237, 255, 34, 0.95)',
'rgba(237, 255, 34, 0.90)',
'rgba(237, 255, 34, 0.85)',
'rgba(237, 255, 34, 0.80)',
'rgba(237, 255, 34, 0.75)',
'rgba(237, 255, 34, 0.70)',
'rgba(237, 255, 34, 0.65)',
'rgba(237, 255, 34, 0.60)',
'rgba(237, 255, 34, 0.55)',
'rgba(237, 255, 34, 0.50)',
'rgba(237, 255, 34, 0.45)',
'rgba(237, 255, 34, 0.40)',
'rgba(237, 255, 34, 0.35)',
'rgba(237, 255, 34, 0.30)',
'rgba(237, 255, 34, 0.25)',
],
foregrounds: [
'black',
' rgba(0,0,0,0.98)',
' rgba(0,0,0,0.95)',
' rgba(0,0,0,0.90)',
' rgba(0,0,0,0.85)',
' rgba(0,0,0,0.80)',
' rgba(0,0,0,0.75)',
' rgba(0,0,0,0.70)',
' rgba(0,0,0,0.65)',
' rgba(0,0,0,0.60)',
' rgba(0,0,0,0.55)',
' rgba(0,0,0,0.50)',
],
};
export const VegaYellowBackgroundDarkWhiteText = Template.bind({});
VegaYellowBackgroundDarkWhiteText.args = {
backgroundColor: 'black',
backgrounds: [
'rgba(237, 255, 34)',
'rgba(237, 255, 34, 0.98)',
'rgba(237, 255, 34, 0.95)',
'rgba(237, 255, 34, 0.90)',
'rgba(237, 255, 34, 0.85)',
'rgba(237, 255, 34, 0.80)',
'rgba(237, 255, 34, 0.75)',
'rgba(237, 255, 34, 0.70)',
'rgba(237, 255, 34, 0.65)',
'rgba(237, 255, 34, 0.60)',
'rgba(237, 255, 34, 0.55)',
'rgba(237, 255, 34, 0.50)',
'rgba(237, 255, 34, 0.45)',
'rgba(237, 255, 34, 0.40)',
'rgba(237, 255, 34, 0.35)',
'rgba(237, 255, 34, 0.30)',
'rgba(237, 255, 34, 0.25)',
],
foregrounds: [
'white',
' rgba(255, 255, 255, 0.98)',
' rgba(255, 255, 255, 0.95)',
' rgba(255, 255, 255, 0.90)',
' rgba(255, 255, 255, 0.85)',
' rgba(255, 255, 255, 0.80)',
' rgba(255, 255, 255, 0.75)',
' rgba(255, 255, 255, 0.70)',
' rgba(255, 255, 255, 0.65)',
' rgba(255, 255, 255, 0.60)',
' rgba(255, 255, 255, 0.55)',
' rgba(255, 255, 255, 0.50)',
],
};
export const VegaYellowColor = Template.bind({});
VegaYellowColor.args = {
backgroundColor: 'black',
backgrounds: [
'white',
'rgba(255,255,255,0.98)',
' rgba(255,255,255,0.95)',
' rgba(255,255,255.90)',
' rgba(255,255,255,0.85)',
' rgba(255,255,255,0.80)',
' rgba(255,255,255,0.75)',
' rgba(255,255,255,0.70)',
' rgba(255,255,255,0.65)',
' rgba(255,255,255,0.60)',
' rgba(255,255,255,0.55)',
' rgba(255,255,255,0.50)',
' rgba(255,255,255,0.45)',
' rgba(255,255,255,0.40)',
' rgba(255,255,255,0.35)',
],
foregrounds: [
'#edff22',
'#ecff1c',
'#ebff13',
'#eaff05',
'#e1f500',
'#d4e700',
'#c7d800',
'#b9ca00',
'#acbb00',
'#9fad00',
'#929e00',
'#849000',
'#778200',
'#6f7900',
'#6a7300',
'#5c6500',
'#4f5600',
],
};
export const VegaYellowColorDark = Template.bind({});
VegaYellowColorDark.args = {
backgroundColor: 'white',
backgrounds: [
'black',
' rgba(0,0,0,0.98)',
' rgba(0,0,0,0.95)',
' rgba(0,0,0,0.90)',
' rgba(0,0,0,0.85)',
' rgba(0,0,0,0.80)',
' rgba(0,0,0,0.75)',
' rgba(0,0,0,0.70)',
' rgba(0,0,0,0.65)',
' rgba(0,0,0,0.60)',
' rgba(0,0,0,0.55)',
' rgba(0,0,0,0.50)',
],
foregrounds: ['#edff22'],
};