Explorateur de tokens
Trois niveaux de tokens — navigables, filtrables, directement applicables via CSS Custom Properties.
399
Tokens primitifs (couleurs)
39
Tokens sémantiques
32
Tokens de composant
Tokens primitifs
Valeurs physiques issues de Radix UI. Jamais utilisées directement dans les composants.
| Token CSS | Valeur | Description |
|---|---|---|
--sda-primitive-color-gray-1 | #fcfcfc | App background |
--sda-primitive-color-gray-2 | #f9f9f9 | Subtle background |
--sda-primitive-color-gray-3 | #f0f0f0 | UI element background |
--sda-primitive-color-gray-4 | #e8e8e8 | Hovered UI element background |
--sda-primitive-color-gray-5 | #e0e0e0 | Active / selected UI element background |
--sda-primitive-color-gray-6 | #d9d9d9 | Subtle border and separator |
--sda-primitive-color-gray-7 | #cecece | UI element border and focus ring |
--sda-primitive-color-gray-8 | #bbbbbb | Hovered UI element border |
--sda-primitive-color-gray-9 | #8d8d8d | Solid background (non-interactive) |
--sda-primitive-color-gray-10 | #838383 | Hovered solid background |
--sda-primitive-color-gray-11 | #646464 | Low-contrast text |
--sda-primitive-color-gray-12 | #202020 | High-contrast text |
--sda-primitive-color-mauve-1 | #fdfcfd | App background |
--sda-primitive-color-mauve-2 | #faf9fb | Subtle background |
--sda-primitive-color-mauve-3 | #f2eff3 | UI element background |
--sda-primitive-color-mauve-4 | #eae7ec | Hovered UI element background |
--sda-primitive-color-mauve-5 | #e3dfe6 | Active / selected UI element background |
--sda-primitive-color-mauve-6 | #dbd8e0 | Subtle border and separator |
--sda-primitive-color-mauve-7 | #d0cdd7 | UI element border and focus ring |
--sda-primitive-color-mauve-8 | #bcbac7 | Hovered UI element border |
--sda-primitive-color-mauve-9 | #8e8c99 | Solid background (non-interactive) |
--sda-primitive-color-mauve-10 | #84828e | Hovered solid background |
--sda-primitive-color-mauve-11 | #65636d | Low-contrast text |
--sda-primitive-color-mauve-12 | #211f26 | High-contrast text |
--sda-primitive-color-slate-1 | #fbfcfd | App background |
--sda-primitive-color-slate-2 | #f8f9fa | Subtle background |
--sda-primitive-color-slate-3 | #eff1f3 | UI element background |
--sda-primitive-color-slate-4 | #e7e9ec | Hovered UI element background |
--sda-primitive-color-slate-5 | #dfe3e6 | Active / selected UI element background |
--sda-primitive-color-slate-6 | #d7dbdf | Subtle border and separator |
--sda-primitive-color-slate-7 | #c9cdd2 | UI element border and focus ring |
--sda-primitive-color-slate-8 | #b9bfc9 | Hovered UI element border |
--sda-primitive-color-slate-9 | #8b9098 | Solid background (non-interactive) |
--sda-primitive-color-slate-10 | #80868e | Hovered solid background |
--sda-primitive-color-slate-11 | #60646c | Low-contrast text |
--sda-primitive-color-slate-12 | #1c2024 | High-contrast text |
--sda-primitive-color-sage-1 | #fbfdfc | App background |
--sda-primitive-color-sage-2 | #f7f9f8 | Subtle background |
--sda-primitive-color-sage-3 | #eef1f0 | UI element background |
--sda-primitive-color-sage-4 | #e6e9e8 | Hovered UI element background |
--sda-primitive-color-sage-5 | #dfe2e0 | Active / selected UI element background |
--sda-primitive-color-sage-6 | #d7dad9 | Subtle border and separator |
--sda-primitive-color-sage-7 | #c9cdcb | UI element border and focus ring |
--sda-primitive-color-sage-8 | #b5bcba | Hovered UI element border |
--sda-primitive-color-sage-9 | #869e9a | Solid background (non-interactive) |
--sda-primitive-color-sage-10 | #7c9490 | Hovered solid background |
--sda-primitive-color-sage-11 | #5c7672 | Low-contrast text |
--sda-primitive-color-sage-12 | #1a2421 | High-contrast text |
--sda-primitive-color-olive-1 | #fcfdfc | App background |
--sda-primitive-color-olive-2 | #f8faf8 | Subtle background |
--sda-primitive-color-olive-3 | #eff1ee | UI element background |
--sda-primitive-color-olive-4 | #e7e9e6 | Hovered UI element background |
--sda-primitive-color-olive-5 | #dfe2de | Active / selected UI element background |
--sda-primitive-color-olive-6 | #d7dad6 | Subtle border and separator |
--sda-primitive-color-olive-7 | #c8cdc7 | UI element border and focus ring |
--sda-primitive-color-olive-8 | #b4bab3 | Hovered UI element border |
--sda-primitive-color-olive-9 | #8b9389 | Solid background (non-interactive) |
--sda-primitive-color-olive-10 | #818a7f | Hovered solid background |
--sda-primitive-color-olive-11 | #606b5e | Low-contrast text |
--sda-primitive-color-olive-12 | #1d201c | High-contrast text |
--sda-primitive-color-sand-1 | #fdfdfc | App background |
--sda-primitive-color-sand-2 | #f9f9f8 | Subtle background |
--sda-primitive-color-sand-3 | #f1f0ef | UI element background |
--sda-primitive-color-sand-4 | #e9e8e6 | Hovered UI element background |
--sda-primitive-color-sand-5 | #e2e1de | Active / selected UI element background |
--sda-primitive-color-sand-6 | #dad9d6 | Subtle border and separator |
--sda-primitive-color-sand-7 | #cdceca | UI element border and focus ring |
--sda-primitive-color-sand-8 | #b9bbb5 | Hovered UI element border |
--sda-primitive-color-sand-9 | #8d8e86 | Solid background (non-interactive) |
--sda-primitive-color-sand-10 | #83847c | Hovered solid background |
--sda-primitive-color-sand-11 | #63645b | Low-contrast text |
--sda-primitive-color-sand-12 | #21201c | High-contrast text |
--sda-primitive-color-tomato-1 | #fffcfc | App background |
--sda-primitive-color-tomato-2 | #fff8f7 | Subtle background |
--sda-primitive-color-tomato-3 | #feebe7 | UI element background |
--sda-primitive-color-tomato-4 | #ffdcd3 | Hovered UI element background |
--sda-primitive-color-tomato-5 | #ffcdc2 | Active / selected UI element background |
--sda-primitive-color-tomato-6 | #fdbdaf | Subtle border and separator |
--sda-primitive-color-tomato-7 | #f5a898 | UI element border and focus ring |
--sda-primitive-color-tomato-8 | #ec8e7b | Hovered UI element border |
--sda-primitive-color-tomato-9 | #e54d2e | Solid background — brand / CTA |
--sda-primitive-color-tomato-10 | #dd4425 | Hovered solid background |
--sda-primitive-color-tomato-11 | #d13415 | Low-contrast text |
--sda-primitive-color-tomato-12 | #5c271f | High-contrast text |
--sda-primitive-color-red-1 | #fffcfc | App background |
--sda-primitive-color-red-2 | #fff7f7 | Subtle background |
--sda-primitive-color-red-3 | #feebec | UI element background |
--sda-primitive-color-red-4 | #ffdbdc | Hovered UI element background |
--sda-primitive-color-red-5 | #ffcdce | Active / selected UI element background |
--sda-primitive-color-red-6 | #fdbdbe | Subtle border and separator |
--sda-primitive-color-red-7 | #f4a9aa | UI element border and focus ring |
--sda-primitive-color-red-8 | #eb8e90 | Hovered UI element border |
--sda-primitive-color-red-9 | #e5484d | Solid background — brand / CTA / danger |
--sda-primitive-color-red-10 | #dc3e42 | Hovered solid background |
--sda-primitive-color-red-11 | #ce2c31 | Low-contrast text |
--sda-primitive-color-red-12 | #641723 | High-contrast text |
--sda-primitive-color-ruby-1 | #fffcfd | App background |
--sda-primitive-color-ruby-2 | #fff7f8 | Subtle background |
--sda-primitive-color-ruby-3 | #feeaed | UI element background |
--sda-primitive-color-ruby-4 | #ffdbe1 | Hovered UI element background |
--sda-primitive-color-ruby-5 | #ffccd6 | Active / selected UI element background |
--sda-primitive-color-ruby-6 | #fabcc7 | Subtle border and separator |
--sda-primitive-color-ruby-7 | #f2a7b6 | UI element border and focus ring |
--sda-primitive-color-ruby-8 | #e88098 | Hovered UI element border |
--sda-primitive-color-ruby-9 | #e54666 | Solid background — brand / CTA |
--sda-primitive-color-ruby-10 | #dc3b5d | Hovered solid background |
--sda-primitive-color-ruby-11 | #ca244d | Low-contrast text |
--sda-primitive-color-ruby-12 | #64172b | High-contrast text |
--sda-primitive-color-crimson-1 | #fffcfd | App background |
--sda-primitive-color-crimson-2 | #fff7fb | Subtle background |
--sda-primitive-color-crimson-3 | #feecf4 | UI element background |
--sda-primitive-color-crimson-4 | #ffdcea | Hovered UI element background |
--sda-primitive-color-crimson-5 | #ffcedf | Active / selected UI element background |
--sda-primitive-color-crimson-6 | #f8bdd0 | Subtle border and separator |
--sda-primitive-color-crimson-7 | #eda9c0 | UI element border and focus ring |
--sda-primitive-color-crimson-8 | #e087a9 | Hovered UI element border |
--sda-primitive-color-crimson-9 | #e93d82 | Solid background — brand / CTA |
--sda-primitive-color-crimson-10 | #df3478 | Hovered solid background |
--sda-primitive-color-crimson-11 | #cb1d63 | Low-contrast text |
--sda-primitive-color-crimson-12 | #621639 | High-contrast text |
--sda-primitive-color-pink-1 | #fffcfe | App background |
--sda-primitive-color-pink-2 | #fff7fc | Subtle background |
--sda-primitive-color-pink-3 | #feeef8 | UI element background |
--sda-primitive-color-pink-4 | #fce0f3 | Hovered UI element background |
--sda-primitive-color-pink-5 | #f9d2eb | Active / selected UI element background |
--sda-primitive-color-pink-6 | #f3c0e0 | Subtle border and separator |
--sda-primitive-color-pink-7 | #ebacce | UI element border and focus ring |
--sda-primitive-color-pink-8 | #de85b5 | Hovered UI element border |
--sda-primitive-color-pink-9 | #d6409f | Solid background — brand / CTA |
--sda-primitive-color-pink-10 | #cf3897 | Hovered solid background |
--sda-primitive-color-pink-11 | #c2298a | Low-contrast text |
--sda-primitive-color-pink-12 | #651249 | High-contrast text |
--sda-primitive-color-plum-1 | #fefcff | App background |
--sda-primitive-color-plum-2 | #fdf7ff | Subtle background |
--sda-primitive-color-plum-3 | #fbf0fe | UI element background |
--sda-primitive-color-plum-4 | #f7e2fb | Hovered UI element background |
--sda-primitive-color-plum-5 | #f3d4f7 | Active / selected UI element background |
--sda-primitive-color-plum-6 | #ecc4ee | Subtle border and separator |
--sda-primitive-color-plum-7 | #e0afe3 | UI element border and focus ring |
--sda-primitive-color-plum-8 | #ce91d3 | Hovered UI element border |
--sda-primitive-color-plum-9 | #ab4aba | Solid background — brand / CTA |
--sda-primitive-color-plum-10 | #a144ae | Hovered solid background |
--sda-primitive-color-plum-11 | #953ea3 | Low-contrast text |
--sda-primitive-color-plum-12 | #53195d | High-contrast text |
--sda-primitive-color-purple-1 | #fefcfe | App background |
--sda-primitive-color-purple-2 | #fbf7fe | Subtle background |
--sda-primitive-color-purple-3 | #f7edfe | UI element background |
--sda-primitive-color-purple-4 | #f2e2fc | Hovered UI element background |
--sda-primitive-color-purple-5 | #ead5f9 | Active / selected UI element background |
--sda-primitive-color-purple-6 | #e0c4f4 | Subtle border and separator |
--sda-primitive-color-purple-7 | #d1afec | UI element border and focus ring |
--sda-primitive-color-purple-8 | #be93e4 | Hovered UI element border |
--sda-primitive-color-purple-9 | #8e4ec6 | Solid background — brand / CTA |
--sda-primitive-color-purple-10 | #8445bc | Hovered solid background |
--sda-primitive-color-purple-11 | #793aaf | Low-contrast text |
--sda-primitive-color-purple-12 | #402060 | High-contrast text |
--sda-primitive-color-violet-1 | #fdfcfe | App background |
--sda-primitive-color-violet-2 | #faf8ff | Subtle background |
--sda-primitive-color-violet-3 | #f4f0fe | UI element background |
--sda-primitive-color-violet-4 | #ebe4ff | Hovered UI element background |
--sda-primitive-color-violet-5 | #e1d9ff | Active / selected UI element background |
--sda-primitive-color-violet-6 | #d4cafe | Subtle border and separator |
--sda-primitive-color-violet-7 | #c2b5f5 | UI element border and focus ring |
--sda-primitive-color-violet-8 | #aa99ec | Hovered UI element border |
--sda-primitive-color-violet-9 | #6e56cf | Solid background — brand / CTA |
--sda-primitive-color-violet-10 | #654dc4 | Hovered solid background |
--sda-primitive-color-violet-11 | #6550b9 | Low-contrast text |
--sda-primitive-color-violet-12 | #2f265f | High-contrast text |
--sda-primitive-color-iris-1 | #fdfdff | App background |
--sda-primitive-color-iris-2 | #f8f8ff | Subtle background |
--sda-primitive-color-iris-3 | #f0f1fe | UI element background |
--sda-primitive-color-iris-4 | #e6e7ff | Hovered UI element background |
--sda-primitive-color-iris-5 | #dadcff | Active / selected UI element background |
--sda-primitive-color-iris-6 | #cbceff | Subtle border and separator |
--sda-primitive-color-iris-7 | #b8bcf8 | UI element border and focus ring |
--sda-primitive-color-iris-8 | #9da0f0 | Hovered UI element border |
--sda-primitive-color-iris-9 | #5b5bd6 | Solid background — brand / CTA |
--sda-primitive-color-iris-10 | #5252cd | Hovered solid background |
--sda-primitive-color-iris-11 | #5151cd | Low-contrast text |
--sda-primitive-color-iris-12 | #272962 | High-contrast text |
--sda-primitive-color-indigo-1 | #fdfdfe | App background |
--sda-primitive-color-indigo-2 | #f7f9ff | Subtle background |
--sda-primitive-color-indigo-3 | #edf2fe | UI element background |
--sda-primitive-color-indigo-4 | #e1e9ff | Hovered UI element background |
--sda-primitive-color-indigo-5 | #d2deff | Active / selected UI element background |
--sda-primitive-color-indigo-6 | #c1d0fb | Subtle border and separator |
--sda-primitive-color-indigo-7 | #abbdf9 | UI element border and focus ring |
--sda-primitive-color-indigo-8 | #8da4ef | Hovered UI element border |
--sda-primitive-color-indigo-9 | #3e63dd | Solid background — brand / CTA |
--sda-primitive-color-indigo-10 | #3358d4 | Hovered solid background |
--sda-primitive-color-indigo-11 | #3a5bc7 | Low-contrast text |
--sda-primitive-color-indigo-12 | #1f2d5c | High-contrast text |
--sda-primitive-color-blue-1 | #fbfdff | App background |
--sda-primitive-color-blue-2 | #f4faff | Subtle background |
--sda-primitive-color-blue-3 | #e6f4fe | UI element background |
--sda-primitive-color-blue-4 | #d5efff | Hovered UI element background |
--sda-primitive-color-blue-5 | #c2e5ff | Active / selected UI element background |
--sda-primitive-color-blue-6 | #acd8fa | Subtle border and separator |
--sda-primitive-color-blue-7 | #8ec8f6 | UI element border and focus ring |
--sda-primitive-color-blue-8 | #5eb1ef | Hovered UI element border |
--sda-primitive-color-blue-9 | #0090ff | Solid background — brand / CTA |
--sda-primitive-color-blue-10 | #0588f0 | Hovered solid background |
--sda-primitive-color-blue-11 | #0d74ce | Low-contrast text |
--sda-primitive-color-blue-12 | #113264 | High-contrast text |
--sda-primitive-color-cyan-1 | #fafdfe | App background |
--sda-primitive-color-cyan-2 | #f2fafb | Subtle background |
--sda-primitive-color-cyan-3 | #def7f9 | UI element background |
--sda-primitive-color-cyan-4 | #caf1f6 | Hovered UI element background |
--sda-primitive-color-cyan-5 | #b5e9f0 | Active / selected UI element background |
--sda-primitive-color-cyan-6 | #9ddde7 | Subtle border and separator |
--sda-primitive-color-cyan-7 | #7dcedc | UI element border and focus ring |
--sda-primitive-color-cyan-8 | #3db9cf | Hovered UI element border |
--sda-primitive-color-cyan-9 | #00a2c7 | Solid background — brand / CTA |
--sda-primitive-color-cyan-10 | #0797b9 | Hovered solid background |
--sda-primitive-color-cyan-11 | #107d98 | Low-contrast text |
--sda-primitive-color-cyan-12 | #0d3c48 | High-contrast text |
--sda-primitive-color-teal-1 | #fafefd | App background |
--sda-primitive-color-teal-2 | #f3fbf9 | Subtle background |
--sda-primitive-color-teal-3 | #e0f8f3 | UI element background |
--sda-primitive-color-teal-4 | #ccf3ea | Hovered UI element background |
--sda-primitive-color-teal-5 | #b8ecdf | Active / selected UI element background |
--sda-primitive-color-teal-6 | #a1e0d2 | Subtle border and separator |
--sda-primitive-color-teal-7 | #83cfc4 | UI element border and focus ring |
--sda-primitive-color-teal-8 | #53b9ab | Hovered UI element border |
--sda-primitive-color-teal-9 | #12a594 | Solid background — brand / CTA |
--sda-primitive-color-teal-10 | #0d9b8a | Hovered solid background |
--sda-primitive-color-teal-11 | #008573 | Low-contrast text |
--sda-primitive-color-teal-12 | #0d3d38 | High-contrast text |
--sda-primitive-color-jade-1 | #fbfefd | App background |
--sda-primitive-color-jade-2 | #f4fbf7 | Subtle background |
--sda-primitive-color-jade-3 | #e6f7ed | UI element background |
--sda-primitive-color-jade-4 | #d6f1e3 | Hovered UI element background |
--sda-primitive-color-jade-5 | #c3e9d7 | Active / selected UI element background |
--sda-primitive-color-jade-6 | #acdfc8 | Subtle border and separator |
--sda-primitive-color-jade-7 | #8ed1b4 | UI element border and focus ring |
--sda-primitive-color-jade-8 | #5eba94 | Hovered UI element border |
--sda-primitive-color-jade-9 | #29a383 | Solid background — brand / CTA |
--sda-primitive-color-jade-10 | #26997b | Hovered solid background |
--sda-primitive-color-jade-11 | #208368 | Low-contrast text |
--sda-primitive-color-jade-12 | #1d3b31 | High-contrast text |
--sda-primitive-color-green-1 | #fbfefc | App background |
--sda-primitive-color-green-2 | #f4fbf6 | Subtle background |
--sda-primitive-color-green-3 | #e6f6eb | UI element background |
--sda-primitive-color-green-4 | #d6efdf | Hovered UI element background |
--sda-primitive-color-green-5 | #c4e8d1 | Active / selected UI element background |
--sda-primitive-color-green-6 | #addfc0 | Subtle border and separator |
--sda-primitive-color-green-7 | #8fd1aa | UI element border and focus ring |
--sda-primitive-color-green-8 | #5eba87 | Hovered UI element border |
--sda-primitive-color-green-9 | #30a46c | Solid background — brand / CTA / success |
--sda-primitive-color-green-10 | #299764 | Hovered solid background |
--sda-primitive-color-green-11 | #18794e | Low-contrast text |
--sda-primitive-color-green-12 | #153226 | High-contrast text |
--sda-primitive-color-grass-1 | #fbfefb | App background |
--sda-primitive-color-grass-2 | #f5fbf5 | Subtle background |
--sda-primitive-color-grass-3 | #e9f6e9 | UI element background |
--sda-primitive-color-grass-4 | #d7eed8 | Hovered UI element background |
--sda-primitive-color-grass-5 | #c2e3c4 | Active / selected UI element background |
--sda-primitive-color-grass-6 | #a9d6ab | Subtle border and separator |
--sda-primitive-color-grass-7 | #87c58b | UI element border and focus ring |
--sda-primitive-color-grass-8 | #5bae63 | Hovered UI element border |
--sda-primitive-color-grass-9 | #46a758 | Solid background — brand / CTA / success |
--sda-primitive-color-grass-10 | #3e9b50 | Hovered solid background |
--sda-primitive-color-grass-11 | #297c3b | Low-contrast text |
--sda-primitive-color-grass-12 | #1b311e | High-contrast text |
--sda-primitive-color-brown-1 | #fefdfc | App background |
--sda-primitive-color-brown-2 | #fcf9f6 | Subtle background |
--sda-primitive-color-brown-3 | #f6eee7 | UI element background |
--sda-primitive-color-brown-4 | #f0e4d9 | Hovered UI element background |
--sda-primitive-color-brown-5 | #ebdaca | Active / selected UI element background |
--sda-primitive-color-brown-6 | #e4cdb7 | Subtle border and separator |
--sda-primitive-color-brown-7 | #dcbc9f | UI element border and focus ring |
--sda-primitive-color-brown-8 | #cea37e | Hovered UI element border |
--sda-primitive-color-brown-9 | #ad7f58 | Solid background — brand / CTA |
--sda-primitive-color-brown-10 | #a07653 | Hovered solid background |
--sda-primitive-color-brown-11 | #815e46 | Low-contrast text |
--sda-primitive-color-brown-12 | #3e2a1e | High-contrast text |
--sda-primitive-color-bronze-1 | #fdfcfc | App background |
--sda-primitive-color-bronze-2 | #fdf7f5 | Subtle background |
--sda-primitive-color-bronze-3 | #f6edea | UI element background |
--sda-primitive-color-bronze-4 | #efe4df | Hovered UI element background |
--sda-primitive-color-bronze-5 | #e7d9d3 | Active / selected UI element background |
--sda-primitive-color-bronze-6 | #dfcdc5 | Subtle border and separator |
--sda-primitive-color-bronze-7 | #d3bcb3 | UI element border and focus ring |
--sda-primitive-color-bronze-8 | #c2a499 | Hovered UI element border |
--sda-primitive-color-bronze-9 | #a18072 | Solid background — brand / CTA |
--sda-primitive-color-bronze-10 | #957468 | Hovered solid background |
--sda-primitive-color-bronze-11 | #7d5e54 | Low-contrast text |
--sda-primitive-color-bronze-12 | #43302b | High-contrast text |
--sda-primitive-color-gold-1 | #fdfdfc | App background |
--sda-primitive-color-gold-2 | #faf9f2 | Subtle background |
--sda-primitive-color-gold-3 | #f2f0e7 | UI element background |
--sda-primitive-color-gold-4 | #eae6db | Hovered UI element background |
--sda-primitive-color-gold-5 | #e1dccf | Active / selected UI element background |
--sda-primitive-color-gold-6 | #d8d0bf | Subtle border and separator |
--sda-primitive-color-gold-7 | #cbc0aa | UI element border and focus ring |
--sda-primitive-color-gold-8 | #b9a88d | Hovered UI element border |
--sda-primitive-color-gold-9 | #978365 | Solid background — brand / CTA |
--sda-primitive-color-gold-10 | #8c795c | Hovered solid background |
--sda-primitive-color-gold-11 | #71624b | Low-contrast text |
--sda-primitive-color-gold-12 | #3b3427 | High-contrast text |
--sda-primitive-color-sky-1 | #f9feff | App background |
--sda-primitive-color-sky-2 | #f1fafd | Subtle background |
--sda-primitive-color-sky-3 | #e1f6fd | UI element background |
--sda-primitive-color-sky-4 | #d1f0fa | Hovered UI element background |
--sda-primitive-color-sky-5 | #bee7f5 | Active / selected UI element background |
--sda-primitive-color-sky-6 | #a9daed | Subtle border and separator |
--sda-primitive-color-sky-7 | #8dcae3 | UI element border and focus ring |
--sda-primitive-color-sky-8 | #60b3d7 | Hovered UI element border |
--sda-primitive-color-sky-9 | #7ce2fe | Solid background — brand / CTA (light scale) |
--sda-primitive-color-sky-10 | #74daf8 | Hovered solid background |
--sda-primitive-color-sky-11 | #00749e | Low-contrast text |
--sda-primitive-color-sky-12 | #1d3e56 | High-contrast text |
--sda-primitive-color-mint-1 | #f9fefd | App background |
--sda-primitive-color-mint-2 | #f2fbf9 | Subtle background |
--sda-primitive-color-mint-3 | #ddf9f2 | UI element background |
--sda-primitive-color-mint-4 | #c8f4e9 | Hovered UI element background |
--sda-primitive-color-mint-5 | #b3ecde | Active / selected UI element background |
--sda-primitive-color-mint-6 | #9ae0d0 | Subtle border and separator |
--sda-primitive-color-mint-7 | #76d2be | UI element border and focus ring |
--sda-primitive-color-mint-8 | #4fc4a7 | Hovered UI element border |
--sda-primitive-color-mint-9 | #86ead4 | Solid background — brand / CTA (light scale) |
--sda-primitive-color-mint-10 | #7de0cb | Hovered solid background |
--sda-primitive-color-mint-11 | #027864 | Low-contrast text |
--sda-primitive-color-mint-12 | #16433c | High-contrast text |
--sda-primitive-color-lime-1 | #fcfdfa | App background |
--sda-primitive-color-lime-2 | #f8faf3 | Subtle background |
--sda-primitive-color-lime-3 | #eef6d6 | UI element background |
--sda-primitive-color-lime-4 | #e2f0bd | Hovered UI element background |
--sda-primitive-color-lime-5 | #d3e7a6 | Active / selected UI element background |
--sda-primitive-color-lime-6 | #c2da91 | Subtle border and separator |
--sda-primitive-color-lime-7 | #abc978 | UI element border and focus ring |
--sda-primitive-color-lime-8 | #8db654 | Hovered UI element border |
--sda-primitive-color-lime-9 | #bdee63 | Solid background — brand / CTA (light scale) |
--sda-primitive-color-lime-10 | #b0e64c | Hovered solid background |
--sda-primitive-color-lime-11 | #5c7c2f | Low-contrast text |
--sda-primitive-color-lime-12 | #37401c | High-contrast text |
--sda-primitive-color-yellow-1 | #fdfdf9 | App background |
--sda-primitive-color-yellow-2 | #fefce9 | Subtle background |
--sda-primitive-color-yellow-3 | #fffab8 | UI element background |
--sda-primitive-color-yellow-4 | #fff394 | Hovered UI element background |
--sda-primitive-color-yellow-5 | #ffe770 | Active / selected UI element background |
--sda-primitive-color-yellow-6 | #f3d768 | Subtle border and separator |
--sda-primitive-color-yellow-7 | #e4c767 | UI element border and focus ring |
--sda-primitive-color-yellow-8 | #d5ae39 | Hovered UI element border |
--sda-primitive-color-yellow-9 | #ffe629 | Solid background — brand / CTA (light scale) |
--sda-primitive-color-yellow-10 | #ffdc00 | Hovered solid background |
--sda-primitive-color-yellow-11 | #9e6c00 | Low-contrast text |
--sda-primitive-color-yellow-12 | #473b1f | High-contrast text |
--sda-primitive-color-amber-1 | #fefdfb | App background |
--sda-primitive-color-amber-2 | #fefbe9 | Subtle background |
--sda-primitive-color-amber-3 | #fff7c2 | UI element background |
--sda-primitive-color-amber-4 | #ffee9c | Hovered UI element background |
--sda-primitive-color-amber-5 | #fbe577 | Active / selected UI element background |
--sda-primitive-color-amber-6 | #f3d673 | Subtle border and separator |
--sda-primitive-color-amber-7 | #e9c162 | UI element border and focus ring |
--sda-primitive-color-amber-8 | #e2a336 | Hovered UI element border |
--sda-primitive-color-amber-9 | #ffc53d | Solid background — brand / CTA / warning |
--sda-primitive-color-amber-10 | #ffba18 | Hovered solid background |
--sda-primitive-color-amber-11 | #ab6400 | Low-contrast text |
--sda-primitive-color-amber-12 | #4f3422 | High-contrast text |
--sda-primitive-color-orange-1 | #fefcfb | App background |
--sda-primitive-color-orange-2 | #fff7ed | Subtle background |
--sda-primitive-color-orange-3 | #ffefd6 | UI element background |
--sda-primitive-color-orange-4 | #ffdfb5 | Hovered UI element background |
--sda-primitive-color-orange-5 | #ffd19a | Active / selected UI element background |
--sda-primitive-color-orange-6 | #ffc182 | Subtle border and separator |
--sda-primitive-color-orange-7 | #f5ae73 | UI element border and focus ring |
--sda-primitive-color-orange-8 | #ec9455 | Hovered UI element border |
--sda-primitive-color-orange-9 | #f76b15 | Solid background — brand / CTA |
--sda-primitive-color-orange-10 | #ef5f00 | Hovered solid background |
--sda-primitive-color-orange-11 | #cc4e00 | Low-contrast text |
--sda-primitive-color-orange-12 | #582d1d | High-contrast text |
--sda-primitive-color-neutral-0 | #ffffff | Blanc pur — fond de surface, texte sur action/danger |
--sda-primitive-color-neutral-50 | #fafafa | Fond au survol — Tailwind neutral.50 (Radix gray.2 = #f9f9f9) |
--sda-primitive-color-neutral-500 | #767676 | Texte désactivé accessible — 4.54:1 sur blanc (WCAG AA). Non présent dans Radix gray. Voir ADR-017. |
--sda-primitive-color-white-1 | rgba(255,255,255,1.00) | Pure white |
--sda-primitive-color-white-2 | rgba(255,255,255,0.97) | White alpha 97% |
--sda-primitive-color-white-3 | rgba(255,255,255,0.93) | White alpha 93% |
--sda-primitive-color-white-4 | rgba(255,255,255,0.90) | White alpha 90% |
--sda-primitive-color-white-5 | rgba(255,255,255,0.88) | White alpha 88% |
--sda-primitive-color-white-6 | rgba(255,255,255,0.85) | White alpha 85% |
--sda-primitive-color-white-7 | rgba(255,255,255,0.80) | White alpha 80% |
--sda-primitive-color-white-8 | rgba(255,255,255,0.75) | White alpha 75% |
--sda-primitive-color-white-9 | rgba(255,255,255,0.60) | White alpha 60% |
--sda-primitive-color-white-10 | rgba(255,255,255,0.52) | White alpha 52% |
--sda-primitive-color-white-11 | rgba(255,255,255,0.39) | White alpha 39% |
--sda-primitive-color-white-12 | rgba(255,255,255,0.18) | White alpha 18% |
--sda-primitive-color-black-1 | rgba(0,0,0,0.05) | Black alpha 5% |
--sda-primitive-color-black-2 | rgba(0,0,0,0.10) | Black alpha 10% |
--sda-primitive-color-black-3 | rgba(0,0,0,0.15) | Black alpha 15% |
--sda-primitive-color-black-4 | rgba(0,0,0,0.20) | Black alpha 20% |
--sda-primitive-color-black-5 | rgba(0,0,0,0.30) | Black alpha 30% |
--sda-primitive-color-black-6 | rgba(0,0,0,0.40) | Black alpha 40% |
--sda-primitive-color-black-7 | rgba(0,0,0,0.50) | Black alpha 50% |
--sda-primitive-color-black-8 | rgba(0,0,0,0.60) | Black alpha 60% |
--sda-primitive-color-black-9 | rgba(0,0,0,0.70) | Black alpha 70% |
--sda-primitive-color-black-10 | rgba(0,0,0,0.75) | Black alpha 75% |
--sda-primitive-color-black-11 | rgba(0,0,0,0.80) | Black alpha 80% |
--sda-primitive-color-black-12 | rgba(0,0,0,0.90) | Black alpha 90% |
Tokens sémantiques
Intentions UX — ce que les agents doivent utiliser pour comprendre la fonction, pas la valeur brute.
| Token CSS | Alias (référence) | Valeur résolue |
|---|---|---|
--sda-semantic-color-action-primary | {primitive.color.blue.11} | #0d74ce |
--sda-semantic-color-action-primary-hover | — | #113264 |
--sda-semantic-color-action-primary-disabled | — | #d9d9d9 |
--sda-semantic-color-feedback-danger | {primitive.color.red.11} | #ce2c31 |
--sda-semantic-color-feedback-danger-subtle | — | #feebec |
--sda-semantic-color-feedback-success | {primitive.color.green.11} | #18794e |
--sda-semantic-color-feedback-info | {primitive.color.blue.11} | #0d74ce |
--sda-semantic-color-background-page | {primitive.color.gray.1} | #fcfcfc |
--sda-semantic-color-background-surface | {primitive.color.neutral.0} | #ffffff |
--sda-semantic-color-background-subtle | {primitive.color.gray.3} | #f0f0f0 |
--sda-semantic-color-background-hover | {primitive.color.neutral.50} | #fafafa |
--sda-semantic-color-text-primary | {primitive.color.gray.12} | #202020 |
--sda-semantic-color-text-secondary | {primitive.color.gray.11} | #646464 |
--sda-semantic-color-text-disabled | {primitive.color.neutral.500} | #767676 |
--sda-semantic-color-text-on-action | — | #ffffff |
--sda-semantic-color-text-on-danger | — | #ffffff |
--sda-semantic-color-border-default | {primitive.color.gray.4} | #e8e8e8 |
--sda-semantic-color-border-focus | {primitive.color.blue.11} | #0d74ce |
--sda-semantic-color-border-danger | {primitive.color.red.11} | #ce2c31 |
--sda-semantic-space-control-padding-x | — | 16px |
--sda-semantic-space-control-padding-y | — | 8px |
--sda-semantic-space-control-gap | {primitive.space.2} | 8px |
--sda-semantic-space-layout-section | {primitive.space.8} | 32px |
--sda-semantic-space-layout-component | {primitive.space.5} | 20px |
--sda-semantic-radius-control | {primitive.radius.sm} | 6px |
--sda-semantic-radius-card | {primitive.radius.md} | 10px |
--sda-semantic-typography-fontFamily | {primitive.fontFamily.base} | 'Atkinson Hyperlegible', system-ui, sans-serif |
--sda-semantic-typography-body-size | {primitive.fontSize.md} | 16px |
--sda-semantic-typography-body-weight | {primitive.fontWeight.regular} | 400 |
--sda-semantic-typography-body-line-height | — | 1.5 |
--sda-semantic-typography-label-size | {primitive.fontSize.sm} | 14px |
--sda-semantic-typography-label-weight | {primitive.fontWeight.medium} | 500 |
--sda-semantic-typography-label-line-height | — | 1.25 |
--sda-semantic-typography-heading-size | {primitive.fontSize.xl} | 24px |
--sda-semantic-typography-heading-weight | {primitive.fontWeight.bold} | 700 |
--sda-semantic-typography-heading-line-height | — | 1.25 |
--sda-semantic-icon-size-inline | {primitive.iconSize.sm} | 16px |
--sda-semantic-icon-size-control | {primitive.iconSize.md} | 20px |
--sda-semantic-icon-size-nav | {primitive.iconSize.lg} | 24px |
Tokens de composant
Contrats institutionnels. Toute modification requiert une approbation formelle.
| Token CSS | Alias sémantique | Valeur résolue |
|---|---|---|
--sda-component-button-primary-background | var(--sda-semantic-color-action-primary) | #0d74ce |
--sda-component-button-primary-background-hover | var(--sda-semantic-color-action-primary-hover) | #113264 |
--sda-component-button-primary-background-disabled | var(--sda-semantic-color-action-primary-disabled) | #d9d9d9 |
--sda-component-button-primary-text | var(--sda-semantic-color-text-on-action) | #ffffff |
--sda-component-button-primary-padding-x | var(--sda-semantic-space-control-padding-x) | 16px |
--sda-component-button-primary-padding-y | var(--sda-semantic-space-control-padding-y) | 8px |
--sda-component-button-primary-radius | var(--sda-semantic-radius-control) | 6px |
--sda-component-button-critical-background | var(--sda-semantic-color-feedback-danger) | #ce2c31 |
--sda-component-button-critical-background-hover | var(--sda-semantic-color-feedback-danger-subtle) | #feebec |
--sda-component-button-critical-text | var(--sda-semantic-color-text-on-danger) | #ffffff |
--sda-component-button-critical-border | var(--sda-semantic-color-feedback-danger) | #ce2c31 |
--sda-component-button-secondary-background | transparent | transparent |
--sda-component-button-secondary-background-hover | var(--sda-semantic-color-background-subtle) | #f0f0f0 |
--sda-component-button-secondary-text | var(--sda-semantic-color-action-primary) | #0d74ce |
--sda-component-button-secondary-border | var(--sda-semantic-color-action-primary) | #0d74ce |
--sda-component-button-ghost-background | transparent | transparent |
--sda-component-button-ghost-background-hover | var(--sda-semantic-color-background-subtle) | #f0f0f0 |
--sda-component-button-ghost-text | var(--sda-semantic-color-action-primary) | #0d74ce |
--sda-component-button-ghost-border | transparent | transparent |
--sda-component-input-default-background | var(--sda-semantic-color-background-surface) | #ffffff |
--sda-component-input-default-border | var(--sda-semantic-color-border-default) | #e8e8e8 |
--sda-component-input-default-border-focus | var(--sda-semantic-color-border-focus) | #0d74ce |
--sda-component-input-default-border-error | var(--sda-semantic-color-border-danger) | #ce2c31 |
--sda-component-input-default-text | var(--sda-semantic-color-text-primary) | #202020 |
--sda-component-input-default-placeholder | var(--sda-semantic-color-text-secondary) | #646464 |
--sda-component-input-default-radius | var(--sda-semantic-radius-control) | 6px |
--sda-component-input-default-padding-x | var(--sda-semantic-space-control-padding-x) | 16px |
--sda-component-input-default-padding-y | var(--sda-semantic-space-control-padding-y) | 8px |
--sda-component-card-default-background | var(--sda-semantic-color-background-surface) | #ffffff |
--sda-component-card-default-border | var(--sda-semantic-color-border-default) | #e8e8e8 |
--sda-component-card-default-radius | var(--sda-semantic-radius-card) | 10px |
--sda-component-card-default-padding | var(--sda-semantic-space-layout-component) | 20px |