Logo

Anatomía CSS

<div class="logo">
  <span class="logo__dark"></span>
  <span class="logo__light"></span>
</div>

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Logo

   Marca oficial de Atom, theme-aware: el consumidor pone las DOS versiones y
   el sistema muestra la correcta segun data-theme — el mismo mecanismo que
   voltea el resto de los semantics. Nada de recolorear SVGs: son los archivos
   oficiales tal cual.

   Assets oficiales (R2, no re-hostear ni modificar):
     light (logo oscuro, para fondos claros):
       https://pub-c8d801a0ff204d758910633021fa302b.r2.dev/ATOM-horizontal-light.svg
     dark (logo blanco, para fondos oscuros):
       https://pub-c8d801a0ff204d758910633021fa302b.r2.dev/ATOM-horizontal-dark.svg

   Uso:
     <a class="logo logo--m" href="/" aria-label="Atom">
       <img class="logo__light" src=".../ATOM-horizontal-light.svg" alt="Atom" />
       <img class="logo__dark"  src=".../ATOM-horizontal-dark.svg"  alt="Atom" />
     </a>

   Sizes: s, m (default), l — el logo se dimensiona por ALTURA; el ancho lo da
   la proporcion del SVG.
   ------------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  flex-shrink: 0;
}

.logo img,
.logo svg {
  display: block;
  height: 100%;
  width: auto;
}

/* ---- Sizes ---- */

.logo--s { --logo-height: 1.25rem; }
.logo--m { --logo-height: 1.5rem; }
.logo--l { --logo-height: 2rem; }

/* ---- Theming: una version visible a la vez ----
   Ancladas a .logo (0,2,0+): la regla generica `.logo img` (0,1,1) las
   ganaria a un selector de una sola clase. */

.logo .logo__dark {
  display: none;
}

[data-theme='dark'] .logo .logo__light {
  display: none;
}

[data-theme='dark'] .logo .logo__dark {
  display: block;
}