fix: color schemes

messages/en.json

@@ -1,6 +1,8 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"about": "About",
+	"accentColor": "Accent color",
+	"accentColorHint": "Change the color of the accent (default: purple)",
 	"alternativeUseHeading": "Alternativ use",
 	"alternativeUseIngress": "{method} can also be used from",
 	"amount": "Amount",

src/lib/components/pages/ListFormat.svelte

@@ -51,7 +51,7 @@
 	</div>
 	<CodeBlock slot="alternativeCode"
 		><Token v="[" />{#each list.split(",") as item, i}<Token
-				v={item}
+				v={`"${item}"`}
 				t="string"
 			/>{#if Object.keys(list.split(",")).length > 1 && i < Object.keys(list.split(",")).length - 1}<Token
 					noTrim

src/lib/components/ui/BrowserSupport/SupportLabel.svelte

@@ -19,13 +19,13 @@
 
 <style>
 	.full {
-		color: var(--darkgreen);
+		color: var(--green-1);
 	}
 	.partial {
-		color: var(--yellow);
+		color: var(--yellow-1);
 	}
 	.none {
-		color: var(--darkred);
+		color: var(--red-1);
 	}
 	.missing {
 		color: var(--gray);

src/lib/components/ui/Button.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type {
 		AriaAttributes,
-		Booleanish,
 		HTMLButtonAttributes,
 		KeyboardEventHandler,
 		MouseEventHandler
@@ -60,12 +59,12 @@
 
 <style>
 	.button {
-		background-color: var(--button-background-color);
-		border: 1px solid var(--button-border-color);
+		background-color: var(--background-secondary-color);
+		border: 1px solid var(--border-color);
 		border-radius: 4px;
 		padding: var(--spacing-2) var(--spacing-3);
 		cursor: pointer;
-		color: var(--button-text-color);
+		color: var(--text-color);
 		text-align: center;
 		display: inline-flex;
 		justify-content: center;
@@ -81,17 +80,13 @@
 	.no-background {
 		background-color: transparent;
 		border-color: transparent;
-		color: var(--button-no-background-text-color);
+		color: var(--text-color);
 	}
 	.button:disabled {
-		color: rgb(118, 118, 118);
+		color: var(--disabled-color);
 		cursor: not-allowed;
 	}
-	.button.no-background:not(:disabled):hover {
-		background-color: transparent;
-		border-color: var(--button-background-hover-color);
-	}
 	.button:not(:disabled):hover {
-		background-color: var(--button-background-hover-color);
+		filter: brightness(90%);
 	}
 </style>

src/lib/components/ui/Card.svelte

@@ -5,8 +5,8 @@
 <style>
 	.card {
 		padding: var(--spacing-4);
-		border: 1px solid var(--border-color);
 		border-radius: 4px;
-		background-color: var(--card-color);
+		background-color: var(--background-secondary-color);
+		border: 1px solid var(--border-color);
 	}
 </style>

src/lib/components/ui/Checkbox.svelte

@@ -22,6 +22,6 @@
 		width: var(--spacing-4);
 		height: var(--spacing-4);
 		color: var(--text-color);
-		accent-color: var(--purple4);
+		accent-color: var(--accent-2);
 	}
 </style>

src/lib/components/ui/Chip.svelte

@@ -30,7 +30,8 @@
 		display: inline-flex;
 		align-items: center;
 		gap: var(--spacing-1);
-		background-color: var(--button-background-color);
+		background-color: var(--background-color);
+		border: 1px solid var(--border-color);
 	}
 	.delete {
 		border: none;
@@ -44,6 +45,6 @@
 		color: var(--text-color);
 	}
 	.delete:hover {
-		background-color: var(--button-background-hover-color);
+		filter: brightness(80%);
 	}
 </style>

src/lib/components/ui/CodeBlock.svelte

@@ -10,7 +10,7 @@
 		tab-size: 2;
 		display: block;
 		padding: var(--spacing-4);
-		background-color: var(--code-block-background);
+		background-color: var(--code-background-color);
 		font-size: 0.85rem;
 		border-radius: 4px;
 		overflow-x: auto;

src/lib/components/ui/ComboBox.svelte

@@ -22,6 +22,7 @@
 	export let options: Option[];
 	export let labelText: string;
 	export let placeholder: string;
+	export let defaultValue: Option[] | undefined = undefined;
 	export let onSelect: (values?: Option[]) => void;
 	export let onDelete: (value: string) => void;
 
@@ -33,6 +34,7 @@
 		forceVisible: true,
 		multiple: true,
 		closeOnEscape: true,
+		defaultSelected: defaultValue?.map(v => ({ value: v })),
 		closeOnOutsideClick: true,
 		onSelectedChange: (args) => {
 			onSelect(args.next?.map((v) => v.value) as Option[] | undefined);
@@ -167,7 +169,7 @@
 	}
 
 	[data-highlighted] {
-		background-color: var(--button-background-color);
+		background-color: var(--accent-2);
 		border-radius: 2px;
 	}
 

src/lib/components/ui/Highlight/Token.svelte

@@ -19,37 +19,38 @@
 		white-space: nowrap;
 	}
 	.token.comment {
-		color: var(--comment);
+		color: var(--code-comment);
 	}
 
 	.token.punctuation {
-		color: var(--punctuation);
+		color: var(--code-punctuation);
 	}
 
 	.token.operator {
-		color: var(--operator);
+		color: var(--code-operator);
 	}
 
 	.token.key {
-		color: var(--key);
+		color: var(--code-key);
 	}
 
 	.token.function {
-		color: var(--function);
+		color: var(--code-function);
 	}
 
 	.token.boolean {
-		color: var(--boolean);
+		color: var(--code-boolean);
 	}
 
 	.token.number {
-		color: var(--number);
+		color: var(--code-number);
 	}
 
 	.token.string {
-		color: var(--string);
+		color: var(--code-string);
 	}
 	.token.class {
-		color: var(--class);
+		color: var(--code-class);
 	}
+	
 </style>

src/lib/components/ui/LocalePicker.svelte

@@ -25,6 +25,7 @@
 <ComboBox
 	labelText={m.locale()}
 	placeholder={m.localePlaceHolder()}
+	defaultValue={$locales.map(v => ({ value: v, label: v }))}
 	{onSelect}
 	{onDelete}
 	options={languageByLocaleAsComboBoxOptions}

src/lib/components/ui/Navigation.svelte

@@ -174,7 +174,7 @@
 		z-index: 1;
 		overflow-x: hidden;
 		transition: transform 0.3s;
-		box-shadow: 4px 4px 8px 2px hsla(276, 100%, 20%, 0.1);
+		box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.1);
 		border-top-right-radius: 4px;
 		border-bottom-right-radius: 4px;
 	}

src/lib/components/ui/Radio.svelte

@@ -14,12 +14,6 @@
 </label>
 
 <style>
-	:root {
-		--radio-border-color: var(--border-color);
-		--radio-checked-color: var(--radio-checked-color);
-		--radio-hover-color: var(--lightergray);
-		--radio-disabled-bg-color: var(--lightergray);
-	}
 
 	label {
 		cursor: pointer;
@@ -33,51 +27,51 @@
 		height: 20px;
 		margin: 6px;
 		padding: 0;
-		border: 2px solid var(--radio-border-color);
+		border: 2px solid var(--border-color);
 		border-radius: 50%;
 		appearance: none;
 		background-color: transparent;
 		outline: none;
 		transition: outline 0.1s;
 	}
 	input[type="radio"]:not(:disabled):checked {
-		border-color: var(--radio-checked-color);
-		background-color: var(--radio-checked-color);
+		border-color: var(--accent-3);
+		background-color: var(--accent-2);
 		background-clip: content-box;
 		padding: 2px;
 		background-image: radial-gradient(
 			circle,
-			var(--radio-checked-color) 0%,
-			var(--radio-checked-color) 50%,
+			var(--accent-2) 0%,
+			var(--accent-2) 50%,
 			transparent 60%,
 			transparent 100%
 		);
 	}
 
 	input[type="radio"]:disabled {
-		background-color: var(--radio-disabled-bg-color);
+		background-color: var(--disabled-color);
 	}
 
 	input[type="radio"]:disabled:checked {
 		background-image: radial-gradient(
 			circle,
-			var(--radio-border-color) 0%,
-			var(--radio-border-color) 50%,
+			var(--border-color) 0%,
+			var(--border-color) 50%,
 			transparent 50%,
 			transparent 100%
 		);
 	}
 
 	@media (hover: hover) {
 		input[type="radio"]:not(:disabled):hover {
-			background-color: var(--radio-hover-color);
-			outline: 2px solid var(--highlight);
+			background-color: var(--accent-2);
+			outline: 2px solid var(--focus-color);
 		}
 	}
 
 	input[type="radio"]:focus-visible {
-		background-color: var(--radio-hover-color);
-		outline: 2px solid var(--highlight);
+		background-color: var(--accent-2);
+		outline: 2px solid  var(--focus-color);
 	}
 	@media (prefers-reduced-motion: reduce) {
 		input[type="radio"] {

src/lib/components/ui/SettingsDialog.svelte

@@ -23,6 +23,7 @@
 	import { locales } from "$store/locales";
 	import { formatLocaleForUrl } from "$utils/format-utils";
 	import { getMessages } from "$i18n/util";
+	import Slider from "./Slider.svelte";
 
 	export let show: boolean;
 
@@ -40,20 +41,27 @@
 		}));
 	};
 
+	const onValueChange = (value: number[]) => {
+		settings.update((s) => ({
+			...s,
+			accentColor: value[0].toString(),
+		}))
+	};
+
 	const getHint = (key: keyof Settings) => {
 		const hintKey = settingsConfiguration[key].hint;
 		if (!hintKey) return "";
 		return m[hintKey]();
 	};
 
-	const getLabel = (value: boolean | DarkMode) => {
+	const getLabel = (value: boolean | string | DarkMode) => {
 		if (typeof value === "boolean") {
 			return "";
 		}
-		return m[value]();
+		return m[value as DarkMode]();
 	};
 
-	export const getValue = (value: boolean | DarkMode) => {
+	export const getValue = (value: boolean | string | DarkMode) => {
 		if (typeof value === "boolean") {
 			return "";
 		}
@@ -68,6 +76,11 @@
 		}
 	};
 
+	const getDefaultValueForSlider = (key: keyof Settings) => {
+		if($settings[key]) return $settings[key] as unknown as number;
+		return settingsConfiguration[key].values[0] as unknown as number;
+	}
+
 	const formatLanguages = () => {
 		return availableLanguageTags.map((tag) => [tag, formatTag(tag)]);
 	};
@@ -100,6 +113,9 @@
 						name={key}
 					/>
 				{/if}
+				{#if settingsConfiguration[key].type === "color"}
+					<Slider min={0} max={360} defaultValue={getDefaultValueForSlider(key)} step={5} {onValueChange} />
+				{/if}
 				{#if settingsConfiguration[key].hint}
 					<Spacing size={2} />
 					<p>{getHint(key)}</p>