Merge pull request #237 from jbienesdev/logo-fix

docs: convert logo text to vector paths

Author: codebender828

packages/chakra-ui-docs/components/Hero.vue

@@ -57,7 +57,7 @@
           is-external
           href="https://chakra-ui.com/"
         >
-          Looking for React.js verison?
+          Looking for React.js version?
         </CLink>
       </CFlex>
     </CFlex>

packages/chakra-ui-docs/components/Logo.vue

@@ -1,16 +1,34 @@
 <template>
-  <svg :style="{ color: colorMode === 'light' ? 'black' : 'rgba(255, 255, 255, 0.92)' }" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 803.02 216">
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 617 181"
+    xmlns="http://www.w3.org/2000/svg"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  >
+    <path
+      d="M580.425,139.8c-4.32,0 -8.205,-0.777 -11.652,-2.331c-3.448,-1.553 -6.17,-3.854 -8.168,-6.902c-1.997,-3.048 -2.996,-6.806 -2.996,-11.275c0,-3.847 0.71,-7.028 2.131,-9.544c1.42,-2.515 3.358,-4.527 5.815,-6.037c2.456,-1.509 5.23,-2.656 8.323,-3.44c3.092,-0.784 6.296,-1.354 9.61,-1.709c3.995,-0.414 7.235,-0.791 9.721,-1.132c2.486,-0.34 4.299,-0.873 5.438,-1.598c1.139,-0.725 1.709,-1.857 1.709,-3.395l0,-0.267c0,-3.344 -0.992,-5.933 -2.974,-7.768c-1.983,-1.835 -4.839,-2.752 -8.567,-2.752c-3.936,0 -7.051,0.858 -9.344,2.575c-2.294,1.716 -3.84,3.743 -4.639,6.081l-15.004,-2.131c1.184,-4.143 3.137,-7.613 5.86,-10.409c2.722,-2.797 6.052,-4.898 9.987,-6.303c3.936,-1.406 8.286,-2.109 13.051,-2.109c3.285,0 6.555,0.385 9.81,1.154c3.255,0.77 6.229,2.035 8.922,3.796c2.693,1.76 4.861,4.15 6.503,7.168c1.643,3.019 2.464,6.792 2.464,11.32l0,45.632l-15.448,0l0,-9.366l-0.532,0c-0.977,1.894 -2.346,3.662 -4.106,5.304c-1.761,1.643 -3.966,2.959 -6.614,3.951c-2.649,0.991 -5.749,1.487 -9.3,1.487Zm-183.729,0c-4.32,0 -8.204,-0.777 -11.652,-2.331c-3.447,-1.553 -6.17,-3.854 -8.167,-6.902c-1.998,-3.048 -2.997,-6.806 -2.997,-11.275c0,-3.847 0.711,-7.028 2.131,-9.544c1.42,-2.515 3.359,-4.527 5.815,-6.037c2.456,-1.509 5.231,-2.656 8.323,-3.44c3.092,-0.784 6.296,-1.354 9.61,-1.709c3.995,-0.414 7.236,-0.791 9.721,-1.132c2.486,-0.34 4.299,-0.873 5.438,-1.598c1.139,-0.725 1.709,-1.857 1.709,-3.395l0,-0.267c0,-3.344 -0.991,-5.933 -2.974,-7.768c-1.983,-1.835 -4.838,-2.752 -8.567,-2.752c-3.936,0 -7.051,0.858 -9.344,2.575c-2.293,1.716 -3.84,3.743 -4.639,6.081l-15.003,-2.131c1.184,-4.143 3.137,-7.613 5.859,-10.409c2.723,-2.797 6.052,-4.898 9.988,-6.303c3.936,-1.406 8.286,-2.109 13.05,-2.109c3.285,0 6.555,0.385 9.81,1.154c3.255,0.77 6.229,2.035 8.922,3.796c2.693,1.76 4.861,4.15 6.503,7.168c1.643,3.019 2.464,6.792 2.464,11.32l0,45.632l-15.447,0l0,-9.366l-0.533,0c-0.977,1.894 -2.345,3.662 -4.106,5.304c-1.761,1.643 -3.966,2.959 -6.614,3.951c-2.649,0.991 -5.748,1.487 -9.3,1.487Zm-133.671,-0.045c-6.807,0 -12.644,-1.494 -17.512,-4.483c-4.868,-2.989 -8.612,-7.124 -11.231,-12.407c-2.618,-5.282 -3.928,-11.371 -3.928,-18.266c0,-6.925 1.332,-13.043 3.995,-18.355c2.663,-5.312 6.429,-9.455 11.297,-12.429c4.868,-2.974 10.631,-4.461 17.29,-4.461c5.534,0 10.439,1.014 14.715,3.041c4.276,2.027 7.686,4.883 10.231,8.567c2.545,3.684 3.995,7.983 4.351,12.895l-15.359,0c-0.622,-3.285 -2.094,-6.03 -4.417,-8.234c-2.323,-2.205 -5.423,-3.307 -9.299,-3.307c-3.285,0 -6.17,0.88 -8.656,2.641c-2.486,1.761 -4.417,4.284 -5.793,7.568c-1.376,3.285 -2.064,7.221 -2.064,11.808c0,4.646 0.681,8.634 2.042,11.963c1.361,3.329 3.277,5.889 5.748,7.679c2.471,1.79 5.379,2.686 8.723,2.686c2.367,0 4.49,-0.452 6.37,-1.354c1.879,-0.903 3.454,-2.212 4.727,-3.929c1.272,-1.716 2.145,-3.802 2.619,-6.259l15.359,0c-0.385,4.824 -1.806,9.093 -4.262,12.807c-2.456,3.714 -5.8,6.614 -10.032,8.7c-4.231,2.086 -9.203,3.129 -14.914,3.129Zm251.985,-1.331l0,-68.182l15.58,0l0,11.364l0.71,0c1.243,-3.936 3.381,-6.977 6.415,-9.122c3.033,-2.146 6.503,-3.219 10.409,-3.219c0.888,0 1.886,0.037 2.996,0.111c1.11,0.074 2.035,0.185 2.775,0.333l0,14.782c-0.681,-0.237 -1.754,-0.451 -3.219,-0.644c-1.465,-0.192 -2.878,-0.288 -4.239,-0.288c-2.93,0 -5.556,0.629 -7.879,1.886c-2.323,1.258 -4.15,2.997 -5.482,5.216c-1.332,2.219 -1.998,4.779 -1.998,7.679l0,40.084l-16.068,0Zm-195.981,-39.951l0,39.951l-16.068,0l0,-97.882l15.713,0l0,41.286l0.799,0c1.598,-3.848 4.077,-6.888 7.436,-9.122c3.358,-2.235 7.642,-3.352 12.85,-3.352c4.735,0 8.863,0.992 12.385,2.974c3.521,1.983 6.251,4.883 8.19,8.701c1.938,3.817 2.907,8.478 2.907,13.982l0,43.413l-16.069,0l0,-40.927c0,-4.587 -1.176,-8.16 -3.529,-10.72c-2.352,-2.56 -5.645,-3.84 -9.876,-3.84c-2.841,0 -5.379,0.614 -7.613,1.842c-2.234,1.228 -3.98,2.997 -5.238,5.305c-1.258,2.308 -1.887,5.105 -1.887,8.389Zm143.438,-0.843l1.11,0l24.503,-27.388l18.776,0l-26.433,29.431l27.987,38.751l-19.221,0l-20.876,-29.185l-5.846,6.267l0,22.918l-16.069,0l0,-97.878l16.069,-0.004l0,57.088Zm122.131,30.362c3.225,0 6.022,-0.643 8.389,-1.931c2.368,-1.287 4.195,-2.996 5.482,-5.127c1.288,-2.13 1.931,-4.453 1.931,-6.969l0,-8.034c-0.503,0.414 -1.354,0.799 -2.552,1.154c-1.199,0.355 -2.538,0.666 -4.017,0.932c-1.48,0.266 -2.945,0.503 -4.395,0.71c-1.45,0.208 -2.708,0.385 -3.773,0.533c-2.397,0.326 -4.542,0.858 -6.436,1.598c-1.894,0.74 -3.389,1.768 -4.484,3.085c-1.095,1.317 -1.642,3.011 -1.642,5.083c0,2.959 1.08,5.193 3.24,6.702c2.161,1.51 4.913,2.264 8.257,2.264Zm-183.729,0c3.226,0 6.022,-0.643 8.39,-1.931c2.367,-1.287 4.194,-2.996 5.482,-5.127c1.287,-2.13 1.931,-4.453 1.931,-6.969l0,-8.034c-0.504,0.414 -1.354,0.799 -2.553,1.154c-1.198,0.355 -2.537,0.666 -4.017,0.932c-1.48,0.266 -2.945,0.503 -4.395,0.71c-1.45,0.208 -2.707,0.385 -3.773,0.533c-2.397,0.326 -4.542,0.858 -6.436,1.598c-1.894,0.74 -3.389,1.768 -4.483,3.085c-1.095,1.317 -1.643,3.011 -1.643,5.083c0,2.959 1.08,5.193 3.241,6.702c2.16,1.51 4.912,2.264 8.256,2.264Z"
+      style="fill:2d3748;"
+      :fill="fillColor"
+    />
+    <path
+      d="M90.354,0.171c-49.372,0 -90,40.628 -90,90c0,49.373 40.628,90 90,90c49.373,0 90,-40.627 90,-90c0,-49.372 -40.627,-90 -90,-90Zm-28.2,144.167l24.417,-45l-28.209,0.541l54.684,-63.825l-23.625,46.617l33.208,-1.542l-60.475,63.209Z"
+      style="fill:url(#_Linear1);"
+    />
     <defs>
-      <linearGradient id="linear-gradient" y1="108" x2="216" y2="108" gradientUnits="userSpaceOnUse">
-        <stop offset="0" stop-color="#41b883" />
-        <stop offset="1" stop-color="#78ffbe" />
+      <linearGradient
+        id="_Linear1"
+        x1="0"
+        y1="0"
+        x2="1"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(180,-0.741309,0.741309,180,0.354053,90.2243)"
+      >
+        <stop offset="0" style="stop-color:#41b883;stop-opacity:1" />
+        <stop offset="1" style="stop-color:#78ffbe;stop-opacity:1" />
       </linearGradient>
     </defs>
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" fill="currentColor" data-name="Layer 1"><text class="cls-1" transform="translate(273.17 150.87)">chak<tspan class="cls-2" x="375.71" y="0">r</tspan><tspan x="438" y="0">a</tspan></text>
-        <path class="cls-3" d="M108,0A108,108,0,1,0,216,108,108,108,0,0,0,108,0ZM74.16,173,103.46,119l-33.85.65,65.62-76.59L106.88,99l39.85-1.85Z" />
-      </g>
-    </g>
   </svg>
 </template>
 
@@ -19,25 +37,9 @@ export default {
   name: 'ChakraUILogo',
   inject: ['$chakraColorMode'],
   computed: {
-    colorMode () {
-      return this.$chakraColorMode()
+    fillColor () {
+      return this.$chakraColorMode() === 'light' ? '#000000' : 'rgba(255, 255, 255, 0.92)'
     }
   }
 }
 </script>
-
-<style>
-  .cls-1 {
-    font-size: 158.29px;
-    font-family: Inter-Bold, Inter;
-    font-weight: 700;
-  }
-
-  .cls-2 {
-    letter-spacing: -0.02em;
-  }
-
-  .cls-3 {
-    fill: url(#linear-gradient);
-  }
-</style>