Merge branch 'matthiasc/for-main' into 'main'

docs: Improve css color migration docs

See merge request GNOME/gtk!7340

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
 =========================================
 

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.

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));
 }
 ```
 

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 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 color-mix(in hsl, #{$bg_color}, white 20%);
+@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 color-mix(in srgb, black, transparent 35%);
+@define-color wm_shadow rgb(from black r g b / calc(alpha * 0.35));
-@define-color wm_border color-mix(in srgb, black, transparent 18%);
+@define-color wm_border rgb(from black r g b / calc(alpha * 0.18));
 
-@define-color wm_button_hover_color_a color-mix(in hsl, #{$bg_color}, white 30%);
+@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 color-mix(in hsl, #{$bg_color}, black 15%);
+@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 color-mix(in hsl, #{$bg_color}, black 11%);
+@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 color-mix(in hsl, #{$bg_color}, black 10%);
+@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
 

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("rgb(from #{$c} r g b / calc(alpha * #{$a}))");
 }
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);