@takaro/lib-components 0.4.4 → 0.4.7

package/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:22.11.0-alpine AS build
+FROM node:24.11.0-alpine AS build
 
 ENV NODE_ENV=development
 WORKDIR /app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.4.4",
+  "version": "0.4.7",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",

package/src/components/actions/Button/Button.stories.tsx

@@ -145,42 +145,5 @@ export const Examples = () => (
     >
       Loading Button
     </Button>
-
-    {/* white */}
-    <Button
-      onClick={() => {
-        /* */
-      }}
-      variant="white"
-    >
-      White Button
-    </Button>
-    <Button
-      icon={<Icon size={20} />}
-      onClick={() => {
-        /* */
-      }}
-      variant="white"
-    >
-      Icon Button
-    </Button>
-    <Button
-      disabled
-      onClick={() => {
-        /* */
-      }}
-      variant="white"
-    >
-      Disabled Button
-    </Button>
-    <Button
-      isLoading
-      onClick={() => {
-        /* */
-      }}
-      variant="white"
-    >
-      Loading Button
-    </Button>
   </>
 );

package/src/components/actions/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <Button/> 1`] = `
 <div>
   <button
-    class="sc-gvPdwL csCrvu"
+    class="sc-pKqro cGkgJf"
     color="primary"
     tabindex="0"
     type="button"

package/src/components/actions/Button/index.tsx

@@ -1,6 +1,6 @@
 import { JSX, cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement, PropsWithChildren } from 'react';
 import { Spinner } from '../../../components';
-import { ButtonColor, Default, Outline, Clear, White } from './style';
+import { ButtonColor, Default, Outline, Clear } from './style';
 import { Size, Variant } from '../../../styled';
 
 export interface ButtonProps {
@@ -14,7 +14,7 @@ export interface ButtonProps {
   size?: Size;
   type?: 'submit' | 'reset' | 'button';
   // TODO: clear should be renamed to text
-  variant?: Variant | 'white' | 'clear';
+  variant?: Variant | 'clear';
   color?: ButtonColor | 'white';
   /// When nesting forms a button can be linked to only fire the form with the given name.
   form?: string;
@@ -82,12 +82,6 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
             {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
           </Clear>
         );
-      case 'white':
-        return (
-          <White {...props}>
-            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
-          </White>
-        );
     }
   }
 

package/src/components/actions/Button/style.ts

@@ -140,10 +140,3 @@ export const Clear = styled(Outline)`
     color: ${({ theme, color }): string => theme.colors[color]};
   }
 `;
-
-export const White = styled(Clear)`
-  background: ${({ theme }): string => theme.colors.white};
-  &:disabled {
-    background-color: white;
-  }
-`;

package/src/components/actions/ContextMenu/index.tsx

@@ -31,7 +31,6 @@ import { styled } from '../../../styled';
 
 const Container = styled.div`
   border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  box-shadow: ${({ theme }) => theme.elevation[2]};
   background-color: ${({ theme }) => theme.colors.background};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   &:focus-visible {

package/src/components/actions/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Should render <IconButton /> 1`] = `
 <div>
   <button
     aria-label="test"
-    class="sc-djVXDX cRGHRs"
+    class="sc-dBFDNq bubVam"
     color="primary"
     type="button"
   >

package/src/components/actions/IconButton/style.ts

@@ -22,10 +22,6 @@ export const Default = styled.button<{ color: Color }>`
     div {
       background-color: ${({ theme }) => theme.colors.backgroundAccent};
     }
-    svg {
-      fill: white;
-      stroke: white;
-    }
   }
 
   &:focus {
@@ -33,10 +29,6 @@ export const Default = styled.button<{ color: Color }>`
     div {
       border-color: ${({ theme, color }) => theme.colors[color]};
     }
-    svg {
-      fill: white;
-      stroke: white;
-    }
   }
 
   &:disabled {

package/src/components/actions/ToggleButton/style.ts

@@ -1,3 +1,4 @@
+import { shade } from 'polished';
 import { styled } from '../../../styled';
 import { orientation } from './ToggleButtonGroup';
 
@@ -65,7 +66,7 @@ export const Item = styled.button<{ isSelected: boolean; isDisabled: boolean }>`
   font-weight: 400;
   border-left: none;
   background-color: ${({ theme, isSelected, isDisabled }) =>
-    isDisabled ? theme.colors.disabled : isSelected ? theme.colors.primary : theme.colors.background};
+    isDisabled ? theme.colors.disabled : isSelected ? shade(0.5, theme.colors.primary) : theme.colors.background};
   cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 
   svg {

package/src/components/charts/echarts/EChartsBase.tsx

@@ -139,7 +139,6 @@ export const EChartsBase: FC<EChartsBaseProps> = ({
         textStyle: {
           color: theme.colors.text,
         },
-        extraCssText: `box-shadow: ${theme.elevation[200]};`,
       },
       grid: {
         left: '3%',

package/src/components/data/Avatar/style.ts

@@ -42,7 +42,7 @@ export const Container = styled.div<{ size: Size; variant?: AvatarVariant }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: ${({ theme }) => theme.colors.text};
   font-weight: 700;
 
   img {

package/src/components/data/Chip/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, ReactElement, cloneElement } from 'react';
 import { AiOutlineClose as Icon } from 'react-icons/ai';
-import { Container, Dot } from './style';
-import { AlertVariants, Color, Variant } from '../../../styled/types';
+import { Container } from './style';
+import { AlertVariants, Color } from '../../../styled/types';
 
 export type ChipColor = Color | AlertVariants | 'backgroundAccent';
 
@@ -15,7 +15,6 @@ export interface ChipProps {
   onClick?: () => void;
   onDelete?: () => void;
   color: ChipColor;
-  variant?: Variant;
   isLoading?: boolean;
   icon?: ReactElement;
   showIcon?: ShowIcon;
@@ -24,14 +23,12 @@ export interface ChipProps {
 export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
   {
     color,
-    variant = 'default',
     label,
     disabled = false,
     readOnly = false,
     onClick = undefined,
     onDelete = undefined,
     isLoading = false,
-    dot = false,
     icon,
     showIcon = 'always',
   },
@@ -44,28 +41,17 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
         clickable={!readOnly && !disabled && onClick !== undefined}
         color={color}
         disabled={disabled}
-        outline={false}
         onClick={onClick ? onClick : undefined}
         className="placeholder"
         showIcon={showIcon}
       >
-        {dot && <Dot color={color} outline={variant !== 'default'} />}
         <span style={{ minWidth: '70px', minHeight: '15px' }}></span>
       </Container>
     );
   }
 
   return (
-    <Container
-      ref={ref}
-      clickable={onClick !== undefined}
-      color={color}
-      disabled={disabled}
-      onClick={onClick ? onClick : undefined}
-      outline={variant !== 'default'}
-      showIcon={showIcon}
-    >
-      {dot && <Dot color={color} outline={variant !== 'default'} />}
+    <Container ref={ref} clickable={onClick !== undefined} color={color} disabled={disabled} showIcon={showIcon}>
       <span>{label}</span>
       {!onDelete && icon && cloneElement(icon, { size: 12, className: 'icon' })}
       {onDelete && !readOnly && !disabled && <Icon onClick={onDelete} size={12} />}

package/src/components/data/Chip/style.ts

@@ -5,7 +5,6 @@ import { shade } from 'polished';
 export const Container = styled.div<{
   disabled: boolean;
   color: ChipColor;
-  outline: boolean;
   clickable: boolean;
   showIcon: ShowIcon;
 }>`
@@ -17,6 +16,8 @@ export const Container = styled.div<{
   cursor: ${({ clickable }): string => (clickable ? 'pointer' : 'auto')};
   width: fit-content;
   height: 20px;
+  background-color: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+  border: 0.1rem solid ${({ theme, color }) => theme.colors[color]};
 
   svg {
     margin-left: ${({ theme }) => theme.spacing['0_5']};
@@ -24,21 +25,11 @@ export const Container = styled.div<{
     transition: width 0.2s ease-in-out;
     will-change: width;
     display: ${({ showIcon }): string => (showIcon === 'always' ? 'inline-block' : 'none')};
-    ${({ theme, color, outline }) => {
-      if (!outline) {
-        return 'fill: white; stroke: white;';
-      }
+    ${({ theme, color }) => {
       return `fill: ${theme.colors[color]};`;
     }}
   }
 
-  ${({ theme, color, outline }): string => {
-    if (!outline) {
-      return 'border: 0.1rem solid transparent;';
-    }
-    return `border: 0.1rem solid ${shade(0.5, theme.colors[color])};`;
-  }}
-
   &:hover {
     svg {
       display: inline-block;
@@ -53,33 +44,6 @@ export const Container = styled.div<{
 
     font-size: ${({ theme }) => theme.fontSize.medium};
     user-select: none;
-
-    ${({ theme, color, outline }) => {
-      if (!outline) {
-        return 'color: white;';
-      }
-      switch (color) {
-        case 'backgroundAccent':
-        case 'secondary':
-          return `color: ${theme.colors.text};`;
-        default:
-          return `color: ${theme.colors[color]};`;
-      }
-    }}
+    color: white;
   }
-
-  ${({ theme, color, outline }): string => {
-    if (outline) {
-      return `background-color: ${shade('0.8', theme.colors[color])};`;
-    }
-    return `background-color: ${theme.colors[color]};`;
-  }}
-`;
-
-export const Dot = styled.div<{ color: ChipColor; outline: boolean }>`
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 50%;
-  margin-right: ${({ theme }) => theme.spacing['0_5']};
-  background-color: ${({ outline, theme, color }) => (outline ? theme.colors[color] : 'white')};
 `;

package/src/components/data/CopyId/index.tsx

@@ -75,7 +75,6 @@ export const CopyId: FC<CopyIdProps> = ({
         <Chip
           icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
           onClick={() => handleCopy(id)}
-          variant="outline"
           label={copied ? copyText : placeholder ? placeholder : id}
           color="backgroundAccent"
         />
@@ -101,7 +100,6 @@ export const CopyId: FC<CopyIdProps> = ({
     <Chip
       icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
       onClick={() => handleCopy(id)}
-      variant="outline"
       label={copied ? copyText : placeholder ? placeholder : id}
       color="backgroundAccent"
     />

package/src/components/data/Stats/Stat.tsx

@@ -67,6 +67,7 @@ const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: S
       }
     }};
     color: ${({ theme }) => theme.colors.secondary};
+    font-size: ${({ theme }) => theme.fontSize.medium};
     margin-bottom: ${({ theme }) => theme.spacing['0_5']};
   }
 
@@ -83,6 +84,8 @@ const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: S
           return theme.fontSize.large;
       }
     }};
+    color: ${({ theme }) => theme.colors.text};
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
     letter-spacing: 1px;
     margin: 0;
     padding: 0;

package/src/components/feedback/Alert/__snapshots__/Alert.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Should render <Alert/> 1`] = `
   <div
     aria-atomic="true"
     aria-live="polite"
-    class="sc-aXZVg efcfNn"
+    class="sc-aXZVg dfhkGl"
     role="status"
     style="opacity: 0; will-change: opacity;"
   >

package/src/components/feedback/Alert/index.tsx

@@ -7,7 +7,6 @@ import {
   AiFillInfoCircle as Info,
 } from 'react-icons/ai';
 import { AnimatePresence } from 'framer-motion';
-import { Elevation } from '../../../styled/';
 import { Button } from '../../../components';
 
 export type AlertVariants = 'success' | 'error' | 'warning' | 'info';
@@ -21,13 +20,12 @@ export interface AlertProps {
   variant: AlertVariants;
   title?: string;
   text?: string | string[] | ReactElement;
-  elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 2, action },
+  { variant, title, text, dismiss = false, action },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -92,7 +90,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           $hasTitle={hasTitle}
           initial={{ opacity: 0 }}
           $variant={variant}
-          $elevation={elevation}
           transition={{ duration: 0.2 }}
           ref={ref}
           role={getAriaRole()}

package/src/components/feedback/Alert/style.ts

@@ -1,4 +1,4 @@
-import { Elevation, styled } from '../../../styled';
+import { styled } from '../../../styled';
 import { AlertVariants } from '.';
 import { motion } from 'framer-motion';
 import { shade } from 'polished';
@@ -9,12 +9,10 @@ import { shade } from 'polished';
 export const Container = styled(motion.div)<{
   $variant: AlertVariants;
   $hasTitle: boolean;
-  $elevation: Elevation;
 }>`
   width: 100%;
   padding: ${({ theme }) => theme.spacing['0_75']};
   border-radius: ${({ theme }) => theme.borderRadius.large};
-  box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
   margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
   h2 {
     font-size: ${({ theme }) => theme.fontSize.mediumLarge};

package/src/components/feedback/ErrorFallback/index.tsx

@@ -27,6 +27,7 @@ const Container = styled.div`
     justify-content: center;
     font-size: ${({ theme }) => theme.fontSize.mediumLarge};
     margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+    color: ${({ theme }) => theme.colors.text};
 
     svg {
       margin-right: ${({ theme }) => theme.spacing['0_75']};

package/src/components/feedback/ErrorPage/index.tsx

@@ -16,11 +16,11 @@ const Container = styled.div`
   width: 700px;
   margin: 0 auto;
   padding: 6rem 0;
-
   
   p {
     font-size: 1.7rem;
     text-align: center;
+    color: ${({ theme }) => theme.colors.textAlt};
 
     &.error {
       margin-top: ${({ theme }) => theme.spacing[6]};
@@ -34,14 +34,14 @@ const Container = styled.div`
   h3 {
     font-size: 4.125rem;
     font-weight: 700;
-    color: ${({ theme }) => theme.colors.secondary};
+    color: ${({ theme }) => theme.colors.text};
     margin-bottom: .5rem;
     text-align: center;
   }
   h4 {
     font-weight: 600;
     font-size: 1.5rem;
-    color: ${({ theme }) => theme.colors.secondary};
+    color: ${({ theme }) => theme.colors.textAlt};
     margin: 3rem 0 1.5rem 0;
   }
   h5 {

package/src/components/feedback/IconTooltip/index.tsx

@@ -3,12 +3,10 @@ import { Tooltip, TooltipProps } from '../Tooltip';
 import { Size, styled } from '../../../styled';
 import { getIconSize } from '../../actions/IconButton/getIconSize';
 import { ButtonColor } from '../../actions/Button/style';
-import { shade } from 'polished';
 
 type TooltipIconColor = Exclude<ButtonColor, 'white'>;
 
 const TriggerContainer = styled.div<{ color: TooltipIconColor }>`
-  background: ${({ theme, color }) => shade(0.5, theme.colors[color])};
   border: 1px solid ${({ theme, color }) => theme.colors[color]};
   border-radius: ${({ theme }) => theme.borderRadius.small};
   display: flex;

package/src/components/feedback/NotificationBanner/index.tsx

@@ -1,13 +1,14 @@
 import { FC, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Elevation, styled } from '../../../styled';
+import { styled } from '../../../styled';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Tooltip } from '../Tooltip';
 import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { shade } from 'polished';
 
-const Container = styled(motion.div)<{ $elevation: Elevation }>`
+const Container = styled(motion.div)`
   position: sticky;
-  background-color: ${({ theme }): string => theme.colors.primaryShade};
+  background-color: ${({ theme }): string => shade(0.5, theme.colors.primary)};
   border: 1px solid ${({ theme }) => theme.colors.primary};
   display: flex;
   align-items: center;
@@ -15,7 +16,6 @@ const Container = styled(motion.div)<{ $elevation: Elevation }>`
   padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
   will-change: height;
   overflow: hidden;
-  box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
   z-index: ${({ theme }) => theme.zIndex.notificationBanner};
 
   div {
@@ -44,7 +44,6 @@ const Container = styled(motion.div)<{ $elevation: Elevation }>`
 export interface NotificationBannerProps {
   title: string;
   description: string;
-  elevation?: Elevation;
 }
 
 /* What is <NotificationBanner?
@@ -54,13 +53,13 @@ export interface NotificationBannerProps {
   IMPORTANT: the component requires a separate div mounted outside of root called with id notification-banner. 
 */
 
-export const NotificationBanner: FC<NotificationBannerProps> = ({ title, description, elevation = 4 }) => {
+export const NotificationBanner: FC<NotificationBannerProps> = ({ title, description }) => {
   const [visible, setVisible] = useState<boolean>(true);
 
   return createPortal(
     <AnimatePresence>
       {visible && (
-        <Container $elevation={elevation} initial={{ y: -40 }} animate={{ y: 0 }} exit={{ opacity: '0' }}>
+        <Container initial={{ y: -40 }} animate={{ y: 0 }} exit={{ opacity: '0' }}>
           <div>
             <h3>{title}</h3>
             <p>{description}</p>

package/src/components/feedback/Skeleton/__snapshots__/Skeleton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <Skeleton/> 1`] = `
 <div>
   <div
-    class="sc-aXZVg dMeLsA"
+    class="sc-aXZVg VRVWh"
   />
 </div>
 `;

package/src/components/feedback/Tooltip/TooltipContent.tsx

@@ -1,13 +1,12 @@
 import { forwardRef, HTMLProps } from 'react';
 import { useMergeRefs, FloatingPortal, FloatingArrow } from '@floating-ui/react';
 import { useTooltipContext } from './TooltipContext';
-import { Elevation, styled } from '../../../styled';
+import { styled } from '../../../styled';
 import { useTheme } from '../../../hooks';
 
-const Container = styled.div<{ elevation: Elevation }>`
+const Container = styled.div`
   background: ${({ theme }) => theme.colors.background};
   color: ${({ theme }) => theme.colors.text};
-  box-shadow: ${({ theme, elevation }) => theme.elevation[elevation]};
   pointer-events: none;
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   border: 1px solid ${({ theme }) => theme.colors.backgroundAlt};
@@ -30,7 +29,6 @@ export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElemen
   return (
     <FloatingPortal>
       <Container
-        elevation={1}
         ref={ref}
         style={{
           ...floatingStyles,

package/src/components/feedback/snacks/CookieConsent/style.ts

@@ -6,7 +6,6 @@ export const Wrapper = styled.div`
   padding: ${({ theme }) => theme.spacing['1_5']};
   max-width: 450px;
   border-radius: ${({ theme }) => theme.borderRadius.large};
-  box-shadow: ${({ theme }) => theme.elevation[4]};
 
   & > p {
     margin-top: ${({ theme }) => theme.spacing[1]};

package/src/components/feedback/snacks/Default/style.ts

@@ -6,7 +6,6 @@ export const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.background};
   padding: ${({ theme }) =>
     `${theme.spacing['1']} ${theme.spacing[2]} ${theme.spacing['1_5']} ${theme.spacing['1_5']}`};
-  box-shadow: ${({ theme }) => theme.elevation[4]};
   border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAlt};
   border-radius: ${({ theme }) => theme.borderRadius.large};
 `;

package/src/components/feedback/snacks/Drawer/index.tsx

@@ -5,7 +5,6 @@ import { AiOutlineClose as CloseIcon, AiOutlineDown as ArrowDownIcon } from 'rea
 import { Tooltip } from '../../../../components';
 
 const Wrapper = styled.div`
-  box-shadow: ${({ theme }) => theme.elevation[4]};
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 300px;
   border: 1px solid ${({ theme }) => theme.colors.backgroundAlt};

package/src/components/feedback/snacks/NetworkDetector/index.tsx

@@ -13,7 +13,6 @@ const Container = styled.div`
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 300px;
   background-color: white;
-  box-shadow: ${({ theme }): string => theme.elevation[4]};
   p {
     font-size: 1.325rem;
   }

package/src/components/inputs/Date/DatePicker/style.ts

@@ -13,7 +13,6 @@ export const ResultContainer = styled.div<{ readOnly: boolean; hasError: boolean
   border: 0.1rem solid ${({ theme }) => theme.colors.secondary};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
-  box-shadow: ${({ theme }) => theme.elevation[4]};
   text-transform: capitalize;
   z-index: ${({ theme }) => theme.zIndex.dropdown};
   cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'pointer')};

package/src/components/inputs/Date/subcomponents/Calendar/style.ts

@@ -1,3 +1,4 @@
+import { shade } from 'polished';
 import { styled } from '../../../../../styled';
 
 export const Wrapper = styled.div`
@@ -20,14 +21,15 @@ export const DayButton = styled.button<{ isSelected: boolean; isToday: boolean;
   width: 2rem;
   margin-left: auto;
   margin-right: auto;
-  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : 'transparent')};
+  background-color: ${({ theme, isSelected }) => (isSelected ? shade(0.5, theme.colors.primary) : 'transparent')};
   border: 1px solid ${({ theme, isSelected }) => (isSelected ? theme.colors.primary : 'transparent')};
   color: white;
   padding: ${({ theme }) => theme.spacing['1_5']};
   margin: 0;
 
   &:hover {
-    background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : theme.colors.secondary)};
+    background-color: ${({ theme, isSelected }) =>
+      isSelected ? shade(0.5, theme.colors.primary) : theme.colors.secondary};
   }
 
   &:disabled {

package/src/components/inputs/Date/subcomponents/TimePicker/style.ts

@@ -1,3 +1,4 @@
+import { shade } from 'polished';
 import { styled } from '../../../../../styled';
 
 export const List = styled.ul`
@@ -21,12 +22,13 @@ export const List = styled.ul`
 
 export const Item = styled.li<{ isSelected: boolean }>`
   cursor: pointer;
-  background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : 'transparent')};
+  background-color: ${({ theme, isSelected }) => (isSelected ? shade(0.5, theme.colors.primary) : 'transparent')};
   border: 1px solid ${({ theme, isSelected }) => (isSelected ? theme.colors.primary : 'transparent')};
   padding: ${({ theme }) => theme.spacing['0_5']};
   border-radius: ${({ theme }) => theme.borderRadius.small};
 
   &:hover {
-    background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.primaryShade : theme.colors.background)};
+    background-color: ${({ theme, isSelected }) =>
+      isSelected ? shade(0.5, theme.colors.primary) : theme.colors.background};
   }
 `;

package/src/components/inputs/RadioGroup/RadioItem.tsx

@@ -52,7 +52,7 @@ const Inner = styled(motion.div)<{ $isChecked: boolean; $readOnly: boolean }>`
   border-radius: 100%;
   background-color: ${({ theme, $readOnly }) => {
     if ($readOnly) return theme.colors.backgroundAlt;
-    return theme.colors.primaryShade;
+    return shade(0.5, theme.colors.primary);
   }};
   overflow: hidden;
   opacity: ${({ $isChecked }): number => ($isChecked ? 1 : 0)};

package/src/components/inputs/selects/SubComponents/style.ts

@@ -27,9 +27,7 @@ export const OptionContainer = styled.li<{
 
   &:hover {
     border-color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAlt : theme.colors.backgroundAccent)};
-    span {
-      color: white;
-    }
+    background-color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAlt : theme.colors.backgroundAccent)};
   }
 
   & > div {

package/src/components/inputs/selects/sharedStyle.ts

@@ -15,7 +15,6 @@ export const SelectContainer = styled.div`
   border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
-  box-shadow: ${({ theme }) => theme.elevation[4]};
   z-index: ${({ theme }) => theme.zIndex.dropdown};
 `;
 

package/src/components/navigation/HorizontalNav/style.ts

@@ -62,7 +62,7 @@ export const NavBar = styled.nav<{ variant: HorizontalNavVariant }>`
     font-size: ${({ theme }) => theme.fontSize.medium};
 
     &.active {
-      color: ${({ theme }) => theme.colors.text};
+      color: ${({ theme }) => theme.colors.primary};
 
       ${({ variant, theme }) => {
         switch (variant) {

package/src/components/navigation/IconNav/index.tsx

@@ -2,6 +2,7 @@ import { JSX, FC, cloneElement } from 'react';
 import { styled } from '../../../styled';
 import { Link, LinkProps } from '@tanstack/react-router';
 import { Tooltip } from '../../../components';
+import { shade } from 'polished';
 
 const Container = styled.nav`
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
@@ -19,7 +20,7 @@ const Container = styled.nav`
     border: 1px solid transparent;
     border-radius: ${({ theme }) => theme.borderRadius.small};
     &:hover {
-      background-color: ${({ theme }) => theme.colors.primaryShade};
+      background-color: ${({ theme }) => shade(0.5, theme.colors.primary)};
       border-color: ${({ theme }) => theme.colors.primary};
     }
   }

package/src/components/navigation/Steppers/Stepper/style.ts

@@ -1,3 +1,4 @@
+import { shade } from 'polished';
 import { styled } from '../../../../styled';
 import { StepStates } from '../stepStates';
 
@@ -81,7 +82,7 @@ export const StepCounter = styled.div<{
   border: 0.1rem solid
     ${({ theme, stepState }) => (stepState !== StepStates.OTHER ? theme.colors.primary : theme.colors.backgroundAccent)};
   background-color: ${({ stepState, theme }) =>
-    stepState === StepStates.CURRENT ? theme.colors.primaryShade : theme.colors.background};
+    stepState === StepStates.CURRENT ? shade(0.5, theme.colors.primary) : theme.colors.background};
   transition: all 0.2s ease-in-out;
   margin-bottom: ${({ theme }) => theme.spacing[1]};
   color: ${({ theme, stepState }) => (stepState !== StepStates.OTHER ? theme.colors.white : theme.colors.text)};

package/src/components/other/ActionMenu/index.tsx

@@ -1,7 +1,6 @@
 import { Children, forwardRef, FC, ReactElement, PropsWithChildren } from 'react';
 import { Container, Item } from './style';
 import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
-import { Elevation } from '../../../styled/';
 
 export interface ActionMenuProps {
   attributes: {
@@ -12,16 +11,14 @@ export interface ActionMenuProps {
   selected: number;
   setSelected: (selected: number) => void;
   children: ReactElement | ReactElement[];
-  elevation?: Elevation;
 }
 
 export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function ActionMenu(
-  { attributes, children, selected, setSelected, elevation = 4 },
+  { attributes, children, selected, setSelected },
   ref,
 ) {
   return (
     <Container
-      elevation={elevation}
       style={{
         position: attributes.strategy,
         top: attributes.y ? attributes.y + 5 : 0,

package/src/components/other/ActionMenu/style.ts

@@ -1,10 +1,9 @@
-import { Elevation, styled } from '../../../styled';
+import { styled } from '../../../styled';
 
-export const Container = styled.ul<{ elevation: Elevation }>`
+export const Container = styled.ul`
   display: flex;
   flex-direction: column;
   width: fit-content;
-  box-shadow: ${({ theme, elevation }) => theme.elevation[elevation]};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
   background-color: ${({ theme }) => theme.colors.background};

package/src/components/other/ClipBoard/__snapshots__/ClipBoard.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <ClipBoard /> 1`] = `
 <div>
   <div
-    class="sc-aXZVg jSPpZO"
+    class="sc-aXZVg kRYlLL"
     role="button"
     tabindex="-1"
   >
@@ -15,7 +15,7 @@ exports[`Should render <ClipBoard /> 1`] = `
       value="ClipBoard text"
     />
     <div
-      class="sc-gEvEer bneOhB"
+      class="sc-gEvEer juIItl"
     >
       <svg
         fill="currentColor"

package/src/components/other/Empty/__snapshots__/Empty.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Should render <Empty /> 1`] = `
       this is the header
     </h2>
     <p
-      class="sc-eqUAAy flGMfW"
+      class="sc-eqUAAy jLRJsD"
     >
       this is the description
     </p>

package/src/components/other/Plan/index.tsx

@@ -42,7 +42,7 @@ export const Plan: FC<PlanProps> = ({
           <FeaturesContainer>
             <h1 style={{}}>
               {title}
-              {highlight && <Chip color="primary" variant="outline" label="Most popular" />}
+              {highlight && <Chip color="primary" label="Most popular" />}
             </h1>
             <p style={{ marginBottom: '3rem' }}>{description}</p>
             <Divider

package/src/components/visual/Divider/__snapshots__/Divider.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Should render <Accordion /> 1`] = `
     class="sc-aXZVg ktErGV"
   >
     <div
-      class="sc-eqUAAy hsBlKB"
+      class="sc-eqUAAy hPeIkm"
     />
   </div>
 </div>

package/src/styled/GlobalStyle.ts

@@ -22,6 +22,7 @@ export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
   #takaro-root {
     margin: 0 auto;
     overflow-x: hidden;
+    background-color: ${({ theme }) => theme.colors.background};
   }
 
 

package/src/styled/Snackbar.tsx

@@ -20,7 +20,6 @@ export const SnackBarStyles = css<{ theme: ThemeType }>`
 
   div.SnackbarContent-root {
     border: 1px solid ${({ theme }) => theme.colors.background};
-    box-shadow: ${({ theme }): string => theme.elevation[4]}!important;
   }
 
   /* info */

package/src/styled/index.ts

@@ -1,11 +1,10 @@
 /* Re-export of styled-components styled default export which at typings for the custom theme */
-export { styled, lightTheme, darkTheme } from './theme';
-export type { ThemeType } from './theme';
+export { styled, lightTheme, darkTheme, ThemeProvider, useThemeSwitcher } from './theme';
+export type { ThemeType, ThemeName } from './theme';
 
 export { GlobalStyle } from './GlobalStyle';
 export * from './types';
 export { device } from './device';
 export * from './animations';
 
-export type { Elevation } from './elevation';
 export type { Spacing } from './spacing';

package/src/styled/{theme.ts → theme.tsx}

@@ -1,9 +1,9 @@
-import baseStyled, { ThemedStyledInterface } from 'styled-components';
+import baseStyled, { ThemedStyledInterface, ThemeProvider as StyledComponentsThemeProvider } from 'styled-components';
 import { breakpoint } from './breakpoint';
-import { elevationLight, elevationDark } from './elevation';
 import { spacing } from './spacing';
 import { zIndex } from './zIndex';
-import { shade } from 'polished';
+import { FC, PropsWithChildren, createContext, useContext } from 'react';
+import { useLocalStorage } from '../hooks';
 
 const fontSize = {
   tiny: '1rem',
@@ -24,7 +24,6 @@ const borderRadius = {
 };
 
 export const lightTheme = {
-  elevation: elevationLight,
   spacing,
   breakpoint,
   fontSize,
@@ -32,19 +31,16 @@ export const lightTheme = {
   zIndex,
   colors: {
     primary: '#664de5',
-    primaryShade: shade(0.5, '#664de5'),
-    secondary: '#030917',
-    placeholder: '#f5f5f5',
+    secondary: '#f0f0f0',
+    placeholder: '#f0f0f0',
     placeholderHighlight: '#ffffff',
-    shade: '#eaf8f0',
     white: '#ffffff',
-    background: '#f9f9f9',
-    backgroundAlt: '#e9e9e9',
-    // not set correctly yet.
-    backgroundAccent: '#353535',
-    disabled: '#151515',
-    text: '#030303',
-    textAlt: '#636363',
+    background: '#f5f5f5',
+    backgroundAlt: '#e0e0e0',
+    backgroundAccent: '#909090',
+    disabled: '#d0d0d0',
+    text: '#202020',
+    textAlt: '#666666',
     info: '#664de5',
     success: '#3ccd6A',
     warning: '#f57c00',
@@ -52,9 +48,7 @@ export const lightTheme = {
   },
 };
 
-// todo: this should be the color of modals:#343434
 export const darkTheme: ThemeType = {
-  elevation: elevationDark,
   spacing,
   breakpoint,
   fontSize,
@@ -62,12 +56,10 @@ export const darkTheme: ThemeType = {
   borderRadius,
   colors: {
     primary: '#664DE5',
-    primaryShade: shade(0.5, '#664de5'),
     secondary: '#353535',
     placeholder: '#202020',
     placeholderHighlight: '#303030',
     white: '#ffffff',
-    shade: '#eaf8f0',
     text: '#c2c2c2',
     textAlt: '#818181',
     background: '#080808',
@@ -85,3 +77,34 @@ export const darkTheme: ThemeType = {
 
 export type ThemeType = typeof lightTheme;
 export const styled = baseStyled as ThemedStyledInterface<ThemeType>;
+
+export type ThemeName = 'light' | 'dark';
+const themes: Record<ThemeName, ThemeType> = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+/// Multiple themes:
+interface ThemeContextType {
+  theme: ThemeName;
+  setTheme: (theme: ThemeName) => void;
+}
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useThemeSwitcher = () => {
+  const context = useContext(ThemeContext);
+  if (context == undefined) {
+    throw new Error('useThemeSwitcher must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { storedValue, setValue } = useLocalStorage<ThemeName>('theme', 'dark');
+
+  return (
+    <ThemeContext.Provider value={{ theme: storedValue, setTheme: setValue }}>
+      <StyledComponentsThemeProvider theme={themes[storedValue]}>{children} </StyledComponentsThemeProvider>
+    </ThemeContext.Provider>
+  );
+};

package/src/stories/Elevation.mdx

@@ -1,56 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-
-<Meta title="Elevation" />
-
-## Surface and Elevation
-
-Elevation styles are used to create separation between surfaces. 6 elevation styles are avilable in a range of depths.
-In default mode, elevation is created through shadows and elevation design tokens. In dark mode, on surfaces with elevation (i.e. Cards),
-an additional transparent overlay is used to lighten the surface color and creat the visual effect of an elevated surface.
-
-### Elevation styles
-
-
-
-Elevation styles are used to create separation between surfaces. Six elevation styles are avilable in a range of depths.
-
-<div>
-
-</div>
-
-### Examples
-
-Some elevation styles are used on specific components within the Design System:
-
-<table>
-  <tr>
-    <th>Depth level</th>
-    <th>Uses</th>
-  </tr>
-
-  <tr>
-    <td>Elevation 00</td>
-    <td>Background</td>
-  </tr>
-  <tr>
-    <td>Elevation 01</td>
-    <td>Cards Minimal, Tooltips</td>
-  </tr>
-  <tr>
-    <td>Elevation 02</td>
-    <td>Panels, Cards Subtle</td>
-  </tr>
-  <tr>
-    <td>Elevation 03</td>
-    <td>Panels, Navigation Bars, Cards Bold, Dialogs</td>
-  </tr>
-  <tr>
-    <td>Elevation 04</td>
-    <td>Notifications, Menus</td>
-  </tr>
-  <tr>
-    <td>Elevation 05</td>
-    <td>No specific purpose</td>
-  </tr>
-</table>

package/src/styled/elevation.ts

@@ -1,20 +0,0 @@
-export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
-
-// TODO: add link to docs
-export const elevationLight: Record<Elevation, string> = {
-  0: '0 1px 4px -1px hsla(214, 45%, 20%, 0.52)',
-  1: '0 2px 4px -1px hsla(214, 53%, 23%, 0.16), 0 3px 12px -1px hsla(214, 50%, 22%, 0.26)',
-  2: '0 2px 6px -1px hsla(214, 53%, 23%, 0.16), 0 8px 24px -4px hsla(214, 47%, 21%, 0.38)',
-  3: '0 3px 18px -2px hsla(214, 53%, 23%, 0.16), 0 12px 48px -6px hsla(214, 47%, 21%, 0.38)',
-  4: '0 4px 24px -3px hsla(214, 53%, 23%, 0.16), 0 18px 64px -8px hsla(214, 47%, 21%, 0.38)',
-  5: '0 5px 32px -4px hsla(214, 53%, 23%, 0.16), 0 24px 70px -12px hsla(214, 47%, 21%, 0.38)',
-};
-
-export const elevationDark: Record<Elevation, string> = {
-  0: '0 1px 4px -1px hsla(0, 0%, 0%, 0.52)',
-  1: '0 2px 4px -1px hsla(0, 0%, 0%, 0.16), 0 3px 12px -1px hsla(0, 0%, 0%, 0.26)',
-  2: '0 2px 6px -1px hsla(0, 0%, 0%, 0.16), 0 8px 24px -4px hsla(0, 0%, 0%, 0.38)',
-  3: '0 3px 18px -2px hsla(0, 0%, 0%, 0.16), 0 12px 48px -6px hsla(0, 0%, 0%, 0.38)',
-  4: '0 4px 24px -3px hsla(0, 0%, 0%, 0.16), 0 18px 64px -8px hsla(0, 0%, 0%, 0.38)',
-  5: '0 5px 32px -4px hsla(0, 0%, 0%, 0.16), 0 24px 70px -12px hsla(0, 0%, 0%, 0.38)',
-};