🎨 Enforces Theme type for styled-components useTheme hook

Ensures that the `useTheme` hook is correctly typed as `Theme` from the
`ColorSchemeProvider` across various components. This provides type safety
when accessing theme properties, preventing potential runtime errors.

Specifically, the changes involve casting the result of `useTheme()` to `Theme`
in components such as `AccordionHead`, `Button`, `SearchBox`, `SearchInput`,
and `Slider`.

Author: Jannik Weise

packages/core/src/components/accordion/accordion-head/AccordionHead.tsx

@@ -15,6 +15,7 @@ import { useTheme } from 'styled-components';
 import { useElementSize } from '../../../hooks/useElementSize';
 import { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';
 import { AreaContext } from '../../area-provider/AreaContextProvider';
+import type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';
 import Icon from '../../icon/Icon';
 import Input, { InputSize, type InputProps } from '../../input/Input';
 import SearchInput from '../../search-input/SearchInput';
@@ -82,7 +83,7 @@ const AccordionHead: FC<AccordionHeadProps> = ({
 
     const [isSearchActive, setIsSearchActive] = useState(false);
 
-    const theme = useTheme();
+    const theme = useTheme() as Theme;
 
     const titleElementWrapperRef = useRef<HTMLDivElement>(null);
     const titleWrapperRef = useRef<HTMLDivElement>(null);
@@ -139,13 +140,13 @@ const AccordionHead: FC<AccordionHeadProps> = ({
 
         if (
             theme?.accordionIcon &&
-            theme.accordionIcon !== 110 &&
-            theme.accordionIcon !== 1110100
+            (theme.accordionIcon as unknown as number) !== 110 &&
+            (theme.accordionIcon as unknown as number) !== 1110100
         ) {
-            internalIcon = (theme.accordionIcon as number).toString(16);
+            internalIcon = (theme.accordionIcon as unknown as number).toString(16);
         }
 
-        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';
+        const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';
 
         return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;
     }, [icon, theme, isFixed]);
@@ -184,6 +185,7 @@ const AccordionHead: FC<AccordionHeadProps> = ({
                 {typeof onTitleInputChange === 'function' ? (
                     // eslint-disable-next-line react/jsx-no-constructed-context-values
                     <AreaContext.Provider value={{ shouldChangeColor: true }}>
+                        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                         <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />
                     </AreaContext.Provider>
                 ) : (

packages/core/src/components/button/Button.tsx

@@ -77,7 +77,7 @@ const Button: FC<ButtonProps> = ({
 
     const buttonClasses = clsx('beta-chayns-button ellipsis', className);
 
-    const theme: Theme = useTheme();
+    const theme = useTheme() as Theme;
 
     const iconColor = useMemo(() => {
         if (isSecondary) {

packages/core/src/components/icon/Icon.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React, { FC, MouseEventHandler } from 'react';
-import { useTheme } from 'styled-components';
 import { getStackSizeFactor } from '../../utils/icon';
 import { StyledIcon, StyledIconWrapper } from './Icon.styles';
 
@@ -74,8 +73,6 @@ const Icon: FC<IconProps> = ({
         }
     };
 
-    const theme = useTheme();
-
     let maxStackSizeFactor = 1;
 
     icons.forEach((icon) => {

packages/core/src/components/search-box/SearchBox.tsx

@@ -24,6 +24,7 @@ import type { IFilterButtonItem } from '../../types/filterButtons';
 import type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';
 import { calculateContentHeight } from '../../utils/calculate';
 import { searchList } from '../../utils/searchBox';
+import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { ContextMenuCoordinates } from '../context-menu/ContextMenu';
 import Icon from '../icon/Icon';
 import Input from '../input/Input';
@@ -168,7 +169,7 @@ const SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(
             typeof presetValue === 'string' && presetValue !== '',
         );
 
-        const theme = useTheme();
+        const theme = useTheme() as Theme;
 
         const { browser } = getDevice();
 

packages/core/src/components/search-input/SearchInput.tsx

@@ -19,7 +19,7 @@ import {
     StyledSearchInputPseudoElement,
 } from './SearchInput.styles';
 import { useTheme } from 'styled-components';
-import { Theme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';
 import { useElementSize } from '../../hooks/useElementSize';
 
 export type SearchInputProps = {

packages/core/src/components/slider/Slider.tsx

@@ -8,6 +8,7 @@ import {
     fillSlider,
     getThumbMaxWidth,
 } from '../../utils/slider';
+import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';
 import {
     StyledSlider,
     StyledSliderInput,
@@ -90,7 +91,7 @@ const Slider: FC<SliderProps> = ({
 
     const sliderWrapperSize = useElementSize(sliderWrapperRef);
 
-    const theme = useTheme();
+    const theme = useTheme() as Theme;
 
     useEffect(() => {
         if (shouldShowThumbLabel) {

packages/core/src/components/tag-input/TagInput.tsx

@@ -22,6 +22,7 @@ import {
     StyledTagInputTagWrapperText,
 } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
+import type { Theme } from '../color-scheme-provider/ColorSchemeProvider';
 
 export type TagInputProps = {
     /**
@@ -52,9 +53,10 @@ const TagInput = forwardRef<TagInputRef, TagInputProps>(
         const [currentValue, setCurrentValue] = useState('');
         const [selectedId, setSelectedId] = useState<Tag['id']>();
 
-        const theme = useTheme();
         const areaProvider = useContext(AreaContext);
 
+        const theme = useTheme() as Theme;
+
         useEffect(() => {
             if (tags) {
                 setInternalTags(tags);