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
@@ -280,4 +280,182 @@ component ToggleCount {
      {/if}
    </section>
  }
+
+  style {
+    .wire-next--toggle-count {
+      --wire-toggle-count-accent: var(--wire-component-color);
+      display: grid;
+      width: fit-content;
+      gap: 0.75rem;
+      color: var(--wire-color-text);
+    }
+
+    .wire-next--toggle-count-full {
+      width: 100%;
+    }
+
+    .wire-next__toggle-count-control {
+      display: flex;
+    }
+
+    .wire-next__toggle-count-segmented {
+      display: inline-flex;
+      gap: 0.2rem;
+      padding: 0.2rem;
+      border-radius: calc(var(--wire-radius-sm) + 0.15rem);
+      background: var(--wire-color-surface-2);
+      box-shadow: inset 0 0 0 1px var(--wire-color-border);
+    }
+
+    .wire-next__toggle-count-segmented button {
+      min-height: 2.35rem;
+      padding: 0.45rem 0.8rem;
+      border: 0;
+      border-radius: var(--wire-radius-sm);
+      background: transparent;
+      color: var(--wire-color-muted);
+      font: inherit;
+      font-size: 0.78rem;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .wire-next__toggle-count-segmented button[aria-pressed="true"] {
+      background: var(--wire-color-surface);
+      color: var(--wire-color-text);
+      box-shadow:
+        var(--wire-shadow-1),
+        inset 0 -2px var(--wire-toggle-count-accent);
+    }
+
+    .wire-next__toggle-count-segmented button:focus-visible,
+    .wire-next__toggle-count-switch:focus-visible {
+      outline: 2px solid var(--wire-toggle-count-accent);
+      outline-offset: 2px;
+    }
+
+    .wire-next__toggle-count-segmented button:disabled,
+    .wire-next__toggle-count-switch:disabled {
+      cursor: not-allowed;
+    }
+
+    .wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
+      align-items: center;
+      gap: 0.7rem;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    .wire-next__toggle-count-control > span {
+      color: var(--wire-color-muted);
+    }
+
+    .wire-next__toggle-count-control > span[data-selected="true"] {
+      color: var(--wire-color-text);
+    }
+
+    .wire-next__toggle-count-switch {
+      position: relative;
+      width: 2.65rem;
+      height: 1.45rem;
+      padding: 0.15rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 999px;
+      background: var(--wire-color-surface-2);
+      cursor: pointer;
+      transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-switch > span {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      background: var(--wire-color-text);
+      box-shadow: var(--wire-shadow-1);
+      transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-switch[aria-checked="true"] {
+      border-color: var(--wire-toggle-count-accent);
+      background: var(--wire-toggle-count-accent);
+    }
+
+    .wire-next__toggle-count-switch[aria-checked="true"] > span {
+      background: white;
+      transform: translateX(1.15rem);
+    }
+
+    .wire-next__toggle-count-items {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+      overflow: hidden;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-md);
+      background: var(--wire-color-surface);
+    }
+
+    .wire-next__toggle-count-items article {
+      display: grid;
+      align-content: start;
+      gap: 0.35rem;
+      min-width: 0;
+      padding: 1rem;
+    }
+
+    .wire-next__toggle-count-items article + article {
+      border-left: 1px solid var(--wire-color-border);
+    }
+
+    .wire-next__toggle-count-items article > span {
+      color: var(--wire-color-muted);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .wire-next__toggle-count-items strong {
+      display: flex;
+      align-items: baseline;
+      gap: 0.2rem;
+      font-size: 1.5rem;
+      line-height: 1;
+    }
+
+    .wire-next__toggle-count-items [data-toggle-count-value] {
+      min-width: 2ch;
+      font-variant-numeric: tabular-nums;
+      transition:
+        color var(--wire-motion-fast) var(--wire-ease-standard),
+        transform var(--wire-motion-fast) var(--wire-ease-standard);
+    }
+
+    .wire-next__toggle-count-items strong small {
+      color: inherit;
+      font-size: 0.65em;
+    }
+
+    .wire-next__toggle-count-items article > small {
+      color: var(--wire-color-muted);
+      font-size: 0.68rem;
+    }
+
+    @media (max-width: 36rem) {
+    .wire-next__toggle-count-control {
+        justify-content: center;
+      }
+    .wire-next__toggle-count-items {
+        grid-template-columns: 1fr;
+      }
+    .wire-next__toggle-count-items article + article {
+        border-top: 1px solid var(--wire-color-border);
+        border-left: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    .wire-next__toggle-count-items [data-toggle-count-value] {
+        transition: none;
+      }
+    }
+  }
 }