feat: Initial clean release of CHM

packages/app-desktop/gui/ConfigScreen/styles/index.scss

@@ -0,0 +1,5 @@
+@use "./setting-description.scss";
+@use "./setting-label.scss";
+@use "./setting-header.scss";
+@use "./setting-tab-panel.scss";
+@use "./setting-select-control.scss";

packages/app-desktop/gui/ConfigScreen/styles/setting-description.scss

@@ -0,0 +1,14 @@
+
+.setting-description {
+	color: var(--joplin-color-faded);
+	font-size: var(--joplin-font-size);
+	line-height: var(--joplin-line-height);
+	font-style: italic;
+	max-width: 70em;
+	margin-top: 5px;
+
+	&.-empty {
+		margin: 0;
+		padding: 0;
+	}
+}

packages/app-desktop/gui/ConfigScreen/styles/setting-header.scss

@@ -0,0 +1,9 @@
+
+.setting-header {
+	display: block;
+	color: var(--joplin-color);
+	font-size: calc(var(--joplin-font-size) * 1.25);
+	font-weight: 500;
+	margin-bottom: var(--joplin-main-padding);
+	line-height: var(--joplin-line-height);
+}

packages/app-desktop/gui/ConfigScreen/styles/setting-label.scss

@@ -0,0 +1,20 @@
+
+.setting-label {
+	display: block;
+	color: var(--joplin-color);
+	font-size: calc(var(--joplin-font-size) * 1.083333);
+	font-weight: 500;
+	margin-bottom: calc(var(--joplin-main-padding) / 2);
+	line-height: var(--joplin-line-height);
+
+	&.-sub-label {
+		opacity: 0.7;
+	}
+
+	&.-for-checkbox {
+		margin-left: 5px;
+		margin-bottom: 0;
+		display: inline;
+		background-color: transparent;
+	}
+}

packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss

@@ -0,0 +1,20 @@
+
+.setting-select-control {
+	display: inline-block;
+	color: var(--joplin-color);
+	font-family: var(--joplin-font-family);
+	background-color: var(--joplin-background-color);
+
+	padding-left: 6px;
+	padding-right: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	border-radius: 3px;
+
+	border-color: var(--joplin-border-color4);
+
+	&:focus-visible {
+		border-color: var(--joplin-focus-outline-color);
+		outline: none;
+	}
+}

packages/app-desktop/gui/ConfigScreen/styles/setting-tab-panel.scss

@@ -0,0 +1,18 @@
+
+.setting-tab-panel {
+	display: flex;
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-height: 0;
+
+	&.-hidden {
+		display: none;
+	}
+
+	&:focus-visible {
+		// Use a border rather than an outline -- an outline would be shown outside of the screen
+		// and thus invisible.
+		border: 1px solid var(--joplin-focus-outline-color);
+		outline: none;
+	}
+}