- Label
- 9,173
├── .gitignore
├── components
├── button.js
├── contrast-boxes.js
└── layout.js
├── lib
├── contrast.js
└── index.js
├── package.json
├── pages
├── apca.js
└── index.js
├── readme.md
├── theme.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | dist
4 |
--------------------------------------------------------------------------------
/components/button.js:
--------------------------------------------------------------------------------
1 | /** @jsxRuntime classic */
2 | /** @jsx jsx */
3 | import { jsx } from 'theme-ui'
4 |
5 | const Button = ({ color, backgroundColor, borderColor, ...props }) => (
6 |
30 | )
31 |
32 | export default Button
33 |
--------------------------------------------------------------------------------
/components/contrast-boxes.js:
--------------------------------------------------------------------------------
1 | /** @jsxRuntime classic */
2 | /** @jsx jsx */
3 | import { jsx } from 'theme-ui'
4 | import namer from 'color-namer'
5 | import { ArrowRight } from 'react-feather'
6 |
7 | const Sparkline = () => {
8 | return (
9 |
319 | ) 320 | } 321 | 322 | const Text = () => { 323 | return ( 324 |Color is my day-long obsession, joy, and torment.
325 | Color contrast is the difference in brightness between foreground and background colors. For accessibility purposes, aim for a 4.5:1 ratio between the foreground color (e.g. text, links, etc.) and the background color. This ratio ensures people with moderately low vision can tell the colors apart and see your content. 326 |
327 | ) 328 | } 329 | 330 | const ContrastBox1 = ({ color, backgroundColor }) => ( 331 |
353 |
354 | {`.theme-alt {`}
355 | color: {color};
356 | background-color: {backgroundColor};
357 | {`}`}
358 |
359 |
360 | 361 |
395 |
396 | {`.theme {`}
397 | color: {color};
398 | background-color: {backgroundColor};
399 | {`}`}
400 |
401 |
402 | 403 |
{count} generated combinations
315 |{count} generated combinations
294 |