Add typescript section

Author: jantimon

docs/pages/CodeExample.tsx

@@ -64,6 +64,7 @@ const MultiCodeButton = styled.button<{active?: boolean}>`
   position: relative;
   top: 5px;
   border: 0;
+  margin: 0;
   padding: 5px 20px;
   cursor: pointer;
   & + & {
@@ -76,10 +77,7 @@ export const CodeExamples = ({ children }) => {
   const [activeKey, setActiveKeys] = useState(keys[0]);
   return <CodeExampleWrapper>
     <CodeButtonWrapper>
-      {keys.length === 2 && keys.map((key) => key !== activeKey && (
-        <MultiCodeButton key={key} onClick={() => setActiveKeys(key)}>{key}</MultiCodeButton>
-      ))}
-      {keys.length > 2 && keys.map((key) => (
+      {keys.length > 1 && keys.map((key) => (
         <MultiCodeButton key={key} active={activeKey === key} onClick={() => setActiveKeys(key)}>{key}</MultiCodeButton>
       ))}
     </CodeButtonWrapper>

docs/pages/Theme.js renamed to docs/pages/Theme.tsx

@@ -85,6 +85,8 @@ const ThemeSwitchButton = styled.button`
   padding: 0;
   position: relative;
   overflow: hidden;
+  font-size: 80%;
+  cursor: pointer;
   :before {
     transition: transform 300ms ease-in-out;
     content: "🌙";
@@ -109,6 +111,7 @@ const ThemeSwitchButton = styled.button`
 export const ThemeSwitch = () => (
   <ThemeSwitchButton
     onClick={() => document.body.classList.toggle(invertedTheme)}
+    title="Toggle Light/Dark Mode"
   />
 );
 

docs/pages/index.page.tsx

@@ -221,13 +221,18 @@ export const globalStyles = css\`:global() {
 
           <CodeExamples>
             {{
-              base: `
+              'js source': `
 import { tokens } from './tokens' 
 
 export const Headline = styled.h1\`
   color: \${tokens.primary};
 \`;
-        `,
+`,
+        'css result': `
+.se7gjt0-headline {
+  color: var(--primary--1isauia0);
+}
+`,
             }}
           </CodeExamples>
         </SectionExample>
@@ -338,6 +343,34 @@ export const theme = {
         </SectionExample>
       </Section>
 
+      <Section reverse>
+        <SectionContent>
+          <Headline>Typed Contracts</Headline>
+          <Text>By default any string value is a valid CSSVariable.<br /><br />But it doesn't end here - the generic interface allows to define explicitly which values are assignable</Text>
+        </SectionContent>
+        <SectionExample>
+          <CodeExamples>
+            {{
+              base: `
+import { createVar } from 'css-variable';
+import type { CSSHexColor, CSSPixelValue } from 'css-variable';
+
+export const tokens = {
+  colors: {
+    primary: createVar<CSSHexColor>(),
+    secondary: createVar<CSSHexColor>(),
+  },
+  spacing: {
+    large: createVar<CSSPixelValue>()
+  }
+};
+`,
+            }}
+          </CodeExamples>
+        </SectionExample>
+      </Section>
+
+
     </Main>
     <Footer>
       <FooterContent>