refactor(ui): localize component styles

2026-08-09 13:47:01 +05:30
parent b6bd5cfcb7
commit 54a93c1d14
37 changed files with 4508 additions and 3832 deletions
@@ -164,4 +164,62 @@ label: string = "Button"
      {/if}
    </span>
  }
+
+  style {
+    /* --- Button --------------------------------------------------------------- */
+    .wire-action {
+      position: relative;
+      display: inline-flex;
+    }
+
+    .wire-btn--pill {
+      border-radius: 999px;
+    }
+
+    .wire-btn--with-description {
+      min-height: 3.5rem;
+      justify-content: flex-start;
+      padding: 0.6rem 0.875rem;
+      text-align: left;
+    }
+
+    .wire-btn__copy {
+      display: grid;
+      min-width: 0;
+      gap: 0.15rem;
+    }
+
+    .wire-btn__description {
+      color: currentColor;
+      font-size: 0.75rem;
+      font-weight: 450;
+      line-height: 1.35;
+      opacity: 0.74;
+    }
+
+    .wire-btn__tooltip {
+      position: absolute;
+      z-index: 80;
+      inset-block-end: calc(100% + 0.5rem);
+      inset-inline-start: 50%;
+      width: max-content;
+      max-width: min(16rem, calc(100vw - 2rem));
+      padding: 0.4rem 0.6rem;
+      color: var(--wire-color-bg);
+      background: var(--wire-color-text);
+      border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border));
+      border-radius: var(--wire-radius-sm);
+      box-shadow: var(--wire-shadow-2);
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1.25;
+      text-align: center;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(-50%, 0.25rem);
+      transition:
+        opacity var(--wire-motion-fast) var(--wire-ease-standard),
+        transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+  }
 }