hub / github.com/AlexGarrixen/Cool-Contrast

github.com/AlexGarrixen/Cool-Contrast @v1.6.0

Chat with this repo

repository ↗ · DeepWiki ↗ · release v1.6.0 ↗ · + Follow

141 symbols 459 edges 181 files 0 documented · 0% ● updated 2y agov1.6.0 · 2024-01-21★ 107

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

inspect the perfect combination of your colors

Features

🔎 Feedback on contrast ratio and compliance levels.
⚡️ Suggestions to enhance your colors contrast.
👀 Preview the results with samples, such as a minimalistic page or a set of UI elements.
🎨 Editing in different color spaces.

Install

Install packages

npm install

Run to generate panda-css output

npm run panda:prepare

Start the dev server

npm run dev

Building

npm run panda:prepare && npm run build

Testing

# execute test suites
npm run test

# generates code coverage reports 
npm run test:coverage

License

Extension points exported contracts — how you extend this code

ContextValue (Interface)

(no doc)

src/components/samples-preview/toggle-button.tsx

ColorModeInput (Interface)

(no doc)

src/lib/wcag-text-contrast/wcag-text-contrast.ts

RootProps (Interface)

(no doc)

src/components/samples-preview/toggle-button.tsx

TestResult (Interface)

(no doc)

src/lib/wcag-text-contrast/wcag-text-contrast.ts

ItemProps (Interface)

(no doc)

src/components/samples-preview/toggle-button.tsx

AccesibleColor (Interface)

(no doc)

src/lib/contrast-suggestions/contrast-suggestions.ts

StyleFnOpts (Interface)

(no doc)

src/components/samples-preview/utils.ts

ColorScaleOpts (Interface)

(no doc)

src/lib/contrast-suggestions/contrast-suggestions.ts

Core symbols most depended-on inside this repo

applyStyle

called by 94

src/components/samples-preview/utils.ts

useToggle

called by 8

src/hooks/use-toggle.ts

useControllable

called by 7

src/hooks/use-controllable.tsx

wcagContrastTest

called by 5

src/lib/wcag-text-contrast/wcag-text-contrast.ts

createColor

called by 3

src/lib/wcag-text-contrast/wcag-text-contrast.ts

resolveValidColor

called by 2

src/components/color-inputs/color-control/utils.ts

testContrastForNormalText

called by 2

src/lib/wcag-text-contrast/wcag-text-contrast.ts

testContrastForLargeText

called by 2

src/lib/wcag-text-contrast/wcag-text-contrast.ts

Shape

Function 122

Interface 19

Languages

TypeScript100%

Modules by API surface

src/lib/wcag-text-contrast/wcag-text-contrast.ts7 symbols

src/lib/contrast-suggestions/contrast-suggestions.ts7 symbols

src/components/suggestions/suggestions.tsx7 symbols

src/components/samples-preview/toggle-button.tsx6 symbols

src/components/color-inputs/color-control/popover-color-channels.tsx6 symbols

src/hooks/use-toggle.ts5 symbols

src/components/color-inputs/color-control/input-channel.tsx4 symbols

src/components/color-inputs/color-control/color-input.tsx4 symbols

src/components/samples-preview/minimalist-page/tours.tsx3 symbols

src/components/samples-preview/minimalist-page/releases.tsx3 symbols

src/components/aside/aside.tsx3 symbols

src/hooks/use-controllable.tsx2 symbols

For agents

$ claude mcp add Cool-Contrast \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact