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 ========================================= 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. 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)); } ``` diff --git a/gtk/theme/Default/_colors-public.scss b/gtk/theme/Default/_colors-public.scss index c50fbf9baf..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 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_border color-mix(in srgb, black, transparent 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 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_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 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 27062c46c8..c476038709 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("rgb(from #{$c} r g b / calc(alpha * #{$a}))"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);