Tokens

Todos los valores de la interfaz salen de un archivo, tokens.json, en formato W3C. De ahí se generan el CSS para Cloudflare y el SCSS para el motor.

Cómo se usa

Carga tokens.css antes que todo y usa sólo var(--nu-…). Para el motor, _tokens.scss y _tokens.dark.scss.

HTML

<link rel="stylesheet" href="https://ui.nuevauno.com/v/1.0.1/tokens/tokens.css" integrity="sha384-2bQcJSsHawHzCx4Z/2g8/zZfxhtm2+2i/HeoMaOJHBCAw1m6UV/b4/PLV/4u01ge" crossorigin="anonymous">

Fuente

Variable CSS	Valor	En oscuro
`--nu-font-family-sans`	`["Urbanist","system-ui","-apple-system","sans-serif"]`
`--nu-font-family-mono`	`["Ubuntu Mono","ui-monospace","SFMono-Regular","Menlo","Consolas","Liberation Mono","monospace"]`
`--nu-font-weight-regular`	`400`
`--nu-font-letter-spacing-label`	`0.12em`
`--nu-font-line-height-tight`	`1.15`
`--nu-font-line-height-normal`	`1.45`

Tamaños de texto

Variable CSS	Valor	En oscuro
`--nu-size-caption`	`13px`
`--nu-size-label`	`11px`
`--nu-size-label-block`	`12px`
`--nu-size-small`	`14px`
`--nu-size-body`	`15px`
`--nu-size-input`	`16px`
`--nu-size-subtitle`	`18px`
`--nu-size-lead`	`20px`
`--nu-size-heading`	`24px`
`--nu-size-page-title`	`28px`
`--nu-size-number`	`30px`
`--nu-size-title`	`40px`
`--nu-size-hero`	`72px`

Radio

Variable CSS	Valor	En oscuro
`--nu-radius-default`	`0px`

Bordes

Variable CSS	Valor	En oscuro
`--nu-border-width`	`1px`
`--nu-border-focus`	`2px`

Espacios

Variable CSS	Valor	En oscuro
`--nu-space-4`	`4px`
`--nu-space-6`	`6px`
`--nu-space-8`	`8px`
`--nu-space-10`	`10px`
`--nu-space-12`	`12px`
`--nu-space-14`	`14px`
`--nu-space-16`	`16px`
`--nu-space-18`	`18px`
`--nu-space-20`	`20px`
`--nu-space-24`	`24px`
`--nu-space-28`	`28px`
`--nu-space-32`	`32px`
`--nu-space-gutter-mobile`	`16px`
`--nu-space-cell-x`	`12px`
`--nu-space-cell-y`	`9px`
`--nu-space-dot-grid`	`18px`

Controles

Variable CSS	Valor	En oscuro
`--nu-control-pointer`	`32px`
`--nu-control-pointer-small`	`28px`
`--nu-control-touch`	`44px`
`--nu-control-touch-small`	`36px`
`--nu-control-chip`	`26px`
`--nu-control-chip-small`	`24px`
`--nu-control-row`	`48px`
`--nu-control-large`	`56px`
`--nu-control-textarea`	`96px`
`--nu-control-mark`	`8px`
`--nu-control-icon`	`18px`

Medidas de pantalla

Variable CSS	Valor	En oscuro
`--nu-layout-content-width`	`1120px`
`--nu-layout-sidebar-open`	`232px`
`--nu-layout-sidebar-collapsed`	`64px`
`--nu-layout-sidebar-touch`	`272px`
`--nu-layout-page-narrow`	`400px`
`--nu-layout-text-min`	`260px`
`--nu-layout-card-min`	`200px`

Sombras

Variable CSS	Valor	En oscuro
`--nu-shadow-floating`	`0 12px 32px rgba(17, 24, 58, 0.08)`	`0 12px 32px rgba(0, 0, 0, 0.4)`
`--nu-shadow-none`	`none`

Movimiento

Variable CSS	Valor	En oscuro
`--nu-motion-cursor-blink`	`1.05s steps(1, end)`

Cortes de pantalla

Variable CSS	Valor	En oscuro
`--nu-breakpoint-phone-max`	`767px`
`--nu-breakpoint-tablet-max`	`1199px`

Opacidad

Variable CSS	Valor	En oscuro
`--nu-opacity-disabled`	`0.5`