Add yaru theme

Makefile

@@ -118,19 +118,29 @@ endif
 TSC := $(DIST_DIR)/extension.js
 
 # CSS
-$(DIST_DIR)/css/stylesheet-%.css: resources/css/%.scss resources/css/_*.scss resources/css/widgets/_*.scss | $(DIST_DIR)
-	@mkdir -p $(DIST_DIR)/css
-	pnpm exec sass --no-source-map --load-path=resources/css/gnome-shell-sass --quiet-deps $<:$@
-	sed -i -re ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' $@ # Remove multiline comments
-	sed -i -e '/stage {/,/}/d' -e '/^$$/d' $@
-
-$(DIST_DIR)/css/template-%.css: resources/css/template.scss resources/css/_*.scss resources/css/widgets/_*.scss scripts/template/postcss.config.cjs | $(DIST_DIR)
+# Rule for css/stylesheet-{theme}-{type}.css
+define theme_rule
+$$(DIST_DIR)/css/stylesheet-$(1)-$(2).css: \
+		resources/css/themes/$(1)/$(2).scss resources/css/themes/$(1)/gnome-shell-sass/_*.scss \
+		resources/css/themes/default/_*.scss resources/css/themes/default/widgets/_*.scss | $$(DIST_DIR)
+	@mkdir -p $$(DIST_DIR)/css
+	pnpm exec sass --no-source-map --load-path=resources/css/themes/default --load-path=resources/css/themes/$(1)/gnome-shell-sass --quiet-deps $$<:$$@
+	sed -i -re ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' $$@ # Remove multiline comments
+	sed -i -e '/stage {/,/}/d' -e '/^$$$$/d' $$@
+endef
+
+THEME_SCSS := $(filter-out $(wildcard resources/css/themes/*/_*.scss),$(wildcard resources/css/themes/*/*.scss))
+THEME_VARIANTS := $(patsubst resources/css/themes/%.scss,%,$(THEME_SCSS))
+THEME_CSS := $(foreach pair,$(THEME_VARIANTS),$(DIST_DIR)/css/stylesheet-$(word 1,$(subst /, ,$(pair)))-$(word 2,$(subst /, ,$(pair))).css)
+$(foreach pair,$(THEME_VARIANTS),$(eval $(call theme_rule,$(word 1,$(subst /, ,$(pair))),$(word 2,$(subst /, ,$(pair))))))
+
+$(DIST_DIR)/css/template-%.css: \
+		resources/css/template.scss scripts/template/postcss.config.cjs \
+		resources/css/themes/default/_*.scss resources/css/themes/default/widgets | $(DIST_DIR)
 	@mkdir -p $(DIST_DIR)/css
 	VARIANT=$* pnpm exec postcss $< --config scripts/template | pnpm exec sass --no-source-map --stdin $@
 
-CSS := \
-	$(DIST_DIR)/css/stylesheet-dark.css $(DIST_DIR)/css/stylesheet-light.css $(DIST_DIR)/css/stylesheet-high-contrast.css \
-	$(DIST_DIR)/css/template-dark.css $(DIST_DIR)/css/template-light.css
+CSS := $(THEME_CSS) $(DIST_DIR)/css/template-dark.css $(DIST_DIR)/css/template-light.css
 
 # Schemas
 SCHEMAS := $(patsubst resources/schemas/%.gschema.xml,$(DIST_DIR)/schemas/%.gschema.xml,$(wildcard resources/schemas/*.gschema.xml))

resources/css/themes/default/gnome-shell-sass

@@ -0,0 +1 @@
+../../../../submodules/gnome-shell/data/theme/gnome-shell-sass

resources/css/themes/yaru/_patches.scss

@@ -0,0 +1,3 @@
+.clipboard-dialog {
+	border-radius: $yaru_menu_border_radius;
+}

resources/css/themes/yaru/dark.scss

@@ -0,0 +1,11 @@
+$variant: 'dark';
+$contrast: 'normal';
+
+@import '_colors';
+@import '_drawing';
+@import '_common';
+
+@import '_copyous-colors';
+@import '_widgets';
+
+@import '_patches';

resources/css/themes/yaru/gnome-shell-sass/_colors.scss

@@ -0,0 +1,87 @@
+//
+// Main color definitions
+//
+// When color definition differs for dark and light variant, it gets @if-ed depending on $variant
+
+@import '_palette.scss';
+@import '_default-colors.scss';
+@import '_yaru-default-colors.scss';
+
+// global colors
+$base_color: if($variant == 'light', $light_1, $_base_color_dark);
+$bg_color: if($variant == 'light', $_base_color_light, #36363a);
+$fg_color: if($variant == 'light', $_base_color_dark, $light_1);
+
+// Yaru, customize global colors
+$bg_color_dark: lighten($jet, 2%);
+$bg_color: if($variant=='light', #FAFAFA, $bg_color_dark);
+$fg_color_dark: $porcelain;
+$fg_color: if($variant=='light', $inkstone, $fg_color_dark);
+
+// OSD elements
+$osd_fg_color: $light_1;
+$osd_bg_color: lighten($_base_color_dark, 5%);
+
+// system elements (e.g. the overview) that are always dark
+$system_base_color: $_base_color_dark;
+$system_fg_color: $_base_color_light;
+
+// Yaru override
+$system_fg_color: darken($porcelain, 2%);
+
+// panel colors
+$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5);
+$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
+$panel_border_color: if($variant == 'light', transparentize($_base_color_dark, .9), transparent);
+
+// card elements
+$card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%));
+$card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent);
+$card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent);
+
+//
+// Derived Colors
+//
+// colors based on the global defines above
+
+// borders
+$borders_color: transparentize($fg_color, $border_opacity);
+$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
+
+// Yaru borders color
+$borders_color: if($variant=='light', darken($bg_color, 20%), $yaru_borders_color_dark);
+$outer_borders_color: transparentize($fg_color, 0.85);
+
+// osd colors
+$osd_borders_color: transparentize($osd_fg_color, 0.9);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
+
+// system colors
+$system_bg_color: lighten($system_base_color, 5%);
+$system_bg_color: $_base_color_dark; // Yaru - use our definition our definition
+$system_borders_color: transparentize($system_fg_color, .9);
+$system_insensitive_fg_color: mix($system_bg_color, $system_fg_color, 37%);
+$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
+
+// insensitive state
+$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%),  mix($fg_color, $bg_color, 50%));
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: mix($borders_color, $base_color, 60%);
+
+// checked state
+$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
+
+// hover state
+// Yaru: we want the hover bg to be a visible gray for dark and light shell themes
+$hover_bg_color: transparentize($fg_color, 0.9);
+$hover_fg_color: $fg_color;
+$hover_borders_color: lighten($borders_color, 5%);
+
+// active state
+$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
+$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
+
+// accent colors
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 20%), st-lighten(-st-accent-color, 30%));
+@import '_yaru-colors.scss';