Use new theme vars (#63)

This PR swaps the theme to use the new stuff from the Theme Studio

src-web/components/Settings/Settings.tsx

@@ -32,7 +32,7 @@ export const Settings = () => {
         data-tauri-drag-region
         ignoreStoplights
         size="md"
-        className="x-theme-appHeader bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
+        className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
       >
         <HStack
           space={2}

src-web/components/Settings/SettingsAppearance.tsx

@@ -159,11 +159,11 @@ export function SettingsAppearance() {
 
       <VStack
         space={3}
-        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
+        className="mt-3 w-full bg-surface p-3 border border-dashed border-border-subtle rounded overflow-x-auto"
       >
-        <HStack className="text-fg font-bold" space={2}>
+        <HStack className="text font-bold" space={2}>
           Theme Preview{' '}
-          <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-fg-subtle" />
+          <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} className="text-text-subtle" />
         </HStack>
         <HStack space={1.5} className="w-full">
           {buttonColors.map((c, i) => (
@@ -173,7 +173,7 @@ export function SettingsAppearance() {
               size="2xs"
               iconSize="xs"
               icon={icons[i % icons.length]!}
-              iconClassName="text-fg"
+              iconClassName="text"
               title={`${c}`}
             />
           ))}
@@ -185,7 +185,7 @@ export function SettingsAppearance() {
               size="2xs"
               iconSize="xs"
               icon={icons[i % icons.length]!}
-              iconClassName="text-fg"
+              iconClassName="text"
               title={`${c}`}
             />
           ))}

src-web/components/Settings/SettingsGeneral.tsx

@@ -81,7 +81,7 @@ export function SettingsGeneral() {
 
       <Heading size={2}>
         Workspace{' '}
-        <div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 rounded text-fg text-shrink">
+        <div className="inline-block ml-1 bg-surface-highlight px-2 py-0.5 rounded text text-shrink">
           {workspace.name}
         </div>
       </Heading>