Add high contrast theme

Makefile

@@ -118,17 +118,19 @@ endif
 TSC := $(DIST_DIR)/extension.js
 
 # CSS
-$(DIST_DIR)/css/stylesheet-%.css: resources/css/%.scss resources/css/_*.scss | $(DIST_DIR)
+$(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/_main.scss resources/css/_*.scss scripts/template/postcss.config.cjs | $(DIST_DIR)
+$(DIST_DIR)/css/template-%.css: resources/css/template.scss resources/css/_*.scss resources/css/widgets/_*.scss scripts/template/postcss.config.cjs | $(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/template-dark.css $(DIST_DIR)/css/template-light.css
+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
 
 # Schemas
 SCHEMAS := $(patsubst resources/schemas/%.gschema.xml,$(DIST_DIR)/schemas/%.gschema.xml,$(wildcard resources/schemas/*.gschema.xml))

resources/css/_widgets.scss

@@ -0,0 +1,9 @@
+@import 'widgets/_indicator.scss';
+@import 'widgets/_dialog.scss';
+@import 'widgets/_search-entry.scss';
+@import 'widgets/_clipboard-item.scss';
+@import 'widgets/_content-preview.scss';
+@import 'widgets/_content-info.scss';
+@import 'widgets/_popupmenu.scss';
+@import 'widgets/_edit-dialog.scss';
+@import 'widgets/_qr-dialog.scss';

resources/css/dark.scss

@@ -1,4 +1,9 @@
 $variant: 'dark';
 $contrast: 'normal';
 
-@import '_main';
+@import '_colors';
+@import '_drawing';
+@import '_common';
+
+@import '_copyous-colors';
+@import '_widgets';

resources/css/high-contrast.scss

@@ -0,0 +1,9 @@
+$variant: 'dark';
+$contrast: 'high';
+
+@import '_high-contrast-colors';
+@import '_drawing';
+@import '_common';
+
+@import '_copyous-colors';
+@import '_widgets';

resources/css/light.scss

@@ -1,4 +1,9 @@
 $variant: 'light';
 $contrast: 'normal';
 
-@import '_main';
+@import '_colors';
+@import '_drawing';
+@import '_common';
+
+@import '_copyous-colors';
+@import '_widgets';

resources/css/template.scss

@@ -0,0 +1,6 @@
+@import '_colors';
+@import '_drawing';
+@import '_common';
+
+@import '_copyous-colors';
+@import '_widgets';

resources/css/_clipboard-item.scss → resources/css/widgets/_clipboard-item.scss

@@ -289,6 +289,7 @@
 				margin: 0;
 				border: none;
 				border-radius: $base_border_radius * 2 - 1px;
+				box-shadow: none;
 
 				.image-box,
 				.color-box {

resources/css/_content-preview.scss → resources/css/widgets/_content-preview.scss

@@ -13,6 +13,11 @@
 			border: none;
 		}
 
+		@if $contrast == 'high' {
+			color: $fg_color;
+			@include draw_hc_inset();
+		}
+
 		&:first-child {
 			margin-top: $base_padding * 0.5;
 		}
@@ -28,6 +33,11 @@
 			padding: 0;
 			border-radius: $base_border_radius + 2px;
 
+			@if ($contrast == 'high') {
+				border-radius: $base_border_radius + 1px;
+				padding: 1px;
+			}
+
 			.image-box {
 				border-radius: $base_border_radius;
 				background-size: cover;
@@ -53,6 +63,10 @@
 					border-top: 1px solid if($variant == 'light', $card_shadow_border_color, rgba(255, 255, 255, 0.11));
 					font-style: italic;
 
+					@if ($contrast == 'high') {
+						border-color: $hc_inset_color;
+					}
+
 					&:first-child {
 						border-top: none;
 						padding-top: $base_padding * 0.5 + 1px;
@@ -68,6 +82,10 @@
 				height: 1px;
 				border-top: 1px solid if($variant == 'light', $card_shadow_border_color, rgba(255, 255, 255, 0.11));
 				border-bottom: 1px solid if($variant == 'light', $card_shadow_border_color, rgba(255, 255, 255, 0.11));
+
+				@if ($contrast == 'high') {
+					border-color: $hc_inset_color;
+				}
 			}
 
 			.more-files.more-files {
@@ -80,6 +98,11 @@
 			padding: 0;
 			border-radius: $base_border_radius + 2px;
 
+			@if ($contrast == 'high') {
+				border-radius: $base_border_radius + 1px;
+				padding: 1px;
+			}
+
 			.color-box {
 				border-radius: $base_border_radius;
 

resources/css/_edit-dialog.scss → resources/css/widgets/_edit-dialog.scss

@@ -3,7 +3,6 @@
 	width: 35em;
 
 	.clipboard-item-edit-dialog-entry {
-		@extend %entry;
 		height: 16em;
 
 		&.monospace {
@@ -14,22 +13,18 @@
 		.multiline-scrollview {
 			.multiline-box {
 				padding-right: $base_padding;
-
-				StEntry {
-					@extend %reset;
-				}
 			}
 		}
 	}
 
-	.language-button {
-		@extend %dialog_button;
+	.modal-dialog-top-button-box {
+		padding: 0;
 	}
 }
 
 // Language button popupmenu
 .scrollable-popup-menu-section {
-	max-height: 500px;
+	max-height: 350px;
 
 	.popup-menu-section {
 		margin-right: $base_padding + 7px;

resources/css/widgets/_indicator.scss

@@ -0,0 +1,12 @@
+.copyous-indicator-box {
+	spacing: 6px;
+
+	.system-status-icon {
+		padding: 0;
+		margin: 0;
+	}
+
+	.indicator-label {
+		max-width: 10em;
+	}
+}

resources/css/_popupmenu.scss → resources/css/widgets/_popupmenu.scss

@@ -1,5 +1,10 @@
+$menu_bg_color: $bg_color;
+
+$menuitem_bg_color: if($variant == 'light', darken($menu_bg_color, 5%), lighten($menu_bg_color, 5%));
 $menuitem_border_radius: $base_border_radius * 1.5;
 
+$submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten($menu_bg_color, 13%));
+
 // prettier-ignore
 @mixin tag_button($color) {
 	.tag {
@@ -13,6 +18,60 @@ $menuitem_border_radius: $base_border_radius * 1.5;
 
 .clipboard-item-menu,
 .search-popup-menu {
+	// Match color with color scheme
+	color: $fg_color;
+
+	.popup-menu-content {
+		background-color: $bg_color;
+		border: 1px solid $outer_borders_color;
+		box-shadow: 0 2px 4px 0 $shadow_color;
+	}
+
+	.popup-menu-item {
+		@include menuitem($bg: $menuitem_bg_color);
+
+		&:checked {
+			@if $contrast == 'high' {
+				border: 1px solid $hc_inset_color;
+			}
+		}
+	}
+
+	.popup-inactive-menu-item {
+		color: $fg_color;
+		&:insensitive {
+			color: $insensitive_fg_color;
+		}
+	}
+
+	.popup-sub-menu {
+		background-color: $submenu_bg_color;
+
+		@if $contrast == 'high' {
+			border-color: $hc_inset_color;
+		}
+
+		.popup-menu-item {
+			@include menuitem($bg: $submenu_bg_color);
+		}
+	}
+
+	.popup-separator-menu-item {
+		.popup-separator-menu-item-separator {
+			background-color: $borders_color;
+		}
+
+		// separators in submenus
+		.popup-sub-menu & {
+			background-color: transparent;
+
+			.popup-separator-menu-item-separator {
+				background-color: $borders_color;
+			}
+		}
+	}
+
+	// Tags item
 	.tags-item {
 		padding: 0;
 		spacing: 0;

resources/css/_search-entry.scss → resources/css/widgets/_search-entry.scss

@@ -36,6 +36,11 @@ $search_bg_color: $card_bg_color;
 		border-radius: $forced_circular_radius;
 		box-shadow: 0 1px 2px 0 $card_shadow_color;
 
+		@if ($contrast == 'high') {
+			border: none;
+			@include draw_hc_inset();
+		}
+
 		StLabel {
 			padding: 0;
 		}

resources/schemas/org.gnome.shell.extensions.copyous.gschema.xml

@@ -38,7 +38,8 @@
 		<value nick="system" value="0"/>
 		<value nick="dark" value="1"/>
 		<value nick="light" value="2"/>
-		<value nick="custom" value="3"/>
+		<value nick="high-contrast" value="3"/>
+		<value nick="custom" value="4"/>
 	</enum>
 
 	<enum id="org.gnome.shell.extensions.copyous.ColorScheme">

resources/theme.gresource.xml

@@ -4,6 +4,7 @@
 	<gresource prefix="/org/gnome/shell/extensions/copyous">
 		<file>css/stylesheet-dark.css</file>
 		<file>css/stylesheet-light.css</file>
+		<file>css/stylesheet-high-contrast.css</file>
 		<file>css/template-dark.css</file>
 		<file>css/template-light.css</file>
 	</gresource>

src/lib/misc/theme.ts

@@ -15,14 +15,16 @@ export const Theme = {
 	System: 0,
 	Dark: 1,
 	Light: 2,
-	Custom: 3,
+	HighContrast: 3,
+	Custom: 4,
 } as const;
 
 export type Theme = (typeof Theme)[keyof typeof Theme];
 
 export const ColorScheme = {
 	Dark: 0,
 	Light: 1,
+	HighContrast: 2,
 } as const;
 
 export type ColorScheme = (typeof ColorScheme)[keyof typeof ColorScheme];
@@ -36,6 +38,7 @@ export class ThemeManager extends GObject.Object {
 	private readonly _resource: Gio.Resource;
 	private readonly _themeSettings: Gio.Settings;
 	private readonly _settings: St.Settings;
+	private readonly _contrastChangedId: number;
 	private readonly _colorSchemeChangedId: number;
 
 	private _stylesheet: Gio.File | null = null;
@@ -51,12 +54,14 @@ export class ThemeManager extends GObject.Object {
 		this._themeSettings.connectObject('changed', this.updateTheme.bind(this), this);
 
 		this._settings = St.Settings.get();
+
+		this._contrastChangedId = this._settings.connect('notify::high-contrast', this.updateTheme.bind(this));
 		this._colorSchemeChangedId = this._settings.connect('notify::color-scheme', this.updateTheme.bind(this));
 
 		this.updateTheme().catch(() => {});
 	}
 
-	get theme(): St.Theme {
+	private get theme(): St.Theme {
 		return St.ThemeContext.get_for_stage(global.stage).get_theme();
 	}
 
@@ -76,6 +81,7 @@ export class ThemeManager extends GObject.Object {
 		this._stylesheet = null;
 		Gio.resources_unregister(this._resource);
 		this._themeSettings.disconnectObject(this);
+		this._settings.disconnect(this._contrastChangedId);
 		this._settings.disconnect(this._colorSchemeChangedId);
 	}
 
@@ -85,17 +91,23 @@ export class ThemeManager extends GObject.Object {
 		this.colorScheme = (() => {
 			switch (theme) {
 				case Theme.System:
-					return Main.getStyleVariant() === 'light' ? ColorScheme.Light : ColorScheme.Dark;
+					return this._settings.high_contrast
+						? ColorScheme.HighContrast
+						: Main.getStyleVariant() === 'light'
+							? ColorScheme.Light
+							: ColorScheme.Dark;
 				case Theme.Dark:
 					return ColorScheme.Dark;
 				case Theme.Light:
 					return ColorScheme.Light;
+				case Theme.HighContrast:
+					return ColorScheme.HighContrast;
 				case Theme.Custom:
 					return this._themeSettings.get_enum('custom-color-scheme') as ColorScheme;
 			}
 		})();
 
-		const colorScheme = this.colorScheme === ColorScheme.Dark ? 'dark' : 'light';
+		const colorScheme = (['dark', 'light', 'high-contrast'] as const)[this.colorScheme];
 
 		// Custom Theme
 		if (theme === Theme.Custom) {