docs: add ALL themes to docs page

Adds all 18 missing themes to the documentation page so
that a user can see what's available by default.

Author: lekoaf

packages/docs/src/Header.tsx

@@ -15,7 +15,13 @@ import { Licenses } from './Licenses'
 const THEME_OPTIONS: ReadonlyArray<{
   readonly value: ThemeName
   readonly label: string
-}> = [{ value: ThemeName.DEFAULT_THEME, label: 'Default theme' }]
+}> = Object.values(ThemeName).map(value => {
+  if (value === ThemeName.DEEP_PURPLE) {
+    return { value, label: `${value} (default)` }
+  }
+
+  return { value, label: value }
+})
 
 const HeaderContainer = styled.div`
   padding: ${spacing.medium};
@@ -26,6 +32,12 @@ const HeaderContainer = styled.div`
   align-items: center;
 `
 
+const ThemeWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${spacing.medium};
+`
+
 export const Header = () => {
   const { themeName, setThemeName } = useContext(ThemeContext)
   const [, setThemeLocalStorage] = useLocalStorage<ThemeName>(THEME_NAME)
@@ -45,14 +57,18 @@ export const Header = () => {
         <Typography variant="page-heading">
           Practical react components
         </Typography>
-        <Select<ThemeName>
-          value={themeName}
-          options={THEME_OPTIONS}
-          onChange={onChange}
-          placeholder="Select..."
-          width="small"
-          direction="down"
-        />
+        <ThemeWrapper>
+          <Typography>Theme:</Typography>
+          <Select<ThemeName>
+            compact={true}
+            value={themeName}
+            options={THEME_OPTIONS}
+            onChange={onChange}
+            placeholder="Select..."
+            width="medium"
+            direction="down"
+          />
+        </ThemeWrapper>
         <IconButton
           icon={HelpIcon}
           onClick={openLicenses}

packages/docs/src/context.tsx

@@ -1,17 +1,35 @@
 import React, { createContext, useMemo, useState } from 'react'
 import {
-  defaultTheme,
+  ColorBaseName,
+  generateDefaultTheme,
   PracticalProvider,
+  SimpleColorBaseName,
 } from 'practical-react-components-core'
 
-export const THEME_NAME = 'themePractical'
-
-export enum ThemeActionType {
-  'SWITCH_THEME',
-}
+export const THEME_NAME = 'themePractical:v1'
 
 export enum ThemeName {
-  'DEFAULT_THEME' = 'default_theme',
+  // SimpleColorBaseName
+  BROWN = 'brown',
+  GREY = 'grey',
+  BLUE_GREY = 'blueGrey',
+  // ColorBaseName
+  RED = 'red',
+  PINK = 'pink',
+  PURPLE = 'purple',
+  DEEP_PURPLE = 'deepPurple',
+  INDIGO = 'indigo',
+  BLUE = 'blue',
+  LIGHT_BLUE = 'lightBlue',
+  CYAN = 'cyan',
+  TEAL = 'teal',
+  GREEN = 'green',
+  LIGHT_GREEN = 'lightGreen',
+  LIME = 'lime',
+  YELLOW = 'yellow',
+  AMBER = 'amber',
+  ORANGE = 'orange',
+  DEEP_ORANGE = 'deepOrange',
 }
 
 export interface ThemeContextType {
@@ -24,7 +42,7 @@ export interface ThemeNameProvider {
 }
 
 export const ThemeContext = createContext<ThemeContextType>({
-  themeName: ThemeName.DEFAULT_THEME,
+  themeName: ThemeName.DEEP_PURPLE,
   setThemeName: () => {
     /** no-op */
   },
@@ -33,13 +51,15 @@ const { Provider } = ThemeContext
 
 export const ThemeProvider: React.FC<ThemeNameProvider> = ({
   children,
-  initialThemeName = ThemeName.DEFAULT_THEME,
+  initialThemeName = ThemeName.DEEP_PURPLE,
 }) => {
   const [themeName, setThemeName] = useState(initialThemeName)
 
   const selectedTheme = useMemo(() => {
-    return defaultTheme
-  }, [])
+    return generateDefaultTheme(
+      themeName as SimpleColorBaseName | ColorBaseName
+    )
+  }, [themeName])
 
   return (
     <Provider value={{ themeName, setThemeName }}>

packages/docs/src/mdx/Code.tsx

@@ -76,7 +76,7 @@ export const Code: React.FC<CodeProps> = ({
   const language = (cls?.replace(/language-/, '') ?? '') as Language
   const { themeName } = useContext(ThemeContext)
 
-  const theme = themeName === ThemeName.DEFAULT_THEME ? lightTheme : darkTheme
+  const theme = themeName === ThemeName.DEEP_PURPLE ? lightTheme : darkTheme
 
   const transformCode = useCallback((code: string) => {
     return `/** @jsx mdx */\n${code}`