🔧 chore: update lint config

.changelogrc.js

@@ -1,3 +1 @@
-module.exports = {
+module.exports = require('@lobehub/lint/dist/commitlint');
-  displayTypes: ['feat', 'fix', 'styles', 'pref'],
-};

.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint/dist/commitlint');

.eslintrc.js

@@ -1,15 +1 @@
-module.exports = {
+module.exports = require('@lobehub/lint/dist/eslint');
-  extends: require.resolve('@umijs/lint/dist/config/eslint'),
-  plugins: ['simple-import-sort', 'import', 'typescript-sort-keys'],
-  rules: {
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-    'import/first': 'error',
-    'import/newline-after-import': 'error',
-    'import/no-duplicates': 'error',
-    'typescript-sort-keys/interface': 'error',
-    'typescript-sort-keys/string-enum': 'error',
-    'react/jsx-sort-props': 'error',
-    'react/jsx-no-useless-fragment': 'error',
-  },
-};

.npmrc

@@ -1,2 +1,10 @@
 lockfile=false
 resolution-mode=highest
+public-hoist-pattern[]=*@umijs/lint*
+public-hoist-pattern[]=*remark*
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*stylelint*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*commitlint*
+public-hoist-pattern[]=*postcss*
+public-hoist-pattern[]=*semantic-release*

.prettierignore

@@ -26,3 +26,4 @@ yarn-error.log
 .env.local
 style.css
 javascript/
+.stylelintignore

.prettierrc.js

@@ -1,19 +1 @@
-module.exports = {
+module.exports = require('@lobehub/lint/dist/prettier');
-  pluginSearchDirs: false,
-  plugins: [
-    require.resolve('prettier-plugin-organize-imports'),
-    require.resolve('prettier-plugin-packagejson'),
-  ],
-  printWidth: 100,
-  proseWrap: 'never',
-  singleQuote: true,
-  trailingComma: 'all',
-  overrides: [
-    {
-      files: '*.md',
-      options: {
-        proseWrap: 'preserve',
-      },
-    },
-  ],
-};

.releaserc.js

@@ -1,4 +1 @@
-module.exports = {
+module.exports = require('@lobehub/lint/dist/semantic-release');
-  extends: ['semantic-release-config-gitmoji'],
-  branches: ['main'],
-};

.remarkrc.js

@@ -1,8 +1 @@
-module.exports = {
+module.exports = require('@lobehub/lint/dist/remarklint');
-  plugins: [
-    'remark-preset-lint-recommended',
-    ['remark-lint-list-item-indent', 'space'],
-    ['remark-lint-no-literal-urls', false],
-    ['remark-toc', { heading: 'TOC', maxDepth: 3 }],
-  ],
-};

.stylelintrc.js

@@ -1,21 +1,7 @@
 module.exports = {
-  extends: ['stylelint-config-recommended', 'stylelint-config-clean-order'],
+  extends: require.resolve('@lobehub/lint/dist/stylelint'),
   rules: {
-    'declaration-block-no-duplicate-properties': null,
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
   },
-  overrides: [
-    {
-      files: ['*.less', '*.css'],
-      plugins: ['stylelint-order'],
-      customSyntax: 'postcss-less',
-      rules: {
-        'no-descending-specificity': null,
-      },
-    },
-    {
-      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
-      plugins: ['stylelint-order'],
-      customSyntax: 'postcss-styled-syntax',
-    },
-  ],
 };

.umirc.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from 'umi';
+// @ts-ignore
-import WebpackShellPlugin from 'webpack-shell-plugin-next';
+import browserslist from 'browserslist';
 // @ts-ignore
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 // @ts-ignore
 import lightningcss from 'lightningcss';
-// @ts-ignore
+import { defineConfig } from 'umi';
-import browserslist from 'browserslist';
+import WebpackShellPlugin from 'webpack-shell-plugin-next';
 
 const mac = [
   'rm ./javascript/index.js',

README-zh_CN.md

@@ -221,11 +221,11 @@ $ npm start
 
 ## 🔗 链接
 
-- stable-diffusion-webui：https://github.com/AUTOMATIC1111/stable-diffusion-webui
+- stable-diffusion-webui：<https://github.com/AUTOMATIC1111/stable-diffusion-webui>
-- gradio-theme-gallery: https://huggingface.co/spaces/gradio/theme-gallery
+- gradio-theme-gallery: <https://huggingface.co/spaces/gradio/theme-gallery>
 - _before `1.0.0` version_
-  - sd-web-ui-quickcs: https://github.com/Gerschel/sd-web-ui-quickcss/
+  - sd-web-ui-quickcs: <https://github.com/Gerschel/sd-web-ui-quickcss/>
-  - Dark-Themes-SD-WebUI-Automatic1111: https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111
+  - Dark-Themes-SD-WebUI-Automatic1111: <https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111>
 
 <div align="right">
 

README.md

@@ -222,11 +222,11 @@ $ npm start
 
 ## 🔗 Credits
 
-- stable-diffusion-webui：https://github.com/AUTOMATIC1111/stable-diffusion-webui
+- stable-diffusion-webui：<https://github.com/AUTOMATIC1111/stable-diffusion-webui>
-- gradio-theme-gallery: https://huggingface.co/spaces/gradio/theme-gallery
+- gradio-theme-gallery: <https://huggingface.co/spaces/gradio/theme-gallery>
 - _before `1.0.0` version_
-  - sd-web-ui-quickcs: https://github.com/Gerschel/sd-web-ui-quickcss/
+  - sd-web-ui-quickcs: <https://github.com/Gerschel/sd-web-ui-quickcss/>
-  - Dark-Themes-SD-WebUI-Automatic1111: https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111
+  - Dark-Themes-SD-WebUI-Automatic1111: <https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111>
 
 <div align="right">
 

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['gitmoji'],
-};

package.json

@@ -13,7 +13,7 @@
     "build": "umi build",
     "dev": "umi build",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
-    "lint:md": "remark . --quiet --frail --output",
+    "lint:md": "remark . --quiet --output",
     "lint:style": "stylelint \"src/**/*.{css,less,js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "prettier": "prettier -c --write \"**/**\"",
@@ -26,7 +26,7 @@
   },
   "lint-staged": {
     "*.md": [
-      "remark --quiet --frail --output --",
+      "remark --quiet --output --",
       "prettier --write --no-error-on-unmatched-pattern"
     ],
     "*.json": [
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@ant-design/icons": "^5",
     "@commitlint/cli": "^17",
+    "@lobehub/lint": "latest",
     "@types/lodash-es": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -65,15 +66,9 @@
     "babel-plugin-styled-components": "^2",
     "browserslist": "^4",
     "commitlint": "^17",
-    "commitlint-config-gitmoji": "^2",
     "concurrently": "^8",
     "css-minimizer-webpack-plugin": "^5",
     "eslint": "^8",
-    "eslint-import-resolver-alias": "^1",
-    "eslint-import-resolver-typescript": "^3",
-    "eslint-plugin-import": "^2",
-    "eslint-plugin-simple-import-sort": "^10",
-    "eslint-plugin-typescript-sort-keys": "^2",
     "husky": "^8",
     "lightningcss": "^1",
     "lint-staged": "^13",
@@ -81,33 +76,21 @@
     "lucide-react": "^0",
     "object-to-css-variables": "^0",
     "polished": "^4",
-    "postcss-less": "^6",
-    "postcss-styled-syntax": "^0",
     "prettier": "^2",
-    "prettier-plugin-organize-imports": "^3",
-    "prettier-plugin-packagejson": "^2",
     "query-string": "^8",
     "re-resizable": "^6",
     "react": "^18",
     "react-dnd": "^16",
     "react-dnd-html5-backend": "^16",
     "react-dom": "^18",
+    "react-font-loader": "^2",
     "react-layout-kit": "^1",
     "react-rnd": "^10",
     "react-tag-input": "^6",
     "remark": "^14",
     "remark-cli": "^11",
-    "remark-lint": "^9",
-    "remark-lint-list-item-indent": "^3",
-    "remark-preset-lint-recommended": "^6",
-    "remark-toc": "^8",
-    "semantic-release": "^21",
-    "semantic-release-config-gitmoji": "^1",
     "styled-components": "^5",
     "stylelint": "^15",
-    "stylelint-config-clean-order": "^5",
-    "stylelint-config-recommended": "^12",
-    "stylelint-order": "^6",
     "typescript": "^5",
     "umi": "^4",
     "use-merge-value": "^1",

src/components/DraggablePanel/style.ts

@@ -7,6 +7,7 @@ const toggleShort = 16;
 export const useStyle = createStyles(({ token }, prefix: string) => {
   const commonHandle = css`
     position: relative;
+
     &::before {
       content: '';
       position: absolute;
@@ -129,6 +130,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
         left: -${offset}px;
         width: ${toggleShort}px;
         height: 100%;
+
         > div {
           top: 50%;
 
@@ -148,6 +150,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
         right: -${offset}px;
         width: ${toggleShort}px;
         height: 100%;
+
         > div {
           top: 50%;
 

src/components/ExtraNetworkSidebar/index.tsx

@@ -20,8 +20,8 @@ const View = styled.div`
   display: flex;
   flex-direction: column;
 
-  height: -webkit-fill-available;
+  height: var(--chrome-fill-available);
-  height: -moz-available;
+  height: var(--firefox-fill-available);
 `;
 
 const SidebarView = styled.div<{ size: number }>`
@@ -43,9 +43,10 @@ const SidebarView = styled.div<{ size: number }>`
   .extra-network-thumbs {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(${({ size }) => size}px, 1fr));
+
     > .card {
-      width: -webkit-fill-available !important;
+      width: fill-available !important;
-      width: -moz-available !important;
+      width: available !important;
       height: ${({ size }) => size * 1.5}px !important;
     }
   }

src/components/Header/Nav.tsx

@@ -14,7 +14,7 @@ const NavBar = styled(Menu)`
     color: var(--color-text-secondary);
     border-radius: 4px !important;
 
-    &:after {
+    &::after {
       display: none !important;
     }
 

src/components/Header/Setting.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
-import { defaultSetting, useAppStore, WebuiSetting } from '@/store';
+import { WebuiSetting, defaultSetting, useAppStore } from '@/store';
 
 /******************************************************
  *********************** Style *************************
@@ -12,8 +12,10 @@ import { defaultSetting, useAppStore, WebuiSetting } from '@/store';
 
 const FormItem = styled(Form.Item)`
   margin-bottom: 8px;
+
   .ant-row {
     justify-content: space-between;
+
     > div {
       flex: unset !important;
       flex-grow: unset !important;

src/components/Header/index.tsx

@@ -26,8 +26,8 @@ const HeaderView = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  height: -webkit-fill-available;
+  height: var(--chrome-fill-available);
-  height: -moz-available;
+  height: var(--firefox-fill-available);
   padding: 16px 24px;
 `;
 

src/components/Sidebar/TagList.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { ReactTagsProps as WithContextProps,WithContext } from 'react-tag-input';
+import { WithContext, ReactTagsProps as WithContextProps } from 'react-tag-input';
 import styled from 'styled-components';
 
 import { genTagType, suggestions } from './utils';
@@ -25,17 +25,18 @@ const View = styled.div<{ type: PromptType }>`
   .ReactTags__editTagInput,
   .ReactTags__tagInput {
     display: inline-block;
-    width: -webkit-fill-available;
+    width: var(--chrome-fill-available);
-    width: -moz-available;
+    width: var(--firefox-fill-available);
     margin: 0;
+
     input,
     input:focus {
       position: relative;
 
       display: block;
 
-      width: -webkit-fill-available;
+      width: var(--chrome-fill-available);
-      width: -moz-available;
+      width: var(--firefox-fill-available);
       margin: 0;
       padding: var(--input-padding);
 
@@ -62,6 +63,7 @@ const View = styled.div<{ type: PromptType }>`
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
+
     span.ReactTags__tag {
       position: relative;
 
@@ -78,10 +80,12 @@ const View = styled.div<{ type: PromptType }>`
       background: var(--button-secondary-background-fill);
       border: var(--button-border-width) solid var(--button-secondary-border-color);
       border-radius: var(--input-radius);
+
       &:hover {
         color: ${({ type }) => (type === 'positive' ? 'var(--green-10)' : 'var(--magenta-10)')};
       }
     }
+
     a.ReactTags__remove {
       cursor: pointer;
       margin-left: 5px;
@@ -94,6 +98,7 @@ const View = styled.div<{ type: PromptType }>`
     position: absolute;
     z-index: 1000;
   }
+
   ul {
     overflow-x: hidden;
     overflow-y: auto;
@@ -107,15 +112,18 @@ const View = styled.div<{ type: PromptType }>`
     background: var(--color-bg-container);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
+
     li {
       margin: 0;
       padding: 4px 8px;
       font-size: 12px;
+
       &.ReactTags__activeSuggestion {
         cursor: pointer;
         color: #fff;
         background: var(--color-primary);
       }
+
       mark {
         font-weight: 600;
         color: #fff;
@@ -136,10 +144,12 @@ const View = styled.div<{ type: PromptType }>`
     background: var(--cyan-2) !important;
     border-color: var(--cyan-3) !important;
   }
+
   .ReactTags__hypernet {
     background: var(--purple-2) !important;
     border-color: var(--purple-3) !important;
   }
+
   .ReactTags__embedding {
     background: var(--orange-2) !important;
     border-color: var(--orange-3) !important;

src/components/Sidebar/index.tsx

@@ -12,8 +12,8 @@ const SidebarView = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
 
-  height: -webkit-fill-available;
+  height: var(--chrome-fill-available);
-  height: -moz-available;
+  height: var(--firefox-fill-available);
   padding: 16px;
 `;
 

src/pages/index/GlobalStyle.ts

@@ -0,0 +1,77 @@
+import { createGlobalStyle } from 'antd-style';
+
+const GlobalStyle = createGlobalStyle`
+
+  html,body {
+    --font-settings: "cv01", "tnum", "kern";
+    --font-variations: "opsz" auto, tabular-nums;
+
+    overflow-x: hidden;
+
+    margin: 0;
+    padding: 0;
+
+    font-family: ${({ theme }) => theme.fontFamily};
+    font-size: ${({ theme }) => theme.fontSize}px;
+    font-feature-settings: var(--font-settings);
+    font-variation-settings: var(--font-variations);
+    line-height: 1;
+    color: ${({ theme }) => theme.colorTextBase};
+    text-size-adjust: none;
+    text-rendering: optimizelegibility;
+    vertical-align: baseline;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+
+  * {
+	  box-sizing: border-box;
+	  vertical-align: baseline;
+  }
+
+  ::-webkit-scrollbar {
+	  width: 0;
+	  height: 4px;
+	  background-color: transparent;
+
+	  &-thumb {
+		  background-color: transparent;
+		  border-radius: 4px;
+		  transition: background-color 500ms ${({ theme }) => theme.motionEaseOut};
+	  }
+
+	  &-corner {
+		  display: none;
+	  }
+  }
+
+  #root {
+	  min-height: 100vh;
+  }
+
+  p {
+    text-align: justify;
+    word-wrap: break-word;
+  }
+  
+  code {
+	  font-family: ${({ theme }) => theme.fontFamilyCode} !important;
+
+	  * {
+		  font-family: inherit !important;
+	  }
+  }
+
+  *:hover, *:focus {
+	  ::-webkit-scrollbar {
+		  &-thumb {
+			  background-color: ${({ theme }) => theme.colorFill};
+		  }
+	  }
+  }
+`;
+
+export default GlobalStyle;

src/pages/index/index.tsx

@@ -1,9 +1,9 @@
-import '@/theme/style.less';
+import { ThemeProvider, setupStyled } from 'antd-style';
-
-import { setupStyled, ThemeProvider } from 'antd-style';
 import qs from 'query-string';
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
+// @ts-ignore
+import ReactFontLoader from 'react-font-loader';
 import { ThemeContext } from 'styled-components';
 import { shallow } from 'zustand/shallow';
 
@@ -12,8 +12,11 @@ import formatPrompt from '@/script/formatPrompt';
 import promptBracketChecker from '@/script/promptBracketChecker';
 import setupHead from '@/script/setupHead';
 import { useAppStore } from '@/store';
+import '@/theme/style.less';
 
 import App from './App';
+import GlobalStyle from './GlobalStyle';
+import { baseToken } from './style';
 
 const Root: React.FC = () => {
   setupStyled({ ThemeContext });
@@ -44,7 +47,10 @@ const Root: React.FC = () => {
     window.location.reload();
   }, [isDarkMode]);
   return (
-    <ThemeProvider appearance={appearance}>
+    <ThemeProvider appearance={appearance} theme={{ token: baseToken }}>
+      <GlobalStyle />
+      <ReactFontLoader url="https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css" />
+      <ReactFontLoader url="https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css" />
       <App />
     </ThemeProvider>
   );

src/pages/index/style.ts

@@ -0,0 +1,11 @@
+import { AliasToken } from 'antd/es/theme/interface';
+
+const FONT_EMOJI = `"Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Twemoji Mozilla","Noto Color Emoji","Android Emoji"`;
+const FONT_EN = `"HarmonyOS Sans","Segoe UI","SF Pro Display",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif`;
+const FONT_CN = `"HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft Yahei UI","Microsoft Yahei","Source Han Sans CN",sans-serif`;
+const FONT_CODE = `ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace`;
+
+export const baseToken: Partial<AliasToken> = {
+  fontFamily: [FONT_EN, FONT_CN, FONT_EMOJI].join(','),
+  fontFamilyCode: [FONT_CODE, FONT_CN, FONT_EMOJI].join(','),
+};

src/theme/components/button.less

@@ -7,6 +7,7 @@
   text-overflow: ellipsis;
 
   border-radius: var(--border-radius) !important;
+
   &.tool {
     display: flex;
     align-items: center;

src/theme/components/container.less

@@ -1,6 +1,6 @@
 #content {
-  min-height: -webkit-fill-available;
+  min-height: var(--chrome-fill-available);
-  min-height: -moz-available;
+  min-height: var(--firefox-fill-available);
 }
 
 .app.svelte-ac4rv4.svelte-ac4rv4 {

src/theme/components/draggable-container.less

@@ -8,6 +8,7 @@
   border-left: 2px dashed var(--color-border-secondary);
 
   transition: all 0.3s ease-in-out;
+
   &:hover,
   &:active {
     cursor: col-resize;

src/theme/components/extra-network.less

@@ -7,10 +7,10 @@
 
   .search {
     box-sizing: border-box;
-    width: -webkit-fill-available;
+    width: var(--chrome-fill-available);
-    width: -moz-available;
+    width: var(--firefox-fill-available);
-    max-width: -webkit-fill-available;
+    max-width: var(--chrome-fill-available);
-    max-width: -moz-available;
+    max-width: var(--firefox-fill-available);
     max-height: 36px !important;
     padding: 8px;
   }
@@ -23,6 +23,7 @@
 .extra-networks {
   .tab-nav {
     align-items: center;
+
     > * {
       height: 40px !important;
       margin: 0 !important;
@@ -38,6 +39,7 @@
 
     margin-bottom: 12px;
     padding: 0 !important;
+
     > button {
       cursor: pointer;
 
@@ -65,6 +67,7 @@
 
     .additional {
       display: none;
+
       > ul {
         display: flex;
         align-items: center;
@@ -72,6 +75,7 @@
 
         margin: 0;
         padding: 0;
+
         a {
           margin: 0 !important;
           padding: 0 !important;
@@ -102,9 +106,11 @@
 
     &:hover {
       outline: 2px solid var(--color-primary);
+
       .additional {
         display: block;
       }
+
       .name {
         white-space: unset;
       }
@@ -125,7 +131,7 @@
     text-shadow: none !important;
 
     opacity: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 70%);
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
 

src/theme/components/quicksetting.less

@@ -9,8 +9,8 @@
   > * {
     flex: 1;
 
-    width: -webkit-fill-available !important;
+    width: fill-available !important;
-    width: -moz-available !important;
+    width: available !important;
     min-width: unset !important;
     max-width: unset !important;
     margin: 0;
@@ -35,8 +35,8 @@
   }
 
   textarea {
-    width: -webkit-fill-available;
+    width: var(--chrome-fill-available);
-    width: -moz-available;
+    width: var(--firefox-fill-available);
   }
 
   span {

src/theme/components/scrollbar.less

@@ -1,21 +0,0 @@
-/* width */
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: var(--color-border-secondary);
-  border-radius: 10px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border);
-}

src/theme/extensions/additional-networks.less

@@ -4,6 +4,7 @@
     background: var(--panel-background-fill) !important;
     border-radius: var(--container-radius) !important;
   }
+
   .padded.svelte-mppz8v {
     border: none !important;
   }

src/theme/extensions/aspect-ratio.less

@@ -16,8 +16,7 @@
 
 [id$='_container_aspect_ratio'] {
   display: flex !important;
-  flex-direction: row !important;
+  flex-flow: row wrap !important;
-  flex-wrap: wrap !important;
   gap: 4px !important;
 
   [id$='_row_aspect_ratio'],
@@ -27,6 +26,7 @@
     width: unset;
     max-width: unset;
   }
+
   button {
     position: relative !important;
     flex: 1 1 0% !important;

src/theme/extensions/open-outpaint.less

@@ -2,8 +2,9 @@
   position: relative;
   height: 100vh;
   padding: 0 !important;
+
   #openoutpaint-iframe {
-    width: -webkit-fill-available !important;
+    width: fill-available !important;
-    width: -moz-available !important;
+    width: available !important;
   }
 }

src/theme/style.less

@@ -10,7 +10,6 @@
 /* Components */
 @import 'components/container';
 @import 'components/prose';
-@import 'components/scrollbar';
 @import 'components/options';
 @import 'components/modal';
 @import 'components/sliders';
@@ -42,6 +41,12 @@
 @import 'extensions/open-outpaint';
 
 /* Root */
+:root {
+  /* stylelint-disable */
+  --chrome-fill-available: -webkit-fill-available;
+  --firefox-fill-available: -moz-available;
+  /* stylelint-enable */
+}
 
 body {
   font-family: var(--font-family);

src/theme/tabs/tab-extra.less

@@ -1,6 +1,7 @@
 #tab_extras {
   > div > div > div {
     gap: 8px;
+
     > .gradio-row {
       margin: 0 !important;
       padding: 12px !important;
@@ -8,6 +9,7 @@
       border-radius: var(--container-radius) !important;
     }
   }
+
   #extras_scale_by_tab {
     padding: 0 !important;
     background: transparent !important;

src/theme/tabs/tab-to-img.less

@@ -5,11 +5,12 @@
     .block.gradio-checkbox {
       margin: 0 !important;
     }
+
     span.svelte-1gfkn6j:not(.has-info) {
       overflow: hidden;
 
-      width: -webkit-fill-available;
+      width: var(--chrome-fill-available);
-      width: -moz-available;
+      width: var(--firefox-fill-available);
       margin-right: 12px;
       margin-bottom: var(--spacing-lg);
 

src/theme/var/antd.less

@@ -374,12 +374,12 @@
   --font-size-heading3: 24px;
   --font-size-heading4: 20px;
   --font-size-heading5: 16px;
-  --line-height: 1.5714285714285714;
+  --line-height: 1.5714;
   --line-height-lg: 1.5;
-  --line-height-sm: 1.6666666666666667;
+  --line-height-sm: 1.6667;
-  --line-height-heading1: 1.2105263157894737;
+  --line-height-heading1: 1.2105;
-  --line-height-heading2: 1.2666666666666666;
+  --line-height-heading2: 1.2667;
-  --line-height-heading3: 1.3333333333333333;
+  --line-height-heading3: 1.3333;
   --line-height-heading4: 1.4;
   --line-height-heading5: 1.5;
   --size-xxl: 32px;

tsconfig-check.json

@@ -1,6 +1,6 @@
 {
-  "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": true
-  }
+  },
+  "extends": "./tsconfig.json"
 }

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "./src/.umi/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -21,6 +20,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "exclude": ["javascript"],
-  "exclude": ["javascript"]
+  "extends": "./src/.umi/tsconfig.json",
+  "include": ["src"]
 }