From 67913e4af00e2b2ad4f35c0eb81beb9a0a3b3b26 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Tue, 4 Jun 2024 11:57:55 -0400 Subject: [PATCH 1/5] docs: Add more details about CSS colors --- docs/reference/gtk/css-properties.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/reference/gtk/css-properties.md b/docs/reference/gtk/css-properties.md index 76a8e6d6b2..864cf75c3f 100644 --- a/docs/reference/gtk/css-properties.md +++ b/docs/reference/gtk/css-properties.md @@ -93,11 +93,12 @@ Colors can be expressed in numerous ways in CSS (see the many (but not all) of these. You can use rgb(), rgba(), hsl() with both the legacy or the modern CSS -syntax, and calc() can be used as well in color expressions. +syntax, and calc() can be used as well in color expressions. hwb(), oklab(), +oklch(), color(), color-mix() and relative colors are supported as well. ### Non-CSS Colors -GTK extends the CSS syntax with several additional ways to specify colors. +GTK extends the CSS syntax with several additional ways to specify colors. These extensions are deprecated and should be replaced by the equivalent standard CSS notions. From e50f4ecccf02a4eba03b08e379fce688719ae57a Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Mon, 3 Jun 2024 18:48:38 -0400 Subject: [PATCH 2/5] NEWS: Updates --- NEWS | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/NEWS b/NEWS index 9a6a1922fe..65e0836834 100644 --- a/NEWS +++ b/NEWS @@ -1,6 +1,40 @@ Overview of Changes in 4.15.2, xx-xx-xxxx ========================================= +* GtkFileChooserWidget: + - Plug some memory leaks + - Make Ctrl-Shift-N create a new folder + +* CSS: + - Support color(), oklab(), etc (https://www.w3.org/TR/css-color-4/) + - Support color-mix() (https://www.w3.org/TR/css-color-5/) + - Support relative colors (https://www.w3.org/TR/css-color-5/) + +* Accessibility: + - Avoid markup when reading labels + +* GSK: + - Subset fonts when serializing node trees + +* Wayland: + - Use xdg-dialog protocol for attached dialogs + +* Windows: + - Build with UNICODE + +* Debugging: + - Add GTK_DEBUG=css for warning about deprecated css syntax + +* Tools: + - nodeparser: Add an extract command for data urls + +* Deprecations: + - CSS Color functions shade(), lighter(), darker(), alpha(), mix() + +* Translation updates: + Hebrew + + Overview of Changes in 4.15.1, 21-05-2024 ========================================= From a595133b77a9964fc70c69f8bdfab0180e5963c2 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Tue, 4 Jun 2024 12:39:40 -0400 Subject: [PATCH 3/5] docs: Improve css color migration docs With relative colors, we can do better. --- docs/reference/gtk/migrating-4to5.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/reference/gtk/migrating-4to5.md b/docs/reference/gtk/migrating-4to5.md index 2fb62cde78..1950875f3a 100644 --- a/docs/reference/gtk/migrating-4to5.md +++ b/docs/reference/gtk/migrating-4to5.md @@ -130,7 +130,7 @@ a { } b { - color: alpha(black, 0.5); + color: alpha(green, 0.6); } c { @@ -150,15 +150,15 @@ a { } b { - color: color-mix(in srgb, black, transparent 50%); + color: rgb(from green, r g b / calc(alpha * 0.6)); } c { - color: color-mix(in hsl, red, white 30%); + color: hsl(from red, h calc(s * 1.3) calc(l * 1.3)); } d { - color: color-mix(in hsl, red, black 30%); + color: hsl(from red, h calc(s * 0.7) calc(l * 0.7)); } ``` From 03e971b2e3a399afa74f7a38800c1c72ea0e7533 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Tue, 4 Jun 2024 12:48:55 -0400 Subject: [PATCH 4/5] Revert "theme: Stop using alpha() and shade()" This reverts commit 0e94e5ecdab18d8eceee68d18e3055824dcd5a17. --- gtk/theme/Default/_colors-public.scss | 16 ++++++++-------- gtk/theme/Default/_common.scss | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/gtk/theme/Default/_colors-public.scss b/gtk/theme/Default/_colors-public.scss index c50fbf9baf..3b638e2bf6 100644 --- a/gtk/theme/Default/_colors-public.scss +++ b/gtk/theme/Default/_colors-public.scss @@ -93,22 +93,22 @@ $_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ -@define-color wm_title color-mix(in hsl, #{$fg_color}, white 80%); +@define-color wm_title shade(#{$fg_color}, 1.8); @define-color wm_unfocused_title #{$backdrop_fg_color}; @define-color wm_highlight #{"" + $_wm_highlight}; @define-color wm_borders_edge #{"" + $borders_edge}; -@define-color wm_bg_a color-mix(in hsl, #{$bg_color}, white 20%); +@define-color wm_bg_a shade(#{$bg_color}, 1.2); @define-color wm_bg_b #{$bg_color}; -@define-color wm_shadow color-mix(in srgb, black, transparent 35%); -@define-color wm_border color-mix(in srgb, black, transparent 18%); +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); -@define-color wm_button_hover_color_a color-mix(in hsl, #{$bg_color}, white 30%); +@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); @define-color wm_button_hover_color_b #{$bg_color}; -@define-color wm_button_active_color_a color-mix(in hsl, #{$bg_color}, black 15%); -@define-color wm_button_active_color_b color-mix(in hsl, #{$bg_color}, black 11%); -@define-color wm_button_active_color_c color-mix(in hsl, #{$bg_color}, black 10%); +@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); +@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); +@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); //FIXME this is really an API diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss index 27062c46c8..fd9dc8607b 100644 --- a/gtk/theme/Default/_common.scss +++ b/gtk/theme/Default/_common.scss @@ -1,5 +1,5 @@ @function gtkalpha($c,$a) { - @return unquote("color-mix(in srgb, #{$c}, transparent calc(#{$a} * 100%))"); + @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); From aa03c50f05a5c79f23304afdc5a1015593611e75 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Tue, 4 Jun 2024 12:54:41 -0400 Subject: [PATCH 5/5] theme: Use better replacements for color expressions These match what we recommend for migration. --- gtk/theme/Default/_colors-public.scss | 16 ++++++++-------- gtk/theme/Default/_common.scss | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/gtk/theme/Default/_colors-public.scss b/gtk/theme/Default/_colors-public.scss index 3b638e2bf6..2b2260caef 100644 --- a/gtk/theme/Default/_colors-public.scss +++ b/gtk/theme/Default/_colors-public.scss @@ -93,22 +93,22 @@ $_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is /* these colors are exported for the window manager and shouldn't be used in applications, read if you used those and something break with a version upgrade you're on your own... */ -@define-color wm_title shade(#{$fg_color}, 1.8); +@define-color wm_title hsl(from #{$fg_color} h calc(s * 1.8) calc(l * 1.8)); @define-color wm_unfocused_title #{$backdrop_fg_color}; @define-color wm_highlight #{"" + $_wm_highlight}; @define-color wm_borders_edge #{"" + $borders_edge}; -@define-color wm_bg_a shade(#{$bg_color}, 1.2); +@define-color wm_bg_a hsl(from #{$bg_color} h calc(s * 1.2) calc(l * 1.2)); @define-color wm_bg_b #{$bg_color}; -@define-color wm_shadow alpha(black, 0.35); -@define-color wm_border alpha(black, 0.18); +@define-color wm_shadow rgb(from black r g b / calc(alpha * 0.35)); +@define-color wm_border rgb(from black r g b / calc(alpha * 0.18)); -@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); +@define-color wm_button_hover_color_a hsl(from #{$bg_color} h calc(s * 1.3) calc(l * 1.3)); @define-color wm_button_hover_color_b #{$bg_color}; -@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); -@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); -@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); +@define-color wm_button_active_color_a hsl(from #{$bg_color} h calc(s * 0.85) calc(l * 0.85)); +@define-color wm_button_active_color_b hsl(from #{$bg_color} h calc(s * 0.89) calc(l * 0.89)); +@define-color wm_button_active_color_c hsl(from #{$bg_color} h calc(s * 0.9) calc(l * 0.9)); //FIXME this is really an API diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss index fd9dc8607b..c476038709 100644 --- a/gtk/theme/Default/_common.scss +++ b/gtk/theme/Default/_common.scss @@ -1,5 +1,5 @@ @function gtkalpha($c,$a) { - @return unquote("alpha(#{$c},#{$a})"); + @return unquote("rgb(from #{$c} r g b / calc(alpha * #{$a}))"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);