Oktopost V2 by danylpo

/* ==UserStyle==
@name           app.oktopost.com - Apr 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("oktopost.com") {
/*** Variables ***/
:root {
  /**
 * Font Weights // new
 */
  --font-weight-S: 400;  /* Body, Caption */
  --font-weight-M: 500;    /* Buttons, Labels, Pressed states */
  --font-weight-L: 700;   /*Headings */
    /** 
 * Font Size // upd
 */
  --fontSizeHeading2: 18px; 
  --fontSizeHeading3: 14px; 
  --fontSizeBody: 14px;
  --fontSizeCaption: 12px; 
    /**
 * Font Family // upd
 */
  --fontFamilyPrimary: Haas Grot Text; /* Body, Caption, Components */
  --fontFamilyHeadline: Haas Grot Text; /* Headings */
    /**
 * Color Text // upd
 */
  --colorTextPrimary: #3b3c4f;
  --colorTextSecondary: #787996;
      /**
 * Color Backgrounds // new
 */
  --color-bg-primary: #FFFFFF;  /* $colorLight */
  --color-bg-secondary: #f0f0f3; /* $colorBgExtraLight */
  
  
  /**
 * All
 */
    --colorPrimary: #2060e6;
    --colorPrimaryShade20: #1a4dba;
    --colorPrimaryTint40: #79a0f2;
    --colorPrimaryTint80: #d2dffb;
    --colorPrimaryTint90: #e9effd;
    --colorDisabled: #bcbcbc;
    --colorBorder: #e5e5e5;
    --colorLight: #fff;
    --colorDark: #000;
    --colorBgDark: #102248;
    --colorBgLight: #f3f5f8;
    --colorBgExtraLight: #fcfcfc;
    --colorFocus: #d2dffb;
    --colorHotPink: #ED7AED;
    --colorHotPinkTint70: #fad7fa;
    --colorHotPinkTint80: #fbe4fb;
    --colorVividTangerine: #FF876F;
    --colorVividTangerineTint70: #ffdbd4;
    --colorVividTangerineTint80: #ffe7e2;
    --colorCerulean: #35D5FB;
    --colorCeruleanTint70: #c2f2fe;
    --colorCeruleanTint80: #d7f7fe;
    --colorKoromiko: #FFC766;
    --colorKoromikoTint70: #ffeed1;
    --colorKoromikoTint80: #fff4e0;
    --colorMountainMeadow: #1CD7A8;
    --colorMountainMeadowTint70: #bbf3e5;
    --colorMountainMeadowTint80: #d2f7ee;
    --colorMediumPurple: #8F7BFF;
    --colorMediumPurpleTint70: #ddd7ff;
    --colorMediumPurpleTint80: #e9e5ff;
    --colorOlive: #C6C500;
    --colorOliveTint70: #eeeeb3;
    --colorOliveTint80: #f4f3cc;
    --colorNavy: #143B8C;
    --colorNavyTint70: #b9c4dd;
    --colorNavyTint80: #d0d8e8;
    --colorCandy: #FC798A;
    --colorCandyTint70: #fed7dc;
    --colorCandyTint80: #fee4e8;
    --colorVividViolet: #CD4FCE;
    --colorVividVioletTint70: #f9e8f9;
    --colorVividVioletTint80: #f5dcf5;
    --colorErrorShade10: #dc3c57;
    --colorError: #ed6371;
    --colorErrorTint40: #f3adae;
    --colorErrorTint70: #f5cfcf;
    --colorErrorTint80: #faeeee;
        --mandy-6: #dc3c57;
        --mandy-4: #f08a90;
        --mandy-3: #f3adae;
        --mandy-2: #f5cfcf;
        --mandy-1: #faeeee;
    --colorSuccess: #1CD7A8;
    --colorSuccessShade10: #19c297;
    --colorSuccessTint40: #77e7cb;
    --colorSuccessTint70: #bbf3e5;
    --colorSuccessTint80: #d2f7ee;
    

    --colorWarning: #DF9509;
    --colorWarningShade20: #cc9f52;
    --colorWarningTint40: #ffdda3;
    --colorWarningTint70: #ffeed1;
    --colorWarningTint80: #fff4e0;
  
  
  
  
  
    /* NEW */
/* Oktopost Black */
--oktopost-black-9: #282936;
--oktopost-black-8: #3a3b4e;
--oktopost-black-7: #4e5068;
--oktopost-black-6: #626481;
--oktopost-black-5: #787996;
--oktopost-black-4: #9090a9;
--oktopost-black-3: #a7a7bb;
--oktopost-black-2: #bebfcd;
--oktopost-black-1: #d8d8e0;
--oktopost-black-0: #f0f0f3;

/* Oktopost Blue */
--oktopost-blue-9: #0f2763;
--oktopost-blue-8: #0f388d;
--oktopost-blue-7: #174cb9;
--oktopost-blue-6: #205fe3;
--oktopost-blue-5: #4b74f8;
--oktopost-blue-4: #798cf9;
--oktopost-blue-3: #9aa3fa;
--oktopost-blue-2: #b8bcfb;
--oktopost-blue-1: #d5d6fa;
--oktopost-blue-0: #f0f0fb;

/* Lawn Green */
--lawn-green-9: #1c2f04;
--lawn-green-8: #244401;
--lawn-green-7: #325b02;
--lawn-green-6: #407203;
--lawn-green-5: #4e8905;
--lawn-green-4: #5ea307;
--lawn-green-3: #6dbc09;
--lawn-green-2: #7dd512;
--lawn-green-1: #91ea2f;
--lawn-green-0: #d9fcb0;

/* School Bus Yellow */
--school-bus-yellow-9: #312900;
--school-bus-yellow-8: #463c00;
--school-bus-yellow-7: #5d5000;
--school-bus-yellow-6: #746500;
--school-bus-yellow-5: #8c7a01;
--school-bus-yellow-4: #a69101;
--school-bus-yellow-3: #bfa700;
--school-bus-yellow-2: #d9be00;
--school-bus-yellow-1: #f5d700;
--school-bus-yellow-0: #fef0c2;

/* Red */
--red-9: #50131c;
--red-8: #711a29;
--red-7: #952638;
--red-6: #b83147;
--red-5: #dc3c57;
--red-4: #ed6371;
--red-3: #f08a90;
--red-2: #f3adae;
--red-1: #f5cfcf;
--red-0: #faeeee;

/* Fun Green */
--fun-green-9: #0d3115;
--fun-green-8: #11461f;
--fun-green-7: #1a5d2c;
--fun-green-6: #227438;
--fun-green-5: #2b8c45;
--fun-green-4: #35a653;
--fun-green-3: #3ebf61;
--fun-green-2: #4ad970;
--fun-green-1: #65f486;
--fun-green-0: #d4fad8;

/* Saffron Mango */
--saffron-mango-9: #382600;
--saffron-mango-8: #513700;
--saffron-mango-7: #6b4a00;
--saffron-mango-6: #855d00;
--saffron-mango-5: #a07100;
--saffron-mango-4: #be8700;
--saffron-mango-3: #db9b00;
--saffron-mango-2: #f8b101;
--saffron-mango-1: #fed087;
--saffron-mango-0: #fdeedb;

/* Caribbean Green */
--caribbean-green-9: #053024;
--caribbean-green-8: #034634;
--caribbean-green-7: #055d47;
--caribbean-green-6: #087459;
--caribbean-green-5: #0c8c6c;
--caribbean-green-4: #12a681;
--caribbean-green-3: #16bf95;
--caribbean-green-2: #20d9aa;
--caribbean-green-1: #47f3c2;
--caribbean-green-0: #cafce8;

/* Salmon */
--salmon-9: #550c03;
--salmon-8: #7d0006;
--salmon-7: #a4000e;
--salmon-6: #ca0014;
--salmon-5: #f1001a;
--salmon-4: #ff533f;
--salmon-3: #ff836c;
--salmon-2: #fea996;
--salmon-1: #fccec3;
--salmon-0: #fceeea;

/* Froly */
--froly-9: #56071c;
--froly-8: #7a0529;
--froly-7: #a00838;
--froly-6: #c60d47;
--froly-5: #ec1256;
--froly-4: #fd5170;
--froly-3: #fd818f;
--froly-2: #fda8ae;
--froly-1: #fbcdcf;
--froly-0: #fbedee;

/* Lavender Magenta */
--lavender-magenta-9: #471349;
--lavender-magenta-8: #661b68;
--lavender-magenta-7: #862689;
--lavender-magenta-6: #a632a9;
--lavender-magenta-5: #c73dcb;
--lavender-magenta-4: #e652e9;
--lavender-magenta-3: #ee7fee;
--lavender-magenta-2: #f3a6f1;
--lavender-magenta-1: #f5ccf3;
--lavender-magenta-0: #faedf9;

/* Wattle */
--wattle-9: #2b2b0a;
--wattle-8: #3e3e0a;
--wattle-7: #535410;
--wattle-6: #686816;
--wattle-5: #7e7e1d;
--wattle-4: #959624;
--wattle-3: #acad2b;
--wattle-2: #c4c534;
--wattle-1: #dede4d;
--wattle-0: #f8f573;

/* Scooter */
--scooter-9: #072f39;
--scooter-8: #054352;
--scooter-7: #085a6c;
--scooter-6: #0d7087;
--scooter-5: #1387a2;
--scooter-4: #17a0c0;
--scooter-3: #1db9dc;
--scooter-2: #26d2fa;
--scooter-1: #9ee4fb;
--scooter-0: #e1f4fb;
}







/*** Styles ***/
.h1 {
  font-weight: var(--font-weight-L);
}

.h2 {
  font-weight: var(--font-weight-L);
}

.h3 {
  font-weight: var(--font-weight-M);
}

h1 {
  font-weight: var(--font-weight-L);
}

h2 {
  font-weight: var(--font-weight-L);
}

h3 {
  font-weight: var(--font-weight-M);
}

body {
  letter-spacing: 0.1px;
}

.description-text {
  color:  var(--colorTextSecondary) !important;
}

.nullstate h1 {
  font-weight: var(--font-weight-L);
  }

/*** Components ***/

.lobster-field__label-text-container {
  margin-bottom: 8px;
}

.audit-trail__item-message {
  font-size: var(--fontSizeCaption);
  color:  inherit;
}

.audit-trail__item-body {
  color:  var(--colorTextPrimary);
}

.engagement-item.not-read {
  font-weight: var(--font-weight-M);
  color:  var(--colorTextPrimary);
}

.lobster-table-column-title__container, .base-table th, .base-table thead td  {
  font-size: var(--fontSizeCaption);
  font-weight: var(--font-weight-M);
  color: var(--colorTextPrimary);
}

.nav-submenu__item.active, .nav-submenu__item:hover {
  font-weight: var(--font-weight-M);
}

.lobster-chip {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-S);
  font-size: var(--fontSizeCaption);
}

.lobster-tag {
  font-size: var(--fontSizeCaption);
}

.lobster-menu-search__input {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-S);
  font-size: var(--fontSizeBody);
}

.lobster-fieldset__title, .base-accordion__item-bt.base-accordion__item-btn {
  font-weight: var(--font-weight-M);
  color:  var(--colorTextPrimary);
  font-size: var(--fontSizeHeading2);
}

.lobster-field__label-text-container {
  font-weight: var(--font-weight-M); 
}

.text-button {
  font-weight: var(--font-weight-M);
}

.lobster-button {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-M);
  font-size: var(--fontSizeBody);
}

.button {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-M);
  font-size: var(--fontSizeBody);
}

.editor-action-btn {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-M);
  font-size: var(--fontSizeCaption);
}

.tabs__item.active, .lobster-tabs-navigation-item.active {
  font-weight: var(--font-weight-M);
}

.lobster-menu-item {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
}

.lobster-menu-item.m_selected {
  font-weight: var(--font-weight-M);
}

.lobster-menu-item.m_group-title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-M);
  font-size: var(--fontSizeBody);
}

.lobster-dynamic-modal__header {
  background-color: #fff;
  min-height: 64px;
  padding-top: 12px;
  padding-right: 24px;
}

.lobster-dynamic-modal__title  {
   font-weight: var(--font-weight-L);
   font-size: var(--fontSizeHeading2);
}
}



.lobster-switch__text-caption, .lobster-field__caption-text, .lobster-field__description-...