✨ feat(theme): better gray scales neutral color in theme settings

lobehub · Jun 30, 2023 · cfb0e5a · cfb0e5a
1 parent 2b196fb
commit cfb0e5a
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 306 deletions.
diff --git a/.stylelintignore b/.stylelintignore
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/pages/Content/style.ts b/src/pages/Content/style.ts
@@ -60,6 +60,14 @@ export const useStyles = createStyles(
             }
           }
         }
+
+        [id$='_override_settings_row']:has(div.hidden) {
+          display: none;
+        }
+
+        .gradio-group:has(.gradio-group:has(div:empty)) {
+          display: none;
+        }
       `,
       draggableContainer: css`
         .draggable-line {
@@ -229,22 +237,6 @@ export const useStyles = createStyles(
         }
       `,
       textares: css`
-        #text2img_prompt,
-        #text2img_neg_prompt {
-          textarea {
-            min-height: ${TEXT2IMG_PROMPT_HEIGHT}px;
-            max-height: ${isPromptResizable ? 'unset' : `${TEXT2IMG_PROMPT_HEIGHT}px`};
-          }
-        }
-
-        #img2img_prompt,
-        #img2img_neg_prompt {
-          textarea {
-            min-height: ${IMG2IMG_PROMPT_HEIGHT}px;
-            max-height: ${isPromptResizable ? 'unset' : `${IMG2IMG_PROMPT_HEIGHT}px`};
-          }
-        }
-
         [id$='2img_prompt'],
         [id$='2img_neg_prompt'] {
           textarea {
@@ -293,6 +285,22 @@ export const useStyles = createStyles(
             font-family: ${token.fontFamilyCode};
           }
         }
+
+        #text2img_prompt,
+        #text2img_neg_prompt {
+          textarea {
+            min-height: ${TEXT2IMG_PROMPT_HEIGHT}px;
+            max-height: ${isPromptResizable ? 'unset' : `${TEXT2IMG_PROMPT_HEIGHT}px`};
+          }
+        }
+
+        #img2img_prompt,
+        #img2img_neg_prompt {
+          textarea {
+            min-height: ${IMG2IMG_PROMPT_HEIGHT}px;
+            max-height: ${isPromptResizable ? 'unset' : `${IMG2IMG_PROMPT_HEIGHT}px`};
+          }
+        }
       `,
     };
   },

diff --git a/src/slots/Setting/style.ts b/src/slots/Setting/style.ts
@@ -14,22 +14,52 @@ export const useStyles = createStyles(({ css, token }) => ({
     .ant-form-item {
       margin: 0 !important;
     }
+
+    .ant-form-item .ant-form-item-label > label {
+      height: unset;
+    }
+
+    .ant-row {
+      position: relative;
+      flex-wrap: nowrap;
+    }
+
+    .ant-form-item-label {
+      position: relative;
+      flex: 1;
+      max-width: 100%;
+    }
+
+    .ant-form-item-control {
+      position: relative;
+      flex: 0;
+      min-width: unset !important;
+    }
   `,
   formTitle: css`
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
     text-align: left;
 
     > div {
+      font-weight: 500;
       line-height: 1;
     }
 
     > small {
-      line-height: 1;
+      display: block;
+
+      line-height: 1.1;
       color: ${token.colorTextDescription};
+      word-wrap: break-word;
+      white-space: pre-wrap;
     }
   `,
   group: css`
-    overflow: hidden;
-
     .ant-collapse-header {
       background: ${token.colorFillTertiary};
       border-radius: unset;

diff --git a/src/styles/components/table.ts b/src/styles/components/table.ts
@@ -19,13 +19,13 @@ export default (token: Theme) => css`
   }
 
   tr {
+    &:nth-of-type(odd) td {
+      background: ${token.colorFillQuaternary};
+    }
+
     &:hover td,
     &:nth-of-type(odd):hover td {
       background: ${token.colorFillSecondary};
     }
-
-    &:nth-of-type(odd) td {
-      background: ${token.colorFillQuaternary};
-    }
   }
 `;
diff --git a/src/styles/kitchenColors.ts b/src/styles/kitchenColors.ts
@@ -29,10 +29,10 @@ export const kitchenNeutral = {
   dark: {
     colorBgContainer: '#1f1f1f',
     colorBgElevated: '#222',
-    colorBgLayout: '#111',
-    colorBgSpotlight: '#424242',
-    colorBorder: '#424242',
-    colorBorderSecondary: '#303030',
+    colorBgLayout: '#181818',
+    colorBgSpotlight: '#444',
+    colorBorder: '#444',
+    colorBorderSecondary: '#333',
     colorFill: 'rgb(255 255 255 / 18%)',
     colorFillQuaternary: 'rgb(255 255 255 / 4%)',
     colorFillSecondary: 'rgb(255 255 255 / 12%)',
@@ -46,10 +46,10 @@ export const kitchenNeutral = {
   light: {
     colorBgContainer: '#fff',
     colorBgElevated: '#fff',
-    colorBgLayout: '#f5f5f5',
+    colorBgLayout: '#f7f7f7',
     colorBgSpotlight: 'rgb(0 0 0 / 85%)',
-    colorBorder: '#d9d9d9',
-    colorBorderSecondary: '#f0f0f0',
+    colorBorder: '#ddd',
+    colorBorderSecondary: '#eee',
     colorFill: 'rgb(0 0 0 / 15%)',
     colorFillQuaternary: 'rgb(0 0 0 / 2%)',
     colorFillSecondary: 'rgb(0 0 0 / 6%)',