Fixed typos, ordering and icons

polaris.shopify.com/content/design/colors/index.md

@@ -28,7 +28,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color has purpose
 
@@ -46,7 +46,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
         Each usage of color within the Shopify admin is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success messages, and blue is used to draw attention to tips and offers. Using color as decoration is exclusive to illustration.
 
@@ -85,7 +85,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color has impact
 
@@ -103,7 +103,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           The intentional design of the overall interface in black and white enables strategically positioned and carefully selected elements to grab merchants' attention. By utilizing color purposefully, the focus is directed towards crucial information, actions, and visual cues.
 
@@ -145,7 +145,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           ## Color is accessible
 
@@ -165,7 +165,7 @@ status: New
 
       <Grid.Cell columnSpan={{xs: 6, sm: 6, md: 6, lg: 4, xl: 4}}>
 
-        <Box className="text-extra-padding">
+        <Box padding="400">
 
           Colors are meant to be easily understood and read by all merchants. Sufficient contrast makes things easier to find, identify and interact with.
 

polaris.shopify.com/content/design/depth/creating-depth.md

@@ -1,6 +1,6 @@
 ---
 title: Creating Depth
-icon: ColorsMajor
+icon: VariantMajor
 showTOC: true
 keywords:
   - depth
@@ -9,7 +9,7 @@ keywords:
   - bevel use
 ---
 
-# {frontmatter.title}
+# Depth → {frontmatter.title}
 
 <Subnav />
 
@@ -37,10 +37,10 @@ keywords:
 
   </Card>
   <Card>
-    <Grid gap="400" 
+    <Grid gap="400"
       areas={{
-        xs: ['a a a a a a ', 'b b b b b b'], 
-        lg: ['a a a a b b b b b b b b'] 
+        xs: ['a a a a a a ', 'b b b b b b'],
+        lg: ['a a a a b b b b b b b b']
       }}
     >
     <Grid.Cell area="a">
@@ -86,10 +86,10 @@ keywords:
   </Card>
 
   <Card>
-    <Grid gap="400" 
+    <Grid gap="400"
       areas={{
-        xs: ['a a a a a a ', 'b b b b b b', 'c c c c c c'], 
-        lg: ['a a a a b b b b c c c c'] 
+        xs: ['a a a a a a ', 'b b b b b b', 'c c c c c c'],
+        lg: ['a a a a b b b b c c c c']
       }}
     >
       <Grid.Cell area="a">
@@ -123,8 +123,8 @@ keywords:
   </Card>
   <Card>
     <Grid gap="400" areas={{
-        xs: ['a a a a a a ', 'b b b b b b'], 
-        lg: ['a a a a b b b b b b b b'] 
+        xs: ['a a a a a a ', 'b b b b b b'],
+        lg: ['a a a a b b b b b b b b']
     }}>
       <Grid.Cell area="a">
 

polaris.shopify.com/content/design/icons/creating-icons.md

@@ -30,7 +30,7 @@ keywords:
   - icon visual harmony.
 ---
 
-# {frontmatter.title}
+# Icons → {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 

polaris.shopify.com/content/design/icons/using-icons.md

@@ -21,7 +21,7 @@ keywords:
   - icon colors
 ---
 
-# {frontmatter.title}
+# Icons → {frontmatter.title}
 
 <Lede>{frontmatter.description}</Lede>
 

polaris.shopify.com/content/design/layout/density.md

@@ -29,10 +29,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## High density
 
                 Information-rich interfaces like index pages or data tables require high-density layouts for efficiency. By presenting information in a denser format, merchants can quickly access and compare data, enhancing the effectiveness of the Shopify admin.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -42,8 +44,9 @@ description: The admin is high density by default, but the level of density can
                 </Do>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+            <Box padding="400">
                 Another way to create visual zones in high density layouts is to use different surface colors. Secondary colors can be used to create visual hierarchy within a high density component to increase visual hierarchy and to guide merchants to the data that matters most.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -58,10 +61,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Grid and vertical divisions
 
                 Dividing surfaces vertically and in a grid pattern also offers a way to increase density. This type of visual pattern is better suited for selections or data visualization and should be used accordingly. These divisions are made by using different surface background colors instead of using line dividers.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -85,10 +90,12 @@ description: The admin is high density by default, but the level of density can
      <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Action components use high density
 
                 Smaller components, like option lists or popovers, are built with high density in mind. Because their main purpose is to offer a set of actions to the merchant, they need to feel small and efficient. Effectively designed action components give the feeling of a pro tool in the Shopify admin and increase efficiency when using different features.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 <Do>
@@ -112,6 +119,7 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ## Low density
 
@@ -120,6 +128,7 @@ description: The admin is high density by default, but the level of density can
                 Because low density interfaces offer more space, there is more for the merchant to analyze before taking action. Low density interfaces can also contain high density components, like a complex text editor within a card that serves to edit a product title and description.
 
                 Top-to-bottom visual rhythm is often used to create a linear and predictable layout that is easy for merchants to understand.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -144,10 +153,12 @@ description: The admin is high density by default, but the level of density can
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Switching contexts
 
                 Cards are the best way to switch context in low density layouts. Each card can be specialized in a set of features that requires the merchant to recenter their focus.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>

polaris.shopify.com/content/design/layout/index.md

@@ -28,23 +28,24 @@ status: New
 
 <Subnav />
 
-## Overview
-
 <Stack gap="800">
 <Card>
 <Grid gap="400" >
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
-### Space defines proximity
+<Box padding="400">
+## Space defines proximity
 
 Space plays a vital role in establishing connections between items. The principle of proximity states that the closer objects are, the stronger their perceived relationship.
 
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
     ![An order card with an inset table followed by an apps card with a grid pattern made of different surfaces](/images/design/layout/layout-overview-01-space@2x.png)
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+<Box padding="400">
 Grouping similar items together helps merchants understand which elements are related and make faster decisions.
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>
@@ -68,23 +69,24 @@ Grouping similar items together helps merchants understand which elements are re
 <Card>
 <Grid gap="400">
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
 ## Emphasis creates hierarchy
 
 In the Shopify admin, larger, heavier, and contrasting elements attract attention and create visual rhythm.
 
 Smaller, lighter, and subtler elements are work-oriented and provide detailed information.
 
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
 
     ![A grid pattern showing different marketing statistics, separated in cards that have a title and a larger stat numbe](/images/design/layout/layout-overview-04-emphasis@2x.png)
 
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
     Use size, weight, and contrast to establish hierarchy in the admin. Divider lines are used to delimit rows of information in data and index tables, and rarely for dividing information elsewhere.
-
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>
@@ -108,11 +110,12 @@ Smaller, lighter, and subtler elements are work-oriented and provide detailed in
 <Card>
 <Grid gap="400">
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
-
+<Box padding="400">
 ## Software, not website
 
 Since the admin is more like software than a website, elements need to be sized appropriately based on their job.
 
+</Box>
 </Grid.Cell>
 
 <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -122,7 +125,9 @@ Since the admin is more like software than a website, elements need to be sized
 </Grid.Cell>
 
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+<Box padding="400">
     Compact elements add detail, and larger elements command more attention. Surfaces adapt to these components and offer an optimized view of the admin.
+</Box>
 </Grid.Cell>
 <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
     <Do>

polaris.shopify.com/content/design/layout/layout-tokens.md

@@ -27,15 +27,15 @@ description: Apply consistent and harmonious space within and between ui element
 
 <Stack gap="800">
 
-## Overview
-
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
-                ### Using space tokens
+                ## Using space tokens
 
                 Space tokens should be used whenever you need to apply space around or between elements within. You should apply space tokens to all space related css properties such as padding, margin and gap. They should not be used for non-space declarations such as height, width, outline-offset, etc. Always use the proper token group when using Polaris tokens. If a token doesn’t seem to fit your need feel free to reach out in the #polaris channel or create an issue in Github.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -48,12 +48,14 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Primitive tokens
 
                 Primitive tokens refer to generic tokens that can be applied to provide spacing around or between components. They give access to the full scale of values offered by Polaris for managing space within the interface.
 
                 Each is simply named by declaring the token group and then the percentage multiplier of our base value of 4px. Therefore, space-100 is equal to 4px while space-400 equals 16px.
+            </Box>
 
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
@@ -66,12 +68,14 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Semantic tokens
 
                 Similar to color tokens, semantic space tokens provide spacing for specific and defined contexts within the admin. These tokens should only be used for that explicit purpose. When no semantic token seems to fit your need, use a primitive token instead.
 
                 Semantic tokens explicitly declare what css selector they should be applied to. For example, space-card-padding should only be used to set the padding within the Card component.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: example use of card-padding token](/images/design/layout/tokens/layout-tokens-semantic@2x.png)
@@ -91,15 +95,18 @@ description: Apply consistent and harmonious space within and between ui element
         </Grid>
     </Card>
 
-    ## How to apply them
+
 
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
+                ## How to apply tokens
 
                 ### Figma
 
                 Semantic and primitive space tokens can be accessed via the auto layout padding and gap inputs in the right panel.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: Dropdown of variables in Figma](/images/design/layout/tokens/layout-tokens-figma@2x.png)
@@ -110,10 +117,12 @@ description: Apply consistent and harmonious space within and between ui element
     <Card>
         <Grid gap="400">
             <Grid.Cell columnSpan={{xs: 6, lg: 4}}>
+            <Box padding="400">
 
                 ### Polaris React
 
                 Space tokens can be applied in two main ways in Polaris Reach. First, all of the layout components such as Box have access to the tokens via their prop api. Second, when writing your own css you can use the token directly via the css variables that come with the Polaris token package.
+            </Box>
             </Grid.Cell>
             <Grid.Cell columnSpan={{xs: 6, lg: 8}}>
                 ![Visual: Dropdown of variables in Figma](/images/design/layout/tokens/layout-tokens-polaris-react@2x.png)