vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update ColorsDoc.vue

pull/3976/head
Tuğçe Küçükoğlu 2023-04-18 15:22:33 +03:00
parent 304acf39cd
commit b90a04e514
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
doc/accessibility/ColorsDoc.vue
View File

@ -5,10 +5,10 @@
<p>Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="borderradius: 10px">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="border-radius: 10px">
<span class="text-white">GOOD</span>
</div>
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="borderradius: 10px">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="border-radius: 10px">
<span class="text-white">BAD</span>
</div>
</div>
@ -17,7 +17,7 @@
<p>Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
<div class="flex">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="borderradius: 10px">
<div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="border-radius: 10px">
<span class="text-blue-500">VIBRATE</span>
</div>
</div>
@ -26,11 +26,11 @@
<p>Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
<div class="flex">
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
<span class="text-indigo-500">Indigo 500</span>
<i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
</div>
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
<div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
<span class="text-indigo-200">Indigo 200</span>
<i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
</div>