From 2445f94949b4e8183280d2497eb979e539ad4bac Mon Sep 17 00:00:00 2001 From: Christopher Davis Date: Fri, 12 Jul 2024 07:40:14 -0400 Subject: [PATCH 1/2] stylesheet: Add `.dimmed` and deprecate `.dim-label` Not all things we use `.dim-label` for are labels, so we want to have a more appropriately named style class for those cases. --- demo/adw-demo-preferences-dialog.ui | 2 +- demo/pages/styles/adw-style-demo-dialog.ui | 4 +-- doc/css-variables.md | 2 +- .../{dim-label-dark.png => dimmed-dark.png} | Bin doc/images/{dim-label.png => dimmed.png} | Bin doc/libadwaita.toml.in | 4 +-- doc/style-classes.md | 28 ++++++++++++++---- doc/styles-and-appearance.md | 2 +- doc/tools/data/{dim-label.ui => dimmed.ui} | 2 +- src/adw-entry-row.ui | 2 +- src/adw-preferences-group.ui | 2 +- src/adw-preferences-page.ui | 2 +- src/stylesheet/widgets/_deprecated.scss | 6 ++++ src/stylesheet/widgets/_entries.scss | 2 +- src/stylesheet/widgets/_header-bar.scss | 2 +- src/stylesheet/widgets/_labels.scss | 4 +-- src/stylesheet/widgets/_lists.scss | 10 +++---- src/stylesheet/widgets/_progress-bar.scss | 2 +- src/stylesheet/widgets/_scale.scss | 2 +- 19 files changed, 51 insertions(+), 27 deletions(-) rename doc/images/{dim-label-dark.png => dimmed-dark.png} (100%) rename doc/images/{dim-label.png => dimmed.png} (100%) rename doc/tools/data/{dim-label.ui => dimmed.ui} (95%) diff --git a/demo/adw-demo-preferences-dialog.ui b/demo/adw-demo-preferences-dialog.ui index 27cba46d2..3dfb6bec1 100644 --- a/demo/adw-demo-preferences-dialog.ui +++ b/demo/adw-demo-preferences-dialog.ui @@ -77,7 +77,7 @@ 12 0 diff --git a/demo/pages/styles/adw-style-demo-dialog.ui b/demo/pages/styles/adw-style-demo-dialog.ui index 695960306..c0fa3d9cf 100644 --- a/demo/pages/styles/adw-style-demo-dialog.ui +++ b/demo/pages/styles/adw-style-demo-dialog.ui @@ -1043,7 +1043,7 @@ audio-volume-medium go-next-symbolic @@ -1058,7 +1058,7 @@ audio-volume-medium go-next-symbolic diff --git a/doc/css-variables.md b/doc/css-variables.md index f90e94e2c..216cb31d9 100644 --- a/doc/css-variables.md +++ b/doc/css-variables.md @@ -962,7 +962,7 @@ These variables represent the commonly used opacity values. `--border-opacity` is used for borders. (see [`--border-color`](#border-color)) -`--dim-opacity` is used for the [`.dim-label`](style-classes.html#dim-labels) +`--dim-opacity` is used for the [`.dim`](style-classes.html#dimmed) style class and other similar contexts, like window and row subtitles. `--disabled-opacity` is used for disabled widgets. diff --git a/doc/images/dim-label-dark.png b/doc/images/dimmed-dark.png similarity index 100% rename from doc/images/dim-label-dark.png rename to doc/images/dimmed-dark.png diff --git a/doc/images/dim-label.png b/doc/images/dimmed.png similarity index 100% rename from doc/images/dim-label.png rename to doc/images/dimmed.png diff --git a/doc/libadwaita.toml.in b/doc/libadwaita.toml.in index 6201f0c9f..2fcd98a06 100644 --- a/doc/libadwaita.toml.in +++ b/doc/libadwaita.toml.in @@ -180,8 +180,8 @@ content_images = [ "images/dialog-bottom-dark.png", "images/dialog-floating.png", "images/dialog-floating-dark.png", - "images/dim-label.png", - "images/dim-label-dark.png", + "images/dimmed.png", + "images/dimmed-dark.png", "images/entry-row.png", "images/entry-row-dark.png", "images/expander-row.png", diff --git a/doc/style-classes.md b/doc/style-classes.md index f51caacef..fe3e7a84d 100644 --- a/doc/style-classes.md +++ b/doc/style-classes.md @@ -245,15 +245,14 @@ The `.spacer` style class can be applied to a [class@Gtk.Separator] to make it appear invisible and act as whitespace. This can be useful with [toolbars and similar widgets](#toolbars) to separate groups of widgets from each other. -# Dim Labels +# Dimmed - - dim-label + + dimmed -The `.dim-label` style class makes the widget it's applied to partially -transparent. +The `.dimmed` style class make the widget it's applied to partially transparent. The opacity changes between regular and high contrast styles and is represented by the [`--dim-opacity`](css-variables.html#opacity) variable. Use that variable @@ -752,3 +751,22 @@ color, for example: ``` Deprecated since: 1.6 + +## `.dim-label` + + + + dim-label + + +The `.dim-label` style class makes the widget it's applied to partially +transparent. + +The opacity changes between regular and high contrast styles and is represented +by the [`--dim-opacity`](css-variables.html#opacity) variable. Use that variable +if the style class cannot be used directly. + +The [`.dimmed`](#dimmed) style class is completely equivalent to it and should +be used instead. + +Deprecated since: 1.7 diff --git a/doc/styles-and-appearance.md b/doc/styles-and-appearance.md index 4d53c5641..0cfec798a 100644 --- a/doc/styles-and-appearance.md +++ b/doc/styles-and-appearance.md @@ -144,7 +144,7 @@ All standard GTK and Libadwaita widgets automatically support the high contrast appearance. Applications that use custom drawing or styles may need to support it manually. -* Use style classes such as [`.dim-label`](style-classes.html#dim-labels) instead +* Use style classes such as [`.dimmed`](style-classes.html#dimmed) instead of changing widget opacity manually. * Use the [helper variables](css-variables.html#helpers) when possible, instead diff --git a/doc/tools/data/dim-label.ui b/doc/tools/data/dimmed.ui similarity index 95% rename from doc/tools/data/dim-label.ui rename to doc/tools/data/dimmed.ui index 20235d001..dccf47c8a 100644 --- a/doc/tools/data/dim-label.ui +++ b/doc/tools/data/dimmed.ui @@ -16,7 +16,7 @@ 12 12 diff --git a/src/adw-entry-row.ui b/src/adw-entry-row.ui index 9ce4f4c15..a03c03348 100644 --- a/src/adw-entry-row.ui +++ b/src/adw-entry-row.ui @@ -42,7 +42,7 @@ False diff --git a/src/adw-preferences-group.ui b/src/adw-preferences-group.ui index 63979f4db..7cdab57e6 100644 --- a/src/adw-preferences-group.ui +++ b/src/adw-preferences-group.ui @@ -33,7 +33,7 @@ word-char 0 diff --git a/src/adw-preferences-page.ui b/src/adw-preferences-page.ui index 51959d6d2..77b3b7770 100644 --- a/src/adw-preferences-page.ui +++ b/src/adw-preferences-page.ui @@ -22,7 +22,7 @@ word-char 0 diff --git a/src/stylesheet/widgets/_deprecated.scss b/src/stylesheet/widgets/_deprecated.scss index b79e1d660..b75e3a6f9 100644 --- a/src/stylesheet/widgets/_deprecated.scss +++ b/src/stylesheet/widgets/_deprecated.scss @@ -375,3 +375,9 @@ headerbar.flat { border { border: none; } } + +// Deprecated: Use .dimmed + +.dim-label { + @extend .dimmed; +} diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss index 458d62e34..7fbd36c99 100644 --- a/src/stylesheet/widgets/_entries.scss +++ b/src/stylesheet/widgets/_entries.scss @@ -18,7 +18,7 @@ entry { > text { > placeholder { - @extend .dim-label; + @extend .dimmed; } > block-cursor { diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss index f95c9f866..a44af21eb 100644 --- a/src/stylesheet/widgets/_header-bar.scss +++ b/src/stylesheet/widgets/_header-bar.scss @@ -204,7 +204,7 @@ windowtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; - @extend .dim-label; + @extend .dimmed; } } diff --git a/src/stylesheet/widgets/_labels.scss b/src/stylesheet/widgets/_labels.scss index 785c770bb..3e55f07af 100644 --- a/src/stylesheet/widgets/_labels.scss +++ b/src/stylesheet/widgets/_labels.scss @@ -2,7 +2,7 @@ label { caret-color: currentColor; &.separator { - @extend .dim-label; + @extend .dimmed; } &:disabled { @@ -10,7 +10,7 @@ label { } } -.dim-label { +.dimmed { opacity: var(--dim-opacity); } diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss index d5503d144..452bc520a 100644 --- a/src/stylesheet/widgets/_lists.scss +++ b/src/stylesheet/widgets/_lists.scss @@ -114,7 +114,7 @@ row { row { label.subtitle { font-size: smaller; - @extend .dim-label; + @extend .dimmed; } > box.header { @@ -161,7 +161,7 @@ row { &.property > box.header > box.title > { .title { font-size: smaller; - @extend .dim-label; + @extend .dimmed; } .subtitle { @@ -189,7 +189,7 @@ row.entry { opacity: var(--disabled-opacity); } - .dim-label, .subtitle { + .dimmed, .dim-label, .subtitle { opacity: 1; } } @@ -290,7 +290,7 @@ row.spin { &.#{$e_type} { color: var(--accent-color); - .dim-label, .subtitle { + .dimmed, .dim-label, .subtitle { opacity: 1; } } @@ -388,7 +388,7 @@ row.expander { // AdwExpanderRow arrow rotation image.expander-row-arrow { - @extend .dim-label; + @extend .dimmed; transition: -gtk-icon-transform 200ms $ease-out-quad; @include margin-start(3px); diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss index a9a0f9f27..4de78f977 100644 --- a/src/stylesheet/widgets/_progress-bar.scss +++ b/src/stylesheet/widgets/_progress-bar.scss @@ -15,7 +15,7 @@ progressbar { } > text { - @extend .dim-label; + @extend .dimmed; @extend .numeric; font-size: smaller; } diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss index 895cb235f..0abd94b10 100644 --- a/src/stylesheet/widgets/_scale.scss +++ b/src/stylesheet/widgets/_scale.scss @@ -78,7 +78,7 @@ scale { } > value { - @extend .dim-label; + @extend .dimmed; @extend .numeric; } -- GitLab From 8e71c600b91418635e0bd6b9663ad7c7df325d59 Mon Sep 17 00:00:00 2001 From: Alice Mikhaylenko Date: Wed, 30 Oct 2024 19:23:26 +0400 Subject: [PATCH 2/2] demo: Add a .dimmed demo Did we really just never have this? --- demo/pages/styles/adw-style-demo-dialog.ui | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/demo/pages/styles/adw-style-demo-dialog.ui b/demo/pages/styles/adw-style-demo-dialog.ui index c0fa3d9cf..e635c980f 100644 --- a/demo/pages/styles/adw-style-demo-dialog.ui +++ b/demo/pages/styles/adw-style-demo-dialog.ui @@ -594,6 +594,19 @@ The "opaque" style class allows to create buttons with custom colors that look s + + + This is a dimmed paragraph, mostly used for secondary labels or descriptions. + 0 + True + word-char + 25 + dimmed + + + -- GitLab