refact: move away from hardcoded theme objects

scout-ch · Oct 18, 2023 · aca6c1c · aca6c1c
1 parent b2bd851
commit aca6c1c
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 30 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -115,7 +115,7 @@ function App() {
   // HelmetProvider allows the use of Helmet components to set the title 
   // and, in the future, meta tags and SEO data
   return (
-    <ThemeProvider>
+    <ThemeProvider colorMode='auto'>
       <HelmetProvider>
         <Helmet>
           <script defer data-domain="scout-ch.github.io/thilo" src={'https://plausible.io/js/script.js'}></script>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -44,7 +44,7 @@ function Footer({ t }: Props) {
 
   // render the footer with the localized navigation buttons
   return <>
-    <div data-container="footer" className='py-6 color-fg-default color-bg-default color-border-default'>
+    <div data-container="footer" className='py-6'>
       <nav className="footer-nav d-flex flex-justify-center">
         {/* <div className='footer-logo hide-sm mr-6 mb-1 d-inline-flex'><img alt='PBSLogo' src={PBSLogo}></img></div> */}
         {(prevSection || nextSection) && <>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate, Link as ReactRouterLink } from 'react-router-dom'
 import cx from 'classnames'
-import { ActionList, ActionMenu, Dialog, IconButton } from '@primer/react'
+import { ActionList, ActionMenu, Dialog, IconButton, useTheme } from '@primer/react'
 import {
   ThreeBarsIcon,
   SearchIcon,
@@ -14,6 +14,7 @@ import SearchInput from './SearchInput'
 import SidebarNav from './SidebarNav'
 import styles from './Header.module.scss'
 import { withTranslation } from 'react-i18next'
+import { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider'
 
 type Props = {
     t?: any
@@ -33,6 +34,7 @@ const Header = ({ t }: Props) => {
     {id: "light", name: t("header.theme_light_name")},
     {id: "dark",  name: t("header.theme_dark_name")},
   ]
+  const {setColorMode} = useTheme();
 
   const [selectedColorScheme, setSelectedColorScheme] = useState(colorSchemes[0])
 
@@ -144,7 +146,6 @@ const Header = ({ t }: Props) => {
           <IconButton
             className={cx(
               "border hide-xxl mr-3",
-              'color-bg-default color-fg-default color-border-muted'
             )}
             icon={ThreeBarsIcon}
             aria-label="Open Sidebar"
@@ -164,7 +165,7 @@ const Header = ({ t }: Props) => {
             isOpen={isSidebarOpen}
             onDismiss={closeSidebar}
             aria-labelledby="sidebar-overlay-header"
-            className='color-bg-default color-fg-default color-border-muted
+            className='
             rounded-0 rounded-right-3 position-fixed top-0 left-0
             '
             sx={{
@@ -177,7 +178,6 @@ const Header = ({ t }: Props) => {
             }}
           >
             <Dialog.Header
-            className='color-fg-default color-bg-default'
               id="sidebar-overlay-header"
               >
               {t('sideBarNav.title')}
@@ -202,7 +202,6 @@ const Header = ({ t }: Props) => {
                 className={cx(
                   'hide-lg hide-xl',
                   !isSearchOpen ? 'd-flex flex-items-center ml-auto' : 'd-none',
-                  'color-bg-default color-fg-default color-border-muted'
                 )}
                 onClick={() => setIsSearchOpen(!isSearchOpen)}
                 aria-label="Open Search Bar"
@@ -215,7 +214,7 @@ const Header = ({ t }: Props) => {
                 aria-expanded={isSearchOpen ? 'true' : 'false'}
                 icon={XIcon}
 
-                className='color-bg-default color-fg-default color-border-muted show'
+                className='show'
                 sx={
                   isSearchOpen
                     ? {
@@ -247,7 +246,6 @@ const Header = ({ t }: Props) => {
                     <IconButton
                       icon={KebabHorizontalIcon}
                       aria-label="Open Menu"
-                      className='color-bg-default color-fg-default color-border-muted'
                       sx={
                         isSearchOpen
                           ? // The ... menu button when the smaller width search UI is open.  Since the search
@@ -283,7 +281,6 @@ const Header = ({ t }: Props) => {
                     />
                   </ActionMenu.Anchor>
                   <ActionMenu.Overlay align="start" 
-                    className='color-bg-default color-fg-default color-border-muted'
                   >
                     <ActionList>
                       <ActionList.Group>
@@ -295,8 +292,7 @@ const Header = ({ t }: Props) => {
                       </ActionList.Group>
                       <ActionMenu>
                         <ActionMenu.Button
-                          className='width-full
-                          color-bg-default color-fg-default color-border-muted'
+                          className='width-full'
                           sx={{
                             textAlign: 'left',
                             'span:first-child': { display: 'inline' },
@@ -306,15 +302,12 @@ const Header = ({ t }: Props) => {
                         </ActionMenu.Button>
                         <ActionMenu.Overlay>
                           <ActionList selectionVariant="single"
-                            className='color-bg-default color-fg-default color-border-muted'
                           >
                             {colorSchemes.map(colorScheme => (
                               <ActionList.Item
-
-                      className='color-bg-default color-fg-default color-border-muted'
                                 key={colorScheme.id}
                                 selected={colorScheme.id === selectedColorScheme.id}
-                                onSelect={() => {setSelectedColorScheme(colorScheme); }}
+                                onSelect={() => {setSelectedColorScheme(colorScheme); setColorMode(colorScheme.id as SetStateAction<ColorModeWithAuto>)}}
                               >
                                 {colorScheme.name}
                               </ActionList.Item>
@@ -325,7 +318,6 @@ const Header = ({ t }: Props) => {
 
                       <ActionList.Group>
                         <ActionList.Item as={ReactRouterLink} to="/impressum"
-                          className='color-fg-default'
                           >
                           Impressum
                         </ActionList.Item>

diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
@@ -107,7 +107,7 @@ const LanguagePicker = ({ t, xs, mediumOrLower }: Props) => {
           <ActionMenu>
             <ActionMenu.Anchor>
               <ActionMenu.Button
-                className="width-full color-fg-default color-bg-default color-border-muted"
+                className="width-full"
                 aria-label={`Select language: current language is ${selectedLang.name}`}
                 sx={{
                   height: 'auto',
@@ -120,7 +120,7 @@ const LanguagePicker = ({ t, xs, mediumOrLower }: Props) => {
                 <span className="color-fg-muted text-normal f6">{selectedLang.name}</span>
               </ActionMenu.Button>
             </ActionMenu.Anchor>
-            <ActionMenu.Overlay align="end" className="color-fg-default color-bg-default color-border-muted">
+            <ActionMenu.Overlay align="end">
               <ActionList selectionVariant="single">{languageList}</ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -49,7 +49,6 @@ function SearchInput({ t, keyword, onChange, onKeyDown, tooltipDirection }: Prop
         onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')}
         placeholder={t('searchPage.searchPlaceholder')}
         maxLength={512}
-        className='color-bg-default color-fg-default color-border-muted'
         sx={{
           width: '100%',
           height: '2rem',
@@ -62,7 +61,6 @@ function SearchInput({ t, keyword, onChange, onKeyDown, tooltipDirection }: Prop
     </label>
     <Tooltip aria-label={t("searchPage.tooltip")} direction={tooltipDirection? tooltipDirection : 'n'}>
       <IconButton
-       className='color-bg-default color-fg-default color-border-muted'
         aria-label={t("searchPage.tooltip")}
         icon={SearchIcon}
         sx={{ borderTopLeftRadius: 'unset', borderBottomLeftRadius: 'unset' }}

diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
@@ -39,11 +39,10 @@ function SidebarNav(props: Props) {
             const id = `subnav_item_${chapter.sorting}_${chapter.slug_with_section}`;
             return (
                 <NavList.Item 
-                    // className={cx('ml-4', `${chapter.slug_with_section}`)} 
+                    className={cx('ml-4', `${chapter.slug_with_section}`)} 
                     // aria-current={isActive && "page"}
                     key={id} id={id}
                     as={ReactRouterLink} to={(`${chapter.slug_with_section}`)}
-                    className='color-fg-default color-border-muted'
                 >
                     <NavList.LeadingVisual style={{color: section.color_primary}}>
                         {/* fill has to be added to the parent, as the prop isn't
@@ -75,17 +74,15 @@ function SidebarNav(props: Props) {
                 </NavList.LeadingVisual>
                 { chapterNavItems.length > 0
                     ? 
-                    <Link as={ReactRouterLink} to={section.slug}
-                        className='color-fg-default color-border-muted'    
-                    >
+                    <Link as={ReactRouterLink} to={section.slug}>
                         <Truncate title={section.menu_name} as='span' 
-                        className='d-inline-block' maxWidth={200}
+                        className='d-inline-block color-fg-default' maxWidth={200}
                         >
                             {section.menu_name}
                         </Truncate>
                     </Link>
                     : <Truncate title={section.menu_name} as='span' 
-                    className='d-inline-block color-fg-default color-border-muted' maxWidth={200}
+                    className='d-inline-block color-fg-default' maxWidth={200}
                     >
                         {section.menu_name}
                     </Truncate>
@@ -117,7 +114,6 @@ function SidebarNav(props: Props) {
                 <NavList.Item as={ReactRouterLink} to='/'
                     className={cx(
                     classHome,
-                        'color-fg-default color-border-muted'
                     )}
                 >
                     <NavList.LeadingVisual><HomeIcon/></NavList.LeadingVisual> 

diff --git a/src/styles/quiz.scss b/src/styles/quiz.scss
@@ -37,6 +37,7 @@
     font-weight: unset !important;
     font-size: unset !important;
     @include default-border;
+    @include default-hover;
     padding: var(--base-size-8, 8px) !important;
     &:disabled {
       cursor: not-allowed;

diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
@@ -154,11 +154,19 @@ textarea {
 @mixin default-color {
   color: var(--fgColor-default, var(--color-fg-default)) !important;
   background-color: var(--bgColor-default, var(--color-bg-default)) !important;
+  &:hover {
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+  }
 }
 @mixin default-border {
   border: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !important;
   border-radius: 6px !important;
 }
+@mixin default-hover {
+  &:hover {
+    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
+  }
+}
 
 @mixin default-style {
   @include default-color();