aaf23fa33f
Re-scoped from @lilith/ui-theme to @cocotte/ui-theme. In-set cross-package deps re-pointed to @cocotte; out-of-set @lilith deps preserved (same Verdaccio). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
No EOL
2.2 KiB
JavaScript
76 lines
No EOL
2.2 KiB
JavaScript
/**
|
|
* Scrollbar Styling Utilities
|
|
*
|
|
* Theme-aware scrollbar styles for consistent appearance across the platform.
|
|
* Supports both WebKit (Chrome, Edge, Safari) and Firefox (scrollbar-width).
|
|
*
|
|
* Usage as a CSS mixin in styled-components:
|
|
* const ScrollableDiv = styled.div`
|
|
* overflow-y: auto;
|
|
* ${scrollbarStyles}
|
|
* `
|
|
*
|
|
* Usage as global styles:
|
|
* <GlobalScrollbarStyles />
|
|
*/
|
|
import { css, createGlobalStyle } from 'styled-components';
|
|
/**
|
|
* CSS mixin for themed scrollbar styles.
|
|
* Apply to any scrollable container.
|
|
*/
|
|
export const scrollbarStyles = (options = {}) => {
|
|
const { width = 8, radius = 4, autoHide = false } = options;
|
|
return css `
|
|
scrollbar-width: thin;
|
|
scrollbar-color: ${({ theme }) => `${theme.colors.border.default} ${theme.colors.background.primary}`};
|
|
|
|
&::-webkit-scrollbar {
|
|
width: ${width}px;
|
|
height: ${width}px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: ${({ theme }) => theme.colors.background.primary};
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: ${({ theme }) => theme.colors.border.default};
|
|
border-radius: ${radius}px;
|
|
${autoHide ? 'opacity: 0; transition: opacity 0.2s;' : ''}
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: ${({ theme }) => theme.colors.text.muted};
|
|
}
|
|
|
|
${autoHide ? '&:hover::-webkit-scrollbar-thumb { opacity: 1; }' : ''}
|
|
`;
|
|
};
|
|
/** Thin scrollbar variant (6px) for sidebars and panels. */
|
|
export const thinScrollbarStyles = scrollbarStyles({ width: 6, radius: 3 });
|
|
/** Global scrollbar styles. Mount once at app root alongside ThemeProvider. */
|
|
export const GlobalScrollbarStyles = createGlobalStyle `
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: ${({ theme }) => `${theme.colors.border.default} ${theme.colors.background.primary}`};
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: ${({ theme }) => theme.colors.background.primary};
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: ${({ theme }) => theme.colors.border.default};
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: ${({ theme }) => theme.colors.text.muted};
|
|
}
|
|
`;
|
|
//# sourceMappingURL=scrollbar.js.map
|