Refactor Hyprland configs, introduce Sithego for theming, and add supporting scripts

sithego/themer/adapters/gtk/components/base.css

@@ -0,0 +1,25 @@
+* {
+    -GtkHTML-cursor-color: {{ .Theme.Colors.Semantic.Text.Value }};
+    -GtkIMHtml-cursor-color: {{ .Theme.Colors.Semantic.Text.Value }};
+    -GtkTextView-error-underline-color: {{ .Theme.Colors.Semantic.Warn.Value }};
+    -W3C-focus-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    outline-color: {{ .Theme.Colors.Semantic.Accent.Alpha .Theme.Colors.Semantic.Background 0.5 }};
+    background-clip: padding-box;
+    -gtk-secondary-caret-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+.background {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+}
+
+:disabled {
+    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+}
+
+window, 
+.window-frame {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border-radius: {{ .Theme.Spacing.RadiusLarge }};
+}

sithego/themer/adapters/gtk/components/buttons.css

@@ -0,0 +1,36 @@
+button {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+    padding: {{ .Theme.Spacing.Padding }};
+    transition: all 0.2s ease;
+}
+
+button:hover {
+    background-color: {{ .Theme.Colors.Semantic.Border.Value }};
+}
+
+button:active, 
+button:checked {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    color: {{ .Theme.Colors.Semantic.Background.Value }};
+}
+
+button:disabled {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+}
+
+button.suggested-action {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+button.destructive-action {
+    background-color: {{ .Theme.Colors.Semantic.Warn.Value }};
+    color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Warn.Value }};
+}

sithego/themer/adapters/gtk/components/checks.css

@@ -0,0 +1,49 @@
+check, radio {
+    margin: 0 {{ .Theme.Spacing.Margin }};
+    min-height: 18px;
+    min-width: 18px;
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    color: transparent;
+    -gtk-icon-source: none;
+    transition: all 0.2s ease;
+}
+
+radio {
+    border-radius: 50%;
+}
+
+check:checked {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    background-image: 
+        linear-gradient(45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%),
+        linear-gradient(-45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%);
+    background-size: 70% 70%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+radio:checked {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    background-image: radial-gradient(circle, {{ .Theme.Colors.Semantic.Accent.Value }} 35%, transparent 40%);
+}
+
+check:indeterminate {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    background-image: linear-gradient(to right, {{ .Theme.Colors.Semantic.Accent.Value }}, {{ .Theme.Colors.Semantic.Accent.Value }});
+    background-size: 60% 2px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+check:disabled,
+radio:disabled {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    color: transparent;
+    background-image: none;
+}

sithego/themer/adapters/gtk/components/entries.css

@@ -0,0 +1,19 @@
+entry {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+    padding: {{ .Theme.Spacing.PaddingSmall }};
+    caret-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+entry:focus {
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    box-shadow: inset 0 0 0 1px {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+entry:disabled {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+}

sithego/themer/adapters/gtk/components/headerbar.css

@@ -0,0 +1,11 @@
+headerbar {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border-bottom: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    box-shadow: none;
+    padding: {{ .Theme.Spacing.PaddingSmall }};
+}
+
+headerbar .title {
+    font-weight: bold;
+}

sithego/themer/adapters/gtk/components/menus.css

@@ -0,0 +1,53 @@
+list, 
+menu {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+}
+
+menubar {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border-bottom: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    padding: {{ .Theme.Spacing.PaddingSmall }};
+}
+
+menubar > menuitem {
+    padding: {{ .Theme.Spacing.Padding }};
+    min-height: 24px;
+    transition: all 0.2s ease;
+}
+
+menuitem {
+    min-height: 24px;
+    padding: {{ .Theme.Spacing.Padding }};
+}
+
+menubar > menuitem:hover {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-radius: {{ .Theme.Spacing.RadiusSmall }};
+}
+
+list row:selected,
+treeview.view:selected,
+.view:selected,
+iconview.view:selected,
+cell:selected,
+*:selected {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Alpha .Theme.Colors.Semantic.Background 0.3 }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+}
+
+menuitem:hover {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-radius: {{ .Theme.Spacing.RadiusSmall }};
+}
+
+menuitem:disabled {
+    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    background-color: transparent;
+}

sithego/themer/adapters/gtk/components/notebook.css

@@ -0,0 +1,32 @@
+notebook {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+}
+
+notebook header {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+}
+
+notebook tab {
+    padding: {{ .Theme.Spacing.PaddingLarge }};
+    border: 1px solid transparent;
+    border-radius: {{ .Theme.Spacing.Radius }} {{ .Theme.Spacing.Radius }} 0 0;
+    transition: all 0.2s ease;
+}
+
+notebook tab:hover {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+}
+
+notebook tab:checked {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Border.Value }};
+    border-bottom-color: transparent;
+    border-bottom: 2px solid {{ .Theme.Colors.Semantic.Accent.Value }};
+    box-shadow: inset 0 -2px 0 {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+notebook tab label {
+    font-weight: bold;
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+}

sithego/themer/adapters/gtk/components/scrollbars.css

@@ -0,0 +1,24 @@
+scrollbar {
+    background-color: transparent;
+}
+
+scrollbar trough {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+}
+
+scrollbar slider {
+    background-color: {{ .Theme.Colors.Semantic.Border.Value }};
+    border: 2px solid transparent;
+    border-radius: {{ .Theme.Spacing.RadiusLarge }};
+    min-width: 8px;
+    min-height: 8px;
+}
+
+scrollbar slider:hover {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+scrollbar button {
+    display: none;
+}

sithego/themer/adapters/gtk/components/widgets.css

@@ -0,0 +1,77 @@
+/* Selection */
+selection,
+row:selected,
+iconview:selected,
+treeview.view:selected,
+.view:selected,
+iconview.view:selected,
+cell:selected,
+*:selected {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Alpha .Theme.Colors.Semantic.Background 0.3 }};
+    color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+}
+
+/* Sliders (Scales) */
+scale trough {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+    min-height: 4px;
+}
+
+scale highlight {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+}
+
+scale slider {
+    background-color: {{ .Theme.Colors.Semantic.Surface.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: 50%;
+    min-height: 16px;
+    min-width: 16px;
+    margin: -6px 0;
+}
+
+scale slider:hover {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+/* Switches */
+switch {
+    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: {{ .Theme.Spacing.Radius }};
+    color: transparent;
+}
+
+switch:checked {
+    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
+}
+
+switch slider {
+    background-color: {{ .Theme.Colors.Semantic.Text.Value }};
+    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
+    border-radius: 50%;
+    margin: {{ .Theme.Spacing.MarginSmall }};
+    min-width: 18px;
+    min-height: 18px;
+}
+
+scale:disabled trough,
+scale:disabled highlight,
+scale:disabled slider,
+switch:disabled {
+    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+}
+
+switch:disabled slider {
+    background-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
+}

sithego/themer/adapters/gtk/gtk.go

@@ -0,0 +1,93 @@
+package gtk
+
+import (
+	"Sithego/themer"
+	"os"
+	"path/filepath"
+	"text/template"
+)
+
+type Adapter struct {
+	OutputDir string
+}
+
+type Option func(*Adapter)
+
+func WithOutputDir(dir string) Option {
+	return func(a *Adapter) {
+		a.OutputDir = dir
+	}
+}
+
+func New(opt ...Option) *Adapter {
+	home, _ := os.UserHomeDir()
+	a := &Adapter{
+		OutputDir: home + "/.themes/",
+	}
+	for _, o := range opt {
+		o(a)
+	}
+	return a
+}
+
+func (a *Adapter) Name() string {
+	return "GTK"
+}
+
+func (a *Adapter) Generate(t themer.Theme) error {
+	components := []string{
+		"template.css",
+		"components/base.css",
+		"components/headerbar.css",
+		"components/buttons.css",
+		"components/entries.css",
+		"components/menus.css",
+		"components/widgets.css",
+		"components/checks.css",
+		"components/scrollbars.css",
+		"components/notebook.css",
+	}
+
+	outputDir := a.OutputDir + t.Meta.Name + "/gtk-3.0"
+	_ = os.RemoveAll(outputDir)
+	outputGTK4 := a.OutputDir + t.Meta.Name + "/gtk-4.0"
+	_ = os.RemoveAll(outputGTK4)
+
+	if err := os.MkdirAll(outputDir, 0775); err != nil {
+		return err
+	}
+
+	for _, component := range components {
+		templatePath := filepath.Join("themer/adapters/gtk", component)
+		templ, err := template.ParseFiles(templatePath)
+		if err != nil {
+			return err
+		}
+
+		outputName := filepath.Base(component)
+		if outputName == "template.css" {
+			outputName = "gtk.css"
+		}
+		outputPath := filepath.Join(outputDir, outputName)
+
+		file, err := os.Create(outputPath)
+		if err != nil {
+			return err
+		}
+
+		err = templ.Execute(file, struct {
+			Theme themer.Theme
+		}{
+			Theme: t,
+		})
+		_ = file.Close()
+		if err != nil {
+			return err
+		}
+	}
+
+	if err := os.MkdirAll(outputGTK4, 0775); err != nil {
+		return err
+	}
+	return os.CopyFS(outputGTK4, os.DirFS(outputDir))
+}

sithego/themer/adapters/gtk/index.theme

@@ -0,0 +1,11 @@
+[Desktop Entry]
+Type=X-GNOME-Metatheme
+Name=Serpensortia
+Comment=Generated Serpent Theme
+Encoding=UTF-8
+
+[X-GNOME-Metatheme]
+GtkTheme=Serpensortia
+IconTheme=Tela-circle-dark
+CursorTheme=Vimix-dark
+ButtonLayout=close,maximize:menu

sithego/themer/adapters/gtk/template.css

@@ -0,0 +1,9 @@
+@import url("base.css");
+@import url("headerbar.css");
+@import url("buttons.css");
+@import url("entries.css");
+@import url("menus.css");
+@import url("widgets.css");
+@import url("checks.css");
+@import url("scrollbars.css");
+@import url("notebook.css");