> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/foundations/colors/interactive-colors.md).

# Couleurs interactives

### text-icon-background

Contrôle la couleur du texte et des icones dans tous les éléments interactifs du site.

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/700</code></td><td>rgba(23, 13, 14, 0.8)</td><td><a href="/files/opwJALeLnjX41v8vjeZs">/files/opwJALeLnjX41v8vjeZs</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/950</code></td><td>rgba(19, 12, 12, 1)</td><td><a href="/files/PCzjGT9pqHHReaz106Bg">/files/PCzjGT9pqHHReaz106Bg</a></td></tr><tr><td><strong>disabled</strong></td><td><code>primitive/squid/opacity/400</code></td><td>rgba(86, 67, 69, 0.5)</td><td><a href="/files/lv3FHD7fqdhlYnBp6Fod">/files/lv3FHD7fqdhlYnBp6Fod</a></td></tr></tbody></table>

***

### primary-background

Contrôle le fond de tous les éléments intéractifs primaires comme le [button primary](/documentation/components/button.md#primary).

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/950</code></td><td>rgba(19, 12, 12, 1)</td><td><a href="/files/HrSN1esqXurJN8gY7wAj">/files/HrSN1esqXurJN8gY7wAj</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/700</code></td><td>rgba(23, 13, 14, 0.8)</td><td><a href="/files/1Srn3nTHJkZdy78phztw">/files/1Srn3nTHJkZdy78phztw</a></td></tr><tr><td><strong>disabled</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/HUp1mzuLwT5hICFEBF4J">/files/HUp1mzuLwT5hICFEBF4J</a></td></tr></tbody></table>

***

### secondary-stroke

Contrôle le trait de contour de tous les éléments interactifs secondaires comme le [bouton secondary](/documentation/components/button.md#secondary) ou le [choice](broken://pages/KI0sNM6d2hhdrQA5dQCV#togglechoice).

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/x4vpdBB6fsqSuCDiVLk5">/files/x4vpdBB6fsqSuCDiVLk5</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/400</code></td><td>rgba(86, 67, 69, 0.5)</td><td><a href="/files/CBENhWQmRukLKxBrfk6z">/files/CBENhWQmRukLKxBrfk6z</a></td></tr><tr><td><strong>active</strong></td><td><code>primitive/squid/opacity/700</code></td><td>rgba(23, 13, 14, 0.8)</td><td><a href="/files/bFeNAQabEO6mTUgDzrqT">/files/bFeNAQabEO6mTUgDzrqT</a></td></tr><tr><td><strong>disabled</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/x4vpdBB6fsqSuCDiVLk5">/files/x4vpdBB6fsqSuCDiVLk5</a></td></tr><tr><td><strong>negative</strong></td><td><code>primitive/red/tint/600</code></td><td>rgba(229, 0, 45, 1)</td><td><a href="/files/gylxoFjED4C78mGMCBqQ">/files/gylxoFjED4C78mGMCBqQ</a></td></tr><tr><td><strong>focus</strong></td><td><code>primitive/blue/tint/600</code></td><td>rgba(0, 114, 214, 1)</td><td><a href="/files/U4mz9hdvv6ICfKLw7Jse">/files/U4mz9hdvv6ICfKLw7Jse</a></td></tr></tbody></table>

***

### on-image

Contrôle tout fond et trait de contour d'un élément intéractif ou bouton qui se place devant une image ou un contenu. Elles s'appliquent aux [button-on-image](/documentation/components/button.md#on-image) qui eux-mêmes se retrouvent sur les [sliders](broken://pages/8n6OjKJ6sxUBZYl448K5#product-box) et les [grandes TG](broken://pages/oNesEqGGRBVtaqLdlxZz#image-fullscreen).

{% tabs %}
{% tab title="background" %}
Contrôle le fond des éléments

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/400</code></td><td>rgba(86, 67, 69, 0.5)</td><td><a href="/files/BDT2id7UENJ5Jot8o47t">/files/BDT2id7UENJ5Jot8o47t</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/500</code></td><td>rgba(31, 20, 21, 0.61)</td><td><a href="/files/eo3lRfigNH4rKc284Ons">/files/eo3lRfigNH4rKc284Ons</a></td></tr></tbody></table>
{% endtab %}

{% tab title="stroke" %}
Contrôle le trait de contour des éléments

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/white/opacity/30%</code></td><td>rgba(249, 250, 251, 0.3)</td><td></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/white/opacity/20%</code></td><td>rgba(249, 250, 251, 0.2)</td><td></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### tertiary-background

Contrôle le fond des éléments tertiary de l'interface, les élements différents du secondary, plus rares, peuvent représenter la négation, l'annulation etc... comme le [button-tertiary](/documentation/components/button.md#tertiary) ou les [boutons tactiles](/documentation/components/button-tactile.md).

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/100</code></td><td>rgba(209, 199, 201, 0.2)</td><td><a href="/files/mohIKCQYFfzWyrbzGzBW">/files/mohIKCQYFfzWyrbzGzBW</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/100</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/HUp1mzuLwT5hICFEBF4J">/files/HUp1mzuLwT5hICFEBF4J</a></td></tr></tbody></table>

***

### ghost-background

Contrôle le fond des éléments "ghost" de l'interface, les élements discrets mais intéractifs tout de même, comme le [button-ghost](/documentation/components/button.md#ghost) ou le [buttonHeader](/documentation/components/button.md#buttonheader).

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>surface/background</code></td><td>rgba(252, 252, 253, 1)</td><td><a href="/files/oRjYfnwyP5sK7Q37OIpK">/files/oRjYfnwyP5sK7Q37OIpK</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/100</code></td><td>rgba(209, 199, 201, 0.2)</td><td><a href="/files/mohIKCQYFfzWyrbzGzBW">/files/mohIKCQYFfzWyrbzGzBW</a></td></tr></tbody></table>

***

### product-box-stroke

Contrôle l'interactivité du contour de toutes les [box produits](broken://pages/CLQFQ5sUeLlAuCAui0tC).

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/white/white</code></td><td>rgba(252, 252, 253, 1)</td><td><a href="/files/yRwqVQkEr9UIx6xyTJLY">/files/yRwqVQkEr9UIx6xyTJLY</a></td></tr><tr><td><strong>rollover</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/x4vpdBB6fsqSuCDiVLk5">/files/x4vpdBB6fsqSuCDiVLk5</a></td></tr></tbody></table>

***

### input-background

Contrôle la couleur de fond de [l'input](broken://pages/hPfJIL0nIGPRB3tfGVUo#input) en fonction de son état.

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>default</strong></td><td><code>primitive/squid/opacity/50</code></td><td>rgba(197, 185, 187, 0.14)</td><td><a href="/files/QuiulERdH97xYnUbe2GX">/files/QuiulERdH97xYnUbe2GX</a></td></tr><tr><td><strong>active</strong></td><td><code>primitive/white/white</code></td><td>rgba(252, 252, 253, 1)</td><td><a href="/files/oRjYfnwyP5sK7Q37OIpK">/files/oRjYfnwyP5sK7Q37OIpK</a></td></tr></tbody></table>