mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 09:39:09 +00:00
chore: update prettier tab width for consistency (#175)
This commit is contained in:
GitHub
parent
a931f8c69c
commit
f24d2fcc99
247 changed files with 7224 additions and 7375 deletions
|
|
@ -5,158 +5,158 @@ import styled from 'styled-components';
|
|||
import { palette } from './colors';
|
||||
|
||||
type RatioList = {
|
||||
color1: string[];
|
||||
color2: string[];
|
||||
ratio: string;
|
||||
color1: string[];
|
||||
color2: string[];
|
||||
ratio: string;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Colors',
|
||||
title: 'Atoms/Colors',
|
||||
};
|
||||
|
||||
const Swatch = styled.div`
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
`;
|
||||
|
||||
const SwatchColor = styled.div`
|
||||
height: 72px;
|
||||
height: 72px;
|
||||
`;
|
||||
|
||||
const Label = styled.div`
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px;
|
||||
color: ${palette.taupe100};
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px;
|
||||
color: ${palette.taupe100};
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Colors = () => {
|
||||
return (
|
||||
<div>
|
||||
{Object.entries(palette).map(([name, color], i) => (
|
||||
<Swatch key={i}>
|
||||
<SwatchColor style={{ backgroundColor: color }} />
|
||||
<Label>
|
||||
<p>{name}</p>
|
||||
<p>
|
||||
<code>var(--{name})</code>
|
||||
</p>
|
||||
</Label>
|
||||
</Swatch>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{Object.entries(palette).map(([name, color], i) => (
|
||||
<Swatch key={i}>
|
||||
<SwatchColor style={{ backgroundColor: color }} />
|
||||
<Label>
|
||||
<p>{name}</p>
|
||||
<p>
|
||||
<code>var(--{name})</code>
|
||||
</p>
|
||||
</Label>
|
||||
</Swatch>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ContrastRatios = () => {
|
||||
const allRatios = getAllRatios(palette);
|
||||
const allRatios = getAllRatios(palette);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<b>WCAG Contrast Calculations.</b>
|
||||
<br />
|
||||
Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA.
|
||||
Acceptable for Text.
|
||||
<br />
|
||||
Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA.
|
||||
Acceptable for UI.
|
||||
<br />
|
||||
All below 4.5 is unacceptable.
|
||||
<br />
|
||||
<AmbientSmall>WCAG Contrast testing disabled for this page.</AmbientSmall>
|
||||
</p>
|
||||
<ContrastTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>Swatch</th>
|
||||
<th>Ratio</th>
|
||||
<th>Color 1</th>
|
||||
<th>Color 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allRatios.map((ratio, i) => (
|
||||
<tr key={i}>
|
||||
<td style={{ backgroundColor: ratio.color1[1] }}> </td>
|
||||
<td style={{ backgroundColor: ratio.color2[1] }}> </td>
|
||||
<td style={getWCAGStyle(+ratio.ratio)}>{ratio.ratio}</td>
|
||||
<td>{ratio.color1[0]}</td>
|
||||
<td>{ratio.color2[0]}</td>
|
||||
<td
|
||||
style={{
|
||||
color: ratio.color1[1],
|
||||
backgroundColor: ratio.color2[1],
|
||||
paddingRight: '0.1em',
|
||||
}}
|
||||
>
|
||||
oh my god my
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
color: ratio.color2[1],
|
||||
backgroundColor: ratio.color1[1],
|
||||
paddingLeft: '0.1em',
|
||||
}}
|
||||
>
|
||||
shin how dare you
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</ContrastTable>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<b>WCAG Contrast Calculations.</b>
|
||||
<br />
|
||||
Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA. Acceptable
|
||||
for Text.
|
||||
<br />
|
||||
Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA. Acceptable
|
||||
for UI.
|
||||
<br />
|
||||
All below 4.5 is unacceptable.
|
||||
<br />
|
||||
<AmbientSmall>WCAG Contrast testing disabled for this page.</AmbientSmall>
|
||||
</p>
|
||||
<ContrastTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>Swatch</th>
|
||||
<th>Ratio</th>
|
||||
<th>Color 1</th>
|
||||
<th>Color 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allRatios.map((ratio, i) => (
|
||||
<tr key={i}>
|
||||
<td style={{ backgroundColor: ratio.color1[1] }}> </td>
|
||||
<td style={{ backgroundColor: ratio.color2[1] }}> </td>
|
||||
<td style={getWCAGStyle(+ratio.ratio)}>{ratio.ratio}</td>
|
||||
<td>{ratio.color1[0]}</td>
|
||||
<td>{ratio.color2[0]}</td>
|
||||
<td
|
||||
style={{
|
||||
color: ratio.color1[1],
|
||||
backgroundColor: ratio.color2[1],
|
||||
paddingRight: '0.1em',
|
||||
}}
|
||||
>
|
||||
oh my god my
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
color: ratio.color2[1],
|
||||
backgroundColor: ratio.color1[1],
|
||||
paddingLeft: '0.1em',
|
||||
}}
|
||||
>
|
||||
shin how dare you
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</ContrastTable>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ContrastTable = styled.table`
|
||||
td,
|
||||
th {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
const getWCAGStyle = (ratio: number): React.CSSProperties => {
|
||||
if (ratio >= 7) {
|
||||
return { color: 'green', fontWeight: 'bold' };
|
||||
}
|
||||
if (ratio >= 7) {
|
||||
return { color: 'green', fontWeight: 'bold' };
|
||||
}
|
||||
|
||||
if (ratio >= 4.5) {
|
||||
return { color: 'orange', fontWeight: 'bold' };
|
||||
}
|
||||
if (ratio >= 4.5) {
|
||||
return { color: 'orange', fontWeight: 'bold' };
|
||||
}
|
||||
|
||||
return {};
|
||||
return {};
|
||||
};
|
||||
|
||||
const getAllRatios = (input: typeof palette) =>
|
||||
Object.entries(input)
|
||||
.filter(([name]) => !name.startsWith('discord'))
|
||||
.reduce((acc, [name, color]) => {
|
||||
return [
|
||||
...acc,
|
||||
...Object.entries(palette)
|
||||
.filter(([name]) => !name.startsWith('discord'))
|
||||
.map(([matchName, matchColor]) => ({
|
||||
color1: [name, color],
|
||||
color2: [matchName, matchColor],
|
||||
ratio: chroma.contrast(color, matchColor).toFixed(2),
|
||||
})),
|
||||
];
|
||||
}, [] as RatioList[])
|
||||
.filter(({ ratio }) => +ratio !== 1)
|
||||
.sort((a, b) => {
|
||||
if (+a.ratio > +b.ratio) {
|
||||
return -1;
|
||||
}
|
||||
return 1;
|
||||
})
|
||||
.filter((_, i) => i % 2 === 0);
|
||||
Object.entries(input)
|
||||
.filter(([name]) => !name.startsWith('discord'))
|
||||
.reduce((acc, [name, color]) => {
|
||||
return [
|
||||
...acc,
|
||||
...Object.entries(palette)
|
||||
.filter(([name]) => !name.startsWith('discord'))
|
||||
.map(([matchName, matchColor]) => ({
|
||||
color1: [name, color],
|
||||
color2: [matchName, matchColor],
|
||||
ratio: chroma.contrast(color, matchColor).toFixed(2),
|
||||
})),
|
||||
];
|
||||
}, [] as RatioList[])
|
||||
.filter(({ ratio }) => +ratio !== 1)
|
||||
.sort((a, b) => {
|
||||
if (+a.ratio > +b.ratio) {
|
||||
return -1;
|
||||
}
|
||||
return 1;
|
||||
})
|
||||
.filter((_, i) => i % 2 === 0);
|
||||
|
|
|
|||
|
|
@ -2,36 +2,36 @@ import chroma from 'chroma-js';
|
|||
import { createGlobalStyle, css } from 'styled-components';
|
||||
|
||||
export const palette = {
|
||||
taupe100: '#332D2D',
|
||||
taupe200: '#453E3D',
|
||||
taupe300: '#5D5352',
|
||||
taupe400: '#756867',
|
||||
taupe500: '#AB9B9A',
|
||||
taupe600: '#EBD6D4',
|
||||
taupe100: '#332D2D',
|
||||
taupe200: '#453E3D',
|
||||
taupe300: '#5D5352',
|
||||
taupe400: '#756867',
|
||||
taupe500: '#AB9B9A',
|
||||
taupe600: '#EBD6D4',
|
||||
|
||||
discord100: '#23272A',
|
||||
discord200: '#2C2F33',
|
||||
discord400: '#7289DA',
|
||||
discord500: '#99AAB5',
|
||||
discord100: '#23272A',
|
||||
discord200: '#2C2F33',
|
||||
discord400: '#7289DA',
|
||||
discord500: '#99AAB5',
|
||||
|
||||
green400: '#46B646',
|
||||
green200: '#1D8227',
|
||||
green400: '#46B646',
|
||||
green200: '#1D8227',
|
||||
|
||||
red400: '#E95353',
|
||||
red200: '#F14343',
|
||||
red400: '#E95353',
|
||||
red200: '#F14343',
|
||||
|
||||
gold400: '#EFCF24',
|
||||
gold400: '#EFCF24',
|
||||
|
||||
grey100: '#1C1010',
|
||||
grey500: '#DBD9D9',
|
||||
grey600: '#F2EFEF',
|
||||
grey100: '#1C1010',
|
||||
grey500: '#DBD9D9',
|
||||
grey600: '#F2EFEF',
|
||||
};
|
||||
|
||||
const getPaletteCSS = () =>
|
||||
Object.entries(palette).reduce(
|
||||
(acc, [key, color]) => ({ ...acc, [`--${key}`]: color }),
|
||||
{}
|
||||
);
|
||||
Object.entries(palette).reduce(
|
||||
(acc, [key, color]) => ({ ...acc, [`--${key}`]: color }),
|
||||
{}
|
||||
);
|
||||
|
||||
export const colorVars = css(getPaletteCSS());
|
||||
|
||||
|
|
@ -42,5 +42,5 @@ export const GlobalStyleColors = createGlobalStyle`
|
|||
`;
|
||||
|
||||
export const numberToChroma = (colorInt: number) => {
|
||||
return chroma(colorInt);
|
||||
return chroma(colorInt);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import styled from 'styled-components';
|
|||
import { colorVars } from './colors';
|
||||
|
||||
const ColorsContainer = styled.div`
|
||||
${colorVars}
|
||||
${colorVars}
|
||||
`;
|
||||
|
||||
export const withColors = (storyFn: () => React.ReactNode) => (
|
||||
<ColorsContainer>{storyFn()}</ColorsContainer>
|
||||
<ColorsContainer>{storyFn()}</ColorsContainer>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue