feat!: move scrollbar styles to separate mixin (#1971)

gravity-ui · Dec 2, 2024 · 30e8379 · 30e8379
1 parent 8db0624
commit 30e8379
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 56 deletions.
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -27,7 +27,6 @@ export interface ThemeProviderProps extends React.PropsWithChildren<{}> {
     systemLightTheme?: RealTheme;
     systemDarkTheme?: RealTheme;
     direction?: Direction;
-    nativeScrollbar?: boolean;
     scoped?: boolean;
     rootClassName?: string;
     layout?: Omit<PrivateLayoutProviderProps, 'children'>;
@@ -38,7 +37,6 @@ export function ThemeProvider({
     systemLightTheme: systemLightThemeProp,
     systemDarkTheme: systemDarkThemeProp,
     direction: directionProp,
-    nativeScrollbar,
     scoped: scopedProp = false,
     rootClassName = '',
     children,
@@ -67,14 +65,13 @@ export function ThemeProvider({
         if (!scoped) {
             updateBodyClassName({
                 theme: themeValue,
-                nativeScrollbar,
                 className: rootClassName,
                 prevClassName: prevRootClassName.current,
             });
             updateBodyDirection(direction);
             prevRootClassName.current = rootClassName;
         }
-    }, [scoped, themeValue, direction, nativeScrollbar, rootClassName]);
+    }, [scoped, themeValue, direction, rootClassName]);
 
     const contextValue = React.useMemo(
         () =>
@@ -97,16 +94,7 @@ export function ThemeProvider({
             <ThemeContext.Provider value={contextValue}>
                 <ThemeSettingsContext.Provider value={themeSettingsContext}>
                     {scoped ? (
-                        <div
-                            className={b(
-                                {
-                                    theme: themeValue,
-                                    'native-scrollbar': nativeScrollbar !== false,
-                                },
-                                rootClassName,
-                            )}
-                            dir={direction}
-                        >
+                        <div className={b({theme: themeValue}, rootClassName)} dir={direction}>
                             {children}
                         </div>
                     ) : (

diff --git a/src/components/theme/dom-helpers.ts b/src/components/theme/dom-helpers.ts
@@ -8,12 +8,10 @@ const rootClassName = b();
 
 export function updateBodyClassName({
     theme,
-    nativeScrollbar = false,
     className,
     prevClassName,
 }: {
     theme: RealTheme;
-    nativeScrollbar?: boolean;
     className?: string;
     prevClassName?: string;
 }) {
@@ -47,14 +45,6 @@ export function updateBodyClassName({
         }
     });
     bodyEl.classList.add(modsClassName(b({theme})));
-
-    const modifiers = {
-        'native-scrollbar': nativeScrollbar,
-    };
-
-    for (const [key, value] of Object.entries(modifiers)) {
-        bodyEl.classList.toggle(modsClassName(b({[key]: true})), value);
-    }
 }
 
 export function updateBodyDirection(direction: Direction) {

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -324,3 +324,32 @@
     // stylelint-disable-next-line no-unknown-animations
     animation: g-loading-animation 0.5s linear infinite;
 }
+
+@mixin scrollbar() {
+    &::-webkit-scrollbar,
+    *::-webkit-scrollbar {
+        width: var(--g-scrollbar-width);
+        height: var(--g-scrollbar-width);
+        background: var(--g-color-scroll-track);
+    }
+
+    &::-webkit-scrollbar-track,
+    *::-webkit-scrollbar-track {
+        background: var(--g-color-scroll-track);
+    }
+
+    &::-webkit-scrollbar-corner,
+    *::-webkit-scrollbar-corner {
+        background: var(--g-color-scroll-corner);
+    }
+
+    &::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-thumb {
+        background: var(--g-color-scroll-handle);
+    }
+
+    &::-webkit-scrollbar-thumb:hover,
+    *::-webkit-scrollbar-thumb:hover {
+        background: var(--g-color-scroll-handle-hover);
+    }
+}
diff --git a/styles/styles.scss b/styles/styles.scss
@@ -23,38 +23,6 @@
     }
 }
 
-.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) {
-    scrollbar-width: var(--g-scrollbar-width);
-    scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
-
-    &::-webkit-scrollbar,
-    *::-webkit-scrollbar {
-        width: var(--g-scrollbar-width);
-        height: var(--g-scrollbar-width);
-        background: var(--g-color-scroll-track);
-    }
-
-    &::-webkit-scrollbar-track,
-    *::-webkit-scrollbar-track {
-        background: var(--g-color-scroll-track);
-    }
-
-    &::-webkit-scrollbar-corner,
-    *::-webkit-scrollbar-corner {
-        background: var(--g-color-scroll-corner);
-    }
-
-    &::-webkit-scrollbar-thumb,
-    *::-webkit-scrollbar-thumb {
-        background: var(--g-color-scroll-handle);
-    }
-
-    &::-webkit-scrollbar-thumb:hover,
-    *::-webkit-scrollbar-thumb:hover {
-        background: var(--g-color-scroll-handle-hover);
-    }
-}
-
 @keyframes g-loading-animation {
     from {
         background-position: -12px 0;