Porting Bootstrap v4 color-yiq() with v5 color-contrast()
Wasn't able to run hugo server
for some reason.
Tried
git clone git@invent.kde.org:documentation/develop-kde-org.git
cd develop-kde-org
python3 scripts/extract-plasma-applet-config-keys.py
hugo mod get invent.kde.org/websites/aether-sass@hugo
❯ hugo mod get invent.kde.org/websites/aether-sass@hugo
go: upgraded invent.kde.org/websites/aether-sass v0.0.0-20220126004819-7de82cce2078 => v0.0.0-20221224075313-3742d3b71a71
❯ hugo server
Start building sites …
hugo v0.109.0+extended linux/amd64 BuildDate=unknown
WARN 2022/12/25 23:29:28 .Path when the page is backed by a file is deprecated and will be removed in a future release. We plan to use Path for a canonical source path and you probably want to check the source is a file. To get the current behaviour, you can use a construct similar to the one below:
{{ $path := "" }}
{{ with .File }}
{{ $path = .Path }}
{{ else }}
{{ $path = .Path }}
{{ end }}
Re-run Hugo with the flag --panicOnWarning to get a better error message.
Error: Error building site: TOCSS: failed to transform "scss/docsy/main.scss" (text/x-scss): "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/invent.kde.org/websites/aether-sass@v0.0.0-20221224075313-3742d3b71a71/assets/scss/docsy/_colors.scss:10:18": argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color
Built in 5652 ms
https://invent.kde.org/websites/aether-sass/-/blob/hugo/assets/scss/docsy/_colors.scss
/*
* SPDX-FileCopyrightText: 2020 (C) Bjorn Erik Pedersen <bjorn.erik.pedersen@gmail.com>
*
* SPDX-License-Identifier: Apache-2.0
*/
// Add some local palette classes so you can do -bg-warning -text-warning etc. Even -bg-1 if you want to paint by numbers.
@mixin palette-variant($color-name, $color-value) {
$text-color: color-yiq($color-value);
$link-color: mix($blue, $text-color, lightness($color-value));
So $text-color
is empty. Looks like the Bootstrap v4 => v5 migration requires the following changes.
https://getbootstrap.com/docs/5.0/migration/#sass
Breaking Renamed
color-yiq()
function and related variables tocolor-contrast()
as it’s no longer related to YIQ colorspace. See https://github.com/twbs/bootstrap/pull/30168/$yiq-contrasted-threshold
is renamed to$min-contrast-ratio
.$yiq-text-dark
and$yiq-text-light
are respectively renamed to$color-contrast-dark
and$color-contrast-light
.
In order to test changes to aether-css
locally, I edited develop-kde-org/config.yaml
to:
module:
imports:
- path: invent.kde.org/websites/aether-sass
- path: github.com/thednp/bootstrap.native
replacements: invent.kde.org/websites/aether-sass -> ../../aether-sass
Then I replaced color-yiq()
with color-contrast()
in
- https://invent.kde.org/websites/aether-sass/-/blob/hugo/assets/scss/docsy/_colors.scss
- https://invent.kde.org/websites/aether-sass/-/blob/hugo/assets/scss/docsy/_boxes.scss
And it ran fine.