Merge pull request #28 from csalmeida/themes-v4

Theme rewrite for ProtonMail v4

1 files changed, 428 insertions, 0 deletions

diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss
new file mode 100644
index 0000000..0f6dee1
--- /dev/null
+++ b/templates/@theme-base/_styles.scss
@@ -0,0 +1,428 @@
+// Styles defined by Protonmail see https://design-system-beta.netlify.com/sass-variables/ ->
+
+@import "../@theme-base/reusable-components/design-system-config";
+
+$main-bg-color: $base;
+$secondary-bg-color: darken($base, 5%);
+$bgcolor-searchbox-field: $search;
+$bgcolor-spacebar: rgba(255, 255, 255, 0.1);
+$bgcolor-aside-link: rgba(0, 0, 0, 0.3);
+$bgcolor-toolbar: lighten($base, 5%);
+$fillcolor-logo: $pm-global-light;
+$fillcolor-icons: $white;
+$color-nav-link: $navigation;
+$color-nav-active: $highlight;
+$color-standard-text: $white;
+$boxshadow-main: none; 
+
+@import "../@theme-base/pm-styles/pm-theme-config";
+
+// Theme template styles ->
+
+// Loading state
+html:not(.editor-squire-iframe) body {
+  background: $base;
+  color: $text_color;
+}
+
+// Compose button
+.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
+  color: $text_color;
+  background-color: $highlight;
+  border: 1px solid $highlight;
+  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
+}
+
+.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
+  color: $navigation;
+  box-shadow: 0 0 .35714em 0 rgba(0,0,0,.2);
+  background: darken($highlight, 5%);
+  border: 1px solid darken($highlight, 5%);
+}
+
+// Button classes
+.pm-button--primaryborder-dark, .pm-button-blueborder-dark {
+  background: $main-bg-color;
+  border-color: $highlight;
+  color: $highlight;
+}
+
+.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active {
+  background: $main-bg-color;
+  border-color: lighten($highlight, 5%);
+  color: lighten($highlight, 5%);
+}
+
+.pm-button--primaryborder, .pm-button-blueborder {
+  border-color: darken($highlight, 5%);
+  color: darken($highlight, 5%);
+}
+
+.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
+  border-color: darken($highlight, 5%);
+  color: darken($highlight, 5%);
+}
+
+// Disabled button
+.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
+  background-color: lighten($highlight, 40%);
+  border-color: lighten($highlight, 5%);
+  color: darken($highlight, 10%);
+}
+
+.bg-primary {
+  background-color: lighten($main-bg-color, 5%);
+}
+
+.color-primary {
+  color: $highlight;
+}
+
+// Message numbers
+.navigation__counterItem {
+  background: darken($highlight, 10%);
+  color: lighten($text_color, 35%);
+}
+
+// Message items
+.item-container-row:hover::before, .item-container:hover::before {
+  border-color: lighten($highlight, 10%);
+}
+
+.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon {
+  border-color: lighten($highlight, 25%);
+}
+
+.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon {
+  fill: darken($highlight, 10%);
+}
+
+// Storage indicator
+.circle-chart__circle {
+  stroke: $highlight;
+}
+
+// Top navigation
+#dropdown-0 {
+  .dropDown-content::after, .dropDown-content::before,
+  &.dropDown:not(.dropDown--noCaret)::before,
+  .dropDown-content {
+    background: $base;
+  }
+}
+
+.dropDown:not(.dropDown--noCaret)::before,
+.dropDown::after,
+.dropDown-logout-initials,
+.dropDown-item-hr {
+  border-color: lighten($base, 5%) !important; 
+}
+
+#global_search.searchbox-field[type="search"] {
+  background-color: $search;
+  color: $text_color;
+}
+
+.searchbox-advanced-search-button:active,
+.searchbox-advanced-search-button:focus,
+.searchbox-advanced-search-button:hover {
+  background-color: $base;
+}
+
+.topnav-link, .topnav-link > .topnav-icon {
+  color: $navigation;
+  transition: color .2s ease-in-out;
+}
+
+.topnav-link:active, .topnav-link:focus, 
+.topnav-link:hover, .topnav-link[aria-current="true"] {
+  color: $highlight;
+}
+
+.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, 
+.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
+  color: $highlight;
+}
+
+.protonmail .text-purple {
+  color: $base !important;
+}
+
+.protonmail .text-purple:hover {
+  color: darken($highlight, 10%) !important;
+}
+
+// Dropdown
+.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover {
+  color: $highlight;
+}
+
+// Compose window
+#pm_composer .composer,
+.composerInputMeta-overlay {
+  .composerHeader-container {
+    background: lighten($base, 5%);
+  }
+}
+
+#pm_composer .composer .fill {
+  background: $color-standard-text;
+}
+
+// Conversation items
+.conversation {
+  &.marked::before {
+    background: $highlight;
+  }
+}
+
+.item-container, .item-container-row  {
+  &:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+    background: $color-standard-text;
+  }
+}
+
+.item-container.selected, .item-container-row.selected,
+.item-container.active, .item-is-selected {
+  background: rgba($highlight, 0.1);
+}
+
+.selectBoxElement-container:hover {
+  .item-icon {
+    background-color: transparent;
+    border: 1px solid darken($highlight, 5%);
+
+    .item-icon-fakecheck-icon {
+      fill: darken($highlight, 5%);
+    }
+  }
+
+ .item-checkbox:checked + .item-icon {
+    background-color: darken($highlight, 5%);
+    border-color: darken($highlight, 5%);
+  }
+}
+
+.item-checkbox:checked + .item-icon {
+  background-color: $highlight;
+  border-color: $highlight;
+}
+
+.item-checkbox + .item-icon:hover {
+  background-color: darken($highlight, 5%);
+  border-color: darken($highlight, 5%);
+}
+
+.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
+  fill: $navigation;
+}
+
+.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
+  fill: $navigation;
+}
+
+// Star icon
+.starbutton {
+  fill: $highlight !important;
+  opacity: 0.7;
+}
+
+.starbutton:focus, .starbutton:hover {
+  fill: $highlight;
+}
+
+// Encryption icon
+.autocompleteEmailsItem-icon svg.encryptionIcon {
+  fill: darken($highlight, 5%);
+}
+
+.encryptionStatus .color-pm-blue svg {
+  color: darken($highlight, 5%);
+  fill: darken($highlight, 5%);
+}
+
+.encryptionStatus .color-global-grey-dm svg {
+  color: black;
+}
+
+// Highlighted text (seen when multiple messages are selected)
+.color-pm-blue {
+  color: $highlight;
+}
+
+// Radio buttons
+.pm-radio:checked + .pm-radio-fakeradio::before {
+  background: $highlight;
+}
+
+// Information blocks
+.block-info-standard {
+  border-color: $info_color;
+}
+
+.block-info-standard-warning {
+  border-color: $warning_color;
+}
+
+.block-info-standard-error {
+  border-color: $danger_color;
+}
+
+// Links across the site:
+.link, a, .pm-button--link {
+  color: darken($highlight, 10%);
+  transition: color .2s ease-in-out;
+}
+
+.link:active, .link:focus, .link:hover, 
+a:active, a:focus, a:hover,
+.pm-button--link:hover {
+  color: darken($highlight, 10%);
+}
+
+// Buttons
+.pm-button {
+  &--primary {
+    background-color: $highlight;
+    border-color: $highlight;
+  }
+
+  &--link, &.pm-button--link {
+    color: $highlight;
+  }
+}
+
+.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
+  background-color: $highlight;
+  border-color: $highlight;
+}
+
+.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
+  background: darken($highlight, 5%);
+  border: 1px solid darken($highlight, 5%);
+}
+
+.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active {
+  background: darken($highlight, 10%);
+  border-color: darken($highlight, 10%);
+}
+
+.pm-button-blueborder {
+  box-shadow: none;
+  border-color: $base;
+  color: $base;
+  transition: color .2s ease-in-out, border-color .2s ease-in-out;
+}
+
+.pm-button-blueborder:hover {
+  box-shadow: none;
+  border-color: darken($highlight, 10%);
+  color: darken($highlight, 10%);
+}
+
+.is-active.pm-button--primaryborder,
+.pm-button--primaryborder:not(div):active,
+.pm-button-blueborder.is-active,
+.pm-button-blueborder:not(div):active {
+  border-color: darken($highlight, 10%);
+  color: darken($highlight, 10%);
+  background: transparent;
+}
+
+.pm-group-buttons > .pm-group-button.pm-button--primary {
+  border-color: darken($highlight, 10%);
+}
+
+.bg-pm-blue-gradient {
+  .pm-button--transparent:hover {
+    color: $text_color;
+    border-color: $text_color;
+  }
+}
+
+// Settings toggle button
+.pm-toggle-checkbox:checked+.pm-toggle-label:before {
+  background: $highlight;
+  border-color: $highlight;
+}
+
+// Message panel
+
+.composer-title-bar {
+  background: $base;
+}
+
+.color-global-light {
+  color: $text_color;
+}
+
+.angular-squire-iframe body {
+  a {
+    color: $highlight;
+  }
+} 
+
+// Attachment icon
+.fill-pm-blue,
+.message-attachmentIcon .file-outer-icon.is-embedded {
+  fill: $highlight;
+}
+
+// Subscription plans
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
+  border-color: $highlight;
+  color: $highlight;
+
+  &::before {
+    background-color: $highlight;
+  }
+}
+
+.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), 
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
+.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
+  border-color: $highlight;
+}
+
+.pm-simple-table-row-th {
+  .fill-primary {
+    fill: $highlight;
+  }
+}
+
+// Forms
+.pm-checkbox-fakecheck, .pm-radio-fakeradio {
+  border-color: $base;
+
+  [class*="icon-"] {
+    fill: $highlight;
+  }
+}
+
+[class*="icon-"].color-primary {
+  color: $base;
+
+  &:hover {
+    color: darken($highlight, 10%);
+  }
+}
+
+.pm-field, .editor,
+.editor-toolbar,
+.border-bottom,
+.border-top,
+.message-container.is-opened > .message-header {
+  border-color: darken($base, 10%);
+}
+
+// Badges
+.badgeLabel, .badgeLabel-primary {
+  border-color: darken($highlight, 10%);
+}
+
+.badgeLabel,
+.badgeLabel-blue,
+.badgeLabel-primary,
+.bg-pm-blue {
+  background-color: darken($highlight, 10%);
+}
\ No newline at end of file