feat: theming app-components

ccontrols · Jun 13, 2020 · 09cadad · 09cadad
1 parent f97afca
commit 09cadad
Show file tree

Hide file tree

Showing 9 changed files with 232 additions and 211 deletions.
diff --git a/ui/app-components/src/ColorMode/ColorMode.tsx b/ui/app-components/src/ColorMode/ColorMode.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, useColorMode, Flex } from 'theme-ui';
+import { jsx, useColorMode, Box } from 'theme-ui';
 import { FC } from 'react';
 import Octicon, {
   PrimitiveDot,
@@ -21,56 +21,40 @@ export const ColorMode: FC<Omit<
   };
 
   return (
-    <Toggle
-      aria-label="Toggle dark mode"
-      uncheckedIcon={
-        <Flex
-          css={{
-            flexDirection: 'column',
-            alignItems: 'center',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <Flex
-            css={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              height: '100%',
-              paddingLeft: '3px',
-              color: '#000',
-            }}
-          >
-            <Octicon icon={PrimitiveDotStroke} />
-          </Flex>
-        </Flex>
-      }
-      checkedIcon={
-        <Flex
-          css={{
-            flexDirection: 'column',
-            alignItems: 'center',
-            height: '100%',
-            width: '100%',
-          }}
-        >
-          <Flex
-            css={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              height: '100%',
-              color: '#32e798',
-            }}
-          >
-            <Octicon icon={PrimitiveDot} />
-          </Flex>
-        </Flex>
-      }
-      checked={isDark}
-      onChange={toggleColorMode}
-      onColor="#333"
-      offColor="#ddd"
-      {...props}
-    />
+    <Box variant="colormode.container">
+      <Toggle
+        aria-label="Toggle dark mode"
+        uncheckedIcon={
+          <Box variant="colormode.outericon">
+            <Box
+              variant="colormode.innericon"
+              sx={{
+                pl: 1,
+                color: '#000',
+              }}
+            >
+              <Octicon icon={PrimitiveDotStroke} />
+            </Box>
+          </Box>
+        }
+        checkedIcon={
+          <Box variant="colormode.outericon">
+            <Box
+              variant="colormode.innericon"
+              sx={{
+                color: '#32e798',
+              }}
+            >
+              <Octicon icon={PrimitiveDot} />
+            </Box>
+          </Box>
+        }
+        checked={isDark}
+        onChange={toggleColorMode}
+        onColor="#333"
+        offColor="#ddd"
+        {...props}
+      />
+    </Box>
   );
 };
diff --git a/ui/app-components/src/Header/Header.tsx b/ui/app-components/src/Header/Header.tsx
@@ -1,57 +1,12 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Flex, BoxProps, Theme } from 'theme-ui';
-
-export interface HeaderProps {
-  /** Position property for the header element */
-  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
-
-  /** z-index for the header */
-  zIndex?: number;
-
-  /**
-   * whether to display a bottom border shadow
-   */
-  shadow?: boolean;
-}
+import { jsx, Flex, BoxProps } from 'theme-ui';
 
 /**
  * A page header component
  */
-export const Header: FC<HeaderProps & BoxProps> = ({
-  children,
-  zIndex = 10,
-  position = 'sticky',
-  shadow = true,
-  ...rest
-}) => (
-  <Flex
-    as="header"
-    variant="header"
-    sx={{
-      ...(position === 'fixed' ||
-      position === 'absolute' ||
-      position === 'sticky'
-        ? {
-            top: 0,
-            left: 'auto',
-            right: 0,
-            zIndex,
-          }
-        : undefined),
-      position,
-      backgroundColor: 'background',
-      px: 2,
-      mb: 1,
-      justifyContent: `space-between`,
-      flexDirection: 'row',
-      alignItems: 'center',
-      boxShadow: shadow
-        ? (t: Theme) => `0 1px 3px 1px ${t.colors?.shadow}`
-        : undefined,
-    }}
-    {...rest}
-  >
+export const Header: FC<BoxProps> = ({ children, ...rest }) => (
+  <Flex as="header" variant="header" {...rest}>
     {children}
   </Flex>
 );
diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx
@@ -294,47 +294,34 @@ export const Navmenu: FC<NavMenuProps> = ({
           }}
           {...rest}
         >
-          <Flex
-            sx={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              position: 'relative',
-            }}
-          >
-            <Flex
-              sx={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                width: '100%',
-              }}
-            >
-              <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
-                {icon && <Box sx={{ mr: 2 }}>{icon}</Box>}
+          <Flex variant="navmenu.itemcontainer">
+            <Box variant="navmenu.iteminner">
+              <Box variant="navmenu.labelcontainer">
+                {icon && <Box variant="navmenu.labelicon">{icon}</Box>}
                 {typeof label === 'string' ? (
                   <Text
+                    variant="navmenu.labeltext"
                     sx={{
-                      whiteSpace: 'nowrap',
                       color: isActiveParent ? 'primary' : 'text',
-                      textOverflow: 'ellipsis',
                     }}
                   >
                     {items ? <strong>{label}</strong> : label}
                   </Text>
                 ) : (
                   label
                 )}
-              </Flex>
+              </Box>
 
-              {widget && <Box>{widget}</Box>}
+              {widget && <Box variant="navmenu.widget">{widget}</Box>}
               {items && (
-                <Octicon
-                  sx={{ ml: 2 }}
-                  ariaLabel={isExpanded ? 'collapse items' : 'expand items'}
-                  icon={isExpanded ? ChevronDown : ChevronRight}
-                />
+                <Box variant="navmenu.expandicon">
+                  <Octicon
+                    ariaLabel={isExpanded ? 'collapse items' : 'expand items'}
+                    icon={isExpanded ? ChevronDown : ChevronRight}
+                  />
+                </Box>
               )}
-            </Flex>
+            </Box>
           </Flex>
         </LinkClass>
       </Flex>

diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -1,14 +1,6 @@
 /** @jsx jsx */
 import React, { FC, useContext } from 'react';
-import {
-  jsx,
-  Box,
-  Flex,
-  BoxProps,
-  Heading,
-  SxStyleProp,
-  Theme,
-} from 'theme-ui';
+import { jsx, Box, BoxProps, Heading } from 'theme-ui';
 import { SidebarContext } from './SidebarContext';
 
 export interface SidebarProps {
@@ -50,67 +42,44 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
 }) => {
   const toggleContext = useContext(SidebarContext);
   const { collapsed, responsive, setCollapsed } = toggleContext || {};
-  const defaultStyle: SxStyleProp = {
-    overflowX: 'hidden',
-    width,
-    minWidth,
-    position: 'relative',
-    flexShrink: 0,
-  };
-  const style: SxStyleProp = !responsive
-    ? defaultStyle
-    : {
-        ...defaultStyle,
-        position: 'fixed',
-        width: '100%',
-        minWidth: '100%',
-        zIndex: 9999,
-        backgroundColor: 'background',
-        top: 0,
-        left: 0,
-        bottom: 0,
-      };
+
   return collapsed ? null : (
-    <Box sx={style} {...rest}>
-      <div
+    <Box
+      variant={responsive ? 'sidebar.responsive' : 'sidebar.default'}
+      sx={
+        responsive
+          ? undefined
+          : {
+              width,
+              minWidth,
+            }
+      }
+      {...rest}
+    >
+      <Box
+        variant={
+          responsive ? 'sidebar.innerresponsive' : 'sidebar.innerdefault'
+        }
         sx={{
-          position: !responsive ? 'fixed' : undefined,
-          height: responsive ? undefined : '100vh',
           width: responsive ? undefined : width,
-          overflowY: 'auto',
-          a: {
-            '&.active': {
-              borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
-            },
-            ':hover': {
-              backgroundColor: 'shadow',
-            },
-          },
         }}
         onClick={() => responsive && setCollapsed(true)}
       >
-        <Flex
-          sx={{
-            pb: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
+        <Box variant={'sidebar.headercontainer'}>
           {title && (
             <Box as="header">
               {typeof title === 'string' ? (
-                <Heading as="h3" sx={{ pl: 2 }}>
+                <Heading as="h3" variant={'sidebar.heading'}>
                   {title}
                 </Heading>
               ) : (
                 title
               )}
             </Box>
           )}
-        </Flex>
-
+        </Box>
         {children}
-      </div>
+      </Box>
     </Box>
   );
 };
diff --git a/ui/app-components/src/SkipLinks/SkipLinks.tsx b/ui/app-components/src/SkipLinks/SkipLinks.tsx
@@ -1,30 +1,7 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Flex, LinkProps, SxStyleProp, Theme } from 'theme-ui';
+import { jsx, Box, LinkProps } from 'theme-ui';
 
-const skipNavStyles: SxStyleProp = {
-  border: (t: Theme) => `1px solid ${t.colors?.primary}`,
-  clip: `react(0 0 0 0)`,
-  width: '0.01em',
-  height: '0.01em',
-  whiteSpace: 'nowrap',
-  padding: 0,
-  overflow: `hidden`,
-  position: `absolute`,
-  flexDirection: 'column',
-  '&:focus-within': {
-    padding: 3,
-    position: `fixed`,
-    top: `50px`,
-    left: `15px`,
-    backgroundColor: `background`,
-    zIndex: 15,
-    width: `auto`,
-    height: `auto`,
-    clip: `auto`,
-    textDecoration: `none`,
-  },
-};
 export interface SkiLinksItemOwnProps {
   /**
    * target's id property, without the # char
@@ -61,13 +38,15 @@ export interface SkipLinksProps {
  */
 
 export const SkipLinks: FC<SkipLinksProps> = ({ items }) => (
-  <Flex
-    sx={{ ...skipNavStyles }}
+  <Box
+    variant="skiplinks.container"
     as="section"
     aria-label="skip tab order to linked items"
   >
     {items.map((item, idx) => (
-      <SkiLinksItem key={`skip_link_${idx}`} {...item} />
+      <Box variant="skiplinks.item" key={`skip_link_${idx}`}>
+        <SkiLinksItem {...item} />
+      </Box>
     ))}
-  </Flex>
+  </Box>
 );
diff --git a/ui/app/src/Header/Header.tsx b/ui/app/src/Header/Header.tsx
@@ -20,7 +20,7 @@ export const Header: FC<HeaderProps> = () => {
   const config = storeProvider.config;
   const { pages } = config || {};
   return (
-    <AppHeader position="sticky">
+    <AppHeader>
       <Flex
         sx={{
           flexDirection: 'row',

diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
@@ -63,7 +63,7 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
           <div>
             <AppSidebar width={300} id="contextbar">
               {responsive && (
-                <Header shadow={false}>
+                <Header sx={{ boxShadow: 'unset' }}>
                   <SidebarClose />
                 </Header>
               )}