refactor: migrate legacy wire namespace to wrn

packages/ui/components/Typography.wrn

@@ -11,7 +11,7 @@ component Typography {
   view {
     <div
       data-ui-component="Typography"
-      class='wire-typography {class}'
+      class='wrn-typography {class}'
       data-size='{size}'
       data-columns='{columns}'
       data-gap='{gap}'
@@ -22,32 +22,32 @@ component Typography {
   }
 
   style {
-    .wire-typography {
-      color: var(--wire-color-text);
+    .wrn-typography {
+      color: var(--wrn-color-text);
       font-size: 1rem;
     }
 
-    .wire-typography[data-size="sm"] {
+    .wrn-typography[data-size="sm"] {
       font-size: 0.875rem;
     }
 
-    .wire-typography[data-size="lg"] {
+    .wrn-typography[data-size="lg"] {
       font-size: 1.125rem;
     }
 
-    .wire-typography[data-max-width="md"] {
+    .wrn-typography[data-max-width="md"] {
       max-width: 48rem;
     }
 
-    .wire-typography[data-max-width="lg"] {
+    .wrn-typography[data-max-width="lg"] {
       max-width: 64rem;
     }
 
-    .wire-typography[data-max-width="xl"] {
+    .wrn-typography[data-max-width="xl"] {
       max-width: 80rem;
     }
 
-    .wire-typography[data-max-width="full"] {
+    .wrn-typography[data-max-width="full"] {
       max-width: none;
     }
 
@@ -55,69 +55,69 @@ component Typography {
      * Multi-column prose only below a comfortable reading width; a narrow
      * screen split into columns is unreadable.
      */
-    .wire-typography[data-gap="sm"] {
+    .wrn-typography[data-gap="sm"] {
       column-gap: 1rem;
     }
 
-    .wire-typography[data-gap="md"] {
+    .wrn-typography[data-gap="md"] {
       column-gap: 2rem;
     }
 
-    .wire-typography[data-gap="lg"] {
+    .wrn-typography[data-gap="lg"] {
       column-gap: 3rem;
     }
 
     @media (min-width: 768px) {
-      .wire-typography[data-columns="2"] {
+      .wrn-typography[data-columns="2"] {
         column-count: 2;
       }
     }
 
     @media (min-width: 1024px) {
-      .wire-typography[data-columns="3"] {
+      .wrn-typography[data-columns="3"] {
         column-count: 3;
       }
     }
 
-    .wire-typography :where(h1, h2, h3, h4) {
-      color: var(--wire-color-text);
+    .wrn-typography :where(h1, h2, h3, h4) {
+      color: var(--wrn-color-text);
       font-weight: 700;
       letter-spacing: -0.02em;
       line-height: 1.2;
       break-after: avoid;
     }
 
-    .wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
-    .wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
-    .wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
-    .wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
-    .wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
-    .wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
-    .wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
-    .wire-typography :where(ul, ol) { padding-left: 1.4rem; }
-    .wire-typography :where(ul) { list-style: disc; }
-    .wire-typography :where(ol) { list-style: decimal; }
-    .wire-typography :where(blockquote) {
-      border-left: 4px solid var(--wire-color-primary);
-      background: var(--wire-color-primary-soft);
+    .wrn-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
+    .wrn-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
+    .wrn-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
+    .wrn-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
+    .wrn-typography :where(p, li) { color: var(--wrn-color-text-muted); line-height: 1.8; }
+    .wrn-typography :where(a) { color: var(--wrn-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
+    .wrn-typography :where(a:hover) { color: var(--wrn-color-primary-hover); text-decoration: underline; }
+    .wrn-typography :where(ul, ol) { padding-left: 1.4rem; }
+    .wrn-typography :where(ul) { list-style: disc; }
+    .wrn-typography :where(ol) { list-style: decimal; }
+    .wrn-typography :where(blockquote) {
+      border-left: 4px solid var(--wrn-color-primary);
+      background: var(--wrn-color-primary-soft);
       border-radius: 0 0.75rem 0.75rem 0;
       padding: 1rem 1.25rem;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
     }
-    .wire-typography :where(code) {
+    .wrn-typography :where(code) {
       border-radius: 0.35rem;
-      background: var(--wire-color-surface-soft);
+      background: var(--wrn-color-surface-soft);
       padding: 0.15rem 0.35rem;
       font-size: 0.9em;
     }
-    .wire-typography :where(pre) {
+    .wrn-typography :where(pre) {
       overflow-x: auto;
-      border: 1px solid var(--wire-color-border);
+      border: 1px solid var(--wrn-color-border);
       border-radius: 1rem;
-      background: var(--wire-color-surface-raised);
+      background: var(--wrn-color-surface-raised);
       padding: 1rem;
     }
-    .wire-typography :where(img) { border-radius: 1rem; }
-    .wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
+    .wrn-typography :where(img) { border-radius: 1rem; }
+    .wrn-typography :where(hr) { border-color: var(--wrn-color-border); margin: 2rem 0; }
   }
 }