Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Feb 8, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions scss/_base_icon-definitions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 14 additions & 0 deletions scss/_patterns_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions scss/standalone/patterns_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
29 changes: 21 additions & 8 deletions templates/docs/examples/patterns/icons/icons-social.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}