266 lines
6.3 KiB
TypeScript
266 lines
6.3 KiB
TypeScript
import type { 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'],
|
|
};
|