feat: dark mode for knowledge (#15236)

web/app/components/datasets/create/notion-page-preview/index.module.css

@@ -1,54 +1,34 @@
 .filePreview {
-    @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 528px;
-    background-color: #fcfcfd;
-  }
-  
-  .previewHeader {
-    @apply border-b border-gray-200 shrink-0;
-    margin: 42px 32px 0;
-    padding-bottom: 16px;
-  }
-  
-  .previewHeader .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #101828;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-  }
-  
-  .previewHeader .fileName {
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: #1D2939;
-  }
-  
-  .previewHeader .filetype {
-    color: #667085;
-  }
-  
-  .previewContent {
-    @apply overflow-y-auto grow;
-    padding: 20px 32px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #344054;
-  }
-  
-  .previewContent .loading {
-    width: 100%;
-    height: 180px;
-    background: #f9fafb center no-repeat url(../assets/Loading.svg);
-    background-size: contain;
-  }
-  .fileContent {
-    white-space: pre-line;
-  }
+  @apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
+  width: 528px;
+}
+
+.previewHeader {
+  @apply border-b border-divider-subtle shrink-0;
+  margin: 42px 32px 0;
+  padding-bottom: 16px;
+}
+
+.previewHeader .title {
+  @apply flex justify-between items-center text-text-primary;
+}
+
+.previewHeader .fileName {
+  @apply flex items-center text-text-tertiary;
+}
+
+.previewContent {
+  @apply overflow-y-auto grow text-text-secondary;
+  padding: 20px 32px;
+}
+
+.previewContent .loading {
+  width: 100%;
+  height: 180px;
+  background: #f9fafb center no-repeat url(../assets/Loading.svg);
+  background-size: contain;
+}
+.fileContent {
+  white-space: pre-line;
+}
   

web/app/components/datasets/create/notion-page-preview/index.tsx

@@ -46,13 +46,13 @@ const NotionPagePreview = ({
   return (
     <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
           <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className={cn(s.fileName)}>
+        <div className={cn(s.fileName, 'system-xs-medium')}>
           <NotionIcon
             className='shrink-0 mr-1'
             type='page'
@@ -61,7 +61,7 @@ const NotionPagePreview = ({
           {currentPage?.page_name}
         </div>
       </div>
-      <div className={cn(s.previewContent)}>
+      <div className={cn(s.previewContent, 'body-md-regular')}>
         {loading && <div className={cn(s.loading)} />}
         {!loading && (
           <div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>