Merge pull request #139 from rangle/healthcare-wellness-theme

Add the healthcare and wellness themes

.github/workflows/main-cache.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     steps:
       - name: Checkout the codebase
         uses: actions/checkout@v3

.github/workflows/merge-chromatic.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
     # Job steps
     steps:
       - name: Checkout the codebase

apps/demo/app/routes/index.tsx

@@ -10,31 +10,31 @@ import {
 import {
   Github,
   Figma,
-  ArrowRight,
+  ThemeBrush,
   Twitter,
   LinkedIn,
   Instagram,
   Youtube,
   LightMode,
   DarkMode,
+  ArrowRight,
 } from '@rangle/radius-foundations';
 import { radiusTokens } from '@rangle/radius-foundations';
-import {
-  imageBasePath,
-  defaultBrand,
-} from '@rangle/radius-foundations';
+import { imageBasePath, defaultBrand } from '@rangle/radius-foundations';
 import { css } from '@emotion/css';
 import { useIsScrolled } from '../../hooks/use-is-scrolled';
 
 /** Temp helper to fix icon type collision due to the way they are exported */
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 const modes = ['dark-mode', 'light-mode'];
+const themes = ['wellness', 'healthcare'];
 /** This should be integrated into a Page layout component, currently a WIP in design */
 const pageMaxWidth = 1280;
 
 export default function Index() {
   const [mode, setMode] = useState(1);
+  const [theme, setTheme] = useState(1);
   const isScrolled = useIsScrolled();
 
   const toggleMode = () => {
@@ -44,6 +44,13 @@ export default function Index() {
     setMode(mode ^ 1);
   };
 
+  const toggleTheme = () => {
+    const themeElement = document.querySelector(`.${themes[theme]}`);
+    themeElement?.classList.remove(themes[theme]);
+    themeElement?.classList.add(themes[theme ^ 1]);
+    setTheme(theme ^ 1);
+  };
+
   return (
     <RadiusAutoLayout
       direction="vertical"
@@ -91,6 +98,13 @@ export default function Index() {
               onClick: toggleMode,
               icon: (mode ? DarkMode : LightMode) as IconType,
             },
+            {
+              'aria-label': `Switch to ${themes[theme ^ 1]} theme`,
+              title: `Switch to ${themes[theme ^ 1]} theme`,
+              as: 'button',
+              onClick: toggleTheme,
+              icon: ThemeBrush,
+            },
           ]}
           logos={
             <>
@@ -382,7 +396,7 @@ export default function Index() {
               iconRight: ArrowRight as IconType,
             },
           ]}
-          copyright="© Rangle.io, 2023.  All rights reserved."
+          copyright="© Rangle.io, 2024.  All rights reserved."
           privacyPolicy={{
             children: 'Privacy Policy',
             href: '#',

apps/demo/app/utils/demo.utils.ts

@@ -9,7 +9,7 @@ const voidCallback = () => {};
  */
 const brandOrEventToken = '{--brandOrEvent}';
 /** Event tokens to look for to identify if an event is active */
-const events = ['--halloweenevent'];
+const events: any = [];
 
 export const useMutationObserver = () => {
   useEffect(() => {
@@ -88,7 +88,9 @@ export const useMutationObserver = () => {
           /** Cached computed styles to avoid recomputation */
           const computedStyle = getComputedStyle(element);
           const computedValues = references.reduce((acc, token) => {
-            const event = events.find((e) => computedStyle.getPropertyValue(e));
+            const event = events.find((e: any) =>
+              computedStyle.getPropertyValue(e)
+            );
             if (token === brandOrEventToken) {
               return {
                 ...acc,

apps/demo/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "license": "",
   "scripts": {
-    "load-assets": "pwd && cp -r ../../libs/foundations/src/generated/brand public && cp -r ../../libs/foundations/src/generated/halloweenevent public",
+    "load-assets": "pwd && cp -r ../../libs/foundations/src/generated/brand public",
     "build": "npm run load-assets && npx remix build",
     "dev": "npm run load-assets && npx remix dev",
     "postinstall": "npx remix setup node",

libs/foundations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangle/radius-foundations",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "main": "generated/design-tokens.constants.ts",
   "description": "Foundation scripts and variables for Design Systems",
   "files": [