Address remaining // XXX

customize.dist/src/less2/include/colortheme-dark.less

@@ -31,7 +31,6 @@
 @cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
 @cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
 
-// XXX this whole block was copy-pasted from colortheme.less to avoid a reference error --ansuz
 @cryptpad_color_hint_grey: #777;
 @cryptpad_color_dark_grey: #999999;
 @cryptpad_color_neutral_grey: #aaaaaa;
@@ -75,7 +74,7 @@
 @cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%);
 @cryptpad_color_light_yellow: #FFE69C;
 @cryptpad_color_yellow_fade: fade(#FFE69C, 15%);
-@cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest
+@cryptpad_color_lighter_blue: #d2e1f2;
 
 @cryptpad_color_link:@cryptpad_color_brand_300;
 
@@ -161,7 +160,7 @@
 @cp_sidebar-left-bg: @cryptpad_color_grey_800;
 @cp_sidebar-left-fg: @cryptpad_text_col;
 @cp_sidebar-right-bg: @cryptpad_color_grey_900;
-@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
+@cp_sidebar-right-fg: @cryptpad_text_col;
 @cp_sidebar-left-active: @cp_sidebar-right-bg;
 @cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
 
@@ -225,7 +224,7 @@
 @cp_creation-button-bg: @cryptpad_color_brand;
 @cp_creation-button-fg: @cryptpad_color_white;
 @cp_creation-error-bg: @cryptpad_color_blue;
-@cp_creation-error-fg: @cryptpad_color_grey_100; // XXX
+@cp_creation-error-fg: @cryptpad_color_grey_100;
 
 // Export
 @cp_export-bg: @cryptpad_color_grey_900;
@@ -283,7 +282,7 @@
 @cp_support-header-bg: @cryptpad_color_grey_800;
 
 // Toolbar
-@cp_toolbar-bg: @cryptpad_color_grey_900;
+@cp_toolbar-bg: @cryptpad_color_grey_850;
 @cp_toolbar-fg: @cryptpad_text_col;
 @cp_toolbar-bottom-fg: @cryptpad_text_col;
 @cp_toolbar-logo-bg: @cryptpad_color_grey_200;

customize.dist/src/less2/include/colortheme.less

@@ -73,7 +73,7 @@
 @cryptpad_color_light_green: #c5ffa8;
 @cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%);
 @cryptpad_color_light_yellow: #FFE69C;
-@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // XXX diff from dark
+@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // different from dark
 @cryptpad_color_lighter_blue: #d2e1f2;
 
 @cryptpad_color_link: #0275D8;
@@ -160,7 +160,7 @@
 @cp_sidebar-left-bg: @cryptpad_color_toolbar_grey;
 @cp_sidebar-left-fg: @cryptpad_text_col;
 @cp_sidebar-right-bg: @cryptpad_color_white;
-@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
+@cp_sidebar-right-fg: @cryptpad_text_col;
 @cp_sidebar-left-active: @cp_sidebar-right-bg;
 @cp_sidebar-hint: @cryptpad_color_hint_grey;
 
@@ -205,9 +205,9 @@
 
 // Rendered Markdown
 @cp_markdown-bg: @cryptpad_color_lighter_grey;
-@cp_markdown-border: @cryptpad_color_grey;
-@cp_markdown-block-fg: @cryptpad_text_col; // XXX
-@cp_markdown-block-bg: @cryptpad_color_grey_200; // XXX
+@cp_markdown-border: @cryptpad_color_grey_400;
+@cp_markdown-block-fg: @cryptpad_text_col;
+@cp_markdown-block-bg: @cryptpad_color_grey_200;
 
 // Avatar
 @cp_avatar-bg: @cryptpad_color_grey;

customize.dist/src/less2/include/drive.less

@@ -183,20 +183,15 @@
                 font-size: 50px;
             }
             .cptools-folder-no-color {
-                color: #bbb; // XXX
+                color: @cryptpad_color_grey_500;
             }
             .fa-check {
                 position: absolute;
                 top: 40%; left: 35%;
                 color: transparent;
             }
-            // XXX Check colors in the "change folder color" modal
             &.cp-app-drive-current-color > .fa-check {
-                color: @cryptpad_color_white;
-            }
-
-            &.cp-app-drive-current-color:first-child > .fa-check {
-                color: @cryptpad_color_black;
+                color: @cryptpad_color_grey_900;
             }
         }
     }

customize.dist/src/less2/include/export.less

@@ -11,7 +11,6 @@
         .cp-export-block {
             width: 800px;
             max-width: 90vw;
-            // XXX Keep hardcoded progress bar colors for now...
             .cp-export-progress-bar-container {
                 height: 24px;
                 background: @cp_loading-progress-bg;

customize.dist/src/less2/include/forms.less

@@ -162,7 +162,7 @@
             }
         }
 
-        &.btn-light { // XXX DARK
+        &.btn-light {
             border-color: @cryptpad_text_col;
             color: @cryptpad_text_col;
             background-color: transparent;

customize.dist/src/less2/include/limit-bar.less

@@ -32,7 +32,6 @@
                 left: 0;
                 top: 0;
                 z-index: 1; // .usage
-                // XXX Check if we can keep the same colors in dark themes
                 &.cp-limit-usage-normal {
                     background: @cp-limit-bar-normal;
                 }

customize.dist/src/less2/include/markdown.less

@@ -149,8 +149,6 @@
         }
     }
 
-    // XXX apply the styles below in modals-ui-elements.less
-
     pre.mermaid[mermaid-source^="pie"] {
         g.legend text, text.pieTitleText {
             fill: @cp_markdown-block-fg;
@@ -192,7 +190,7 @@
         overflow-x: auto;
         overflow-y: hidden;
         color: @cp_markdown-block-fg;
-        background-color: @cp_markdown-block-bg; // XXX
+        background-color: @cp_markdown-block-bg;
     }
 }
 
@@ -203,8 +201,11 @@
             th {
                 padding: 15px;
             }
+            td {
+                padding:3px;
+            }
             th, td {
-                border: 1px solid @cp_markdown-border; // XXX
+                border: 1px solid @cp_markdown-border;
             }
         }
     }

customize.dist/src/less2/include/messenger.less

@@ -8,7 +8,6 @@
     @msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%));
     @msg-bg-color: @bg-color;
     @invert: @bg-color;
-    // XXX Adjust chat colors
     @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%));
     @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%));
     @msg-bg-color-dark: contrast(@bg-color, lighten(@bg-color, 5%), darken(@bg-color, 5%));

customize.dist/src/less2/include/modals-ui-elements.less

@@ -237,6 +237,24 @@
                 pre.mermaid {
                     overflow: unset;
                     margin-bottom: 0;
+                    &[mermaid-source^="pie"] {
+                        g.legend text, text.pieTitleText {
+                            fill: @cp_markdown-block-fg;
+                        }
+                    }
+                    &[mermaid-source^="gantt"] {
+                        text.titleText {
+                            fill: @cp_markdown-block-fg;
+                        }
+                        g.tick {
+                            text {
+                                fill: @cp_markdown-block-fg;
+                            }
+                            line {
+                                stroke: fade(@cp_markdown-block-fg, 50%);
+                            }
+                        }
+                    }
                 }
                 pre.markmap {
                     margin-bottom: 0;
@@ -246,8 +264,13 @@
                     flex-flow: column;
                     svg {
                         flex: 1;
+                        color: @cp_markdown-block-fg;
                     }
                 }
+                pre.mathjax {
+                    padding: 5px;
+                    color: @cryptpad_text_col;
+                }
                 .cp-spinner {
                     border-color: @cryptpad_color_brand;
                     border-top-color: transparent;

customize.dist/src/less2/include/sidebar-layout.less

@@ -74,7 +74,7 @@
             // Following rules are only in settings
             .cp-sidebarlayout-element {
                 pre {
-                    color: @cryptpad_text_col; // XXX
+                    color: @cryptpad_text_col;
                 }
                 label:not(.noTitle), .label {
                     display: block;

customize.dist/src/less2/include/toolbar.less

@@ -421,27 +421,6 @@
             white-space: normal;
         }
 
-        /*button, select {
-            height: @toolbar_line-height;
-            box-sizing: border-box;
-            padding: 3px 10px;
-            margin: 0;
-        }*/
-
-        // XXX I don't think we still use any select in the toolbar
-        select {
-            margin-left: 5px;
-            margin-right: 5px;
-            padding-left: 5px;
-            border: 1px solid #A6A6A6;
-            border-bottom-color: #979797;
-            vertical-align: top;
-            box-sizing: content-box;
-            option {
-                height: 24px;
-            }
-        }
-
         &.cp-toolbar-notitle {
             .cp-toolbar-top-filler {
                 flex: 1;

www/kanban/app-kanban.less

@@ -217,8 +217,8 @@
                 border: none;
                 padding: 5px;
                 margin: 0;
-                //background-color: @cp_markdown-bg; // XXX disabled for being unreadable in dark mode
-                //color: @cp_kanban-fg; // XXX disabled for being unreadable in dark mode
+                background-color: @cp_markdown-bg;
+                color: @cp_kanban-fg;
                 width: 100%;
             }
             table {

www/poll/app-poll.less

@@ -84,7 +84,6 @@
 
     // The placeholder color only seems to effect Safari when not set
 
-    // XXX placeholder in forms.less
     input[type="text"][disabled]::placeholder {
         color: @poll-th-fg;
         opacity: 1;