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
@ -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',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user