webinista/colortheory

Decided to build a thing on a whim. May not finish.

colortheory's Issues

Add some webkit-specific styles for the color input

• input[type="color" i]::-webkit-color-swatch

  • padding: 0;
  • margin: -4px -2px;

• input[type="color" i]::-webkit-color-swatch. Remove the border

For Mozilla

• input[type="color"]:-moz-system-metric(color-picker-available)

Hide input[type=color] element in browsers that do not support it.

Would injecting / removing it from the DOM make more sense? (Screenshot is from Safari 10.1)

input[type=color] doesn't yet support #rgba #rrggbbaa values

It doesn't yet support any alpha value.

• Should the ColorInput component become another SVG swatch instead?
• Can also keep the color input as an RGB color input, but still allow support for alpha values

Modal component

Create a modal for displaying glossary content.

Triad function / feature

Blocks #43.

Similar to #25.

• Convert input to HSL colors
• Create palette of 3 colors, original, and two values that are +120 and -120 degrees from it.

Add / find function to expand 3 character hex colors to 6 character hex values

Add lodash-webpack-plugin support

https://www.npmjs.com/package/lodash-webpack-plugin

Add validation / error checking for color text input.

Improve input for text field

Currently if it's a valid short hex value, it will expand to a long hex value. Should keep the short value, but update the input[type=color] field to use the long value.

Easiest way is probably to pass the value back to the component as is, and move the expandRGB function to the color input component.

Write ColorSwatch component test.

Create LinkedColorComponent

Figure out a better way to handle the if value is < 0 stuff

There's probably a more succinct way to do this for each value. See the palette generation functions.

Related to / Possible duplicate of #74

Color schemes umbrella task

Parent task to track color scheme function-related development.

Create loading screen / component

Blocks #53. Should include a loading component as part of the new UI design.

Add support for named CSS colors

Either use separate color values for the text and color input fields, or make the color input field do the conversion.

Write convertToHex tests

Test these conversions

• Convert hsl to hex
• Convert rgb to hex
• #rgb hex to #rrggbb hex

Create conversion functions

A short list of color conversions to make and do.

• HSL to hex

• Hex to RGB

• RGB to hex

• [ ] Lab to Hex moved to #29

Really need to do conversions to hex in order to be able to set the input[type=color] value

Add getSquare function unit test

Blocks #43

Add Redux

Palette fails to update when submitting form after a color change.

To replicate:

• Enter a color
• Select a scheme
• Change the color, but do not change the scheme
• Click "Generate Scheme" button

What happens:

Palette goes black

What should happen:

Palette should be updated with colors of currently-selected scheme.

Complementary function / feature

Blocks #43

• Convert input to HSL
• Find the color that's 180deg from start color
• Create palette of 2 colors, original and complement.

ModalTrigger trigger component

Need to create a Glossary Link component that opens a glossary modal.

Blocks #12. Also blocked by #12.

Add tests for Controls component (and subcomponents?)

May want/need to add tests for LinkedInputColor component too or instead.

Add check to prevent #rgba color values

Color contrast information

Will probably generate a lot of low-contrast schemes with this. How to compensate? Related to #69

Need 3 character hex codes to be expanded before calculating hsl value

• Enter an #rgb value in color.
• Change the scheme

What should happen: Palette should reflect the color scheme chosen
What happens: color can't be calculated.

Add an event handler to the scheme select menu

When the color scheme value changes, need to:

• Update state with a new palette array.

Split complementary function

Should return a 3 color array.

• Find the color's complement - comp1
• Find the split complement on either side, e.g.: comp1 + 30 and comp1-30

Related to #26. Blocks #43

Add getTriad unit test

Blocks #43

Create Diad color scheme / feature

A diadic color scheme is one using two colors that are two colors apart on the color wheel

For example, red and orange or blue and violet (skipping indigo)

Related half of a tetradic color scheme. (#44)

source

Blocks #43

Add getSplitComplement unit test

Will need to compare each item in an array, since there's no other way to compare whole arrays for equality.

Blocks #43

Add a split complementary scheme / function

Add a glossary of terms, possibly with a demonstration of each

Need a glossary trigger component.
Maybe a modal / dialog to display it as well.

Write unit test for ColorInput

Blocks #5

Add monochromatic color scheme function / feature

Blocks #43

4 shades, tints, or tones of the same color.

Add support for CSS level 4 rgb/hsl color syntax

Supported in Firefox so far, but need to handle rgb(0 255 0) (no commas) syntax.

Best idea is to normalize the syntax to add commas rather than doing some more advanced string parsing.

Create lab to rgb to hex function

Separating this from #2 since lab color space support hasn't started landing in browsers.

Create color swatch component

Create test for loading screen / component

Blocks #4

Create analogous color scheme

Blocks #43
Four adjacent colors, separated by 30 degree difference.
https://drafts.csswg.org/css-color-4/#hsl-examples

Double check rgbToHsl conversion

Conversion returns correct hue, but saturation for some colors doesn't quite match other color pickers. But those other color pickers don't match each other.

Example rgb(138, 140, 115) was converted to hsl(65, 5%, 50%) instead of hsl(65, 10%, 50%). Should be closer to 10.

Hard to test outcomes if the conversions are off.

Colors this occurs with:

• #94fffa / rgb(148, 255, 250);

Seems to happen with the conversion from rgb to hsl.

Add support for proptypes

PropTypes are deprecated for React. Install prop-types package instead
https://www.npmjs.com/package/prop-types

Fix layout of generate button on small screens.

Change margin of .input-button. at smaller viewports.

Tetradic color scheme / function

Return 4-color array of two complementary pairs. Related to the Diad (#39) color scheme. Two diads make a tetrad.

Source

Blocks #43

Unit test for Palette component.

Add Sass/SCSS support and sass-lint

Add a square color scheme / function

Blocks #43

4 color color scheme. Each color must be 90° apart (360 / 4)

Unit test for TextInput

Blocks #5

Write unit test for button component.

Blocks #5

Reconsider whether scheme needs to be a part of the state at all