fix: Missing color on Popup

Signed-off-by: Avior <f.bouillon@aptatio.com>

src/Button/Button.module.styl

@@ -68,6 +68,13 @@
 		margin 0
 		margin-top 8px
 
+	@media (max-width $mobile)
+		&.mobileBlock
+			display flex
+			width 100%
+			margin 0
+			margin-top 8px
+
 	&.large
 		padding 15px 30px
 		font-size rem(20)
@@ -87,15 +94,11 @@
 
 	&:disabled
 		background nativeRGB(var(--gray-500))
-		color nativeRGB(var(--gray-500))
+		color nativeRGB(var(--gray-500--text))
 		transform none
 		box-shadow none
 		cursor initial
 
-		@media (prefers-color-scheme dark)
-			background $lightGrayDark
-			color $darkGrayDark
-
 		&.outline
 			border 2px solid nativeRGB(var(--gray-500))
 			background transparent

src/Button/Button.stories.tsx

@@ -13,9 +13,9 @@ export const Button = (args: any) => <Box><Component {...args}>Button</Component
 Button.args = {
 	nomargintop: true,
 	icon: Zap,
+	mobileBlock: true,
 	iconLeft: Zap,
-	size: 'small',
-	block: true
+	size: 'small'
 }
 
 export const WithImg = (args: any) => <Box><Component {...args}>Button</Component></Box>

src/Button/index.tsx

@@ -19,6 +19,7 @@ interface Props {
 	block?: boolean
 	href?: string
 	as?: string
+	mobileBlock?: boolean
 	disabled?: boolean
 	loading?: boolean
 	onClick?: (event: React.MouseEvent<HTMLButtonElement|HTMLAnchorElement, MouseEvent>) => void
@@ -57,7 +58,8 @@ export default class Button extends React.Component<Props> {
 			[css.block, this.props.block],
 			[css[this.props.size as string], this.props.size],
 			[css.nomargintop, this.props.nomargintop],
-			[css.loading, this.props.loading]
+			[css.loading, this.props.loading],
+			[css.mobileBlock, this.props.mobileBlock]
 		)
 
 		if (this.props.href && !this.props.disabled) {

src/Input/Input.module.styl

@@ -115,9 +115,6 @@
 			font-size rem(16)
 			transition color $transition
 			opacity 1
-			// color $darkGrayLight
-			// @media (prefers-color-scheme dark)
-			// 	color $darkGrayDark
 
 			color black
 			@media (prefers-color-scheme dark)

src/Menu/Menu.module.styl

@@ -13,10 +13,12 @@
 		li
 			svg
 				margin-right 8px
+				vertical-align sub
 			&:last-child
 				margin 0
-			display inline-flex
 			padding 8px
+			&.link
+				padding 0
 			overflow-x hidden
 			text-overflow: ellipsis;
 			margin-bottom 8px
@@ -37,3 +39,12 @@
 			&:active
 				background nativeRGB(var(--theme-500))
 				color white
+
+.link
+	padding 0
+.linkInternal
+	padding 8px
+	display inline-block
+	width 100%
+.icon
+	vertical-align sub

src/Menu/Menu.stories.tsx

@@ -10,7 +10,7 @@ export default {
 
 const list: Component['props']['items'] = [
 	{value: 'Menu item 1'},
-	{value: 'Menu item 2', icon: XOctagon},
+	{value: 'Menu with link', icon: XOctagon, href: '/'},
 	{value: 'Menu item 3', icon: XOctagon},
 	{value: 'Menu item 4', icon: XOctagon},
 	{value: 'Menu item 5', selected: true, icon: XOctagon},

src/Menu/index.tsx

@@ -29,8 +29,8 @@ export default class Menu extends React.Component<Props> {
 					)
 					if (item.href) {
 						return (
-						<li key={key} className={buildClassName([css.selected, item.selected])}>
-							<Link noStyle href={item.href}>{content}</Link>
+						<li key={key} className={buildClassName([css.selected, item.selected], css.link)}>
+							<Link noStyle href={item.href} className={css.linkInternal}>{content}</Link>
 						</li>
 						)
 					}

src/Popup/Popup.module.styl

@@ -7,9 +7,9 @@
 	top 0
 	margin 0 !important // sorry :(
 	left 0
-	background nativeRGBA($lightGrayLight, .7)
+	background nativeRGBA(var(--gray-100), .7)
 	@media (prefers-color-scheme dark)
-		background nativeRGBA($lightGrayDark, .7)
+		background nativeRGBA(var(--gray-500), .7)
 	cursor pointer
 	z-index 200
 	animation fadeIn .3s ease-in-out 1 forwards

src/Sidebar/Sidebar.module.styl

@@ -167,6 +167,11 @@
 				display flex
 				//max-height 24px
 
+			&.link
+				padding 0
+				a
+					padding 8px
+
 		&.active > div
 			color white
 			background nativeRGB(var(--theme-500))

src/Sidebar/index.tsx

@@ -223,11 +223,17 @@ export default class Sidebar extends React.Component<Props, State> {
 				</>
 			)
 			const isActive = this.state.path === obj.path || obj.subMenu?.find((it) => this.state.path === it.path)
-			return <li key={id} className={buildClassName(
+			return <li
+					key={id}
+					className={buildClassName(
 						[css.active, isActive],
 						[css.activeMenu, id === this.state.activeMenu && this.state.open]
-			)}>
-				<div onClick={isSub ? undefined : this.onClick(id, obj.subMenu)}>
+					)}
+					onClick={isSub ? undefined : this.onClick(id, obj.subMenu)}
+				>
+				<div
+					className={buildClassName([css.link, obj.path])}
+				>
 					{obj.path ? (
 						<Link noStyle href={obj.path}>
 							{content}

src/Table/Table.module.styl

@@ -5,13 +5,13 @@
 	width 100%
 
 	tr:not(:last-child) td
-		border-bottom 1px solid $darkGrayLight
+		border-bottom 1px solid nativeRGB(var(--gray-600))
 	tr th
-		border-bottom 2px solid $darkGrayLight
+		border-bottom 2px solid nativeRGB(var(--gray-600))
 
 	tr td:not(:first-child)
 	tr th:not(:first-child)
-		border-left 1px solid $darkGrayLight
+		border-left 1px solid nativeRGB(var(--gray-600))
 
 	th
 		font-weight bold

src/colors.styl

@@ -13,7 +13,7 @@ generateTheme($name, c50, c100, c200, c300, c400, c500, c600, c700, c800, c900)
 	{"--" + $name + "-700"}: hextorgb(c700)
 	{"--" + $name + "-800"}: hextorgb(c800)
 	{"--" + $name + "-900"}: hextorgb(c900)
-	{"--" + $name + "-50-text"}: light(c50 ) ? black : white
+	{"--" + $name + "-50-text"}:  light(c50)  ? black : white
 	{"--" + $name + "-100-text"}: light(c100) ? black : white
 	{"--" + $name + "-200-text"}: light(c200) ? black : white
 	{"--" + $name + "-300-text"}: light(c300) ? black : white

src/config.styl

@@ -4,23 +4,6 @@ nativeRGBA(color, opacity)
 nativeRGB(color)
 	unquote('rgb(') color unquote(');')
 
-// @deprecated
-$main = nativeRGB(var(--theme-500))
-$textOnMain = white
-
-$backgroundDark = nativeRGB(var(--gray-900))
-$backgroundLight = nativeRGB(var(--gray-50))
-$foregroundDark = nativeRGB(var(--gray-800))
-$foregroundLight = nativeRGB(var(--theme-50))
-
-// Light theme grays
-$darkGrayLight = #777
-$lightGrayLight = #F4F4F4
-
-// Dark theme grays
-$darkGrayDark = #444
-$lightGrayDark = #AAA
-// -@deprecated
 
 $transitionTime = .15s
 $transitionFunction = ease-in-out