From d1a5441514c3a87ae580b0199f4b3cfbe458f496 Mon Sep 17 00:00:00 2001 From: Franek Date: Thu, 13 Feb 2025 21:58:31 +0100 Subject: [PATCH] feat: introduce support for pywal --- app.ts | 15 +++++++- styles/_variables.scss | 6 +-- styles/colors/index.scss | 52 ++++++++++++++++++++++++++ styles/colors/material.scss | 26 +++++++++++++ styles/components/_bar.scss | 13 ++++--- styles/components/_index.scss | 2 +- styles/components/_launcher.scss | 22 +++++------ styles/components/_quick_settings.scss | 29 +++++++------- styles/style.scss | 5 ++- 9 files changed, 129 insertions(+), 41 deletions(-) create mode 100644 styles/colors/index.scss create mode 100644 styles/colors/material.scss diff --git a/app.ts b/app.ts index 10669ca..eef20f8 100644 --- a/app.ts +++ b/app.ts @@ -1,7 +1,8 @@ import style from "./styles/style.scss" -import { App, Gtk } from "astal/gtk4" -import { GLib } from "astal"; +import { SHELL } from "./settings.json"; +import { GLib, monitorFile, exec } from "astal"; +import { App, Gtk } from "astal/gtk4" import Hyprland from "gi://AstalHyprland"; import QuickSettings from "widget/quick_settings/quick_settings"; @@ -23,10 +24,20 @@ const setupBars = async (monitor_id: number) => { return windows; }; +const STYLES = `${GLib.get_user_config_dir()}/ags/styles`; +const monitorCSS = () => monitorFile( + STYLES + '/colors/index.scss', + () => { + exec(`sass ${STYLES}/style.scss /tmp/ags-style.css`); + App.apply_css('/tmp/ags-style.css', true); + } +); + App.start({ css: style, async main() { App.add_icons(`${GLib.get_user_data_dir()}/icons/Astal`); + monitorCSS(); const monitors = App.get_monitors(); for (const monitor of monitors) { diff --git a/styles/_variables.scss b/styles/_variables.scss index 8c673f9..cfabebc 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -1,6 +1,2 @@ -$fg-color: #{"@theme_fg_color"}; -$bg-color: #{"@theme_bg_color"}; -$secondary-fg-color: #{"@insensitive_fg_color"}; -$secondary-bg-color: #{"@insensitive_bg_color"}; $font-family: "SFProText Nerd Font", "SFProDisplay Nerd Font", sans-serif; -$font-family-monospace: "JetBrains Mono", monospace; +$font-family-monospace: "JetBrains Mono", monospace; \ No newline at end of file diff --git a/styles/colors/index.scss b/styles/colors/index.scss new file mode 100644 index 0000000..83a9459 --- /dev/null +++ b/styles/colors/index.scss @@ -0,0 +1,52 @@ +// SCSS Variables +// Generated by 'wal' +$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_187.jpg"; + +// Special +$background: #130f0c; +$foreground: #e0dfe0; +$cursor: #e0dfe0; + +// Colors +$color0: #130f0c; +$color1: #61A7D7; +$color2: #89888C; +$color3: #A89DA7; +$color4: #D3ACA4; +$color5: #B9BEC8; +$color6: #A7CBE3; +$color7: #e0dfe0; +$color8: #9c9c9c; +$color9: #61A7D7; +$color10: #89888C; +$color11: #A89DA7; +$color12: #D3ACA4; +$color13: #B9BEC8; +$color14: #A7CBE3; +$color15: #e0dfe0; +$primary: lighten($color4, 20%); +$onPrimary: darken($color2, 20%); +$primaryContainer: darken($color2, 10%); +$onPrimaryContainer: lighten($color4, 10%); +$secondary: desaturate(lighten($color5, 20%), 20%); +$onSecondary: desaturate(darken($color3, 20%), 20%); +$secondaryContainer: desaturate(darken($color3, 20%), 20%); +$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%); +$tertiary: adjust-hue(lighten($color4, 20%), 30deg); +$onTertiary: adjust-hue(darken($color2, 20%), 30deg); +$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg); +$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg); +$error: #ffb4a9; +$onError: #680003; +$errorContainer: #930006; +$onErrorContainer: #ffb4a9; +$background: $color0; +$onBackground: $color7; +$surface: $color0; +$onSurface: $color7; +$surfaceVariant: $color1; +$onSurfaceVariant: $color7; +$outline: $color7; +$inverseSurface: invert($surface); +$inverseOnSurface: invert($onSurface); +$inversePrimary: invert($primary); diff --git a/styles/colors/material.scss b/styles/colors/material.scss new file mode 100644 index 0000000..aedf100 --- /dev/null +++ b/styles/colors/material.scss @@ -0,0 +1,26 @@ +$primary: lighten($color4, 20%); +$onPrimary: darken($color2, 20%); +$primaryContainer: darken($color2, 10%); +$onPrimaryContainer: lighten($color4, 10%); +$secondary: desaturate(lighten($color5, 20%), 20%); +$onSecondary: desaturate(darken($color3, 20%), 20%); +$secondaryContainer: desaturate(darken($color3, 20%), 20%); +$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%); +$tertiary: adjust-hue(lighten($color4, 20%), 30deg); +$onTertiary: adjust-hue(darken($color2, 20%), 30deg); +$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg); +$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg); +$error: #ffb4a9; +$onError: #680003; +$errorContainer: #930006; +$onErrorContainer: #ffb4a9; +$background: $color0; +$onBackground: $color7; +$surface: $color0; +$onSurface: $color7; +$surfaceVariant: $color1; +$onSurfaceVariant: $color7; +$outline: $color7; +$inverseSurface: invert($surface); +$inverseOnSurface: invert($onSurface); +$inversePrimary: invert($primary); diff --git a/styles/components/_bar.scss b/styles/components/_bar.scss index d5e59e3..5f473ab 100644 --- a/styles/components/_bar.scss +++ b/styles/components/_bar.scss @@ -1,7 +1,7 @@ -@use '../variables' as *; +@use '../colors' as *; window.bar { - color: $fg-color; + color: $foreground; font-weight: bold; >box { @@ -11,20 +11,21 @@ window.bar { >.inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border: 1px solid $fg-color; - background: $bg-color; + background: $background; padding: 0.25rem 1rem; margin: 0; + + * { color: $foreground; } } .tray .item { padding: 0; margin: 0; - background: $bg-color; + background: $background; image { padding: 0; margin: 0; } } -} \ No newline at end of file +} diff --git a/styles/components/_index.scss b/styles/components/_index.scss index e328df6..80d7258 100644 --- a/styles/components/_index.scss +++ b/styles/components/_index.scss @@ -1,3 +1,3 @@ @forward '_bar'; @forward '_launcher'; -@forward '_quick_settings'; \ No newline at end of file +@forward '_quick_settings'; diff --git a/styles/components/_launcher.scss b/styles/components/_launcher.scss index be104b5..eb5c5a2 100644 --- a/styles/components/_launcher.scss +++ b/styles/components/_launcher.scss @@ -1,27 +1,27 @@ -@use '../variables' as *; +@use '../colors' as *; .launcher { entry { - background: $bg-color; - color: $fg-color; + background: $background; + color: $foreground; padding: 8px 12px; border: none; margin-bottom: 6px; &:focus { - outline: 2px solid $bg-color; + outline: 2px solid $background; } } .application { padding: 10px; - background-color: $bg-color; + background: $background; border-radius: 8px; - transition: background-color 0.2s ease; + transition: background 0.2s ease; &:hover { - background-color: $bg-color; + background: $background; } image { @@ -30,24 +30,24 @@ box { .name { - color: $fg-color; + color: $foreground; font-size: 14px; font-weight: 600; } .description { - color: $fg-color; + color: $foreground; font-size: 12px; } } } .not-found { - color: $fg-color; + color: $foreground; font-size: 14px; image { margin-bottom: 8px; } } -} \ No newline at end of file +} diff --git a/styles/components/_quick_settings.scss b/styles/components/_quick_settings.scss index 31c7ad3..c15d34a 100644 --- a/styles/components/_quick_settings.scss +++ b/styles/components/_quick_settings.scss @@ -1,7 +1,6 @@ -@use '../variables' as *; +@use '../colors' as *; window.quick_settings { - color: $fg-color; font-weight: bold; >box { @@ -12,9 +11,11 @@ window.quick_settings { >.inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - background: $bg-color; + background: $background; padding: 0.75rem 3rem; margin: 0; + + * { color: $foreground; } } button { @@ -23,12 +24,12 @@ window.quick_settings { } window.qs_bluetooth { - color: $fg-color; - >.inner { - background: $bg-color; + background: $background; padding: 0.75rem 3rem; border-radius: 10px; + + * { color: $foreground; } } .device { @@ -41,26 +42,26 @@ window.qs_bluetooth { } window.quick_settings button, window.qs_bluetooth button { - background: $bg-color; - border: 2px solid $fg-color; + background: $background; + border: 2px solid $foreground; margin: 5px; transition: 400ms cubic-bezier(0.05, 0.7, 0.1, 1); &:hover { - background: $fg-color; + background: $foreground; * { - color: $bg-color; + color: $background; } } &.active { - background: $fg-color; - border: 0.5px solid $bg-color; + background: $foreground; + border: 0.5px solid $background; * { - color: $bg-color; + color: $background; } } -} \ No newline at end of file +} diff --git a/styles/style.scss b/styles/style.scss index 30ec0bc..2ae630a 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,4 +1,5 @@ -@use '_variables' as *; +@use 'variables' as *; +@use 'colors' as *; @use 'mixins'; @use 'classes'; @use 'components'; @@ -9,4 +10,4 @@ image { padding: 0 0.25rem; -} \ No newline at end of file +}