Colors

Todos los colores de Orbit salen de un único JSON en design-tokens — nunca se hardcodean hex sueltos en un componente. Desde ahí se generan automáticamente las CSS custom properties (web) y las constantes de DesignTokens (Kotlin). OrbitColor es la capa semántica sobre esas constantes de Kotlin — mismo espíritu que OrbitIcon para íconos: nombres con significado en vez de valores crudos.

Button Primary

background#E8FF00

background-hover#121622

background-disabled#F3FF6B

text#171717

text-hover#E8FF00

Button Secondary

background#1B2132

background-hover#121622

background-disabled#55658C

text#FFFFFF

text-hover#E8FF00

Button Light

background#FFFFFF

background-hover#121622

background-disabled#E5E7EB

text#121622

text-hover#FFFFFF

Button Ghost

backgroundtransparent

background-hover#2B3550

text#FFFFFF

text-hover#E8FF00

text-disabled#6B7280

Button Destructive

background#DC2626

background-hover#B91C1C

background-disabled#FCA5A5

text#FFFFFF

Surface

Fondos para superficies (page background, cards, paneles) fuera de los botones — lo aplican las plataformas consumidoras (landing, docs, db-builder), no es algo que un componente de Orbit pinte por sí solo. Dark-mode-only por ahora, no hay equivalente para light theme todavía.

background es el fondo principal de contenido; background-secondary es para nav, sidebar y paneles laterales — un tono distinto para separarlos visualmente del contenido.

background#101928

background-secondary#2B3550

.card {
  background: var(--color-surface-background);
}

import io.dragbuilder.ui.OrbitColor

Box(modifier = Modifier.background(OrbitColor.SurfaceBackground)) { /* ... */ }

Referencia

Token (JSON)	CSS var	Kotlin (`OrbitColor`)	Hex
`color.button-primary.background`	`--color-button-primary-background`	`ButtonPrimaryBackground`	`#E8FF00`
`color.button-primary.background-hover`	`--color-button-primary-background-hover`	`ButtonPrimaryBackgroundHover`	`#121622`
`color.button-primary.background-disabled`	`--color-button-primary-background-disabled`	`ButtonPrimaryBackgroundDisabled`	`#F3FF6B`
`color.button-primary.text`	`--color-button-primary-text`	`ButtonPrimaryText`	`#171717`
`color.button-primary.text-hover`	`--color-button-primary-text-hover`	`ButtonPrimaryTextHover`	`#E8FF00`
`color.button-primary.text-disabled`	`--color-button-primary-text-disabled`	`ButtonPrimaryTextDisabled`	`#171717`
`color.button-secondary.background`	`--color-button-secondary-background`	`ButtonSecondaryBackground`	`#1B2132`
`color.button-secondary.background-hover`	`--color-button-secondary-background-hover`	`ButtonSecondaryBackgroundHover`	`#121622`
`color.button-secondary.background-disabled`	`--color-button-secondary-background-disabled`	`ButtonSecondaryBackgroundDisabled`	`#55658C`
`color.button-secondary.text`	`--color-button-secondary-text`	`ButtonSecondaryText`	`#FFFFFF`
`color.button-secondary.text-hover`	`--color-button-secondary-text-hover`	`ButtonSecondaryTextHover`	`#E8FF00`
`color.button-secondary.text-disabled`	`--color-button-secondary-text-disabled`	`ButtonSecondaryTextDisabled`	`#FFFFFF`
`color.button-light.background`	`--color-button-light-background`	`ButtonLightBackground`	`#FFFFFF`
`color.button-light.background-hover`	`--color-button-light-background-hover`	`ButtonLightBackgroundHover`	`#121622`
`color.button-light.background-disabled`	`--color-button-light-background-disabled`	`ButtonLightBackgroundDisabled`	`#E5E7EB`
`color.button-light.text`	`--color-button-light-text`	`ButtonLightText`	`#121622`
`color.button-light.text-hover`	`--color-button-light-text-hover`	`ButtonLightTextHover`	`#FFFFFF`
`color.button-light.text-disabled`	`--color-button-light-text-disabled`	`ButtonLightTextDisabled`	`#121622`
`color.button-ghost.background`	`--color-button-ghost-background`	`ButtonGhostBackground`	transparent
`color.button-ghost.background-hover`	`--color-button-ghost-background-hover`	`ButtonGhostBackgroundHover`	`#2B3550`
`color.button-ghost.background-disabled`	`--color-button-ghost-background-disabled`	`ButtonGhostBackgroundDisabled`	transparent
`color.button-ghost.text`	`--color-button-ghost-text`	`ButtonGhostText`	`#FFFFFF`
`color.button-ghost.text-hover`	`--color-button-ghost-text-hover`	`ButtonGhostTextHover`	`#E8FF00`
`color.button-ghost.text-disabled`	`--color-button-ghost-text-disabled`	`ButtonGhostTextDisabled`	`#6B7280`
`color.button-destructive.background`	`--color-button-destructive-background`	`ButtonDestructiveBackground`	`#DC2626`
`color.button-destructive.background-hover`	`--color-button-destructive-background-hover`	`ButtonDestructiveBackgroundHover`	`#B91C1C`
`color.button-destructive.background-disabled`	`--color-button-destructive-background-disabled`	`ButtonDestructiveBackgroundDisabled`	`#FCA5A5`
`color.button-destructive.text`	`--color-button-destructive-text`	`ButtonDestructiveText`	`#FFFFFF`
`color.button-destructive.text-hover`	`--color-button-destructive-text-hover`	`ButtonDestructiveTextHover`	`#FFFFFF`
`color.button-destructive.text-disabled`	`--color-button-destructive-text-disabled`	`ButtonDestructiveTextDisabled`	`#7F1D1D`
`color.surface.background`	`--color-surface-background`	`SurfaceBackground`	`#101928`
`color.surface.background-secondary`	`--color-surface-background-secondary`	`SurfaceBackgroundSecondary`	`#2B3550`