docs: use is=, not as=, _except_ in Frame 🙃

Author: shawnbot

docs/src/CodeExample.js

@@ -46,7 +46,7 @@ export default function CodeExample(props) {
               <ClipboardCopy value={source} />
             </Absolute>
             <Text
-              as={LiveError}
+              is={LiveError}
               fontFamily="mono"
               style={{
                 overflow: 'auto',

docs/src/Header.js

@@ -28,7 +28,7 @@ const Header = props => (
             <NavLink href="/css/getting-started" />
             <NavLink href="/css/principles" />
             <NavLink href="/css/tools" />
-            <NavLink as={Link} href="https://github.com/primer/primer/releases">
+            <NavLink is={Link} href="https://github.com/primer/primer/releases">
               Releases
             </NavLink>
           </HeaderText>

docs/src/Outline.js

@@ -4,7 +4,7 @@ import {Box} from '@primer/components'
 export default function Outline({outline, ...rest}) {
   if (outline && outline.length) {
     return (
-      <Box as="details" mb={4}>
+      <Box is="details" mb={4}>
         <summary>Table of contents</summary>
         <OutlineList items={outline} {...rest} />
       </Box>

docs/src/PackageHeader.js

@@ -38,8 +38,8 @@ export default function PackageHeader(props) {
 
   return (
     <Flex justifyContent="space-between" mb={4} {...rest}>
-      <Text as="div" fontSize={1}>
-        {status ? <StatusLabel status={status} as="a" href="/css/status-key" mr={2} /> : null}
+      <Text is="div" fontSize={1}>
+        {status ? <StatusLabel status={status} is="a" href="/css/status-key" mr={2} /> : null}
         {info}
       </Text>
       <Box>

docs/src/SideNav.js

@@ -7,7 +7,7 @@ import {rootPage} from './utils'
 
 export default function SideNav(props) {
   return (
-    <Relative as="nav">
+    <Relative is="nav">
       <Box id="sidenav" {...props}>
         <Flex flexDirection="column" alignItems="start">
           <Router>

docs/src/color-system.js

@@ -42,15 +42,15 @@ export function ColorVariables(props) {
       <Flex flexWrap="wrap" {...props}>
         <FadeVariables id="black" hue="black" bg="black" color="white">
           <BorderBox border={0} borderRadius={0} borderTop={1} borderColor="gray.5" mt={1}>
-            <Text as="div" fontSize={2} pt={3} mb={0}>
+            <Text is="div" fontSize={2} pt={3} mb={0}>
               Black fades apply alpha transparency to the <Var>$black</Var> variable. The black color value has a slight
               blue hue to match our grays.
             </Text>
           </BorderBox>
         </FadeVariables>
         <FadeVariables id="white" hue="white" over={BLACK}>
           <BorderBox border={0} borderRadius={0} borderTop={1} mt={1}>
-            <Text as="div" fontSize={2} pt={3} mb={0}>
+            <Text is="div" fontSize={2} pt={3} mb={0}>
               White fades apply alpha transparency to the <Var>$white</Var> variable, below these are shown overlaid on
               a dark gray background.
             </Text>
@@ -64,14 +64,14 @@ export function ColorVariables(props) {
 export function ColorVariable({hue, ...rest}) {
   const values = colors[hue]
   return (
-    <Flex.Item as={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
-      {/* <Heading as="div">{titleCase(hue)}</Heading> */}
+    <Flex.Item is={Box} pr={4} mb={6} className="col-6 markdown-no-margin" {...rest}>
+      {/* <Heading is="div">{titleCase(hue)}</Heading> */}
       <Box bg={`${hue}.5`} my={2} p={3} color="white">
-        <Heading as="div" pb={3} fontSize={56} fontWeight="light">
+        <Heading is="div" pb={3} fontSize={56} fontWeight="light">
           {titleCase(hue)}
         </Heading>
         <Flex justifyContent="space-between">
-          <Flex.Item flex="1 1 auto" as={Var}>
+          <Flex.Item flex="1 1 auto" is={Var}>
             ${hue}-500
           </Flex.Item>
           <Text fontFamily="mono">{values[5]}</Text>
@@ -103,14 +103,14 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
   })
   const boxProps = {color, bg}
   return (
-    <Flex.Item as={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
-      {/* <Heading as="div">{titleCase(hue)}</Heading> */}
+    <Flex.Item is={Box} pr={4} mb={6} width={1 / 2} className="markdown-no-margin" {...rest}>
+      {/* <Heading is="div">{titleCase(hue)}</Heading> */}
       <Box my={2} p={3} {...boxProps}>
-        <Heading as="div" pb={3} fontSize={56} fontWeight="light">
+        <Heading is="div" pb={3} fontSize={56} fontWeight="light">
           {titleCase(hue)}
         </Heading>
         <Flex justifyContent="space-between">
-          <Flex.Item flex="1 1 auto" as={Var}>
+          <Flex.Item flex="1 1 auto" is={Var}>
             ${hue}
           </Flex.Item>
           <Text fontFamily="mono">
@@ -141,7 +141,7 @@ function Swatch(props) {
   const {name, value, textColor = overlayColor(value), ...rest} = props
   return (
     <Box bg={value} color={textColor} {...rest}>
-      <Text as={Flex} fontSize={1} justifyContent="space-between">
+      <Text is={Flex} fontSize={1} justifyContent="space-between">
         <Box p={3}>
           <Var>${name}</Var>
         </Box>
@@ -161,7 +161,7 @@ Swatch.propTypes = {
 
 function Var(props) {
   // FIXME: fontStyle should be a prop, right?
-  return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
+  return <Text is="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
 }
 
 function overlayColor(bg) {

docs/src/landing/index.js

@@ -10,7 +10,7 @@ import ColorImage from './ColorImage.svg'
 
 export {default as HeaderImage} from './HeaderImage.svg'
 
-const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
+const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
 const OverviewText = props => <Text fontSize={1} {...props} />
 
 export function StylesOverview(props) {
@@ -34,7 +34,7 @@ export function StylesOverview(props) {
   return (
     <Flex {...props}>
       {styleTypes.map(({name, desc, image}) => (
-        <Flex.Item as={Text} textAlign="center" mx={4} key={name}>
+        <Flex.Item is={Text} textAlign="center" mx={4} key={name}>
           <Image src={image} height={90} mb={2} />
           <OverviewTitle>{name}</OverviewTitle>
           <OverviewText>{desc}</OverviewText>
@@ -103,9 +103,9 @@ function Image(props) {
   const {src, ...rest} = props
   switch (typeof src) {
     case 'string':
-      return <Box as="img" width="100%" alt="" {...props} />
+      return <Box is="img" width="100%" alt="" {...props} />
     case 'function':
-      return <Box as={src} {...rest} />
+      return <Box is={src} {...rest} />
     default:
       throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
   }
@@ -127,7 +127,7 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
           </Link>
         </Flex>
         {count ? (
-          <Text as="div" textAlign="center">
+          <Text is="div" textAlign="center">
             This package includes all {count} Primer modules.
           </Text>
         ) : null}
@@ -139,9 +139,9 @@ export function PrimerPackageBox({data = {}, count, ...rest}) {
 export function MetaPackageBox({children, data = {}, title, ...rest}) {
   const deps = data.dependencies || []
   return (
-    <Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
+    <Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
       <BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
-        <Heading as="div" fontSize={2}>
+        <Heading is="div" fontSize={2}>
           <Link href={packageSourceURL(data.name)} color="inherit">
             {title}
           </Link>{' '}