Use standard chevron icon for call to actions (#602)

Closes #433. This is
mainly to reduce tech debt.

Note that the color changed to a darker purple. Our color palette in the
Furo theme only has the darker color of purple available, so this is
acceptable.

The icon is also a little smaller. I didn't spend much time trying to
get the original size because the new size seems fine and this custom
directive is not widely used.

src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss

@@ -150,12 +150,11 @@
     position: relative;
     display: inline-block;
     padding: 0.375rem 0.75rem;
-    padding-right: 2em;
 
-    background-size: 8px 14px;
-    background-position: center right 12px;
-    background-image: var(--qiskit-icon-chevron-right-purple);
-    background-repeat: no-repeat;
+    .icon {
+      height: 14px;
+      color: var(--color-brand-primary);
+    }
   }
 
   a::after {

src/qiskit_sphinx_theme/assets/styles/_icons.scss

@@ -24,7 +24,4 @@ body {
   // _admonitions.scss for an explanation of why.
   --icon-warning: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><style type="text/css">.st0{fill:none;}.st1{fill:%23f1c21b;}.st2{fill:black;}</style><rect id="Transparent_Rectangle" class="st0" width="32" height="32"/><path id="Compound_Path" class="st1" d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"/><path id="inner-path" class="st2" d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"/></svg>');
   --icon-failure: url('data:image/svg+xml;charset=utf-8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1 {fill: none;}</style></defs><rect id="inner-path" class="cls-1" x="14.9004" y="7.2004" width="2.1996" height="17.5994" transform="translate(-6.6275 16.0001) rotate(-45)"/><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>');
-
-  // TODO(#433): replace this with using the chevron icon from `icons.html` after dropping Pytorch.
-  --qiskit-icon-chevron-right-purple: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220.3%200.3%208.2%2014.4%22%20enable-background%3D%22new%200.3%200.3%208.2%2014.4%22%20xml%3Aspace%3D%22preserve%22%20sodipodi%3Adocname%3D%22chevron-right-purple.svg%22%20inkscape%3Aversion%3D%221.0.1%20(c497b03c%2C%202020-09-10)%22%3E%3Cmetadata%20id%3D%22metadata847%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%3C%2Fcc%3AWork%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%20id%3D%22defs845%22%3E%3C%2Fdefs%3E%3Csodipodi%3Anamedview%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20borderopacity%3D%221%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20inkscape%3Apageopacity%3D%220%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Awindow-width%3D%221237%22%20inkscape%3Awindow-height%3D%22480%22%20id%3D%22namedview843%22%20showgrid%3D%22false%22%20inkscape%3Azoom%3D%2251.041667%22%20inkscape%3Acx%3D%224.1%22%20inkscape%3Acy%3D%227.2%22%20inkscape%3Awindow-x%3D%220%22%20inkscape%3Awindow-y%3D%2223%22%20inkscape%3Awindow-maximized%3D%220%22%20inkscape%3Acurrent-layer%3D%22cta%22%2F%3E%3Ctitle%20id%3D%22title833%22%3EPage%201%3C%2Ftitle%3E%3Cdesc%20id%3D%22desc835%22%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cg%20id%3D%22desktop%22%3E%3Cg%20id%3D%22_x30_1_x5F_Home%22%20transform%3D%22translate(-864.000000%2C%20-1683.000000)%22%3E%3Cg%20id%3D%22cta%22%20transform%3D%22translate(723%2C1668)%22%3E%3Cpolyline%20id%3D%22Page-1%22%20fill%3D%22none%22%20stroke%3D%22%23ee4c2c%22%20stroke-width%3D%222%22%20points%3D%22142%2C16%20148.1%2C22.5%20142%2C29%22%20style%3D%22stroke%3A%236929C4%3Bstroke-opacity%3A1%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
 }

src/qiskit_sphinx_theme/directives.py

@@ -82,7 +82,10 @@ def run(self) -> list[nodes.Element]:
     <div class="qiskit-call-to-action-item">
         <h3>{header}</h3>
         <p>{description}</p>
-        <a href="{button_link}">{button_text}</a>
+        <a href="{button_link}">
+            {button_text}
+            <i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i>
+        </a>
     </div>
 """
         node = nodes.raw("", html, format="html")