Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Fundamentos

    Constructor de temas (theme builder)

    Cada color, radio y fuente de iVOLT es un token, y cada token es una propiedad personalizada que puedes sobrescribir. Cambia los controles de abajo: la previsualización se actualiza en vivo y el CSS para copiar aparece debajo. Nada se guarda ni se envía a ningún sitio; los valores solo viven en esta página hasta que los copias.

    Fuente: tokens/tokens.json. Salida: propiedades personalizadas. Guardado: nada.

    Tema de la previsualización
    Colores

    Los radios pequeño y grande siguen en proporción.

    Previsualización: tarjetafixtures/card/basic.html

    Editorial catalogue

    Cards, filters and a detail page built from the same primitives.

    Preview Open recipe 
    <article class="iv-card" style="max-width: 24rem">
  <div class="iv-card__body">
    <h3 class="iv-card__title">Editorial catalogue</h3>
    <p class="iv-u-text-muted iv-u-m-0">Cards, filters and a detail page built from the same primitives.</p>
  </div>
  <div class="iv-card__footer">
    <a class="iv-button iv-button--ghost iv-button--sm" href="#recipes">Preview</a>
    <a class="iv-button iv-button--primary iv-button--sm" href="#recipes">Open recipe</a>
  </div>
</article>
    Previsualización: formulariofixtures/form/basic.html

    Demo form: nothing is submitted.

    As it should appear on the invoice.

    Notifications
    Billing 
    <form class="iv-stack" style="max-width: 28rem" action="#" method="get" onsubmit="return false" aria-describedby="demo-form-note">
  <p class="iv-u-text-sm iv-u-text-muted iv-u-m-0" id="demo-form-note">Demo form: nothing is submitted.</p>
  <div class="iv-field">
    <label class="iv-label" for="f-name">Full name <span class="iv-label__required" aria-hidden="true">*</span></label>
    <input class="iv-input" id="f-name" name="name" type="text" required autocomplete="name" aria-describedby="f-name-help">
    <p class="iv-field__help iv-u-m-0" id="f-name-help">As it should appear on the invoice.</p>
  </div>
  <div class="iv-field">
    <label class="iv-label" for="f-plan">Plan</label>
    <select class="iv-select" id="f-plan" name="plan">
      <option>Starter</option><option>Team</option><option>Enterprise</option>
    </select>
  </div>
  <div class="iv-field">
    <label class="iv-label" for="f-notes">Notes</label>
    <textarea class="iv-input" id="f-notes" name="notes" rows="3"></textarea>
  </div>
  <fieldset class="iv-fieldset">
    <legend class="iv-fieldset__legend">Notifications</legend>
    <div class="iv-checks">
      <label class="iv-check"><input type="checkbox" name="n" value="product" checked> Product updates</label>
      <label class="iv-check"><input type="checkbox" name="n" value="security"> Security alerts</label>
    </div>
  </fieldset>
  <fieldset class="iv-fieldset">
    <legend class="iv-fieldset__legend">Billing</legend>
    <div class="iv-checks iv-checks--inline">
      <label class="iv-check"><input type="radio" name="billing" value="monthly" checked> Monthly</label>
      <label class="iv-check"><input type="radio" name="billing" value="yearly"> Yearly</label>
    </div>
  </fieldset>
  <div class="iv-cluster">
    <button class="iv-button iv-button--primary" type="submit">Save (demo)</button>
    <button class="iv-button iv-button--ghost" type="reset">Reset</button>
  </div>
</form>
    Previsualización: botonesfixtures/button/variants.html
    Link as button 
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button">Primary</button>
  <button class="iv-button iv-button--secondary" type="button">Secondary</button>
  <button class="iv-button iv-button--ghost" type="button">Ghost</button>
  <button class="iv-button iv-button--danger" type="button">Danger</button>
  <button class="iv-button" type="button">Neutral</button>
  <a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div>

    Tus personalizaciones

    Pega esto después de ivolt.css, o dentro de @layer iv.overrides cuando uses la hoja en capas. Los ámbitos anidados siguen funcionando: pon el bloque en cualquier elemento en vez de en :root para tematizar solo esa parte de la página.

    /* tokens.overrides.css — cambia un control para ver aquí tus personalizaciones. */

    Lo que no hace

    • Edita un puñado de tokens. El conjunto completo vive en tokens.json y tokens.css; cualquiera se sobrescribe igual.
    • No comprueba el contraste por ti. Prueba el resultado con la herramienta de accesibilidad que prefieras; los temas incluidos se prueban con axe.
    • No reconstruye el paquete. Las personalizaciones bastan para la mayoría de marcas; un fork de tokens.json es el camino para una paleta completa.