refactor(imports): replace relative imports with path aliases (#2741)

fluxer_app/src/features/theme_studio/ThemeStudio.tsx

@@ -5,6 +5,25 @@ import Accessibility from '@app/features/accessibility/state/Accessibility';
 import {SETTINGS_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
 import Theme from '@app/features/theme/state/Theme';
 import ThemeLibrary from '@app/features/theme/state/ThemeLibrary';
+import {AssetsSection} from '@app/features/theme_studio/sections/AssetsSection';
+import {LibrarySection} from '@app/features/theme_studio/sections/LibrarySection';
+import {QuickCssSection} from '@app/features/theme_studio/sections/QuickCssSection';
+import {SettingsSection} from '@app/features/theme_studio/sections/ThemeStudioSettingsSection';
+import {TokensSection} from '@app/features/theme_studio/sections/TokensSection';
+import {
+	broadcastThemeStudioMessage,
+	useThemeStudioBroadcast,
+} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import ThemeStudioState from '@app/features/theme_studio/state/ThemeStudioState';
+import styles from '@app/features/theme_studio/ThemeStudio.module.css';
+import {StudioSidebar, StudioSidebarFooterText, StudioSidebarItem} from '@app/features/theme_studio/ui/StudioSidebar';
+import {StudioToolbar} from '@app/features/theme_studio/ui/StudioToolbar';
+import {
+	getThemeStudioBaseTheme,
+	getThemeStudioFallbackDefaultVariables,
+	pinThemeStudioDefaultVariables,
+	type ThemeStudioBaseTheme,
+} from '@app/features/theme_studio/utils/ThemeStudioPinnedVariables';
 import {extractThemeVariableOverrides} from '@app/features/user/components/modals/tabs/appearance_tab/theme/ThemeUtils';
 import {ThemeTypes} from '@fluxer/constants/src/UserConstants';
 import {msg} from '@lingui/core/macro';
@@ -21,22 +40,6 @@ import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import type {ReactNode} from 'react';
 import {useCallback, useEffect, useMemo, useRef} from 'react';
-import {AssetsSection} from './sections/AssetsSection';
-import {LibrarySection} from './sections/LibrarySection';
-import {QuickCssSection} from './sections/QuickCssSection';
-import {SettingsSection} from './sections/ThemeStudioSettingsSection';
-import {TokensSection} from './sections/TokensSection';
-import {broadcastThemeStudioMessage, useThemeStudioBroadcast} from './state/ThemeStudioBroadcast';
-import ThemeStudioState from './state/ThemeStudioState';
-import styles from './ThemeStudio.module.css';
-import {StudioSidebar, StudioSidebarFooterText, StudioSidebarItem} from './ui/StudioSidebar';
-import {StudioToolbar} from './ui/StudioToolbar';
-import {
-	getThemeStudioBaseTheme,
-	getThemeStudioFallbackDefaultVariables,
-	pinThemeStudioDefaultVariables,
-	type ThemeStudioBaseTheme,
-} from './utils/ThemeStudioPinnedVariables';
 
 const LIBRARY_DESCRIPTOR = msg({
 	message: 'Library',

fluxer_app/src/features/theme_studio/ThemeStudioStandaloneApp.tsx

@@ -7,6 +7,14 @@ import {useNativePlatform} from '@app/features/app/hooks/useNativePlatform';
 import {usePlatformClasses} from '@app/features/app/hooks/usePlatformClasses';
 import {Logger} from '@app/features/platform/utils/AppLogger';
 import Theme from '@app/features/theme/state/Theme';
+import {THEME_STUDIO_DESCRIPTOR, ThemeStudio} from '@app/features/theme_studio/ThemeStudio';
+import styles from '@app/features/theme_studio/ThemeStudio.module.css';
+import {
+	getThemeStudioBaseTheme,
+	getThemeStudioFallbackDefaultVariables,
+	pinThemeStudioDefaultVariables,
+	readThemeStudioComputedDefaultVariables,
+} from '@app/features/theme_studio/utils/ThemeStudioPinnedVariables';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {Toasts} from '@app/features/ui/toast/Toasts';
 import {getElectronAPI} from '@app/features/ui/utils/NativeUtils';
@@ -19,14 +27,6 @@ import {clsx} from 'clsx';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {THEME_STUDIO_DESCRIPTOR, ThemeStudio} from './ThemeStudio';
-import styles from './ThemeStudio.module.css';
-import {
-	getThemeStudioBaseTheme,
-	getThemeStudioFallbackDefaultVariables,
-	pinThemeStudioDefaultVariables,
-	readThemeStudioComputedDefaultVariables,
-} from './utils/ThemeStudioPinnedVariables';
 
 const logger = new Logger('ThemeStudioStandaloneApp');
 const THEME_STUDIO_POPOUT_KEY = 'fluxer_theme_studio';

fluxer_app/src/features/theme_studio/commands/ThemeStudioCommands.ts

@@ -3,9 +3,9 @@
 import {Routes} from '@app/app/Routes';
 import {Logger} from '@app/features/platform/utils/AppLogger';
 import Theme from '@app/features/theme/state/Theme';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import ThemeStudioState from '@app/features/theme_studio/state/ThemeStudioState';
 import {getElectronAPI} from '@app/features/ui/utils/NativeUtils';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import ThemeStudioState from '../state/ThemeStudioState';
 
 const logger = new Logger('ThemeStudioCommands');
 const POPOUT_WINDOW_NAME = 'fluxer_theme_studio';

fluxer_app/src/features/theme_studio/sections/AssetsSection.tsx

@@ -3,6 +3,13 @@
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import ThemeLibrary from '@app/features/theme/state/ThemeLibrary';
 import {createThemeAssetReference, createThemeLocalFileReference} from '@app/features/theme/utils/ThemeCssUtils';
+import styles from '@app/features/theme_studio/sections/AssetsSection.module.css';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import {StudioButton} from '@app/features/theme_studio/ui/StudioButton';
+import {StudioEmptyState} from '@app/features/theme_studio/ui/StudioEmptyState';
+import {StudioIconButton} from '@app/features/theme_studio/ui/StudioIconButton';
+import {StudioListItem} from '@app/features/theme_studio/ui/StudioListItem';
+import {StudioPanel} from '@app/features/theme_studio/ui/StudioPanel';
 import {showThemeStudioErrorModal} from '@app/features/theme_studio/utils/ThemeStudioErrorModalUtils';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
 import {getElectronAPI, isDesktop} from '@app/features/ui/utils/NativeUtils';
@@ -13,13 +20,6 @@ import {CopyIcon, FilePlusIcon, ImageIcon, TrashIcon, UploadSimpleIcon} from '@p
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useCallback, useRef} from 'react';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import {StudioButton} from '../ui/StudioButton';
-import {StudioEmptyState} from '../ui/StudioEmptyState';
-import {StudioIconButton} from '../ui/StudioIconButton';
-import {StudioListItem} from '../ui/StudioListItem';
-import {StudioPanel} from '../ui/StudioPanel';
-import styles from './AssetsSection.module.css';
 
 const UPLOADED_OTHER_DESCRIPTOR = msg({
 	message: 'Uploaded {length, plural, one {# theme asset} other {# theme assets}}.',

fluxer_app/src/features/theme_studio/sections/LibrarySection.tsx

@@ -5,7 +5,16 @@ import {CANCEL_DESCRIPTOR, DESCRIPTION_DESCRIPTOR} from '@app/features/i18n/util
 import {createDefaultLoadableComponent} from '@app/features/platform/components/loadable/LoadableComponent';
 import ThemeLibrary from '@app/features/theme/state/ThemeLibrary';
 import {upsertThemeCssHeader} from '@app/features/theme/utils/ThemeCssUtils';
+import styles from '@app/features/theme_studio/sections/LibrarySection.module.css';
+import type {QuickCssEditorProps} from '@app/features/theme_studio/sections/QuickCssEditor';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import ThemeStudioState from '@app/features/theme_studio/state/ThemeStudioState';
+import {StudioButton} from '@app/features/theme_studio/ui/StudioButton';
+import {StudioEmptyState} from '@app/features/theme_studio/ui/StudioEmptyState';
+import {StudioSearchInput} from '@app/features/theme_studio/ui/StudioSearchInput';
+import {StudioSplit} from '@app/features/theme_studio/ui/StudioSplit';
 import {showThemeStudioErrorModal} from '@app/features/theme_studio/utils/ThemeStudioErrorModalUtils';
+import type {ThemeStudioBaseTheme} from '@app/features/theme_studio/utils/ThemeStudioPinnedVariables';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import {modal} from '@app/features/ui/commands/ModalCommands';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
@@ -34,15 +43,6 @@ import {clsx} from 'clsx';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import ThemeStudioState from '../state/ThemeStudioState';
-import {StudioButton} from '../ui/StudioButton';
-import {StudioEmptyState} from '../ui/StudioEmptyState';
-import {StudioSearchInput} from '../ui/StudioSearchInput';
-import {StudioSplit} from '../ui/StudioSplit';
-import type {ThemeStudioBaseTheme} from '../utils/ThemeStudioPinnedVariables';
-import styles from './LibrarySection.module.css';
-import type {QuickCssEditorProps} from './QuickCssEditor';
 
 const THEME_SAVED_DESCRIPTOR = msg({
 	message: 'Theme saved.',
@@ -148,7 +148,7 @@ function LibraryCssEditorLoading() {
 const LibraryCssEditor = createDefaultLoadableComponent<QuickCssEditorProps>({
 	displayName: 'LibraryCssEditor',
 	LoadingComponent: LibraryCssEditorLoading,
-	load: () => import('./QuickCssEditor'),
+	load: () => import('@app/features/theme_studio/sections/QuickCssEditor'),
 });
 
 interface LibrarySectionProps {

fluxer_app/src/features/theme_studio/sections/QuickCssEditor.tsx

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import Accessibility from '@app/features/accessibility/state/Accessibility';
+import {getTokenVariableDefinition, TOKEN_GROUPS} from '@app/features/theme_studio/sections/TokenGroups';
+import type {ThemeStudioBaseTheme} from '@app/features/theme_studio/utils/ThemeStudioPinnedVariables';
 import type {CompletionContext, CompletionResult} from '@codemirror/autocomplete';
 import {indentWithTab} from '@codemirror/commands';
 import {css, cssLanguage} from '@codemirror/lang-css';
@@ -12,8 +14,6 @@ import {basicSetup} from 'codemirror';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useEffect, useMemo, useRef} from 'react';
-import type {ThemeStudioBaseTheme} from '../utils/ThemeStudioPinnedVariables';
-import {getTokenVariableDefinition, TOKEN_GROUPS} from './TokenGroups';
 
 const themeTokenCompletions = TOKEN_GROUPS.flatMap((group) =>
 	group.variables.map((variable) => ({

fluxer_app/src/features/theme_studio/sections/QuickCssSection.tsx

@@ -6,7 +6,12 @@ import {ConfirmModal} from '@app/features/app/components/dialogs/ConfirmModal';
 import {CANCEL_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
 import {createDefaultLoadableComponent} from '@app/features/platform/components/loadable/LoadableComponent';
 import {ShareThemeModal} from '@app/features/theme/components/modals/ShareThemeModal';
+import type {QuickCssEditorProps} from '@app/features/theme_studio/sections/QuickCssEditor';
+import styles from '@app/features/theme_studio/sections/QuickCssSection.module.css';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import {StudioButton} from '@app/features/theme_studio/ui/StudioButton';
 import {showThemeStudioErrorModal} from '@app/features/theme_studio/utils/ThemeStudioErrorModalUtils';
+import type {ThemeStudioBaseTheme} from '@app/features/theme_studio/utils/ThemeStudioPinnedVariables';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import {modal} from '@app/features/ui/commands/ModalCommands';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
@@ -27,11 +32,6 @@ import {
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useCallback, useEffect, useRef, useState} from 'react';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import {StudioButton} from '../ui/StudioButton';
-import type {ThemeStudioBaseTheme} from '../utils/ThemeStudioPinnedVariables';
-import type {QuickCssEditorProps} from './QuickCssEditor';
-import styles from './QuickCssSection.module.css';
 
 const QUICK_CSS_REPLACED_FROM_DESCRIPTOR = msg({
 	message: 'Quick CSS replaced from {fileName}.',
@@ -79,7 +79,7 @@ function QuickCssEditorLoading() {
 const QuickCssEditor = createDefaultLoadableComponent<QuickCssEditorProps>({
 	displayName: 'QuickCssEditor',
 	LoadingComponent: QuickCssEditorLoading,
-	load: () => import('./QuickCssEditor'),
+	load: () => import('@app/features/theme_studio/sections/QuickCssEditor'),
 });
 
 interface QuickCssSectionProps {

fluxer_app/src/features/theme_studio/sections/ThemeStudioSettingsSection.tsx

@@ -11,6 +11,8 @@ import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import Theme from '@app/features/theme/state/Theme';
 import ThemeLibrary from '@app/features/theme/state/ThemeLibrary';
 import styles from '@app/features/theme_studio/sections/ThemeStudioSettingsSection.module.css';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import {StudioButton} from '@app/features/theme_studio/ui/StudioButton';
 import {showThemeStudioErrorModal} from '@app/features/theme_studio/utils/ThemeStudioErrorModalUtils';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import {modal} from '@app/features/ui/commands/ModalCommands';
@@ -30,8 +32,6 @@ import {ArrowCounterClockwiseIcon, ShareNetworkIcon, TrashIcon} from '@phosphor-
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useCallback, useEffect, useState} from 'react';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import {StudioButton} from '../ui/StudioButton';
 
 const SYNC_CUSTOM_CSS_DESCRIPTOR = msg({
 	message: 'Sync custom CSS?',

fluxer_app/src/features/theme_studio/sections/TokensSection.tsx

@@ -5,6 +5,20 @@ import Accessibility from '@app/features/accessibility/state/Accessibility';
 import {ShareThemeModal} from '@app/features/theme/components/modals/ShareThemeModal';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import ThemeLibrary from '@app/features/theme/state/ThemeLibrary';
+import {
+	DEFAULT_EXPANDED_GROUP_IDS,
+	getTokenVariableDefinition,
+	humanizeVariableName,
+	TOKEN_GROUPS,
+} from '@app/features/theme_studio/sections/TokenGroups';
+import styles from '@app/features/theme_studio/sections/TokensSection.module.css';
+import {broadcastThemeStudioMessage} from '@app/features/theme_studio/state/ThemeStudioBroadcast';
+import ThemeStudioState from '@app/features/theme_studio/state/ThemeStudioState';
+import {StudioButton} from '@app/features/theme_studio/ui/StudioButton';
+import {StudioEmptyState} from '@app/features/theme_studio/ui/StudioEmptyState';
+import {StudioSearchInput} from '@app/features/theme_studio/ui/StudioSearchInput';
+import {StudioSection} from '@app/features/theme_studio/ui/StudioSection';
+import {StudioTokenColor, StudioTokenFont, StudioTokenValue} from '@app/features/theme_studio/ui/StudioToken';
 import {showThemeStudioErrorModal} from '@app/features/theme_studio/utils/ThemeStudioErrorModalUtils';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import {modal} from '@app/features/ui/commands/ModalCommands';
@@ -19,20 +33,6 @@ import {ArrowCounterClockwiseIcon, ShareNetworkIcon} from '@phosphor-icons/react
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import {useEffect, useMemo} from 'react';
-import {broadcastThemeStudioMessage} from '../state/ThemeStudioBroadcast';
-import ThemeStudioState from '../state/ThemeStudioState';
-import {StudioButton} from '../ui/StudioButton';
-import {StudioEmptyState} from '../ui/StudioEmptyState';
-import {StudioSearchInput} from '../ui/StudioSearchInput';
-import {StudioSection} from '../ui/StudioSection';
-import {StudioTokenColor, StudioTokenFont, StudioTokenValue} from '../ui/StudioToken';
-import {
-	DEFAULT_EXPANDED_GROUP_IDS,
-	getTokenVariableDefinition,
-	humanizeVariableName,
-	TOKEN_GROUPS,
-} from './TokenGroups';
-import styles from './TokensSection.module.css';
 
 const TOKEN_OVERRIDES_CLEARED_DESCRIPTOR = msg({
 	message: 'Token overrides cleared.',

fluxer_app/src/features/theme_studio/ui/StudioButton.tsx

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioButton.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {clsx} from 'clsx';
 import {type ButtonHTMLAttributes, forwardRef, type ReactNode} from 'react';
-import styles from './StudioButton.module.css';
 
 type StudioButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'dangerSolid' | 'successSolid';
 

fluxer_app/src/features/theme_studio/ui/StudioDivider.tsx

@@ -1,8 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioDivider.module.css';
 import {clsx} from 'clsx';
 import type React from 'react';
-import styles from './StudioDivider.module.css';
 
 interface StudioDividerProps {
 	orientation?: 'horizontal' | 'vertical';

fluxer_app/src/features/theme_studio/ui/StudioEmptyState.tsx

@@ -1,8 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioEmptyState.module.css';
 import type React from 'react';
 import type {ReactNode} from 'react';
-import styles from './StudioEmptyState.module.css';
 
 interface StudioEmptyStateProps {
 	icon?: ReactNode;

fluxer_app/src/features/theme_studio/ui/StudioIconButton.tsx

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioIconButton.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {clsx} from 'clsx';
 import {type ButtonHTMLAttributes, forwardRef} from 'react';
-import styles from './StudioIconButton.module.css';
 
 interface StudioIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	compact?: boolean;

fluxer_app/src/features/theme_studio/ui/StudioListItem.tsx

@@ -1,10 +1,10 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioListItem.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
-import styles from './StudioListItem.module.css';
 
 interface StudioListItemProps {
 	leading?: ReactNode;

fluxer_app/src/features/theme_studio/ui/StudioPanel.tsx

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioPanel.module.css';
 import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
-import styles from './StudioPanel.module.css';
 
 interface StudioPanelProps {
 	title?: ReactNode;

fluxer_app/src/features/theme_studio/ui/StudioSearchInput.tsx

@@ -2,12 +2,12 @@
 
 import {CLEAR_SEARCH_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
+import styles from '@app/features/theme_studio/ui/StudioSearchInput.module.css';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
 import {MagnifyingGlassIcon, XCircleIcon} from '@phosphor-icons/react';
 import {clsx} from 'clsx';
 import {forwardRef, type InputHTMLAttributes, useImperativeHandle, useRef} from 'react';
-import styles from './StudioSearchInput.module.css';
 
 const SEARCH_DESCRIPTOR = msg({
 	message: 'Search…',

fluxer_app/src/features/theme_studio/ui/StudioSection.tsx

@@ -1,13 +1,13 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
+import styles from '@app/features/theme_studio/ui/StudioSection.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {CaretRightIcon} from '@phosphor-icons/react';
 import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
 import {useCallback, useId} from 'react';
-import styles from './StudioSection.module.css';
 
 interface StudioSectionProps {
 	title: ReactNode;

fluxer_app/src/features/theme_studio/ui/StudioSidebar.tsx

@@ -1,10 +1,10 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioSidebar.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
-import styles from './StudioSidebar.module.css';
 
 interface StudioSidebarProps {
 	ariaLabel: string;

fluxer_app/src/features/theme_studio/ui/StudioSplit.tsx

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import AppStorage from '@app/features/platform/state/PersistentStorage';
+import styles from '@app/features/theme_studio/ui/StudioSplit.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
@@ -8,7 +9,6 @@ import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
 import {useCallback, useEffect, useRef, useState} from 'react';
-import styles from './StudioSplit.module.css';
 
 const RESIZE_PANELS_DESCRIPTOR = msg({
 	message: 'Resize panels',

fluxer_app/src/features/theme_studio/ui/StudioToken.tsx

@@ -2,6 +2,7 @@
 
 import {ColorPickerPopover} from '@app/features/app/components/floating/ColorPickerPopover';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
+import styles from '@app/features/theme_studio/ui/StudioToken.module.css';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import type {ThemeVariableKind} from '@app/features/user/components/modals/tabs/appearance_tab/theme/ThemeConstants';
 import {
@@ -15,7 +16,6 @@ import {clsx} from 'clsx';
 import type React from 'react';
 import {useCallback, useEffect, useState} from 'react';
 import {Button as AriaButton, Dialog, DialogTrigger, Popover} from 'react-aria-components';
-import styles from './StudioToken.module.css';
 
 const EDIT_COLOR_FOR_DESCRIPTOR = msg({
 	message: 'Edit color for {tokenLabel}',

fluxer_app/src/features/theme_studio/ui/StudioToolbar.tsx

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import styles from '@app/features/theme_studio/ui/StudioToolbar.module.css';
 import {clsx} from 'clsx';
 import type React from 'react';
 import type {ReactNode} from 'react';
-import styles from './StudioToolbar.module.css';
 
 interface StudioToolbarProps {
 	leading?: ReactNode;