Update Twitter/X icon and add support for dark theme to GitHub icon

canonical · Feb 8, 2024 · 46abb7c · 46abb7c
1 parent 32a10a0
commit 46abb7c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/scss/_base_icon-definitions.scss b/scss/_base_icon-definitions.scss
@@ -90,12 +90,12 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40'%3E%3Cdefs%3E%3Cpath id='a' d='M.002.002H40v39.755H.002z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%231877F2' d='M40 20C40 8.954 31.046 0 20 0S0 8.954 0 20c0 9.983 7.314 18.257 16.875 19.757V25.781h-5.078V20h5.078v-4.406c0-5.013 2.986-7.781 7.554-7.781 2.188 0 4.477.39 4.477.39v4.922h-2.522c-2.484 0-3.259 1.542-3.259 3.123V20h5.547l-.887 5.781h-4.66v13.976C32.686 38.257 40 29.983 40 20' mask='url(%23b)'/%3E%3Cpath fill='%23FFF' d='M27.785 25.781L28.672 20h-5.547v-3.752c0-1.581.775-3.123 3.26-3.123h2.521V8.203s-2.289-.39-4.477-.39c-4.568 0-7.554 2.768-7.554 7.78V20h-5.078v5.781h5.078v13.976a20.15 20.15 0 006.25 0V25.781h4.66'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-github {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187 182'%3E%3Cpath d='M93.04.43C41.669.43.013 42.079.013 93.457c0 41.103 26.655 75.973 63.617 88.273 4.649.86 6.356-2.02 6.356-4.48 0-2.21-.086-9.54-.126-17.32-25.88 5.63-31.341-10.97-31.341-10.97-4.232-10.75-10.329-13.61-10.329-13.61-8.441-5.78.636-5.66.636-5.66 9.341.66 14.26 9.59 14.26 9.59 8.297 14.22 21.762 10.11 27.071 7.73.835-6.01 3.246-10.12 5.906-12.44C55.4 132.22 33.68 124.24 33.68 88.598c0-10.156 3.634-18.454 9.585-24.97-.966-2.344-4.15-11.804.901-24.618 0 0 7.812-2.501 25.589 9.535 7.421-2.061 15.379-3.095 23.284-3.13 7.901.035 15.871 1.069 23.301 3.13 17.76-12.036 25.56-9.535 25.56-9.535 5.06 12.814 1.88 22.274.91 24.618 5.97 6.515 9.58 14.814 9.58 24.97 0 35.732-21.77 43.602-42.48 45.902 3.34 2.89 6.31 8.55 6.31 17.23 0 12.44-.11 22.46-.11 25.52 0 2.48 1.68 5.38 6.39 4.47 36.94-12.32 63.57-47.18 63.57-88.264 0-51.378-41.65-93.027-93.03-93.027' fill='%231B1817' fill-rule='evenodd'/%3E%3C/svg%3E");
+@mixin vf-icon-github($color: #171515) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187 182'%3E%3Cpath d='M93.04.43C41.669.43.013 42.079.013 93.457c0 41.103 26.655 75.973 63.617 88.273 4.649.86 6.356-2.02 6.356-4.48 0-2.21-.086-9.54-.126-17.32-25.88 5.63-31.341-10.97-31.341-10.97-4.232-10.75-10.329-13.61-10.329-13.61-8.441-5.78.636-5.66.636-5.66 9.341.66 14.26 9.59 14.26 9.59 8.297 14.22 21.762 10.11 27.071 7.73.835-6.01 3.246-10.12 5.906-12.44C55.4 132.22 33.68 124.24 33.68 88.598c0-10.156 3.634-18.454 9.585-24.97-.966-2.344-4.15-11.804.901-24.618 0 0 7.812-2.501 25.589 9.535 7.421-2.061 15.379-3.095 23.284-3.13 7.901.035 15.871 1.069 23.301 3.13 17.76-12.036 25.56-9.535 25.56-9.535 5.06 12.814 1.88 22.274.91 24.618 5.97 6.515 9.58 14.814 9.58 24.97 0 35.732-21.77 43.602-42.48 45.902 3.34 2.89 6.31 8.55 6.31 17.23 0 12.44-.11 22.46-.11 25.52 0 2.48 1.68 5.38 6.39 4.47 36.94-12.32 63.57-47.18 63.57-88.264 0-51.378-41.65-93.027-93.03-93.027' fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-twitter {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none'%3E%3Ccircle cx='20' cy='20' r='20' fill='%231DA1F2'/%3E%3Cpath fill='%23FFF' d='M16.34 30.55c8.87 0 13.72-7.35 13.72-13.72 0-.21 0-.42-.01-.62.94-.68 1.76-1.53 2.41-2.5-.86.38-1.79.64-2.77.76 1-.6 1.76-1.54 2.12-2.67-.93.55-1.96.95-3.06 1.17a4.799 4.799 0 00-3.52-1.52c-2.66 0-4.82 2.16-4.82 4.82 0 .38.04.75.13 1.1a13.68 13.68 0 01-9.94-5.04c-.41.71-.65 1.54-.65 2.42a4.8 4.8 0 002.15 4.01c-.79-.02-1.53-.24-2.18-.6v.06c0 2.34 1.66 4.28 3.87 4.73a4.807 4.807 0 01-2.18.08 4.815 4.815 0 004.5 3.35 9.693 9.693 0 01-7.14 1.99c2.11 1.38 4.65 2.18 7.37 2.18'/%3E%3C/g%3E%3C/svg%3E");
+@mixin vf-icon-twitter($color: #000) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1227' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894L144.011 79.6944h162.604L611.412 515.685l47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-instagram {

diff --git a/scss/_patterns_icons.scss b/scss/_patterns_icons.scss
@@ -348,13 +348,27 @@
   .p-icon--github {
     @extend %social-icon;
     @include vf-icon-github;
+
+    [class*='--dark'] &,
+    // we use `is-dark` here, instead of `is-light` to match how all other components work with themes,
+    // but other icons use `is-light` that we are going to deprecate
+    &.is-dark {
+      @include vf-icon-github($color-x-light);
+    }
   }
 }
 
 @mixin vf-p-icon-twitter {
   .p-icon--twitter {
     @extend %social-icon;
     @include vf-icon-twitter;
+
+    [class*='--dark'] &,
+    // we use `is-dark` here, instead of `is-light` to match how all other components work with themes,
+    // but other icons use `is-light` that we are going to deprecate
+    &.is-dark {
+      @include vf-icon-twitter($color-x-light);
+    }
   }
 }
 

diff --git a/scss/standalone/patterns_icons.scss b/scss/standalone/patterns_icons.scss
@@ -5,3 +5,6 @@
 
 // for spin animation on the spinner icon
 @include vf-u-animations;
+// for dark strip background
+@include vf-p-strip;
+@include vf-u-padding-collapse;
diff --git a/templates/docs/examples/patterns/icons/icons-social.html b/templates/docs/examples/patterns/icons/icons-social.html
@@ -4,12 +4,25 @@
 {% block standalone_css %}patterns_icons{% endblock %}
 
 {% block content %}
-<i class="p-icon--facebook"></i>
-<i class="p-icon--twitter"></i>
-<i class="p-icon--instagram"></i>
-<i class="p-icon--linkedin"></i>
-<i class="p-icon--youtube"></i>
-<i class="p-icon--github"></i>
-<i class="p-icon--rss"></i>
-<i class="p-icon--email"></i>
+<div class="p-strip is-shallow">
+    <i class="p-icon--facebook"></i>
+    <i class="p-icon--twitter"></i>
+    <i class="p-icon--instagram"></i>
+    <i class="p-icon--linkedin"></i>
+    <i class="p-icon--youtube"></i>
+    <i class="p-icon--github"></i>
+    <i class="p-icon--rss"></i>
+    <i class="p-icon--email"></i>
+
+</div>
+<div class="p-strip--dark is-shallow">
+    <i class="p-icon--facebook"></i>
+    <i class="p-icon--twitter is-dark"></i>
+    <i class="p-icon--instagram"></i>
+    <i class="p-icon--linkedin"></i>
+    <i class="p-icon--youtube"></i>
+    <i class="p-icon--github is-dark"></i>
+    <i class="p-icon--rss"></i>
+    <i class="p-icon--email"></i>
+</div>
 {% endblock %}