Sidebar - tiny design tweaks for themeing (codesandbox#3435)

* changed the toggle icon

* current color for stats icon

* link-color

Author: siddharthkp

packages/components/src/components/Collapsible/index.tsx

@@ -21,10 +21,6 @@ export const Header = styled(SidebarRow).attrs({ gap: 2 })(
     cursor: 'pointer',
     ':hover': {
       backgroundColor: 'sideBar.hoverBackground',
-      svg: {
-        // TODO: this should come from somewhere else - text muted maybe?
-        color: 'grays.400',
-      },
     },
   })
 );
@@ -37,7 +33,7 @@ const Icon = styled.svg<{
     transform: props.open ? 'rotate(0)' : 'rotate(-90deg)',
     transition: 'transform',
     transitionDuration: theme => theme.speeds[1],
-    color: 'grays.500',
+    opacity: 0.25,
   })
 );
 

packages/components/src/components/Link/index.tsx

@@ -17,7 +17,7 @@ const LinkElement = styled(Text).attrs({ as: 'a' })<ILinkProps>(
     transition: 'color ease',
     transitionDuration: theme => theme.speeds[2],
     ':hover, :focus': {
-      color: 'foreground',
+      color: 'inherit',
     },
   })
 );

packages/components/src/components/Stats/index.tsx

@@ -13,7 +13,7 @@ export const HeartIcon = props => (
 
 export const ViewIcon = props => (
   <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
-    <g fill="#757575">
+    <g fill="currentColor">
       <path
         fillRule="evenodd"
         d="M8 12.1c2.513 0 6.5-3.25 6.5-4.55S10.513 3 8 3 1.5 6.25 1.5 7.55c0 .975 3.987 4.55 6.5 4.55zm0-1.95a2.6 2.6 0 100-5.2 2.6 2.6 0 000 5.2z"

packages/components/src/examples/sandbox-info.stories.tsx

@@ -10,6 +10,7 @@ import {
   Stack,
   Switch,
   Text,
+  Link,
   Label,
   SidebarRow,
 } from '../index';
@@ -20,8 +21,6 @@ export default {
   title: 'examples/SandboxInfo',
 };
 
-const Link = props => <Text variant="muted" {...props} />;
-
 const GlobeIcon = props => (
   <svg width={10} height={10} fill="none" viewBox="0 0 10 10" {...props}>
     <path
@@ -61,11 +60,15 @@ export const SandboxInfo = () => (
           </ListItem>
           <ListItem justify="space-between">
             <Text>Template</Text>
-            <Link>React</Link>
+            <Link href="#" variant="muted">
+              React
+            </Link>
           </ListItem>
           <ListItem justify="space-between">
             <Text>Environment</Text>
-            <Link>create-react-app</Link>
+            <Link href="#" variant="muted">
+              create-react-app
+            </Link>
           </ListItem>
         </List>
       </Stack>