feat(dark-theme-styles-injector): add prop for selector (#709)

* feat(themes): change colors building * feat(dark-theme-styles-injector): add prop for selector
core-ds · Jun 22, 2021 · f74cdc7 · f74cdc7
1 parent 24a8f08
commit f74cdc7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/bin/build-themes.js b/bin/build-themes.js
@@ -91,7 +91,7 @@ const processPostCss = async (content, cssFile) =>
         fs.writeFileSync(`../css/colors/${path.basename(file)}`, css);
         fs.writeFileSync(
             `../css/colors/${path.basename(file).replace(/\.css$/, '.js')}`,
-            `module.exports = \`${css}\``,
+            `module.exports = \`${vars}\``,
         );
     });
 

diff --git a/packages/dark-theme-styles-injector/src/component.tsx b/packages/dark-theme-styles-injector/src/component.tsx
@@ -9,18 +9,35 @@ const colorsMap = {
 };
 
 export type DarkThemeStylesInjectorProps = {
+    /**
+     * Какие цвета необходимо инвертировать
+     */
     colors: 'indigo' | 'bluetint';
+
+    /**
+     * Дополнительные стили для инвертированного режима
+     */
     styles?: string;
+
+    /**
+     * Селектор, в котором будут переопределяться переменные
+     */
+    selector?: string;
 };
 
 export const DarkThemeStylesInjector: FC<DarkThemeStylesInjectorProps> = ({
     colors,
     styles = '',
+    selector = ':root',
 }) => {
     return (
         <style>
-            {colorsMap[colors]}
-            {styles}
+            {`
+                ${selector} {
+                    ${colorsMap[colors]}
+                    ${styles}
+                }
+            `}
         </style>
     );
 };