Migrate to Enhance Styles 5

app.arc

@@ -9,7 +9,7 @@ enhance/arc-plugin-enhance
 
 @enhance-styles
 filename css/styles.css
-config css-config.json
+config styleguide.json
 
 @bundles
 mux-player 'node_modules/@mux/mux-player'

app/api/docs/$$.mjs

@@ -12,7 +12,7 @@ import HljsLineWrapper from '../../docs/hljs-line-wrapper.mjs'
 const arcdown = new Arcdown({
   pluginOverrides: {
     markdownItToc: {
-      containerClass: 'toc mb2 ml-2',
+      containerClass: 'toc mbe2 mis-2',
       listType: 'ul',
     },
   },

app/docs/md/learn/concepts/routing/lifecycle.md

@@ -8,7 +8,7 @@ The journey of an HTTP request through Enhance isn't complicated, but it's helpf
 
 </doc-callout>
 
-<doc-enhance-diagram class="block mb2">
+<doc-enhance-diagram class="block mbe2">
 </doc-enhance-diagram>
 
 ## Routing

app/docs/md/learn/concepts/styling/enhance-styles/modular-scales.md

@@ -25,7 +25,7 @@ Traditionally, designers and developers have taken to using different scale valu
 Fluid scales allow font sizes, margins, padding, and other aspects of layouts to scale in size gradually across a range of viewport sizes, as opposed to changing suddenly at discrete breakpoints via media queries. Taking the previous example with our `h1`, a fluid scale would allow the heading’s font size to scale gradually between 2rem and 4rem based on the current viewport size (as long as that viewport size is between your chosen minimum and maximum width). This approach has been popularized by tools like [Utopia](https://utopia.fyi/).
 
 Here’s an example of a fluid modular scale for type in action — you can also [explore the live version of this demo](https://color-ig2.begin.app)!
-<img alt='Animation loop showing a browser window shrink and growing in width, with a typographic scale shrinking and growing in tandem' src='/_public/img/gif/example-fluid-type.gif' class='m-auto mt0 mb0' />
+<img alt='Animation loop showing a browser window shrink and growing in width, with a typographic scale shrinking and growing in tandem' src='/_public/img/gif/example-fluid-type.gif' class='mi-auto mb0' />
 
 In addition to gracefully scaling across a range of viewport widths, using fluid type and spacing can reduce the amount of CSS you need to write (especially when it comes to CSS scoped with media queries). Of course, this strategy requires alignment between designers and developers; [the Utopia blog](https://utopia.fyi/blog) has some great reading on this subject.
 

app/docs/md/learn/concepts/styling/enhance-styles/utility-classes.md

@@ -86,7 +86,7 @@ getStyles.path()      // root-relative path to the .css file
 
 Though `@enhance/arc-plugin-styles` is already a dependency of Enhance, you may want to declare it as a direct dependency of your project:
 
-<div class="mt-1">
+<div class="mbs-1">
 
 ```bash
 npm i @enhance/arc-plugin-styles

app/docs/md/unsorted/doc-callout-test.md

@@ -12,7 +12,7 @@ This 👇 code block is rendered and highlighted on the server with arcdown + hl
 <doc-callout level="info" mark="🤘">
 ```
 
-<hr class="block mt3 mb3 border1" />
+<hr class="block mb3 border1" />
 
 <doc-callout>
 
@@ -66,7 +66,7 @@ Luckily Enhance sets you up for success by preconfiguring your app to pass state
 
 </doc-callout>
 
-<hr class="block mt3 mb3 border1" />
+<hr class="block mb3 border1" />
 
 Empty "mark", set `mark="none"`.
 
@@ -76,7 +76,7 @@ Not all things need emoji. Most things do, but not all.
 
 </doc-callout>
 
-<hr class="block mt3 mb3 border1" />
+<hr class="block mb3 border1" />
 
 Callouts can be "thin", too. Add an empty `thin` attribute.
 
@@ -86,7 +86,7 @@ This style is good for one-liners
 
 </doc-callout>
 
-<hr class="block mt3 mb3 border1" />
+<hr class="block mb3 border1" />
 
 ## `<doc-link-callout>` Test
 

app/elements/doc/callout.mjs

@@ -53,10 +53,10 @@ export default function Callout({ html, state }) {
         ${thin ? 'callout-thin' : ''}
         flex
         gap-1
-        items-center
+        align-items-center
       ">
       ${mark.length > 0 && mark !== 'none'
-        ? `<callout-mark class="text2 self-start">${mark}</callout-mark>`
+        ? `<callout-mark class="text2 align-self-start">${mark}</callout-mark>`
         : ''}
       <div>
         <slot></slot>

app/elements/doc/showcase.mjs

@@ -9,7 +9,7 @@ export default function DocShowcase({ html, state }) {
   } = attrs
 
   const contributorMarkup = contributor
-    ? `<p class="mt0">Contributed by: <a class="underline" href="${contributorUrl}">${contributor}</a></p>`
+    ? `<p class="mbs0">Contributed by: <a class="underline" href="${contributorUrl}">${contributor}</a></p>`
     : ''
 
   return html`
@@ -37,12 +37,12 @@ export default function DocShowcase({ html, state }) {
         color: inherit;
       }
     </style>
-    <article class="mt0 mb2 p0 p2-lg">
+    <article class="mbs0 mbe2 p0 p2-lg">
       <a href="${url}" target="_blank">
-        <figure class="mb1">
+        <figure class="mbe1">
           <img src="${image}" alt="" />
         </figure>
-        <h1 class="font-medium mb0">${title}</h1>
+        <h1 class="font-medium mbe0">${title}</h1>
         <p class="leading3">
           <slot></slot>
         </p>