css feature

src/components/HomePage/Features.tsx

@@ -3,10 +3,12 @@ import styled from 'styled-components/macro';
 import Title from 'components/Title';
 import Lead from 'components/Lead';
 import { ReactComponent as StateIcon } from './assets/state.svg';
+import { ReactComponent as CSSIcon } from './assets/css.svg';
 import SubTitle from 'components/SubTitle';
 import P from 'components/P';
 import A from 'components/A';
 import Repos from 'components/Repos';
+import ThemeSwitch from 'components/ThemeSwitch';
 
 export default function Features() {
   return (
@@ -49,6 +51,20 @@ export default function Features() {
             <Repos />
           </Content>
         </Feature>
+        <Feature>
+          <CSSIcon className="feature-icon" />
+          <Content>
+            <SubTitle>Next Generation CSS</SubTitle>
+            <P>
+              Write composable CSS that’s co-located with your components for
+              complete modularity. Ship only the styles that are on the page for
+              the best performance. Generate application-wide styles and themes
+              for your components. Change the theme below to see how easy and
+              intuitive theming can ever be!
+            </P>
+            <ThemeSwitch />
+          </Content>
+        </Feature>
       </List>
     </>
   );

src/components/Radio/index.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+
+interface Props {
+  id: string;
+  label: string;
+  className?: string;
+
+  // TODO: extend RadioInputProps automatically
+  onChange(e: any): void;
+  name: string;
+  value: string;
+}
+
+export default function Radio({ id, label, className, ...restOf }: Props) {
+  return (
+    <Wrapper className={className}>
+      <RadioInput id={id} {...restOf} />
+      <label htmlFor={id}>{label}</label>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const RadioInput = styled.input.attrs({ type: 'radio' })`
+  margin: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  padding: 0;
+
+  + label {
+    margin: 0;
+    display: inline-block;
+    padding-left: 1.375rem;
+    padding-top: 0.0625rem;
+    position: relative;
+    cursor: pointer;
+    font-size: 0.875rem;
+
+    a {
+      color: ${p => p.theme.text};
+      text-decoration: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0.25rem;
+      left: 0;
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background-color: ${p => p.theme.background};
+      content: '';
+      border: 2px solid ${p => p.theme.border};
+      transition: all 0.1s;
+    }
+
+    &::after {
+      display: none;
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+      top: 0.5625rem;
+      left: 0.3125rem;
+      background-color: ${p => p.theme.background};
+    }
+
+    &:hover {
+      &::before {
+        border-color: ${p => p.theme.primary};
+      }
+    }
+  }
+
+  &:disabled {
+    + label {
+      opacity: 0.6;
+      cursor: auto;
+
+      &:hover {
+        &::before {
+          border-color: ${p => p.theme.border};
+        }
+      }
+    }
+  }
+
+  &:focus {
+    + label {
+      &::before {
+        box-shadow: 0 0 0 3px
+          ${p =>
+            p.theme.primary.replace(
+              /rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/,
+              'rgba$1,0.2)',
+            )};
+      }
+    }
+  }
+
+  &:checked {
+    + label {
+      &::before {
+        background-color: ${p => p.theme.primary};
+        border-color: ${p => p.theme.primary};
+      }
+
+      &::after {
+        display: inline-block;
+      }
+    }
+  }
+`;

src/components/ThemeSwitch/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import FormLabel from 'components/FormLabel';
+import Radio from 'components/Radio';
+import styled from 'styled-components/macro';
+
+export default function ThemeSwitch() {
+  const handleThemeChange = (e: any) => {
+    console.log(e.target.value);
+  };
+  return (
+    <Wrapper>
+      <FormLabel>Select Theme</FormLabel>
+      <Themes>
+        <Radio
+          id="default"
+          label="Default"
+          className="radio"
+          name="theme"
+          onChange={handleThemeChange}
+          value="default"
+        />
+        <Radio
+          id="light"
+          label="Light"
+          className="radio"
+          name="theme"
+          onChange={handleThemeChange}
+          value="light"
+        />
+        <Radio
+          id="dark"
+          label="Dark"
+          className="radio"
+          name="theme"
+          onChange={handleThemeChange}
+          value="dark"
+        />
+      </Themes>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${FormLabel} {
+    margin-bottom: 0.625rem;
+  }
+`;
+const Themes = styled.div`
+  display: flex;
+
+  .radio {
+    margin-right: 1.5rem;
+  }
+`;