Build an overall layout

Mischback commented 1 year ago

Overall

[ ] should be responsive (focus is desktop / big screen)
[ ] must provide a clear interface for the three main building blocks
- [x] General structure provided by #52
- [x] Palette Management (#53)
- [x] Color Add Form (#55)
- [ ] Contrast Grid
[x] get rid of safelisting in postcss.config.js and use the inline comment /* purgecss ignore current */ instead (included in #54)
[x] use semantic colors (from settings.scss) for notifications (#54)
[x] implement toggle buttons (#54)
- [x] managing focus might be an issue!
[x] font selection (#54)
- [x] default font: sans serif, see https://github.com/system-fonts/modern-font-stacks#system-ui
- [x] monospace: https://github.com/system-fonts/modern-font-stacks#monospace-code
[ ] back to top button, when the page is scrolled down
[ ] transitions
- [ ] provide one default transition function in settings.scss
- [ ] adjust the existing transitions (git grep -e "transition:")
- https://easings.net/#easeOutBack
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
- https://cubic-bezier.com/#.59,.03,.8,1.39

Palette Management

[x] should be switchable between a compact and an extended output
- [x] compact only shows a preview of the color, the label and the possible actions (provided as buttons)
- [x] extended output shows all possible output formats #53
[x] the display of output formats in extended view should be configurable
- this configuration can be persistent between reloads (tracked in #23)
[ ] pin or fixate the toggle buttons when scrolling
[ ] hide output toggle buttons when compact mode is activated

Color Add Form

[x] must remove the boilerplate code in src/index.html, explicitly defining the whole form; must use templates instead, which are initialized in src/script/colorizer/interface/color-input-method.ts (#55)
[x] should provide a reset button; might be implemented as set the form's color to xyz(0 0 0) (#55)
[x] must be as accessible as possible (#55)
- [x] refactor the current method of input method tooltips into a WCAG disclosure pattern, see this article for more info on accessible tooltips
- [x] provide labels for all elements of the <form>
- https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
- https://webaim.org/techniques/forms/
- [x] provide instructions how to use the <form>
- https://www.w3.org/WAI/tutorials/forms/instructions/
- https://webaim.org/techniques/forms/
[x] input methods must be configurable (meaning: which methods should be visible?) (#55)
- [x] Possible Solutions:
- Make methods toggleable: Each method is associated with a toggle button and the corresponding <fieldset> is visible or hidden;
- Group input methods: Group the input methods by color space (e.g. sRGB, OkLab, ...) and provide a tab-based interface

Mischback commented 1 year ago

tmp TODO

[ ] Should the button's :focus style change the background of the button (like :hover)?
[ ] Make all buttons use the bg-gradient mixin
[ ] consider adding even more accessibility stuff
- [ ] Add a description for buttons
- https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1
- should be hidden by default
- might serve as tooltip content

Mischback commented 1 year ago

Dry Coding

body {
  /* The background of the <main> container and the currently active tab of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-tab-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 4.5 with ``--if-main-fg`` for AA rating
   * - requires a minimum contrast of 3.0 with ``--if-content-button-bg-default`` (WCAG 2.1 for control elements)
   */
  --if-main-bg: rgb(238 238 238);  /* OkLCH (95% 0% X) */

  /* The foreground of the <main> container.
   *
   * - requires a minimum contrast of 4.5 with ``--if-main-bg`` for AA rating
   */
  --if-main-fg: rgb(108 108 108);  /* OkLCH (53% 0% X) */

  /* The background of the currently inactive tabs of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 3.0 with ``if-main-tab-fg``, better would be 4.5
   * - requires a minimum contrast of 4.5 with ``--if-main-tab-focus``
   */
  --if-main-tab-bg: rgb(137 137 137);  /* OkLCH (63% 0% X) */

  /* The foreground of the currently inactive tabs of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-tab-bg``, better would be 4.5
   */
  --if-main-tab-fg: rgb(34 34 34);  /* OkLCH (25% 0% X) */

  /* Focus indicator of root tab interface.
   *
   * - requires a minimum contrast of 4.5 with ``--if-main-tab-bg``
   */
  --if-main-tab-focus: rgb(255 63 0);

  /* Most of the actual content is placed inside dedicated boxes.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-fg`` for AA rating
   * - requires a minimum contrast of 3.0 with ``--if-content-button-bg-default`` (WCAG 2.1 for control elements)
   */
  --if-content-bg: rgb(222 222 222);  /* OkLCH (90% 0% X) */

  /* Foreground color of the content boxes.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-bg`` for AA rating
   *
   * FIXME: Is this correctly applied to palette items and input methods?
   */
  --if-content-fg: rgb(69 69 69); /* OkLCH (39% 0% X) */

  /* The background of text inputs.
   *
   * Please note, that for the ``color-form`` this is not applied to the actual
   * ``<input>`` element but rather the ``.wrapper`` container.
   *
   * - requires a minimum contrast of 4.5 with ``--if-text-input-fg``
   *
   * FIXME: New property! Apply in color form input method!
   */
  --if-text-input-bg: rgb(222 222 222);  /* OkLCH (90% 0% X) */

  /* The foreground/text color of text inputs.
   *
   * - requires a minimum contrast of 4.5 with ``--if-text-input-bg``
   *
   * FIXME: New property! Apply in color form input method!
   */
  --if-text-input-fg: rgb(69 69 69);  /* OkLCH (39% 0% X) */

  /* The background of ``<legend>`` elements.
   *
   * - requires a minimum contrast of 3.0 with ``--if-form-fieldset-legend-fg``
   *
   * FIXME: New property! Apply in color form input method!
   */
  --if-form-fieldset-legend-bg: rgb(190 190 190);  /* OkLCH (80% 0% X) */

  /* The foreground/text color of ``<legend>`` elements.
   *
   * - requires a minimum contrast of 3.0 with ``--if-form-fieldset-legend-bg``
   *
   * FIXME: New property! Apply in color form input method!
   */
  --if-form-fieldset-legend-fg: rgb(102 102 102);  /* OkLCH (51% 0% X) */

  /* Base color of the default buttons.
   * Might be applied as a very slight gradient (then all color stops will have to be provided here!).
   *
   * - requires a minimum contrast of 3.0 with ``--if-content-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 3.0 with ``--if-main-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 4.5 with ``--if-content-button-fg``
   * - requires a minimum contrast of 4.5 with ``--if-content-button-focus``
   */
  --if-content-button-bg-base: rgb(72 107 104);  /* FIXME: Not really required */
  --if-content-button-bg-lightest: rgb(158 158 158);  /* OkLCH (70% 0% X) */
  --if-content-button-bg-light: rgb(125 125 125);  /* OkLCH (59% 0% X) */
  --if-content-button-bg-dark: rgb(96 96 96);  /* OkLCH (49% 0% X) */
  --if-content-button-bg-darkest: rgb(69 69 69);  /* OkLCH (39% 0% X) */

  /* Foreground of the default buttons.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-button-bg-base``
   */
  --if-content-button-fg: rgb(238 238 238);  /* OkLCH (95% 0% X) */

  /* Focus indicator of default buttons
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-button-bg-base``
   */
  --if-content-button-focus: rgb(251, 198, 0);

  --if-danger-button-bg-base: rgb(211 0 0);  /* FIXME: Not really required! */
  --if-danger-button-bg-lightest: rgb(255 63 0);  /* OkLCH (70% 80% 60) */
  --if-danger-button-bg-light: rgb(211 0 0);  /* OkLCH (50% 80% 60) */
  --if-danger-button-bg-dark: rgb(174 0 0);  /* OkLCH (40% 80% 60) */
  --if-danger-button-bg-darkest: rgb(136 0 0);  /* OkLCH (30% 80% 60) */
  --if-danger-button-fg: rgb(222 222 222);
  --if-danger-button-focus: rgb(255 63 0);

  /* FIXME: Not yet established! Should be coherent for all buttons! */
  --if-button-hover-bg-base: rgb(255 0 192);  /* FIXME: Not really required! */
  --if-button-hover-bg-lightest: rgb(255 0 192);
  --if-button-hover-bg-light: rgb(255 0 192);
  --if-button-hover-bg-dark: rgb(255 0 192);
  --if-button-hover-bg-darkest: rgb(255 0 192);
  --if-button-hover-fg: rgb(255 0 192);
  --if-button-hover-focus: rgb(255 0 192);
}

body.not-that-grey {
  /* The background of the <main> container and the currently active tab of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-tab-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 4.5 with ``--if-main-fg`` for AA rating
   * - requires a minimum contrast of 3.0 with ``--if-content-button-bg-default`` (WCAG 2.1 for control elements)
   */
  --if-main-bg: rgb(236 241 226); */  /* OkLCH (95% 5% 120) */

  /* The foreground of the <main> container.
   *
   * - requires a minimum contrast of 4.5 with ``--if-main-bg`` for AA rating
   */
  --if-main-fg: rgb(106 110 97);  /* OkLCH (53% 5% 120) */

  /* The background of the currently inactive tabs of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 3.0 with ``if-main-tab-fg``, better would be 4.5
   * - requires a minimum contrast of 4.5 with ``--if-main-tab-focus``
   */
  --if-main-tab-bg: rgb(135 139 126);  /* OkLCH (63% 5% 120) */

  /* The foreground of the currently inactive tabs of the root tab interface.
   *
   * - requires a minimum contrast of 3.0 with ``--if-main-tab-bg``, better would be 4.5
   */
  --if-main-tab-fg: rgb(32 35 24);  /* OkLCH (25% 5% 120) */

  /* Focus indicator of root tab interface.
   *
   * - requires a minimum contrast of 4.5 with ``--if-main-tab-bg``
   */
  --if-main-tab-focus: rgb(255 63 0);

  /* Most of the actual content is placed inside dedicated boxes.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-fg`` for AA rating
   * - requires a minimum contrast of 3.0 with ``--if-content-button-bg-default`` (WCAG 2.1 for control elements)
   */
  --if-content-bg: rgb(220 224 210);  /* OkLCH (90% 5% 120) */

  /* Foreground color of the content boxes.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-bg`` for AA rating
   */
  --if-content-fg: rgb(67 71 59); /* OkLCH (39% 5% 120) */

  /* The background of text inputs.
   *
   * Please note, that for the ``color-form`` this is not applied to the actual
   * ``<input>`` element but rather the ``.wrapper`` container.
   *
   * - requires a minimum contrast of 4.5 with ``--if-text-input-fg``
   */
  --if-text-input-bg: rgb(220 224 210);  /* OkLCH (90% 5% 120) */

  /* The foreground/text color of text inputs.
   *
   * - requires a minimum contrast of 4.5 with ``--if-text-input-bg``
   */
  --if-text-input-fg: rgb(67 71 59); /* OkLCH (39% 5% 120) */

  /* The background of ``<legend>`` elements.
   *
   * - requires a minimum contrast of 3.0 with ``--if-form-fieldset-legend-fg``
   */
  --if-form-fieldset-legend-bg: rgb(188 192 178);  /* OkLCH (80% 5% 120) */

  /* The foreground/text color of ``<legend>`` elements.
   *
   * - requires a minimum contrast of 3.0 with ``--if-form-fieldset-legend-bg``
   */
  --if-form-fieldset-legend-fg: rgb(100 104 91);  /* OkLCH (51% 5% 120) */

  /* Base color of the default buttons.
   * Might be applied as a very slight gradient (then all color stops will have to be provided here!).
   *
   * - requires a minimum contrast of 3.0 with ``--if-content-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 3.0 with ``--if-main-bg`` (WCAG 2.1 for control elements)
   * - requires a minimum contrast of 4.5 with ``--if-content-button-fg``
   * - requires a minimum contrast of 4.5 with ``--if-content-button-focus``
   */
  --if-content-button-bg-base: rgb(72 107 104);
  --if-content-button-bg-lightest: rgb(155 162 135);  /* OkLCH (70% 10% 120) */
  --if-content-button-bg-light: rgb(122 129 103);  /* OkLCH (59% 10% 120) */
  --if-content-button-bg-dark: rgb(105 112 86);  /* OkLCH (53% 10% 120) */
  --if-content-button-bg-darkest: rgb(66 72 48);  /* OkLCH (39% 10% 120) */

  /* Foreground of the default buttons.
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-button-bg-base``
   */
  --if-content-button-fg: rgb(235 243 213);  /* OkLCH (95% 10% 120) */

  /* Focus indicator of default buttons
   *
   * - requires a minimum contrast of 4.5 with ``--if-content-button-bg-base``
   */
  --if-content-button-focus: rgb(251, 198, 0);

  --if-danger-button-bg-base: rgb(211 0 0);
  --if-danger-button-bg-lightest: rgb(255 63 0);  /* OkLCH (70% 80% 60) */
  --if-danger-button-bg-light: rgb(211 0 0);  /* OkLCH (50% 80% 60) */
  --if-danger-button-bg-dark: rgb(174 0 0);  /* OkLCH (40% 80% 60) */
  --if-danger-button-bg-darkest: rgb(136 0 0);  /* OkLCH (30% 80% 60) */
  --if-danger-button-fg: rgb(222 222 222);
  --if-danger-button-focus: rgb(255 63 0);

  --if-button-hover-bg-base: rgb(255 0 192);
  --if-button-hover-bg-lightest: rgb(255 0 192);
  --if-button-hover-bg-light: rgb(255 0 192);
  --if-button-hover-bg-dark: rgb(255 0 192);
  --if-button-hover-bg-darkest: rgb(255 0 192);
  --if-button-hover-fg: rgb(255 0 192);
  --if-button-hover-focus: rgb(255 0 192);
}

Mischback / colorizer

Build an overall layout #32

Overall

Palette Management

Color Add Form

tmp TODO

Dry Coding