IoPlano · Componentes

Tokens

Cada token de `src/styles/theme.css` con su valor en el tema activo.
Muestra	Token	Valor
	--background	#eef0ec#121614
	--foreground	#1d2320#e5e9e4
	--card	#ffffff#1b201d
	--card-foreground	#1d2320#e5e9e4
	--popover	#ffffff#1b201d
	--popover-foreground	#1d2320#e5e9e4
	--primary	#275d8c#7db0e0
	--primary-foreground	#ffffff#0d1a26
	--secondary	#e4e8e2#232a26
	--secondary-foreground	#1d2320#e5e9e4
	--muted	#e4e8e2#232a26
	--muted-foreground	#616a64#98a29a
	--accent	#e4e8e2#232a26
	--accent-foreground	#1d2320#e5e9e4
	--destructive	#b3261e#f08a80
	--destructive-foreground	#ffffff#121614
	--border	#d3d8d2#2f3732
	--input	#d3d8d2#2f3732
	--ring	#275d8c#7db0e0
	--sheet	#fbfbf8#181d1a
	--sheet-foreground	#1d2320#e5e9e4
	--cota	#b03f26#e7836a
	--success	#2f7a4b#6cc08a
	--success-text	#28683f#6cc08a
	--warning	#a86a12#e0a948
	--warning-text	#87540e#e0a948
	--grid	#e4e8e2#232a26
	--radius	3px3px

Contraste calculado (WCAG 2) de cada par texto/superficie; el mínimo es 4,50:1. Ajustes respecto de D: `muted-foreground` claro se oscureció para llegar al mínimo sobre background, muted y sheet, y `warning-text` y `success-text` se agregaron para el texto de estado, porque warning y success de D no lo alcanzan sobre muted.
Texto	Superficie	Muestra	Contraste	Cumple
foreground	background	Aa 3.600	13,94:114,87:1	SíSí
foreground	card	Aa 3.600	15,99:113,46:1	SíSí
foreground	popover	Aa 3.600	15,99:113,46:1	SíSí
foreground	muted	Aa 3.600	12,90:111,96:1	SíSí
foreground	sheet	Aa 3.600	15,42:113,91:1	SíSí
card-foreground	card	Aa 3.600	15,99:113,46:1	SíSí
popover-foreground	popover	Aa 3.600	15,99:113,46:1	SíSí
secondary-foreground	secondary	Aa 3.600	12,90:111,96:1	SíSí
accent-foreground	accent	Aa 3.600	12,90:111,96:1	SíSí
sheet-foreground	sheet	Aa 3.600	15,42:113,91:1	SíSí
primary-foreground	primary	Aa 3.600	6,93:17,68:1	SíSí
destructive-foreground	destructive	Aa 3.600	6,54:17,52:1	SíSí
muted-foreground	background	Aa 3.600	4,88:16,93:1	SíSí
muted-foreground	card	Aa 3.600	5,59:16,27:1	SíSí
muted-foreground	muted	Aa 3.600	4,51:15,57:1	SíSí
muted-foreground	sheet	Aa 3.600	5,40:16,48:1	SíSí
primary	background	Aa 3.600	6,04:17,96:1	SíSí
primary	card	Aa 3.600	6,93:17,21:1	SíSí
primary	muted	Aa 3.600	5,59:16,40:1	SíSí
primary	sheet	Aa 3.600	6,68:17,45:1	SíSí
destructive	background	Aa 3.600	5,70:17,52:1	SíSí
destructive	card	Aa 3.600	6,54:16,81:1	SíSí
destructive	muted	Aa 3.600	5,27:16,05:1	SíSí
destructive	sheet	Aa 3.600	6,30:17,04:1	SíSí
warning-text	background	Aa 3.600	5,54:18,64:1	SíSí
warning-text	card	Aa 3.600	6,35:17,82:1	SíSí
warning-text	muted	Aa 3.600	5,13:16,95:1	SíSí
warning-text	sheet	Aa 3.600	6,13:18,08:1	SíSí
success-text	background	Aa 3.600	5,83:18,30:1	SíSí
success-text	card	Aa 3.600	6,68:17,51:1	SíSí
success-text	muted	Aa 3.600	5,39:16,67:1	SíSí
success-text	sheet	Aa 3.600	6,45:17,76:1	SíSí
cota	sheet	Aa 3.600	5,65:16,39:1	SíSí

Tipografía

TítuloBarlow Condensed 600 · 22 px: Cocina Los Dominicos
EncabezadoBarlow Condensed 600 · 16 px: Muro C · Elevación
TextoArchivo · 13 px: El mueble base queda a 50 mm del radiador; ajusta el ancho o muévelo hacia la ventana.
RótuloBarlow Condensed 500 · 12 px · mayúsculas: Ancho total
NúmeroIBM Plex Mono 400 · cifras tabulares: 3.600 mm · 1,7 m
Número destacadoIBM Plex Mono 500: 2.400 mm

Las cifras tabulares alinean las columnas de medidas.

3.600 mm
450 mm
12.150 mm
1.111 mm
980 mm

Botón

Variantes

Tamaños

Deshabilitado

Control segmentado

Vista activa: Planta

Pestañas

Tipo: Mueble base
Ancho: 600 mm
Alto: 720 mm
Fondo: 560 mm

Campo de milímetros

Escribe 3600 o 3.600; Enter o salir del campo lo acepta y Escape vuelve al valor anterior. Entre 240 y 6.000 mm. Un decimal como 3.6 o 3,6 se rechaza.

Ancho

Último valor aceptado: 2.400 mm · 0 veces

Reposo

Con foco

Haz clic: queda el valor crudo, seleccionado.

Mal formado

Ingresa un número entero de milímetros

Vacío

Ingresa un número entero de milímetros

Bajo el mínimo

Mínimo 240 mm

Sobre el máximo

Máximo 4.000 mm

Negativo

Mínimo 0 mm

Deshabilitado

Select

Tipo de recinto

Terminación

Elige una terminación.

Material de la cubierta

Switch

Mostrar cotas
Ajustar a la grilla
Vista cortada

Checkbox

Incluir zócalo
Medidas verificadas en obra
Acepto el presupuesto
Debes aceptar el presupuesto para continuar.

Badge

ErrorSe sale del muro: 3.650 + 900 > 4.100 mm.ITEM_OUT_OF_WALL
AvisoQueda a 30 mm del radiador; se piden 50.FIXTURE_CLEARANCE
InfoEl muro C se midió en obra.SURVEY_NOTE
ListoEl diseño no tiene problemas.OK

Tabla

Despiece del mueble base 900, en milímetros.
Pieza	Ancho	Alto	Cant.
Costado	560	720	2
Base	864	560	1
Repisa	862	540	1
Puerta	447	716	2
Zócalo	2.400	100	1

Aparece al pasar el mouse o al enfocar con el teclado.

Dialog

Toast

Paneles redimensionables

Arrastra un borde o enfócalo con Tab y usa las flechas; Enter en el borde del asistente lo colapsa. El doble clic vuelve al ancho por defecto y el navegador recuerda los anchos. Bajo 984 px la demo se desplaza en horizontal.

Asistente

300 px · mín. 240 · máx. 480 · colapsable

Lienzo

mín. 480 px · absorbe el resto

Inspector

320 px · mín. 260 · máx. 480