docs(themes): Add Halloween theme demo

.prettierignore

@@ -2,5 +2,6 @@
 *
 # Except js files
 !*.js
+!*.tsx
 # Look for js files in subdirectories
-!*/
+!*/

packages/documentation-framework/components/example/example.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useLocation } from '@reach/router';
 import {
   Button,
@@ -100,6 +100,8 @@ export const Example = ({
   hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
   // Show dark theme switcher on full page examples
   hasRTLSwitcher = process.env.hasRTLSwitcher,
+  // Show spooky switcher
+  hasSpookySwitcher = process.env.hasSpookySwitcher,
   // Map of relative imports matched to their npm package import path (passed to Codesandbox)
   relativeImports,
   // md file location in node_modules, used to resolve relative import paths in examples
@@ -192,11 +194,27 @@ export const Example = ({
   const previewId = getExampleId(source, section[0], id, title);
   const className = getExampleClassName(source, section[0], id);
 
+  const [isDark, setIsDark] = useState(false);
+  const toggleDark = () => {
+    document.documentElement.classList.toggle('pf-v6-theme-dark');
+    setIsDark(!isDark);
+  }
+
+  const [isSpooky, setIsSpooky] = useState(false);
+  const toggleSpooky = () => {
+    document.documentElement.classList.toggle('pf-v6-theme-spooky');
+    setIsSpooky(!isSpooky);
+
+    if (!isDark && !isSpooky) {
+      toggleDark();
+    }
+  };
+
   if (isFullscreenPreview) {
     return (
       <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
-        {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
+        {(hasDarkThemeSwitcher || hasRTLSwitcher || hasSpookySwitcher) && (
           <Flex
             direction={{ default: 'column' }}
             gap={{ default: 'gapLg' }}
@@ -206,12 +224,8 @@ export const Example = ({
               <Switch
                 id="ws-example-theme-switch"
                 label="Dark theme"
-                defaultChecked={false}
-                onChange={() =>
-                  document
-                    .querySelector('html')
-                    .classList.toggle('pf-v6-theme-dark')
-                }
+                isChecked={isDark}
+                onChange={toggleDark}
               />
             )}
             {hasRTLSwitcher && (
@@ -226,6 +240,16 @@ export const Example = ({
                 }}
               />
             )}
+            {hasSpookySwitcher && (
+              <Switch
+              aria-label="Toggle spooky theme"
+              id="toggle-spooky"
+              label="Spooky theme"
+              onClick={toggleSpooky}
+              isChecked={isSpooky}
+            />
+            )
+            }
           </Flex>
         )}
       </div>

packages/documentation-framework/scripts/webpack/webpack.base.config.js

@@ -14,6 +14,7 @@ module.exports = (_env, argv) => {
     hasDesignGuidelines = false,
     hasDarkThemeSwitcher = false,
     hasRTLSwitcher = false,
+    hasSpookySwitcher = false,
     componentsData = {},
     sideNavItems = [],
     topNavItems = [],
@@ -137,6 +138,7 @@ module.exports = (_env, argv) => {
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
         'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
         'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher),
+        'process.env.hasSpookySwitcher': JSON.stringify(hasSpookySwitcher),
         'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),

packages/documentation-framework/templates/html.ejs

@@ -9,6 +9,9 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/Favicon-Light-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/Favicon-Light-32x32.png">
     <link rel="icon" type="image/png" sizes="48x48" href="/assets/Favicon-Light-48x48.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Butcherman&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
     <link rel="manifest" href="/assets/manifest.json">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#151515">

packages/documentation-site/package.json

@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.1",
+    "@patternfly/documentation-framework": "6.0.4",
     "@patternfly/react-catalog-view-extension": "6.0.0",
     "@patternfly/react-console": "6.0.0",
     "@patternfly/react-docs": "7.0.0",

packages/documentation-site/patternfly-docs/content/tokens/halloween.md

@@ -0,0 +1,32 @@
+---
+id: Halloween
+section: tokens
+---
+
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import cauldron from './img/cauldron.png';
+
+import HatWizardIcon from '@patternfly/react-icons/dist/esm/icons/hat-wizard-icon';
+import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon';  
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+## Demos
+
+### Halloween
+```js isFullscreen hasSpookySwitcher file="./halloween.tsx"
+```