@salifbiaye/create-boutique 0.1.5 → 0.2.0

package/templates/storefront/src/modules/ub/showcase.tsx

@@ -0,0 +1,137 @@
+import Link from "next/link"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { Icon } from "./icons"
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const priceOf = (p: P) => {
+  const { cheapestPrice: price } = getProductPrice({ product: p })
+  return { price, onSale: price?.price_type === "sale" }
+}
+
+/**
+ * « Offres phares » en accordéon : les cartes repliées montrent le nom à la verticale ; au survol ou au focus
+ * (clavier, toucher) une carte s'ouvre en grand avec photo, prix et remise. CSS seul, aucun JavaScript.
+ */
+export function DealsFold({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 5)
+  if (items.length < 3) return null
+
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap">
+        <h2 className="ub-head ub-fold__title">{title}</h2>
+        <ul className="ub-fold">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            const image = imageOf(p)
+            return (
+              <li key={p.id} className="ub-fold__item">
+                <Link href={`/products/${p.handle}`} className="ub-fold__link" aria-label={t("card.view", { name: p.title ?? "" })}>
+                  {image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img className="ub-fold__img" src={image} alt="" loading="lazy" />
+                  ) : (
+                    <span className="ub-fold__img ub-ph" />
+                  )}
+                  <span className="ub-fold__label">
+                    <span className="ub-fold__num">{String(i + 1).padStart(2, "0")}</span>
+                    {p.title}
+                  </span>
+                  <span className="ub-fold__body">
+                    {onSale && price?.percentage_diff && <b className="ub-fold__off">-{price.percentage_diff}%</b>}
+                    <span className="ub-fold__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-fold__price">
+                        {price.calculated_price}
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                    <span className="ub-fold__go" aria-hidden>
+                      <Icon name="arrowUpRight" />
+                    </span>
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Grande carte sombre : visuel du produit choisi à gauche, liste d'offres à droite (onglets radio + :has(),
+ * sans JavaScript). La première offre est sélectionnée par défaut.
+ */
+export function DealsSpotlight({ products, eyebrow, title }: { products: P[]; eyebrow?: string; title: string }) {
+  const items = products.slice(0, 4)
+  if (items.length < 2) return null
+
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap">
+        <div className="ub-spot">
+          <div className="ub-spot__head">
+            {eyebrow && (
+              <span className="ub-eyebrow">
+                <span className="ub-eyebrow__dot" />
+                {eyebrow}
+              </span>
+            )}
+            <h2 className="ub-head ub-spot__title">{title}</h2>
+          </div>
+          <div className="ub-spot__grid">
+            <div className="ub-spot__stage">
+              {items.map((p, i) => {
+                const image = imageOf(p)
+                return (
+                  <div key={p.id} className="ub-spot__media" data-i={i}>
+                    {image ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={image} alt={p.title ?? ""} loading="lazy" />
+                    ) : (
+                      <span className="ub-ph" />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+            <div className="ub-spot__list" role="radiogroup" aria-label={title}>
+              {items.map((p, i) => {
+                const { price, onSale } = priceOf(p)
+                return (
+                  <div key={p.id} className="ub-spot__item" data-i={i}>
+                    <input type="radio" name="ub-spot" id={`ub-spot-${i}`} defaultChecked={i === 0} className="ub-spot__radio" />
+                    <label htmlFor={`ub-spot-${i}`} className="ub-spot__label">
+                      <span className="ub-spot__num">{String(i + 1).padStart(2, "0")}</span>
+                      <span className="ub-spot__name">{p.title}</span>
+                      {onSale && price?.percentage_diff && <b className="ub-spot__off">-{price.percentage_diff}%</b>}
+                    </label>
+                    <div className="ub-spot__more">
+                      {p.description && <p>{p.description}</p>}
+                      <div className="ub-spot__buy">
+                        {price && (
+                          <span className="ub-spot__price">
+                            {price.calculated_price}
+                            {onSale && <s>{price.original_price}</s>}
+                          </span>
+                        )}
+                        <Link href={`/products/${p.handle}`} className="ub-spot__cta">
+                          {t("card.viewShort")} <Icon name="arrowRight" />
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/styles/ub/account.css

@@ -0,0 +1,199 @@
+/* Espace client : menu latéral, tableau de bord, formulaires de connexion. Tokens du thème uniquement. */
+.ub-account { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.ub-account__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
+.ub-account__solo { display: grid; justify-items: center; }
+.ub-account__solo .ub-account__main {
+  width: 100%;
+  max-width: 480px;
+  padding: clamp(24px, 4vw, 40px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+}
+.ub-account__main { min-width: 0; }
+
+/* ---------- Menu latéral ---------- */
+.ub-accnav { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
+.ub-accnav__me {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+}
+.ub-accnav__avatar {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: var(--on-primary);
+  font-family: var(--ub-font-head);
+  font-weight: 700;
+  font-size: 17px;
+  letter-spacing: 0.02em;
+}
+.ub-accnav__who { display: grid; min-width: 0; }
+.ub-accnav__who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ub-accnav__who small { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ub-accnav__list {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: var(--space-2);
+  list-style: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+}
+.ub-accnav__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: 11px 12px;
+  border-radius: calc(var(--ub-r-card) * 0.6);
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--ink-muted);
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+}
+.ub-accnav__link:hover { background: var(--tint-1); color: var(--ink); }
+.ub-accnav__link[aria-current="page"] { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--ink); font-weight: 700; }
+.ub-accnav__link[aria-current="page"] .ub-accnav__ic { color: var(--primary); }
+.ub-accnav__ic { display: inline-grid; place-items: center; width: 20px; height: 20px; }
+.ub-accnav__ic svg { width: 20px; height: 20px; }
+.ub-accnav__logout { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 calc(var(--ub-r-card) * 0.6) calc(var(--ub-r-card) * 0.6); }
+.ub-accnav__logout:hover { color: var(--sale); }
+
+/* ---------- Tableau de bord ---------- */
+.ub-acc { display: grid; gap: var(--space-6); }
+.ub-acc__hello {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  padding: clamp(24px, 4vw, 40px);
+  background: var(--hero-bg);
+  color: var(--hero-ink);
+  border-radius: var(--ub-r-card);
+}
+.ub-acc__hello::before {
+  content: "";
+  position: absolute;
+  right: -80px;
+  top: -120px;
+  width: 320px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent), transparent 65%);
+  pointer-events: none;
+}
+.ub-acc__hello h1 { position: relative; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; }
+.ub-acc__hello p { position: relative; margin-top: 8px !important; font-size: 14px; color: var(--hero-muted); }
+.ub-acc__hello p b { color: var(--hero-ink); }
+.ub-acc__shop {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  border-radius: var(--ub-r-btn);
+  background: var(--primary);
+  color: var(--on-primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+.ub-acc__shop svg, .ub-acc__more svg, .ub-acc__order > svg { width: 16px; height: 16px; }
+.ub-acc__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
+.ub-acc__stat {
+  display: grid;
+  gap: 4px;
+  padding: var(--space-6);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+  transition: transform 0.2s, border-color 0.2s;
+}
+.ub-acc__stat:hover { transform: translateY(-2px); border-color: var(--primary); }
+.ub-acc__stat b { margin-top: var(--space-3); font-family: var(--ub-font-head); font-size: 36px; line-height: 1; }
+.ub-acc__stat small { font-size: 13px; color: var(--ink-muted); }
+.ub-acc__ic {
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--primary) 16%, transparent);
+  color: var(--primary);
+}
+.ub-acc__ic svg { width: 20px; height: 20px; }
+.ub-acc__progress { display: grid; gap: 8px; font-size: 13px; color: var(--ink-muted); }
+.ub-acc__progress i { display: block; height: 6px; border-radius: 99px; background: var(--tint-1); overflow: hidden; }
+.ub-acc__progress i::before { content: ""; display: block; width: var(--p); height: 100%; background: var(--primary); border-radius: inherit; }
+.ub-acc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
+.ub-acc__head h2 { font-size: 22px; }
+.ub-acc__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary); }
+.ub-acc__orders { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.ub-acc__order {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+  transition: border-color 0.15s;
+}
+.ub-acc__order:hover { border-color: var(--primary); }
+.ub-acc__order span:nth-child(2) { display: grid; }
+.ub-acc__order small { font-size: 13px; color: var(--ink-muted); }
+.ub-acc__amount { font-weight: 700; }
+.ub-acc__empty {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-3);
+  padding: var(--space-12) var(--space-6);
+  text-align: center;
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  border-radius: var(--ub-r-card);
+}
+
+/* ---------- Aide ---------- */
+.ub-account__help {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  flex-wrap: wrap;
+  margin-top: var(--space-12);
+  padding: var(--space-6) var(--space-8);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+}
+.ub-account__help h3 { font-size: 22px; }
+.ub-account__help p { margin-top: 4px !important; color: var(--ink-muted); font-size: 14px; }
+
+@media (max-width: 900px) {
+  .ub-account__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
+  .ub-accnav { position: static; }
+  .ub-accnav__list { display: flex; overflow-x: auto; scrollbar-width: none; }
+  .ub-accnav__list li { flex: none; }
+  .ub-accnav__link { white-space: nowrap; }
+  .ub-accnav__logout { margin-top: 0; border-top: 0; }
+  .ub-acc__stats { grid-template-columns: minmax(0, 1fr); }
+  .ub-acc__order { grid-template-columns: auto 1fr auto; }
+  .ub-acc__order > svg { display: none; }
+}

package/templates/storefront/src/styles/ub/black-friday.css

@@ -0,0 +1,96 @@
+/* Black Friday (thème de base, clair) : jaune / noir / blanc. Sections volontairement différentes de la variante
+   « Blackout » (black-friday-2, sombre) : grille bento au lieu de l'accordéon, carte jaune, bandeau « ruban de chantier ».
+   :not([data-variant]) : la variante halloween-2 emprunte la mise en page black-friday et ne doit pas hériter de ceci. */
+[data-theme="black-friday"]:not([data-variant]) {
+  --bg: #ffffff; --surface: #f6f6f3; --tint-1: #fff6c2; --tint-2: #f4f4f2; --tint-3: #fde8e8; --tint-4: #f1f1ee;
+  --ink: #0a0a0a; --ink-muted: #525252; --border: #e6e6e1;
+  --primary: #ffd400; --on-primary: #0a0a0a; --accent: #0a0a0a; --on-accent: #ffd400;
+  --sale: #e11d48; --star: #f59e0b; --success: #15803d;
+  --hero-bg: #0a0a0a; --hero-ink: #ffffff; --hero-muted: #a3a3a3;
+  --band-bg: #ffd400; --band-ink: #0a0a0a; --bubble-bg: #ffd400; --bubble-ink: #0a0a0a;
+  --topbar-bg: #0a0a0a; --topbar-ink: #ffd400; --focus: #2563eb;
+}
+:root:not([data-variant])[data-theme="black-friday"] .ub-hero__title em { color: var(--primary); font-style: normal; }
+
+/* ---------- Cartes produit : blanches, fine bordure, contour noir au survol ---------- */
+[data-theme="black-friday"]:not([data-variant]) .ub-card { border: 1px solid var(--border); box-shadow: none; transition: transform 0.2s, border-color 0.2s; }
+[data-theme="black-friday"]:not([data-variant]) .ub-card:hover { transform: translateY(-3px); border-color: var(--ink); }
+[data-theme="black-friday"]:not([data-variant]) .ub-badge--sale { background: var(--primary); color: #0a0a0a; }
+
+/* ---------- Offres phares : grille bento (toutes les cartes ouvertes) ---------- */
+[data-theme="black-friday"]:not([data-variant]) .ub-fold {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  height: clamp(460px, 48vw, 640px);
+}
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__item { flex: none !important; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__item:first-child { grid-row: span 2; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__link { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__link::after { display: none; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__img { opacity: 1 !important; transform: none !important; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__item:hover .ub-fold__img { transform: scale(1.04) !important; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__label { display: none; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__body {
+  opacity: 1 !important;
+  transform: none !important;
+  left: 12px;
+  right: 12px;
+  bottom: 12px;
+  padding: 12px 64px 12px 14px;
+  background: var(--bg);
+  color: var(--ink);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+}
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__name { font-size: clamp(16px, 1.6vw, 22px); }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__item:first-child .ub-fold__name { font-size: clamp(22px, 2.6vw, 34px); }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__price { font-size: 17px; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__price s { opacity: 0.5; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__off { position: absolute; top: -14px; left: 14px; background: var(--sale); color: #fff; }
+[data-theme="black-friday"]:not([data-variant]) .ub-fold__go { right: 12px; bottom: 50%; transform: translateY(50%); width: 40px; height: 40px; background: var(--primary); color: #0a0a0a; backdrop-filter: none; }
+
+/* ---------- Carte d'offres : jaune, zone visuelle noire ---------- */
+[data-theme="black-friday"]:not([data-variant]) .ub-spot { background: var(--primary); color: #0a0a0a; }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot::before { background: radial-gradient(circle, rgb(255 255 255 / 0.45), transparent 65%); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot .ub-eyebrow { color: #0a0a0a; }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__stage { background: #0a0a0a; box-shadow: 18px 18px 0 rgb(0 0 0 / 0.9); border-radius: var(--radius-md); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__item { border-bottom-color: rgb(0 0 0 / 0.15); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__item::before { background: #0a0a0a; width: 4px; }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__item:has(.ub-spot__radio:checked) { background: rgb(255 255 255 / 0.45); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__num,
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__off { color: #0a0a0a; }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__off { background: rgb(0 0 0 / 0.1); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__more p { color: rgb(10 10 10 / 0.72); }
+[data-theme="black-friday"]:not([data-variant]) .ub-spot__cta { background: #0a0a0a; color: var(--primary); }
+
+/* ---------- Bandeau CTA « ruban de chantier » + pied de page clair ---------- */
+[data-theme="black-friday"]:not([data-variant]) .ub-footwrap { --cta-bg: #0a0a0a; --cta-ink: #ffffff; --foot-bg: var(--surface); --foot-ink: var(--ink); }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta { background: #0a0a0a; border-radius: var(--radius-md); padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta__shape { display: none; }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta::before,
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 16px;
+  background: repeating-linear-gradient(-45deg, var(--primary) 0 18px, #0a0a0a 18px 36px);
+}
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta::before { top: 0; }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta::after { bottom: 0; }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta__title em { color: var(--primary); text-decoration: none; }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta__eyebrow { background: var(--primary); color: #0a0a0a; }
+[data-theme="black-friday"]:not([data-variant]) .ub-footcta .ub-footcta__btn { background: var(--primary); color: #0a0a0a; border-color: var(--primary); }
+[data-theme="black-friday"]:not([data-variant]) .ub-footwrap .ub-footer { border: 1px solid var(--border); border-radius: var(--radius-md); }
+[data-theme="black-friday"]:not([data-variant]) .ub-footwrap .ub-footer .ub-logo__mark { background: var(--primary); }
+[data-theme="black-friday"]:not([data-variant]) .ub-footwrap .ub-pays span { background: var(--bg); }
+
+@media (max-width: 900px) {
+  [data-theme="black-friday"]:not([data-variant]) .ub-fold { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 220px; height: auto; flex-direction: row; }
+  [data-theme="black-friday"]:not([data-variant]) .ub-fold__item { height: auto !important; }
+  [data-theme="black-friday"]:not([data-variant]) .ub-fold__item:first-child { grid-column: span 2; grid-row: span 1; }
+  [data-theme="black-friday"]:not([data-variant]) .ub-fold__body { padding-right: 52px; }
+  [data-theme="black-friday"]:not([data-variant]) .ub-fold__item:not(:first-child) .ub-fold__price s { display: none; }
+  [data-theme="black-friday"]:not([data-variant]) .ub-spot__stage { box-shadow: 10px 10px 0 rgb(0 0 0 / 0.9); }
+}

package/templates/storefront/src/styles/ub/forms.css

@@ -0,0 +1,61 @@
+/* Téléphone avec indicatif pays (modules/common/components/phone-input). Même hauteur et mêmes couleurs
+   que les autres champs (variables Medusa UI rebranchées sur le thème dans medusa-ui.css). */
+.ub-phone { display: flex; gap: 8px; width: 100%; }
+.ub-phone__country {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 32px 0 14px;
+  border: 1px solid var(--border-base);
+  border-radius: 0.375rem;
+  background: var(--bg-field);
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ub-phone__country::after {
+  content: "";
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-70%) rotate(45deg);
+  opacity: 0.6;
+}
+.ub-phone__country:hover { background: var(--bg-field-hover); }
+.ub-phone__country:focus-within { box-shadow: var(--borders-interactive-with-active); }
+.ub-phone__country select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
+.ub-phone__flag { pointer-events: none; }
+.ub-phone__field { position: relative; z-index: 0; flex: 1; min-width: 0; font-size: 14px; }
+.ub-phone__field input {
+  display: block;
+  width: 100%;
+  height: 44px;
+  padding: 16px 16px 4px;
+  border: 1px solid var(--border-base);
+  border-radius: 0.375rem;
+  background: var(--bg-field);
+  color: inherit;
+  outline: none;
+}
+.ub-phone__field input:hover { background: var(--bg-field-hover); }
+.ub-phone__field input:focus { box-shadow: var(--borders-interactive-with-active); }
+.ub-phone__field label {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  z-index: 1;
+  margin: 0 12px;
+  padding: 0 4px;
+  color: var(--fg-subtle);
+  transform-origin: 0 0;
+  transition: transform 0.3s, font-size 0.3s;
+  pointer-events: none;
+}
+.ub-phone[data-invalid] .ub-phone__field input { border-color: var(--sale); }