update docs design

components/src/components/atoms/Banner/Banner.tsx

@@ -116,6 +116,7 @@ const SVGBox = ({
 const ActionButtonBox = (props: BoxProps) => (
   <Box
     as="button"
+    backgroundColor="transparent"
     padding="$2"
     position="absolute"
     right="0"

components/src/components/atoms/Button/Button.tsx

@@ -12,6 +12,8 @@ import {
   getValueForColourStyle,
 } from './utils/withColorStyle'
 
+import { Color, getValidatedColor } from './utils/getValidatedColor'
+
 import { getValueForSize } from './utils/getValueForSize'
 
 import { ReactNodeNoStrings } from '../../../types'
@@ -55,7 +57,8 @@ type BaseProps = {
   onClick?: NativeButtonProps['onClick']
   /** Show indicator that button has extra info via tooltip. */
   shouldShowTooltipIndicator?: boolean
-} & Omit<NativeButtonProps, 'prefix' | 'size'>
+  color?: Color
+} & Omit<NativeButtonProps, 'prefix' | 'size' | 'color'>
 
 type WithAnchor = {
   /** The href attribute for the anchor element. */
@@ -78,8 +81,8 @@ type ButtonBoxProps = {
   $shape?: BaseProps['shape']
   $size?: BaseProps['size']
   $type?: BaseProps['type']
-  $center: boolean | undefined
   $colorStyle: WithColorStyle['colorStyle']
+  $color?: Color
   $hasCounter?: boolean
   $width: any
 }
@@ -96,6 +99,7 @@ const ButtonBox = React.forwardRef<
       $colorStyle = 'accentPrimary',
       $hasCounter,
       $width = '$full',
+      $color,
       as,
       ...props
     },
@@ -121,12 +125,16 @@ const ButtonBox = React.forwardRef<
       borderWidth="$1x"
       boxShadow={$shadow ? '$0.25 $grey' : 'none'}
       color={{
-        base: getValueForColourStyle($colorStyle, 'content'),
+        base: getValidatedColor(
+          $color,
+          getValueForColourStyle($colorStyle, 'content'),
+        ),
         disabled: getValueForColourStyle('disabled', 'content'),
       }}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       display="flex"
       fill={getValueForColourStyle($colorStyle, 'content')}
+      fontSize={getValueForSize($size, 'fontSize')}
       fontWeight="$bold"
       gap="$2"
       height={getValueForSize($size, 'height')}
@@ -155,16 +163,10 @@ const ButtonBox = React.forwardRef<
 
 const SVGBox = ({
   $size,
-  $colorStyle,
   ...props
-}: BoxProps & { $size: 'small' | 'medium' | 'flexible'; $colorStyle: any }) => (
-  <Box
-    color={getValueForColourStyle($colorStyle, 'content')}
-    display="block"
-    wh={getValueForSize($size, 'svgSize')}
-    {...props}
-  />
-)
+}: BoxProps & {
+  $size: 'small' | 'medium' | 'flexible'
+}) => <Box display="block" wh={getValueForSize($size, 'svgSize')} {...props} />
 
 const ContentBox = ({
   $fullWidth,
@@ -267,6 +269,7 @@ export const Button = React.forwardRef(
       width,
       fullWidthContent,
       count,
+      color,
       shouldShowTooltipIndicator,
       as: asProp,
       ...props
@@ -286,7 +289,7 @@ export const Button = React.forwardRef(
         .with([true, false, false], () => <Spinner />)
         .with([P._, true, P._], () =>
           React.isValidElement(prefix) ? (
-            <SVGBox $colorStyle={colorStyle} $size={size} as={prefix} />
+            <SVGBox $size={size} as={prefix} />
           ) : null,
         )
         .otherwise(() => null)
@@ -295,30 +298,23 @@ export const Button = React.forwardRef(
         .with([true, false, true], () => <Spinner />)
         .with([P._, P._, true], () =>
           React.isValidElement(suffix) ? (
-            <SVGBox $colorStyle={colorStyle} $size={size} as={suffix} />
+            <SVGBox $size={size} as={suffix} />
           ) : null,
         )
         .otherwise(() => null)
 
       childContent = (
         <>
-          {!!prefixOrLoading && prefixOrLoading}
+          {prefixOrLoading}
           {labelContent}
-          {!!suffixOrLoading && (
-            <SVGBox
-              $colorStyle={colorStyle}
-              $size={size}
-              as={suffixOrLoading as any}
-            />
-          )}
+          {suffixOrLoading}
         </>
       )
     }
 
     return (
       <ButtonBox
-        {...props}
-        $center
+        $color={color}
         $colorStyle={colorStyle}
         $hasCounter={!!count}
         $pressed={pressed}
@@ -328,16 +324,17 @@ export const Button = React.forwardRef(
         $width={width}
         as={asProp as any}
         disabled={disabled}
+        href={href}
+        ref={ref}
         rel={rel}
         tabIndex={tabIndex}
         target={target}
         type={type}
+        // position={zIndex && 'relative'}
         zIndex={zIndex}
         //eslint-disable-next-line react/jsx-sort-props
         onClick={onClick}
-        href={href}
-        // position={zIndex && 'relative'}
-        ref={ref}
+        {...props}
       >
         {shouldShowTooltipIndicator && (
           <TooltipIndicatorBox data-testid="tooltip-indicator">

components/src/components/atoms/Button/utils/getValidatedColor.ts

@@ -0,0 +1,16 @@
+import { BaseColour, validateBaseColour } from '@/src/tokens/color3'
+
+export type Color = BaseColour
+
+export type WithColor = { color: Color }
+
+export const getValidatedColor = (
+  color?: Color,
+  fallback = '$textPrimary',
+): string => {
+  if (!color) return fallback
+  const matches = color.match('^(.*?)(Primary|Secondary)?$')
+  const baseColor = matches?.[1] || 'accent'
+  const validatedColor = validateBaseColour(baseColor, 'accent')
+  return `$${validatedColor}Primary`
+}

components/src/components/atoms/Card/Card.tsx

@@ -18,6 +18,7 @@ const ContainerBox = (props: BoxProps) => (
     flexDirection="column"
     gap="$4"
     padding={{ xs: '$4', sm: '$6' }}
+    position="relative"
     {...props}
   />
 )

components/src/components/atoms/Field/Field.tsx

@@ -142,8 +142,12 @@ const LabelContent = ({
       >
         <InnerLabelBox color="greyPrimary" ellipsis fontVariant="bodyBold">
           {label}
-          <RequiredBox />
-          {required && <VisuallyHidden>required</VisuallyHidden>}
+          {required && (
+            <>
+              <RequiredBox />
+              <VisuallyHidden>required</VisuallyHidden>
+            </>
+          )}
         </InnerLabelBox>
       </LabelBox>
       {labelSecondary && (

components/src/components/atoms/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+type Mode = 'dark' | 'light'
+
+type ThemeContextValue = {
+  mode: Mode
+  setMode: (mode: Mode) => void
+}
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+
+type Props = {
+  defaultMode?: Mode
+}
+export const ThemeProvider = ({
+  defaultMode = 'light',
+  children,
+}: React.PropsWithChildren<Props>) => {
+  const [mode, setMode] = React.useState<Mode>(defaultMode)
+
+  const value = React.useMemo(() => ({ mode, setMode }), [mode])
+
+  React.useEffect(() => {
+    const root = document.querySelector(':root')
+    if (root) {
+      root.setAttribute('data-theme', mode)
+    }
+  }, [mode])
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeContext)
+  if (context === null) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

components/src/components/atoms/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, useTheme } from './ThemeProvider'

components/src/components/atoms/Typography/Typography.tsx

@@ -18,12 +18,12 @@ type ContainerProps = {
 
 const ContainerBox = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
   (
-    { $ellipsis, $fontVariant = 'body', $color, $font, $weight, ...props },
+    { $ellipsis, $fontVariant = 'body', $color, $font, $weight, as, ...props },
     ref,
   ) => (
     <Box
       {...props}
-      as="div"
+      as={as ?? 'div'}
       color={validateColor($color, '$text')}
       fontFamily={$font === 'mono' ? '$mono' : '$sans'}
       fontSize={getValueForVariant($fontVariant, 'fontSize')}
@@ -43,7 +43,7 @@ type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type Props = {
   /** element type of container */
-  asProp?:
+  as?:
     | 'code'
     | 'div'
     | 'h1'
@@ -74,19 +74,19 @@ type Props = {
 export const Typography = React.forwardRef<HTMLElement, Props>(
   (
     {
-      asProp,
+      as,
       children,
       ellipsis,
       className = '',
       fontVariant = 'body',
       font = 'sans',
       color = 'textPrimary',
       weight,
+      textTransform,
       ...props
     },
     ref,
   ) => {
-    console.log('className', className)
     return (
       <ContainerBox
         {...props}
@@ -95,9 +95,10 @@ export const Typography = React.forwardRef<HTMLElement, Props>(
         $font={font}
         $fontVariant={fontVariant}
         $weight={weight}
-        as={asProp}
+        as={as}
         className={className}
         ref={ref}
+        textTransform={textTransform}
       >
         {children}
       </ContainerBox>

components/src/components/atoms/index.ts

@@ -17,3 +17,4 @@ export { Typography } from './Typography'
 export { VisuallyHidden } from './VisuallyHidden'
 export { Box } from './Box'
 export type { BoxProps } from './Box'
+export { ThemeProvider, useTheme } from './ThemeProvider'

components/src/components/molecules/Checkbox/styles.css.ts

@@ -21,3 +21,7 @@ globalStyle(`${checkbox}:not(:checked):not(:hover) ~ ${icon}`, {
 globalStyle(`${checkbox}:not(:checked):hover ~ ${icon}`, {
   backgroundColor: `${modeVars.color.backgroundPrimary} !important`,
 })
+
+globalStyle(`${checkbox}:disabled:not(:checked):hover ~ ${icon}`, {
+  backgroundColor: `${modeVars.color.border} !important`,
+})

components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx

@@ -16,7 +16,12 @@ export type Props = {
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
 
 const Container = (props: BoxProps) => (
-  <Box {...props} position="relative" width="fit-content" />
+  <Box
+    {...props}
+    height="fit-content"
+    position="relative"
+    width="fit-content"
+  />
 )
 
 const Label = ({

components/src/components/molecules/Profile/Profile.tsx

@@ -60,6 +60,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
       }}
       flexDirection="row"
       gap="$2"
+      height={getValueForSize($size, 'height')}
       justifyContent="flex-start"
       maxWidth={getValueForSize($size, 'maxWidth')}
       padding={getValueForSize($size, 'padding')}

components/src/components/molecules/ThemeToggle/ThemeToggle.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { ThemeProvider } from 'styled-components'
+
+import { cleanup, render } from '@/test'
+
+import { lightTheme } from '@/src/tokens'
+
+import { ThemeToggle } from './ThemeToggle'
+
+describe('<CurrencyToggle />', () => {
+  afterEach(cleanup)
+
+  it('renders', () => {
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <ThemeToggle />
+      </ThemeProvider>,
+    )
+  })
+})