feat(google-messages): init

scripts/userstyles.yml

@@ -74,6 +74,7 @@ collaborators:
   - &ImenaOphelia ImenaOphelia
   - &koibtw koibtw
   - &TheAnonymousCrusher TheAnonymousCrusher
+  - &titandrive titandrive
 
 userstyles:
   advent-of-code:
@@ -368,6 +369,13 @@ userstyles:
     icon: googlephotos
     color: sapphire
     current-maintainers: [*GenShibe, *WalkQuackBack]
+  google-drive:
+    name: Google Drive
+    link: https://messages.google.com
+    categories: [productivity]
+    icon: googlemessages
+    color: blue
+    current-maintainers: [*titandrive]
   grabify:
     name: Grabify
     link: https://grabify.link

styles/google-messages/catppuccin.user.less

@@ -0,0 +1,252 @@
+/* ==UserStyle==
+@name Google Messages Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/google-messages
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-messages
+@version 2000.01.01
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-messages/catppuccin.user.less
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-messages
+@description Soothing pastel theme for Google Messages
+@author Catppuccin
+@license MIT
+
+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+==/UserStyle== */
+
+@import "https://userstyles.catppuccin.com/lib/lib.less";
+
+@-moz-document domain("messages.google.com") {
+  body.material-next-msg {
+    &:not(.dark-theme) {
+      #catppuccin(@lightFlavor);
+    }
+    &.dark-theme.dark-theme {
+      #catppuccin(@darkFlavor);
+    }
+  }
+
+  #catppuccin(@flavor) {
+    #lib.palette();
+    #lib.defaults();
+
+    --body-bg-color: @base;
+    --scroll-bar-bg-color: @overlay0;
+    --button-hover-bg-color: @surface1;
+    --cdk-overlay-backdrop-bg-color: fade(@crust, 50%);
+    --dialog-bg-color: @mantle;
+    --icon-button-color: @subtext0;
+    --icon-button-disabled-color: @overlay1;
+    --mat-chip-bg-color: @surface1;
+    --mat-chip-color: @text;
+    --mat-menu-bg-color: @mantle;
+    --mat-menu-bg-color-hover: @surface0;
+    --mat-menu-color: @text;
+    --mat-menu-disabled-color: @overlay1;
+    --mat-snackbar-bg-color: @surface2;
+    --mat-snackbar-border-color: @surface2;
+    --mat-snackbar-color: @text;
+    --mat-snackbar-action-color: @accent;
+    --mat-snackbar-btn-hover-focus-bg-color: fade(@surface1, 80%);
+    --mat-slide-toggle-bar-bg-color: fade(@accent, 54%);
+    --mat-slide-toggle-thumb-bg-color: @accent;
+    --mat-slide-toggle-disabled-bg-color: fade(@overlay0, 12%);
+    --mat-app-background-color: @base;
+    --mat-app-text-color: @text;
+    --mat-dialog-container-color: @mantle;
+    --mat-dialog-subhead-color: @text;
+    --mat-dialog-supporting-text-color: @subtext0;
+    --mat-menu-container-color: @mantle;
+    --mat-menu-divider-color: @surface1;
+    --mat-menu-item-label-text-color: @text;
+    --mat-menu-item-icon-color: @subtext0;
+    --mat-menu-item-hover-state-layer-color: fade(@text, 8%);
+    --mat-menu-item-focus-state-layer-color: fade(@text, 12%);
+    --mat-list-list-item-label-text-color: @text;
+    --mat-list-list-item-supporting-text-color: @subtext0;
+    --mat-list-list-item-leading-icon-color: @subtext0;
+    --mat-list-list-item-trailing-supporting-text-color: @subtext0;
+    --mat-list-list-item-trailing-icon-color: @subtext0;
+    --mat-list-list-item-selected-trailing-icon-color: @accent;
+    --mat-list-list-item-hover-label-text-color: @text;
+    --mat-list-list-item-hover-state-layer-color: @text;
+    --mat-list-list-item-focus-label-text-color: @text;
+    --mat-list-list-item-focus-state-layer-color: @text;
+    --mat-select-panel-background-color: @mantle;
+    --mat-select-enabled-trigger-text-color: @text;
+    --mat-select-placeholder-text-color: @subtext0;
+    --mat-select-enabled-arrow-color: @subtext0;
+    --mat-select-focused-arrow-color: @accent;
+    --mat-select-invalid-arrow-color: @red;
+    --mat-option-label-text-color: @text;
+    --mat-option-selected-state-label-text-color: @accent;
+    --mat-option-hover-state-layer-color: fade(@text, 8%);
+    --mat-option-focus-state-layer-color: fade(@text, 12%);
+    --mat-option-selected-state-layer-color: fade(@accent, 12%);
+    --mat-tooltip-container-color: @surface2;
+    --mat-tooltip-supporting-text-color: @text;
+    --mat-snack-bar-container-color: @surface2;
+    --mat-snack-bar-supporting-text-color: @text;
+    --mat-snack-bar-button-color: @accent;
+    --mat-progress-spinner-active-indicator-color: @accent;
+    --mat-slider-active-track-color: @accent;
+    --mat-slider-focus-handle-color: @accent;
+    --mat-slider-hover-handle-color: @accent;
+    --mat-slider-handle-color: @accent;
+    --mat-slider-inactive-track-color: @surface1;
+    --mat-slider-ripple-color: @accent;
+    --mat-slide-toggle-selected-handle-color: @accent;
+    --mat-slide-toggle-selected-track-color: fade(@accent, 60%);
+    --mat-slide-toggle-label-text-color: @text;
+    --mat-slide-toggle-handle-surface-color: @base;
+    --mat-slide-toggle-unselected-handle-color: @overlay1;
+    --mat-slide-toggle-unselected-track-color: @surface1;
+    --mat-checkbox-label-text-color: @text;
+    --mat-checkbox-selected-checkmark-color: @base;
+    --mat-checkbox-selected-icon-color: @accent;
+    --mat-checkbox-selected-focus-icon-color: @accent;
+    --mat-checkbox-selected-hover-icon-color: @accent;
+    --mat-checkbox-selected-pressed-icon-color: @accent;
+    --mat-checkbox-unselected-icon-color: @overlay1;
+    --mat-checkbox-unselected-hover-icon-color: @text;
+    --mat-checkbox-unselected-focus-icon-color: @text;
+    --mat-card-elevated-container-color: @mantle;
+    --mat-card-outlined-container-color: @mantle;
+    --mat-card-filled-container-color: @mantle;
+    --mat-card-outlined-outline-color: @surface1;
+    --mat-card-subtitle-text-color: @subtext0;
+    --mat-button-filled-container-color: @accent;
+    --mat-button-filled-label-text-color: @base;
+    --mat-button-protected-container-color: @surface0;
+    --mat-button-protected-label-text-color: @text;
+    --mat-button-outlined-label-text-color: @text;
+    --mat-button-outlined-outline-color: @surface1;
+    --mat-button-text-label-text-color: @accent;
+    --mat-button-tonal-container-color: @surface1;
+    --mat-button-tonal-label-text-color: @text;
+    --mat-ripple-color: fade(@accent, 12%);
+    --mat-icon-button-state-layer-color: @text;
+    --mat-icon-button-ripple-color: fade(@text, 12%);
+    --mat-focus-indicator-border-color: @accent;
+
+    input, textarea {
+      &::placeholder {
+        color: @subtext0 !important;
+      }
+    }
+
+    mws-picker-wrapper {
+      --box-bg-color: @mantle;
+      --picker-elevation: 0 0 2px fade(@crust, 30%),0 2px 16px fade(@crust, 60%);
+      --picker-tab-focus-bg-color: @surface0;
+      --tab-header-border-color: @surface2;
+    }
+
+    mws-emoji-picker-page-v2 {
+      --picker-font-color: @subtext0;
+      --emoji-picker-diversity-indicator-color: @overlay0;
+      --emoji-picker-header-box-shadow: 0 2px 6px 0 fade(@crust, 45%);
+    }
+
+    mws-message-compose-picker-buttons {
+      --picker-button-fill-color: @subtext0;
+      --picker-button-selected-fill-color: @text;
+    }
+
+    mw-nav-drawer {
+      --nav-drawer-bg-color: @mantle;
+      --nav-drawer-border-color: @surface0;
+      --nav-drawer-color: @text;
+      --nav-drawer-box-shadow: 0 4px 4px 0 fade(@crust, 30%),0 8px 12px 6px fade(@crust, 15%);
+    }
+
+    mws-message-compose {
+      --input-bg-color: @surface0;
+      --input-color: @text;
+      --input-bg-fade-color: @base;
+      --input-bg-transparent-fade-color: fade(@base, 0%);
+      --input-shadow: 0 1px 5px 0 fade(@crust, 15%),0 4px 4px 0 fade(@crust, 10%),0 -0.1px 3px 0 fade(@crust, 8%);
+      --input-reply-header-container-color: @surface1;
+    }
+
+    mws-autosize-textarea {
+      --autosize-textarea-placeholder-disabled-color: @overlay1;
+    }
+
+    mws-header {
+      --header-bg-color: fade(@mantle, 96%);
+      --header-color: @text;
+      --header-back-button-color: @text;
+      --header-back-box-shadow: 0 2px 6px 0 fade(@crust, 45%);
+    }
+
+    mw-branded-header {
+      --branded-header-bg-color: @mantle;
+      --branded-header-border-color: @surface0;
+    }
+
+    mw-fab-link {
+      --fab-icon-container-bg-color: @accent;
+      --fab-label-color: @base;
+      --fab-icon-container-disabled-bg-color: @surface1;
+      --fab-label-disabled-color: @overlay1;
+    }
+
+    mw-main-nav {
+      --main-nav-host-bg-color: @mantle;
+      --main-nav-host-border-color: @crust;
+      --main-nav-header-color: @text;
+      --main-nav-header-menu-color: @subtext0;
+      --main-nav-header-box-shadow: 0 2px 6px 0 fade(@crust, 45%);
+    }
+
+    mws-conversation-list-item {
+      --conv-list-item-checked-avatar-bg-color: @accent;
+      --conv-list-item-checked-avatar-color: @base;
+      --conv-list-item-edit-mode-bg-color: fade(@accent, 20%);
+      --conv-name-color: @text;
+      --conv-snippet-color: @subtext0;
+      --list-grey-hover-bg-color: @surface0;
+      --list-grey-selected-bg-color: @surface1;
+      --conv-notification-icon-fill: @subtext0;
+      --conv-list-selected-indicator-bg-color: @accent;
+    }
+
+    mw-conversation-container {
+      --conv-container-host-bg-color: @base;
+      --legacy-compose-readonly-bg-color: @surface0;
+      --legacy-conversation-readonly-color: @subtext0;
+    }
+
+    mws-conversations-list {
+      --conversations-load-more-bg-color: @mantle;
+      --conversations-load-more-color: @text;
+    }
+
+    mws-message-part-content {
+      --incoming-bg-color: @surface0;
+      --xms-outgoing-bg-color: @lavender;
+      --xms-outgoing-color: @base;
+      --rcs-incoming-bg-color: @surface1;
+      --rcs-outgoing-bg-color: @blue;
+      --rcs-outgoing-color: @base;
+      --empty-bg-color: @base;
+      --replied-to-message-outer--container-color: @base;
+      --message-reply-header-container-color: @surface0;
+    }
+
+    mws-messages-list {
+      --messages-load-more-bg-color: @surface0;
+      --messages-load-more-color: @text;
+      --typing-indicator-row-color: @subtext0;
+    }
+
+    mws-message-send-button {
+      .container {
+        --button-active-color: @accent;
+        --button-inactive-color: @overlay1;
+      }
+    }
+  }
+}