1580158
/
sd-webui-lobe-theme
mirror of https://github.com/canisminor1990/sd-webui-lobe-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(break-change): full support gradio-3.23.0

pull/23/head
canisminor1990 2023-03-27 01:04:18 +08:00
parent e47578c9f1
commit 0fb84da2c6
25 changed files with 1059 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.huskyrc Normal file
View File

@ -0,0 +1,5 @@
{
"hooks": {
"pre-commit" : "lint-staged",
}
}

3
.prettierignore Normal file
View File

@ -0,0 +1,3 @@
**/*.svg
**/*.ejs
**/*.html

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"arrowParens": "always",
"singleQuote": true
}

3
README.md
View File

@ -5,11 +5,12 @@
![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/screenshot.png?raw=true)
## Installation
As an extension (recommended)
Either clone the repo into your extensions folder:
```shell
git clone "https://github.com/canisminor1990/sd-web-ui-kitchen-theme" extensions/kitchen-theme
```
(The second argument specifies the name of the folder, you can choose whatever you like).
(The second argument specifies the name of the folder, you can choose whatever you like).

BIN
assets/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

12
gulpfile.js
View File

@ -1,10 +1,10 @@
const gulp = require("gulp");
const less = require("gulp-less");
const gulp = require('gulp');
const less = require('gulp-less');
gulp.task("less", function () {
return gulp.src("src/theme/*.less").pipe(less()).pipe(gulp.dest("./"));
gulp.task('less', function () {
return gulp.src('src/theme/*.less').pipe(less()).pipe(gulp.dest('./'));
});
gulp.task("watch", function () {
gulp.watch("src/theme/**/*", gulp.parallel("less"));
gulp.task('watch', function () {
gulp.watch('src/theme/**/*', gulp.parallel('less'));
});

12
javascript/favicon.js
View File

@ -1,14 +1,14 @@
class FaviconHandler {
static setFavicon() {
const link = document.createElement("link");
link.rel = "icon";
link.type = "image/svg+xml";
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/svg+xml';
link.href =
"https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg";
document.getElementsByTagName("head")[0].appendChild(link);
'https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg';
document.getElementsByTagName('head')[0].appendChild(link);
}
}
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener('DOMContentLoaded', () => {
FaviconHandler.setFavicon();
});

72
javascript/format-prompt.js
View File

@ -4,7 +4,7 @@ class Converter {
}
static convertStr(srt) {
return srt.replace(/：/g, ":").replace(/（/g, "(").replace(/）/g, ")");
return srt.replace(/：/g, ':').replace(/（/g, '(').replace(/）/g, ')');
}
static convertStr2Array(str) {
@ -22,9 +22,9 @@ class Converter {
arr.push(str.substring(start, match.index));
start = match.index;
}
if (match[0] === "(" || match[0] === "<" || match[0] === "[") {
if (match[0] === '(' || match[0] === '<' || match[0] === '[') {
depth++;
} else if (match[0] === ")" || match[0] === ">" || match[0] === "]") {
} else if (match[0] === ')' || match[0] === '>' || match[0] === ']') {
depth--;
}
if (depth === 0) {
@ -44,7 +44,7 @@ class Converter {
let start = 0;
let inBracket = false;
for (let i = 0; i < str.length; i++) {
if (str[i] === "," && !inBracket) {
if (str[i] === ',' && !inBracket) {
arr.push(str.substring(start, i).trim());
start = i + 1;
} else if (str[i].match(bracketRegex)) {
@ -59,7 +59,7 @@ class Converter {
const cleanStr = (str) => {
let arr = splitByBracket(str);
arr = arr.flatMap((s) => splitByComma(s));
return arr.filter((s) => s !== "");
return arr.filter((s) => s !== '');
};
return cleanStr(str)
@ -69,9 +69,9 @@ class Converter {
})
.filter(Boolean)
.sort((a, b) => {
return a.includes("<") && !b.includes("<")
return a.includes('<') && !b.includes('<')
? 1
: b.includes("<") && !a.includes("<")
: b.includes('<') && !a.includes('<')
? -1
: 0;
});
@ -79,17 +79,17 @@ class Converter {
static convertArray2Str(array) {
const newArray = array.map((item) => {
if (item.includes("<")) return item;
if (item.includes('<')) return item;
const newItem = item
.replace(/\s+/g, " ")
.replace([/\，|\.|\。/g, ","])
.replace([/\“|\‘|\”|\"|\\|\//g, ""])
.replace(/\, /g, ",")
.replace(/\,\,/g, ",")
.replace(/\,/g, ", ");
return Converter.convertStr2Array(newItem).join(", ");
.replace(/\s+/g, ' ')
.replace([/\，|\.|\。/g, ','])
.replace([/\“|\‘|\”|\"|\\|\//g, ''])
.replace(/\, /g, ',')
.replace(/\,\,/g, ',')
.replace(/\,/g, ', ');
return Converter.convertStr2Array(newItem).join(', ');
});
return newArray.join(", ");
return newArray.join(', ');
}
static convert(input) {
@ -105,8 +105,8 @@ class Converter {
const square_bracket_multiplier = 1 / 1.05;
const brackets = {
"{": { stack: [], multiplier: curly_bracket_multiplier },
"[": { stack: [], multiplier: square_bracket_multiplier },
'{': { stack: [], multiplier: curly_bracket_multiplier },
'[': { stack: [], multiplier: square_bracket_multiplier },
};
function multiply_range(start_position, multiplier) {
@ -120,8 +120,8 @@ class Converter {
if (word in brackets) {
brackets[word].stack.push(res.length);
} else if (word == "}" || word == "]") {
const bracket = brackets[word === "}" ? "{" : "["];
} else if (word == '}' || word == ']') {
const bracket = brackets[word === '}' ? '{' : '['];
if (bracket.stack.length > 0) {
multiply_range(bracket.stack.pop(), bracket.multiplier);
}
@ -137,7 +137,7 @@ class Converter {
}
if (res.length == 0) {
res = [["", 1.0]];
res = [['', 1.0]];
}
let i = 0;
@ -150,7 +150,7 @@ class Converter {
}
}
let result = "";
let result = '';
for (const [word, value] of res) {
result += value === 1.0 ? word : `(${word}:${value.toString()})`;
}
@ -158,17 +158,17 @@ class Converter {
}
static dispatchInputEvent(target) {
let inputEvent = new Event("input");
Object.defineProperty(inputEvent, "target", { value: target });
let inputEvent = new Event('input');
Object.defineProperty(inputEvent, 'target', { value: target });
target.dispatchEvent(inputEvent);
}
static onClickConvert(type) {
const default_prompt = "";
const default_negative = "";
const default_prompt = '';
const default_negative = '';
const prompt = gradioApp().querySelector(
`#${type}_prompt > label > textarea`
`#${type}_prompt > label > textarea`,
);
const result = Converter.convert(prompt.value);
prompt.value =
@ -177,7 +177,7 @@ class Converter {
: result;
Converter.dispatchInputEvent(prompt);
const negprompt = gradioApp().querySelector(
`#${type}_neg_prompt > label > textarea`
`#${type}_neg_prompt > label > textarea`,
);
const negResult = Converter.convert(negprompt.value);
negprompt.value =
@ -190,12 +190,12 @@ class Converter {
}
static createButton(id, innerHTML, onClick) {
const button = document.createElement("button");
const button = document.createElement('button');
button.id = id;
button.type = "button";
button.type = 'button';
button.innerHTML = innerHTML;
button.className = "lg secondary gradio-button tool svelte-1ipelgc";
button.addEventListener("click", onClick);
button.className = 'lg secondary gradio-button tool svelte-1ipelgc';
button.addEventListener('click', onClick);
return button;
}
@ -206,14 +206,14 @@ class Converter {
if (!generateBtn || !actionsColumn || nai2local) return;
const convertBtn = Converter.createButton(
`${type}_nai2localconvert`,
"🪄",
() => Converter.onClickConvert(type)
'🪄',
() => Converter.onClickConvert(type),
);
actionsColumn.parentNode.append(convertBtn);
}
}
onUiUpdate(() => {
Converter.addPromptButton("txt2img");
Converter.addPromptButton("img2img");
Converter.addPromptButton('txt2img');
Converter.addPromptButton('img2img');
});

24
javascript/prompt-bracket-checker.js
View File

@ -6,28 +6,28 @@ class BracketChecker {
{
regex: /\(/g,
error:
"(...) - Different number of opening and closing parentheses detected.\n",
'(...) - Different number of opening and closing parentheses detected.\n',
},
{
regex: /\[/g,
error:
"[...] - Different number of opening and closing square brackets detected.\n",
'[...] - Different number of opening and closing square brackets detected.\n',
},
{
regex: /\{/g,
error:
"{...} - Different number of opening and closing curly brackets detected.\n",
'{...} - Different number of opening and closing curly brackets detected.\n',
},
];
}
check() {
var title = "";
var title = '';
this.errorStrings.forEach(({ regex, error }) => {
var openMatches = (this.textArea.value.match(regex) || []).length;
var closeMatches = (
this.textArea.value.match(
regex.replace(/\(/g, ")").replace(/\[/g, "]").replace(/\{/g, "}")
regex.replace(/\(/g, ')').replace(/\[/g, ']').replace(/\{/g, '}'),
) || []
).length;
if (openMatches != closeMatches) {
@ -35,11 +35,11 @@ class BracketChecker {
title += error;
}
} else {
title = this.counterElt.title.replace(error, "");
title = this.counterElt.title.replace(error, '');
}
});
this.counterElt.title = title;
this.counterElt.classList.toggle("error", !!title);
this.counterElt.classList.toggle('error', !!title);
}
}
@ -47,22 +47,22 @@ function setupBracketChecking(id_prompt, id_counter) {
var textarea = gradioApp().querySelector(`#${id_prompt} > label > textarea`);
var counter = gradioApp().getElementById(id_counter);
var bracketChecker = new BracketChecker(textarea, counter);
textarea.addEventListener("input", () => bracketChecker.check());
textarea.addEventListener('input', () => bracketChecker.check());
}
const shadowRootLoaded = setInterval(() => {
var shadowRoot = document.querySelector("gradio-app").shadowRoot;
var shadowRoot = document.querySelector('gradio-app').shadowRoot;
if (!shadowRoot) return;
var shadowTextArea = shadowRoot.querySelector(
`#txt2img_prompt > label > textarea`
`#txt2img_prompt > label > textarea`,
);
if (!shadowTextArea) return;
clearInterval(shadowRootLoaded);
["txt2img", "txt2img_neg", "img2img", "img2img_neg"].forEach((prompt) => {
['txt2img', 'txt2img_neg', 'img2img', 'img2img_neg'].forEach((prompt) => {
setupBracketChecking(`${prompt}_prompt`, `${prompt}_token_counter`);
setupBracketChecking(
`${prompt}_prompt`,
`${prompt}_negative_token_counter`
`${prompt}_negative_token_counter`,
);
});
}, 1000);

17
package.json
View File

@ -6,13 +6,20 @@
"license": "MIT",
"scripts": {
"dev": "gulp watch",
"build": "gulp less"
},
"dependencies": {
"gulp": "^4.0.2",
"gulp-less": "^5.0.0"
"build": "gulp less",
"prettier": "prettier --write **/*.{js,jsx,tsx,ts,less,css,md,json}"
},
"dependencies": {},
"devDependencies": {
"husky": "4.3.8",
"gulp": "^4.0.2",
"gulp-less": "^5.0.0",
"lint-staged": "^13.2.0",
"prettier": "^2.8.7"
},
"lint-staged": {
"*.{js,jsx,less,css,md,json}": [
"prettier --write"
]
}
}

19
src/theme/components/extra-network.less
View File

@ -1,18 +1,19 @@
.extra-network-thumbs {
.actions {
.name {
background:linear-gradient(0deg, rgba(0,0,0,.8), transparent);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
font-weight: 500;
text-shadow: 0 1px 1px rgba(0,0,0,.9);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}
.additional > ul {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(0,0,0,.8), transparent) !important;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.8),
transparent
) !important;
opacity: 0;
&:hover {
opacity: 1;
@ -24,12 +25,12 @@
border-radius: var(--borderRadiusXS);
background-size: cover;
box-shadow: var(--boxShadow);
outline: 1px solid rgba(0,0,0,.5);
outline: 1px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s ease-in-out;
&:hover {
transform: scale(1.5);
z-index: 500;
box-shadow: 0 6px 24px -4px rgba(0,0,0,.8);
box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.8);
}
}
@ -42,4 +43,4 @@
opacity: 1;
}
}
}
}

7
src/theme/components/gallery.less
View File

@ -2,21 +2,20 @@
.gradio-gallery,
.gradio-image,
.gradio-video,
.gradio-file{
.gradio-file {
background: var(--galleryBackground) !important;
border: 2px solid var(--colorBorder) !important;
border-radius: var(--block-radius) !important;
}
div.svelte-awbtu4 {
.livePreview,
.gradio-gallery,
.gradio-image,
.gradio-video,
.gradio-file{
.gradio-file {
background: var(--galleryBackground) !important;
border: 2px solid var(--colorBorder) !important;
border-radius: var(--block-radius) !important;
}
}
}

6
src/theme/components/header.less
View File

@ -6,7 +6,7 @@
display: flex;
align-items: center;
&:before {
content: "";
content: '';
display: block;
background: var(--logo) no-repeat;
width: 129px;
@ -17,7 +17,7 @@
margin-top: 12px;
}
&:after {
content: "";
content: '';
display: block;
position: fixed;
width: 100vw;
@ -69,4 +69,4 @@
}
}
}
}
}

6
src/theme/components/prompt-textarea.less
View File

@ -1,4 +1,4 @@
[id$="2img_prompt"] textarea {
[id$='2img_prompt'] textarea {
color: rgba(208, 226, 178, 0.98) !important;
max-height: 84px;
overflow-y: auto;
@ -7,7 +7,7 @@
}
}
[id$="2img_neg_prompt"] textarea {
[id$='2img_neg_prompt'] textarea {
color: rgba(236, 210, 213, 0.98) !important;
max-height: 84px;
overflow-y: auto;
@ -19,4 +19,4 @@
.block.token-counter span {
backdrop-filter: blur(24px);
display: inline-block;
}
}

2
src/theme/components/script-container.less
View File

@ -2,7 +2,7 @@
background: transparent;
}
[id$="_script_container"] {
[id$='_script_container'] {
margin-top: 24px;
.block.svelte-mppz8v {

4
src/theme/components/sliders.less
View File

@ -1,4 +1,4 @@
input[type="range"] {
input[type='range'] {
-webkit-appearance: none !important ;
background: transparent !important;
@ -95,4 +95,4 @@ input[type="range"] {
border: 2px solid var(--colorPrimary) !important;
background: var(--colorBgElevated) !important;
}
}
}

6
src/theme/plugin/aspect_ratio.less
View File

@ -1,7 +1,7 @@
[id$="_row_aspect_ratio"],
[id$="_row_resolutions"] {
[id$='_row_aspect_ratio'],
[id$='_row_resolutions'] {
display: inline-block !important;
margin: 0;
padding: 0;
width: 180px !important;
}
}

34
src/theme/style.less
View File

@ -1,21 +1,21 @@
/* Root */
@import "utils/normalize";
@import 'utils/normalize';
/* Var */
@import "var/antd";
@import "var/gradioRoot";
@import "var/gradioDark";
@import 'var/antd';
@import 'var/gradioRoot';
@import 'var/gradioDark';
/* Components */
@import "components/header";
@import "components/sliders";
@import "components/prompt-textarea";
@import "components/gallery";
@import "components/script-container";
@import "components/extra-network";
@import 'components/header';
@import 'components/sliders';
@import 'components/prompt-textarea';
@import 'components/gallery';
@import 'components/script-container';
@import 'components/extra-network';
/* Plugin */
@import "plugin/aspect_ratio";
@import 'plugin/aspect_ratio';
/* Theme Fix*/
.gradio-container {
@ -26,18 +26,18 @@
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-image: radial-gradient(
circle 600px at calc(100% - 300px) 300px,
var(--colorPrimaryBgHover),
var(--colorBgLayout)
circle 600px at calc(100% - 300px) 300px,
var(--colorPrimaryBgHover),
var(--colorBgLayout)
);
background-repeat: no-repeat;
}
#txtimg_hr_finalres {
color: var(--colorPrimary) !important;
}
#interrogate, #deepbooru {
max-height: 72px;;
#interrogate,
#deepbooru {
max-height: 72px;
}

38
src/theme/utils/normalize.less vendored
View File

@ -174,7 +174,8 @@ textarea {
*/
button,
input { /* 1 */
input {
/* 1 */
overflow: visible;
}
@ -184,7 +185,8 @@ input { /* 1 */
*/
button,
select { /* 1 */
select {
/* 1 */
text-transform: none;
}
@ -193,9 +195,9 @@ select { /* 1 */
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
@ -204,9 +206,9 @@ button,
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
@ -216,9 +218,9 @@ button::-moz-focus-inner,
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
@ -267,8 +269,8 @@ textarea {
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
@ -277,8 +279,8 @@ textarea {
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
@ -287,7 +289,7 @@ textarea {
* 2. Correct the outline style in Safari.
*/
[type="search"] {
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
@ -296,7 +298,7 @@ textarea {
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
@ -346,4 +348,4 @@ template {
[hidden] {
display: none;
}
}

15
src/theme/var/antd.less
View File

@ -42,7 +42,6 @@
--fontSizeLG: calc(1px * var(--fontSizeBase) + 2px);
--fontSizeXL: calc(1px * var(--fontSizeBase) + 4px);
/* Spacing */
--marginBase: 4;
--marginXXS: calc(1px * var(--marginBase));
@ -65,10 +64,9 @@
/* Shadow */
--boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
--boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
/* Border */
--borderRadiusBase: 2;
@ -77,10 +75,9 @@
--borderRadius: calc(3px * var(--borderRadiusBase));
--borderRadiusLG: calc(4px * var(--borderRadiusBase));
/* Other */
--logo: url("https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg");
--favicon: url("https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg");
--logo: url('https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg');
--favicon: url('https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg');
--galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)
0% 0% / 20px;
}
0% 0% / 20px;
}

8
src/theme/var/gradioDark.less
View File

@ -54,10 +54,10 @@
--loader-color: var(--color-accent);
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Hack", "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--prose-header-text-weight: 600;
--prose-text-weight: 400;
--section-header-text-weight: 400;

18
src/theme/var/gradioRoot.less
View File

@ -54,10 +54,10 @@
--loader-color: var(--color-accent);
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Hack", "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--prose-header-text-weight: 600;
--prose-text-weight: 400;
--section-header-text-weight: 400;
@ -131,9 +131,9 @@
--block-label-border-color: var(--border-color-primary);
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px) 0;
calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px);
calc(var(--radius-lg) - 1px);
--block-label-text-color: var(--neutral-500);
--block-label-text-size: var(--text-sm);
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
@ -171,7 +171,7 @@
--button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: var(--neutral-200);
--button-secondary-background-fill-hover: var(
--button-secondary-background-fill
--button-secondary-background-fill
);
--button-secondary-border-color: var(--neutral-200);
--button-secondary-border-color-hover: var(--button-secondary-border-color);
@ -197,10 +197,10 @@
--checkbox-border-width: var(--input-border-width);
--checkbox-label-background-fill: var(--button-secondary-background-fill);
--checkbox-label-background-fill-hover: var(
--button-secondary-background-fill-hover
--button-secondary-background-fill-hover
);
--checkbox-label-background-fill-selected: var(
--checkbox-label-background-fill
--checkbox-label-background-fill
);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);

159
style.css
View File

@ -170,18 +170,18 @@ select {
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
@ -189,9 +189,9 @@ button::-moz-focus-inner,
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
@ -236,8 +236,8 @@ textarea {
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
/* 1 */
padding: 0;
@ -246,15 +246,15 @@ textarea {
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
@ -263,7 +263,7 @@ textarea {
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
@ -367,9 +367,9 @@ template {
--paddingXL: calc(8px * var(--paddingBase));
/* Shadow */
--boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
--boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
/* Border */
--borderRadiusBase: 2;
--borderRadiusXS: calc(1px * var(--borderRadiusBase));
@ -377,9 +377,10 @@ template {
--borderRadius: calc(3px * var(--borderRadiusBase));
--borderRadiusLG: calc(4px * var(--borderRadiusBase));
/* Other */
--logo: url("https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg");
--favicon: url("https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg");
--galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 20px;
--logo: url('https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg');
--favicon: url('https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg');
--galleryBackground: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)
0% 0% / 20px;
}
:root {
/* Colors */
@ -429,10 +430,10 @@ template {
--link-text-color-visited: var(--secondary-500);
--loader-color: var(--color-accent);
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Hack", "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--prose-header-text-weight: 600;
--prose-text-weight: 400;
--section-header-text-weight: 400;
@ -500,8 +501,10 @@ template {
--block-label-background-fill: var(--background-fill-primary);
--block-label-border-color: var(--border-color-primary);
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
--block-label-radius: calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px);
--block-label-text-color: var(--neutral-500);
--block-label-text-size: var(--text-sm);
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
@ -536,7 +539,9 @@ template {
--button-primary-text-color: var(--primary-600);
--button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: var(--neutral-200);
--button-secondary-background-fill-hover: var(--button-secondary-background-fill);
--button-secondary-background-fill-hover: var(
--button-secondary-background-fill
);
--button-secondary-border-color: var(--neutral-200);
--button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color: var(--neutral-700);
@ -559,8 +564,12 @@ template {
--checkbox-border-radius: var(--radius-sm);
--checkbox-border-width: var(--input-border-width);
--checkbox-label-background-fill: var(--button-secondary-background-fill);
--checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
--checkbox-label-background-fill-hover: var(
--button-secondary-background-fill-hover
);
--checkbox-label-background-fill-selected: var(
--checkbox-label-background-fill
);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
--checkbox-label-border-width: var(--input-border-width);
@ -642,10 +651,10 @@ template {
--color-accent-soft: var(--neutral-700);
--loader-color: var(--color-accent);
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Hack", "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Hack', 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
--prose-header-text-weight: 600;
--prose-text-weight: 400;
--section-header-text-weight: 400;
@ -715,8 +724,10 @@ template {
--block-title-text-color: var(--neutral-200);
--block-info-text-size: var(--text-sm);
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
--block-label-radius: calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px);
--block-label-text-size: var(--text-sm);
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
--block-radius: var(--radius-lg);
@ -747,7 +758,9 @@ template {
--button-primary-border-color-hover: var(--button-primary-border-color);
--button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: var(--neutral-600);
--button-secondary-background-fill-hover: var(--button-secondary-background-fill);
--button-secondary-background-fill-hover: var(
--button-secondary-background-fill
);
--button-secondary-border-color: var(--neutral-600);
--button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color-hover: var(--button-secondary-text-color);
@ -771,8 +784,12 @@ template {
--checkbox-border-color-selected: var(--secondary-600);
--checkbox-border-width: var(--input-border-width);
--checkbox-label-background-fill: var(--button-secondary-background-fill);
--checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
--checkbox-label-background-fill-hover: var(
--button-secondary-background-fill-hover
);
--checkbox-label-background-fill-selected: var(
--checkbox-label-background-fill
);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
--checkbox-label-border-width: var(--input-border-width);
@ -817,7 +834,7 @@ template {
align-items: center;
}
#quicksettings:before {
content: "";
content: '';
display: block;
background: var(--logo) no-repeat;
width: 129px;
@ -828,7 +845,7 @@ template {
margin-top: 12px;
}
#quicksettings:after {
content: "";
content: '';
display: block;
position: fixed;
width: 100vw;
@ -875,48 +892,48 @@ template {
border: none;
border-bottom: 2px solid var(--colorPrimary) !important;
}
input[type="range"] {
input[type='range'] {
-webkit-appearance: none !important ;
background: transparent !important;
}
input[type="range"]:focus {
input[type='range']:focus {
outline: none !important;
}
input[type="range"]::-webkit-slider-runnable-track {
input[type='range']::-webkit-slider-runnable-track {
cursor: pointer !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--colorFill) !important;
opacity: 0.6 !important;
}
input[type="range"]:hover::-webkit-slider-runnable-track {
input[type='range']:hover::-webkit-slider-runnable-track {
background: var(--colorPrimary) !important;
opacity: 1 !important;
transition: all 0.2s ease-in-out;
}
input[type="range"]::-moz-range-track {
input[type='range']::-moz-range-track {
cursor: pointer !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--colorPrimary) !important;
}
input[type="range"]:hover::-moz-range-track {
input[type='range']:hover::-moz-range-track {
background: var(--colorPrimary) !important;
transition: all 0.2s ease-in-out;
}
input[type="range"]::-ms-fill-upper,
input[type="range"]::-ms-fill-lower {
input[type='range']::-ms-fill-upper,
input[type='range']::-ms-fill-lower {
cursor: pointer !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--colorPrimary) !important;
}
input[type="range"]:hover::-ms-fill-upper,
input[type="range"]:hover::-ms-fill-lower {
input[type='range']:hover::-ms-fill-upper,
input[type='range']:hover::-ms-fill-lower {
background: var(--colorBgElevated) !important;
transition: all 0.2s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb {
input[type='range']::-webkit-slider-thumb {
border: 2px solid var(--colorText) !important;
height: 16px !important;
width: 16px !important;
@ -926,12 +943,12 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
margin-top: -5px !important;
}
input[type="range"]:active::-webkit-slider-thumb {
input[type='range']:active::-webkit-slider-thumb {
box-shadow: 0 0 3px var(--colorPrimary) !important;
border: 2px solid var(--colorPrimary) !important;
background: var(--colorBgElevated) !important;
}
input[type="range"]::-moz-range-thumb {
input[type='range']::-moz-range-thumb {
border: 2px solid var(--colorText) !important;
height: 16px !important;
width: 16px !important;
@ -941,12 +958,12 @@ input[type="range"]::-moz-range-thumb {
margin-top: -5px !important;
z-index: 999;
}
input[type="range"]:active::-moz-range-thumb {
input[type='range']:active::-moz-range-thumb {
box-shadow: 0 0 3px var(--colorPrimary) !important;
border: 2px solid var(--colorPrimary) !important;
background: var(--colorBgElevated) !important;
}
input[type="range"]::-ms-thumb {
input[type='range']::-ms-thumb {
border: 2px solid var(--colorText) !important;
height: 16px !important;
width: 16px !important;
@ -955,25 +972,25 @@ input[type="range"]::-ms-thumb {
cursor: pointer !important;
margin-top: -5px !important;
}
input[type="range"]:active::-ms-thumb {
input[type='range']:active::-ms-thumb {
box-shadow: 0 0 3px var(--colorPrimary) !important;
border: 2px solid var(--colorPrimary) !important;
background: var(--colorBgElevated) !important;
}
[id$="2img_prompt"] textarea {
[id$='2img_prompt'] textarea {
color: rgba(208, 226, 178, 0.98) !important;
max-height: 84px;
overflow-y: auto;
}
[id$="2img_prompt"] textarea:focus {
[id$='2img_prompt'] textarea:focus {
color: rgba(244, 255, 225, 0.98) !important;
}
[id$="2img_neg_prompt"] textarea {
[id$='2img_neg_prompt'] textarea {
color: rgba(236, 210, 213, 0.98) !important;
max-height: 84px;
overflow-y: auto;
}
[id$="2img_neg_prompt"] textarea:focus {
[id$='2img_neg_prompt'] textarea:focus {
color: rgba(255, 240, 242, 0.98) !important;
}
.block.token-counter span {
@ -1001,13 +1018,13 @@ div.svelte-awbtu4 .gradio-file {
.block.svelte-mppz8v {
background: transparent;
}
[id$="_script_container"] {
[id$='_script_container'] {
margin-top: 24px;
}
[id$="_script_container"] .block.svelte-mppz8v {
[id$='_script_container'] .block.svelte-mppz8v {
border: unset !important;
}
[id$="_script_container"] > div:not(.absolute) {
[id$='_script_container'] > div:not(.absolute) {
background-color: var(--colorFillTertiary) !important;
border-color: transparent !important;
transition: all 0.3s ease-in-out !important;
@ -1025,7 +1042,11 @@ div.svelte-awbtu4 .gradio-file {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent) !important;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.8),
transparent
) !important;
opacity: 0;
}
.extra-network-thumbs .actions .additional > ul:hover {
@ -1053,8 +1074,8 @@ div.svelte-awbtu4 .gradio-file {
opacity: 1;
}
/* Plugin */
[id$="_row_aspect_ratio"],
[id$="_row_resolutions"] {
[id$='_row_aspect_ratio'],
[id$='_row_resolutions'] {
display: inline-block !important;
margin: 0;
padding: 0;
@ -1068,7 +1089,11 @@ div.svelte-awbtu4 .gradio-file {
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-image: radial-gradient(circle 600px at calc(100% - 300px) 300px, var(--colorPrimaryBgHover), var(--colorBgLayout));
background-image: radial-gradient(
circle 600px at calc(100% - 300px) 300px,
var(--colorPrimaryBgHover),
var(--colorBgLayout)
);
background-repeat: no-repeat;
}
#txtimg_hr_finalres {

98
utils/formatCSS.js
View File

@ -1,9 +1,9 @@
const fs = require("fs");
const path = require("path");
const fs = require('fs');
const path = require('path');
// 从本地文件读取CSS
const cssFilePath = path.resolve(__dirname, "style.css");
const css = fs.readFileSync(cssFilePath, "utf-8");
const cssFilePath = path.resolve(__dirname, 'style.css');
const css = fs.readFileSync(cssFilePath, 'utf-8');
// 用于存储变量及其值的对象
const cssVariables = {};
@ -15,7 +15,7 @@ const cssVarReferenceRegex = /var\((--\w+)\)/g;
// 解析CSS变量及其值
let match;
while ((match = cssVarRegex.exec(css))) {
const variable = match[0].split(":")[0].trim();
const variable = match[0].split(':')[0].trim();
const value = match[1].trim();
cssVariables[variable] = value;
}
@ -43,38 +43,38 @@ const groups = {
sortedVariables.forEach((variable) => {
const value = cssVariables[variable];
const isColor =
value.startsWith("#") ||
value.includes("rgb") ||
value.includes("color") ||
variable.includes("color") ||
variable.includes("fill") ||
variable.includes("neutral");
value.startsWith('#') ||
value.includes('rgb') ||
value.includes('color') ||
variable.includes('color') ||
variable.includes('fill') ||
variable.includes('neutral');
const isTypography =
variable.includes("text") ||
variable.includes("font") ||
variable.includes("prose") ||
variable.includes("link");
variable.includes('text') ||
variable.includes('font') ||
variable.includes('prose') ||
variable.includes('link');
const isSpacing =
variable.includes("spacing") ||
variable.includes("padding") ||
variable.includes("gap") ||
variable.includes("margin");
value.includes("padding") || value.includes("margin");
const isBorder = variable.includes("radius") || variable.includes("border");
const isBoxShadow = variable.includes("shadow");
if (variable.includes("--body")) {
variable.includes('spacing') ||
variable.includes('padding') ||
variable.includes('gap') ||
variable.includes('margin');
value.includes('padding') || value.includes('margin');
const isBorder = variable.includes('radius') || variable.includes('border');
const isBoxShadow = variable.includes('shadow');
if (variable.includes('--body')) {
groups.body.push(variable);
} else if (variable.includes("--block")) {
} else if (variable.includes('--block')) {
groups.block.push(variable);
} else if (variable.includes("--panel")) {
} else if (variable.includes('--panel')) {
groups.panel.push(variable);
} else if (variable.includes("--button")) {
} else if (variable.includes('--button')) {
groups.button.push(variable);
} else if (variable.includes("--checkbox")) {
} else if (variable.includes('--checkbox')) {
groups.checkbox.push(variable);
} else if (variable.includes("--input")) {
} else if (variable.includes('--input')) {
groups.input.push(variable);
} else if (variable.includes("--table")) {
} else if (variable.includes('--table')) {
groups.table.push(variable);
} else if (isBorder) {
groups.border.push(variable);
@ -94,44 +94,44 @@ sortedVariables.forEach((variable) => {
// 生成排序后的CSS变量
const generateGroupCss = (groupName) => {
const cache = groups[groupName].map(
(variable) => `${variable}: ${cssVariables[variable]};`
(variable) => `${variable}: ${cssVariables[variable]};`,
);
const firstPart = cache.filter((item) => item.includes("var"));
const secondPart = cache.filter((item) => !item.includes("var"));
return [...secondPart, ...firstPart].join("\n");
const firstPart = cache.filter((item) => item.includes('var'));
const secondPart = cache.filter((item) => !item.includes('var'));
return [...secondPart, ...firstPart].join('\n');
};
const sortedCss =
"#output {\n" +
'#output {\n' +
`/* Colors */\n` +
generateGroupCss("colors") +
generateGroupCss('colors') +
`\n\n/* Typography */\n` +
generateGroupCss("typography") +
generateGroupCss('typography') +
`\n\n/* Spacing */\n` +
generateGroupCss("spacing") +
generateGroupCss('spacing') +
`\n\n/* Border */\n` +
generateGroupCss("border") +
generateGroupCss('border') +
`\n\n/* BoxShadow */\n` +
generateGroupCss("boxShadow") +
generateGroupCss('boxShadow') +
`\n\n/* Body */\n` +
generateGroupCss("body") +
generateGroupCss('body') +
`\n\n/* Block */\n` +
generateGroupCss("block") +
generateGroupCss('block') +
`\n\n/* Panel */\n` +
generateGroupCss("panel") +
generateGroupCss('panel') +
`\n\n/* Button */\n` +
generateGroupCss("button") +
generateGroupCss('button') +
`\n\n/* Checkbox */\n` +
generateGroupCss("checkbox") +
generateGroupCss('checkbox') +
`\n\n/* Input */\n` +
generateGroupCss("input") +
generateGroupCss('input') +
`\n\n/* Table */\n` +
generateGroupCss("table") +
generateGroupCss('table') +
`\n\n/* Other */\n` +
generateGroupCss("other") +
"}";
generateGroupCss('other') +
'}';
console.log(sortedCss);
// 将排序后的CSS变量写入文件
fs.writeFileSync("sorted-css-variables.css", sortedCss);
fs.writeFileSync('sorted-css-variables.css', sortedCss);

750
yarn.lock
View File

File diff suppressed because it is too large Load Diff