mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Merge branch 'main' into chore/accessability_various-additions
This commit is contained in:
Elrik
GitHub
@ -19,7 +19,7 @@ import invokeai.version as invokeai
|
||||
|
||||
from ...backend import Generate, ModelManager
|
||||
from ...backend.args import Args, dream_cmd_from_png, metadata_dumps, metadata_from_png
|
||||
from ...backend.globals import Globals
|
||||
from ...backend.globals import Globals, global_config_dir
|
||||
from ...backend.image_util import (
|
||||
PngWriter,
|
||||
make_grid,
|
||||
@ -66,6 +66,9 @@ def main():
|
||||
Globals.sequential_guidance = args.sequential_guidance
|
||||
Globals.ckpt_convert = True # always true now
|
||||
|
||||
# run any post-install patches needed
|
||||
run_patches()
|
||||
|
||||
print(f">> Internet connectivity is {Globals.internet_available}")
|
||||
|
||||
if not args.conf:
|
||||
@ -658,7 +661,16 @@ def import_model(model_path: str, gen, opt, completer, convert=False):
|
||||
)
|
||||
|
||||
if not imported_name:
|
||||
print("** Import failed or was skipped")
|
||||
if config_file := _pick_configuration_file(completer):
|
||||
imported_name = gen.model_manager.heuristic_import(
|
||||
model_path,
|
||||
model_name=model_name,
|
||||
description=model_desc,
|
||||
convert=convert,
|
||||
model_config_file=config_file,
|
||||
)
|
||||
if not imported_name:
|
||||
print("** Aborting import.")
|
||||
return
|
||||
|
||||
if not _verify_load(imported_name, gen):
|
||||
@ -672,6 +684,46 @@ def import_model(model_path: str, gen, opt, completer, convert=False):
|
||||
completer.update_models(gen.model_manager.list_models())
|
||||
print(f">> {imported_name} successfully installed")
|
||||
|
||||
def _pick_configuration_file(completer)->Path:
|
||||
print(
|
||||
"""
|
||||
Please select the type of this model:
|
||||
[1] A Stable Diffusion v1.x ckpt/safetensors model
|
||||
[2] A Stable Diffusion v1.x inpainting ckpt/safetensors model
|
||||
[3] A Stable Diffusion v2.x base model (512 pixels)
|
||||
[4] A Stable Diffusion v2.x v-predictive model (768 pixels)
|
||||
[5] Other (you will be prompted to enter the config file path)
|
||||
[Q] I have no idea! Skip the import.
|
||||
""")
|
||||
choices = [
|
||||
global_config_dir() / 'stable-diffusion' / x
|
||||
for x in [
|
||||
'v1-inference.yaml',
|
||||
'v1-inpainting-inference.yaml',
|
||||
'v2-inference.yaml',
|
||||
'v2-inference-v.yaml',
|
||||
]
|
||||
]
|
||||
|
||||
ok = False
|
||||
while not ok:
|
||||
try:
|
||||
choice = input('select 0-5, Q > ').strip()
|
||||
if choice.startswith(('q','Q')):
|
||||
return
|
||||
if choice == '5':
|
||||
completer.complete_extensions(('.yaml'))
|
||||
choice = Path(input('Select config file for this model> ').strip()).absolute()
|
||||
completer.complete_extensions(None)
|
||||
ok = choice.exists()
|
||||
else:
|
||||
choice = choices[int(choice)-1]
|
||||
ok = True
|
||||
except (ValueError, IndexError):
|
||||
print(f'{choice} is not a valid choice')
|
||||
except EOFError:
|
||||
return
|
||||
return choice
|
||||
|
||||
def _verify_load(model_name: str, gen) -> bool:
|
||||
print(">> Verifying that new model loads...")
|
||||
@ -1236,6 +1288,21 @@ def check_internet() -> bool:
|
||||
except:
|
||||
return False
|
||||
|
||||
# This routine performs any patch-ups needed after installation
|
||||
def run_patches():
|
||||
# install ckpt configuration files that may have been added to the
|
||||
# distro after original root directory configuration
|
||||
import invokeai.configs as conf
|
||||
from shutil import copyfile
|
||||
|
||||
root_configs = Path(global_config_dir(), 'stable-diffusion')
|
||||
repo_configs = Path(conf.__path__[0], 'stable-diffusion')
|
||||
if not root_configs.exists():
|
||||
os.makedirs(root_configs, exist_ok=True)
|
||||
for src in repo_configs.iterdir():
|
||||
dest = root_configs / src.name
|
||||
if not dest.exists():
|
||||
copyfile(src, dest)
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
@ -442,7 +442,7 @@ def main():
|
||||
args = _parse_args()
|
||||
global_set_root(args.root_dir)
|
||||
|
||||
cache_dir = str(global_cache_dir("diffusers"))
|
||||
cache_dir = str(global_cache_dir("hub"))
|
||||
os.environ[
|
||||
"HF_HOME"
|
||||
] = cache_dir # because not clear the merge pipeline is honoring cache_dir
|
||||
|
||||
@ -1,20 +1,43 @@
|
||||
# InvokeAI UI dev setup
|
||||
# InvokeAI Web UI
|
||||
|
||||
The UI is in `invokeai/frontend`.
|
||||
The UI is a fairly straightforward Typescript React app. The only really fancy stuff is the Unified Canvas.
|
||||
|
||||
## Environment set up
|
||||
Code in `invokeai/frontend/web/` if you want to have a look.
|
||||
|
||||
Install [node](https://nodejs.org/en/download/) (includes npm) and
|
||||
[yarn](https://yarnpkg.com/getting-started/install).
|
||||
## Details
|
||||
|
||||
From `invokeai/frontend/` run `yarn install --immutable` to get everything set up.
|
||||
State management is Redux via [Redux Toolkit](https://github.com/reduxjs/redux-toolkit). Communication with server is a mix of HTTP and [socket.io](https://github.com/socketio/socket.io-client) (with a custom redux middleware to help).
|
||||
|
||||
## Dev
|
||||
[Chakra-UI](https://github.com/chakra-ui/chakra-ui) for components and styling.
|
||||
|
||||
[Konva](https://github.com/konvajs/react-konva) for the canvas, but we are pushing the limits of what is feasible with it (and HTML canvas in general). We plan to rebuild it with [PixiJS](https://github.com/pixijs/pixijs) to take advantage of WebGL's improved raster handling.
|
||||
|
||||
[Vite](https://vitejs.dev/) for bundling.
|
||||
|
||||
Localisation is via [i18next](https://github.com/i18next/react-i18next), but translation happens on our [Weblate](https://hosted.weblate.org/engage/invokeai/) project. Only the English source strings should be changed on this repo.
|
||||
|
||||
## Contributing
|
||||
|
||||
Thanks for your interest in contributing to the InvokeAI Web UI!
|
||||
|
||||
We encourage you to ping @psychedelicious and @blessedcoolant on [Discord](https://discord.gg/ZmtBAhwWhy) if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
|
||||
|
||||
### Dev Environment
|
||||
|
||||
Install [node](https://nodejs.org/en/download/) and [yarn classic](https://classic.yarnpkg.com/lang/en/).
|
||||
|
||||
From `invokeai/frontend/web/` run `yarn install` to get everything set up.
|
||||
|
||||
Start everything in dev mode:
|
||||
|
||||
1. Start the dev server: `yarn dev`
|
||||
2. Start the InvokeAI UI per usual: `invokeai --web`
|
||||
3. Point your browser to the dev server address e.g. `http://localhost:5173/`
|
||||
|
||||
To build for dev: `yarn build-dev`
|
||||
### Production builds
|
||||
|
||||
To build for production: `yarn build`
|
||||
For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
|
||||
|
||||
If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
|
||||
|
||||
To build for production, run `yarn build`.
|
||||
|
||||
3
invokeai/frontend/web/__init__.py
Normal file
3
invokeai/frontend/web/__init__.py
Normal file
@ -0,0 +1,3 @@
|
||||
'''
|
||||
Initialization file for invokeai.frontend.web
|
||||
'''
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
315
invokeai/frontend/web/dist/assets/ThemeLocaleProvider-e23d0dbb.js
vendored
Normal file
315
invokeai/frontend/web/dist/assets/ThemeLocaleProvider-e23d0dbb.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
invokeai/frontend/web/dist/index.html
vendored
2
invokeai/frontend/web/dist/index.html
vendored
@ -12,7 +12,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="module" crossorigin src="./assets/index-bcc89564.js"></script>
|
||||
<script type="module" crossorigin src="./assets/index-b928084d.js"></script>
|
||||
<link rel="stylesheet" href="./assets/index-5483945c.css">
|
||||
</head>
|
||||
|
||||
|
||||
3
invokeai/frontend/web/dist/locales/en.json
vendored
3
invokeai/frontend/web/dist/locales/en.json
vendored
@ -371,7 +371,8 @@
|
||||
"convertToDiffusersHelpText6": "Do you wish to convert this model?",
|
||||
"convertToDiffusersSaveLocation": "Save Location",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"v2_base": "v2 (512px)",
|
||||
"v2_768": "v2 (768px)",
|
||||
"inpainting": "v1 Inpainting",
|
||||
"customConfig": "Custom Config",
|
||||
"pathToCustomConfig": "Path To Custom Config",
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
|
||||
"dev": "vite dev",
|
||||
"build": "npm run lint && vite build",
|
||||
"dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
|
||||
"build": "yarn run lint && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint:madge": "madge --circular src/main.tsx",
|
||||
"lint:eslint": "eslint --max-warnings=0",
|
||||
"lint:prettier": "prettier --check .",
|
||||
"lint:tsc": "tsc --noEmit",
|
||||
"lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:tsc && npm run lint:madge",
|
||||
"lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:tsc && yarn run lint:madge",
|
||||
"fix": "eslint --fix . && prettier --loglevel warn --write . && tsc --noEmit",
|
||||
"lint-staged": "lint-staged",
|
||||
"postinstall": "patch-package && yarn run theme",
|
||||
@ -38,6 +38,7 @@
|
||||
"@chakra-ui/anatomy": "^2.1.1",
|
||||
"@chakra-ui/icons": "^2.0.17",
|
||||
"@chakra-ui/react": "^2.5.1",
|
||||
"@chakra-ui/styled-system": "^2.6.1",
|
||||
"@chakra-ui/theme-tools": "^2.0.16",
|
||||
"@emotion/react": "^11.10.6",
|
||||
"@emotion/styled": "^11.10.6",
|
||||
@ -82,6 +83,7 @@
|
||||
"@typescript-eslint/parser": "^5.52.0",
|
||||
"@vitejs/plugin-react-swc": "^3.2.0",
|
||||
"babel-plugin-transform-imports": "^2.0.0",
|
||||
"concurrently": "^7.6.0",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
|
||||
@ -371,7 +371,8 @@
|
||||
"convertToDiffusersHelpText6": "Do you wish to convert this model?",
|
||||
"convertToDiffusersSaveLocation": "Save Location",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"v2_base": "v2 (512px)",
|
||||
"v2_768": "v2 (768px)",
|
||||
"inpainting": "v1 Inpainting",
|
||||
"customConfig": "Custom Config",
|
||||
"pathToCustomConfig": "Path To Custom Config",
|
||||
|
||||
@ -363,7 +363,6 @@
|
||||
"convertToDiffusersHelpText6": "¿Desea transformar este modelo?",
|
||||
"convertToDiffusersSaveLocation": "Guardar ubicación",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"statusConverting": "Adaptar",
|
||||
"modelConverted": "Modelo adaptado",
|
||||
"sameFolder": "La misma carpeta",
|
||||
|
||||
@ -45,7 +45,9 @@
|
||||
"statusUpscaling": "Mise à échelle",
|
||||
"statusUpscalingESRGAN": "Mise à échelle (ESRGAN)",
|
||||
"statusLoadingModel": "Chargement du modèle",
|
||||
"statusModelChanged": "Modèle changé"
|
||||
"statusModelChanged": "Modèle changé",
|
||||
"discordLabel": "Discord",
|
||||
"githubLabel": "Github"
|
||||
},
|
||||
"gallery": {
|
||||
"generations": "Générations",
|
||||
|
||||
@ -92,7 +92,6 @@
|
||||
"modelThree": "מודל 3",
|
||||
"mergedModelName": "שם מודל ממוזג",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"invokeRoot": "תיקיית InvokeAI",
|
||||
"customConfig": "תצורה מותאמת אישית",
|
||||
"pathToCustomConfig": "נתיב לתצורה מותאמת אישית",
|
||||
|
||||
@ -361,7 +361,6 @@
|
||||
"convertToDiffusersHelpText5": "Assicurati di avere spazio su disco sufficiente. I modelli generalmente variano tra 4 GB e 7 GB di dimensioni.",
|
||||
"convertToDiffusersHelpText6": "Vuoi convertire questo modello?",
|
||||
"convertToDiffusersSaveLocation": "Ubicazione salvataggio",
|
||||
"v2": "v2",
|
||||
"inpainting": "v1 Inpainting",
|
||||
"customConfig": "Configurazione personalizzata",
|
||||
"statusConverting": "Conversione in corso",
|
||||
|
||||
@ -302,7 +302,7 @@
|
||||
"name": "Naam",
|
||||
"nameValidationMsg": "Geef een naam voor je model",
|
||||
"description": "Beschrijving",
|
||||
"descriptionValidationMsg": "Voeg een beschrijving toe voor je model",
|
||||
"descriptionValidationMsg": "Voeg een beschrijving toe voor je model.",
|
||||
"config": "Configuratie",
|
||||
"configValidationMsg": "Pad naar het configuratiebestand van je model.",
|
||||
"modelLocation": "Locatie model",
|
||||
@ -364,7 +364,6 @@
|
||||
"convertToDiffusersHelpText5": "Zorg ervoor dat je genoeg schijfruimte hebt. Modellen nemen gewoonlijk ongeveer 4 - 7 GB ruimte in beslag.",
|
||||
"convertToDiffusersSaveLocation": "Bewaarlocatie",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"inpainting": "v1-inpainting",
|
||||
"customConfig": "Eigen configuratie",
|
||||
"pathToCustomConfig": "Pad naar eigen configuratie",
|
||||
|
||||
@ -358,7 +358,6 @@
|
||||
"convertToDiffusersHelpText6": "Você deseja converter este modelo?",
|
||||
"convertToDiffusersSaveLocation": "Local para Salvar",
|
||||
"v1": "v1",
|
||||
"v2": "v2",
|
||||
"inpainting": "v1 Inpainting",
|
||||
"customConfig": "Configuração personalizada",
|
||||
"pathToCustomConfig": "Caminho para configuração personalizada",
|
||||
@ -381,7 +380,19 @@
|
||||
"allModels": "Todos os Modelos",
|
||||
"repoIDValidationMsg": "Repositório Online do seu Modelo",
|
||||
"convert": "Converter",
|
||||
"convertToDiffusersHelpText2": "Este processo irá substituir sua entrada de Gerenciador de Modelos por uma versão Diffusers do mesmo modelo."
|
||||
"convertToDiffusersHelpText2": "Este processo irá substituir sua entrada de Gerenciador de Modelos por uma versão Diffusers do mesmo modelo.",
|
||||
"mergedModelCustomSaveLocation": "Caminho Personalizado",
|
||||
"mergedModelSaveLocation": "Local de Salvamento",
|
||||
"interpolationType": "Tipo de Interpolação",
|
||||
"ignoreMismatch": "Ignorar Divergências entre Modelos Selecionados",
|
||||
"invokeAIFolder": "Pasta Invoke AI",
|
||||
"weightedSum": "Soma Ponderada",
|
||||
"sigmoid": "Sigmóide",
|
||||
"inverseSigmoid": "Sigmóide Inversa",
|
||||
"modelMergeHeaderHelp1": "Você pode mesclar até três modelos diferentes para criar uma mistura que atenda às suas necessidades.",
|
||||
"modelMergeInterpAddDifferenceHelp": "Neste modo, o Modelo 3 é primeiro subtraído do Modelo 2. A versão resultante é mesclada com o Modelo 1 com a taxa alpha definida acima.",
|
||||
"modelMergeAlphaHelp": "Alpha controla a força da mistura dos modelos. Valores de alpha mais baixos resultam em uma influência menor do segundo modelo.",
|
||||
"modelMergeHeaderHelp2": "Apenas Diffusers estão disponíveis para mesclagem. Se você deseja mesclar um modelo de checkpoint, por favor, converta-o para Diffusers primeiro."
|
||||
},
|
||||
"parameters": {
|
||||
"images": "Imagems",
|
||||
@ -441,7 +452,22 @@
|
||||
"info": "Informações",
|
||||
"deleteImage": "Apagar Imagem",
|
||||
"initialImage": "Imagem inicial",
|
||||
"showOptionsPanel": "Mostrar Painel de Opções"
|
||||
"showOptionsPanel": "Mostrar Painel de Opções",
|
||||
"vSymmetryStep": "V Passo de Simetria",
|
||||
"hSymmetryStep": "H Passo de Simetria",
|
||||
"symmetry": "Simetria",
|
||||
"copyImage": "Copiar imagem",
|
||||
"negativePrompts": "Indicações negativas",
|
||||
"hiresStrength": "Força da Alta Resolução",
|
||||
"denoisingStrength": "A força de remoção de ruído",
|
||||
"imageToImage": "Imagem para Imagem",
|
||||
"cancel": {
|
||||
"setType": "Definir tipo de cancelamento",
|
||||
"isScheduled": "Cancelando",
|
||||
"schedule": "Cancelar após a iteração atual",
|
||||
"immediate": "Cancelar imediatamente"
|
||||
},
|
||||
"general": "Geral"
|
||||
},
|
||||
"settings": {
|
||||
"models": "Modelos",
|
||||
@ -454,7 +480,8 @@
|
||||
"resetWebUI": "Reiniciar Interface",
|
||||
"resetWebUIDesc1": "Reiniciar a interface apenas reinicia o cache local do broswer para imagens e configurações lembradas. Não apaga nenhuma imagem do disco.",
|
||||
"resetWebUIDesc2": "Se as imagens não estão aparecendo na galeria ou algo mais não está funcionando, favor tentar reiniciar antes de postar um problema no GitHub.",
|
||||
"resetComplete": "A interface foi reiniciada. Atualize a página para carregar."
|
||||
"resetComplete": "A interface foi reiniciada. Atualize a página para carregar.",
|
||||
"useSlidersForAll": "Usar deslizadores para todas as opções"
|
||||
},
|
||||
"toast": {
|
||||
"tempFoldersEmptied": "Pasta de Arquivos Temporários Esvaziada",
|
||||
@ -546,5 +573,20 @@
|
||||
"betaDarkenOutside": "Escurecer Externamente",
|
||||
"betaLimitToBox": "Limitar Para a Caixa",
|
||||
"betaPreserveMasked": "Preservar Máscarado"
|
||||
},
|
||||
"tooltip": {
|
||||
"feature": {
|
||||
"seed": "O valor da semente afeta o ruído inicial a partir do qual a imagem é formada. Você pode usar as sementes já existentes de imagens anteriores. 'Limiar de ruído' é usado para mitigar artefatos em valores CFG altos (experimente a faixa de 0-10), e o Perlin para adicionar ruído Perlin durante a geração: ambos servem para adicionar variação às suas saídas.",
|
||||
"gallery": "A galeria exibe as gerações da pasta de saída conforme elas são criadas. As configurações são armazenadas em arquivos e acessadas pelo menu de contexto.",
|
||||
"other": "Essas opções ativam modos alternativos de processamento para o Invoke. 'Seamless tiling' criará padrões repetidos na saída. 'High resolution' é uma geração em duas etapas com img2img: use essa configuração quando desejar uma imagem maior e mais coerente sem artefatos. Levará mais tempo do que o txt2img usual.",
|
||||
"boundingBox": "A caixa delimitadora é a mesma que as configurações de largura e altura para Texto para Imagem ou Imagem para Imagem. Apenas a área na caixa será processada.",
|
||||
"upscale": "Use o ESRGAN para ampliar a imagem imediatamente após a geração.",
|
||||
"seamCorrection": "Controla o tratamento das emendas visíveis que ocorrem entre as imagens geradas no canvas.",
|
||||
"faceCorrection": "Correção de rosto com GFPGAN ou Codeformer: o algoritmo detecta rostos na imagem e corrige quaisquer defeitos. Um valor alto mudará mais a imagem, resultando em rostos mais atraentes. Codeformer com uma fidelidade maior preserva a imagem original às custas de uma correção de rosto mais forte.",
|
||||
"prompt": "Este é o campo de prompt. O prompt inclui objetos de geração e termos estilísticos. Você também pode adicionar peso (importância do token) no prompt, mas comandos e parâmetros de CLI não funcionarão.",
|
||||
"infillAndScaling": "Gerencie os métodos de preenchimento (usados em áreas mascaradas ou apagadas do canvas) e a escala (útil para tamanhos de caixa delimitadora pequenos).",
|
||||
"imageToImage": "Image to Image carrega qualquer imagem como inicial, que é então usada para gerar uma nova junto com o prompt. Quanto maior o valor, mais a imagem resultante mudará. Valores de 0.0 a 1.0 são possíveis, a faixa recomendada é de 0.25 a 0.75",
|
||||
"variations": "Experimente uma variação com um valor entre 0,1 e 1,0 para mudar o resultado para uma determinada semente. Variações interessantes da semente estão entre 0,1 e 0,3."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1,24 @@
|
||||
{}
|
||||
{
|
||||
"common": {
|
||||
"nodes": "節點",
|
||||
"img2img": "圖片轉圖片",
|
||||
"langSimplifiedChinese": "簡體中文",
|
||||
"statusError": "錯誤",
|
||||
"statusDisconnected": "已中斷連線",
|
||||
"statusConnected": "已連線",
|
||||
"back": "返回",
|
||||
"load": "載入",
|
||||
"close": "關閉",
|
||||
"langEnglish": "英語",
|
||||
"settingsLabel": "設定",
|
||||
"upload": "上傳",
|
||||
"langArabic": "阿拉伯語",
|
||||
"greenTheme": "綠色",
|
||||
"lightTheme": "淺色",
|
||||
"darkTheme": "深色",
|
||||
"discordLabel": "Discord",
|
||||
"nodesDesc": "使用Node生成圖像的系統正在開發中。敬請期待有關於這項功能的更新。",
|
||||
"reportBugLabel": "回報錯誤",
|
||||
"githubLabel": "GitHub"
|
||||
}
|
||||
}
|
||||
|
||||
@ -163,7 +163,8 @@ export default function SearchModels() {
|
||||
|
||||
const configFiles = {
|
||||
v1: 'configs/stable-diffusion/v1-inference.yaml',
|
||||
v2: 'configs/stable-diffusion/v2-inference-v.yaml',
|
||||
v2_base: 'configs/stable-diffusion/v2-inference-v.yaml',
|
||||
v2_768: 'configs/stable-diffusion/v2-inference-v.yaml',
|
||||
inpainting: 'configs/stable-diffusion/v1-inpainting-inference.yaml',
|
||||
custom: pathToConfig,
|
||||
};
|
||||
@ -372,8 +373,11 @@ export default function SearchModels() {
|
||||
<Radio value="v1">
|
||||
<Text fontSize="sm">{t('modelManager.v1')}</Text>
|
||||
</Radio>
|
||||
<Radio value="v2">
|
||||
<Text fontSize="sm">{t('modelManager.v2')}</Text>
|
||||
<Radio value="v2_base">
|
||||
<Text fontSize="sm">{t('modelManager.v2_base')}</Text>
|
||||
</Radio>
|
||||
<Radio value="v2_768">
|
||||
<Text fontSize="sm">{t('modelManager.v2_768')}</Text>
|
||||
</Radio>
|
||||
<Radio value="inpainting">
|
||||
<Text fontSize="sm">{t('modelManager.inpainting')}</Text>
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
@mixin Button(
|
||||
$btn-color: rgb(45, 49, 53),
|
||||
$btn-color-hover: rgb(65, 69, 73),
|
||||
$btn-width: 100%,
|
||||
$btn-height: 100%,
|
||||
$icon-size: 20px
|
||||
) {
|
||||
// min-width: $btn-width;
|
||||
// min-height: $btn-height;
|
||||
// background-color: $btn-color;
|
||||
|
||||
// &:hover {
|
||||
// background-color: $btn-color-hover;
|
||||
// }
|
||||
|
||||
// &:disabled {
|
||||
// background-color: var(--btn-base-color);
|
||||
// &:hover {
|
||||
// background-color: var(--btn-base-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
// svg {
|
||||
// width: $icon-size;
|
||||
// height: $icon-size;
|
||||
// color: var(--btn-svg-color);
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin BaseButton {
|
||||
// background-color: var(--btn-base-color);
|
||||
// &:hover {
|
||||
// background-color: var(--btn-base-color-hover);
|
||||
// }
|
||||
// &:disabled {
|
||||
// &:hover {
|
||||
// background-color: var(--btn-base-color);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@ -1,159 +0,0 @@
|
||||
// @media (max-width: 600px) {
|
||||
// #root {
|
||||
// .app-content {
|
||||
// padding: 5px;
|
||||
// .site-header {
|
||||
// position: fixed;
|
||||
// display: flex;
|
||||
// height: 100px;
|
||||
// z-index: 1;
|
||||
// .site-header-left-side {
|
||||
// position: absolute;
|
||||
// display: flex;
|
||||
// min-width: 145px;
|
||||
// float: left;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// .site-header-right-side {
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
// grid-template-rows: 25px 25px 25px;
|
||||
// grid-template-areas:
|
||||
// 'logoSpace logoSpace logoSpace sampler sampler sampler'
|
||||
// 'status status status status status status'
|
||||
// 'btn1 btn2 btn3 btn4 btn5 btn6';
|
||||
// row-gap: 15px;
|
||||
// .chakra-popover__popper {
|
||||
// grid-area: logoSpace;
|
||||
// }
|
||||
// > :nth-child(1).chakra-text {
|
||||
// grid-area: status;
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// }
|
||||
// > :nth-child(2) {
|
||||
// grid-area: sampler;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// select {
|
||||
// width: 185px;
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
// .chakra-select__icon-wrapper {
|
||||
// right: 10px;
|
||||
// svg {
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// > :nth-child(3) {
|
||||
// grid-area: btn1;
|
||||
// }
|
||||
// > :nth-child(4) {
|
||||
// grid-area: btn2;
|
||||
// }
|
||||
// > :nth-child(6) {
|
||||
// grid-area: btn3;
|
||||
// }
|
||||
// > :nth-child(7) {
|
||||
// grid-area: btn4;
|
||||
// }
|
||||
// > :nth-child(8) {
|
||||
// grid-area: btn5;
|
||||
// }
|
||||
// > :nth-child(9) {
|
||||
// grid-area: btn6;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .app-tabs {
|
||||
// position: fixed;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// row-gap: 15px;
|
||||
// max-width: 100%;
|
||||
// overflow: hidden;
|
||||
// margin-top: 120px;
|
||||
// .app-tabs-list {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
// .app-tabs-panels {
|
||||
// overflow: hidden;
|
||||
// overflow-y: scroll;
|
||||
// .workarea-main {
|
||||
// display: grid;
|
||||
// grid-template-areas:
|
||||
// 'workarea'
|
||||
// 'options'
|
||||
// 'gallery';
|
||||
// row-gap: 15px;
|
||||
// .parameters-panel-wrapper {
|
||||
// grid-area: options;
|
||||
// width: 100%;
|
||||
// max-width: 100%;
|
||||
// height: inherit;
|
||||
// overflow: inherit;
|
||||
// padding: 0 10px;
|
||||
// .main-settings-row {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
// .advanced-parameters-item {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
// }
|
||||
// .workarea-children-wrapper {
|
||||
// grid-area: workarea;
|
||||
// .workarea-split-view {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// .current-image-options {
|
||||
// column-gap: 3px;
|
||||
// }
|
||||
// .text-to-image-area {
|
||||
// padding: 0;
|
||||
// }
|
||||
// .current-image-preview {
|
||||
// height: 430px;
|
||||
// }
|
||||
|
||||
// //image 2 image
|
||||
// .image-upload-button {
|
||||
// row-gap: 10px;
|
||||
// padding: 5px;
|
||||
// svg {
|
||||
// width: 2rem;
|
||||
// height: 2rem;
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// //Cavas Painting
|
||||
// .inpainting-settings {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// row-gap: 10px;
|
||||
// }
|
||||
// .inpainting-canvas-area {
|
||||
// .konvajs-content {
|
||||
// height: 400px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .image-gallery-wrapper {
|
||||
// grid-area: gallery;
|
||||
// min-height: 400px;
|
||||
// .image-gallery-popup {
|
||||
// width: 100% !important;
|
||||
// max-width: 100% !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -1,7 +0,0 @@
|
||||
@mixin HideScrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// Calc Values
|
||||
$app-cutoff: 0px;
|
||||
$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
|
||||
|
||||
// Usage Variables
|
||||
// app
|
||||
$app-padding: 1rem;
|
||||
$progress-bar-thickness: 0.3rem;
|
||||
$app-width: calc(100vw - $app-cutoff);
|
||||
$app-height: calc(100vh - $progress-bar-thickness);
|
||||
$app-content-height: calc(100vh - $app-content-height-cutoff);
|
||||
$app-gallery-height: calc(100vh - ($app-content-height-cutoff + 5.5rem));
|
||||
$app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
|
||||
$app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
|
||||
$app-text-to-image-height: calc(
|
||||
100vh - 9.4375rem - 1.925rem - 1.15rem
|
||||
); // do not touch ffs
|
||||
|
||||
// option bar
|
||||
$options-bar-max-width: 22.5rem;
|
||||
@ -1,4 +0,0 @@
|
||||
@forward './Shared';
|
||||
@forward './Buttons';
|
||||
@forward './Variables';
|
||||
@forward './Responsive';
|
||||
@ -1,143 +0,0 @@
|
||||
[data-theme='asdf'] {
|
||||
// General Colors
|
||||
--white: rgb(255, 255, 255);
|
||||
|
||||
// Accent Colors
|
||||
--accent-color-dim: rgb(57, 25, 153);
|
||||
--accent-color: rgb(80, 40, 200);
|
||||
--accent-color-bright: rgb(104, 60, 230);
|
||||
--accent-color-hover: var(--accent-color-bright);
|
||||
|
||||
// App Colors
|
||||
--root-bg-color: rgb(10, 10, 10);
|
||||
--background-color: rgb(26, 26, 32);
|
||||
--background-color-light: rgb(40, 44, 48);
|
||||
--background-color-secondary: rgb(16, 16, 22);
|
||||
|
||||
--text-color: rgb(255, 255, 255);
|
||||
--text-color-secondary: rgb(160, 162, 188);
|
||||
--subtext-color: rgb(24, 24, 34);
|
||||
--subtext-color-bright: rgb(48, 48, 64);
|
||||
|
||||
--border-color: rgb(30, 30, 46);
|
||||
--border-color-light: rgb(60, 60, 76);
|
||||
|
||||
--svg-color: rgb(255, 255, 255);
|
||||
|
||||
--invalid: rgb(255, 75, 75);
|
||||
--invalid-secondary: rgb(120, 5, 5);
|
||||
|
||||
--destructive-color: rgb(185, 55, 55);
|
||||
--destructive-color-hover: rgb(255, 75, 75);
|
||||
|
||||
--warning-color: rgb(200, 88, 40);
|
||||
--warning-color-hover: rgb(230, 117, 60);
|
||||
|
||||
// Error status colors
|
||||
--border-color-invalid: rgb(255, 80, 50);
|
||||
--box-shadow-color-invalid: rgb(210, 30, 10);
|
||||
|
||||
// Tabs
|
||||
--tab-color: rgb(30, 32, 42);
|
||||
--tab-hover-color: rgb(46, 48, 58);
|
||||
--tab-panel-bg: rgb(36, 38, 48);
|
||||
--tab-list-bg: var(--accent-color);
|
||||
--tab-list-text: rgb(202, 204, 216);
|
||||
--tab-list-text-inactive: rgb(92, 94, 114);
|
||||
|
||||
// Button Colors
|
||||
--btn-base-color: rgb(30, 32, 42);
|
||||
--btn-base-color-hover: rgb(46, 48, 68);
|
||||
|
||||
--btn-load-more: rgb(30, 32, 42);
|
||||
--btn-load-more-hover: rgb(54, 56, 66);
|
||||
|
||||
--btn-svg-color: rgb(255, 255, 255);
|
||||
--btn-delete-image: rgb(182, 46, 46);
|
||||
|
||||
// IAI Button Colors
|
||||
--btn-checkbox-border-hover: rgb(46, 48, 68);
|
||||
|
||||
// Progress Bar Color
|
||||
--progress-bar-color: var(--accent-color);
|
||||
|
||||
// Prompt Box Colors
|
||||
--prompt-bg-color: rgb(10, 10, 10);
|
||||
|
||||
// Switch
|
||||
--switch-bg-color: rgb(100, 102, 110);
|
||||
--switch-bg-active-color: var(--accent-color);
|
||||
|
||||
// Slider
|
||||
--slider-color: var(--accent-color-bright);
|
||||
|
||||
// Slider
|
||||
--slider-color: rgb(151, 113, 255);
|
||||
--slider-mark-color: rgb(151, 113, 255);
|
||||
|
||||
// Resizable
|
||||
--resizeable-handle-border-color: var(--accent-color);
|
||||
|
||||
// Metadata Viewer
|
||||
--metadata-bg-color: rgba(0, 0, 0, 0.7);
|
||||
--metadata-json-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// Status Message
|
||||
--status-good-color: rgb(125, 255, 100);
|
||||
--status-good-glow: rgb(40, 215, 40);
|
||||
--status-working-color: rgb(255, 175, 55);
|
||||
--status-working-glow: rgb(255, 160, 55);
|
||||
--status-bad-color: rgb(255, 90, 90);
|
||||
--status-bad-glow: rgb(255, 40, 40);
|
||||
--notice-color: rgb(130, 71, 19);
|
||||
|
||||
// Settings Modal
|
||||
--settings-modal-bg: rgb(30, 32, 42);
|
||||
|
||||
// Input
|
||||
--input-checkbox-bg: rgb(60, 64, 68);
|
||||
--input-checkbox-checked-bg: var(--accent-color);
|
||||
--input-checkbox-checked-tick: rgb(0, 0, 0);
|
||||
|
||||
--input-border-color: var(--accent-color-bright);
|
||||
--input-box-shadow-color: var(--accent-color);
|
||||
|
||||
// Console
|
||||
--error-level-info: rgb(200, 202, 224);
|
||||
--error-level-warning: rgb(255, 225, 105);
|
||||
--error-level-error: rgb(255, 81, 46);
|
||||
--console-bg-color: rgb(30, 30, 36);
|
||||
--console-icon-button-bg-color: rgb(50, 53, 64);
|
||||
--console-icon-button-bg-color-hover: rgb(70, 73, 84);
|
||||
|
||||
// Img2Img
|
||||
--img2img-img-bg-color: rgb(30, 32, 42);
|
||||
|
||||
// Gallery
|
||||
|
||||
// Context Menus
|
||||
--context-menu-bg-color: rgb(46, 48, 58);
|
||||
--context-menu-box-shadow: none;
|
||||
--context-menu-bg-color-hover: rgb(30, 32, 42);
|
||||
|
||||
// Shadows
|
||||
--floating-button-drop-shadow-color: var(--accent-color);
|
||||
|
||||
// Canvas
|
||||
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
|
||||
--inpainting-alerts-icon-color: rgb(255, 255, 255);
|
||||
--inpainting-alerts-bg-active: var(--accent-color);
|
||||
--inpainting-alerts-icon-active: rgb(255, 255, 255);
|
||||
--inpainting-alerts-bg-alert: var(--invalid);
|
||||
--inpainting-alerts-icon-alert: rgb(255, 255, 255);
|
||||
|
||||
// Checkerboard
|
||||
--checkboard-dots-color: rgb(35, 35, 39);
|
||||
|
||||
// Scrollbar
|
||||
--scrollbar-color: var(--accent-color);
|
||||
--scrollbar-color-hover: var(--accent-color-bright);
|
||||
|
||||
// SubHook
|
||||
--subhook-color: var(--accent-color);
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
[data-theme='green'] {
|
||||
// General Colors
|
||||
--white: rgb(255, 255, 255);
|
||||
|
||||
// Accent Colors
|
||||
--accent-color-dim: rgb(10, 60, 40);
|
||||
--accent-color: rgb(20, 110, 70);
|
||||
--accent-color-bright: rgb(30, 180, 100);
|
||||
--accent-color-hover: var(--accent-color-bright);
|
||||
|
||||
// App Colors
|
||||
--root-bg-color: rgb(10, 10, 14);
|
||||
--background-color: rgb(30, 32, 37);
|
||||
--background-color-light: rgb(40, 44, 48);
|
||||
--background-color-secondary: rgb(22, 24, 28);
|
||||
|
||||
--text-color: rgb(255, 255, 255);
|
||||
--text-color-secondary: rgb(160, 164, 168);
|
||||
--subtext-color: rgb(24, 24, 28);
|
||||
--subtext-color-bright: rgb(68, 72, 76);
|
||||
|
||||
--border-color: rgb(40, 44, 48);
|
||||
--border-color-light: rgb(60, 60, 64);
|
||||
|
||||
--svg-color: rgb(220, 224, 228);
|
||||
|
||||
--invalid: rgb(255, 75, 75);
|
||||
--invalid-secondary: rgb(120, 5, 5);
|
||||
|
||||
--destructive-color: rgb(185, 55, 55);
|
||||
--destructive-color-hover: rgb(255, 75, 75);
|
||||
|
||||
--warning-color: rgb(200, 88, 40);
|
||||
--warning-color-hover: rgb(230, 117, 60);
|
||||
|
||||
// Error status colors
|
||||
--border-color-invalid: rgb(255, 80, 50);
|
||||
--box-shadow-color-invalid: rgb(210, 30, 10);
|
||||
|
||||
// Tabs
|
||||
--tab-color: rgb(40, 44, 48);
|
||||
--tab-hover-color: rgb(48, 52, 56); //done
|
||||
--tab-panel-bg: rgb(36, 40, 44);
|
||||
--tab-list-bg: var(--accent-color);
|
||||
--tab-list-text: rgb(202, 204, 206);
|
||||
--tab-list-text-inactive: rgb(92, 94, 96); //done
|
||||
|
||||
// Button Colors
|
||||
--btn-base-color: rgb(40, 44, 48);
|
||||
--btn-base-color-hover: rgb(56, 60, 64);
|
||||
|
||||
--btn-load-more: rgb(30, 32, 42);
|
||||
--btn-load-more-hover: rgb(54, 56, 66);
|
||||
|
||||
--btn-svg-color: rgb(255, 255, 255);
|
||||
|
||||
--btn-delete-image: rgb(182, 46, 46);
|
||||
|
||||
// IAI Button Colors
|
||||
--btn-checkbox-border-hover: rgb(46, 48, 68);
|
||||
|
||||
// Progress Bar Color
|
||||
--progress-bar-color: var(--accent-color);
|
||||
|
||||
// Prompt Box Colors
|
||||
--prompt-bg-color: rgb(10, 10, 14);
|
||||
|
||||
// Switch
|
||||
--switch-bg-color: rgb(100, 102, 110);
|
||||
--switch-bg-active-color: var(--accent-color);
|
||||
|
||||
// Slider
|
||||
--slider-color: var(--accent-color-bright);
|
||||
--slider-mark-color: var(--accent-color-bright);
|
||||
|
||||
// Resizable
|
||||
--resizeable-handle-border-color: var(--accent-color);
|
||||
|
||||
// Metadata Viewer
|
||||
--metadata-bg-color: rgba(0, 0, 0, 0.7);
|
||||
--metadata-json-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// Status Message
|
||||
--status-good-color: rgb(125, 255, 100);
|
||||
--status-good-glow: rgb(40, 215, 40);
|
||||
--status-working-color: rgb(255, 175, 55);
|
||||
--status-working-glow: rgb(255, 160, 55);
|
||||
--status-bad-color: rgb(255, 90, 90);
|
||||
--status-bad-glow: rgb(255, 40, 40);
|
||||
--notice-color: rgb(130, 71, 19);
|
||||
|
||||
// Settings Modal
|
||||
--settings-modal-bg: rgb(30, 32, 42);
|
||||
|
||||
// Input
|
||||
--input-checkbox-bg: rgb(60, 64, 68);
|
||||
--input-checkbox-checked-bg: var(--accent-color);
|
||||
--input-checkbox-checked-tick: rgb(0, 0, 0);
|
||||
|
||||
--input-border-color: var(--accent-color-bright);
|
||||
--input-box-shadow-color: var(--accent-color);
|
||||
|
||||
// Console
|
||||
--error-level-info: rgb(200, 202, 224);
|
||||
--error-level-warning: rgb(255, 225, 105);
|
||||
--error-level-error: rgb(255, 81, 46);
|
||||
--console-bg-color: rgb(30, 30, 36);
|
||||
--console-icon-button-bg-color: rgb(50, 53, 64);
|
||||
--console-icon-button-bg-color-hover: rgb(70, 73, 84);
|
||||
|
||||
// Img2Img
|
||||
--img2img-img-bg-color: rgb(30, 32, 42);
|
||||
|
||||
// Gallery
|
||||
|
||||
// Context Menus
|
||||
--context-menu-bg-color: rgb(46, 48, 58);
|
||||
--context-menu-box-shadow: none;
|
||||
--context-menu-bg-color-hover: rgb(30, 32, 42);
|
||||
|
||||
// Shadows
|
||||
--floating-button-drop-shadow-color: var(--accent-color);
|
||||
|
||||
// Canvas
|
||||
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
|
||||
--inpainting-alerts-icon-color: rgb(255, 255, 255);
|
||||
--inpainting-alerts-bg-active: var(--accent-color);
|
||||
--inpainting-alerts-icon-active: rgb(255, 255, 255);
|
||||
--inpainting-alerts-bg-alert: var(--invalid);
|
||||
--inpainting-alerts-icon-alert: rgb(255, 255, 255);
|
||||
|
||||
//Checkerboard
|
||||
--checkboard-dots-color: rgb(35, 35, 39);
|
||||
|
||||
// Scrollbar
|
||||
--scrollbar-color: var(--accent-color);
|
||||
--scrollbar-color-hover: var(--accent-color-bright);
|
||||
|
||||
// SubHook
|
||||
--subhook-color: var(--accent-color);
|
||||
}
|
||||
@ -1,138 +0,0 @@
|
||||
// [data-theme='light'] {
|
||||
// // General Colors
|
||||
// --white: rgb(255, 255, 255);
|
||||
|
||||
// // Accent Colors
|
||||
// --accent-color-dim: rgb(186, 146, 0);
|
||||
// --accent-color: rgb(235, 185, 5);
|
||||
// --accent-color-bright: rgb(255, 200, 0);
|
||||
// --accent-color-hover: var(--accent-color-bright);
|
||||
|
||||
// // App Colors
|
||||
// --root-bg-color: rgb(255, 255, 255);
|
||||
// --background-color: rgb(220, 222, 224);
|
||||
// --background-color-light: rgb(250, 252, 254);
|
||||
// --background-color-secondary: rgb(208, 210, 212);
|
||||
|
||||
// --text-color: rgb(0, 0, 0);
|
||||
// --text-color-secondary: rgb(40, 40, 40);
|
||||
// --subtext-color: rgb(24, 24, 34);
|
||||
// --subtext-color-bright: rgb(142, 144, 146);
|
||||
|
||||
// --border-color: rgb(200, 200, 200);
|
||||
// --border-color-light: rgb(147, 147, 147);
|
||||
|
||||
// --svg-color: rgb(50, 50, 50);
|
||||
|
||||
// --invalid: rgb(255, 75, 75);
|
||||
// --invalid-secondary: rgb(120, 5, 5);
|
||||
|
||||
// --destructive-color: rgb(237, 51, 51);
|
||||
// --destructive-color-hover: rgb(255, 55, 55);
|
||||
|
||||
// --warning-color: rgb(224, 142, 42);
|
||||
// --warning-color-hover: rgb(255, 167, 60);
|
||||
|
||||
// // Error status colors
|
||||
// --border-color-invalid: rgb(255, 80, 50);
|
||||
// --box-shadow-color-invalid: none;
|
||||
|
||||
// // Tabs
|
||||
// --tab-color: rgb(202, 204, 206);
|
||||
// --tab-hover-color: rgb(196, 198, 200);
|
||||
// --tab-panel-bg: rgb(206, 208, 210);
|
||||
// --tab-list-bg: rgb(235, 185, 5);
|
||||
// --tab-list-text: rgb(0, 0, 0);
|
||||
// --tab-list-text-inactive: rgb(106, 108, 110);
|
||||
|
||||
// // Button Colors
|
||||
// --btn-base-color: rgb(184, 186, 188);
|
||||
// --btn-base-color-hover: rgb(230, 232, 234);
|
||||
|
||||
// --btn-load-more: rgb(202, 204, 206);
|
||||
// --btn-load-more-hover: rgb(178, 180, 182);
|
||||
// --btn-svg-color: rgb(0, 0, 0);
|
||||
|
||||
// --btn-delete-image: rgb(213, 49, 49);
|
||||
|
||||
// // IAI Button Colors
|
||||
// --btn-checkbox-border-hover: rgb(176, 178, 182);
|
||||
// // Progress Bar Color
|
||||
// --progress-bar-color: rgb(235, 185, 5);
|
||||
|
||||
// // Prompt Box Colors
|
||||
// --prompt-bg-color: rgb(225, 227, 229);
|
||||
// // Switch
|
||||
// --switch-bg-color: rgb(178, 180, 182);
|
||||
// --switch-bg-active-color: rgb(235, 185, 5);
|
||||
|
||||
// // Slider
|
||||
// --slider-color: var(--accent-color);
|
||||
// --slider-mark-color: rgb(0, 0, 0);
|
||||
|
||||
// // Resizable
|
||||
// --resizeable-handle-border-color: rgb(160, 162, 164);
|
||||
|
||||
// // Metadata Viewer
|
||||
// --metadata-bg-color: rgba(230, 230, 230, 0.9);
|
||||
// --metadata-json-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// // Status Message
|
||||
// --status-good-color: rgb(21, 126, 0);
|
||||
// --status-good-glow: var(--background-color);
|
||||
// --status-working-color: rgb(235, 141, 0);
|
||||
// --status-working-glow: var(--background-color);
|
||||
// --status-bad-color: rgb(202, 0, 0);
|
||||
// --status-bad-glow: var(--background-color);
|
||||
// --notice-color: rgb(255, 71, 90);
|
||||
|
||||
// // Settings Modal
|
||||
// --settings-modal-bg: rgb(202, 204, 206);
|
||||
|
||||
// // Input
|
||||
// --input-checkbox-bg: rgb(167, 167, 171);
|
||||
// --input-checkbox-checked-bg: rgb(235, 185, 5);
|
||||
// --input-checkbox-checked-tick: rgb(0, 0, 0);
|
||||
// --input-border-color: rgb(0, 0, 0);
|
||||
// --input-box-shadow-color: none;
|
||||
|
||||
// // Console
|
||||
// --error-level-info: rgb(42, 42, 42);
|
||||
// --error-level-warning: rgb(173, 121, 0);
|
||||
// --error-level-error: rgb(145, 14, 0);
|
||||
// --console-bg-color: rgb(220, 224, 230);
|
||||
// --console-icon-button-bg-color: var(--switch-bg-color);
|
||||
// --console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);
|
||||
|
||||
// // Img2Img
|
||||
// --img2img-img-bg-color: rgb(180, 182, 184);
|
||||
|
||||
// // Gallery
|
||||
|
||||
// // Context Menus
|
||||
// --context-menu-bg-color: var(--background-color);
|
||||
// --context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
|
||||
// 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
|
||||
// --context-menu-bg-color-hover: var(--background-color-secondary);
|
||||
|
||||
// // Shadows
|
||||
// --floating-button-drop-shadow-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
// // Canvas
|
||||
// --inpainting-alerts-bg: rgba(220, 222, 224, 0.75);
|
||||
// --inpainting-alerts-icon-color: rgb(0, 0, 0);
|
||||
// --inpainting-alerts-bg-active: rgb(255, 200, 0);
|
||||
// --inpainting-alerts-icon-active: rgb(0, 0, 0);
|
||||
// --inpainting-alerts-bg-alert: var(--invalid);
|
||||
// --inpainting-alerts-icon-alert: rgb(0, 0, 0);
|
||||
|
||||
// // Checkerboard
|
||||
// --checkboard-dots-color: rgb(160, 160, 172);
|
||||
|
||||
// // Scrollbar
|
||||
// --scrollbar-color: rgb(180, 180, 184);
|
||||
// --scrollbar-color-hover: rgb(150, 150, 154);
|
||||
|
||||
// // SubHook
|
||||
// --subhook-color: rgb(0, 0, 0);
|
||||
// }
|
||||
@ -3,7 +3,6 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -20,16 +19,16 @@ const invokeAIButton = defineStyle((props) => {
|
||||
fontSize: 'sm',
|
||||
border: 'none',
|
||||
borderRadius: 'base',
|
||||
bg: mode(`${c}.250`, `${c}.800`)(props),
|
||||
color: mode('base.900', 'base.100')(props),
|
||||
bg: `${c}.800`,
|
||||
color: 'base.100',
|
||||
_hover: {
|
||||
bg: mode(`${c}.300`, `${c}.700`)(props),
|
||||
bg: `${c}.700`,
|
||||
},
|
||||
_expanded: {
|
||||
bg: mode(`${c}.250`, `${c}.750`)(props),
|
||||
bg: `${c}.750`,
|
||||
borderBottomRadius: 'none',
|
||||
_hover: {
|
||||
bg: mode(`${c}.300`, `${c}.700`)(props),
|
||||
bg: `${c}.700`,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -38,7 +37,7 @@ const invokeAIButton = defineStyle((props) => {
|
||||
const invokeAIPanel = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
return {
|
||||
bg: mode(`${c}.200`, `${c}.800`)(props),
|
||||
bg: `${c}.800`,
|
||||
borderRadius: 'base',
|
||||
borderTopRadius: 'none',
|
||||
p: 4,
|
||||
|
||||
@ -1,45 +1,44 @@
|
||||
import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const invokeAI = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
// must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles
|
||||
const _disabled = {
|
||||
bg: mode(`${c}.200`, `${c}.600`)(props),
|
||||
color: mode(`${c}.700`, `${c}.100`)(props),
|
||||
bg: `${c}.600`,
|
||||
color: `${c}.100`,
|
||||
svg: {
|
||||
fill: mode(`${c}.700`, `${c}.100`)(props),
|
||||
fill: `${c}.100`,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
bg: mode(`${c}.300`, `${c}.700`)(props),
|
||||
color: mode(`${c}.800`, `${c}.100`)(props),
|
||||
bg: `${c}.700`,
|
||||
color: `${c}.100`,
|
||||
borderRadius: 'base',
|
||||
svg: {
|
||||
fill: mode(`${c}.800`, `${c}.100`)(props),
|
||||
fill: `${c}.100`,
|
||||
},
|
||||
_disabled,
|
||||
_hover: {
|
||||
bg: mode(`${c}.400`, `${c}.650`)(props),
|
||||
color: mode(`black`, `${c}.50`)(props),
|
||||
bg: `${c}.650`,
|
||||
color: `${c}.50`,
|
||||
svg: {
|
||||
fill: mode(`black`, `${c}.50`)(props),
|
||||
fill: `${c}.50`,
|
||||
},
|
||||
_disabled,
|
||||
},
|
||||
_checked: {
|
||||
bg: mode('accent.200', 'accent.700')(props),
|
||||
color: mode('accent.800', 'accent.100')(props),
|
||||
bg: 'accent.700',
|
||||
color: 'accent.100',
|
||||
svg: {
|
||||
fill: mode('accent.800', 'accent.100')(props),
|
||||
fill: 'accent.100',
|
||||
},
|
||||
_disabled,
|
||||
_hover: {
|
||||
bg: mode('accent.300', 'accent.600')(props),
|
||||
color: mode('accent.900', 'accent.50')(props),
|
||||
bg: 'accent.600',
|
||||
color: 'accent.50',
|
||||
svg: {
|
||||
fill: mode('accent.900', 'accent.50')(props),
|
||||
fill: 'accent.50',
|
||||
},
|
||||
_disabled,
|
||||
},
|
||||
|
||||
@ -3,7 +3,6 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -13,31 +12,31 @@ const invokeAIControl = defineStyle((props) => {
|
||||
|
||||
return {
|
||||
_checked: {
|
||||
bg: mode(`${c}.500`, `${c}.200`)(props),
|
||||
borderColor: mode(`${c}.500`, `${c}.200`)(props),
|
||||
color: mode('white', 'base.900')(props),
|
||||
bg: `${c}.200`,
|
||||
borderColor: `${c}.200`,
|
||||
color: 'base.900',
|
||||
|
||||
_hover: {
|
||||
bg: mode(`${c}.600`, `${c}.300`)(props),
|
||||
borderColor: mode(`${c}.600`, `${c}.300`)(props),
|
||||
bg: `${c}.300`,
|
||||
borderColor: `${c}.300`,
|
||||
},
|
||||
|
||||
_disabled: {
|
||||
borderColor: mode('base.200', 'transparent')(props),
|
||||
bg: mode('base.200', 'whiteAlpha.300')(props),
|
||||
color: mode('base.500', 'whiteAlpha.500')(props),
|
||||
borderColor: 'transparent',
|
||||
bg: 'whiteAlpha.300',
|
||||
color: 'whiteAlpha.500',
|
||||
},
|
||||
},
|
||||
|
||||
_indeterminate: {
|
||||
bg: mode(`${c}.500`, `${c}.200`)(props),
|
||||
borderColor: mode(`${c}.500`, `${c}.200`)(props),
|
||||
color: mode('white', 'base.900')(props),
|
||||
bg: `${c}.200`,
|
||||
borderColor: `${c}.200`,
|
||||
color: 'base.900',
|
||||
},
|
||||
|
||||
_disabled: {
|
||||
bg: mode('base.100', 'whiteAlpha.100')(props),
|
||||
borderColor: mode('base.100', 'transparent')(props),
|
||||
bg: 'whiteAlpha.100',
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
|
||||
_focusVisible: {
|
||||
@ -45,7 +44,7 @@ const invokeAIControl = defineStyle((props) => {
|
||||
},
|
||||
|
||||
_invalid: {
|
||||
borderColor: mode('red.500', 'red.300')(props),
|
||||
borderColor: 'red.300',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const invokeAI = defineStyle((props) => {
|
||||
const invokeAI = defineStyle((_props) => {
|
||||
return {
|
||||
fontSize: 'sm',
|
||||
marginEnd: 0,
|
||||
@ -13,7 +12,7 @@ const invokeAI = defineStyle((props) => {
|
||||
_disabled: {
|
||||
opacity: 0.4,
|
||||
},
|
||||
color: mode('base.600', 'base.300')(props),
|
||||
color: 'base.300',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -14,18 +13,18 @@ const invokeAIOverlay = defineStyle({
|
||||
|
||||
const invokeAIDialogContainer = defineStyle({});
|
||||
|
||||
const invokeAIDialog = defineStyle((props) => {
|
||||
const invokeAIDialog = defineStyle((_props) => {
|
||||
return {
|
||||
bg: mode('base.300', 'base.850')(props),
|
||||
bg: 'base.850',
|
||||
maxH: '80vh',
|
||||
};
|
||||
});
|
||||
|
||||
const invokeAIHeader = defineStyle((props) => {
|
||||
const invokeAIHeader = defineStyle((_props) => {
|
||||
return {
|
||||
fontWeight: '600',
|
||||
fontSize: 'lg',
|
||||
color: mode('base.700', 'base.200')(props),
|
||||
color: 'base.200',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
@ -33,7 +33,7 @@ const invokeAIStepperGroup = defineStyle((_props) => {
|
||||
};
|
||||
});
|
||||
|
||||
const invokeAIStepper = defineStyle((props) => {
|
||||
const invokeAIStepper = defineStyle((_props) => {
|
||||
return {
|
||||
border: 'none',
|
||||
// expand arrow hitbox
|
||||
@ -43,11 +43,11 @@ const invokeAIStepper = defineStyle((props) => {
|
||||
my: 0,
|
||||
|
||||
svg: {
|
||||
color: mode('base.600', 'base.300')(props),
|
||||
color: 'base.300',
|
||||
width: 2.5,
|
||||
height: 2.5,
|
||||
_hover: {
|
||||
color: mode('base.900', 'base.50')(props),
|
||||
color: 'base.50',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,7 +4,6 @@ import {
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { cssVar } from '@chakra-ui/theme-tools';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -13,7 +12,7 @@ const $popperBg = cssVar('popper-bg');
|
||||
const $arrowBg = cssVar('popper-arrow-bg');
|
||||
const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
|
||||
|
||||
const invokeAIContent = defineStyle((props) => {
|
||||
const invokeAIContent = defineStyle((_props) => {
|
||||
return {
|
||||
[$arrowBg.variable]: `colors.base.800`,
|
||||
[$popperBg.variable]: `colors.base.800`,
|
||||
@ -23,8 +22,8 @@ const invokeAIContent = defineStyle((props) => {
|
||||
p: 4,
|
||||
borderWidth: '2px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: mode('base.500', 'base.600')(props),
|
||||
bg: mode('base.200', 'base.800')(props),
|
||||
borderColor: 'base.600',
|
||||
bg: 'base.800',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -3,25 +3,22 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
|
||||
const invokeAIFilledTrack = defineStyle((props) => ({
|
||||
bg: mode('accent.400', 'accent.600')(props),
|
||||
const invokeAIFilledTrack = defineStyle((_props) => ({
|
||||
bg: 'accent.600',
|
||||
transition: 'width 0.2s ease-in-out',
|
||||
_indeterminate: {
|
||||
bgGradient: `linear(to-r, transparent 0%, ${mode(
|
||||
'accent.400',
|
||||
'accent.600'
|
||||
)(props)} 50%, transparent 100%);`,
|
||||
bgGradient:
|
||||
'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
|
||||
},
|
||||
}));
|
||||
|
||||
const invokeAITrack = defineStyle((props) => {
|
||||
const invokeAITrack = defineStyle((_props) => {
|
||||
return {
|
||||
bg: mode('base.300', 'base.800')(props),
|
||||
bg: 'base.800',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import { selectAnatomy as parts } from '@chakra-ui/anatomy';
|
||||
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
|
||||
import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
|
||||
const invokeAIIcon = defineStyle((props) => {
|
||||
const invokeAIIcon = defineStyle((_props) => {
|
||||
return {
|
||||
color: mode('base.600', 'base.300')(props),
|
||||
color: 'base.300',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { sliderAnatomy as parts } from '@chakra-ui/anatomy';
|
||||
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
|
||||
const invokeAITrack = defineStyle((props) => {
|
||||
const invokeAITrack = defineStyle((_props) => {
|
||||
return {
|
||||
bg: mode('base.300', 'base.400')(props),
|
||||
bg: 'base.400',
|
||||
h: 1.5,
|
||||
};
|
||||
});
|
||||
@ -15,7 +14,7 @@ const invokeAITrack = defineStyle((props) => {
|
||||
const invokeAIFilledTrack = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
return {
|
||||
bg: mode(`${c}.400`, `${c}.600`)(props),
|
||||
bg: `${c}.600`,
|
||||
h: 1.5,
|
||||
};
|
||||
});
|
||||
@ -27,11 +26,11 @@ const invokeAIThumb = defineStyle((_props) => {
|
||||
};
|
||||
});
|
||||
|
||||
const invokeAIMark = defineStyle((props) => {
|
||||
const invokeAIMark = defineStyle((_props) => {
|
||||
return {
|
||||
fontSize: 'xs',
|
||||
fontWeight: '500',
|
||||
color: mode('base.800', 'base.200')(props),
|
||||
color: 'base.200',
|
||||
mt: 2,
|
||||
insetInlineStart: 'unset',
|
||||
};
|
||||
|
||||
@ -3,7 +3,6 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -12,13 +11,13 @@ const invokeAITrack = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
|
||||
return {
|
||||
bg: mode(`base.400`, `base.600`)(props),
|
||||
bg: 'base.600',
|
||||
|
||||
_focusVisible: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
_checked: {
|
||||
bg: mode(`${c}.400`, `${c}.600`)(props),
|
||||
bg: `${c}.600`,
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -27,7 +26,7 @@ const invokeAIThumb = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
|
||||
return {
|
||||
bg: mode(`${c}.50`, `${c}.50`)(props),
|
||||
bg: `${c}.50`,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@ import {
|
||||
createMultiStyleConfigHelpers,
|
||||
defineStyle,
|
||||
} from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const { defineMultiStyleConfig, definePartsStyle } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
@ -17,26 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
|
||||
|
||||
const invokeAITab = defineStyle((_props) => ({}));
|
||||
|
||||
const invokeAITablist = defineStyle((props) => ({
|
||||
const invokeAITablist = defineStyle((_props) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 1,
|
||||
color: mode('base.500', 'base.700')(props),
|
||||
color: 'base.700',
|
||||
button: {
|
||||
fontSize: 'sm',
|
||||
padding: 2,
|
||||
borderRadius: 'base',
|
||||
_selected: {
|
||||
bg: mode('accent.200', 'accent.700')(props),
|
||||
color: mode('accent.800', 'accent.100')(props),
|
||||
bg: 'accent.700',
|
||||
color: 'accent.100',
|
||||
_hover: {
|
||||
bg: mode('accent.300', 'accent.600')(props),
|
||||
color: mode('accent.900', 'accent.50')(props),
|
||||
bg: 'accent.600',
|
||||
color: 'accent.50',
|
||||
},
|
||||
},
|
||||
_hover: {
|
||||
bg: mode('base.300', 'base.600')(props),
|
||||
color: mode('base.900', 'base.50')(props),
|
||||
bg: 'base.600',
|
||||
color: 'base.50',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
const subtext = defineStyle((props) => ({
|
||||
color: mode('base.700', 'base.400')(props),
|
||||
const subtext = defineStyle((_props) => ({
|
||||
color: 'base.400',
|
||||
}));
|
||||
|
||||
export const textTheme = defineStyleConfig({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ThemeOverride } from '@chakra-ui/react';
|
||||
import type { StyleFunctionProps } from '@chakra-ui/styled-system';
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
|
||||
import { invokeAIThemeColors } from './colors/invokeAI';
|
||||
import { accordionTheme } from './components/accordion';
|
||||
import { buttonTheme } from './components/button';
|
||||
@ -22,15 +22,13 @@ import { textareaTheme } from './components/textarea';
|
||||
|
||||
export const theme: ThemeOverride = {
|
||||
config: {
|
||||
initialColorMode: 'dark',
|
||||
useSystemColorMode: false,
|
||||
cssVarPrefix: 'invokeai',
|
||||
},
|
||||
styles: {
|
||||
global: (props: StyleFunctionProps) => ({
|
||||
global: (_props: StyleFunctionProps) => ({
|
||||
body: {
|
||||
bg: mode('base.100', 'base.900')(props),
|
||||
color: mode('base.800', 'base.50')(props),
|
||||
bg: 'base.900',
|
||||
color: 'base.50',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
...scrollbar,
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools';
|
||||
import { StyleFunctionProps } from '@chakra-ui/theme-tools';
|
||||
|
||||
export const getInputOutlineStyles = (props: StyleFunctionProps) => ({
|
||||
export const getInputOutlineStyles = (_props: StyleFunctionProps) => ({
|
||||
outline: 'none',
|
||||
borderWidth: 2,
|
||||
borderStyle: 'solid',
|
||||
borderColor: mode('base.300', 'base.800')(props),
|
||||
bg: mode('base.200', 'base.900')(props),
|
||||
borderColor: 'base.800',
|
||||
bg: 'base.900',
|
||||
borderRadius: 'base',
|
||||
color: mode('base.900', 'base.100')(props),
|
||||
color: 'base.100',
|
||||
boxShadow: 'none',
|
||||
_hover: {
|
||||
borderColor: mode('base.500', 'base.600')(props),
|
||||
borderColor: 'base.600',
|
||||
},
|
||||
_focus: {
|
||||
borderColor: mode('accent.600', 'accent.700')(props),
|
||||
borderColor: 'accent.700',
|
||||
boxShadow: 'none',
|
||||
_hover: {
|
||||
borderColor: mode('accent.700', 'accent.600')(props),
|
||||
borderColor: 'accent.600',
|
||||
},
|
||||
},
|
||||
_invalid: {
|
||||
borderColor: mode('error.300', 'error.700')(props),
|
||||
borderColor: 'error.700',
|
||||
boxShadow: 'none',
|
||||
_hover: {
|
||||
borderColor: mode('error.500', 'error.600')(props),
|
||||
borderColor: 'error.600',
|
||||
},
|
||||
},
|
||||
_disabled: {
|
||||
borderColor: mode('base.300', 'base.700')(props),
|
||||
bg: mode('base.400', 'base.700')(props),
|
||||
color: mode('base.600', 'base.400')(props),
|
||||
borderColor: 'base.700',
|
||||
bg: 'base.700',
|
||||
color: 'base.400',
|
||||
_hover: {
|
||||
borderColor: mode('base.300', 'base.700')(props),
|
||||
borderColor: 'base.700',
|
||||
},
|
||||
},
|
||||
_placeholder: {
|
||||
color: mode('base.600', 'base.400')(props),
|
||||
color: 'base.400',
|
||||
},
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -734,7 +734,7 @@
|
||||
"@chakra-ui/react-context" "2.0.7"
|
||||
"@chakra-ui/shared-utils" "2.0.5"
|
||||
|
||||
"@chakra-ui/styled-system@2.6.1":
|
||||
"@chakra-ui/styled-system@2.6.1", "@chakra-ui/styled-system@^2.6.1":
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.6.1.tgz#302d496d34c0b7b30c646a7e3c9b113a2f4588da"
|
||||
integrity sha512-jy/1dVi1LxjoRCm+Eo5mqBgvPy5SCWMlIcz6GbIZBDpkGeKZwtqrZLjekxxLBCy8ORY+kJlUB0FT6AzVR/1tjw==
|
||||
@ -2107,6 +2107,21 @@ concat-map@0.0.1:
|
||||
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
|
||||
integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
|
||||
|
||||
concurrently@^7.6.0:
|
||||
version "7.6.0"
|
||||
resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.6.0.tgz#531a6f5f30cf616f355a4afb8f8fcb2bba65a49a"
|
||||
integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
|
||||
dependencies:
|
||||
chalk "^4.1.0"
|
||||
date-fns "^2.29.1"
|
||||
lodash "^4.17.21"
|
||||
rxjs "^7.0.0"
|
||||
shell-quote "^1.7.3"
|
||||
spawn-command "^0.0.2-1"
|
||||
supports-color "^8.1.0"
|
||||
tree-kill "^1.2.2"
|
||||
yargs "^17.3.1"
|
||||
|
||||
configstore@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
|
||||
@ -2191,6 +2206,11 @@ csstype@^3.0.11, csstype@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
|
||||
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
|
||||
|
||||
date-fns@^2.29.1:
|
||||
version "2.29.3"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
|
||||
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
|
||||
|
||||
dateformat@^5.0.3:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-5.0.3.tgz#fe2223eff3cc70ce716931cb3038b59a9280696e"
|
||||
@ -4833,7 +4853,7 @@ run-parallel@^1.1.9:
|
||||
dependencies:
|
||||
queue-microtask "^1.2.2"
|
||||
|
||||
rxjs@^7.8.0:
|
||||
rxjs@^7.0.0, rxjs@^7.8.0:
|
||||
version "7.8.0"
|
||||
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4"
|
||||
integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
|
||||
@ -4916,6 +4936,11 @@ shebang-regex@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
|
||||
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
|
||||
|
||||
shell-quote@^1.7.3:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.0.tgz#20d078d0eaf71d54f43bd2ba14a1b5b9bfa5c8ba"
|
||||
integrity sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==
|
||||
|
||||
side-channel@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
|
||||
@ -5012,6 +5037,11 @@ source-map@^0.7.4:
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
|
||||
integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
|
||||
|
||||
spawn-command@^0.0.2-1:
|
||||
version "0.0.2-1"
|
||||
resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
|
||||
integrity sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
|
||||
|
||||
stream-to-array@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-2.3.0.tgz#bbf6b39f5f43ec30bc71babcb37557acecf34353"
|
||||
@ -5151,6 +5181,13 @@ supports-color@^7.1.0:
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
supports-color@^8.1.0:
|
||||
version "8.1.1"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
|
||||
integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
supports-preserve-symlinks-flag@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
|
||||
@ -5225,6 +5262,11 @@ tr46@~0.0.3:
|
||||
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
|
||||
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
|
||||
|
||||
tree-kill@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
|
||||
integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
|
||||
|
||||
ts-graphviz@^1.5.0:
|
||||
version "1.5.5"
|
||||
resolved "https://registry.yarnpkg.com/ts-graphviz/-/ts-graphviz-1.5.5.tgz#b5e9079c18289fb36b6b53f3d81da96445c37514"
|
||||
@ -5628,7 +5670,7 @@ yargs-parser@^21.1.1:
|
||||
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
|
||||
integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
|
||||
|
||||
yargs@^17.5.1:
|
||||
yargs@^17.3.1, yargs@^17.5.1:
|
||||
version "17.7.1"
|
||||
resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.1.tgz#34a77645201d1a8fc5213ace787c220eabbd0967"
|
||||
integrity sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==
|
||||
|
||||
Reference in New Issue
Block a user