diff --git a/docker-compose.yml b/docker-compose.yml index 80f3e4bd..dfa5de7b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,3 @@ -version: '3' services: ubuntu: image: ntno/ubuntu-build-base:1.0.0 diff --git a/documentation/docs/configuration/palettes/blueberry.md b/documentation/docs/configuration/palettes/blueberry.md new file mode 100644 index 00000000..d3a77df0 --- /dev/null +++ b/documentation/docs/configuration/palettes/blueberry.md @@ -0,0 +1,44 @@ +--- +show_tiles_inline: true +tiles: + - caption: '@petradr' + img_src: ../../../img/picsum/167_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: 'Marcin Czerwinski' + img_src: ../../../img/picsum/127_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: "Steve Richey" + img_src: ../../../img/picsum/143_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ +--- + +--8<-- +configuration/palettes/links.md +--8<-- + +# Blueberry Palette + +To use the dark color palette, add the `palette` attribute to your theme configuration in `mkdocs.yml`: + +```yaml +theme: + name: terminal + palette: blueberry +``` + + + +--8<-- +elements/examples/index.md +--8<-- + +## Tile Grid Example +{{ tile_grid(page.meta) }} + +
\ No newline at end of file diff --git a/documentation/docs/configuration/palettes/index.md b/documentation/docs/configuration/palettes/index.md index 25bb9d5e..5893a17c 100644 --- a/documentation/docs/configuration/palettes/index.md +++ b/documentation/docs/configuration/palettes/index.md @@ -6,6 +6,11 @@ tiles: tooltip: to Default Demo Page alt_text: Default Demo Page link_href: ./default/ + - caption: Blueberry + img_src: ../../img/palettes/blueberry.png + tooltip: to Blueberry Demo Page + alt_text: Blueberry Demo Page + link_href: ./blueberry/ - caption: Gruvbox Dark img_src: ../../img/palettes/gruvbox_dark.png tooltip: to Gruvbox Dark Demo Page @@ -15,12 +20,22 @@ tiles: img_src: ../../img/palettes/dark.png tooltip: to Dark Demo Page alt_text: Dark Demo Page - link_href: ./dark/ + link_href: ./dark/ + - caption: Lightyear + img_src: ../../img/palettes/lightyear.png + tooltip: to Lightyear Demo Page + alt_text: Lightyear Demo Page + link_href: ./lightyear/ - caption: Pink img_src: ../../img/palettes/pink.png tooltip: to Pink Demo Page alt_text: Pink Demo Page link_href: ./pink/ + - caption: Red Drum + img_src: ../../img/palettes/red_drum.png + tooltip: to Red Drum Demo Page + alt_text: Red Drum Demo Page + link_href: ./red_drum/ - caption: Sans img_src: ../../img/palettes/sans.png tooltip: to Sans Demo Page @@ -30,18 +45,33 @@ tiles: img_src: ../../img/palettes/sans_dark.png tooltip: to Sans Dark Demo Page alt_text: Sans Dark Demo Page - link_href: ./sans-dark/ + link_href: ./sans-dark/ + - caption: Soundside + img_src: ../../img/palettes/soundside.png + tooltip: to Soundside Demo Page + alt_text: Soundside Demo Page + link_href: ./soundside/ + - caption: Volans + img_src: ../../img/palettes/volans.png + tooltip: to Volans Demo Page + alt_text: Volans Demo Page + link_href: ./volans/ --- # Theme Color Palettes Terminal for MkDocs supports the following color palettes by default: - [default](default.md) + - [blueberry](blueberry.md) - [gruvbox_dark](gruvbox-dark.md) - [dark](dark.md) + - [lightyear](lightyear.md) - [pink](pink.md) + - [red_drum](red_drum.md) - [sans](sans.md) - [sans_dark](sans-dark.md) + - [soundside](soundside.md) + - [volans](volans.md) To change the color palette to one of the built in color palettes, add the `palette` attribute to your theme configuration in `mkdocs.yml`: @@ -52,8 +82,13 @@ theme: ``` [^1]: white background and light blue hyperlinks. -[^2]: dark grey background, orange hyperlinks, and light yellow text. -[^3]: black background, light blue hyperlinks, and white text. -[^4]: white background and pink hyperlinks. -[^5]: white background, light blue hyperlinks, and sans font. -[^6]: black background, light blue hyperlinks, and white text in sans font. \ No newline at end of file +[^2]: cream background and navy blue hyperlinks +[^3]: dark grey background, orange hyperlinks, and light yellow text. +[^4]: black background, light blue hyperlinks, and white text. +[^5]: hint of green background and pigment indigo hyperlinks +[^6]: white background and pink hyperlinks. +[^7]: double colonial white background and red berry hyperlinks. +[^8]: white background, light blue hyperlinks, and sans font. +[^9]: black background, light blue hyperlinks, and white text in sans font. +[^10]: peach background and sherpa blue hyperlinks. +[^11]: beige background and millbrook hyperlinks. \ No newline at end of file diff --git a/documentation/docs/configuration/palettes/lightyear.md b/documentation/docs/configuration/palettes/lightyear.md new file mode 100644 index 00000000..bd7dd9cf --- /dev/null +++ b/documentation/docs/configuration/palettes/lightyear.md @@ -0,0 +1,44 @@ +--- +show_tiles_inline: true +tiles: + - caption: '@petradr' + img_src: ../../../img/picsum/167_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: 'Marcin Czerwinski' + img_src: ../../../img/picsum/127_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: "Steve Richey" + img_src: ../../../img/picsum/143_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ +--- + +--8<-- +configuration/palettes/links.md +--8<-- + +# Lightyear Palette + +To use the dark color palette, add the `palette` attribute to your theme configuration in `mkdocs.yml`: + +```yaml +theme: + name: terminal + palette: lightyear +``` + + + +--8<-- +elements/examples/index.md +--8<-- + +## Tile Grid Example +{{ tile_grid(page.meta) }} + +
\ No newline at end of file diff --git a/documentation/docs/configuration/palettes/links.md b/documentation/docs/configuration/palettes/links.md index 8a4072a3..d6898aca 100644 --- a/documentation/docs/configuration/palettes/links.md +++ b/documentation/docs/configuration/palettes/links.md @@ -1,8 +1,13 @@ diff --git a/documentation/docs/configuration/palettes/red_drum.md b/documentation/docs/configuration/palettes/red_drum.md new file mode 100644 index 00000000..34af9349 --- /dev/null +++ b/documentation/docs/configuration/palettes/red_drum.md @@ -0,0 +1,44 @@ +--- +show_tiles_inline: true +tiles: + - caption: '@petradr' + img_src: ../../../img/picsum/167_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: 'Marcin Czerwinski' + img_src: ../../../img/picsum/127_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: "Steve Richey" + img_src: ../../../img/picsum/143_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ +--- + +--8<-- +configuration/palettes/links.md +--8<-- + +# Red Drum Palette + +To use the dark color palette, add the `palette` attribute to your theme configuration in `mkdocs.yml`: + +```yaml +theme: + name: terminal + palette: red_drum +``` + + + +--8<-- +elements/examples/index.md +--8<-- + +## Tile Grid Example +{{ tile_grid(page.meta) }} + +
\ No newline at end of file diff --git a/documentation/docs/configuration/palettes/soundside.md b/documentation/docs/configuration/palettes/soundside.md new file mode 100644 index 00000000..0c5f8f58 --- /dev/null +++ b/documentation/docs/configuration/palettes/soundside.md @@ -0,0 +1,44 @@ +--- +show_tiles_inline: true +tiles: + - caption: '@petradr' + img_src: ../../../img/picsum/167_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: 'Marcin Czerwinski' + img_src: ../../../img/picsum/127_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: "Steve Richey" + img_src: ../../../img/picsum/143_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ +--- + +--8<-- +configuration/palettes/links.md +--8<-- + +# Soundside Palette + +To use the dark color palette, add the `palette` attribute to your theme configuration in `mkdocs.yml`: + +```yaml +theme: + name: terminal + palette: soundside +``` + + + +--8<-- +elements/examples/index.md +--8<-- + +## Tile Grid Example +{{ tile_grid(page.meta) }} + +
\ No newline at end of file diff --git a/documentation/docs/configuration/palettes/volans.md b/documentation/docs/configuration/palettes/volans.md new file mode 100644 index 00000000..46975c6f --- /dev/null +++ b/documentation/docs/configuration/palettes/volans.md @@ -0,0 +1,44 @@ +--- +show_tiles_inline: true +tiles: + - caption: '@petradr' + img_src: ../../../img/picsum/167_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: 'Marcin Czerwinski' + img_src: ../../../img/picsum/127_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ + - caption: "Steve Richey" + img_src: ../../../img/picsum/143_200x200.jpeg + tooltip: 'to Picsum homepage' + alt_text: 'Picsum Photo API.' + link_href: https://picsum.photos/ +--- + +--8<-- +configuration/palettes/links.md +--8<-- + +# Volans Palette + +To use the dark color palette, add the `palette` attribute to your theme configuration in `mkdocs.yml`: + +```yaml +theme: + name: terminal + palette: volans +``` + + + +--8<-- +elements/examples/index.md +--8<-- + +## Tile Grid Example +{{ tile_grid(page.meta) }} + +
\ No newline at end of file diff --git a/documentation/docs/img/palettes/blueberry.png b/documentation/docs/img/palettes/blueberry.png new file mode 100644 index 00000000..9712a3d2 Binary files /dev/null and b/documentation/docs/img/palettes/blueberry.png differ diff --git a/documentation/docs/img/palettes/lightyear.png b/documentation/docs/img/palettes/lightyear.png new file mode 100644 index 00000000..0dbab6ad Binary files /dev/null and b/documentation/docs/img/palettes/lightyear.png differ diff --git a/documentation/docs/img/palettes/red_drum.png b/documentation/docs/img/palettes/red_drum.png new file mode 100644 index 00000000..2d61e001 Binary files /dev/null and b/documentation/docs/img/palettes/red_drum.png differ diff --git a/documentation/docs/img/palettes/soundside.png b/documentation/docs/img/palettes/soundside.png new file mode 100644 index 00000000..a2f7b7b7 Binary files /dev/null and b/documentation/docs/img/palettes/soundside.png differ diff --git a/documentation/docs/img/palettes/volans.png b/documentation/docs/img/palettes/volans.png new file mode 100644 index 00000000..f590207e Binary files /dev/null and b/documentation/docs/img/palettes/volans.png differ diff --git a/documentation/mkdocs.yml b/documentation/mkdocs.yml index 247ef495..87f2b645 100644 --- a/documentation/mkdocs.yml +++ b/documentation/mkdocs.yml @@ -12,11 +12,16 @@ nav: - Color Palettes: - Index: 'configuration/palettes/index.md' - Default: 'configuration/palettes/default.md' + - Blueberry: 'configuration/palettes/blueberry.md' - Gruvbox Dark: 'configuration/palettes/gruvbox-dark.md' - Dark: 'configuration/palettes/dark.md' + - Lightyear: 'configuration/palettes/lightyear.md' - Pink: 'configuration/palettes/pink.md' + - Red Drum: 'configuration/palettes/red_drum.md' - Sans: 'configuration/palettes/sans.md' - Sans Dark: 'configuration/palettes/sans-dark.md' + - Soundside: 'configuration/palettes/soundside.md' + - Volans: 'configuration/palettes/volans.md' - Features: 'configuration/features.md' - Blocks: 'configuration/blocks.md' - Plugins: 'configuration/plugins/index.md' @@ -91,6 +96,11 @@ plugins: - configuration/palettes/pink.md#pink-palette - configuration/palettes/sans-dark.md#sans-dark-palette - configuration/palettes/sans.md#sans-palette + - configuration/palettes/blueberry.md#blueberry-palette + - configuration/palettes/lightyear.md#lightyear-palette + - configuration/palettes/red_drum.md#red_drum-palette + - configuration/palettes/soundside.md#soundside-palette + - configuration/palettes/volans.md#volans-palette - macros: modules: - mkdocs-terminal:terminal.pluglets.tile_grid.main @@ -98,6 +108,7 @@ plugins: ## deploy settings theme: name: terminal + palette: default custom_dir: theme_overrides features: - footer.prev_next diff --git a/terminal/css/palettes/blueberry.css b/terminal/css/palettes/blueberry.css new file mode 100644 index 00000000..dd28b4dd --- /dev/null +++ b/terminal/css/palettes/blueberry.css @@ -0,0 +1,22 @@ +/*! blueberry.css | MIT License | https://github.com/ntno/mkdocs-terminal/issues/119 */ + +:root { + --global-font-size: 15px; + --global-line-height: 1.4em; + --global-space: 10px; + --font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --mono-font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --background-color: #ffffcc; + --page-width: 60em; + --font-color: #190910; + --invert-font-color: #f7f7f7; + --primary-color: #000080; + --secondary-color: #3737aa; + --tertiary-color: #3737aa; + --error-color: #ffbf00; + --progress-bar-background: #d4d4d4; + --progress-bar-fill: #5e5e5e; + --code-bg-color: #f7f7f7; + --input-style: solid; + --display-h1-decoration: none; +} \ No newline at end of file diff --git a/terminal/css/palettes/gruvbox_dark.css b/terminal/css/palettes/gruvbox_dark.css index ac7cd254..9d503a37 100644 --- a/terminal/css/palettes/gruvbox_dark.css +++ b/terminal/css/palettes/gruvbox_dark.css @@ -1,7 +1,6 @@ /*! gruvbox_dark.css | MIT License | github.com/Gioni06/terminal.css/issues/9 */ :root { - /* Background */ --gb-dm-bg0: #282828; --gb-dm-bg0-hard: #1d2021; --gb-dm-bg0-soft: #32302f; @@ -9,13 +8,11 @@ --gb-dm-bg2: #504945; --gb-dm-bg3: #665c54; --gb-dm-bg4: #7c6f64; - /* Foreground */ --gb-dm-fg0: #fbf1c7; --gb-dm-fg1: #ebdbb2; --gb-dm-fg2: #d5c4a1; --gb-dm-fg3: #bdae93; --gb-dm-fg4: #a89984; - /* Colors */ --gb-dm-dark-red: #cc241d; --gb-dm-dark-green: #98971a; --gb-dm-dark-yellow: #d79921; diff --git a/terminal/css/palettes/lightyear.css b/terminal/css/palettes/lightyear.css new file mode 100644 index 00000000..465e102e --- /dev/null +++ b/terminal/css/palettes/lightyear.css @@ -0,0 +1,23 @@ +/*! lightyear.css | MIT License | https://github.com/ntno/mkdocs-terminal/issues/119 */ + +:root { + --global-font-size: 15px; + --global-line-height: 1.4em; + --global-space: 10px; + --font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --mono-font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --background-color: #E0FFE0; + --page-width: 60em; + --font-color: #190910; + --invert-font-color: #f7f7f7; + --primary-color: #4B0082; + --secondary-color: #6e4e84; + --tertiary-color: #6e4e84; + --error-color: #db3030; + --progress-bar-background: #d4d4d4; + --progress-bar-fill: #5e5e5e; + --code-bg-color: #f7f7f7; + --input-style: solid; + --display-h1-decoration: none; + +} \ No newline at end of file diff --git a/terminal/css/palettes/red_drum.css b/terminal/css/palettes/red_drum.css new file mode 100644 index 00000000..1923541f --- /dev/null +++ b/terminal/css/palettes/red_drum.css @@ -0,0 +1,23 @@ +/*! red_drum.css | MIT License | https://github.com/ntno/mkdocs-terminal/issues/119 */ + +:root { + --global-font-size: 15px; + --global-line-height: 1.4em; + --global-space: 10px; + --font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --mono-font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --background-color: #EEE8AA; + --page-width: 60em; + --font-color: #190910; + --invert-font-color: #f7f7f7; + --primary-color: #8B0000; + --secondary-color: #976161; + --tertiary-color: #976161; + --error-color: #FFA07A; + --progress-bar-background: #d4d4d4; + --progress-bar-fill: #5e5e5e; + --code-bg-color: #f7f7f7; + --input-style: solid; + --display-h1-decoration: none; + +} \ No newline at end of file diff --git a/terminal/css/palettes/soundside.css b/terminal/css/palettes/soundside.css new file mode 100644 index 00000000..9f15da3c --- /dev/null +++ b/terminal/css/palettes/soundside.css @@ -0,0 +1,22 @@ +/*! soundside.css | MIT License | https://github.com/ntno/mkdocs-terminal/issues/119 */ + +:root { + --global-font-size: 15px; + --global-line-height: 1.4em; + --global-space: 10px; + --font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --mono-font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --background-color: #ffe5b4; + --page-width: 60em; + --font-color: #190910; + --invert-font-color: #f7f7f7; + --primary-color: #004D4D; + --secondary-color: #496262; + --tertiary-color: #496262; + --error-color: #ffb11f; + --progress-bar-background: #d4d4d4; + --progress-bar-fill: #5e5e5e; + --code-bg-color: #f7f7f7; + --input-style: solid; + --display-h1-decoration: none; +} \ No newline at end of file diff --git a/terminal/css/palettes/volans.css b/terminal/css/palettes/volans.css new file mode 100644 index 00000000..7250da1d --- /dev/null +++ b/terminal/css/palettes/volans.css @@ -0,0 +1,23 @@ +/*! lightyear.css | MIT License | https://github.com/ntno/mkdocs-terminal/issues/119 */ + +:root { + --global-font-size: 15px; + --global-line-height: 1.4em; + --global-space: 10px; + --font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --mono-font-stack: 'Fira Code', Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + --background-color: #F5F5DC; + --page-width: 60em; + --font-color: #190910; + --invert-font-color: #f7f7f7; + --primary-color: #5C4033; + --secondary-color: #A9A9A9; + --tertiary-color: #A9A9A9; + --error-color: #d64400; + --progress-bar-background: #d4d4d4; + --progress-bar-fill: #5e5e5e; + --code-bg-color: #A9A9A9; + --input-style: solid; + --display-h1-decoration: none; + +} \ No newline at end of file diff --git a/tests/palette_report.md b/tests/palette_report.md new file mode 100644 index 00000000..605b5f89 --- /dev/null +++ b/tests/palette_report.md @@ -0,0 +1,543 @@ +## Steps +1. Identify the background and foreground colors based on simple keywords (ex: property name contains "background") +2. Check each background-foreground combo for WCAG alignment +3. Report results in an html table +## Notes +- ___keywords___: bg, background, fg, foreground, color, matplotlib color names +- Currently assumes all non-background colors are foreground colors for the test) +## Legend +- ✅: all WCAG tests passed +- ☑️: some WCAG tests passed +- ❌: no WCAG tests passed +- Symbols link to WCAG api response with tests +# blueberry.css + + + + + + + + + + + + + + + + + + + < + + + + + + + + < + + + + + + < + < + < + + + +
backgroundsprimary-color (000080)font-color (190910)secondary-color (3737aa)tertiary-color (3737aa)error-color (ffbf00)
progress-bar-background (d4d4d4):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
code-bg-color (f7f7f7):white_check_mark::white_check_mark::white_check_mark::white_check_mark::x:
background-color (ffc):ballot_box_with_check::ballot_box_with_check::x::x::x:
+ +# dark.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
backgroundsprimary-color (62c4ff)secondary-color (a3abba)tertiary-color (a3abba)font-color (e8e9ed)error-color (ff3c74)
background-color (222225):white_check_mark::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
progress-bar-background (3f3f44):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
code-bg-color (3f3f44):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
+ +# gruvbox_dark.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < + + + + + + + + + + + + + + + + + + + + + + + + < + + + + + + + + + + + + + + + + + + + + + + + + < + + + + + + + + + + + + + < + + + + + + + + < + + + < + + + < + + + + + + + + + + < + < + + + < + < + + + < + + + < + + + < + + + + + < + + + + + < + < + < + + < + < + < + < + < + + < + < + < + + < + < + + < + + < + + + + + < + < + < + < + < + < + < + < + < + < + < + < + < + < + < + < + + < + < + < + + + + +
backgroundsgb-dm-dark-blue (458588)gb-dm-dark-aqua (689d6a)gb-dm-light-blue (83a598)gb-dm-light-aqua (8ec07c)gb-dm-dark-gray (928374)gb-dm-dark-green (98971a)gb-dm-fg4 (a89984)gb-dm-light-gray (a89984)gb-dm-dark-purple (b16286)gb-dm-light-green (b8bb26)gb-dm-fg3 (bdae93)gb-dm-dark-red (cc241d)gb-dm-light-purple (d3869b)gb-dm-fg2 (d5c4a1)gb-dm-dark-orange (d65d0e)gb-dm-dark-yellow (d79921)gb-dm-fg1 (ebdbb2)gb-dm-light-orange (f38019)gb-dm-light-yellow (fabd2f)gb-dm-light-red (fb4934)gb-dm-fg0 (fbf1c7)
gb-dm-bg0-hard (1d2021):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::white_check_mark::x::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark:
gb-dm-bg0 (282828):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::x::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark:
gb-dm-bg0-soft (32302f):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark::ballot_box_with_check::white_check_mark:
gb-dm-bg1 (3c3836):x::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark:
gb-dm-bg2 (504945):x::x::ballot_box_with_check::ballot_box_with_check::x::x::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::ballot_box_with_check::x::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::x::white_check_mark:
gb-dm-bg3 (665c54):x::x::x::ballot_box_with_check::x::x::x::x::x::ballot_box_with_check::x::x::x::ballot_box_with_check::x::x::ballot_box_with_check::x::ballot_box_with_check::x::ballot_box_with_check:
gb-dm-bg4 (7c6f64):x::x::x::x::x::x::x::x::x::x::x::x::x::x::x::x::ballot_box_with_check::x::x::x::ballot_box_with_check:
+ +# lightyear.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
backgroundsfont-color (190910)primary-color (4B0082)secondary-color (6e4e84)tertiary-color (6e4e84)error-color (db3030)
background-color (E0FFE0):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check:
progress-bar-background (d4d4d4):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check:
code-bg-color (f7f7f7):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check:
+ +# pink.css + + + + + + + + + + + + + + + + + + + < + + + + + + + + + + + + + + + + + + + +
backgroundsfont-color (190910)secondary-color (715864)tertiary-color (715864)error-color (bb0047)primary-color (f90d7a)
progress-bar-background (d4d4d4):white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::x:
code-bg-color (f7f7f7):white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check:
background-color (ffffff):white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check:
+ +# red_drum.css + + + + + + + + + + + + + + + + + + + < + + + + + + + + < + + + + + + + + < + + + +
backgroundsfont-color (190910)primary-color (8B0000)secondary-color (976161)tertiary-color (976161)error-color (FFA07A)
background-color (EEE8AA):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
progress-bar-background (d4d4d4):white_check_mark::ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::x:
code-bg-color (f7f7f7):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
+ +# sans.css +- Style does not have enough foregrounds and backgrounds to compare. + +# sans_dark.css + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
backgroundsprimary-color (62c4ff)secondary-color (a3abba)tertiary-color (a3abba)font-color (e8e9ed)error-color (ff3c74)
background-color (222225):white_check_mark::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
progress-bar-background (3f3f44):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
code-bg-color (3f3f44):ballot_box_with_check::ballot_box_with_check::ballot_box_with_check::white_check_mark::ballot_box_with_check:
+ +# soundside.css + + + + + + + + + + + + + + + + + + + < + + + + + + + + < + + + + + + + + < + + + +
backgroundsprimary-color (004D4D)font-color (190910)secondary-color (496262)tertiary-color (496262)error-color (ffb11f)
progress-bar-background (d4d4d4):ballot_box_with_check::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
code-bg-color (f7f7f7):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
background-color (ffe5b4):white_check_mark::white_check_mark::ballot_box_with_check::ballot_box_with_check::x:
+ +# volans.css + + + + + + + + + + + + + + + + + < + < + < + + + + + + < + < + + + + + + + < + < + + + + +
backgroundsfont-color (190910)primary-color (5C4033)secondary-color (A9A9A9)tertiary-color (A9A9A9)error-color (d64400)
code-bg-color (A9A9A9):white_check_mark::ballot_box_with_check::x::x::x:
background-color (F5F5DC):white_check_mark::white_check_mark::x::x::ballot_box_with_check:
progress-bar-background (d4d4d4):white_check_mark::ballot_box_with_check::x::x::ballot_box_with_check:
diff --git a/tests/palette_review.py b/tests/palette_review.py new file mode 100644 index 00000000..575a17f6 --- /dev/null +++ b/tests/palette_review.py @@ -0,0 +1,97 @@ +import cssutils +import logging +from matplotlib import colors +import os +from pathlib import Path +from requests import get, exceptions + +cssutils.log.setLevel(logging.ERROR) +palette_dir = Path(os.getcwd()) / "terminal/css/palettes" +palettes = [p for p in palette_dir.glob(pattern="*.css") if "default" not in p.name] +color_labels = colors.cnames.keys() +bg_labels = ["background", "bg"] +fg_labels = ["foreground", "fg"] +drop_labels = ["var(", "invert"] +palettes.sort() + +intro = ('## Steps\n' + '1. Identify the background and foreground colors ' + 'based on simple keywords (ex: property name contains "background")\n' + '2. Check each background-foreground combo for WCAG alignment\n' + '3. Report results in an html table\n' + '## Notes\n' + '- ___keywords___: bg, background, fg, foreground, color, matplotlib ' + 'color names\n' + '- Currently assumes all non-background colors are foreground colors for the test)\n') +legend = ("## Legend\n" + "- ✅: all WCAG tests passed\n" + "- ☑️: some WCAG tests passed\n" + "- ❌: no WCAG tests passed\n" + "- Symbols link to WCAG api response with tests") + +with open(Path(os.getcwd()) / "tests" / "palette_report.md", "w") as f: + f.write(intro) + f.write(legend) +for p in palettes: + backgrounds = {} + foregrounds = {} + sheet = cssutils.parseFile(p) + for rule in sheet: + if isinstance(rule, cssutils.css.csscomment.CSSComment): + continue + style_text = rule.style.cssText.replace("\n", "") + for i in style_text.split(";"): + pair = i.split(": ") + label = pair[0].replace("--", "") + value = pair[1].replace("#", "") + if "invert" in label or "var(" in value: + pass + else: + if value == "fff": + value = "ffffff" + if any(x in label for x in bg_labels): + backgrounds[label] = value + else: + if any(x in label for x in fg_labels): + foregrounds[label] = value + elif any(x in label.replace("-", "") for x in list(color_labels)): + foregrounds[label] = value + elif "color" in label: + foregrounds[label] = value + if len(backgrounds.keys()) < 1 or len(foregrounds.keys()) < 1: + with open(Path(os.getcwd()) / "tests" / "palette_report.md", "a+") as f: + f.write(f"\n# {p.name}") + f.write("\n- Style does not have enough foregrounds and backgrounds to compare.\n") + else: + backgrounds = {k: v for k, v in sorted(backgrounds.items(), key=lambda item: item[1])} + foregrounds = {k: v for k, v in sorted(foregrounds.items(), key=lambda item: item[1])} + table_start = "\n\n \n " + headers = "\n " + table_middle = "\n " + table_end = "\n \n
backgrounds
" + for k, v in foregrounds.items(): + headers += f"\n {k} ({v})" + for k, v in backgrounds.items(): + row = f"\n \n {k} ({v})" + for x, y in foregrounds.items(): + try: + url = f"https://webaim.org/resources/contrastchecker/?fcolor={y}&bcolor={v}&api" + resp = get(url) + url = url.replace("&api", "") + grades = resp.json() + del grades["ratio"] + if all(grade == "pass" for grade in grades.values()): + row += f"\n :white_check_mark:" + elif any(grade == "pass" for grade in grades.values()): + row += f"\n :ballot_box_with_check:" + else: + row += f"<\n :x:" + except (ConnectionError, ConnectionRefusedError, ConnectionRefusedError): + row += f"<\n :no_entry:" + row += "\n " + table_middle += row + headers += "\n \n " + page = table_start + headers + table_middle + table_end + with open(Path(os.getcwd()) / "tests" / "palette_report.md", "a+") as f: + f.write(f"\n# {p.name}\n") + f.write(f"{page}\n")