@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -1,4 +1,5 @@
 import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
+
 import {Stack} from '../../stack'
 
 export default function ListNavigationStory() {
@@ -64,10 +65,12 @@ function List2() {
 
 function Preview() {
   return (
-    <Flex align="center">
-      <Skeleton marginRight={2} radius={2} style={{width: 35, height: 35}} />
+    <Flex align="center" gap={2}>
+      <Skeleton radius="full" style={{width: 33, height: 33}} />
       <Stack flex={1} space={2}>
-        <Text>Preview</Text>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
         <Text muted size={1}>
           Preview
         </Text>

package/src/core/primitives/card/__workshop__/props.tsx

@@ -1,26 +1,28 @@
 import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_CARD_AS_OPTIONS,
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PropsStory() {
   const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
   const border = useBoolean('Border', false, 'Props')
   const checkered = useBoolean('Checkered', false, 'Props')
   const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const pressed = useBoolean('Pressed', false, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
 
   return (
-    <Flex align="center" height="fill" justify="center">
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Card
         __unstable_checkered={checkered}
         as={as}
@@ -28,20 +30,24 @@ export default function PropsStory() {
         muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
+        pressed={pressed}
         radius={radius as Radius}
         selected={selected}
         shadow={shadow}
         tone={tone}
       >
         <Stack space={3}>
-          <Text>
+          <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.
           </Text>
-          <Text>
-            Text with <a>link</a>.
+          <Text size={1}>
+            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <a href="#">link</a>.
+          </Text>
+          <Text accent size={1}>
+            Text with accent color.
           </Text>
-          <Text accent>Accented text.</Text>
         </Stack>
       </Card>
     </Flex>

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -1,14 +1,13 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
-import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
+import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
+import {getTheme_v2, Theme, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
-import {styled, css} from 'styled-components'
+import {css, styled} from 'styled-components'
 
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
-  props: {
-    $tone: ThemeColorStateToneKey
-  } & ThemeProps,
-) => {
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((props: {
+  $tone: ThemeColorStateToneKey
+  theme: Theme
+}) => {
   const {$tone} = props
   const {color} = getTheme_v2(props.theme)
   const tone = color.button.default[$tone]
@@ -68,12 +67,14 @@ function Preview({selected}: {selected: boolean}) {
   return (
     <Flex>
       <Box flex={1}>
-        <Text>Title</Text>
+        <Text size={1}>Title</Text>
       </Box>
       <Inline space={3}>
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
+          weight="medium"
           $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
         >
           <EditIcon />
@@ -81,6 +82,7 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
+          size={1}
           $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />

package/src/core/primitives/card/card.tsx

@@ -1,11 +1,10 @@
 import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useContext} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
-import {ThemeColorProvider, useRootTheme} from '../../theme'
-import {CardTone} from '../../types'
+
+import {ThemeColorProvider, useRootTheme} from '../../_compat'
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
-import {RootCardContext} from './RootCardContext'
 
 /**
  * @public
@@ -21,10 +20,11 @@ export interface CardProps extends BoxProps, CardStyleProps {
    * @beta
    */
   __unstable_focusRing?: boolean
-  muted?: boolean
+  disabled?: boolean
+  href?: string
   pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
+  selected?: boolean
+  target?: string
 }
 
 /**
@@ -34,77 +34,69 @@ export interface CardProps extends BoxProps, CardStyleProps {
  * @public
  */
 export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<CardProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,
     as: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
     className,
-    muted,
     pressed,
     radius = 0,
-    scheme,
+    scheme: schemeProp,
+    selectable,
     selected,
     shadow,
     style,
-    tone: toneProp = 'default',
+    tone: toneProp,
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootCard = useContext(RootCardContext)
+
   const rootTheme = useRootTheme()
 
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+  const scheme = schemeProp === undefined ? rootTheme.scheme : schemeProp
 
-  // todo: Consider adding the wrapper approach for nested cards in which the tones are not
-  // changing, avoid unnecessary ThemeColorProvider
   const node = (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
-      <Box
-        data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
-        data-ui="Card"
-        data-tone={tone}
-        {...restProps}
-        as={as}
-        className={composeClassNames(
-          className,
-          // rootCard ? undefined : 'root',
-          card({
-            border,
-            borderTop,
-            borderRight,
-            borderBottom,
-            borderLeft,
-            radius,
-            shadow,
-          }),
-        )}
-        data-checkered={checkered ? '' : undefined}
-        data-focus-ring={focusRing ? '' : undefined}
-        data-muted={muted ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-selected={selected ? '' : undefined}
-        ref={ref}
-        selected={selected}
-        style={style}
-      />
-    </ThemeColorProvider>
+    <Box
+      // data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Card"
+      {...restProps}
+      as={as}
+      className={composeClassNames(
+        className,
+        card({
+          scheme: scheme === rootTheme.scheme ? undefined : scheme,
+          shadow,
+          tone: tone === rootTheme.tone ? undefined : tone,
+        }),
+      )}
+      data-checkered={checkered ? '' : undefined}
+      data-focus-ring={focusRing ? '' : undefined}
+      data-pressed={pressed ? '' : undefined}
+      data-selectable={selectable ? '' : undefined}
+      data-selected={selected ? '' : undefined}
+      radius={radius}
+      ref={ref}
+      // selected={selected}
+      style={style}
+    />
   )
 
-  if (!rootCard) {
-    return <RootCardContext.Provider value={{renderedVars: true}}>{node}</RootCardContext.Provider>
+  if (scheme === rootTheme.scheme && tone === rootTheme.tone) {
+    return node
   }
 
-  return node
+  return (
+    // Render a theme provider around the card if the scheme or tone differs from the root theme.
+    // This is needed for backwards compatibility with the legacy theme API.
+    <ThemeColorProvider scheme={scheme} tone={tone ?? rootTheme.tone}>
+      {node}
+    </ThemeColorProvider>
+  )
 })
 
 Card.displayName = 'ForwardRef(Card)'

package/src/core/primitives/card/types.ts

@@ -2,6 +2,7 @@ import {ThemeColorToneKey} from '@sanity/ui/theme'
 
 /**
  * @internal
+ * @deprecated
  */
 export interface CardStyleProps {
   $checkered: boolean

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -4,9 +4,15 @@ export default function MultipleTonesStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack>
+        <Card padding={3} tone="neutral">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="primary">
           <Checkbox />
         </Card>
+        <Card padding={3} tone="suggest">
+          <Checkbox />
+        </Card>
         <Card padding={3} tone="positive">
           <Checkbox />
         </Card>

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,7 +1,9 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
 import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+
 import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
 
 /**
  * @public
@@ -17,8 +19,8 @@ export interface CheckboxProps {
  * @public
  */
 export const Checkbox = forwardRef(function Checkbox(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+  props: Props<CheckboxProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
 ) {
   const {
     checked,
@@ -30,6 +32,7 @@ export const Checkbox = forwardRef(function Checkbox(
     style,
     ...restProps
   } = props
+
   const ref = useRef<HTMLInputElement | null>(null)
 
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
@@ -49,11 +52,12 @@ export const Checkbox = forwardRef(function Checkbox(
   return (
     <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
       <input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
         {...restProps}
         checked={checked}
         className={composeClassNames(className, checkboxInput())}
+        data-disabled={disabled ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}

package/src/core/primitives/code/__workshop__/props.tsx

@@ -1,14 +1,15 @@
 import {Box, Code} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
+
 import {
   WORKSHOP_CODE_LANGUAGE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '../../../../../workshop/constants'
 
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/code/code.tsx

@@ -1,14 +1,14 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
-import {forwardRef} from 'react'
-import Refractor from 'react-refractor'
+import {ForwardedRef, forwardRef, lazy, Suspense} from 'react'
+
+import {Props} from '../../types'
+
+const LazyRefractor = lazy(() => import('./refractor'))
 
 /**
  * @public
  */
 export interface CodeProps extends Omit<FontStyleProps, 'align'> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
@@ -18,20 +18,19 @@ export interface CodeProps extends Omit<FontStyleProps, 'align'> {
  * @public
  */
 export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLPreElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLPreElement>,
+  props: Props<CodeProps, 'pre'>,
+  ref: ForwardedRef<HTMLPreElement>,
 ) {
   const {
     as: As = 'pre',
     children,
     className,
     language: languageProp,
-    size = 2,
+    size = 1,
     weight,
     ...restProps
   } = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
-  const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
     <As
@@ -40,8 +39,9 @@ export const Code = forwardRef(function Code(
       className={composeClassNames(className, code({size, weight}))}
       ref={ref}
     >
-      {!(language && registered) && <code>{children}</code>}
-      {language && registered && <Refractor inline language={language} value={String(children)} />}
+      <Suspense fallback={<code>{children}</code>}>
+        <LazyRefractor language={language} value={children} />
+      </Suspense>
     </As>
   )
 })

package/src/core/primitives/code/refractor.tsx

@@ -0,0 +1,20 @@
+import Refractor from 'react-refractor'
+
+export default function LazyRefractor(
+  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
+    value: React.ReactNode
+  },
+) {
+  const {language: languageProp, value} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? Refractor.hasLanguage(language as any) : false
+
+  return (
+    <>
+      {!(language && registered) && <code>{value}</code>}
+      {language && registered && <Refractor inline language={language} value={String(value)} />}
+    </>
+  )
+}
+
+LazyRefractor.displayName = 'LazyRefractor'

package/src/core/primitives/container/__workshop__/example.tsx

@@ -1,6 +1,7 @@
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../../../workshop/constants'
 
 export default function PlainStory() {
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
@@ -9,7 +10,7 @@ export default function PlainStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container onClick={useAction('onClick')} width={width}>
         <Card padding={4} shadow={1}>
-          <Text>
+          <Text size={1}>
             Container with <code>max-width={width}</code>
           </Text>
         </Card>

package/src/core/primitives/container/container.tsx

@@ -1,5 +1,7 @@
 import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /**
@@ -13,10 +15,10 @@ export interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleP
  * @public
  */
 export const Container = forwardRef(function Container(
-  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<ContainerProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, className, width = 2, ...restProps} = props
+  const {as, className, sizing = 'border', width = 2, ...restProps} = props
 
   return (
     <Box
@@ -25,6 +27,7 @@ export const Container = forwardRef(function Container(
       as={as}
       className={composeClassNames(className, container({width}))}
       ref={ref}
+      sizing={sizing}
     />
   )
 })

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -1,7 +1,8 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
+
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
 
 const DebugCard = styled(Card)`
   outline: 1px solid red;
@@ -18,15 +19,15 @@ export default function ExampleStory() {
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>
       <DebugCard flex={1}>
-        <Code>1</Code>
+        <Code size={1}>1</Code>
       </DebugCard>
 
       <DebugCard flex={[1, 2, 3]}>
-        <Code>[1,2,3]</Code>
+        <Code size={1}>[1,2,3]</Code>
       </DebugCard>
 
       <DebugCard flex={['none', 'none', 1]}>
-        <Code>['none', 'none', 1]</Code>
+        <Code size={1}>['none', 'none', 1]</Code>
       </DebugCard>
     </Flex>
   )

package/src/core/primitives/flex/__workshop__/gap.tsx

@@ -3,20 +3,20 @@ import {Card, Flex, Text} from '@sanity/ui'
 export default function GapStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
-        <Card padding={3} scheme="dark">
+      <Flex align="center" gap={[1, 2, 3, 4]} justify="center" wrap="wrap">
+        <Card padding={3} shadow={1}>
           <Text size={0}>Card 0</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={1}>Card 1</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={2}>Card 2</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={3}>Card 3</Text>
         </Card>
-        <Card padding={3} scheme="dark">
+        <Card padding={3} shadow={1}>
           <Text size={4}>Card 4</Text>
         </Card>
       </Flex>

package/src/core/primitives/flex/flex.tsx

@@ -1,10 +1,14 @@
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
 
 /**
  * @public
  */
-export interface FlexProps extends Omit<BoxProps, 'display'> {}
+export interface FlexProps extends Omit<BoxProps, 'display'> {
+  htmlFor?: string
+}
 
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
@@ -12,20 +16,13 @@ export interface FlexProps extends Omit<BoxProps, 'display'> {}
  * @public
  */
 export const Flex = forwardRef(function Flex(
-  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<FlexProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {as, direction = 'row', ...restProps} = props
 
   return (
-    <Box
-      data-ui="Flex"
-      {...restProps}
-      direction={direction}
-      display="flex"
-      forwardedAs={as}
-      ref={ref}
-    />
+    <Box data-ui="Flex" {...restProps} as={as} direction={direction} display="flex" ref={ref} />
   )
 })
 

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -11,40 +11,40 @@ export default function ResponsiveStory() {
           rows={[1, 2, 3, 4, 5, 6, 7]}
           style={{textAlign: 'center'}}
         >
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>1</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>2</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>3</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>4</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>5</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>6</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>7</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>8</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>9</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>10</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>11</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>12</Code>
           </Card>
         </Grid>