[yew-devel] [PATCH yew-widget-toolkit-assets 3/4] color scheme: add `pwt-default-colors` helper

[Dominik Csapak <d.csapak@proxmox.com>]

this helper makes it more easier to apply the color scheme settings to a
custom component. Otherwise one would have to manually set color and
background-color.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/introduction.md           | 4 ++++
 scss/mixins/_color_scheme.scss | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/scss/introduction.md b/scss/introduction.md
index 9a2d795..9baa240 100644
--- a/scss/introduction.md
+++ b/scss/introduction.md
@@ -108,6 +108,10 @@ changes the colors of the widget. The `pwt-scheme-<name>` and
 `pwt-scheme-<name>-container` helper classes can be used to set
 those variables.
 
+There is also the `pwt-default-colors` class to set the `color` and
+`background-color` properties directly to the `--pwt-color` and
+`--pwt-color-background` respectively.
+
 A similar scheme is used for widgets with an associated accent color, using
 the following CSS variables:
 
diff --git a/scss/mixins/_color_scheme.scss b/scss/mixins/_color_scheme.scss
index 630ddce..36b26ca 100644
--- a/scss/mixins/_color_scheme.scss
+++ b/scss/mixins/_color_scheme.scss
@@ -34,6 +34,11 @@
     //    @include outline-button-color-scheme-vars($name, $important: true);
     //}
 
+    .pwt-default-colors {
+        color: var(--pwt-color);
+        background-color: var(--pwt-color-background);
+    }
+
     .pwt-color-#{$name} {
         color: var(--pwt-color-#{$name});
     }
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel