@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.27

package/src/{components → core/components}/skeleton/textSkeleton.tsx

@@ -1,8 +1,8 @@
+import {Theme, ThemeFontKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {_responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({

package/src/{components → core/components}/toast/toast.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 import {useToast} from './useToast'

package/src/{components → core/components}/toast/toast.tsx

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ThemeColorToneKey} from '../../theme'
 
 /**
  * @public

package/src/{components → core/components}/tree/__workshop__/tabFromElement.tsx

@@ -26,7 +26,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Box paddingY={3}>
-        <Text>
+        <Text muted size={1}>
           This example is to demonstrate that when you tab from an outside element (using the
           keyboard to navigate), you can still access the tree and tree item. Press the input
           beneath and start tabbing / using the arrow.

package/src/{components → core/components}/tree/style.ts

@@ -9,6 +9,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       cursor: default;
       border-radius: 3px;
 
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
       &:focus {
         position: relative;
       }
@@ -20,6 +23,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       & > div {
         cursor: default;
         border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
       }
 
       &:focus > div {
@@ -41,9 +47,6 @@ export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css
     &[role='none'] {
       & > [role='treeitem'] {
         ${_colorVarsStyle(base, tone.enabled)}
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
       }
 
       &[data-selected] > [role='treeitem'] {
@@ -65,9 +68,6 @@ export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css
     &[role='treeitem'] {
       & > [data-ui='TreeItem__box'] {
         ${_colorVarsStyle(base, tone.enabled)}
-
-        background-color: var(--card-bg-color);
-        color: var(--card-fg-color);
       }
 
       &[data-selected] > [data-ui='TreeItem__box'] {

package/src/{components → core/components}/tree/treeItem.tsx

@@ -1,8 +1,8 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {ThemeFontWeightKey} from '../../theme'
 import {
   treeItemRootStyle,
   treeItemRootColorStyle,
@@ -50,14 +50,14 @@ export const TreeItem = memo(function TreeItem(
   const {
     children,
     expanded: expandedProp = false,
-    fontSize,
+    fontSize = 1,
     href,
     icon,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding = 3,
+    padding = 2,
     selected = false,
     space = 2,
     text,

package/src/{constants.ts → core/constants.ts}

@@ -10,6 +10,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 
 /**
  * @internal
+ * @deprecated No longer used.
  */
 export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
   top: 'bottom',

package/src/{hooks → core/hooks}/useElementRect/__workshop__/example.tsx

@@ -21,7 +21,9 @@ export default function ExampleStory() {
             <Card scheme="dark" style={{position: 'absolute', ...size}} />
           </div>
 
-          <Code language="json">{JSON.stringify(size)}</Code>
+          <Code language="json" size={1}>
+            {JSON.stringify(size)}
+          </Code>
         </Stack>
       </Container>
     </Box>

package/src/{hooks → core/hooks}/useMediaIndex/__workshop__/test.tsx

@@ -6,7 +6,7 @@ export default function TestStory() {
   return (
     <Card padding={[3, 4, 5]}>
       <Stack space={2}>
-        <Text weight="semibold">The current media index is {mediaIndex}.</Text>
+        <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>
     </Card>

package/src/{hooks → core/hooks}/useMediaIndex/useMediaIndex.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment node */
+import {studioTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {studioTheme, ThemeProvider} from '../../theme'
+import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
 function Log() {

package/src/{index.ts → core/index.ts}

@@ -1,3 +1,5 @@
+export * from './_compat'
+
 export * from './primitives'
 export * from './components'
 export * from './helpers'

package/src/{lib → core/lib}/isRecord.ts

@@ -1,3 +1,3 @@
 export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object')
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
 }

package/src/{primitives → core/primitives}/avatar/avatar.tsx

@@ -1,10 +1,11 @@
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeColorSpotKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Text} from '../text'
+import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
@@ -16,7 +17,7 @@ export interface AvatarProps {
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
+  color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -29,7 +30,7 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
+const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
 )
@@ -42,6 +43,10 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 
 const Initials = styled.div(avatarStyle.initials)
 
+const InitialsLabel = styled(Label)({
+  color: 'inherit',
+})
+
 const Image = styled.svg(avatarStyle.image)
 
 /**
@@ -56,7 +61,7 @@ export const Avatar = forwardRef(function Avatar(
   const {
     __unstable_hideInnerStroke,
     as: asProp,
-    color: colorKey = 'gray',
+    color = 'gray',
     src,
     title,
     initials,
@@ -70,7 +75,6 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
   const theme = useTheme()
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
 
   // @todo: remove this
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
@@ -107,7 +111,7 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
 
   return (
     <Root
@@ -115,8 +119,8 @@ export const Avatar = forwardRef(function Avatar(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Avatar"
       {...restProps}
-      $size={size}
       $color={color}
+      $size={size}
       aria-label={title}
       data-arrow-position={arrowPosition}
       data-status={status}
@@ -147,6 +151,7 @@ export const Avatar = forwardRef(function Avatar(
           </defs>
 
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
+
           {!__unstable_hideInnerStroke && (
             <BgStroke
               cx={_radius}
@@ -156,12 +161,12 @@ export const Avatar = forwardRef(function Avatar(
               vectorEffect="non-scaling-stroke"
             />
           )}
+
           <Stroke
             cx={_radius}
             cy={_radius}
             rx={_radius}
             ry={_radius}
-            stroke={color}
             vectorEffect="non-scaling-stroke"
           />
         </Image>
@@ -170,9 +175,9 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize} weight="medium">
+            <InitialsLabel forwardedAs="span" size={initialsSize}>
               {initials}
-            </Text>
+            </InitialsLabel>
           </Initials>
         </>
       )}

package/src/{primitives → core/primitives}/avatar/styles.ts

@@ -1,6 +1,6 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {
@@ -61,7 +61,10 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
   const {focusRing} = theme.sanity.avatar
 
   return {
-    backgroundColor: $color,
+    '--avatar-bg-color': theme.sanity.color.avatar?.[$color]?.bg || theme.sanity.color.spot[$color],
+    '--avatar-fg-color': theme.sanity.color.avatar?.[$color]?.fg || 'var(--card-bg-color)',
+
+    backgroundColor: 'var(--avatar-bg-color)',
     position: 'relative',
     boxSizing: 'border-box',
     userSelect: 'none',
@@ -130,14 +133,11 @@ export function avatarImageStyle(): CSSObject {
   }
 }
 
-export function avatarInitialsStyle(props: ThemeProps): CSSObject {
-  const {theme} = props
-  const {base} = theme.sanity.color
-
+export function avatarInitialsStyle(): CSSObject {
   return {
     width: '100%',
     height: '100%',
-    color: base.fg,
+    color: 'var(--avatar-fg-color)',
     alignItems: 'center',
     justifyContent: 'center',
     textTransform: 'uppercase',
@@ -160,6 +160,7 @@ function avatarBgStrokeStyle(): CSSObject {
 function avatarStrokeStyle(): CSSObject {
   return {
     strokeWidth: '2px',
+    stroke: 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/{primitives → core/primitives}/avatar/types.ts

@@ -1,10 +1,11 @@
+import {ThemeColorSpotKey} from '@sanity/ui/theme'
 import {AvatarSize} from '../../types'
 
 /**
  * @internal
  */
 export interface AvatarRootStyleProps {
-  $color: string
+  $color: ThemeColorSpotKey
 }
 
 /**

package/src/{primitives → core/primitives}/badge/badge.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

package/src/{primitives → core/primitives}/badge/badge.tsx

@@ -15,6 +15,7 @@ import {BadgeStyleProps} from './types'
 export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
+  /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -36,7 +37,8 @@ export const Badge = forwardRef(function Badge(
   const {
     children,
     fontSize = 1,
-    mode = 'default',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
     padding = 1,
     radius = 2,
     tone = 'default',
@@ -47,7 +49,6 @@ export const Badge = forwardRef(function Badge(
     <Root
       data-ui="Badge"
       {...restProps}
-      $mode={mode}
       $tone={tone}
       $radius={useArrayProp(radius)}
       padding={useArrayProp(padding)}

package/src/core/primitives/badge/styles.ts

@@ -0,0 +1,20 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../../styles'
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
+  const {$tone, theme} = props
+  const color = theme.sanity.color.badge?.[$tone] || theme.sanity.color.muted[$tone].enabled
+
+  return {
+    '--card-bg-color': color.bg,
+    '--card-fg-color': color.fg,
+
+    backgroundColor: 'var(--card-bg-color)',
+    cursor: 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  }
+}

package/src/{primitives → core/primitives}/badge/types.ts

@@ -1,9 +1,8 @@
-import {BadgeMode, BadgeTone} from '../../types'
+import {BadgeTone} from '../../types'
 
 /**
  * @internal
  */
 export interface BadgeStyleProps {
-  $mode: BadgeMode
   $tone: BadgeTone
 }

package/src/{primitives → core/primitives}/button/__workshop__/stacked.tsx

@@ -25,7 +25,7 @@ export default function StackedStory() {
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
 
   return (
-    <Card height="fill" tone="transparent">
+    <Card height="fill">
       <Flex align="center" height="fill" justify="center">
         <Container width={0} style={{textAlign: 'center'}}>
           <Box padding={4}>

package/src/{primitives → core/primitives}/button/button.test.tsx

@@ -3,7 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'
 
 describe('atoms/button', () => {

package/src/{primitives → core/primitives}/button/button.tsx

@@ -72,7 +72,7 @@ export const Button = forwardRef(function Button(
     iconRight,
     justify: justifyProp = 'center',
     loading,
-    mode = 'default',
+    mode = 'ghost',
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,

package/src/{primitives → core/primitives}/button/styles.ts

@@ -1,15 +1,22 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-import {CSSObject} from '../../types/styled'
 
 /**
  * @internal
  */
-export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<typeof css> {
+export function buttonBaseStyles({
+  $width,
+  theme,
+}: {$width?: ButtonWidth} & ThemeProps): ReturnType<typeof css> {
+  const {styles} = theme.sanity
+
   return css`
+    ${styles?.button};
+
     -webkit-font-smoothing: inherit;
     appearance: none;
     display: inline-flex;
@@ -26,6 +33,7 @@ export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<t
     white-space: nowrap;
     text-align: left;
     position: relative;
+    vertical-align: top;
 
     ${$width === 'fill' &&
     css`
@@ -48,9 +56,6 @@ export function buttonBaseStyles({$width}: {$width?: ButtonWidth}): ReturnType<t
   `
 }
 
-const buttonTheme = {border: {width: 1}}
-const defaultBoxShadow = '0px 2px 0px 0px rgba(112, 128, 155, 0.19);'
-
 function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
   return boxShadows.filter(Boolean).join(',')
 }
@@ -62,12 +67,17 @@ export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
   const {$mode, theme} = props
-  const {focusRing} = theme.sanity.button
-  const shadow = props.$mode !== 'bleed'
+  const buttonTheme = theme.sanity.button
+  const shadow = props.$mode === 'ghost'
   const base = theme.sanity.color.base
   const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
   const color = mode[props.$tone] || mode.default
-  const border = {width: buttonTheme.border.width, color: 'var(--card-border-color)'}
+  const border = {
+    width: buttonTheme.border.width,
+    color: 'var(--card-border-color)',
+  }
+  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
+  const defaultBoxShadow = undefined
 
   return [
     _colorVarsStyle(base, color.enabled),
@@ -85,7 +95,7 @@ export function buttonColorStyles(
           boxShadow: focusRingStyle({
             base,
             border: {width: 2, color: base.bg},
-            focusRing,
+            focusRing: buttonTheme.focusRing,
           }),
         },
         '&:focus:not(:focus-visible)': {

package/src/{primitives → core/primitives}/card/__workshop__/asButton.tsx

@@ -9,7 +9,7 @@ export default function AsButtonStory() {
       <Container>
         <Grid columns={3} gap={2}>
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Enabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -23,7 +23,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -33,7 +33,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Disabled
             </Text>
             <Stack marginTop={3} space={2}>
@@ -48,7 +48,7 @@ export default function AsButtonStory() {
                   tone={tone}
                 >
                   <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
+                    <Text weight="medium">{title}</Text>
                     <Text muted>Muted</Text>
                     <Text accent>Accent</Text>
                   </Stack>
@@ -58,7 +58,7 @@ export default function AsButtonStory() {
           </Box>
 
           <Box>
-            <Text align="center" size={1} weight="semibold">
+            <Text align="center" size={1} weight="medium">
               Selected
             </Text>
             <Stack marginTop={3} space={2}>
@@ -72,7 +72,7 @@ export default function AsButtonStory() {
                     tone={tone}
                   >
                     <Stack space={2}>
-                      <Text weight="semibold">{title}</Text>
+                      <Text weight="medium">{title}</Text>
                       <Text muted>Muted</Text>
                       <Text accent>Accent</Text>
                     </Stack>

package/src/{primitives → core/primitives}/card/__workshop__/asComponent.tsx

@@ -19,7 +19,7 @@ export default function AsComponentStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+      <Card as={CustomLink} data-as="a" {...props} padding={3}>
         <Text>As component</Text>
       </Card>
     </Flex>

package/src/{primitives → core/primitives}/card/__workshop__/selected.tsx

@@ -1,16 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  Theme,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
+import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
+import {Theme, ThemeColorToneKey} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 

package/src/{primitives → core/primitives}/card/card.tsx

@@ -1,3 +1,4 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -10,7 +11,7 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
+import {ThemeColorProvider, useRootTheme} from '../../theme'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'

package/src/{primitives → core/primitives}/card/types.ts

@@ -1,4 +1,4 @@
-import {ThemeColorToneKey} from '../../theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/{primitives → core/primitives}/checkbox/__workshop__/example.tsx

@@ -15,7 +15,7 @@ export default function ExampleStory() {
           onChange={handleChange}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/props.tsx

@@ -23,7 +23,7 @@ export default function PropsStory() {
           readOnly={readOnly}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/readOnly.tsx

@@ -6,7 +6,7 @@ export default function ReadOnlyStory() {
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/styles.ts

@@ -50,14 +50,15 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 1.2 !important;
+          stroke-width: 1.5px !important;
         }
       }
     }
+
     &:checked + span {
-      background: ${color.default.enabled.bg2};
+      background: ${color.default.enabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.bg2,
+        color: color.default.enabled.fg,
         width: input.border.width,
       })};
       color: ${color.default.enabled.bg};