From 29bdcf3bee334935ab202b30a78c7fa783f89e17 Mon Sep 17 00:00:00 2001
From: Emma Winston <emma.winston@gmail.com>
Date: Mon, 19 Aug 2019 20:26:23 +0100
Subject: [PATCH] Add macaron theme

Add macaron, a pastel light theme for hometown
---
 app/javascript/styles/macaron.scss           |    3 +
 app/javascript/styles/macaron/diff.scss      | 1002 ++++++++++++++++++
 app/javascript/styles/macaron/variables.scss |   48 +
 config/themes.yml                            |    1 +
 4 files changed, 1054 insertions(+)
 create mode 100644 app/javascript/styles/macaron.scss
 create mode 100644 app/javascript/styles/macaron/diff.scss
 create mode 100644 app/javascript/styles/macaron/variables.scss

diff --git a/app/javascript/styles/macaron.scss b/app/javascript/styles/macaron.scss
new file mode 100644
index 000000000..a366a2361
--- /dev/null
+++ b/app/javascript/styles/macaron.scss
@@ -0,0 +1,3 @@
+@import 'macaron/variables';
+@import 'application';
+@import 'macaron/diff'
diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
new file mode 100644
index 000000000..5a1eee7d0
--- /dev/null
+++ b/app/javascript/styles/macaron/diff.scss
@@ -0,0 +1,1002 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+html {
+  scrollbar-color: $pink rgba($pink, 0.25);
+}
+
+.loading-bar
+  {
+    background-color: $green;
+  }
+
+.status__content a, .reply-indicator__content a {
+  &:hover, &:active, &:focus {
+    color: $bilberry;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $pink;
+    border: 0;
+}
+
+::-webkit-scrollbar-track:hover {
+    background: $green;
+}
+
+.ui {
+  background: $cream;
+}
+
+// Change the colors of button texts
+.button {
+  color: $white;
+
+  &.button-alternative-2 {
+    color: $white;
+  }
+}
+
+// Change default background colors of columns
+.column > .scrollable,
+.getting-started,
+.column-inline-form {
+  background: $white;
+  border: 1px solid lighten(#eeeeee, 4%);
+  border-top: 0;
+}
+
+.getting-started {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.column-back-button,
+.column-header {
+  background: #c8c4dd;
+  border: 1px solid lighten($purple, 8%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+
+  &--slim-button {
+    border: 0;
+    top: -49px;
+    right: 1px;
+  }
+}
+
+
+
+.column-header__back-button,
+.column-header__button,
+.column-header__button.active,
+.account__header__bar {
+  background: $purple;
+}
+
+.column-header__button.active {
+  color: $ui-highlight-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $ui-highlight-color;
+    background: lighten($purple, 4%);
+  }
+}
+
+.account__header__bar .avatar .account__avatar {
+  border-color: $white;
+}
+
+.getting-started__footer a {
+  color: $ui-secondary-color;
+  text-decoration: underline;
+}
+
+.column-subheading {
+  background: $green;
+  border-bottom: 1px solid lighten($green, 8%);
+}
+
+.getting-started,
+.scrollable {
+  .column-link {
+    background: $blue;
+    border-bottom: 1px solid lighten($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue, 8%);
+    }
+  }
+}
+
+.getting-started .navigation-bar {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+}
+
+.compose-form__autosuggest-wrapper,
+.poll__text input[type="text"],
+.compose-form .spoiler-input__input,
+.compose-form__poll-wrapper select,
+.search__input,
+.setting-text,
+.box-widget input[type="text"],
+.box-widget input[type="email"],
+.box-widget input[type="password"],
+.box-widget textarea,
+.statuses-grid .detailed-status {
+  border: 1px solid lighten(#eeeeee, 4%);
+}
+
+.poll__chart {
+  background: darken($purple, 4%)
+}
+
+.poll__chart.leading {
+  background: $pink;
+}
+
+.status {
+    border-bottom: 1px solid lighten(#eeeeee, 4%);
+}
+
+.detailed-status__action-bar {
+    border-top: 1px solid lighten($purple, 4%);
+    border-bottom: 1px solid lighten($purple, 4%);
+}
+
+.search__input {
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+}
+
+.search__input {
+  &:focus{
+    background: $purple;
+    border: 1px solid lighten($purple, 8%);
+  }
+}
+
+.list-editor .search .search__input {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.compose-form__poll-wrapper select {
+  background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
+}
+
+.compose-form__poll-wrapper,
+.compose-form__poll-wrapper .poll__footer {
+  border-top-color: lighten($ui-base-color, 8%);
+}
+
+.notification__filter-bar, .account__section-headline {
+  background: $green;
+  border: 1px solid lighten($green, 8%);
+  border-top: 0;
+}
+
+.notification__filter-bar button {
+  background: $green;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+  background: $ui-base-color;
+  border: 1px solid lighten($ui-base-color, 8%);
+  border-top: 0;
+}
+
+.drawer__inner {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.drawer__header {
+  background: $blue;
+  border: 1px solid lighten($blue, 8%);
+}
+
+.drawer__header a {
+  &:active,
+  &:focus,
+  &:hover {
+    background: lighten($blue, 4%);
+  }
+}
+
+.drawer__inner__mastodon {
+  background: $pink url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+  .compose-form__modifiers {
+    .compose-form__upload__actions .icon-button {
+      color: lighten($white, 7%);
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $white;
+      }
+    }
+
+    .compose-form__upload-description input {
+      color: lighten($white, 7%);
+
+      &::placeholder {
+        color: lighten($white, 7%);
+      }
+    }
+  }
+
+  .compose-form__buttons-wrapper {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions__item {
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+}
+
+.account__header__tabs__buttons .icon-button {
+  border-color: lighten($purple, 8%);
+}
+
+.emoji-mart-bar {
+  border-color: lighten($ui-base-color, 4%);
+
+  &:first-child {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.emoji-mart-search input {
+  background: rgba($ui-base-color, 0.3);
+  border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+  background: darken($green, 2%);
+}
+
+.status.status-direct {
+  background: darken($ui-base-color, 2%);
+}
+
+.focusable:focus .status.status-direct {
+  background: $ui-base-color;
+}
+
+.status.status-direct:not(.read) {
+    background: $ui-base-color;
+    border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+  background: darken($purple, 10%);
+}
+
+.reply-indicator {
+  background: darken($purple, 8%);
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+  background: $pink;
+
+  &:hover {
+    background: lighten($pink, 4%);
+  }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+  background: $ui-base-color;
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+  color: $white;
+}
+
+.account-gallery__item a {
+  background-color: $ui-base-color;
+}
+
+// Change the colors used in the dropdown menu
+.dropdown-menu {
+  background: $white;
+
+  &__arrow {
+    &.left {
+      border-left-color: $white;
+    }
+
+    &.top {
+      border-top-color: $white;
+    }
+
+    &.bottom {
+      border-bottom-color: $white;
+    }
+
+    &.right {
+      border-right-color: $white;
+    }
+  }
+
+  &__item {
+    a {
+      background: $white;
+      color: $darker-text-color;
+    }
+  }
+}
+
+body.admin {
+  background: $cream;
+}
+
+.card>a:hover {
+  .card__bar {
+    background: $blue;
+  }
+}
+
+.batch-table__toolbar {
+  background: $green;
+}
+
+.batch-table__row {
+  border-top: 0;
+  border: 1px solid #fffdef;
+  background: $blue;
+}
+
+.batch-table__row:nth-child(2n) {
+  background: $green;
+}
+
+.filters .filter-subset a {
+  border-bottom: 2px solid $green;
+}
+
+.filters .filter-subset a:hover,
+.filters .filter-subset a:focus {
+  border-bottom: 2px solid lighten($green, 8%);
+}
+
+.filters .filter-subset a.selected:hover,
+.filters .filter-subset a.selected:focus {
+  border-bottom: 2px solid lighten($blueberry, 8%);
+}
+
+.table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th {
+    background: $green;
+}
+
+.table td, .table th {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-top: 1px solid $green;
+    text-align: left;
+    background: $blue;
+}
+
+.card__bar {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar {
+  background: $green;
+}
+
+.admin-wrapper .content h2, .admin-wrapper .content h4 {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.admin-wrapper .sidebar ul a.selected {
+  background: $purple;
+}
+
+.admin-wrapper .sidebar ul a:hover {
+  background: lighten($blue, 8%);
+}
+
+.selected ul li a {
+  background: $blue;
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
+  background: $blueberry;
+}
+
+.dashboard__counters > div > div,
+.dashboard__counters > div > a {
+  background: $pink;
+}
+
+.dashboard__counters > div > a:hover,
+.dashboard__counters > div > a:focus {
+  background: lighten($pink, 4%);
+}
+
+// Change the text colors on inverted background
+.privacy-dropdown__option.active,
+.privacy-dropdown__option:hover,
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.actions-modal ul li:not(:empty) a:focus button,
+.actions-modal ul li:not(:empty) a:hover,
+.actions-modal ul li:not(:empty) a:hover button,
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+  color: $white;
+}
+
+.dropdown-menu__separator {
+  border-bottom-color: lighten($ui-base-color, 4%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal {
+  background: $ui-base-color;
+}
+
+.column-header__collapsible-inner {
+  background: darken($blue, 4%);
+  border: 1px solid lighten($blue, 8%);
+  border-top: 0;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+  background: darken($ui-base-color, 6%);
+
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken($ui-base-color, 12%);
+    }
+  }
+}
+
+.display-case__case {
+  background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+  background: $white;
+
+  &:focus {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.react-toggle-track {
+  background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: lighten($ui-highlight-color, 10%);
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+  color: $primary-text-color;
+  background: $white;
+}
+
+.tabs-bar {
+  background: $blue;
+  border: 1px solid lighten($blue, 8%);
+  border-bottom: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-top: 0;
+  }
+
+  &__link {
+    padding-bottom: 14px;
+    border-bottom-width: 1px;
+    border-bottom-color: lighten($blue, 8%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: lighten($blue,4%);
+    }
+
+    &.active {
+      &:hover,
+      &:active,
+      &:focus {
+        background: transparent;
+        border-bottom-color: $ui-highlight-color;
+      }
+    }
+  }
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+  background: $account-background-color;
+  border-bottom-color: lighten($ui-base-color, 8%);
+}
+
+.getting-started__wrapper, .getting-started, .flex-spacer {
+  background: $purple;
+}
+
+.box-widget,
+.nothing-here,
+.page-header,
+.directory__tag > a,
+.directory__tag > div,
+.landing-page__call-to-action,
+.contact-widget,
+.landing .hero-widget__text,
+.landing-page__information.contact-widget {
+  background: $white;
+  border: 1px solid lighten(#eeeeee, 4%);
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+  }
+}
+
+.directory__tag a:hover, .directory__tag a:focus {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.page-header {
+  background: $purple;
+  border: 1px solid lighten($purple, 4%);
+}
+
+.directory, .nothing-here, .directory__tag a {
+  background: $green;
+  border: 1px solid lighten($green, 4%);
+}
+
+.box-widget {
+  background: $blue;
+  border: 1px solid lighten($blue, 4%);
+}
+
+.landing__grid__column-login .box-widget {
+  background: $pink;
+  border: 1px solid lighten($pink, 4%);
+}
+
+.landing .hero-widget__text {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.simple_form {
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  select,
+  textarea {
+    border-color: $blueberry;
+    &:hover {
+      border-color: $bilberry;
+    }
+  }
+}
+
+.landing .hero-widget__footer {
+  background: $purple;
+  border: 1px solid lighten($purple, 8%);
+  border-top: 0;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.brand__tagline {
+  color: $ui-secondary-color;
+}
+
+.landing-page__call-to-action {
+  background: $purple;
+}
+
+.landing-page__information.contact-widget {
+  background: $green;
+}
+
+.directory__tag > a {
+  &:hover,
+  &:active,
+  &:focus {
+    background: $ui-base-color;
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    border: 0;
+  }
+}
+
+.directory__tag.active > a,
+.directory__tag.active > div {
+  border-color: $ui-highlight-color;
+
+  &,
+  h4,
+  h4 small,
+  .fa,
+  .trends__item__current {
+    color: $white;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: $ui-highlight-color;
+  }
+}
+
+
+.batch-table {
+  &__toolbar,
+  &__row,
+  .nothing-here {
+    border-color: lighten($ui-base-color, 8%);
+  }
+}
+
+.activity-stream {
+  border: 1px solid lighten($ui-base-color, 8%);
+
+  &--under-tabs {
+    border-top: 0;
+  }
+
+  .entry {
+    background: $account-background-color;
+
+    .detailed-status.light,
+    .more.light,
+    .status.light {
+      border-bottom-color: lighten($ui-base-color, 8%);
+    }
+  }
+
+  .status.light {
+    .status__content {
+      color: $primary-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+  }
+}
+
+.accounts-grid {
+  .account-grid-card {
+    .controls {
+      .icon-button {
+        color: $darker-text-color;
+      }
+    }
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $darker-text-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+  }
+}
+
+.simple_form,
+.table-form {
+  .warning {
+    box-shadow: none;
+    background: rgba($error-red, 0.5);
+    text-shadow: none;
+  }
+
+  .recommended {
+    border-color: $ui-highlight-color;
+    color: $ui-highlight-color;
+    background-color: $blue;
+  }
+}
+
+.compose-form .compose-form__warning {
+  border-color: $ui-highlight-color;
+  background-color: darken($blue, 6%);
+
+  &,
+  a {
+    color: $ui-highlight-color;
+  }
+}
+
+.status__content,
+.reply-indicator__content {
+  a {
+    color: $highlight-text-color;
+  }
+}
+
+.status.status-direct {
+  background: darken($green, 6%);
+}
+
+.button.logo-button {
+  color: $white;
+
+  svg {
+    fill: $white;
+  }
+}
+
+.public-layout {
+  .activity-stream {
+    border-color: lighten(#eeeeee, 4%);
+  }
+
+  .account__section-headline {
+    background: $green;
+    border: 1px solid lighten($green, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 0;
+    }
+  }
+
+  .header,
+  .public-account-header,
+  .public-account-bio {
+    box-shadow: none;
+  }
+
+  .hero-widget__text {
+    background: darken($blue, 4%);
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .public-account-bio {
+    background: $blue;
+    border: 1px solid lighten($blue, 4%);
+  }
+
+  .header {
+    background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 8%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border: 0;
+    }
+
+    .brand {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($pink, 4%);
+      }
+    }
+  }
+
+  .public-account-header {
+    &__image {
+      background: lighten($ui-base-color, 12%);
+
+      &::after {
+        box-shadow: none;
+      }
+    }
+
+    &__bar {
+      &::before {
+        background: $account-background-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        border-top: 0;
+      }
+
+      .avatar img {
+        border-color: $account-background-color;
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        background: $account-background-color;
+        border: 1px solid lighten($ui-base-color, 8%);
+        border-top: 0;
+      }
+    }
+
+    &__tabs {
+      &__name {
+        h1,
+        h1 small {
+          color: $white;
+
+          @media screen and (max-width: $no-columns-breakpoint) {
+            color: $primary-text-color;
+          }
+        }
+      }
+    }
+
+    &__extra {
+      .public-account-bio {
+        border: 0;
+      }
+
+      .public-account-bio .account__header__fields {
+        border-color: lighten($ui-base-color, 8%);
+      }
+    }
+  }
+}
+
+.notification__filter-bar button.active::after,
+.account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div,
+.card > a,
+.page-header,
+.compose-form .compose-form__warning {
+  box-shadow: none;
+}
+
+body {
+  background: $cream;
+}
+
+.public-layout .header, .public-layout .public-account-header__image {
+  background: $pink;
+  border: 1px solid lighten($pink, 8%);
+}
+
+.public-layout .header .nav-button {
+  background: darken($pink, 4%);
+
+  &:hover, &:focus {
+    background: darken($pink, 6%);
+  }
+}
+
+.public-layout .public-account-header__bar .avatar img {
+  border: 4px solid $purple;
+}
+
+.public-layout .public-account-header__bar:before {
+  background: $purple;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter {
+  border-right: 1px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__tabs__tabs .counter::after {
+  border-bottom: 4px solid lighten($purple, 8%);
+}
+
+.public-layout .public-account-header__image {
+  background: $pink;
+}
+
+.notification__filter-bar button.active::before, .notification__filter-bar button.active::after, .notification__filter-bar a.active::before, .notification__filter-bar a.active::after, .account__section-headline button.active::before, .account__section-headline button.active::after, .account__section-headline a.active::before, .account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.public-layout .footer .grid .column-2 h4 a,
+.public-layout .footer,
+.public-layout .footer h4,
+.public-layout .footer ul a {
+  color: $blueberry;
+}
+
+.public-layout .footer .brand svg {
+  fill: $blueberry;
+}
+
+.account__header__image {
+  background: $pink;
+}
+
+.detailed-status__wrapper {
+  background: $purple;
+}
diff --git a/app/javascript/styles/macaron/variables.scss b/app/javascript/styles/macaron/variables.scss
new file mode 100644
index 000000000..c4983cc9a
--- /dev/null
+++ b/app/javascript/styles/macaron/variables.scss
@@ -0,0 +1,48 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+$purple: #c8c4dd;
+$blue: #c8dbee;
+$green: #dff6eb;
+$pink: #ffcbcb;
+$blueberry: #5971ad;
+$cream: #fffdef;
+$bilberry: #ad599c;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: $green;
+$classic-highlight-color: #2b90d9;
+
+// Differences
+$success-green: #3c754d;
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: $cream;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: $blueberry;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
diff --git a/config/themes.yml b/config/themes.yml
index 9c21c9459..79aabe4a6 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -1,3 +1,4 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+macaron: styles/macaron.scss