customize feather buttons, mainly for dark mode

DadTo2 · Aug 28, 2021 · 3912bde · 3912bde
1 parent a5090c0
commit 3912bde
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/assets/css/_feather-custom.scss b/assets/css/_feather-custom.scss
@@ -0,0 +1,60 @@
+@media (prefers-color-scheme: dark) {
+  /* feather buttons */
+  .Button,
+  .Button:visited {
+    background-color: black;
+    border: 1px solid var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+  .Button:focus,
+  .Button.is-focus {
+    background: black;
+    border-color: var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+  .Button:hover,
+  .Button.is-hover {
+    background-color: var(--tw-color-gray-900-experimental);
+    border-color: var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+  .Button:active,
+  .Button.is-active {
+    background-color: var(--tw-color-gray-900-experimental);
+    border-color: var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+
+  .Button.Button--tertiary,
+  .Button.Button--tertiary:visited,
+  .ButtonGroup--tertiary > .Button,
+  .ButtonGroup--tertiary > .Button:visited {
+    background-color: black;
+    border: 1px solid var(--tw-color-blue-primary);
+    color: #1DA1F2;
+  }
+  .Button.Button--tertiary:focus,
+  .Button.Button--tertiary.is-focus,
+  .ButtonGroup--tertiary > .Button:focus,
+  .ButtonGroup--tertiary > .Button.is-focus {
+    background-color: black;
+    border: 1px solid var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+  .Button.Button--tertiary:hover,
+  .Button.Button--tertiary.is-hover,
+  .ButtonGroup--tertiary > .Button:hover,
+  .ButtonGroup--tertiary > .Button.is-hover {
+    background-color: var(--tw-color-gray-900-experimental);
+    border-color: var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+  .Button.Button--tertiary:active,
+  .Button.Button--tertiary.is-active,
+  .ButtonGroup--tertiary > .Button:active,
+  .ButtonGroup--tertiary > .Button.is-active {
+    background-color: var(--tw-color-gray-900-experimental);
+    border-color: var(--tw-color-blue-primary);
+    color: var(--tw-color-blue-primary);
+  }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -4,4 +4,7 @@
 @import "feather-component-button";
 @import "feather-component-grid";
 
+// custom feather overrides
+@import "feather-custom";
+
 @import "main";
diff --git a/content/_index.html b/content/_index.html
@@ -57,7 +57,7 @@ <h1 class="center-text medium-margin">Love</h1>
         <div class="Grid-cell left-text u-size5of12 u-after1of12">
             <h1 class="small-title mega-margin">Explore Projects</h1>
             <p class="mega-margin">Twitter has been built on open source since the beginning. Openness is part of our DNA. The projects you see here were born at Twitter, and patches are always welcome!</p>
-            <a href="/projects/" class="Button Button--large">View All Projects</a>
+            <a href="/projects/" class="Button Button--primary Button--large">View All Projects</a>
         </div>
         <div class="Grid-cell explore-projects-blank"></div>
     </div>
@@ -81,7 +81,7 @@ <h1 class="small-title mega-margin">Explore Projects</h1>
         <div id="career-text" class="Grid-cell left-text u-size5of12 u-after1of12 same-mega-margin">
             <h1 class="small-title mega-margin career-title">Join the Flock</h1>
             <p class="mega-margin">We are always on the lookout for innovative and creative individuals who are passionate about building a platform where all voices can be heard.</p>
-            <a href="https://careers.twitter.com" class="Button Button--large">View All Careers</a>
+            <a href="https://careers.twitter.com" class="Button Button-primary Button--large">View All Careers</a>
         </div>
         <div class="Grid-cell timeline-cell u-size1of2">
             <a class="twitter-timeline" data-height="700px" data-partner="tweetdeck" href="https://twitter.com/TwitterOSS/timelines/1028044487681925121?ref_src=twsrc%5Etfw">#TwitterOSSJobs - Curated tweets by TwitterOSS</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

diff --git a/static/js/main.js b/static/js/main.js
@@ -84,6 +84,7 @@ function lessThan800px(mediaQuery) {
 
 // set dark theme on twitter timeline widgets and feather components
 if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.getElementsByTagName('body')[0].classList.add("u-featherBackgroundDark");
     for (const e of document.getElementsByClassName('twitter-timeline')) {
         e.setAttribute('data-theme','dark');
     }