4 · Composants — structure

Modal, Menu, Tabs, Table. Ce sont eux qui consomment les voiles d'état neutres.

Le survol d'une ligne de tableau ou d'un item de menu utilise state.hover, pas role.primary.tint. Un voile de rôle teinterait la ligne en violet. Le voile neutre, lui, s'inverse selon le mode : il assombrit en clair, il éclaircit en sombre. Bascule le thème pour le voir.

Tabs

default

hover

selected

disabled

Les 22 tokens de tabs, et le token sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police — suivre un lien mène à la page où ce rôle est défini.

color 12 tokens consomme color.surface color.text color.border color.state color.role

Token du composant	Consomme (sémantique)	Valeur résolue
--color-tabs-default-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-tabs-default-text	`--color-text-muted`	#4c7299
--color-tabs-default-indicator	`--color-border-transparent`	rgba(0, 0, 0, 0)
--color-tabs-hover-background	`--color-state-hover`	rgba(0, 0, 0, 0.04)
--color-tabs-hover-text	`--color-text-body`	#213c58
--color-tabs-hover-indicator	`--color-border-transparent`	rgba(0, 0, 0, 0)
--color-tabs-selected-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-tabs-selected-text	`--color-role-primary-text`	#7400bb
--color-tabs-selected-indicator	`--color-role-primary-main`	#9500ee
--color-tabs-disabled-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-tabs-disabled-text	`--color-text-disabled`	#9fbede
--color-tabs-disabled-indicator	`--color-border-transparent`	rgba(0, 0, 0, 0)

space 3 tokens consomme space

Token du composant	Consomme (sémantique)	Valeur résolue
--space-tabs-padding-x	`--space-md`	16px
--space-tabs-padding-y	`--space-sm`	8px
--space-tabs-gap	`--space-xs`	4px

fontSize 1 token consomme fontSize

Token du composant	Consomme (sémantique)	Valeur résolue
--font-size-tabs	`--font-size-body`	16px

borderWidth 1 token consomme borderWidth

Token du composant	Consomme (sémantique)	Valeur résolue
--border-width-tabs	`--border-width-strong`	2px

typography 5 tokens consomme typography.label

Token du composant	Consomme (sémantique)	Valeur résolue
--typography-tabs-family	`--typography-label-family`	'JetBrains Mono', ui-monospace, 'SF Mono', monospace
--typography-tabs-weight	`--typography-label-weight`	500
--typography-tabs-line-height	`--typography-label-line-height`	1.2
--typography-tabs-letter-spacing	`--typography-label-letter-spacing`	0
--typography-tabs-text-case	`--typography-label-text-case`	none

Les 23 tokens de menu, et le token sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police — suivre un lien mène à la page où ce rôle est défini.

color 12 tokens consomme color.surface color.border color.text color.state color.role

Token du composant	Consomme (sémantique)	Valeur résolue
--color-menu-default-background	`--color-surface-overlay`	#f6fbff
--color-menu-default-border	`--color-border-default`	#c0d7ef
--color-menu-item-default-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-menu-item-default-text	`--color-text-body`	#213c58
--color-menu-item-hover-background	`--color-state-hover`	rgba(0, 0, 0, 0.04)
--color-menu-item-hover-text	`--color-text-body`	#213c58
--color-menu-item-active-background	`--color-state-active`	rgba(0, 0, 0, 0.12)
--color-menu-item-active-text	`--color-text-body`	#213c58
--color-menu-item-selected-background	`--color-state-selected`	rgba(0, 0, 0, 0.08)
--color-menu-item-selected-text	`--color-role-primary-text`	#7400bb
--color-menu-item-disabled-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-menu-item-disabled-text	`--color-text-disabled`	#9fbede

shadow 1 token consomme shadow

Token du composant	Consomme (sémantique)	Valeur résolue
--shadow-menu-default	`--shadow-float`	[object Object]

space 2 tokens consomme space

Token du composant	Consomme (sémantique)	Valeur résolue
--space-menu-padding-x	`--space-xs`	4px
--space-menu-padding-y	`--space-xs`	4px

fontSize 1 token consomme fontSize

Token du composant	Consomme (sémantique)	Valeur résolue
--font-size-menu	`--font-size-body`	16px

radius 1 token consomme radius

Token du composant	Consomme (sémantique)	Valeur résolue
--radius-menu	`--radius-md`	8px

borderWidth 1 token consomme borderWidth

Token du composant	Consomme (sémantique)	Valeur résolue
--border-width-menu	`--border-width-default`	1px

typography 5 tokens consomme typography.body

Token du composant	Consomme (sémantique)	Valeur résolue
--typography-menu-family	`--typography-body-family`	'JetBrains Mono', ui-monospace, 'SF Mono', monospace
--typography-menu-weight	`--typography-body-weight`	400
--typography-menu-line-height	`--typography-body-line-height`	1.5
--typography-menu-letter-spacing	`--typography-body-letter-spacing`	0
--typography-menu-text-case	`--typography-body-text-case`	none

Table

État de la ligne	Colonne
default	Valeur
hover	Valeur
selected	Valeur
disabled	Valeur

Les 24 tokens de table, et le token sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police — suivre un lien mène à la page où ce rôle est défini.

color 15 tokens consomme color.surface color.text color.border color.state

Token du composant	Consomme (sémantique)	Valeur résolue
--color-table-header-default-background	`--color-surface-raised`	#edf4fd
--color-table-header-default-text	`--color-text-muted`	#4c7299
--color-table-header-default-border	`--color-border-default`	#c0d7ef
--color-table-row-default-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-table-row-default-text	`--color-text-body`	#213c58
--color-table-row-default-border	`--color-border-divider`	#dceaf8
--color-table-row-hover-background	`--color-state-hover`	rgba(0, 0, 0, 0.04)
--color-table-row-hover-text	`--color-text-body`	#213c58
--color-table-row-hover-border	`--color-border-divider`	#dceaf8
--color-table-row-selected-background	`--color-state-selected`	rgba(0, 0, 0, 0.08)
--color-table-row-selected-text	`--color-text-body`	#213c58
--color-table-row-selected-border	`--color-border-divider`	#dceaf8
--color-table-row-disabled-background	`--color-surface-transparent`	rgba(0, 0, 0, 0)
--color-table-row-disabled-text	`--color-text-disabled`	#9fbede
--color-table-row-disabled-border	`--color-border-divider`	#dceaf8

space 2 tokens consomme space

Token du composant	Consomme (sémantique)	Valeur résolue
--space-table-padding-x	`--space-md`	16px
--space-table-padding-y	`--space-sm`	8px

fontSize 1 token consomme fontSize

Token du composant	Consomme (sémantique)	Valeur résolue
--font-size-table	`--font-size-small`	14px

borderWidth 1 token consomme borderWidth

Token du composant	Consomme (sémantique)	Valeur résolue
--border-width-table	`--border-width-default`	1px

typography 5 tokens consomme typography.small

Token du composant	Consomme (sémantique)	Valeur résolue
--typography-table-family	`--typography-small-family`	'JetBrains Mono', ui-monospace, 'SF Mono', monospace
--typography-table-weight	`--typography-small-weight`	400
--typography-table-line-height	`--typography-small-line-height`	1.5
--typography-table-letter-spacing	`--typography-small-letter-spacing`	0
--typography-table-text-case	`--typography-small-text-case`	none

Le scrim était cassé. Il pointait sur un neutre teinté : la luminance de la page ne passait que de 0,96 à 0,86, la modale ne se détachait pas. Il pointe maintenant sur alpha.black.60 → 0,96 → 0,13.

Les 9 tokens de modal, et le token sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police — suivre un lien mène à la page où ce rôle est défini.

color 3 tokens consomme color.surface color.border color

Token du composant	Consomme (sémantique)	Valeur résolue
--color-modal-default-background	`--color-surface-overlay`	#f6fbff
--color-modal-default-border	`--color-border-default`	#c0d7ef
--color-modal-default-scrim	`--color-scrim`	rgba(0, 0, 0, 0.6)

shadow 1 token consomme shadow

Token du composant	Consomme (sémantique)	Valeur résolue
--shadow-modal-default	`--shadow-overlay`	[object Object]

space 3 tokens consomme space

Token du composant	Consomme (sémantique)	Valeur résolue
--space-modal-padding-x	`--space-xl`	32px
--space-modal-padding-y	`--space-xl`	32px
--space-modal-gap	`--space-lg`	24px

radius 1 token consomme radius

Token du composant	Consomme (sémantique)	Valeur résolue
--radius-modal	`--radius-lg`	16px

borderWidth 1 token consomme borderWidth

Token du composant	Consomme (sémantique)	Valeur résolue
--border-width-modal	`--border-width-default`	1px