refactor: migrate legacy wire namespace to wrn

packages/ui/components/CustomScrollbar.wrn

@@ -40,7 +40,7 @@ component CustomScrollbar {
     <div
       {...attrs}
       data-ui-component="CustomScrollbar"
-      class='wire-scrollbar {class}'
+      class='wrn-scrollbar {class}'
       data-color='{color}'
       data-size='{size}'
       data-axis='{axis}'
@@ -51,8 +51,8 @@ component CustomScrollbar {
   }
 
   style {
-    .wire-scrollbar {
-      --scrollbar-accent: var(--wire-color-primary);
+    .wrn-scrollbar {
+      --scrollbar-accent: var(--wrn-color-primary);
       min-width: 0;
       overflow: auto;
       /*
@@ -64,48 +64,48 @@ component CustomScrollbar {
       overscroll-behavior: contain;
     }
 
-    .wire-scrollbar[data-color="secondary"] {
-      --scrollbar-accent: var(--wire-color-secondary);
+    .wrn-scrollbar[data-color="secondary"] {
+      --scrollbar-accent: var(--wrn-color-secondary);
     }
 
-    .wire-scrollbar[data-color="success"] {
-      --scrollbar-accent: var(--wire-color-success);
+    .wrn-scrollbar[data-color="success"] {
+      --scrollbar-accent: var(--wrn-color-success);
     }
 
-    .wire-scrollbar[data-color="danger"] {
-      --scrollbar-accent: var(--wire-color-danger);
+    .wrn-scrollbar[data-color="danger"] {
+      --scrollbar-accent: var(--wrn-color-danger);
     }
 
-    .wire-scrollbar[data-color="info"] {
-      --scrollbar-accent: var(--wire-color-info);
+    .wrn-scrollbar[data-color="info"] {
+      --scrollbar-accent: var(--wrn-color-info);
     }
 
-    .wire-scrollbar[data-axis="vertical"] {
+    .wrn-scrollbar[data-axis="vertical"] {
       overflow-x: hidden;
       overflow-y: auto;
     }
 
-    .wire-scrollbar[data-axis="horizontal"] {
+    .wrn-scrollbar[data-axis="horizontal"] {
       overflow-x: auto;
       overflow-y: hidden;
     }
 
-    .wire-scrollbar::-webkit-scrollbar {
+    .wrn-scrollbar::-webkit-scrollbar {
       width: var(--scrollbar-thickness, 8px);
       height: var(--scrollbar-thickness, 8px);
     }
 
-    .wire-scrollbar::-webkit-scrollbar-track {
-      background: var(--wire-color-surface-soft);
+    .wrn-scrollbar::-webkit-scrollbar-track {
+      background: var(--wrn-color-surface-soft);
       border-radius: var(--scrollbar-radius, 999px);
     }
 
-    .wire-scrollbar::-webkit-scrollbar-thumb {
+    .wrn-scrollbar::-webkit-scrollbar-thumb {
       background: color-mix(in srgb, var(--scrollbar-accent) 45%, transparent);
       border-radius: var(--scrollbar-radius, 999px);
     }
 
-    .wire-scrollbar::-webkit-scrollbar-thumb:hover {
+    .wrn-scrollbar::-webkit-scrollbar-thumb:hover {
       background: var(--scrollbar-accent);
     }
 
@@ -114,7 +114,7 @@ component CustomScrollbar {
      * width above, so the region keeps its own padding instead.
      */
     @media (hover: none) {
-      .wire-scrollbar {
+      .wrn-scrollbar {
         scrollbar-width: auto;
       }
     }