fix: replace scss export to css in themizator (#303)

* fix: replace scss export to css * fix spaces
gravity-ui · Nov 14, 2024 · 30c83a9 · 30c83a9
1 parent ef6e02d
commit 30c83a9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 27 deletions.
diff --git a/public/locales/en/themes.json b/public/locales/en/themes.json
@@ -24,7 +24,7 @@
   "cancel": "Cancel",
   "export_theme_config": "Export theme config",
   "export_theme_cancel_btn": "Cancel",
-  "export_theme_apply_btn": "Save custom.scss",
+  "export_theme_apply_btn": "Save styles.css",
   "export_theme_apply-theme-alert-title": "How to apply the theme",
   "radius": "Radius",
   "radius_regular": "Regular",

diff --git a/public/locales/ru/themes.json b/public/locales/ru/themes.json
@@ -24,7 +24,7 @@
   "cancel": "Закрыть",
   "export_theme_config": "Экспорт конфигурации темы",
   "export_theme_cancel_btn": "Закрыть",
-  "export_theme_apply_btn": "Сохранить custom.scss",
+  "export_theme_apply_btn": "Сохранить styles.css",
   "export_theme_apply-theme-alert-title": "Как применить выбранную тему",
   "radius": "Радиус",
   "radius_regular": "Стандартный",

diff --git a/src/components/Themes/lib/themeCreatorExport.ts b/src/components/Themes/lib/themeCreatorExport.ts
@@ -17,40 +17,29 @@ const DARK_THEME_VARIABLES_TEMPLATE_NAME = '%DARK_THEME_VARIABLES%';
 const FONTS_TEMPLATE_NAME = '%IMPORT_FONTS%';
 
 const SCSS_TEMPLATE = `
-@use '@gravity-ui/uikit/styles/themes';
-
 ${FONTS_TEMPLATE_NAME}
-
-.g-root {
-    @include themes.g-theme-common;
-    
+.g-root_theme_light {
     ${COMMON_VARIABLES_TEMPLATE_NAME}
-    
-    &_theme_light {
-        @include themes.g-theme-light;
-
-        ${LIGHT_THEME_VARIABLES_TEMPLATE_NAME}
-    }
-
-    &_theme_dark {
-        @include themes.g-theme-dark;
+    ${LIGHT_THEME_VARIABLES_TEMPLATE_NAME}
+}
 
-       ${DARK_THEME_VARIABLES_TEMPLATE_NAME}
-    }
+.g-root_theme_dark {
+    ${COMMON_VARIABLES_TEMPLATE_NAME}
+    ${DARK_THEME_VARIABLES_TEMPLATE_NAME}
 }
 `.trim();
 
 export const APPLY_THEME_TEMPLATE = `
-    Create custom.scss file with the styles created in the Themer (from the section below) and import it after the default UIKit styles.
+    Create styles.css file with the styles created in the Themer (from the section below) and import it after the default UIKit styles.
     
     // Import default UIKit styles
     import '@gravity-ui/uikit/styles/styles.css';
 
     // Styles from the Themer
-    import './custom.scss';
+    import './styles.css';
 `;
 
-export type ExportFormat = 'scss' | 'json';
+export type ExportFormat = 'css' | 'json';
 
 type ExportThemeParams = {
     themeState: ThemeCreatorState;
@@ -69,7 +58,7 @@ const isBackgroundColorChanged = (themeState: ThemeCreatorState) => {
 
 export function exportTheme({
     themeState,
-    format = 'scss',
+    format = 'css',
     ignoreDefaultValues = true,
     forPreview = true,
 }: ExportThemeParams) {
@@ -178,7 +167,7 @@ export function exportTheme({
 
 type ExportThemeForDialogParams = Pick<ExportThemeParams, 'themeState' | 'format'>;
 
-export function exportThemeForDialog({themeState, format = 'scss'}: ExportThemeForDialogParams) {
+export function exportThemeForDialog({themeState, format = 'css'}: ExportThemeForDialogParams) {
     if (format === 'json') {
         return 'not implemented';
     }
@@ -190,7 +179,7 @@ export function exportThemeForDialog({themeState, format = 'scss'}: ExportThemeF
     });
 
     return SCSS_TEMPLATE.replace(FONTS_TEMPLATE_NAME, fontImports)
-        .replace(COMMON_VARIABLES_TEMPLATE_NAME, common.replaceAll('\n', '\n'.padEnd(5)))
+        .replaceAll(COMMON_VARIABLES_TEMPLATE_NAME, common.replaceAll('\n', '\n'.padEnd(5)))
         .replace(LIGHT_THEME_VARIABLES_TEMPLATE_NAME, light.replaceAll('\n', '\n'.padEnd(9)))
         .replace(DARK_THEME_VARIABLES_TEMPLATE_NAME, dark.replaceAll('\n', '\n'.padEnd(9)));
 }
diff --git a/src/components/Themes/ui/ThemeExport/ThemeExport.tsx b/src/components/Themes/ui/ThemeExport/ThemeExport.tsx
@@ -30,7 +30,7 @@ export const ThemeExport = ({isOpen, onClose}: ThemeExportProps) => {
     const breakpoint = useWindowBreakpoint();
 
     //TODO: add more formats to import
-    const [format] = useState<ExportFormat>('scss');
+    const [format] = useState<ExportFormat>('css');
 
     const themeStyles = useMemo(
         () => exportThemeForDialog({themeState, format}),
@@ -44,7 +44,7 @@ export const ThemeExport = ({isOpen, onClose}: ThemeExportProps) => {
 
         const link = document.createElement('a');
         link.setAttribute('href', url);
-        link.setAttribute('download', 'styles.scss');
+        link.setAttribute('download', 'custom.css');
 
         link.click();
     }, [themeStyles]);