Tokens primitivos

Los tokens primitivos son los valores base que usa la capa de tokens semánticos. Las aplicaciones host normalmente sobrescriben tokens semánticos y usan nombres de tokens primitivos como valores cuando el resolver lo soporta.

Los primitivos de color pueden usarse como valores en design.color. Esos mismos campos también aceptan strings CSS de color válidos. Las muestras de color se renderizan con HTML inline dentro del Markdown.

Primitivos de color

Colores comunes

Token	Valor
`colors-common-white`	`#FFFFFF`
`colors-common-black`	`#000000`

Colores slate

Token	Valor
`colors-slate-50`	`#F9FAFC`
`colors-slate-100`	`#F1F5F9`
`colors-slate-200`	`#E2E8F0`
`colors-slate-300`	`#CBD5E1`
`colors-slate-400`	`#94A3B8`
`colors-slate-500`	`#64748B`
`colors-slate-600`	`#475569`
`colors-slate-700`	`#334155`
`colors-slate-800`	`#1E293B`
`colors-slate-900`	`#0F172A`
`colors-slate-950`	`#0C0F18`

Colores grey

Token	Valor
`colors-grey-0`	`#FFFFFF`
`colors-grey-50`	`#FAFAFA`
`colors-grey-100`	`#F5F5F5`
`colors-grey-200`	`#EEEEEE`
`colors-grey-300`	`#E0E0E0`
`colors-grey-400`	`#BDBDBD`
`colors-grey-500`	`#9E9E9E`
`colors-grey-600`	`#757575`
`colors-grey-700`	`#616161`
`colors-grey-800`	`#424242`
`colors-grey-900`	`#1F1F1F`
`colors-grey-950`	`#0A0A0A`
`colors-grey-999`	`#000000`

Colores neutral

Token	Valor
`colors-neutral-50`	`#FAFBFB`
`colors-neutral-100`	`#F3F4F6`
`colors-neutral-200`	`#E5E7EB`
`colors-neutral-300`	`#D1D5DB`
`colors-neutral-400`	`#9CA3AF`
`colors-neutral-500`	`#6B7280`
`colors-neutral-600`	`#4B5563`
`colors-neutral-700`	`#374151`
`colors-neutral-800`	`#1F2937`
`colors-neutral-900`	`#1A2330`
`colors-neutral-950`	`#111827`

Colores purple

Token	Valor
`colors-purple-50`	`#FBF2F9`
`colors-purple-100`	`#F2E5EF`
`colors-purple-200`	`#DDBDD7`
`colors-purple-300`	`#C792BE`
`colors-purple-400`	`#B168A7`
`colors-purple-500`	`#A14993`
`colors-purple-600`	`#8E328A`
`colors-purple-700`	`#7F3389`
`colors-purple-800`	`#6C3588`
`colors-purple-900`	`#5A3581`
`colors-purple-950`	`#422B6E`

Colores red

Token	Valor
`colors-red-50`	`#FFF5F4`
`colors-red-100`	`#F6DFDD`
`colors-red-200`	`#F2A69E`
`colors-red-300`	`#ED786A`
`colors-red-400`	`#ED5E4E`
`colors-red-500`	`#EC5561`
`colors-red-600`	`#D53D46`
`colors-red-700`	`#BF2828`
`colors-red-800`	`#B72627`
`colors-red-900`	`#A62319`
`colors-red-950`	`#8A1910`

Colores orange

Token	Valor
`colors-orange-50`	`#FFF7E9`
`colors-orange-100`	`#FCEEE0`
`colors-orange-200`	`#F8D1AD`
`colors-orange-300`	`#ECAE75`
`colors-orange-400`	`#F29C52`
`colors-orange-500`	`#FF7901`
`colors-orange-600`	`#DA6F2B`
`colors-orange-700`	`#D55E35`
`colors-orange-800`	`#C93A23`
`colors-orange-900`	`#B03E1B`
`colors-orange-950`	`#973E20`

Colores blue

Token	Valor
`colors-blue-50`	`#F6FBFF`
`colors-blue-100`	`#EFF8FE`
`colors-blue-200`	`#AEC7EE`
`colors-blue-300`	`#A2C1F8`
`colors-blue-400`	`#82ABF5`
`colors-blue-500`	`#6994FF`
`colors-blue-600`	`#5C91F5`
`colors-blue-700`	`#447FED`
`colors-blue-800`	`#3466F5`
`colors-blue-900`	`#1467EB`
`colors-blue-950`	`#003EB7`

Colores green

Token	Valor
`colors-green-50`	`#F6FDF1`
`colors-green-100`	`#F0FAE8`
`colors-green-200`	`#D9EEC4`
`colors-green-300`	`#C0E19F`
`colors-green-350`	`#A6D579`
`colors-green-400`	`#92CC5C`
`colors-green-500`	`#7FC341`
`colors-green-600`	`#5B9F2E`
`colors-green-700`	`#4A9537`
`colors-green-800`	`#3E8B4E`
`colors-green-900`	`#296133`
`colors-green-950`	`#1C3826`

Colores emerald

Token	Valor
`colors-emerald-50`	`#ECFDF5`
`colors-emerald-100`	`#D1FAE5`
`colors-emerald-200`	`#A7F3D0`
`colors-emerald-300`	`#6EE7B7`
`colors-emerald-400`	`#34D399`
`colors-emerald-500`	`#10B981`
`colors-emerald-600`	`#059669`
`colors-emerald-700`	`#047857`
`colors-emerald-800`	`#065F46`
`colors-emerald-900`	`#064E3B`
`colors-emerald-950`	`#002C22`

Colores yellow

Token	Valor
`colors-yellow-50`	`#FEFCE8`
`colors-yellow-100`	`#FEF9C2`
`colors-yellow-200`	`#FEF08A`
`colors-yellow-300`	`#FFE86F`
`colors-yellow-400`	`#FDE047`
`colors-yellow-500`	`#FFE200`
`colors-yellow-600`	`#EAB308`
`colors-yellow-700`	`#CA8A04`
`colors-yellow-800`	`#A16207`
`colors-yellow-900`	`#854D0E`
`colors-yellow-950`	`#713F12`

Colores action grey

Token	Valor
`colors-actions-grey-text`	`#EEEEEE`
`colors-actions-grey-active`	`#6B7280`
`colors-actions-grey-focus`	`#D0D1D3`
`colors-actions-grey-hover`	`#DEDFDF`
`colors-actions-grey-selected`	`#D7D8D9`
`colors-actions-grey-disabled`	`#6B7280`
`colors-actions-grey-disabledbg`	`#6B7280`

Primitivos de spacing

Los primitivos de spacing pueden usarse como valores en design.spacing. Los valores numéricos están en píxeles.

Token	Valor
`spacing-0`	0px
`spacing-25`	1px
`spacing-50`	2px
`spacing-100`	4px
`spacing-150`	6px
`spacing-200`	8px
`spacing-300`	12px
`spacing-400`	16px
`spacing-500`	20px
`spacing-600`	24px
`spacing-800`	32px
`spacing-1000`	40px
`spacing-1200`	48px
`spacing-1400`	56px
`spacing-1600`	64px
`spacing-2000`	80px
`spacing-2400`	96px
`spacing-2800`	112px
`spacing-3200`	128px
`spacing-3600`	144px
`spacing-4000`	160px
`spacing-5000`	200px

Primitivos de radius

Los primitivos de radius pueden usarse como valores en design.radius. El runtime también acepta valores numéricos directos en píxeles.

Token	Valor
`radius-xxs`	2px
`radius-xs`	4px
`radius-sm`	6px
`radius-md`	8px
`radius-lg`	12px
`radius-xl`	16px
`radius-2xl`	20px
`radius-3xl`	24px
`radius-4xl`	32px
`radius-5xl`	40px
`radius-6xl`	56px
`radius-full`	999px

Primitivos de tipografía

Los primitivos de tipografía pueden usarse como valores en design.typography. El resolver espera nombres de tokens primitivos, no snippets CSS directos.

Familias tipográficas

Token	Valor
`font-family-inter`	Inter
`font-family-menlo`	Menlo

Tamaños de fuente

Token	Valor
`font-size-10`	10px
`font-size-12`	12px
`font-size-14`	14px
`font-size-16`	16px
`font-size-18`	18px
`font-size-20`	20px
`font-size-24`	24px
`font-size-32`	32px
`font-size-40`	40px
`font-size-42`	42px
`font-size-48`	48px
`font-size-56`	56px

Pesos tipográficos

Token	Valor
`font-weight-light`	300
`font-weight-regular`	400
`font-weight-medium`	500
`font-weight-semibold`	600
`font-weight-bold`	700
`font-weight-extrabold`	800
`font-weight-black`	900
`font-weight-italic`	400

Interlineados

Token	Valor
`line-height-4xl`	78px
`line-height-3xl`	64px
`line-height-2xl`	42px
`line-height-xl`	32px
`line-height-md`	28px
`line-height-sm`	24px
`line-height-xs`	22px
`line-height-2xs`	18px
`line-height-3xs`	16px
`line-height-4xs`	12px

Espaciado de letras

Token	Valor
`letter-spacing-0`	0px
`letter-spacing-1`	-0.672px
`letter-spacing-2`	-0.36px
`letter-spacing-3`	-0.19px
`letter-spacing-4`	-0.12px
`letter-spacing-5`	-0.2px
`letter-spacing-6`	-0.1px
`letter-spacing-7`	0.4px
`letter-spacing-8`	0.15px

Primitivos de sombra

Los primitivos de sombra pueden usarse como valores en design.shadows. El runtime también acepta cadenas CSS de sombra directas.

Sombras light

Token	Valor
`shadow-0`	`none`
`shadow-1`	`0px 0px 2px 0px #64748b1a`
`shadow-2`	`0px 0px 4px 0px #64748b1f`
`shadow-3`	`0px 0px 8px 0px #64748b24`
`shadow-4`	`0px 0px 12px 0px #64748b2e`
`shadow-5`	`0px 0px 20px 0px #64748b38`
`shadow-6`	`0px 0px 30px 0px #64748b42`

Sombras dark

Token	Valor
`shadow-0`	`none`
`shadow-1`	`0px 0px 2px 0px #00000066`
`shadow-2`	`0px 0px 4px 0px #00000080`
`shadow-3`	`0px 0px 8px 0px #00000099`
`shadow-4`	`0px 0px 12px 0px #000000b2`
`shadow-5`	`0px 0px 20px 0px #000000cc`
`shadow-6`	`0px 0px 30px 0px #000000e5`

Primitivos de stroke

Los primitivos de stroke pueden usarse como valores en design.border. El runtime también acepta valores numéricos directos en píxeles.

Token	Valor
`stroke-0`	0px
`stroke-50`	0.5px
`stroke-100`	1px
`stroke-120`	1.2px
`stroke-160`	1.6px
`stroke-200`	2px
`stroke-400`	4px
`stroke-600`	6px
`stroke-800`	8px

Primitivos internos de size y scale

Los primitivos size-* y scale-* se usan internamente para componer tokens de radius y borde. Las aplicaciones host deberían usar los tokens semánticos y los primitivos específicos de cada categoría descritos arriba.

Primitivos de size

Token	Valor
`size-0`	0px
`size-25`	1px
`size-50`	2px
`size-100`	4px
`size-150`	6px
`size-200`	8px
`size-300`	12px
`size-400`	16px
`size-500`	20px
`size-600`	24px
`size-800`	32px
`size-1000`	40px
`size-1400`	56px
`size-full`	999px

Primitivos de scale

Token	Valor
`scale-none`	0px
`scale-1`	1px
`scale-2`	2px
`scale-4`	4px
`scale-6`	6px
`scale-8`	8px
`scale-10`	10px
`scale-12`	12px
`scale-16`	16px
`scale-20`	20px
`scale-24`	24px
`scale-32`	32px
`scale-40`	40px
`scale-full`	999px