refactor: migrate legacy wire namespace to wrn

packages/ui/components/PublicPageShell.wrn

@@ -16,7 +16,7 @@ component PublicPageShell {
     <div
       {...attrs}
       data-ui-component="PublicPageShell"
-      class='wire-page-shell {class}'
+      class='wrn-page-shell {class}'
       data-size='{size}'
       data-color='{color}'
       data-variant='{variant}'
@@ -28,7 +28,7 @@ component PublicPageShell {
       <slot name="before"></slot>
 
       <main
-        class="wire-page-shell__main"
+        class="wrn-page-shell__main"
         data-full-width='{fullWidth}'
         data-max-width='{maxWidth}'
       >
@@ -40,24 +40,24 @@ component PublicPageShell {
   }
 
   style {
-    .wire-page-shell {
+    .wrn-page-shell {
       position: relative;
       isolation: isolate;
       width: 100%;
       min-width: 0;
-      color: var(--wire-color-text);
-      background: var(--wire-color-background);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-background);
     }
 
-    .wire-page-shell[data-background="soft"] {
-      background: var(--wire-color-surface-soft);
+    .wrn-page-shell[data-background="soft"] {
+      background: var(--wrn-color-surface-soft);
     }
 
-    .wire-page-shell[data-background="raised"] {
-      background: var(--wire-color-surface-raised);
+    .wrn-page-shell[data-background="raised"] {
+      background: var(--wrn-color-surface-raised);
     }
 
-    .wire-page-shell[data-min-height="screen"] {
+    .wrn-page-shell[data-min-height="screen"] {
       min-height: 100vh;
     }
 
@@ -65,15 +65,15 @@ component PublicPageShell {
      * dvh tracks the browser chrome on a phone, so a full-height shell does
      * not leave a gap when the address bar collapses.
      */
-    .wire-page-shell[data-min-height="dvh"] {
+    .wrn-page-shell[data-min-height="dvh"] {
       min-height: 100dvh;
     }
 
-    .wire-page-shell[data-overflow="clip"] {
+    .wrn-page-shell[data-overflow="clip"] {
       overflow-x: clip;
     }
 
-    .wire-page-shell[data-overflow="hidden"] {
+    .wrn-page-shell[data-overflow="hidden"] {
       overflow-x: hidden;
     }
 
@@ -82,50 +82,50 @@ component PublicPageShell {
      * attribute, so the width cap and the gutters are a couple of rules
      * instead of two copies of the same markup.
      */
-    .wire-page-shell__main {
+    .wrn-page-shell__main {
       width: 100%;
       min-width: 0;
     }
 
-    .wire-page-shell__main[data-full-width="false"] {
+    .wrn-page-shell__main[data-full-width="false"] {
       margin-inline: auto;
       padding-inline: 1rem;
     }
 
-    .wire-page-shell__main[data-full-width="false"][data-max-width="lg"] {
+    .wrn-page-shell__main[data-full-width="false"][data-max-width="lg"] {
       max-width: 64rem;
     }
 
-    .wire-page-shell__main[data-full-width="false"][data-max-width="xl"] {
+    .wrn-page-shell__main[data-full-width="false"][data-max-width="xl"] {
       max-width: 80rem;
     }
 
-    .wire-page-shell__main[data-full-width="false"][data-max-width="2xl"] {
+    .wrn-page-shell__main[data-full-width="false"][data-max-width="2xl"] {
       max-width: 96rem;
     }
 
     @media (min-width: 640px) {
-      .wire-page-shell__main[data-full-width="false"] {
+      .wrn-page-shell__main[data-full-width="false"] {
         padding-inline: 1.5rem;
       }
     }
 
     @media (min-width: 1024px) {
-      .wire-page-shell__main[data-full-width="false"] {
+      .wrn-page-shell__main[data-full-width="false"] {
         padding-inline: 2rem;
       }
     }
 
     /* Room for a fixed header to sit over the top of the shell. */
-    .wire-page-shell[data-header-offset="sm"] {
+    .wrn-page-shell[data-header-offset="sm"] {
       padding-top: 4rem;
     }
 
-    .wire-page-shell[data-header-offset="md"] {
+    .wrn-page-shell[data-header-offset="md"] {
       padding-top: 5rem;
     }
 
-    .wire-page-shell[data-header-offset="lg"] {
+    .wrn-page-shell[data-header-offset="lg"] {
       padding-top: 6rem;
     }
   }