diff --git a/CHANGELOG.md b/CHANGELOG.md index c98f673..aa2b853 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix build failing if social sharing button is enabled and page is missing a description (#114). +### Removed + +- **[BREAKING]** Remove `fix_contrast` and `fix_contrast_dark` config/page/section variables in favor of automatic contrast color picking (#43). + ## [v6.1.1](https://codeberg.org/daudix/duckquill/compare/v6.1.0...v6.1.1) ### Fixed diff --git a/config.toml b/config.toml index cfb8965..92e5fe8 100644 --- a/config.toml +++ b/config.toml @@ -99,13 +99,6 @@ accent_color = "#ff7800" # Ditto but for the dark theme. # If not set regular variant will be used. accent_color_dark = "#ffa348" -# Whether to fix low contrast in text selection, checkboxes, etc. -# Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow. -# -# fix_contrast = true -# -# Ditto but for the dark theme. -fix_contrast_dark = true # Whether to use fonts bundled with Duckquill instead of system ones. # Keep in mind that it also changes the style of headings. # diff --git a/content/_index.md b/content/_index.md index 575440f..0c9cb46 100644 --- a/content/_index.md +++ b/content/_index.md @@ -102,8 +102,6 @@ Configuration variables from `config.toml` that can be set/overriden per page/se - `default_theme`: Which theme should be used by default (light/dark). - `accent_color`: Sets theme and [browser theme](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) color. - `accent_color_dark`: Ditto but for the dark theme. If not set regular variant will be used. -- `fix_contrast`: Whether to fix low contrast in text selection, checkboxes, etc. Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow. -- `fix_contrast_dark`: Ditto but for the dark theme. - `emoji_favicon`: Use emoji as a favicon. Only one emoji is being rendered, everything else is truncated. - `styles`: Additional CSS styles; expects them to be in the `./static/` directory. If you are using Sass it will be generated there automatically. - `scripts`: Additional JavaScript scripts; expects them to be in the `./static/` directory. diff --git a/content/demo/demo.css b/content/demo/demo.css index e77d171..30b2ddc 100644 --- a/content/demo/demo.css +++ b/content/demo/demo.css @@ -14,16 +14,6 @@ padding: 0.5rem; } -#color-picker-container:hover { - transform: none; -} - -#color-picker-container label { - margin-inline-end: 0.25rem; - color: var(--fg-muted-4); - font-weight: bold; -} - :root[dir*="rtl"] #color-picker-container { transform: translateX(calc(100% - 1rem)); } @@ -32,9 +22,22 @@ transform: none; } +#color-picker-container:hover { + transform: none; +} + +#color-picker-container > small { + display: block; + margin-block-end: 0.5rem; + font-weight: bold; +} + +#color-picker-container label { + margin-inline-end: 0.25rem; + color: var(--fg-muted-5); +} + #color-picker-light, -#color-picker-dark, -#contrast-color-light, -#contrast-color-dark { +#color-picker-dark { margin-inline-end: 0.25rem; } diff --git a/content/demo/demo.js b/content/demo/demo.js index 312e0cb..dddec69 100644 --- a/content/demo/demo.js +++ b/content/demo/demo.js @@ -10,16 +10,12 @@ slider.oninput = function() { // Spaceship control center const colorPickerLight = document.querySelector("#color-picker-light"); const colorPickerDark = document.querySelector("#color-picker-dark"); -const contrastCheckboxLight = document.querySelector("#contrast-color-light"); -const contrastCheckboxDark = document.querySelector("#contrast-color-dark"); let accentColorLight = colorPickerLight.value; let accentColorDark = colorPickerDark.value; colorPickerLight.addEventListener("input", updateAccentColorLight); colorPickerDark.addEventListener("input", updateAccentColorDark); -contrastCheckboxLight.addEventListener("change", updateStyles); -contrastCheckboxDark.addEventListener("change", updateStyles); function updateAccentColorLight() { accentColorLight = colorPickerLight.value; @@ -32,9 +28,6 @@ function updateAccentColorDark() { } function updateStyles() { - const contrastColorLight = contrastCheckboxLight.checked; - const contrastColorDark = contrastCheckboxDark.checked; - let styleElement = document.getElementById("dynamic-styles"); if (!styleElement) { @@ -57,44 +50,6 @@ function updateStyles() { } `; - if (contrastColorLight) { - styles += ` - :root { - --contrast-color: rgb(0 0 0 / 0.8); - } - `; - } else { - styles += ` - :root { - --contrast-color: #fff; - } - `; - } - - if (contrastColorDark) { - styles += ` - [data-theme="dark"] { - --contrast-color: rgb(0 0 0 / 0.8); - } - @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --contrast-color: rgb(0 0 0 / 0.8); - } - } - `; - } else { - styles += ` - [data-theme="dark"] { - --contrast-color: #fff; - } - @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --contrast-color: #fff; - } - } - `; - } - styleElement.textContent = styles; } diff --git a/content/demo/index.md b/content/demo/index.md index 56fb390..66f6794 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -667,19 +667,10 @@ With `centered` and `big` classes:
Accent color: -

-
- Fix contrast: -
- - -
- -
diff --git a/sass/_variables.scss b/sass/_variables.scss index 3f10e39..9610ad1 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -63,6 +63,11 @@ --yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity)); --yellow-fg: rgb(156 110 3); + // CONTRAST COLOR + --l: clamp(0, (l / 0.623 - 1) * -infinity, 1); + --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l)))); + --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a)); + // CONTAINERS --container-width: 720px; diff --git a/templates/partials/variables.html b/templates/partials/variables.html index f837834..86a33e0 100644 --- a/templates/partials/variables.html +++ b/templates/partials/variables.html @@ -7,16 +7,6 @@ {%- else -%} --accent-color: {{ config.extra.accent_color | default(value="#6f8396") | safe }}; {%- endif -%} - - {%- if page.extra.fix_contrast -%} - --contrast-color: rgb(0 0 0 / 0.8); - {%- elif section.extra.fix_contrast -%} - --contrast-color: rgb(0 0 0 / 0.8); - {%- elif config.extra.fix_contrast -%} - --contrast-color: rgb(0 0 0 / 0.8); - {%- else -%} - --contrast-color: #fff; - {%- endif -%} } {%- if page.extra.accent_color_dark -%} @@ -51,18 +41,6 @@ } {%- endif -%} - {%- if page.extra.fix_contrast_dark or section.extra.fix_contrast_dark or config.extra.fix_contrast_dark -%} - [data-theme="dark"] { - --contrast-color: rgb(0 0 0 / 0.8); - } - - @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --contrast-color: rgb(0 0 0 / 0.8); - } - } - {%- endif -%} - {%- if config.extra.debug.layout -%} *, *::before,