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
@@ -285,4 +285,194 @@ component Footer {
      </div>
    </footer>
  }
+
+  style {
+    /* --- Badge ---------------------------------------------------------------- */
+    .wire-badge {
+      display: inline-flex;
+      align-items: center;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1;
+      padding: 0.25rem 0.5rem;
+      border-radius: 999px;
+    }
+
+    .wire-badge--default {
+      background: var(--wire-color-surface-2);
+      color: var(--wire-color-text);
+    }
+
+    /* Structured responsive footer */
+    .wire-footer {
+      width: 100%;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+      border-top: 1px solid var(--wire-color-border);
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+
+    .wire-footer__grid {
+      display: grid;
+      grid-template-columns: minmax(13rem, 1.2fr) minmax(0, 3fr) minmax(13rem, 1fr);
+      width: min(100%, 90rem);
+      margin-inline: auto;
+      padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
+      gap: clamp(1.5rem, 4vw, 3.5rem);
+    }
+
+    .wire-footer--width-full .wire-footer__grid {
+      width: 100%;
+      max-width: none;
+    }
+
+    .wire-footer__pre:empty,
+    .wire-footer__post:empty,
+    .wire-footer__pre:not(:has(*)),
+    .wire-footer__post:not(:has(*)) {
+      display: none;
+    }
+
+    .wire-footer__pre,
+    .wire-footer__post {
+      min-width: 0;
+    }
+
+    .wire-footer__pre strong,
+    .wire-footer__post strong {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    .wire-footer__pre p,
+    .wire-footer__post p {
+      font-size: 0.8125rem;
+      font-weight: 400;
+      line-height: 1.6;
+    }
+
+    .wire-footer__links {
+      display: grid;
+      grid-template-columns: repeat(var(--wire-footer-columns, 3), minmax(0, 1fr));
+      align-content: start;
+      gap: 1.5rem;
+    }
+
+    .wire-footer__column {
+      display: grid;
+      min-width: 0;
+      align-content: start;
+      gap: 0.8rem;
+    }
+
+    .wire-footer__column-links {
+      display: grid;
+      align-content: start;
+      gap: 0.55rem;
+    }
+
+    .wire-footer__heading {
+      display: block;
+      color: var(--wire-color-text);
+      font-size: 0.8125rem;
+      font-weight: 600;
+    }
+
+    .wire-footer__link {
+      display: flex;
+      width: fit-content;
+      min-height: 2rem;
+      align-items: center;
+      gap: 0.4rem;
+      color: var(--wire-color-muted);
+      font-size: 0.8125rem;
+      font-weight: 400;
+      text-decoration: none;
+    }
+
+    .wire-footer__link:hover {
+      color: var(--wire-component-color, var(--wire-color-primary));
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+
+    .wire-footer__bottom {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      align-items: center;
+      gap: 1rem;
+      padding: 1rem clamp(1rem, 4vw, 3rem);
+      color: var(--wire-color-muted);
+      border-top: 1px solid var(--wire-color-border);
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+
+    .wire-footer__bottom--slots {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .wire-footer__bottom--slots:not(
+      :has(.wire-footer__copyright-left > *, .wire-footer__copyright-right > *)
+    ) {
+      display: none;
+    }
+
+    .wire-footer__copyright {
+      text-align: center;
+    }
+
+    .wire-footer__copyright-left,
+    .wire-footer__copyright-right {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .wire-footer__copyright-right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+
+    .wire-footer__copyright-left:empty,
+    .wire-footer__copyright-right:empty,
+    .wire-footer__copyright-left:not(:has(*)),
+    .wire-footer__copyright-right:not(:has(*)) {
+      min-height: 0;
+    }
+
+    @media (max-width: 900px) {
+    .wire-footer__grid {
+        grid-template-columns: 1fr;
+      }
+    .wire-footer__links {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 600px) {
+    .wire-footer__links {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    .wire-footer__bottom,
+      .wire-footer__bottom--slots {
+        grid-template-columns: 1fr;
+        justify-items: center;
+        text-align: center;
+      }
+    .wire-footer__copyright-left,
+      .wire-footer__copyright-right {
+        justify-content: center;
+        text-align: center;
+      }
+    }
+
+    @media (max-width: 420px) {
+    .wire-footer__links {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
 }