mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-03 02:25:34 +00:00
Bug 1746032 - STP dark mode r=thecount
Differential Revision: https://phabricator.services.mozilla.com/D141257
This commit is contained in:
Gavin Suntop
parent
6e94231e2d
commit
9899560865
@ -1,5 +1,17 @@
|
||||
// Mixins
|
||||
|
||||
@mixin theme_dark {
|
||||
@at-root body.theme_dark & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font: menu;
|
||||
|
||||
&.theme_dark {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
||||
@ -394,6 +394,9 @@ a:active {
|
||||
body {
|
||||
font: menu;
|
||||
}
|
||||
body.theme_dark {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 12px -8px;
|
||||
@ -1979,6 +1982,13 @@ button {
|
||||
padding: 20px;
|
||||
width: 260px;
|
||||
}
|
||||
#stp_style_guide #dark_mode_toggle {
|
||||
text-align: end;
|
||||
}
|
||||
body.theme_dark #stp_style_guide {
|
||||
background: #42414c;
|
||||
}
|
||||
|
||||
#stp_style_guide .stp_superheader {
|
||||
margin: 0;
|
||||
}
|
||||
@ -2041,9 +2051,17 @@ button {
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
body.theme_dark .stp_popular_topics .stp_popular_topic {
|
||||
background: #2B2A33;
|
||||
}
|
||||
|
||||
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
|
||||
color: #000;
|
||||
}
|
||||
body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
|
||||
.stp_popular_topics .stp_popular_topic .stp_popular_topic_link::after {
|
||||
content: " >";
|
||||
}
|
||||
@ -2061,6 +2079,10 @@ button {
|
||||
text-decoration: none;
|
||||
background-color: #ECECEE;
|
||||
}
|
||||
body.theme_dark .stp_article_list .stp_article_list_link:hover {
|
||||
background-color: #2B2A33;
|
||||
}
|
||||
|
||||
.stp_article_list .stp_article_list_thumb,
|
||||
.stp_article_list .stp_article_list_thumb_placeholder {
|
||||
width: 40px;
|
||||
@ -2077,6 +2099,10 @@ button {
|
||||
color: #15141A;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
body.theme_dark .stp_article_list .stp_article_list_header {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
|
||||
.stp_article_list .stp_article_list_publisher {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
@ -2085,6 +2111,9 @@ button {
|
||||
color: #52525E;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
body.theme_dark .stp_article_list .stp_article_list_publisher {
|
||||
color: #CFCFD8;
|
||||
}
|
||||
|
||||
.stp_header {
|
||||
display: flex;
|
||||
@ -2100,6 +2129,9 @@ button {
|
||||
height: 32px;
|
||||
width: 121px;
|
||||
}
|
||||
body.theme_dark .stp_header .stp_header_logo {
|
||||
background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
|
||||
}
|
||||
|
||||
.stp_button {
|
||||
cursor: pointer;
|
||||
@ -2113,6 +2145,10 @@ button {
|
||||
font-weight: 600;
|
||||
line-height: 1.27em;
|
||||
}
|
||||
body.theme_dark .stp_button.stp_button_text {
|
||||
color: #F0F0F4;
|
||||
}
|
||||
|
||||
.stp_button.stp_button_primary {
|
||||
align-items: center;
|
||||
background: #0060DF;
|
||||
@ -2125,6 +2161,11 @@ button {
|
||||
line-height: 1.27em;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
body.theme_dark .stp_button.stp_button_primary {
|
||||
background: #00DDFF;
|
||||
color: #15141A;
|
||||
}
|
||||
|
||||
.stp_button.stp_button_secondary {
|
||||
align-items: center;
|
||||
background: #F0F0F4;
|
||||
@ -2136,6 +2177,10 @@ button {
|
||||
line-height: 1.27em;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
body.theme_dark .stp_button.stp_button_secondary {
|
||||
background: #2B2A33;
|
||||
color: #FBFBFE;
|
||||
}
|
||||
|
||||
.stp_button_wide .stp_button {
|
||||
display: block;
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
#stp_style_guide {
|
||||
#dark_mode_toggle {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
border: 1px solid #ddd;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
width: 260px;
|
||||
|
||||
@include theme_dark {
|
||||
background: #42414c;
|
||||
}
|
||||
|
||||
.stp_superheader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
<svg width="91" height="24" viewBox="0 0 91 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0243 10.9259L7.67738 14.0734C7.59482 14.1599 7.49547 14.2286 7.38541 14.2752C7.27536 14.3219 7.15692 14.3456 7.03738 14.3449C6.91026 14.3482 6.78379 14.3258 6.66549 14.2792C6.5472 14.2326 6.43951 14.1626 6.34885 14.0734L3.0518 10.9259C2.87395 10.7405 2.77463 10.4936 2.77463 10.2367C2.77463 9.9798 2.87395 9.73286 3.0518 9.5475C3.42033 9.20259 4.03541 9.15406 4.40525 9.5475L7.03738 12.0826L9.71934 9.5475C10.0643 9.15406 10.6793 9.20259 11.0308 9.5475C11.1972 9.73853 11.2889 9.98333 11.2889 10.2367C11.2889 10.49 11.1972 10.7348 11.0308 10.9259H11.0243ZM12.7213 5.70881H1.35344C1.17883 5.70499 1.00519 5.73573 0.842512 5.79927C0.679831 5.86281 0.531322 5.9579 0.405531 6.07906C0.279741 6.20022 0.179152 6.34506 0.109555 6.50524C0.0399574 6.66543 0.00272483 6.83779 0 7.01242L0 11.2209C0 15.0347 3.14754 18.2098 7.03738 18.2098C8.88984 18.2043 10.6649 17.4664 11.9755 16.1571C13.286 14.8478 14.0255 13.0734 14.0328 11.2209V7.01242C14.0337 6.84032 14.0003 6.66976 13.9346 6.51069C13.8689 6.35161 13.7722 6.2072 13.6501 6.08588C13.5281 5.96455 13.3831 5.86872 13.2236 5.80399C13.0642 5.73925 12.8934 5.7069 12.7213 5.70881Z" fill="#EF4056"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M90.1613 15.8229C89.9241 15.8402 89.6992 15.9351 89.5213 16.0931C89.1764 16.3882 88.7581 16.6832 88.1679 16.6832C87.1594 16.6832 86.5941 16.0682 86.5941 14.6662V7.08192L89.7194 7.13045C90.1626 7.13045 90.4577 6.86028 90.4577 6.44192C90.4577 5.99865 90.1626 5.72848 89.7194 5.72848L86.5941 5.75209V3.22356C86.5941 2.73176 86.2492 2.38684 85.8308 2.38684C85.722 2.38661 85.6143 2.40828 85.5141 2.45056C85.4138 2.49285 85.3231 2.55488 85.2474 2.63296C85.1716 2.71104 85.1124 2.80357 85.0731 2.90503C85.0339 3.0065 85.0155 3.11483 85.019 3.22356V5.75733L83.6905 5.73373C83.5952 5.72756 83.4997 5.74179 83.4103 5.77546C83.321 5.80913 83.2398 5.86148 83.1723 5.929C83.1048 5.99652 83.0524 6.07766 83.0188 6.16702C82.9851 6.25637 82.9709 6.35188 82.977 6.44717C82.9755 6.54015 82.9931 6.63246 83.0287 6.71835C83.0643 6.80425 83.1172 6.8819 83.1841 6.94648C83.2511 7.01105 83.3305 7.06118 83.4176 7.09373C83.5047 7.12628 83.5976 7.14056 83.6905 7.13569L85.0177 7.08192V14.7147C85.0177 17.1016 86.4695 18.2098 88.143 18.2098C88.5814 18.2216 89.0176 18.1424 89.4239 17.9771C89.8302 17.8119 90.1978 17.5642 90.5036 17.2498C90.6767 17.0531 90.8485 16.8314 90.8485 16.5363C90.8554 16.443 90.8426 16.3493 90.8107 16.2613C90.7789 16.1732 90.7289 16.0929 90.6639 16.0256C90.5989 15.9583 90.5204 15.9054 90.4336 15.8705C90.3468 15.8355 90.2535 15.8193 90.16 15.8229" fill="#ffffff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.484 11.2459C82.484 8.4918 80.0722 5.58557 76.8446 5.58557C73.3495 5.58557 70.7423 8.47082 70.7423 11.9344C70.7423 15.398 73.3994 18.2098 76.8695 18.2098C78.5915 18.2098 80.2649 17.5698 81.3718 16.4866C81.6184 16.2413 81.8151 15.9698 81.8151 15.6997C81.8213 15.6044 81.807 15.5089 81.7734 15.4195C81.7397 15.3302 81.6874 15.249 81.6198 15.1815C81.5523 15.114 81.4712 15.0616 81.3818 15.028C81.2925 14.9943 81.197 14.9801 81.1017 14.9862C80.8467 14.9906 80.6019 15.0865 80.4118 15.2564C79.3784 16.1666 78.3213 16.6833 76.8708 16.6833C74.6112 16.6833 72.5954 14.9639 72.3856 12.4013H81.1725C82.0158 12.4013 82.484 11.9593 82.484 11.2459ZM72.4315 11.0492C72.7935 8.46557 74.7017 7.11475 76.8485 7.11475C79.1371 7.11475 80.7358 9.03475 80.8341 11.0492H72.4315Z" fill="#ffffff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9587 11.3115L69.5397 7.18557C69.958 6.81574 70.0079 6.27541 69.6879 5.93049C69.343 5.56066 68.8262 5.66033 68.4577 6.00393L62.2321 11.8452V0.935082C62.2321 0.368525 61.9856 0 61.4689 0C60.9023 0 60.6321 0.368525 60.6321 0.935082V17.2984C60.6321 17.84 60.9521 18.2098 61.4689 18.2098C61.9357 18.2098 62.2321 17.84 62.2321 17.2984V13.7705L63.8269 12.3279L68.8525 17.9134C69.1725 18.2584 69.7141 18.3816 70.0577 18.0616C70.4511 17.6931 70.3292 17.2 70.0341 16.8564L64.9587 11.3115Z" fill="#ffffff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.7285 14.3213C57.5069 14.3213 57.2616 14.4932 57.1135 14.6899C56.4249 15.6013 54.9482 16.6833 53.2997 16.6833C50.838 16.6833 48.7226 14.7397 48.7226 11.9345C48.7226 8.9325 50.838 7.13578 53.2997 7.13578C55.0951 7.13578 56.08 7.99742 56.9167 9.00594C56.9923 9.10609 57.0886 9.18874 57.1991 9.24827C57.3095 9.30779 57.4315 9.34279 57.5567 9.35086C57.9253 9.35086 58.2951 9.08069 58.2951 8.71086C58.2951 8.4407 58.122 8.16922 57.9751 7.94758C56.9653 6.49578 55.2682 5.65906 53.2997 5.65906C51.6427 5.66808 50.0569 6.33372 48.8899 7.51006C47.7229 8.6864 47.0699 10.2775 47.0741 11.9345C47.0741 15.3548 49.8794 18.2099 53.2997 18.2099C55.4151 18.2099 57.2341 16.9784 58.1954 15.6997C58.353 15.5215 58.4483 15.2969 58.4669 15.0597C58.4708 14.9617 58.4543 14.864 58.4186 14.7726C58.3829 14.6813 58.3286 14.5983 58.2593 14.529C58.1899 14.4596 58.1069 14.4054 58.0156 14.3697C57.9243 14.3339 57.8265 14.3175 57.7285 14.3213Z" fill="#ffffff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3718 16.6833C36.8367 16.6833 34.7213 14.543 34.7213 11.9344C34.7213 9.30099 36.8367 7.11083 39.3718 7.11083C41.9554 7.11083 44.0223 9.30099 44.0223 11.9344C44.0223 14.543 41.9554 16.6833 39.3718 16.6833ZM39.4203 5.58558C38.5873 5.58401 37.7622 5.74734 36.9927 6.06615C36.2231 6.38496 35.5242 6.85295 34.9363 7.44314C34.3485 8.03332 33.8832 8.73403 33.5674 9.50487C33.2517 10.2757 33.0916 11.1014 33.0964 11.9344C33.0964 15.4046 35.8505 18.2098 39.4203 18.2098C42.7672 18.2098 45.6708 15.4046 45.6708 11.9344C45.6708 8.46427 42.7423 5.58558 39.4203 5.58558Z" fill="#ffffff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.419 16.6832C22.8852 16.6832 20.7685 14.5429 20.7685 11.9344C20.7685 9.30095 22.8852 7.11079 25.419 7.11079C28.0026 7.11079 30.0695 9.30095 30.0695 11.9344C30.0695 14.5429 28.0026 16.6832 25.419 16.6832ZM25.4426 5.58554C23.5226 5.58554 21.8255 6.66882 20.619 8.12063L20.5704 6.39735C20.5455 5.78226 20.2504 5.48718 19.8072 5.48718C19.3403 5.48718 19.0203 5.85702 19.0203 6.37374V23.1606C19.0145 23.2699 19.0313 23.3792 19.0697 23.4817C19.1081 23.5842 19.1673 23.6777 19.2435 23.7562C19.3197 23.8348 19.4113 23.8967 19.5126 23.9382C19.6139 23.9797 19.7227 23.9998 19.8321 23.9973C20.3239 23.9973 20.619 23.6275 20.619 23.1357V15.798C21.8255 17.2249 23.5226 18.2098 25.4426 18.2098C26.2662 18.2123 27.0822 18.0514 27.8434 17.7366C28.6045 17.4218 29.2958 16.9593 29.8771 16.3758C30.4584 15.7923 30.9183 15.0993 31.2303 14.337C31.5422 13.5746 31.6999 12.7581 31.6944 11.9344C31.6944 8.46423 28.9403 5.58554 25.4439 5.58554" fill="#ffffff"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="90.8852" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -10,6 +10,10 @@
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: #ECECEE;
|
||||
|
||||
@include theme_dark {
|
||||
background-color: #2B2A33;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,6 +33,10 @@
|
||||
line-height: 1.27em;
|
||||
color: #15141A;
|
||||
margin: 0 0 4px;
|
||||
|
||||
@include theme_dark {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
}
|
||||
|
||||
.stp_article_list_publisher {
|
||||
@ -38,5 +46,9 @@
|
||||
line-height: 1.27em;
|
||||
color: #52525E;
|
||||
margin: 4px 0 0;
|
||||
|
||||
@include theme_dark {
|
||||
color: #CFCFD8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,10 @@
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 1.27em;
|
||||
|
||||
@include theme_dark {
|
||||
color: #F0F0F4;
|
||||
}
|
||||
}
|
||||
|
||||
&.stp_button_primary {
|
||||
@ -22,6 +26,11 @@
|
||||
justify-content: center;
|
||||
line-height: 1.27em;
|
||||
padding: 6px 12px;
|
||||
|
||||
@include theme_dark {
|
||||
background: #00DDFF;
|
||||
color: #15141A;
|
||||
}
|
||||
}
|
||||
|
||||
&.stp_button_secondary {
|
||||
@ -34,6 +43,11 @@
|
||||
font-weight: 600;
|
||||
line-height: 1.27em;
|
||||
padding: 6px 12px;
|
||||
|
||||
@include theme_dark {
|
||||
background: #2B2A33;
|
||||
color: #FBFBFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,5 +11,9 @@
|
||||
background-size: contain;
|
||||
height: 32px;
|
||||
width: 121px;
|
||||
|
||||
@include theme_dark {
|
||||
background: url(../img/pocketlogo-dark.svg) bottom center no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,9 +13,18 @@
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
|
||||
@include theme_dark {
|
||||
background: #2B2A33;
|
||||
|
||||
}
|
||||
|
||||
.stp_popular_topic_link {
|
||||
color: #000;
|
||||
|
||||
@include theme_dark {
|
||||
color: #FBFBFE;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " >";
|
||||
}
|
||||
|
||||
@ -1318,15 +1318,13 @@ StyleGuideOverlay.prototype = {
|
||||
url: "https://example.org",
|
||||
alt: "Alt Text"
|
||||
}, {
|
||||
title: "Article Title",
|
||||
publisher: "Publisher",
|
||||
title: "Article Title (No Publisher)",
|
||||
thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
|
||||
url: "https://example.org",
|
||||
alt: "Alt Text"
|
||||
}, {
|
||||
title: "Article Title",
|
||||
title: "Article Title (No Thumbnail)",
|
||||
publisher: "Publisher",
|
||||
thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
|
||||
url: "https://example.org",
|
||||
alt: "Alt Text"
|
||||
}]
|
||||
|
||||
@ -8,6 +8,32 @@ function onDOMLoaded() {
|
||||
thePKT_PANEL.initStyleGuide();
|
||||
}
|
||||
window.thePKT_PANEL.create();
|
||||
|
||||
setupDarkModeUI();
|
||||
}
|
||||
|
||||
function setupDarkModeUI() {
|
||||
let isDarkModeEnabled = false; // TODO: Use browser pref for starting value
|
||||
let elDarkModeToggle = document.querySelector(`#dark_mode_toggle input`);
|
||||
let elBody = document.querySelector(`body`);
|
||||
|
||||
function setTheme() {
|
||||
if (isDarkModeEnabled) {
|
||||
elBody.classList.add(`theme_dark`);
|
||||
elDarkModeToggle.checked = true;
|
||||
} else {
|
||||
elBody.classList.remove(`theme_dark`);
|
||||
elDarkModeToggle.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
setTheme();
|
||||
|
||||
elDarkModeToggle.addEventListener(`click`, function(e) {
|
||||
e.preventDefault;
|
||||
isDarkModeEnabled = !isDarkModeEnabled;
|
||||
setTheme();
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState != `loading`) {
|
||||
|
||||
@ -55,18 +55,15 @@ StyleGuideOverlay.prototype = {
|
||||
alt: "Alt Text",
|
||||
},
|
||||
{
|
||||
title: "Article Title",
|
||||
publisher: "Publisher",
|
||||
title: "Article Title (No Publisher)",
|
||||
thumbnail:
|
||||
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
|
||||
url: "https://example.org",
|
||||
alt: "Alt Text",
|
||||
},
|
||||
{
|
||||
title: "Article Title",
|
||||
title: "Article Title (No Thumbnail)",
|
||||
publisher: "Publisher",
|
||||
thumbnail:
|
||||
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
|
||||
url: "https://example.org",
|
||||
alt: "Alt Text",
|
||||
},
|
||||
|
||||
@ -18,6 +18,10 @@
|
||||
<script src="js/style-guide/entry.js"></script>
|
||||
|
||||
<div id="stp_style_guide">
|
||||
<div id="dark_mode_toggle">
|
||||
<label for="dark_mode_checkbox"><strong>Dark Mode: </strong></label>
|
||||
<input id="dark_mode_checkbox" type="checkbox"/>
|
||||
</div>
|
||||
<h1>Save To Pocket:<br/> Style Guide</h1>
|
||||
<div id="stp_style_guide_components"></div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user