Jetons de mise en page
Les jetons de mise en page définissent les contraintes à l’échelle des pages qui gardent le cadre de contenu prévisible sur le site de marque et le site principal.
grid-max | --grid-max | 72rem | 72rem | dimension | primitive | Largeur maximale de la grille de contenu principale. |
gutter | --gutter | clamp(0.625rem, 0.1033rem + 2.6087vw, 2.125rem) | clamp(0.625rem, 0.1033rem + 2.6087vw, 2.125rem) | dimension | scale | Gouttière de page fluide qui éloigne le contenu des bords de la fenêtre. |
border.accent-width | --border-accent-width | 0.22rem | 0.22rem | dimension | semantic | Largeur de règle d’accent pour les repères de composants de type encadré. |
radius.none | --radius-none | 0 | 0 | dimension | scale | Coin carré pour les structures éditoriales et denses en données. |
radius.sm | --radius-sm | 0.125rem | 0.125rem | dimension | scale | Petit arrondi pour les contrôles compacts et les images. |
radius.md | --radius-md | 0.375rem | 0.375rem | dimension | scale | Arrondi par défaut pour le code et les surfaces contenues. |
radius.lg | --radius-lg | 0.5rem | 0.5rem | dimension | scale | Grand arrondi pour les panneaux et cartes surélevés. |
radius.full | --radius-full | 9999px | 9999px | dimension | scale | Forme entièrement arrondie pour les pastilles d’état et les contrôles circulaires. |
shadow.panel | --shadow-panel | 0 1px 2px rgb(0 0 0 / 0.08) | 0 1px 2px rgb(0 0 0 / 0.08) | shadow | semantic | Élévation discrète pour les panneaux, cartes et la navigation contenue. |
shadow.overlay | --shadow-overlay | 0 12px 28px rgb(0 0 0 / 0.16) | 0 12px 28px rgb(0 0 0 / 0.16) | shadow | semantic | Élévation plus forte pour les superpositions temporaires et les aperçus agrandis. |
duration.fast | --duration-fast | 150ms | 150ms | duration | semantic | Durée de rétroaction rapide pour l’opacité et les petits changements d’état. |
duration.standard | --duration-standard | 200ms | 200ms | duration | semantic | Durée par défaut pour les transitions de transformation et de superposition. |
easing.standard | --easing-standard | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) | cubicBezier | semantic | Courbe de mouvement décélérante par défaut pour les transitions d’interface. |
breakpoint.compact | --breakpoint-compact | 40rem | 40rem | dimension | semantic | Point de rupture où les mises en page compactes gagnent une deuxième colonne de contenu. |
breakpoint.navigation | --breakpoint-navigation | 48rem | 48rem | dimension | semantic | Point de rupture où la navigation complète de l’en-tête remplace le bouton de menu. |
breakpoint.wide | --breakpoint-wide | 64rem | 64rem | dimension | semantic | Point de rupture pour la navigation large et les mises en page de référence à plusieurs colonnes. |
component.theme-toggle.size | --component-theme-toggle-size | 2rem | 2rem | dimension | component | Taille de contrôle carrée du sélecteur de thème partagé. |
component.theme-toggle.icon-size | --component-theme-toggle-icon-size | 1rem | 1rem | dimension | component | Taille de l’icône dans le sélecteur de thème partagé. |
diagram.canvas | --diagram-canvas | {color.paper} | #f8f8f5 | color | component | Arrière-plan de canevas pour les diagrammes dans les outils de rédaction pris en charge. |
diagram.node | --diagram-node | {color.paper} | #f8f8f5 | color | component | Surface de nœud de diagramme par défaut. |
diagram.node-ink | --diagram-node-ink | {color.ink} | #101010 | color | component | Couleur par défaut des libellés de nœud de diagramme. |
diagram.node-line | --diagram-node-line | {color.line} | #d7d7d2 | color | component | Couleur par défaut des bordures de nœud et des connecteurs de diagramme. |
component.announcement.padding | --component-announcement-padding | {space.xs} | clamp(0.7969rem, 0.7643rem + 0.163vw, 0.8906rem) | dimension | component | Espacement vertical dans la bannière d’annonce présente sur tout le site. |
diagram.accent | --diagram-accent | {color.accent} | #e6461a | color | component | Couleur d’emphase des diagrammes et des flux actifs. |
component.avatar.recommendation-size | --component-avatar-recommendation-size | 4rem | 4rem | dimension | component | Diamètre de l’avatar dans l’attribution d’une recommandation. |
diagram.radius | --diagram-radius | {radius.md} | 0.375rem | dimension | component | Arrondi par défaut pour les nœuds et zones groupées de diagramme. |
diagram.shadow | --diagram-shadow | {shadow.panel} | 0 1px 2px rgb(0 0 0 / 0.08) | shadow | component | Élévation par défaut des nœuds de diagramme dans les outils sur canevas. |
diagram.padding | --diagram-padding | {space.s} | clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem) | dimension | component | Espacement intérieur des nœuds et encadrés de diagramme. |
diagram.label-size | --diagram-label-size | {type.label} | 0.68rem | dimension | component | Taille compacte de libellé en capitales pour les métadonnées de diagramme. |
component.back-to-top.inset | --component-back-to-top-inset | {space.s} | clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem) | dimension | component | Retrait par rapport à la fenêtre pour le lien de retour en haut fixe. |
component.back-to-top.padding-block | --component-back-to-top-padding-block | {space.2xs} | clamp(0.5313rem, 0.5095rem + 0.1087vw, 0.5938rem) | dimension | component | Espacement vertical à l’intérieur du lien de retour en haut. |
component.back-to-top.padding-inline | --component-back-to-top-padding-inline | {space.xs} | clamp(0.7969rem, 0.7643rem + 0.163vw, 0.8906rem) | dimension | component | Espacement horizontal à l’intérieur du lien de retour en haut. |