feat: introduce support for pywal
This commit is contained in:
parent
82da1c1ecb
commit
d1a5441514
15
app.ts
15
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) {
|
||||
|
||||
@ -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;
|
||||
52
styles/colors/index.scss
Normal file
52
styles/colors/index.scss
Normal file
@ -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);
|
||||
26
styles/colors/material.scss
Normal file
26
styles/colors/material.scss
Normal file
@ -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);
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@forward '_bar';
|
||||
@forward '_launcher';
|
||||
@forward '_quick_settings';
|
||||
@forward '_quick_settings';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user