@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94

package/docs/content/BorderBox.md

@@ -18,7 +18,7 @@ Use [Box](/Box) instead.
 **After**
 
 ```jsx
-<Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2}>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
   Item 1
 </Box>
 ```

package/docs/content/Box.md

@@ -8,7 +8,7 @@ import {Props} from '../src/props'
 import {Box} from '@primer/components'
 
 ```jsx live
-<Box color="text.secondary" bg="bg.tertiary" p={3}>
+<Box color="fg.muted" bg="canvas.subtle" p={3}>
   Hello
 </Box>
 ```
@@ -24,7 +24,7 @@ Box also accepts all [styled system props](https://styled-system.com/table/).
 ### Border on all sides
 
 ```jsx live
-<Box borderColor="border.primary" borderWidth={1} borderStyle="solid" p={3}>
+<Box borderColor="border.default" borderWidth={1} borderStyle="solid" p={3}>
   Hello
 </Box>
 ```
@@ -32,7 +32,7 @@ Box also accepts all [styled system props](https://styled-system.com/table/).
 ### Border on one side
 
 ```jsx live
-<Box borderColor="border.primary" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
+<Box borderColor="border.default" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
   Hello
 </Box>
 ```
@@ -43,13 +43,13 @@ Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/C
 
 ```jsx live
 <Box display="flex">
-  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     1
   </Box>
-  <Box flexGrow={1} p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box flexGrow={1} p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     2
   </Box>
-  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     3
   </Box>
 </Box>
@@ -61,13 +61,13 @@ Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_
 
 ```jsx live
 <Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
-  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     1
   </Box>
-  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     2
   </Box>
-  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+  <Box p={3} borderColor="border.default" borderWidth={1} borderStyle="solid">
     3
   </Box>
 </Box>

package/docs/content/Breadcrumbs.md

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumbs
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Breadcrumb.tsx
+source: https://github.com/primer/react/blob/main/src/Breadcrumbs.tsx
 ---
 
 Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
@@ -10,7 +10,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 - Do not have a section-level navigation
 - May need the ability to quickly go back to the previous (parent) page
 
-To use Breadcrumb with [react-router](https://github.com/ReactTraining/react-router) or
+To use Breadcrumbs with [react-router](https://github.com/ReactTraining/react-router) or
 [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
 `as={NavLink}` and omit the `selected` prop.
 This ensures that the NavLink gets `activeClassName='selected'`
@@ -18,13 +18,13 @@ This ensures that the NavLink gets `activeClassName='selected'`
 ## Default example
 
 ```jsx live
-<Breadcrumb>
-  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-  <Breadcrumb.Item href="/about">About</Breadcrumb.Item>
-  <Breadcrumb.Item href="/about/team" selected>
+<Breadcrumbs>
+  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/about">About</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="/about/team" selected>
     Team
-  </Breadcrumb.Item>
-</Breadcrumb>
+  </Breadcrumbs.Item>
+</Breadcrumbs>
 ```
 
 ## System props
@@ -35,15 +35,15 @@ System props are deprecated in all components except [Box](/Box). Please use the
 
 </Note>
 
-Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
-### Breadcrumb
+### Breadcrumbs
 
-The `Breadcrumb` component does not receive any additional props besides `COMMON` system props.
+The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
 
-### Breadcrumb.Item
+### Breadcrumbs.Item
 
 | Prop name | Type    | Default | Description                                      |
 | :-------- | :------ | :-----: | :----------------------------------------------- |

package/docs/content/Buttons.md

@@ -11,20 +11,22 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
 ## Default examples
 
 ```jsx live
-<Button>Button</Button>
-<ButtonDanger>Button Danger</ButtonDanger>
-<ButtonOutline>Button Outline</ButtonOutline>
-<ButtonPrimary>Button Primary</ButtonPrimary>
-<ButtonInvisible>Button Invisible</ButtonInvisible>
-<ButtonClose onClick={() => window.alert('button clicked')}/>
-
-<ButtonGroup display='block' my={2}>
+<>
   <Button>Button</Button>
-  <Button>Button</Button>
-  <Button>Button</Button>
-</ButtonGroup>
-
-<ButtonTableList>Button Table List </ButtonTableList>
+  <ButtonDanger>Button Danger</ButtonDanger>
+  <ButtonOutline>Button Outline</ButtonOutline>
+  <ButtonPrimary>Button Primary</ButtonPrimary>
+  <ButtonInvisible>Button Invisible</ButtonInvisible>
+  <ButtonClose onClick={() => window.alert('button clicked')}/>
+
+  <ButtonGroup display='block' my={2}>
+    <Button>Button</Button>
+    <Button>Button</Button>
+    <Button>Button</Button>
+  </ButtonGroup>
+
+  <ButtonTableList>Button Table List </ButtonTableList>
+</>
 ```
 
 ## System props

package/docs/content/CircleOcticon.md

@@ -7,7 +7,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m
 ## Default example
 
 ```jsx live
-<CircleOcticon icon={CheckIcon} size={32} sx={{bg: 'icon.success', color: 'text.inverse'}} />
+<CircleOcticon icon={CheckIcon} size={32} sx={{bg: "success.fg", color: "fg.onEmphasis"}} />
 ```
 
 ## Component props

package/docs/content/CounterLabel.md

@@ -8,9 +8,11 @@ Use the CounterLabel component to add a count to navigational elements and butto
 ## Default example
 
 ```jsx live
-<CounterLabel>12</CounterLabel>
-<CounterLabel scheme="primary">13</CounterLabel>
-<CounterLabel scheme="secondary">13</CounterLabel>
+<>
+  <CounterLabel>12</CounterLabel>
+  <CounterLabel scheme="primary">13</CounterLabel>
+  <CounterLabel scheme="secondary">13</CounterLabel>
+</>
 ```
 
 ## System props

package/docs/content/Flash.md

@@ -7,10 +7,12 @@ The Flash component informs users of successful or pending actions.
 ## Default example
 
 ```jsx live
-<Flash>Default Flash</Flash>
-<Flash variant="success">Success Flash</Flash>
-<Flash variant="warning">Warning Flash</Flash>
-<Flash variant="danger">Danger Flash</Flash>
+<>
+  <Flash>Default Flash</Flash>
+  <Flash variant="success">Success Flash</Flash>
+  <Flash variant="warning">Warning Flash</Flash>
+  <Flash variant="danger">Danger Flash</Flash>
+</>
 ```
 
 ## With an icon

package/docs/content/Flex.md

@@ -13,7 +13,7 @@ Use [Box](/Box) instead.
 
 ```jsx
 <Flex flexWrap="nowrap">
-  <Box p={3} color="text.inverse" bg="bg.infoInverse">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     Item 1
   </Box>
 </Flex>
@@ -23,7 +23,7 @@ Use [Box](/Box) instead.
 
 ```jsx
 <Box display="flex" flexWrap="nowrap">
-  <Box p={3} color="text.inverse" bg="bg.infoInverse">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     Item 1
   </Box>
 </Box>
@@ -32,15 +32,15 @@ Use [Box](/Box) instead.
 ## Default example
 
 ```jsx live
-<Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" width={300} height={300} borderRadius={0}>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" width={300} height={300} borderRadius={0}>
   <Flex flexWrap="nowrap">
-    <Box p={3} color="text.inverse" bg="bg.infoInverse">
+    <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
       Item 1
     </Box>
-    <Box p={3} color="text.inverse" bg="bg.warningInverse">
+    <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
       Item 2
     </Box>
-    <Box p={3} color="text.inverse" bg="bg.dangerInverse">
+    <Box p={3} color="fg.onEmphasis" bg="danger.emphasis">
       Item 3
     </Box>
   </Flex>

package/docs/content/FormGroup.md

@@ -7,15 +7,17 @@ Adds styles for multiple form elements used together.
 ## Default example
 
 ```jsx live
-<FormGroup>
-  <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-  <TextInput id="example-text" value="Example Value" />
-</FormGroup>
-
-<FormGroup>
-  <FormGroup.Label htmlFor="example-text-b">Example text</FormGroup.Label>
-  <TextInput id="example-text-b" value="Example Value" />
-</FormGroup>
+<>
+  <FormGroup>
+    <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
+    <TextInput id="example-text" value="Example Value" />
+  </FormGroup>
+
+  <FormGroup>
+    <FormGroup.Label htmlFor="example-text-b">Example text</FormGroup.Label>
+    <TextInput id="example-text-b" value="Example Value" />
+  </FormGroup>
+</>
 ```
 
 ## System props

package/docs/content/Grid.md

@@ -13,10 +13,10 @@ Use [Box](/Box) instead.
 
 ```jsx
 <Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
-  <Box p={3} color="text.inverse" bg="bg.infoInverse">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     1
   </Box>
-  <Box p={3} color="text.inverse" bg="bg.warningInverse">
+  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
     2
   </Box>
 </Grid>
@@ -26,10 +26,10 @@ Use [Box](/Box) instead.
 
 ```jsx
 <Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}>
-  <Box p={3} color="text.inverse" bg="bg.infoInverse">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     1
   </Box>
-  <Box p={3} color="text.inverse" bg="bg.warningInverse">
+  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
     2
   </Box>
 </Box>
@@ -39,10 +39,10 @@ Use [Box](/Box) instead.
 
 ```jsx live
 <Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
-  <Box p={3} color="text.inverse" bg="bg.infoInverse">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     1
   </Box>
-  <Box p={3} color="text.inverse" bg="bg.warningInverse">
+  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
     2
   </Box>
 </Grid>

package/docs/content/Label.md

@@ -7,7 +7,8 @@ The Label component is used to add contextual metadata to a design. Visually it
 ## Default example
 
 ```jsx live
-  <Label variant="small" outline sx={{borderColor: "border.danger", mr: 2, color: "text.danger"}}>small</Label>
+<>
+  <Label variant="small" outline sx={{borderColor: "danger.emphasis", mr: 2, color: "danger.fg"}}>small</Label>
   <Label variant="medium" sx={{mr: 2}}>medium (default)</Label>
   <Label variant="large" sx={{mr: 2}}>large</Label>
   <Label variant="xl">xl label</Label>
@@ -18,6 +19,7 @@ The Label component is used to add contextual metadata to a design. Visually it
   <Label variant="medium" sx={{bg:"#1C90FA", m: 1}}>css</Label>
   <Label variant="medium" sx={{bg:"#FFF06C", color:"#24292E", m: 1}}>documentation</Label>
   <Label variant="medium" sx={{bg: "#656BFE", m: 1}}>primer</Label>
+</>
 ```
 
 ## System props

package/docs/content/LabelGroup.md

@@ -9,7 +9,7 @@ The LabelGroup component is used to add commonly used margins and wrapping for g
 ```jsx live
 <LabelGroup>
   <Label>Default label</Label>
-  <Label sx={{color: 'prState.closed.text', bg: 'prState.closed.bg'}}>
+  <Label sx={{color: "fg.onEmphasis", bg: "danger.emphasis"}}>
     Label with background indicating a closed PR state
   </Label>
   <Label outline>Default outline label</Label>

package/docs/content/Pagination.md

@@ -32,7 +32,7 @@ By default, clicking a link in the pagination component will cause the browser t
     }
 
     return (
-      <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} p={2}>
+      <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
         <Box>
           Current page: {page} / {totalPages}
         </Box>
@@ -63,7 +63,7 @@ type HrefBuilder = (page: number) => string
     }
 
     return (
-      <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} p={2}>
+      <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
         <Box>The last URL clicked was: {lastUrl}</Box>
         <Pagination pageCount={15} currentPage={2} onPageChange={onPageChange} hrefBuilder={hrefBuilder} />
       </Box>
@@ -116,7 +116,7 @@ To hide all the page numbers and create a simple pagination container with just
     }
 
     return (
-      <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} p={2}>
+      <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={2}>
         <Box>
           Current page: {page} / {totalPages}
         </Box>
@@ -154,7 +154,7 @@ Pagination components get `COMMON` system props. Read our [System Props](/system
 The following snippet shows the properties in the theme that control the styling of the pagination component:
 
 ```javascript
-{
+export default {
   // ... rest of theme ...
   pagination: {
     borderRadius,

package/docs/content/PointerBox.md

@@ -7,7 +7,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it.
 ## Default example
 
 ```jsx live
-<PointerBox m={4} p={2} minHeight={100} bg="bg.success" borderColor="border.success">
+<PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis">
   PointerBox
 </PointerBox>
 ```
@@ -23,7 +23,7 @@ function PointerBoxDemo(props) {
       </Heading>
       <CaretSelector current={pos} onChange={setPos} />
       <Box position="relative" pt={4}>
-        <PointerBox m={4} p={2} minHeight={100} bg="bg.success" borderColor="border.success" caret={pos}>
+        <PointerBox m={4} p={2} minHeight={100} bg="success.subtle" borderColor="success.emphasis" caret={pos}>
           {' '}
           Content{' '}
         </PointerBox>

package/docs/content/Portal.mdx

@@ -48,17 +48,22 @@ registerPortalRoot(document.querySelector(".my-portal-root")!)
 
 ```jsx
 import { Portal, registerPortalRoot } from "@primer/components"
+
 registerPortalRoot(document.querySelector(".scrolling-canvas-root")!, "scrolling-canvas")
+
 // ...
-<Portal containerName="scrolling-canvas">
-    <div>This div will be rendered into the element registered above.</div>
-    <Portal>
-        <div>
-            This div will be rendered into the default
-            portal root created at document.body
-        </div>
+
+export default () => (
+    <Portal containerName="scrolling-canvas">
+        <div>This div will be rendered into the element registered above.</div>
+        <Portal>
+            <div>
+                This div will be rendered into the default
+                portal root created at document.body
+            </div>
+        </Portal>
     </Portal>
-</Portal>
+)
 ```
 
 ## System props

package/docs/content/Position.md

@@ -12,21 +12,25 @@ Use [Box](/Box) instead.
 **Before**
 
 ```jsx
-<Position position="absolute">...</Position>
-<Absolute>...</Absolute>
-<Relative>...</Relative>
-<Fixed>...</Fixed>
-<Sticky>...</Sticky>
+<>
+  <Position position="absolute">...</Position>
+  <Absolute>...</Absolute>
+  <Relative>...</Relative>
+  <Fixed>...</Fixed>
+  <Sticky>...</Sticky>
+</>
 ```
 
 **After**
 
 ```jsx
-<Box position="absolute">...</Box>
-<Box position="absolute">...</Box>
-<Box position="relative">...</Box>
-<Box position="fixed">...</Box>
-<Box position="sticky">...</Box>
+<>
+  <Box position="absolute">...</Box>
+  <Box position="absolute">...</Box>
+  <Box position="relative">...</Box>
+  <Box position="fixed">...</Box>
+  <Box position="sticky">...</Box>
+</>
 ```
 
 ## Default examples
@@ -35,29 +39,29 @@ Use [Box](/Box) instead.
 <Box p={2} mb={200}>
   <Heading mb={2}>Relative + Absolute</Heading>
   <Relative size={128} mx={128} my={6}>
-    <Box borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} size="100%">
-      <Absolute left="100%" top={0} color="text.inverse" bg="bg.successInverse" p={1}>
+    <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} size="100%">
+      <Absolute left="100%" top={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
         rt
       </Absolute>
-      <Absolute right="100%" top={0} color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute right="100%" top={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
         lt
       </Absolute>
-      <Absolute left="100%" bottom={0} color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute left="100%" bottom={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
         rb
       </Absolute>
-      <Absolute right="100%" bottom={0} color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute right="100%" bottom={0} color="fg.onEmphasis" bg="success.emphasis" p={1}>
         lb
       </Absolute>
-      <Absolute left={0} top="100%" color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute left={0} top="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
         bl
       </Absolute>
-      <Absolute right={0} top="100%" color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute right={0} top="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
         br
       </Absolute>
-      <Absolute left={0} bottom="100%" color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute left={0} bottom="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
         tl
       </Absolute>
-      <Absolute right={0} bottom="100%" color="text.inverse" bg="bg.successInverse" p={1}>
+      <Absolute right={0} bottom="100%" color="fg.onEmphasis" bg="success.emphasis" p={1}>
         tr
       </Absolute>
     </Box>
@@ -68,13 +72,12 @@ Use [Box](/Box) instead.
   <Box
     borderWidth="1px"
     borderStyle="solid"
-    borderColor="border.primary"
+    borderColor="success.emphasis"
     borderRadius={2}
     border={1}
-    borderColor="border.success"
     height={500}
   >
-    <Sticky top={0} bg="bg.success" p={6}>
+    <Sticky top={0} bg="success.subtle" p={6}>
       I'm sticky!
     </Sticky>
   </Box>
@@ -82,7 +85,7 @@ Use [Box](/Box) instead.
   <Heading my={2}>Fixed</Heading>
   <p>(see the bottom right of the screen)</p>
 
-  <Fixed bottom={0} right={0} color="text.inverse" bg="bg.dangerInverse" p={2}>
+  <Fixed bottom={0} right={0} color="fg.onEmphasis" bg="danger.emphasis" p={2}>
     I'm fixed to the bottom right.
   </Fixed>
 </Box>

package/docs/content/SelectMenu.md

@@ -84,7 +84,7 @@ Used to wrap the content in a `SelectMenu`.
 ```jsx
 <SelectMenu.Modal>
   {/* all menu content is wrapped in the modal*/}
-</SelectMenu.Menu>
+</SelectMenu.Modal>
 ```
 
 ### Right-aligned modal
@@ -241,8 +241,10 @@ Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `
 The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks.
 
 ```jsx
-<SelectMenu.Tab index={0} tabName="Repository"/>
-<SelectMenu.Tab index={1} tabName="Organization"/>
+<>
+  <SelectMenu.Tab index={0} tabName="Repository"/>
+  <SelectMenu.Tab index={1} tabName="Organization"/>
+</>
 ```
 
 ### System Props

package/docs/content/SideNav.md

@@ -44,7 +44,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full" selected>
     <Text>With a status icon</Text>
-    <StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="icon.success" />
+    <StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full">
     <Text>With a label</Text>
@@ -71,22 +71,22 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more
 <Box
   borderWidth="1px"
   borderStyle="solid"
-  borderColor="border.primary"
+  borderColor="border.default"
   borderRadius={2}
   p={3}
-  backgroundColor="bg.secondary"
+  backgroundColor="canvas.subtle"
   maxWidth={360}
 >
   <Box
     borderStyle="solid"
-    borderColor="border.primary"
+    borderColor="border.default"
     borderWidth={0}
     borderBottomWidth={1}
     borderRadius={0}
     mb={2}
     pb={1}
   >
-    <Heading as="h5" fontSize={1} color="text.secondary">
+    <Heading as="h5" fontSize={1} color="fg.muted">
       Menu
     </Heading>
   </Box>

package/docs/content/StateLabel.md

@@ -7,12 +7,14 @@ Use StateLabel components to show the status of an issue or pull request.
 ## Default example
 
 ```jsx live
-<StateLabel status="issueOpened">Open</StateLabel>
-<StateLabel status="issueClosed">Closed</StateLabel>
-<StateLabel status="pullOpened">Open</StateLabel>
-<StateLabel status="pullClosed">Closed</StateLabel>
-<StateLabel status="pullMerged">Merged</StateLabel>
-<StateLabel status="draft">Draft</StateLabel>
+<>
+  <StateLabel status="issueOpened">Open</StateLabel>
+  <StateLabel status="issueClosed">Closed</StateLabel>
+  <StateLabel status="pullOpened">Open</StateLabel>
+  <StateLabel status="pullClosed">Closed</StateLabel>
+  <StateLabel status="pullMerged">Merged</StateLabel>
+  <StateLabel status="draft">Draft</StateLabel>
+</>
 ```
 
 ## System props

package/docs/content/StyledOcticon.md

@@ -8,8 +8,10 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst
 ## Default example
 
 ```jsx live
-<StyledOcticon icon={CheckIcon} size={32} color="icon.success" mr={2} />
-<StyledOcticon icon={XIcon} size={32} color="icon.danger" />
+<>
+  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" mr={2} />
+  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
+</>
 ```
 
 ## System props

package/docs/content/Text.md

@@ -7,9 +7,11 @@ The Text component is a wrapper component that will apply typography styles to t
 ## Default example
 
 ```jsx live
-<Text as='p' fontWeight="bold">bold</Text>
-<Text as='p' color="text.danger">danger color</Text>
-<Text as='p' color="text.inverse" bg="bg.canvasInverse" p={2}>inverse colors</Text>
+<>
+  <Text as='p' fontWeight="bold">bold</Text>
+  <Text as='p' color="danger.fg">danger color</Text>
+  <Text as='p' color="fg.onEmphasis" bg="neutral.emphasis" p={2}>inverse colors</Text>
+</>
 ```
 
 ## System props