Merge pull request #1467 from nbelyh/dark-mode-fixes

joaojmendes · web-flow · commit 0fedf45e96fc · 2023-02-24T08:41:09.000Z
Use theme colors - fix dark mode, RichText and FilePicker
diff --git a/src/controls/filePicker/FilePicker.module.scss b/src/controls/filePicker/FilePicker.module.scss
@@ -42,7 +42,7 @@
   padding-bottom: 0px;
   padding-left: 15px;
   height: 36px;
-  color: $ms-color-neutralPrimary;
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
   background-color: transparent;
   width: 100%;
   line-height: 36px;
@@ -73,8 +73,8 @@
   padding-bottom: 0px;
   padding-left: 15px;
   height: 36px;
-  color: $ms-color-themePrimary;
-  background-color: $ms-color-neutralLighter;
+  color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
+  background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
   width: 100%;
   line-height: 36px;
   text-overflow: ellipsis;
@@ -118,7 +118,7 @@
 .nav {
   position: absolute;
   height: 100%;
-  color: $ms-color-neutralLighter;
+  color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
 }
 
 [dir="ltr"] .nav {
@@ -134,13 +134,13 @@
   box-sizing: border-box;
   border-top-width: 40px;
   border-top-style: solid;
-  color: $ms-color-neutralLighter;
+  color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
 }
 
 .tabHeaderContainer {
   display: inline-block;
   width: 100%;
-  color: $ms-color-neutralLighter;
+  color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
   border-top: 40px solid;
 }
 
@@ -149,7 +149,7 @@
   padding: 22px 32px;
 }
 .breadcrumbNavItem {
-  color: $ms-color-neutralPrimary;
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
   font-size: 24px;
   font-weight: 600;
   padding: 22px 8px 20px 0;
@@ -189,7 +189,7 @@
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  background-color: $ms-color-white;
+  background-color: "[theme:white, default:#{$ms-color-white}]";
   -ms-flex-negative: 0;
   flex-shrink: 0;
   z-index: 100;
@@ -232,7 +232,7 @@
 }
 
 .tabHeader {
-  color: $ms-color-neutralPrimary;
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
   margin: 0;
   font-size: 24px;
   font-weight: 600;
diff --git a/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss b/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss
@@ -14,11 +14,11 @@
 }
 
 .localTabFilename {
-  color: $ms-color-neutralPrimary;
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
 }
 
 .localTabLabel {
-  color: $ms-color-themePrimary;
+  color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
   cursor: pointer;
 }
 
@@ -33,7 +33,7 @@
 
 .localTabDragDropFile {
   // width: 100%;
-  border: 1px black dashed;
+  border: 1px "[theme:black, default:#{$ms-color-black}]" dashed;
   text-align: center;
   padding: 75px;
 }
diff --git a/src/controls/filePicker/RecentFilesTab/RecentFilesTab.module.scss b/src/controls/filePicker/RecentFilesTab/RecentFilesTab.module.scss
@@ -19,7 +19,7 @@
 .itemTile.isFile,
 .itemTile.isPhoto,
 .itemTile.isVideo {
-  background-color: $ms-color-neutralLighter;
+  background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
 }
 
 .itemTile {
@@ -60,9 +60,9 @@
     top: 2px;
     bottom: 2px;
     border: 1px solid;
-    border-color: $ms-color-white;
-    -webkit-box-shadow: 0 0 0 2px $ms-color-neutralSecondaryAlt;
-    box-shadow: 0 0 0 2px $ms-color-neutralSecondaryAlt;
+    border-color: "[theme:white, default:#{$ms-color-white}]";
+    -webkit-box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
+    box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
   }
 }
 
@@ -79,13 +79,13 @@
 .itemTile.isFile .itemTileFileContainer {
   border-width: 1px;
   border-style: solid;
-  border-color: $ms-color-neutralLight;
+  border-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
 }
 
 .itemTileFile {
   .itemTileFileContainer {
     position: absolute;
-    background-color: $ms-color-neutralLighter;
+    background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
     left: 0;
     right: 0;
     top: 0;
@@ -143,16 +143,16 @@
   right: 0;
   min-height: 20px;
   padding: 4px 8px 8px;
-  background-color: $ms-color-white;
-  color: $ms-color-neutralPrimary;
+  background-color: "[theme:white, default:#{$ms-color-white}]";
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .itemTile.isFile .itemTileNamePlate {
   opacity: 0.95;
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: $ms-color-neutralLight;
+  border-top-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
   min-height: 35px;
 }
 
diff --git a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.module.scss b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.module.scss
@@ -14,11 +14,11 @@
 }
 
 .localTabFilename {
-  color: $ms-color-neutralPrimary;
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
 }
 
 .localTabLabel {
-  color: $ms-color-themePrimary;
+  color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
   cursor: pointer;
 }
 
diff --git a/src/controls/filePicker/WebSearchTab/WebSearchTab.module.scss b/src/controls/filePicker/WebSearchTab/WebSearchTab.module.scss
@@ -81,7 +81,7 @@
   top: 2px;
   bottom: 2px;
   box-sizing: border-box;
-  border: 1px solid $ms-color-white;
+  border: 1px solid "[theme:white, default:#{$ms-color-white}]";
 }
 
 .filePickerFolderCardSizer {
@@ -92,7 +92,7 @@
   width: 100%;
   left: 0;
   top: 0;
-  color: $ms-color-white;
+  color: "[theme:white, default:#{$ms-color-white}]";
   position: absolute;
   bottom: 0;
   font-size: 12px;
@@ -104,7 +104,7 @@
   height: 100%;
   width: 100%;
   top: 0;
-  color: $ms-color-white;
+  color: "[theme:white, default:#{$ms-color-white}]";
   padding: 10px;
   position: absolute;
   bottom: 0;
@@ -116,13 +116,13 @@
   font-weight: 600;
 
   &:hover {
-    color: $ms-color-neutralLight;
+    color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
     background-color: rgba(0, 0, 0, 0.6);
   }
 
   &:active {
-    background-color: $ms-color-neutralTertiaryAlt;
-    color: $ms-color-neutralDark;
+    background-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
+    color: "[theme:neutralDark, default:#{$ms-color-neutralDark}]";
   }
 }
 
@@ -167,15 +167,15 @@
     top: 2px;
     bottom: 2px;
     border: 1px solid;
-    border-color: $ms-color-white;
-    -webkit-box-shadow: 0 0 0 2px $ms-color-neutralSecondaryAlt;
-    box-shadow: 0 0 0 2px $ms-color-neutralSecondaryAlt;
+    border-color: "[theme:white, default:#{$ms-color-white}]";
+    -webkit-box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
+    box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
   }
 }
 
 .bingTileContent {
   border: 1px solid;
-  border-color: $ms-color-white;
+  border-color: "[theme:white, default:#{$ms-color-white}]";
   width: 100%;
   height: 100%;
 }
@@ -187,8 +187,8 @@
   top: 2px;
   right: 2px;
   bottom: 2px;
-  -webkit-box-shadow: 0 0 0 2px $ms-color-neutralTertiaryAlt;
-  box-shadow: 0 0 0 2px $ms-color-neutralTertiaryAlt;
+  -webkit-box-shadow: 0 0 0 2px "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
+  box-shadow: 0 0 0 2px "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
   outline: 1px solid transparent;
 }
 
@@ -213,8 +213,8 @@
   left: 0;
   right: 0;
   padding: 4px 8px 8px;
-  background-color: $ms-color-white;
-  color: $ms-color-neutralPrimary;
+  background-color: "[theme:white, default:#{$ms-color-white}]";
+  color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
   white-space: nowrap;
   text-overflow: ellipsis;
   opacity: 0.95;
diff --git a/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss b/src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
@@ -41,7 +41,7 @@
   top: 2px;
   bottom: 2px;
   box-sizing: border-box;
-  border: 1px solid $ms-color-white;
+  border: 1px solid "[theme:white, default:#{$ms-color-white}]";
 }
 
 .filePickerFolderCardSizer {
@@ -52,19 +52,19 @@
   width: 100%;
   left: 0;
   top: 0;
-  color: $ms-color-white;
+  color: "[theme:white, default:#{$ms-color-white}]";
   position: absolute;
   bottom: 0;
   font-size: 12px;
   width: 100%;
 }
 
 .filePickerFolderCardLabel {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
   height: 100%;
   width: 100%;
   top: 0;
-  color: $ms-color-white;
+  color: "[theme:black, default:#{$ms-color-black}]";
   padding: 10px;
   position: absolute;
   bottom: 0;
@@ -81,13 +81,13 @@
   }
 
   &:hover {
-    color: $ms-color-neutralLight;
-    background-color: rgba(0, 0, 0, 0.6);
+    color: "[theme:black, default:#{$ms-color-black}]";
+    background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
   }
 
   &:active {
-    background-color: $ms-color-neutralTertiaryAlt;
-    color: $ms-color-neutralDark;
+    color: "[theme:black, default:#{$ms-color-black}]";
+    background-color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
   }
 }
 
diff --git a/src/controls/filePicker/controls/FolderTile/FolderTile.module.scss b/src/controls/filePicker/controls/FolderTile/FolderTile.module.scss
@@ -77,7 +77,7 @@
   max-height: 100%;
   -webkit-box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2);
   box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2);
-  background-color: $ms-color-white;
+  background-color: "[theme:white, default:#{$ms-color-white}]";
   min-width: 32px;
   min-height: 32px;
 }
diff --git a/src/controls/richText/RichText.module.scss b/src/controls/richText/RichText.module.scss
diff --git a/src/controls/richText/RichTextPropertyPane.module.scss b/src/controls/richText/RichTextPropertyPane.module.scss
diff --git a/src/controls/richText/RteColorPicker.module.scss b/src/controls/richText/RteColorPicker.module.scss

Original file line number	Diff line number	Diff line change
`@@ -14,11 +14,11 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.localTabFilename {`
`17`		`- color: $ms-color-neutralPrimary;`
	`17`	`+ color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.localTabLabel {`
`21`		`- color: $ms-color-themePrimary;`
	`21`	`+ color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";`
`22`	`22`	`cursor: pointer;`
`23`	`23`	`}`
`24`	`24`
`@@ -33,7 +33,7 @@`
`33`	`33`
`34`	`34`	`.localTabDragDropFile {`
`35`	`35`	`// width: 100%;`
`36`		`- border: 1px black dashed;`
	`36`	`+ border: 1px "[theme:black, default:#{$ms-color-black}]" dashed;`
`37`	`37`	`text-align: center;`
`38`	`38`	`padding: 75px;`
`39`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@`
`77`	`77`	`max-height: 100%;`
`78`	`78`	`-webkit-box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2);`
`79`	`79`	`box-shadow: 0 1px 3px 2px rgba(1, 1, 0, 0.2);`
`80`		`- background-color: $ms-color-white;`
	`80`	`+ background-color: "[theme:white, default:#{$ms-color-white}]";`
`81`	`81`	`min-width: 32px;`
`82`	`82`	`min-height: 32px;`
`83`	`83`	`}`