Use only black and white rgba colors
This commit is contained in:
Bartłomiej Głownia
Matthew Russell
parent
d9444e9aef
commit
f4a8aaaf23
@ -10,33 +10,6 @@ module.exports = {
|
||||
current: 'currentColor',
|
||||
white: '#FFF',
|
||||
black: '#000',
|
||||
neutral: {
|
||||
// 250 - 23 = 227; (900-50) / 227 = 850 / 227 = 3.74449339207
|
||||
50: '#fafafa', // FA = 250
|
||||
100: '#ebebeb',
|
||||
150: '#dcdcdc',
|
||||
200: '#cdcdcd',
|
||||
250: '#bebebe',
|
||||
300: '#afafaf',
|
||||
350: '#a1a1a1',
|
||||
400: '#939393',
|
||||
450: '#858585',
|
||||
500: '#787878',
|
||||
550: '#6a6a6a',
|
||||
593: '#696969', // dark muted
|
||||
600: '#5d5d5d',
|
||||
650: '#515151',
|
||||
700: '#444444',
|
||||
753: '#3E3E3E', // dark -> 3F is muted
|
||||
750: '#383838',
|
||||
800: '#2d2d2d', // breakdown-background was 2C
|
||||
850: '#222222',
|
||||
900: '#171717', // 17 = 23
|
||||
},
|
||||
|
||||
'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors
|
||||
'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors
|
||||
disabled: '#8598A6', // 'fill-disabled': 'rgba(133, 152, 166, 0.25)'
|
||||
coral: '#FF6057',
|
||||
vega: {
|
||||
yellow: '#EDFF22',
|
||||
@ -47,14 +20,12 @@ module.exports = {
|
||||
danger: '#FF261A',
|
||||
warning: '#FF7A1A',
|
||||
prompt: '#EDFF22',
|
||||
progress: '#FFF',
|
||||
success: '#26FF8A',
|
||||
help: '#494949',
|
||||
},
|
||||
'intent-background': {
|
||||
danger: '#9E0025', // for white text
|
||||
},
|
||||
|
||||
/*,
|
||||
data: {
|
||||
red: {
|
||||
@ -155,7 +126,8 @@ module.exports = {
|
||||
extend: {
|
||||
boxShadow: {
|
||||
callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)',
|
||||
focus: '0px 0px 0px 1px #000000, 0px 0px 3px 2px #FFE600',
|
||||
focus: '0px 0px 0px 1px #FFFFFF, 0px 0px 3px 2px #FFE600',
|
||||
'focus-dark': '0px 0px 0px 1px #000000, 0px 0px 3px 2px #FFE600',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import '../src/styles.scss';
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
themes: {
|
||||
/*themes: {
|
||||
default: 'dark',
|
||||
list: [
|
||||
{ name: 'dark', class: ['dark', 'bg-black'], color: '#000' },
|
||||
{ name: 'light', class: '', color: '#FFF' },
|
||||
],
|
||||
},
|
||||
},*/
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(Story) => (
|
||||
<div className="dark bg-black">
|
||||
<Story />
|
||||
<div className="text-body">
|
||||
<div className="dark bg-black p-16">
|
||||
<Story />
|
||||
</div>
|
||||
<div className="p-16">
|
||||
<Story />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
];
|
||||
|
||||
@ -28,16 +28,15 @@ export function Button({
|
||||
'inline-flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'bg-clip-padding',
|
||||
'box-border',
|
||||
'h-28',
|
||||
'border',
|
||||
'text-ui',
|
||||
'no-underline',
|
||||
'hover:underline',
|
||||
'hover:border-white',
|
||||
'active:border-white',
|
||||
'disabled:no-underline',
|
||||
'disabled:bg-disabled/25',
|
||||
'transition-all',
|
||||
],
|
||||
{
|
||||
'pl-28': !(
|
||||
@ -47,30 +46,33 @@ export function Button({
|
||||
className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
|
||||
),
|
||||
|
||||
'bg-white': variant === 'primary',
|
||||
'border-light-gray-50': variant === 'primary' || variant === 'secondary',
|
||||
'text-black': variant === 'primary',
|
||||
'hover:bg-white/70': variant === 'primary',
|
||||
'active:bg-black': variant === 'primary' || variant === 'accent',
|
||||
'active:text-white': variant === 'primary',
|
||||
'disabled:text-gray-50': variant === 'primary' || variant === 'secondary',
|
||||
'disabled:border-neutral-593': variant === 'primary',
|
||||
'hover:border-black dark:hover:border-white': variant !== 'inline',
|
||||
'active:border-black dark:active:border-white': true,
|
||||
|
||||
'bg-black': variant === 'secondary',
|
||||
'text-light-gray-50': variant === 'secondary' || variant === 'inline',
|
||||
'hover:bg-white/30': variant === 'secondary',
|
||||
'hover:text-white': variant === 'secondary' || variant === 'accent',
|
||||
'active:bg-white': variant === 'secondary',
|
||||
'active:text-black': variant === 'secondary',
|
||||
'disabled:text-disabled': variant === 'secondary' || variant === 'accent',
|
||||
'disabled:border-disabled':
|
||||
'bg-black dark:bg-white': variant === 'primary',
|
||||
'border-black/60 dark:border-white/60':
|
||||
variant === 'primary' || variant === 'secondary',
|
||||
'text-white dark:text-black': variant === 'primary',
|
||||
'hover:bg-black/70 dark:hover:bg-white/70': variant === 'primary',
|
||||
'active:bg-white dark:active:bg-black':
|
||||
variant === 'primary' || variant === 'accent',
|
||||
'active:text-black dark:active:text-white':
|
||||
variant === 'primary' || variant === 'accent',
|
||||
|
||||
'bg-white dark:bg-black': variant === 'secondary',
|
||||
'text-black dark:text-white': variant === 'secondary',
|
||||
'hover:bg-black/25 dark:hover:bg-white/25': variant === 'secondary',
|
||||
'hover:text-black dark:hover:text-white':
|
||||
variant === 'secondary' || variant === 'accent',
|
||||
'active:bg-black dark:active:bg-white': variant === 'secondary',
|
||||
'active:text-white dark:active:text-black': variant === 'secondary',
|
||||
|
||||
uppercase: variant === 'accent',
|
||||
'bg-vega-yellow': variant === 'accent',
|
||||
'border-transparent': variant === 'accent' || variant === 'inline',
|
||||
'hover:bg-vega-yellow/30': variant === 'accent',
|
||||
'active:text-light-gray-50': variant === 'accent',
|
||||
'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':
|
||||
variant === 'accent',
|
||||
|
||||
'pl-4': variant === 'inline',
|
||||
'pr-4': variant === 'inline',
|
||||
@ -79,7 +81,16 @@ export function Button({
|
||||
'hover:no-underline': variant === 'inline',
|
||||
'hover:border-transparent': variant === 'inline',
|
||||
'active:border-transparent': variant === 'inline',
|
||||
'active:text-vega-yellow': variant === 'inline',
|
||||
'active:text-vega-yellow 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',
|
||||
|
||||
'disabled:bg-black/10 dark:disabled:bg-white/10': variant !== 'inline',
|
||||
'disabled:text-black/60 dark:disabled:text-white/60':
|
||||
variant !== 'inline',
|
||||
'disabled:border-black/25 dark:disabled:border-white/25':
|
||||
variant !== 'inline',
|
||||
},
|
||||
className
|
||||
);
|
||||
|
||||
@ -35,7 +35,7 @@ intents.map((intent) =>
|
||||
test(`Applies class for progress`, () => {
|
||||
render(<Callout intent="progress" />);
|
||||
expect(screen.getByTestId('callout')).toHaveClass(
|
||||
'shadow-intent-black',
|
||||
'dark:shadow-intent-progress'
|
||||
'shadow-black',
|
||||
'dark:shadow-white'
|
||||
);
|
||||
});
|
||||
|
||||
@ -28,7 +28,7 @@ export function Callout({
|
||||
'shadow-intent-danger': intent === 'danger',
|
||||
'shadow-intent-warning': intent === 'warning',
|
||||
'shadow-intent-prompt': intent === 'prompt',
|
||||
'shadow-intent-black dark:shadow-intent-progress': intent === 'progress',
|
||||
'shadow-black dark:shadow-white': intent === 'progress',
|
||||
'shadow-intent-success': intent === 'success',
|
||||
'shadow-intent-help': intent === 'help',
|
||||
flex: !!iconName,
|
||||
|
||||
@ -25,19 +25,19 @@ export const inputClassNames = ({
|
||||
'box-border',
|
||||
'h-28',
|
||||
'border',
|
||||
'border-light-gray-50',
|
||||
'bg-neutral-753',
|
||||
'text-light-gray-50',
|
||||
'bg-clip-padding',
|
||||
'border-black/60 dark:border-white/60',
|
||||
'bg-black/25 dark:bg-white/25',
|
||||
'text-black/60 dark:text-white/60',
|
||||
'text-ui',
|
||||
'focus-visible:shadow-focus',
|
||||
'focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark',
|
||||
'focus-visible:outline-0',
|
||||
'disabled:bg-black/10 disabled:dark:bg-white/10',
|
||||
],
|
||||
{
|
||||
'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
|
||||
'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/),
|
||||
'border-vega-pink': hasError,
|
||||
'text-disabled': disabled,
|
||||
'bg-transparent': disabled,
|
||||
},
|
||||
className
|
||||
);
|
||||
@ -71,13 +71,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
{...props}
|
||||
ref={ref}
|
||||
className={classNames(inputClassNames({ className, ...props }))}
|
||||
style={inputStyle(props)}
|
||||
style={{} /*inputStyle(props)*/}
|
||||
/>
|
||||
);
|
||||
const iconName = prependIconName || appendIconName;
|
||||
if (iconName !== undefined) {
|
||||
const iconClassName = classNames(
|
||||
['fill-light-gray-50', 'absolute', 'z-10'],
|
||||
['fill-black/60 dark:fill-white/60', 'absolute', 'z-10'],
|
||||
{
|
||||
'left-8': prependIconName,
|
||||
'right-8': appendIconName,
|
||||
|
||||
@ -19,7 +19,7 @@ export const InputError = ({
|
||||
'box-border',
|
||||
'h-28',
|
||||
'border-l-4',
|
||||
'text-light-gray-50',
|
||||
'text-black/95 dark:text-white/95',
|
||||
'text-ui',
|
||||
],
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user