Add colors to diagram

daangn · Oct 18, 2024 · 44711a2 · 44711a2
1 parent 995d8fd
commit 44711a2
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 129 deletions.
diff --git a/docs/components/diagrams/ActivityDiagram.tsx b/docs/components/diagrams/ActivityDiagram.tsx
@@ -39,6 +39,7 @@ export const ActivityDiagram = () => (
         clip-rule="evenodd"
         d="M91 14C86.5817 14 83 17.5817 83 22V54C83 58.4183 86.5817 62 91 62H257C261.418 62 265 58.4183 265 54V22C265 17.5817 261.418 14 257 14H91ZM173.953 43H172.281V34.5156H173.953V43ZM173.125 33.2031C172.547 33.2109 172.07 32.7656 172.062 32.2188C172.07 31.6719 172.547 31.2344 173.125 31.2344C173.695 31.2344 174.172 31.6719 174.172 32.2188C174.172 32.7656 173.695 33.2109 173.125 33.2031ZM149.609 40.0156L148.578 43H146.75L150.812 31.6875H152.797L156.875 43H155.047L154.016 40.0156H149.609ZM151.766 33.75L150.102 38.5781H153.516L151.844 33.75H151.766ZM165.109 40.3125C164.93 41.9609 163.625 43.1719 161.625 43.1719C159.148 43.1719 157.648 41.3516 157.656 38.7969C157.648 36.2109 159.203 34.4062 161.594 34.4062C163.531 34.4062 164.93 35.5469 165.109 37.2656H163.484C163.312 36.4688 162.68 35.8047 161.625 35.7969C160.25 35.8047 159.328 36.9453 159.328 38.75C159.328 40.6094 160.227 41.7578 161.625 41.75C162.57 41.7578 163.273 41.2266 163.484 40.3125H165.109ZM170.656 34.5156H168.922V32.4844H167.266V34.5156H166.016V35.8438H167.266V40.8438C167.25 42.3906 168.43 43.1094 169.734 43.1094C170.195 43.1094 170.555 43.0781 170.781 43.0469V41.5938C170.547 41.6172 170.18 41.6406 169.938 41.6406C169.398 41.6328 168.93 41.4609 168.922 40.5V35.8438H170.656V34.5156ZM183.266 34.5156H181.469L179.328 41.0312H179.25L177.109 34.5156H175.312L178.391 43H180.188L183.266 34.5156ZM186.297 43H184.625V34.5156H186.297V43ZM185.469 33.2031C184.891 33.2109 184.414 32.7656 184.406 32.2188C184.414 31.6719 184.891 31.2344 185.469 31.2344C186.039 31.2344 186.516 31.6719 186.516 32.2188C186.516 32.7656 186.039 33.2109 185.469 33.2031ZM192.297 34.5156H190.562V32.4844H188.906V34.5156H187.656V35.8438H188.906V40.8438C188.891 42.3906 190.07 43.1094 191.375 43.1094C191.836 43.1094 192.195 43.0781 192.422 43.0469V41.5938C192.188 41.6172 191.82 41.6406 191.578 41.6406C191.039 41.6328 190.57 41.4609 190.562 40.5V35.8438H192.297V34.5156ZM197.703 44.125C197.211 45.4688 196.352 46.1797 194.953 46.1875C194.609 46.1797 194.273 46.1719 194.062 46.1406V44.75C194.214 44.7626 194.457 44.7701 194.668 44.7767L194.812 44.7812C195.328 44.7734 195.758 44.7422 196.156 43.6719L196.359 43.1094L193.25 34.5156H195.031L197.172 41.0938H197.266L199.406 34.5156H201.203L197.703 44.125Z"
         fill="currentColor"
+        className="text-primary"
       />
       <path
         d="M79.5781 169L80.6094 166.016H85.0156L86.0469 169H87.875L83.7969 157.688H81.8125L77.75 169H79.5781ZM81.1016 164.578L82.7656 159.75H82.8438L84.5156 164.578H81.1016ZM92.625 169.172C94.625 169.172 95.9297 167.961 96.1094 166.312H94.4844C94.2734 167.227 93.5703 167.758 92.625 167.75C91.2266 167.758 90.3281 166.609 90.3281 164.75C90.3281 162.945 91.25 161.805 92.625 161.797C93.6797 161.805 94.3125 162.469 94.4844 163.266H96.1094C95.9297 161.547 94.5312 160.406 92.5938 160.406C90.2031 160.406 88.6484 162.211 88.6562 164.797C88.6484 167.352 90.1484 169.172 92.625 169.172ZM101.656 160.516H99.9219V158.484H98.2656V160.516H97.0156V161.844H98.2656V166.844C98.25 168.391 99.4297 169.109 100.734 169.109C101.195 169.109 101.555 169.078 101.781 169.047V167.594C101.547 167.617 101.18 167.641 100.938 167.641C100.398 167.633 99.9297 167.461 99.9219 166.5V161.844H101.656V160.516ZM103.281 169H104.953V160.516H103.281V169ZM103.062 158.219C103.07 158.766 103.547 159.211 104.125 159.203C104.695 159.211 105.172 158.766 105.172 158.219C105.172 157.672 104.695 157.234 104.125 157.234C103.547 157.234 103.07 157.672 103.062 158.219ZM114.266 160.516H112.469L110.328 167.031H110.25L108.109 160.516H106.312L109.391 169H111.188L114.266 160.516ZM115.625 169H117.297V160.516H115.625V169ZM115.406 158.219C115.414 158.766 115.891 159.211 116.469 159.203C117.039 159.211 117.516 158.766 117.516 158.219C117.516 157.672 117.039 157.234 116.469 157.234C115.891 157.234 115.414 157.672 115.406 158.219ZM123.297 160.516H121.562V158.484H119.906V160.516H118.656V161.844H119.906V166.844C119.891 168.391 121.07 169.109 122.375 169.109C122.836 169.109 123.195 169.078 123.422 169.047V167.594C123.188 167.617 122.82 167.641 122.578 167.641C122.039 167.633 121.57 167.461 121.562 166.5V161.844H123.297V160.516ZM125.953 172.188C127.352 172.18 128.211 171.469 128.703 170.125L132.203 160.516H130.406L128.266 167.094H128.172L126.031 160.516H124.25L127.359 169.109L127.156 169.672C126.758 170.742 126.328 170.773 125.812 170.781C125.578 170.773 125.25 170.766 125.062 170.75V172.141C125.273 172.172 125.609 172.18 125.953 172.188Z"
@@ -51,13 +52,15 @@ export const ActivityDiagram = () => (
       <circle
         cx="351.5"
         cy="38"
-        r="3"
+        r="4"
         transform="rotate(-180 351.5 38)"
         stroke="currentColor"
+        className="text-primary"
       />
       <path
         d="M264.646 37.6464C264.451 37.8417 264.451 38.1583 264.646 38.3535L267.828 41.5355C268.024 41.7308 268.34 41.7308 268.536 41.5355C268.731 41.3403 268.731 41.0237 268.536 40.8284L265.707 38L268.536 35.1716C268.731 34.9763 268.731 34.6597 268.536 34.4645C268.34 34.2692 268.024 34.2692 267.828 34.4645L264.646 37.6464ZM348.5 37.5L265 37.5L265 38.5L348.5 38.5L348.5 37.5Z"
         fill="currentColor"
+        className="text-primary"
       />
     </svg>
   </div>

diff --git a/docs/components/diagrams/EffectHookDiagram.tsx b/docs/components/diagrams/EffectHookDiagram.tsx
@@ -39,6 +39,7 @@ export const EffectHookDiagram = () => (
       clip-rule="evenodd"
       d="M339 129C366.614 129 389 106.614 389 79C389 51.3858 366.614 29 339 29C311.386 29 289 51.3858 289 79C289 106.614 311.386 129 339 129ZM331.578 76.375H329.844C329.57 74.9141 328.359 74.1016 326.922 74.1094C324.969 74.1016 323.523 75.6016 323.516 78.3438C323.523 81.1016 324.977 82.5859 326.922 82.5781C328.344 82.5859 329.547 81.7891 329.844 80.3438L331.578 80.3594C331.219 82.5938 329.398 84.1562 326.906 84.1562C323.961 84.1562 321.812 81.9609 321.812 78.3438C321.812 74.7266 323.977 72.5312 326.906 72.5312C329.297 72.5312 331.195 73.9453 331.578 76.375ZM340.844 79.7969C340.844 82.4219 339.281 84.1719 336.891 84.1719C334.484 84.1719 332.914 82.4219 332.922 79.7969C332.914 77.1562 334.484 75.4062 336.891 75.4062C339.281 75.4062 340.844 77.1562 340.844 79.7969ZM336.891 76.7812C335.336 76.7891 334.594 78.1719 334.594 79.7969C334.594 81.4141 335.336 82.7812 336.891 82.7812C338.422 82.7812 339.156 81.4141 339.156 79.7969C339.156 78.1719 338.422 76.7891 336.891 76.7812ZM342.484 84H344.156V78.8281C344.156 77.7188 345.016 76.9141 346.172 76.9219C346.516 76.9141 346.906 76.9844 347.047 77.0156V75.4219C346.875 75.4062 346.547 75.3828 346.344 75.3906C345.352 75.3828 344.5 75.9531 344.188 76.8594H344.094V75.5156H342.484V84ZM355.219 81.875C354.844 83.25 353.539 84.1719 351.672 84.1719C349.172 84.1719 347.633 82.4453 347.641 79.8125C347.633 77.2031 349.195 75.4062 351.562 75.4062C353.492 75.4062 355.328 76.6016 355.328 79.6719V80.2656H349.297C349.344 81.8828 350.297 82.7969 351.688 82.7969C352.633 82.7969 353.25 82.3906 353.531 81.875H355.219ZM351.578 76.7812C350.242 76.7734 349.375 77.8203 349.305 79.0156H353.688C353.688 77.7266 352.852 76.7734 351.578 76.7812Z"
       fill="currentColor"
+      className="text-primary"
     />
     <circle cx="535" cy="79" r="49.5" stroke="currentColor" />
     <path
@@ -72,6 +73,7 @@ export const EffectHookDiagram = () => (
     <path
       d="M204.156 103H205.875V99.0312H208.188C210.812 99.0312 212.109 97.4453 212.109 95.3594C212.109 93.2656 210.82 91.6875 208.188 91.6875H204.156V103ZM205.875 97.5625V93.1562H208.016C209.68 93.1641 210.375 94.0781 210.375 95.3594C210.375 96.6328 209.68 97.5703 208.016 97.5625H205.875ZM213.781 103H215.453V97.8281C215.453 96.7188 216.312 95.9141 217.469 95.9219C217.812 95.9141 218.203 95.9844 218.344 96.0156V94.4219C218.172 94.4062 217.844 94.3828 217.641 94.3906C216.648 94.3828 215.797 94.9531 215.484 95.8594H215.391V94.5156H213.781V103ZM222.969 103.172C224.836 103.172 226.141 102.25 226.516 100.875H224.828C224.547 101.391 223.93 101.797 222.984 101.797C221.594 101.797 220.641 100.883 220.594 99.2656H226.625V98.6719C226.625 95.6016 224.789 94.4062 222.859 94.4062C220.492 94.4062 218.93 96.2031 218.938 98.8125C218.93 101.445 220.469 103.172 222.969 103.172ZM220.602 98.0156C220.672 96.8203 221.539 95.7734 222.875 95.7812C224.148 95.7734 224.984 96.7266 224.984 98.0156H220.602ZM233.281 97.5H228.266V98.9375H233.281V97.5ZM238.953 103.172C240.82 103.172 242.125 102.25 242.5 100.875H240.812C240.531 101.391 239.914 101.797 238.969 101.797C237.578 101.797 236.625 100.883 236.578 99.2656H242.609V98.6719C242.609 95.6016 240.773 94.4062 238.844 94.4062C236.477 94.4062 234.914 96.2031 234.922 98.8125C234.914 101.445 236.453 103.172 238.953 103.172ZM236.586 98.0156C236.656 96.8203 237.523 95.7734 238.859 95.7812C240.133 95.7734 240.969 96.7266 240.969 98.0156H236.586ZM248.312 94.5156H246.484V93.7812C246.484 92.9531 246.898 92.5938 247.781 92.5938C247.93 92.5938 248.172 92.6094 248.484 92.6562V91.2656C248.156 91.2031 247.742 91.1562 247.344 91.1562C245.789 91.1562 244.82 92.0156 244.812 93.5312V94.5156H243.5V95.8438H244.812V103H246.484V95.8438H248.312V94.5156ZM253.875 94.5156H252.047V93.7812C252.047 92.9531 252.461 92.5938 253.344 92.5938C253.492 92.5938 253.734 92.6094 254.047 92.6562V91.2656C253.719 91.2031 253.305 91.1562 252.906 91.1562C251.352 91.1562 250.383 92.0156 250.375 93.5312V94.5156H249.062V95.8438H250.375V103H252.047V95.8438H253.875V94.5156ZM258.703 103.172C260.57 103.172 261.875 102.25 262.25 100.875H260.562C260.281 101.391 259.664 101.797 258.719 101.797C257.328 101.797 256.375 100.883 256.328 99.2656H262.359V98.6719C262.359 95.6016 260.523 94.4062 258.594 94.4062C256.227 94.4062 254.664 96.2031 254.672 98.8125C254.664 101.445 256.203 103.172 258.703 103.172ZM256.336 98.0156C256.406 96.8203 257.273 95.7734 258.609 95.7812C259.883 95.7734 260.719 96.7266 260.719 98.0156H256.336ZM267.609 103.172C269.609 103.172 270.914 101.961 271.094 100.312H269.469C269.258 101.227 268.555 101.758 267.609 101.75C266.211 101.758 265.312 100.609 265.312 98.75C265.312 96.9453 266.234 95.8047 267.609 95.7969C268.664 95.8047 269.297 96.4688 269.469 97.2656H271.094C270.914 95.5469 269.516 94.4062 267.578 94.4062C265.188 94.4062 263.633 96.2109 263.641 98.7969C263.633 101.352 265.133 103.172 267.609 103.172ZM276.641 94.5156H274.906V92.4844H273.25V94.5156H272V95.8438H273.25V100.844C273.234 102.391 274.414 103.109 275.719 103.109C276.18 103.109 276.539 103.078 276.766 103.047V101.594C276.531 101.617 276.164 101.641 275.922 101.641C275.383 101.633 274.914 101.461 274.906 100.5V95.8438H276.641V94.5156Z"
       fill="currentColor"
+      className="text-primary"
     />
     <path
       d="M42.4219 91.6875V98.9844C42.4219 100.516 41.3672 101.617 39.6562 101.625C37.9375 101.617 36.8672 100.516 36.875 98.9844V91.6875H35.1562V99.125C35.1484 101.5 36.9297 103.188 39.6562 103.188C42.3594 103.188 44.1484 101.5 44.1406 99.125V91.6875H42.4219ZM51.0781 96.8281H52.6875C52.5234 95.3672 51.3438 94.4062 49.4531 94.4062C47.4844 94.4062 46.1719 95.4453 46.1719 96.9531C46.1719 98.125 46.9688 98.9453 48.5 99.2812L49.8281 99.5625C50.7266 99.7734 51.1328 100.125 51.1406 100.672C51.1328 101.383 50.4375 101.836 49.3594 101.828C48.3516 101.836 47.7734 101.453 47.625 100.688H45.9219C46.1328 102.266 47.3359 103.172 49.375 103.172C51.5391 103.172 52.8359 102.078 52.8438 100.547C52.8359 99.3438 52.0781 98.6016 50.5156 98.25L49.1719 97.9375C48.2344 97.7188 47.8359 97.3594 47.8438 96.8594C47.8359 96.2109 48.5156 95.7188 49.4688 95.7188C50.3906 95.7188 50.9219 96.1562 51.0781 96.8281ZM58.125 103.172C59.9922 103.172 61.2969 102.25 61.6719 100.875H59.9844C59.7031 101.391 59.0859 101.797 58.1406 101.797C56.75 101.797 55.7969 100.883 55.75 99.2656H61.7812V98.6719C61.7812 95.6016 59.9453 94.4062 58.0156 94.4062C55.6484 94.4062 54.0859 96.2031 54.0938 98.8125C54.0859 101.445 55.625 103.172 58.125 103.172ZM55.7578 98.0156C55.8281 96.8203 56.6953 95.7734 58.0312 95.7812C59.3047 95.7734 60.1406 96.7266 60.1406 98.0156H55.7578ZM63.4375 103H65.1094V97.8281C65.1094 96.7188 65.9688 95.9141 67.125 95.9219C67.4688 95.9141 67.8594 95.9844 68 96.0156V94.4219C67.8281 94.4062 67.5 94.3828 67.2969 94.3906C66.3047 94.3828 65.4531 94.9531 65.1406 95.8594H65.0469V94.5156H63.4375V103Z"
@@ -80,6 +82,7 @@ export const EffectHookDiagram = () => (
     <path
       d="M597.156 103H598.875V99.0312H601.188C603.812 99.0312 605.109 97.4453 605.109 95.3594C605.109 93.2656 603.82 91.6875 601.188 91.6875H597.156V103ZM598.875 97.5625V93.1562H601.016C602.68 93.1641 603.375 94.0781 603.375 95.3594C603.375 96.6328 602.68 97.5703 601.016 97.5625H598.875ZM610.266 103.172C612.656 103.172 614.219 101.422 614.219 98.7969C614.219 96.1562 612.656 94.4062 610.266 94.4062C607.859 94.4062 606.289 96.1562 606.297 98.7969C606.289 101.422 607.859 103.172 610.266 103.172ZM607.969 98.7969C607.969 97.1719 608.711 95.7891 610.266 95.7812C611.797 95.7891 612.531 97.1719 612.531 98.7969C612.531 100.414 611.797 101.781 610.266 101.781C608.711 101.781 607.969 100.414 607.969 98.7969ZM620.625 96.8281H622.234C622.07 95.3672 620.891 94.4062 619 94.4062C617.031 94.4062 615.719 95.4453 615.719 96.9531C615.719 98.125 616.516 98.9453 618.047 99.2812L619.375 99.5625C620.273 99.7734 620.68 100.125 620.688 100.672C620.68 101.383 619.984 101.836 618.906 101.828C617.898 101.836 617.32 101.453 617.172 100.688H615.469C615.68 102.266 616.883 103.172 618.922 103.172C621.086 103.172 622.383 102.078 622.391 100.547C622.383 99.3438 621.625 98.6016 620.062 98.25L618.719 97.9375C617.781 97.7188 617.383 97.3594 617.391 96.8594C617.383 96.2109 618.062 95.7188 619.016 95.7188C619.938 95.7188 620.469 96.1562 620.625 96.8281ZM627.984 94.5156H626.25V92.4844H624.594V94.5156H623.344V95.8438H624.594V100.844C624.578 102.391 625.758 103.109 627.062 103.109C627.523 103.109 627.883 103.078 628.109 103.047V101.594C627.875 101.617 627.508 101.641 627.266 101.641C626.727 101.633 626.258 101.461 626.25 100.5V95.8438H627.984V94.5156ZM634.312 97.5H629.297V98.9375H634.312V97.5ZM639.984 103.172C641.852 103.172 643.156 102.25 643.531 100.875H641.844C641.562 101.391 640.945 101.797 640 101.797C638.609 101.797 637.656 100.883 637.609 99.2656H643.641V98.6719C643.641 95.6016 641.805 94.4062 639.875 94.4062C637.508 94.4062 635.945 96.2031 635.953 98.8125C635.945 101.445 637.484 103.172 639.984 103.172ZM637.617 98.0156C637.688 96.8203 638.555 95.7734 639.891 95.7812C641.164 95.7734 642 96.7266 642 98.0156H637.617ZM649.344 94.5156H647.516V93.7812C647.516 92.9531 647.93 92.5938 648.812 92.5938C648.961 92.5938 649.203 92.6094 649.516 92.6562V91.2656C649.188 91.2031 648.773 91.1562 648.375 91.1562C646.82 91.1562 645.852 92.0156 645.844 93.5312V94.5156H644.531V95.8438H645.844V103H647.516V95.8438H649.344V94.5156ZM654.906 94.5156H653.078V93.7812C653.078 92.9531 653.492 92.5938 654.375 92.5938C654.523 92.5938 654.766 92.6094 655.078 92.6562V91.2656C654.75 91.2031 654.336 91.1562 653.938 91.1562C652.383 91.1562 651.414 92.0156 651.406 93.5312V94.5156H650.094V95.8438H651.406V103H653.078V95.8438H654.906V94.5156ZM659.734 103.172C661.602 103.172 662.906 102.25 663.281 100.875H661.594C661.312 101.391 660.695 101.797 659.75 101.797C658.359 101.797 657.406 100.883 657.359 99.2656H663.391V98.6719C663.391 95.6016 661.555 94.4062 659.625 94.4062C657.258 94.4062 655.695 96.2031 655.703 98.8125C655.695 101.445 657.234 103.172 659.734 103.172ZM657.367 98.0156C657.438 96.8203 658.305 95.7734 659.641 95.7812C660.914 95.7734 661.75 96.7266 661.75 98.0156H657.367ZM668.641 103.172C670.641 103.172 671.945 101.961 672.125 100.312H670.5C670.289 101.227 669.586 101.758 668.641 101.75C667.242 101.758 666.344 100.609 666.344 98.75C666.344 96.9453 667.266 95.8047 668.641 95.7969C669.695 95.8047 670.328 96.4688 670.5 97.2656H672.125C671.945 95.5469 670.547 94.4062 668.609 94.4062C666.219 94.4062 664.664 96.2109 664.672 98.7969C664.664 101.352 666.164 103.172 668.641 103.172ZM677.672 94.5156H675.938V92.4844H674.281V94.5156H673.031V95.8438H674.281V100.844C674.266 102.391 675.445 103.109 676.75 103.109C677.211 103.109 677.57 103.078 677.797 103.047V101.594C677.562 101.617 677.195 101.641 676.953 101.641C676.414 101.633 675.945 101.461 675.938 100.5V95.8438H677.672V94.5156Z"
       fill="currentColor"
+      className="text-primary"
     />
   </svg>
 );