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
@@ -82,4 +82,172 @@ size: string = "default"
      </details>
    </div>
  }
+
+  style {
+    /* Portal display, accent, and language preferences */
+    .wire-preferences {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .wire-preferences__menu {
+      position: relative;
+    }
+
+    .wire-preferences__menu > summary {
+      display: inline-flex;
+      min-width: 2.25rem;
+      min-height: 2.25rem;
+      padding: 0.45rem 0.6rem;
+      align-items: center;
+      justify-content: center;
+      gap: 0.4rem;
+      border: 1px solid transparent;
+      border-radius: 0.6rem;
+      color: var(--wire-color-muted);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    .wire-preferences__menu > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .wire-preferences__menu > summary:hover,
+    .wire-preferences__menu[open] > summary {
+      color: var(--wire-color-text);
+      border-color: var(--wire-color-border);
+      background: var(--wire-color-surface);
+    }
+
+    .wire-preferences__menu > summary > span:first-child {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-preferences__current-language {
+      min-width: 1.25rem;
+      color: var(--wire-color-text);
+      font-size: 0.625rem;
+      font-weight: 650;
+      letter-spacing: 0.02em;
+    }
+
+    .wire-preferences__panel {
+      position: absolute;
+      z-index: 80;
+      top: calc(100% + 0.5rem);
+      right: 0;
+      display: grid;
+      width: max-content;
+      min-width: 11rem;
+      max-width: min(22rem, calc(100vw - 2rem));
+      max-height: min(28rem, calc(100dvh - 2rem));
+      overflow-y: auto;
+      padding: 0.75rem;
+      gap: 0.6rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.8rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+      box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18));
+      animation: wire-component-enter 160ms ease both;
+    }
+
+    .wire-preferences__panel > strong {
+      padding-inline: 0.25rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .wire-preferences__options {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.4rem;
+    }
+
+    .wire-preferences__panel button {
+      display: inline-flex;
+      min-height: 2.25rem;
+      padding: 0.5rem 0.65rem;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: 0.55rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-2);
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    .wire-preferences__panel button:hover {
+      outline: 2px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent);
+    }
+
+    .wire-preferences__panel button[aria-pressed="true"] {
+      color: var(--wire-color-primary);
+      background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface));
+      outline: 1px solid color-mix(in srgb, var(--wire-color-primary) 55%, transparent);
+    }
+
+    .wire-preferences__swatches {
+      display: grid;
+      grid-template-columns: repeat(3, 2rem);
+      gap: 0.5rem;
+    }
+
+    .wire-preferences__swatches button {
+      width: 2rem;
+      min-height: 2rem;
+      padding: 0;
+      border: 3px solid var(--wire-color-surface);
+      border-radius: 999px;
+      background: var(--wire-preference-swatch);
+      box-shadow: 0 0 0 1px var(--wire-color-border);
+    }
+
+    .wire-preferences__swatches button[aria-pressed="true"] {
+      box-shadow:
+        0 0 0 2px var(--wire-color-surface),
+        0 0 0 4px var(--wire-color-primary);
+    }
+
+    .wire-preferences__panel--language button {
+      width: 100%;
+      background: transparent;
+    }
+
+    .wire-preferences__panel--language button span {
+      display: grid;
+      width: 1.65rem;
+      height: 1.65rem;
+      place-items: center;
+      border-radius: 0.45rem;
+      background: var(--wire-color-surface-2);
+      font-size: 0.65rem;
+    }
+
+    .wire-preferences__panel--language button[aria-pressed="true"]::after {
+      width: 0.9rem;
+      height: 0.9rem;
+      margin-left: auto;
+      content: "";
+      background: currentColor;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E")
+        center / contain no-repeat;
+    }
+
+    @media (max-width: 640px) {
+    .wire-preferences__panel {
+        position: fixed;
+        top: auto;
+        right: 1rem;
+        bottom: 1rem;
+        left: 1rem;
+        width: auto;
+      }
+    }
+  }
 }