refactor: renamed darker-gray to darkest gray and added new darker gray

stylesheets/_modules.scss

@@ -104,7 +104,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
 }
 
 .module-message__generic-attachment__text {
@@ -115,7 +115,7 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -208,7 +208,7 @@
 }
 
 .module-message__link-preview__title {
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
   font-size: 16px;
   font-weight: 300;
   letter-spacing: 0.15px;
@@ -663,7 +663,7 @@
   line-height: 16px;
   border-radius: 8px;
 
-  box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
+  box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
 }
 
 .module-conversation-list-item__content {
@@ -1083,7 +1083,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
 }
 
 .module-staged-generic-attachment__filename {
@@ -1235,7 +1235,7 @@
   padding: var(--margins-sm);
 }
 .module-staged-link-preview__title {
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
   font-weight: 300;
   font-size: 14px;
   line-height: 18px;

stylesheets/_quote.scss

@@ -107,7 +107,7 @@
   font-size: var(--font-size-sm);
   line-height: 18px;
   font-weight: 300;
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
   margin-bottom: 5px;
 
   overflow-x: hidden;
@@ -137,7 +137,7 @@
 
 .module-quote__primary__type-label {
   font-style: italic;
-  color: var(--color-darker-gray-color);
+  color: var(--color-darkest-gray-color);
   font-size: var(--font-size-sm);
   line-height: 18px;
 }
@@ -242,7 +242,7 @@
   &-file__text {
     font-size: 14px;
     line-height: 18px;
-    color: var(--color-darker-gray-color);
+    color: var(--color-darkest-gray-color);
 
     max-width: calc(100% - 26px);
     overflow-x: hidden;
@@ -272,7 +272,7 @@
 
   &-warning__text {
     margin-inline-start: 6px;
-    color: var(--color-darker-gray-color);
+    color: var(--color-darkest-gray-color);
     font-size: var(--font-size-sm);
     line-height: 18px;
   }

stylesheets/_session_password.scss

@@ -56,7 +56,7 @@
       min-width: 420px;
       padding: 3 * $session-margin-lg 2 * $session-margin-lg;
       box-sizing: border-box;
-      background-color: var(--color-darker-gray-color);
+      background-color: var(--color-darkest-gray-color);
       border: 1px solid $session-shade-8;
       border-radius: 2px;
 

stylesheets/_theme_dark.scss

@@ -5,7 +5,7 @@
     &.modal {
       .content {
         textarea {
-          background-color: var(--color-darker-gray-color);
+          background-color: var(--color-darkest-gray-color);
           border: 1px solid $color-dark-60;
           color: var(--color-lighter-gray-color);
         }
@@ -15,7 +15,7 @@
     .result {
       .open {
         border: solid 1px $color-dark-60;
-        background-color: var(--color-darker-gray-color);
+        background-color: var(--color-darkest-gray-color);
         color: var(--color-lighter-gray-color);
 
         &:before {
@@ -27,7 +27,7 @@
         color: var(--color-lighter-gray-color);
         border: solid 1px $color-dark-60;
         border-right: none;
-        background-color: var(--color-darker-gray-color);
+        background-color: var(--color-darkest-gray-color);
       }
     }
   }
@@ -217,7 +217,7 @@
   // Module: Media Gallery
 
   .module-media-gallery__tab {
-    background-color: var(--color-darker-gray-color);
+    background-color: var(--color-darkest-gray-color);
   }
 
   .module-media-gallery__tab--active {
@@ -237,7 +237,7 @@
   // Module: Media Grid Item
 
   .module-media-grid-item {
-    background-color: var(--color-darker-gray-color);
+    background-color: var(--color-darkest-gray-color);
   }
 
   .module-media-grid-item__icon-image {
@@ -266,7 +266,7 @@
   .module-conversation-list-item__unread-count {
     color: var(--color-white-color);
     background-color: var(--color-session-green-color);
-    box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
+    box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
   }
 
   .module-conversation-list-item__header__name {
@@ -350,7 +350,7 @@
   }
 
   .module-staged-generic-attachment__icon__extension {
-    color: var(--color-darker-gray-color);
+    color: var(--color-darkest-gray-color);
   }
 
   // Module: Staged Placeholder Attachment

ts/themes/SessionTheme.tsx

@@ -30,7 +30,8 @@ const lightGrayColor = '#8b8e91';
 const lighterGrayColor = '#e9e9e9';
 const lightestGrayColor = '#f3f3f3';
 const darkGrayColor = '#414347';
-const darkerGrayColor = '#17191d';
+const darkerGrayColor = '#2f2f2f';
+const darkestGrayColor = '#17191d';
 
 // DARK COLORS
 const darkColorAccent = accentDarkTheme;
@@ -384,6 +385,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-lightest-gray-color: ${lightestGrayColor};
     --color-dark-gray-color: ${darkGrayColor};
     --color-darker-gray-color: ${darkerGrayColor};
+    --color-darkest-gray-color: ${darkestGrayColor};
     --color-light-blue-color: ${lightBlueColor};
 
     --color-warning:  ${warning};