feat: introduce surface variables, text variables & shades (#4413)

* feat: surface variables & gradients

* feat: text vars

* fix: lint

* chore: remove L from surface vars

* fix: fully remove L from surface vars

---------

Co-authored-by: --global <--global>

packages/ui/src/components/settings/ThemeSelector.vue

@@ -4,7 +4,7 @@ import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 
-defineProps<{
+const { updateColorTheme, currentTheme, themeOptions, systemThemeColor } = defineProps<{
 	updateColorTheme: (theme: T) => void
 	currentTheme: T
 	themeOptions: readonly T[]
@@ -53,6 +53,11 @@ const colorTheme = defineMessages({
 function asString(theme: T): string {
 	return theme
 }
+
+function getPreviewClass(option: T): string {
+	const base = option === 'system' ? systemThemeColor : option
+	return base.endsWith('-mode') ? base : `${base}-mode`
+}
 </script>
 
 <template>
@@ -64,7 +69,7 @@ function asString(theme: T): string {
 			:class="{ selected: currentTheme === option }"
 			@click="() => updateColorTheme(option)"
 		>
-			<div class="preview" :class="`${option === 'system' ? systemThemeColor : option}-mode`">
+			<div class="preview" :class="getPreviewClass(option)">
 				<div class="example-card card card">
 					<div class="example-icon"></div>
 					<div class="example-text-1"></div>
@@ -96,6 +101,24 @@ function asString(theme: T): string {
 	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 	gap: var(--gap-lg);
 
+	.preview {
+		&.light-mode {
+			@extend .light-mode;
+		}
+
+		&.dark-mode {
+			@extend .dark-mode;
+		}
+
+		&.oled-mode {
+			@extend .oled-mode;
+		}
+
+		&.retro-mode {
+			@extend .retro-mode;
+		}
+	}
+
 	.preview .example-card {
 		margin: 0;
 		padding: 1rem;