Unverified Commit 10e7fcfc authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

Fix sidebar custom vars (#286)

parent cc6460e9
......@@ -9,15 +9,15 @@ const Item = ({ selected, highlighted, clickable, ...props }) => <div className=
selected && 'rcx-sidebar-item--selected',
].filter(Boolean).join(' ')} {...props} />;
const Container = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
const Container = ({ is: Tag = 'div', ...props }) => <Tag className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
const Content = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content' {...props}/>;
const Content = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content ${ className }`} {...props}/>;
const Title = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__title' {...props}/>;
const Title = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__title ${ className }`} {...props}/>;
const Subtitle = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__subtitle' {...props}/>;
const Wrapper = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__wrapper' {...props}/>;
const Wrapper = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__wrapper ${ className }`} {...props}/>;
const Icon = (props) => <FuselageIcon w='x12' mi='x4' size='x16' {...props} />;
......
......@@ -3,13 +3,13 @@
@use '../../styles/typography.scss';
@import '../../styles/mixins/all.scss';
$sidebar-item-background-color: colors.surface();
$sidebar-item-color: colors.foreground('hint');
$sidebar-item-color-highlighted: colors.foreground('alternative');
$sidebar-item-background-color-hover: colors.neutral(800);
$sidebar-item-color-hover: colors.foreground('hint');
$sidebar-item-background-color-selected: colors.neutral(200);
$sidebar-item-color-selected: colors.foreground('hint');
$sidebar-item-background-color: theme('sidebar-item-background-color', colors.surface());
$sidebar-item-color: theme('sidebar-item-color', colors.foreground('hint'));
$sidebar-item-color-highlighted: theme('sidebar-item-color-highlighted', colors.foreground('alternative'));
$sidebar-item-background-color-hover: theme('sidebar-item-background-color-hover', colors.neutral(800));
$sidebar-item-color-hover: theme('sidebar-item-color-hover', colors.foreground('hint'));
$sidebar-item-background-color-selected: theme('sidebar-item-background-color-selected', colors.neutral(200));
$sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foreground('hint'));
%sidebar-base {
display: flex;
......@@ -55,6 +55,8 @@ $sidebar-item-color-selected: colors.foreground('hint');
color: $sidebar-item-color;
@include highlighted;
&--selected {
color: $sidebar-item-color-selected;
background-color: $sidebar-item-background-color-selected;
......@@ -88,7 +90,6 @@ $sidebar-item-color-selected: colors.foreground('hint');
&__title,
&__subtitle {
@extend %sidebar-base;
@include highlighted;
@include typography.use-with-truncated-text();
display: block;
flex: 1 1 1%;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment