mailspring.tera

---
accent: lavender
whiskers:
  version: 2.4.0
  matrix:
    - flavor
    - file: ["styles/email-frame.less", "styles/ui-variables.less", "package.json"]
  filename: "src/Catppuccin-{{ flavor.identifier | capitalize }}/{{ file }}"
  hex_format: "{{R}}{{G}}{{B}}"
---
{%- if file == "package.json" -%}
{
  "name": "Catppuccin-{{ flavor.identifier | capitalize }}",
  "title": "Catppuccin {{ flavor.identifier | capitalize }} Mailspring Theme",
  "displayName": "Catppuccin-{{ flavor.identifier | capitalize }}",
  "theme": "ui",
  "version": "1.1.1",
  "description": "Catppuccin theme - {{ flavor.identifier | capitalize }} flavour",
  "license": "MIT",
  "engines": {
    "mailspring": "*"
  }
}
{%- elif file == "styles/ui-variables.less" -%}
@import "base/ui-variables";

@accent-primary: #{{ flavor.colors[accent].hex }};
@accent-primary-dark: @accent-primary;

@background-primary: #{{ base.hex }};
@background-off-primary: #{{ base.hex }};
@background-secondary: #{{ surface0.hex }};
@background-tertiary: #{{ surface0.hex }};

@border-color-primary: #{{ mantle.hex }};
@border-color-secondary: #{{ mantle.hex }};
@border-color-tertiary: @accent-primary;
@border-color-divider: #{{ mantle.hex }};

@text-color: #{{ text.hex }};
@text-color-subtle: #{{ subtext0.hex }};
@text-color-very-subtle: #{{ overlay1.hex }};
@text-color-inverse: #{{ text.hex }};
@text-color-inverse-subtle: #{{ subtext1.hex }};
@text-color-inverse-very-subtle: #{{ subtext1.hex }};
@text-color-heading: #{{ subtext1.hex }};

@text-color-link: @accent-primary;
@text-color-link-hover: #{{ rosewater.hex }};
@text-color-link-active: @accent-primary;

@btn-default-bg-color: #{{ surface0.hex }};
@dropdown-default-bg-color: #{{ surface0.hex }};

@input-bg: #{{ surface0.hex }};
@input-border: #{{ surface0.hex }};

@list-bg: #{{ surface0.hex }};
@list-border: #{{ surface0.hex }};
@list-selected-color: @text-color-inverse;
@list-focused-color: #{{ base.hex }};

@toolbar-background-color: #{{ mantle.hex }};
@panel-background-color: #{{ mantle.hex }};

@text-color-prefilter:    @text-base-prefilter;
@text-base-prefilter:  spin(#fff - @text-color, 180);

//Line below the toolbar
.sheet-toolbar {
    position: relative;
    -webkit-app-region: drag;
    border-bottom: 1px solid #{{ base.hex }};
    }

//Right panel, left border
.column-MessageListSidebar {
    border-left: transparent;
}

//Message panel, right border
.flexbox-handle-horizontal div {
    height: 100%;
    box-shadow: transparent;
}

// Message filter
@message-filter:       invert(100%) hue-rotate(180deg);
@message-filter-undo:  hue-rotate(-180deg) invert(120%); // white will be a bit fainter

@text-base-prefilter:  spin(#fff - @text-color, 180);
//@orange-prefilter:     @accent-primary; // set manually, as hue-rotate is only an approximation of spin
//@orange-prefilter:  spin(#fff - @accent-primary, 180); // set automatically, but suboptimally

//to correct the colour of the links inside the mail body after applying the prefilter
#inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) {
a {
    color: #{{ surface0.hex }};
    }
}

/* Badge with counter, secondary */
.item-count-box:not(.selected):not(.focused) {
  color: #{{ base.hex }};
  box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1);
  background: @accent-primary
}

/* Badge with counter, primary, selected */
.outline-view .item .item-count-box.alt-count {
    color: @accent-primary;
    background: #{{ base.hex }};
    box-shadow: none;
}

/* Badge with counter, primary, not selected */
.outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) {
    color: #{{ base.hex }};
    background: @accent-primary;
    box-shadow: none;
}

/* tracking icon, unopened, unfocused */
.open-tracking-icon img.content-mask.unopened {
    background-color: #{{ surface1.hex }};
}

/* tracking icon, mail list, unopened, focused */
.list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened {
    background-color: #{{ surface1.hex }};
}

/* tracking icon, mail list, opened, unfocused */
.open-tracking-icon img.content-mask.opened {
    background-color: #{{ text.hex }};
}

/* tracking icon, opened, focused */
.list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened {
    background-color: #{{ text.hex }};
}

/* tracking icon, message list, opened */
.open-tracking-message-status.opened img.content-mask {
    background-color: #{{ text.hex }};
}

/* tracking icon, message list, focused, more than one selected */
.thread-list.handler-split .list-item.selected {
    color: #{{ base.hex }};
}

/* tracking icon, mail list, unopened, unfocused */
.open-tracking-icon img.content-mask.unopened {
    background-color: #{{ surface1.hex }};
}

//Tracking icon, toolbar activity
.toolbar-activity .unread-count.active {
    background: @accent-primary;
    color: #{{ base.hex }};
}

//Tracking message status opened
.open-tracking-message-status.opened {
    color: #{{ text.hex }};
}

//Tracking message status unopened
.open-tracking-message-status.unopened {
    color: #{{ overlay1.hex }};
}

// Account switching icon
.account-switcher img {
    zoom: 1 !important;
    max-width: 10px;
    max-height: 6px;
    transform: none;
    background-image: none;
    background-color: @text-color-very-subtle;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="#FFF" d="M0 0h1l4 4 4-4h1v1L5 6 0 1z"/></svg>');
}

//Activity icon colour (without accent)//
.toolbar-activity .activity-toolbar-icon {
    background: #{{ subtext0.hex }};
}

//Search bar//
.div.suggestions {
    &:hover {
    color:@accent-primary
    }
}

//Composer button //
.button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item {
    position: relative;
    color: #{{ base.hex }};
    font-weight: 500;
    background: @accent-primary;
    box-shadow: none;
    border: 0px solid @accent-primary;
}

.button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask {
    background-color: #{{ base.hex }};
}

.button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active {
    background: @accent-primary;
}

//Composer name//
.tokenizing-field .token {
    background: linear-gradient(to bottom, #{{ surface0.hex }} 0%, #{{ surface1.hex }} 100%);
}

.tokenizing-field .token.selected, .tokenizing-field .token.dragging {
    color: #{{ base.hex }};
}

.tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img {
    background-color: #{{ base.hex }};
}

//Composer dropdown list//
.menu .item.selected, .menu .item:active {
    background-color: #4e4947;
    color: #{{ text.hex }};
}

.div.button-dropdown.open.open-down {
    background-color: #{{ text.hex }};
    color: #{{ text.hex }};
}

.menu .item.selected, .menu .item:active {
    background-color: @accent-primary;
    color: #{{ base.hex }};
}

.menu .item.selected .primary, .menu .item:active .primary {
    color: #{{ base.hex }};
}

.menu .item.selected .secondary, .menu .item:active .secondary {
    color: #{{ surface0.hex }};
}

//Reply button
.button-dropdown .primary-item, .button-dropdown .only-item {
    background: -webkit-gradient(linear, left top, left bottom, from(#{{ surface0.hex }}), to(#{{ surface1.hex }}));
}

.button-dropdown .secondary-picker {
    background: -webkit-gradient(linear, left top, left bottom, from(#{{ surface0.hex }}), to(#{{ surface1.hex }}));
}

.button-dropdown.open.open-down .secondary-items {
    background: #{{ surface0.hex }}
}

//Composer unfocused
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
    background: #{{ surface0.hex }}
}

//Composer focused, borders
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused {
    box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary;
}

.composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused {
    background-color: #{{ surface0.hex }};
}

//Unsubscribe action
.unsubscribe-action {
    color: @accent-primary;
    text-decoration: underline;
}

//Undo/redo floating message
.undo-redo-toast .content {
    background: @accent-primary;
}

//Preferences, accounts details, background colour
.preferences-wrap .container-accounts .accounts-content .account-details {
    background-color: #{{ base.hex }};
}

//Preferences, account lists, background colour
.nylas-editable-list .items-wrapper {
    background-color: #{{ surface0.hex }};
}


// Remove box-shadow on thread list quick action buttons
.thread-injected-quick-actions .btn {
  box-shadow: none;
}

// Remove gradients quick action buttons
.thread-list .list-item .list-column-HoverActions .action.action-trash {
  background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center
      no-repeat,
    @accent-primary;
}

// Remove gradients quick action buttons
.thread-list .list-item .list-column-HoverActions .action.action-archive {
  background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png')
      center no-repeat,
    @accent-primary;
}

// Remove gradients quick action buttons
.thread-list .list-item .list-column-HoverActions .action.action-snooze {
  background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center
      no-repeat,
    @accent-primary;
}

// Change default color of star to gray
.thread-list .thread-icon.thread-icon-star,
.draft-list .thread-icon.thread-icon-star {
  filter: grayscale(100%);
}

// Change color on message button
#message-list {
	// Labels
	.mail-label.removable {
		color: #{{ base.hex }} !important;
		background: @accent-primary !important;
    box-shadow: none !important;
	}
}

// Change color of unread mail dot
.thread-list, .draft-list {
	.thread-icon {
			&.thread-icon-unread {
        filter: grayscale(100%);
					}
	}
}

//Changing the colour of the attachment icon
.thread-icon:not(.thread-icon-unread):not(.thread-icon-star) {
-webkit-filter: invert(100%);
}
img.content-dark {
-webkit-filter: invert(100%);
}
img.content-light {
-webkit-filter: invert(100%);
}

.mail-label {
-webkit-filter: contrast(110%) brightness(85%);
}
{%- else -%}
// This file, with the hardcoded name 'email-frame.less',
// can be used to modify the style of email messages in the
// message list, i.e. the style of the contents of the
// html iframe elements within the mailspring message list.
// There are three requirements for doing so:
// 1) The name of this file must be 'email-frame.less'.
// 2) There cannot be an 'index.less' (which would otherwise
//    organizes the import order of the .less files).
// 3) Style properties have to be placed inside a
//   '.ignore-in-parent-frame' parent selector.
// The third requirement is actually more a best practice,
// than a hard requirement.
// These three requirements are a bit odd, but they are
// an unavoidable consequence of the current implementation
// of Mailspring.

@import 'ui-variables';

// Display messages as dark as possible, without
// sacrificing their design or readibility.
// To this end, invert the colors of everyting that is not an image
// or inside an html table. This makes content that was originally
// meant to be read on a white background readible on a dark
// background. At the same time, emails with a custom HTML formatting
// are kept intact.
// The broadly valid assumption is made here that in html table
// emails the table is not nested deeper than 4 levels below the
// inbox-html-wrapper. The only case I found so far where this
// assumption is violated, is when tables become deeply nested
// because of blockquotes in repleated forwards/replies.
.ignore-in-parent-frame {
    #inbox-html-wrapper, #inbox-plain-wrapper {

        // Invert the color of everything in the message.
        color: @text-color-prefilter !important;
        blockquote {
            border-color: @text-color-prefilter;
        }
        filter: @message-filter;

        // Undo the color inversion for html tables, while
        // adding/restoring color elements for emails that
        // implicitly assume a white background.
        > table,
        > :not(table) > table,
        > :not(table) > :not(table) > table,
        > :not(table) > :not(table) > :not(table) > table {
            padding: 10px;
            color: black;
            background: white !important;
            a, a:hover, a:active {
                color: unset;
            }
            filter: @message-filter-undo;
        }

        // Undo the color inversion for all images that are not
        // part of html tables.
        > img,
        > :not(table) > img,
        > :not(table) > :not(table) > img,
        > :not(table) > :not(table) > :not(table) > img,
        > :not(table) > :not(table) > :not(table) > :not(table) img {
            filter: @message-filter-undo;
        }

        // Force a transparent background for emails that
        // are not based on html tables.
        > :not(table),
        > :not(table) > :not(table),
        > :not(table) > :not(table) > :not(table),
        > :not(table) > :not(table) > :not(table) > :not(table) {
            background: transparent !important; // e.g. sidebars in Stack Overflow emails
        }
    }
}
// see also composer.less!

// The print version of the message requires the message
// content to be black. The below selects the content that
// needs to be converted to black in such a way that it only
// applies to the print version.
#print-header,
h1.print-subject,
.print-participants,
#message-list #inbox-html-wrapper {
    color: black;
    a, a:hover, a:active {
        color: unset;
    }
}

// overwrite all color inversion filters with null operation
// filters of a higher css specificity
#message-list #inbox-html-wrapper {
    filter: unset;

    > table,
    > :not(table) > table,
    > :not(table) > :not(table) > table,
    > :not(table) > :not(table) > :not(table) > table {
        filter: unset;
    }

    > img,
    > :not(table) > img,
    > :not(table) > :not(table) > img,
    > :not(table) > :not(table) > :not(table) > img,
    > :not(table) > :not(table) > :not(table) > :not(table) img {
        filter: unset;
    }
}
{%- endif %}