From a65578f2b1d455a735b7a8663e40accf30aaf051 Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 25 Sep 2024 17:39:34 +0300 Subject: [PATCH 01/19] ported datasource to shoelace --- package-lock.json | 120 ++ package.json | 1 + src/services/dataSourceEditorProvider.ts | 20 +- src/webview/components/kdbDataSourceView.ts | 1096 +++++++++---------- src/webview/main.ts | 12 + src/webview/styles/dark.css | 483 ++++++++ src/webview/styles/light.css | 484 ++++++++ src/webview/styles/style.css | 22 + 8 files changed, 1679 insertions(+), 559 deletions(-) create mode 100644 src/webview/styles/dark.css create mode 100644 src/webview/styles/light.css create mode 100644 src/webview/styles/style.css diff --git a/package-lock.json b/package-lock.json index 875901c3..cb404763 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "vscode-uri": "^3.0.8" }, "devDependencies": { + "@shoelace-style/shoelace": "^2.17.1", "@types/extract-zip": "^2.0.1", "@types/fs-extra": "^11.0.4", "@types/glob": "^8.1.0", @@ -353,6 +354,15 @@ "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz", "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==" }, + "node_modules/@ctrl/tinycolor": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz", + "integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", @@ -906,6 +916,31 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dev": true, + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "dev": true + }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", @@ -1091,6 +1126,15 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@lit/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.5.tgz", + "integrity": "sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==", + "dev": true, + "peerDependencies": { + "@types/react": "17 || 18" + } + }, "node_modules/@lit/reactive-element": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", @@ -1188,6 +1232,45 @@ "node": ">=14" } }, + "node_modules/@shoelace-style/animations": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.2.0.tgz", + "integrity": "sha512-avvo1xxkLbv2dgtabdewBbqcJfV0e0zCwFqkPMnHFGbJbBHorRFfMAHh1NG9ymmXn0jW95ibUVH03E1NYXD6Gw==", + "dev": true, + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/claviska" + } + }, + "node_modules/@shoelace-style/localize": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz", + "integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==", + "dev": true + }, + "node_modules/@shoelace-style/shoelace": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.17.1.tgz", + "integrity": "sha512-fB9+bPHLg5zVwPbBKEqY3ghyttkJq9RuUzFMTZKweKrNKKDMUACtI8DlMYUqNwpdZMJhf7a0xeak6vFVBSxcbQ==", + "dev": true, + "dependencies": { + "@ctrl/tinycolor": "^4.0.2", + "@floating-ui/dom": "^1.5.3", + "@lit/react": "^1.0.0", + "@shoelace-style/animations": "^1.1.0", + "@shoelace-style/localize": "^3.1.2", + "composed-offset-position": "^0.0.4", + "lit": "^3.0.0", + "qr-creator": "^1.0.0" + }, + "engines": { + "node": ">=14.17.0" + }, + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/claviska" + } + }, "node_modules/@sinonjs/commons": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz", @@ -1354,6 +1437,24 @@ "form-data": "^4.0.0" } }, + "node_modules/@types/prop-types": { + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", + "dev": true, + "peer": true + }, + "node_modules/@types/react": { + "version": "18.3.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz", + "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==", + "dev": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/semver": { "version": "7.5.8", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", @@ -1981,6 +2082,12 @@ "node": ">= 0.8" } }, + "node_modules/composed-offset-position": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz", + "integrity": "sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2016,6 +2123,13 @@ "node": "*" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true, + "peer": true + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4089,6 +4203,12 @@ "node": ">=6" } }, + "node_modules/qr-creator": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz", + "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==", + "dev": true + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/package.json b/package.json index 4ac52d0e..898ea8c2 100644 --- a/package.json +++ b/package.json @@ -955,6 +955,7 @@ "bracketSameLine": true }, "devDependencies": { + "@shoelace-style/shoelace": "^2.17.1", "@types/extract-zip": "^2.0.1", "@types/fs-extra": "^11.0.4", "@types/glob": "^8.1.0", diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index 2fed725c..14f44270 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -12,6 +12,7 @@ */ import { + ColorThemeKind, CustomTextEditorProvider, Disposable, ExtensionContext, @@ -118,6 +119,7 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { dataSourceFile: this.getDocumentAsJson(document), insightsMeta: await this.getMeta(selectedServer), isInsights: true, + theme: window.activeColorTheme.kind, }); } }; @@ -129,6 +131,10 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { } }); + window.onDidChangeActiveColorTheme(() => { + updateWebview(); + }); + const changeDocumentSubscription = workspace.onDidChangeTextDocument( (event) => { if (event.document.uri.toString() === document.uri.toString()) { @@ -220,23 +226,23 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { } private getWebviewContent(webview: Webview) { - const webviewUri = getUri(webview, this.context.extensionUri, [ - "out", - "webview.js", - ]); - const nonce = getNonce(); + const getResource = (resource: string) => + getUri(webview, this.context.extensionUri, ["out", resource]); return /* html */ ` - + + + + + DataSource - `; diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 5c8af2e6..dee3fcee 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -32,7 +32,6 @@ import { filterOperators, } from "../../models/dataSource"; import { MetaObjectPayload } from "../../models/meta"; -import { kdbStyles, vscodeStyles } from "./styles"; import { DataSourceCommand, DataSourceMessage2 } from "../../models/messages"; const MAX_RULES = 32; @@ -40,16 +39,69 @@ const MAX_RULES = 32; @customElement("kdb-data-source-view") export class KdbDataSourceView extends LitElement { static styles = [ - vscodeStyles, - kdbStyles, css` - vscode-text-area::part(control) { - width: 48em !important; + *, + *::before, + *::after { + box-sizing: border-box; } - .panel { - width: 50em; - margin-top: 0.5em; + * { + margin: 0; + } + + :host { + overflow: hidden; + } + + .container { + display: flex; + flex-flow: row nowrap; + overflow: hidden; + } + + .tabs { + flex-grow: 1; + } + + .actions { + display: flex; + flex-flow: column nowrap; + gap: 0.5rem; + padding: 1rem; + } + + .actions sl-button-group > sl-button { + flex-grow: 1; + } + + sl-tab-panel { + height: calc(100vh - 57.2px); + overflow: scroll; + padding: 0.5rem; + } + + sl-input, + sl-select { + min-width: 12rem; + max-width: 12rem; + } + + sl-checkbox { + padding-bottom: 0.275rem; + } + + .col { + display: flex; + flex-direction: column; + gap: 0.5em; + } + + .row { + display: flex; + flex-direction: row; + gap: 0.5em; + align-items: flex-end; } `, ]; @@ -121,6 +173,12 @@ export class KdbDataSourceView extends LitElement { this.aggs = optional.aggs; this.groups = optional.groups; } + if ("theme" in msg) { + document.documentElement.className = + msg.theme === 1 || msg.theme === 4 + ? "sl-theme-light" + : "sl-theme-dark"; + } this.requestUpdate(); } }; @@ -232,8 +290,8 @@ export class KdbDataSourceView extends LitElement { const value = api.api === ".kxi.getData" ? api.api.replace(".kxi.", "") : api.api; return html` - ${value}${value} `; }); @@ -245,9 +303,7 @@ export class KdbDataSourceView extends LitElement { if (this.isInsights && this.isMetaLoaded) { return this.insightsMeta.assembly.flatMap((assembly) => assembly.tbls.map( - (value) => html` - ${value} - `, + (value) => html` ${value} `, ), ); } @@ -262,7 +318,7 @@ export class KdbDataSourceView extends LitElement { if (found) { return found.columns.map( ({ column }) => html` - ${column} + ${column} `, ); } @@ -278,7 +334,7 @@ export class KdbDataSourceView extends LitElement { if (!this.qsqlTarget) { this.qsqlTarget = value; } - return html`${value}`; + return html`${value}`; }); } return []; @@ -287,76 +343,62 @@ export class KdbDataSourceView extends LitElement { renderFilter(filter: Filter) { return html`
- { filter.active = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> -
- + + ${filter.column || "(none)"} - - ${filter.column || "(none)"} - ${this.isMetaLoaded - ? "Meta Columns" - : "Meta Not Loaded"} - ${this.renderColumnOptions()} - -
-
- ${this.isMetaLoaded ? "Meta Columns" : "Meta Not Loaded"} - - ${filter.operator || "(none)"} - Operators - ${filterOperators.map( - (operator) => - html`${operator}`, - )} - -
- + + ${filter.operator || "(none)"} + Operators + ${filterOperators.map( + (operator) => + html`${operator}`, + )} + + ${this.filters.indexOf(filter) === 0 ? "Set Parameter" : ""} - -
- + + ++ - -- -
+
`; } @@ -391,36 +434,35 @@ export class KdbDataSourceView extends LitElement { renderLabel(label: Label) { return html`
- { label.active = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> - + ${this.labels.indexOf(label) === 0 - ? "Filter By Label" - : ""} - + ${this.labels.indexOf(label) === 0 ? "Value" : ""} -
- + + ++ - -- -
+
`; } @@ -453,40 +496,34 @@ export class KdbDataSourceView extends LitElement { renderSort(sort: Sort) { return html`
- { sort.active = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> -
- + + ${sort.column || "(none)"} - - ${sort.column || "(none)"} - ${this.isMetaLoaded - ? "Meta Columns" - : "Meta Not Loaded"} - ${this.renderColumnOptions()} - -
-
- ${this.isMetaLoaded ? "Meta Columns" : "Meta Not Loaded"} + ${this.renderColumnOptions()} + + + ++ - -- -
+
`; } @@ -519,76 +557,63 @@ export class KdbDataSourceView extends LitElement { renderAgg(agg: Agg) { return html`
- { agg.active = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> - + ${this.aggs.indexOf(agg) === 0 - ? "Define Output Aggregate" - : ""} -
- + + ${agg.operator || "(none)"} - - ${agg.operator || "(none)"} - Operators - ${aggOperators.map( - (operator) => - html`${operator}`, - )} - -
-
- Operators + ${aggOperators.map( + (operator) => + html`${operator}`, + )} + + + ${agg.column || "(none)"} - - ${agg.column || "(none)"} - ${this.isMetaLoaded - ? "Meta Columns" - : "Meta Not Loaded"} - ${this.renderColumnOptions()} - -
-
- ${this.isMetaLoaded ? "Meta Columns" : "Meta Not Loaded"} + ${this.renderColumnOptions()} + + + ++ - -- -
+
`; } @@ -621,42 +647,36 @@ export class KdbDataSourceView extends LitElement { renderGroup(group: Group) { return html`
- { group.active = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> -
- + + ${group.column || "(none)"} - - ${group.column || "(none)"} - ${this.isMetaLoaded - ? "Meta Columns" - : "Meta Not Loaded"} - ${this.renderColumnOptions()} - -
-
- ${this.isMetaLoaded ? "Meta Columns" : "Meta Not Loaded"} + ${this.renderColumnOptions()} + + + ++ - -- -
+
`; } - render() { + renderAPI() { return html` -
-
-
- - API - QSQL - SQL - -
-
-
- - - ${this.selectedApi || "(none)"} - ${this.isMetaLoaded - ? "Meta APIs" - : "Meta Not Loaded"} - ${this.renderApiOptions()} - -
- -
- - - ${this.selectedTable || "(none)"} - ${this.isMetaLoaded - ? "Meta Tables" - : "Meta Not Loaded"} - ${this.renderTableOptions()} - -
-
- -
- Start Time - - End Time -
- -
- -
- - - ${this.fill || "(none)"} - Options - zero - forward - -
-
- -
- -
- - - ${this.temporality || "(none)"} - Options - snapshot - slice - -
-
- -
- ${repeat( - this.filters, - (filter) => filter, - (filter) => this.renderFilter(filter), - )} -
-
- ${repeat( - this.labels, - (label) => label, - (label) => this.renderLabel(label), - )} -
-
- ${repeat( - this.sorts, - (sort) => sort, - (sort) => this.renderSort(sort), - )} -
-
- ${repeat( - this.aggs, - (agg) => agg, - (agg) => this.renderAgg(agg), - )} -
-
- ${repeat( - this.groups, - (group) => group, - (group) => this.renderGroup(group), - )} -
-
- - - -
-
-
- - - ${this.qsqlTarget || "(none)"} - ${this.isMetaLoaded - ? "Meta Targets" - : "Meta Not Loaded"} - ${this.renderTargetOptions()} -
-
-
- Query -
-
- - - -
-
- Query -
-
- - -
+
+
+ + ${this.selectedApi || "(none)"} + ${this.isMetaLoaded ? "Meta APIs" : "Meta Not Loaded"} + ${this.renderApiOptions()} + + + + ${this.selectedTable || "(none)"} + ${this.isMetaLoaded ? "Meta Tables" : "Meta Not Loaded"} + ${this.renderTableOptions()} +
-
-
- - - ${this.selectedServer || "(none)"} - Connections - ${this.servers.map( - (server) => html` - ${server} - `, - )} - -
-
- Save + + + +
+ +
+ + + ${this.fill || "(none)"} - RefreshOptions + zero + forward + +
+ +
+ + + + ${this.temporality || "(none)"} -
- Run - Populate Scratchpad + Options + snapshot + slice + +
+ +
+ ${repeat( + this.filters, + (filter) => filter, + (filter) => this.renderFilter(filter), + )}
+
+ ${repeat( + this.labels, + (label) => label, + (label) => this.renderLabel(label), + )} +
+
+ ${repeat( + this.sorts, + (sort) => sort, + (sort) => this.renderSort(sort), + )} +
+
+ ${repeat( + this.aggs, + (agg) => agg, + (agg) => this.renderAgg(agg), + )} +
+
+ ${repeat( + this.groups, + (group) => group, + (group) => this.renderGroup(group), + )} +
+
+ `; + } + + renderQSQL() { + return html` + + ${this.qsqlTarget || "(none)"} + ${this.isMetaLoaded ? "Meta Targets" : "Meta Not Loaded"} + ${this.renderTargetOptions()} + + + `; + } + + renderSQL() { + return html` + + + `; + } + + renderTabGroup() { + return html` + + API + QSQL + SQL + ${this.renderAPI()} + ${this.renderQSQL()} + ${this.renderSQL()} + + `; + } + + renderActions() { + return html` + + ${this.selectedServer || "(none)"} + Connections + ${this.servers.map( + (server) => html` + ${server} + `, + )} + + + Save + Refresh + + Run + Populate Scratchpad + `; + } + + render() { + return html` +
+
${this.renderTabGroup()}
+
${this.renderActions()}
`; } diff --git a/src/webview/main.ts b/src/webview/main.ts index 6609d97a..5a770d39 100644 --- a/src/webview/main.ts +++ b/src/webview/main.ts @@ -11,6 +11,18 @@ * specific language governing permissions and limitations under the License. */ +import "@shoelace-style/shoelace/dist/components/button/button.js"; +import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js"; +import "@shoelace-style/shoelace/dist/components/button-group/button-group.js"; +import "@shoelace-style/shoelace/dist/components/input/input.js"; +import "@shoelace-style/shoelace/dist/components/textarea/textarea.js"; +import "@shoelace-style/shoelace/dist/components/select/select.js"; +import "@shoelace-style/shoelace/dist/components/option/option.js"; +import "@shoelace-style/shoelace/dist/components/divider/divider.js"; +import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js"; +import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js"; +import "@shoelace-style/shoelace/dist/components/tab/tab.js"; + import { allComponents, provideVSCodeDesignSystem, diff --git a/src/webview/styles/dark.css b/src/webview/styles/dark.css new file mode 100644 index 00000000..dad0b514 --- /dev/null +++ b/src/webview/styles/dark.css @@ -0,0 +1,483 @@ +:host, +.sl-theme-dark { + color-scheme: dark; + + --sl-color-gray-50: hsl(240 5.1% 15%); + --sl-color-gray-100: hsl(240 5.7% 18.2%); + --sl-color-gray-200: hsl(240 4.6% 22%); + --sl-color-gray-300: hsl(240 5% 27.6%); + --sl-color-gray-400: hsl(240 5% 35.5%); + --sl-color-gray-500: hsl(240 3.7% 44%); + --sl-color-gray-600: hsl(240 5.3% 58%); + --sl-color-gray-700: hsl(240 5.6% 73%); + --sl-color-gray-800: hsl(240 7.3% 84%); + --sl-color-gray-900: hsl(240 9.1% 91.8%); + --sl-color-gray-950: hsl(0 0% 95%); + + --sl-color-red-50: hsl(0 56% 23.9%); + --sl-color-red-100: hsl(0.6 60% 33.9%); + --sl-color-red-200: hsl(0.9 67.2% 37.1%); + --sl-color-red-300: hsl(1.1 71.3% 43.7%); + --sl-color-red-400: hsl(1 76% 52.5%); + --sl-color-red-500: hsl(0.7 89.6% 57.2%); + --sl-color-red-600: hsl(0 98.6% 67.9%); + --sl-color-red-700: hsl(0 100% 72.3%); + --sl-color-red-800: hsl(0 100% 85.6%); + --sl-color-red-900: hsl(0 100% 90.3%); + --sl-color-red-950: hsl(0 100% 95.9%); + + --sl-color-orange-50: hsl(15 64.2% 23.3%); + --sl-color-orange-100: hsl(15.1 70.9% 31.1%); + --sl-color-orange-200: hsl(15.3 75.7% 35.5%); + --sl-color-orange-300: hsl(17.1 83.5% 42.7%); + --sl-color-orange-400: hsl(20.1 88% 50.8%); + --sl-color-orange-500: hsl(24.3 100% 50.5%); + --sl-color-orange-600: hsl(27.2 100% 57.7%); + --sl-color-orange-700: hsl(31.3 100% 68.7%); + --sl-color-orange-800: hsl(33.8 100% 79.3%); + --sl-color-orange-900: hsl(38.9 100% 87.7%); + --sl-color-orange-950: hsl(46.2 100% 95%); + + --sl-color-amber-50: hsl(21.9 66.3% 21.1%); + --sl-color-amber-100: hsl(21.5 73.6% 29.7%); + --sl-color-amber-200: hsl(22.3 77.6% 33.3%); + --sl-color-amber-300: hsl(25.4 84.2% 39.6%); + --sl-color-amber-400: hsl(31.4 87.4% 46.7%); + --sl-color-amber-500: hsl(37 96.6% 48.3%); + --sl-color-amber-600: hsl(43.3 100% 53.4%); + --sl-color-amber-700: hsl(46.5 100% 61.1%); + --sl-color-amber-800: hsl(49.3 100% 73%); + --sl-color-amber-900: hsl(51.8 100% 85%); + --sl-color-amber-950: hsl(60 100% 94.6%); + + --sl-color-yellow-50: hsl(32.5 60% 18.2%); + --sl-color-yellow-100: hsl(28.1 68.6% 29%); + --sl-color-yellow-200: hsl(31.3 75.8% 30.8%); + --sl-color-yellow-300: hsl(34.7 84.4% 35.3%); + --sl-color-yellow-400: hsl(40.1 87.3% 43.3%); + --sl-color-yellow-500: hsl(44.7 88% 46%); + --sl-color-yellow-600: hsl(47.7 100% 50.9%); + --sl-color-yellow-700: hsl(51.3 100% 59.9%); + --sl-color-yellow-800: hsl(54.6 100% 73%); + --sl-color-yellow-900: hsl(58.9 100% 84.2%); + --sl-color-yellow-950: hsl(60 100% 94%); + + --sl-color-lime-50: hsl(86.5 54.4% 18%); + --sl-color-lime-100: hsl(87.6 56.8% 23.3%); + --sl-color-lime-200: hsl(85.8 63.2% 24.5%); + --sl-color-lime-300: hsl(86.1 72% 29.4%); + --sl-color-lime-400: hsl(85.5 76.8% 37.3%); + --sl-color-lime-500: hsl(84.3 74.2% 42.1%); + --sl-color-lime-600: hsl(82.8 81.5% 52.6%); + --sl-color-lime-700: hsl(82 89.9% 64%); + --sl-color-lime-800: hsl(80.9 97.9% 76.6%); + --sl-color-lime-900: hsl(77.9 100% 85.8%); + --sl-color-lime-950: hsl(69.5 100% 93.8%); + + --sl-color-green-50: hsl(144.3 53.6% 16%); + --sl-color-green-100: hsl(143.2 55.4% 23.5%); + --sl-color-green-200: hsl(141.5 58.2% 26.3%); + --sl-color-green-300: hsl(140.8 64.2% 31.8%); + --sl-color-green-400: hsl(140.3 68% 39.2%); + --sl-color-green-500: hsl(141.1 64.9% 43%); + --sl-color-green-600: hsl(141.6 72.4% 55.2%); + --sl-color-green-700: hsl(141.7 82.7% 70.1%); + --sl-color-green-800: hsl(141 90.9% 82.1%); + --sl-color-green-900: hsl(142 100% 89.1%); + --sl-color-green-950: hsl(144 100% 95.5%); + + --sl-color-emerald-50: hsl(164.3 75% 13.5%); + --sl-color-emerald-100: hsl(163.5 72.6% 20.1%); + --sl-color-emerald-200: hsl(162.1 73.7% 22.4%); + --sl-color-emerald-300: hsl(161.3 77.3% 27.6%); + --sl-color-emerald-400: hsl(159.6 77.1% 34.3%); + --sl-color-emerald-500: hsl(159.1 73.5% 37.9%); + --sl-color-emerald-600: hsl(157.8 66.8% 48.9%); + --sl-color-emerald-700: hsl(156.2 76.1% 63.8%); + --sl-color-emerald-800: hsl(152.4 84.4% 77.4%); + --sl-color-emerald-900: hsl(149.3 100% 87%); + --sl-color-emerald-950: hsl(158.6 100% 94.8%); + + --sl-color-teal-50: hsl(176.5 51.5% 15.4%); + --sl-color-teal-100: hsl(175.9 54.7% 22.3%); + --sl-color-teal-200: hsl(175.9 60.7% 23.9%); + --sl-color-teal-300: hsl(174.5 67.3% 28.8%); + --sl-color-teal-400: hsl(174.4 71.9% 34.9%); + --sl-color-teal-500: hsl(173.1 71% 38.3%); + --sl-color-teal-600: hsl(172.3 68.2% 48.1%); + --sl-color-teal-700: hsl(170.5 81.3% 61.5%); + --sl-color-teal-800: hsl(168.4 92.1% 75.2%); + --sl-color-teal-900: hsl(168.3 100% 86%); + --sl-color-teal-950: hsl(180 100% 95.5%); + + --sl-color-cyan-50: hsl(197.1 53.8% 20.3%); + --sl-color-cyan-100: hsl(196.8 57.3% 27.2%); + --sl-color-cyan-200: hsl(195.3 62.7% 29.4%); + --sl-color-cyan-300: hsl(193.5 71.3% 34.1%); + --sl-color-cyan-400: hsl(192.5 76.8% 40.6%); + --sl-color-cyan-500: hsl(189.4 78.6% 42.6%); + --sl-color-cyan-600: hsl(188.2 89.1% 51.7%); + --sl-color-cyan-700: hsl(187 98.6% 66.2%); + --sl-color-cyan-800: hsl(184.9 100% 78.3%); + --sl-color-cyan-900: hsl(180 100% 86.6%); + --sl-color-cyan-950: hsl(180 100% 94.8%); + + --sl-color-sky-50: hsl(203 63.8% 20.9%); + --sl-color-sky-100: hsl(203.4 70.4% 28%); + --sl-color-sky-200: hsl(202.7 75.8% 30.8%); + --sl-color-sky-300: hsl(203.1 80.4% 36.1%); + --sl-color-sky-400: hsl(202.1 80.5% 44.3%); + --sl-color-sky-500: hsl(199.7 85.9% 47.7%); + --sl-color-sky-600: hsl(198.7 97.9% 57.2%); + --sl-color-sky-700: hsl(198.7 100% 70.5%); + --sl-color-sky-800: hsl(198.8 100% 82.5%); + --sl-color-sky-900: hsl(198.5 100% 89.9%); + --sl-color-sky-950: hsl(186 100% 95.5%); + + --sl-color-blue-50: hsl(227.1 49.5% 22.7%); + --sl-color-blue-100: hsl(225.8 58.9% 36.8%); + --sl-color-blue-200: hsl(227.7 64.4% 42.9%); + --sl-color-blue-300: hsl(226.1 72.7% 51.2%); + --sl-color-blue-400: hsl(222.6 86.5% 56.3%); + --sl-color-blue-500: hsl(217.8 95.8% 57.4%); + --sl-color-blue-600: hsl(213.3 100% 65%); + --sl-color-blue-700: hsl(210.9 100% 74.8%); + --sl-color-blue-800: hsl(211.5 100% 83.4%); + --sl-color-blue-900: hsl(211 100% 88.9%); + --sl-color-blue-950: hsl(201.8 100% 95.3%); + + --sl-color-indigo-50: hsl(243.5 40.8% 27%); + --sl-color-indigo-100: hsl(242.9 45.7% 37.6%); + --sl-color-indigo-200: hsl(244.7 52.7% 43.1%); + --sl-color-indigo-300: hsl(245.3 60.5% 52.4%); + --sl-color-indigo-400: hsl(244.1 79.2% 60.4%); + --sl-color-indigo-500: hsl(239.6 88.7% 63.8%); + --sl-color-indigo-600: hsl(234.5 96.7% 70.9%); + --sl-color-indigo-700: hsl(229.4 100% 78.3%); + --sl-color-indigo-800: hsl(227.1 100% 85%); + --sl-color-indigo-900: hsl(223.8 100% 89.9%); + --sl-color-indigo-950: hsl(220 100% 95.1%); + + --sl-color-violet-50: hsl(265.1 57.3% 25.4%); + --sl-color-violet-100: hsl(263.5 63.8% 39.4%); + --sl-color-violet-200: hsl(263.4 66.2% 44.1%); + --sl-color-violet-300: hsl(263.7 72.8% 52.4%); + --sl-color-violet-400: hsl(262.5 87.3% 59.8%); + --sl-color-violet-500: hsl(258.3 95.1% 63.2%); + --sl-color-violet-600: hsl(255.1 100% 67.2%); + --sl-color-violet-700: hsl(253 100% 81.5%); + --sl-color-violet-800: hsl(251.7 100% 87.9%); + --sl-color-violet-900: hsl(254.1 100% 91.7%); + --sl-color-violet-950: hsl(257.1 100% 96.1%); + + --sl-color-purple-50: hsl(276 54.3% 20.5%); + --sl-color-purple-100: hsl(273.6 61.8% 35.4%); + --sl-color-purple-200: hsl(272.9 64% 41.4%); + --sl-color-purple-300: hsl(271.9 68.1% 49.2%); + --sl-color-purple-400: hsl(271.5 85.1% 57.8%); + --sl-color-purple-500: hsl(270.7 96.4% 62.1%); + --sl-color-purple-600: hsl(270.5 100% 71.9%); + --sl-color-purple-700: hsl(270.9 100% 81.3%); + --sl-color-purple-800: hsl(272.4 100% 87.7%); + --sl-color-purple-900: hsl(276.7 100% 91.5%); + --sl-color-purple-950: hsl(300 100% 96.5%); + + --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%); + --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%); + --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%); + --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%); + --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%); + --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%); + --sl-color-fuchsia-600: hsl(292 98.5% 59.5%); + --sl-color-fuchsia-700: hsl(292.4 100% 79.5%); + --sl-color-fuchsia-800: hsl(292.9 100% 86.8%); + --sl-color-fuchsia-900: hsl(300 100% 91.5%); + --sl-color-fuchsia-950: hsl(300 100% 96.3%); + + --sl-color-pink-50: hsl(336.2 59.6% 20%); + --sl-color-pink-100: hsl(336.8 63.9% 34%); + --sl-color-pink-200: hsl(336.8 68.7% 37.6%); + --sl-color-pink-300: hsl(336.1 71.8% 44.5%); + --sl-color-pink-400: hsl(333.9 74.9% 53.1%); + --sl-color-pink-500: hsl(330.7 86.3% 57.7%); + --sl-color-pink-600: hsl(328.6 91.5% 67.2%); + --sl-color-pink-700: hsl(327.4 97.6% 78.7%); + --sl-color-pink-800: hsl(325.1 100% 86.6%); + --sl-color-pink-900: hsl(322.1 100% 91.3%); + --sl-color-pink-950: hsl(315 100% 95.9%); + + --sl-color-rose-50: hsl(342.3 62.9% 21.5%); + --sl-color-rose-100: hsl(342.8 68.9% 34.2%); + --sl-color-rose-200: hsl(344.8 72.6% 37.3%); + --sl-color-rose-300: hsl(346.9 75.8% 43.7%); + --sl-color-rose-400: hsl(348.2 80.1% 52.7%); + --sl-color-rose-500: hsl(350.4 94.8% 57.5%); + --sl-color-rose-600: hsl(351.2 100% 58.1%); + --sl-color-rose-700: hsl(352.3 100% 78.1%); + --sl-color-rose-800: hsl(352 100% 86.2%); + --sl-color-rose-900: hsl(354.5 100% 90.7%); + --sl-color-rose-950: hsl(353.3 100% 95.7%); + + --sl-color-primary-50: var(--sl-color-sky-50); + --sl-color-primary-100: var(--sl-color-sky-100); + --sl-color-primary-200: var(--sl-color-sky-200); + --sl-color-primary-300: var(--sl-color-sky-300); + --sl-color-primary-400: var(--sl-color-sky-400); + --sl-color-primary-500: var(--sl-color-sky-500); + --sl-color-primary-600: var(--sl-color-sky-600); + --sl-color-primary-700: var(--sl-color-sky-700); + --sl-color-primary-800: var(--sl-color-sky-800); + --sl-color-primary-900: var(--sl-color-sky-900); + --sl-color-primary-950: var(--sl-color-sky-950); + + --sl-color-success-50: var(--sl-color-green-50); + --sl-color-success-100: var(--sl-color-green-100); + --sl-color-success-200: var(--sl-color-green-200); + --sl-color-success-300: var(--sl-color-green-300); + --sl-color-success-400: var(--sl-color-green-400); + --sl-color-success-500: var(--sl-color-green-500); + --sl-color-success-600: var(--sl-color-green-600); + --sl-color-success-700: var(--sl-color-green-700); + --sl-color-success-800: var(--sl-color-green-800); + --sl-color-success-900: var(--sl-color-green-900); + --sl-color-success-950: var(--sl-color-green-950); + + --sl-color-warning-50: var(--sl-color-amber-50); + --sl-color-warning-100: var(--sl-color-amber-100); + --sl-color-warning-200: var(--sl-color-amber-200); + --sl-color-warning-300: var(--sl-color-amber-300); + --sl-color-warning-400: var(--sl-color-amber-400); + --sl-color-warning-500: var(--sl-color-amber-500); + --sl-color-warning-600: var(--sl-color-amber-600); + --sl-color-warning-700: var(--sl-color-amber-700); + --sl-color-warning-800: var(--sl-color-amber-800); + --sl-color-warning-900: var(--sl-color-amber-900); + --sl-color-warning-950: var(--sl-color-amber-950); + + --sl-color-danger-50: var(--sl-color-red-50); + --sl-color-danger-100: var(--sl-color-red-100); + --sl-color-danger-200: var(--sl-color-red-200); + --sl-color-danger-300: var(--sl-color-red-300); + --sl-color-danger-400: var(--sl-color-red-400); + --sl-color-danger-500: var(--sl-color-red-500); + --sl-color-danger-600: var(--sl-color-red-600); + --sl-color-danger-700: var(--sl-color-red-700); + --sl-color-danger-800: var(--sl-color-red-800); + --sl-color-danger-900: var(--sl-color-red-900); + --sl-color-danger-950: var(--sl-color-red-950); + + --sl-color-neutral-50: var(--sl-color-gray-50); + --sl-color-neutral-100: var(--sl-color-gray-100); + --sl-color-neutral-200: var(--sl-color-gray-200); + --sl-color-neutral-300: var(--sl-color-gray-300); + --sl-color-neutral-400: var(--sl-color-gray-400); + --sl-color-neutral-500: var(--sl-color-gray-500); + --sl-color-neutral-600: var(--sl-color-gray-600); + --sl-color-neutral-700: var(--sl-color-gray-700); + --sl-color-neutral-800: var(--sl-color-gray-800); + --sl-color-neutral-900: var(--sl-color-gray-900); + --sl-color-neutral-950: var(--sl-color-gray-950); + + --sl-color-neutral-0: hsl(240, 5.9%, 11%); + --sl-color-neutral-1000: hsl(0, 0%, 100%); + + --sl-border-radius-small: 0.1875rem; + --sl-border-radius-medium: 0.25rem; + --sl-border-radius-large: 0.5rem; + --sl-border-radius-x-large: 1rem; + + --sl-border-radius-circle: 50%; + --sl-border-radius-pill: 9999px; + + --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%); + --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%); + --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%); + --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%); + --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%); + + --sl-spacing-3x-small: 0.125rem; + --sl-spacing-2x-small: 0.25rem; + --sl-spacing-x-small: 0.5rem; + --sl-spacing-small: 0.75rem; + --sl-spacing-medium: 1rem; + --sl-spacing-large: 1.25rem; + --sl-spacing-x-large: 1.75rem; + --sl-spacing-2x-large: 2.25rem; + --sl-spacing-3x-large: 3rem; + --sl-spacing-4x-large: 4.5rem; + + --sl-transition-x-slow: 1000ms; + --sl-transition-slow: 500ms; + --sl-transition-medium: 250ms; + --sl-transition-fast: 150ms; + --sl-transition-x-fast: 50ms; + + --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; + --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + --sl-font-serif: Georgia, "Times New Roman", serif; + + --sl-font-size-2x-small: 0.625rem; + --sl-font-size-x-small: 0.75rem; + --sl-font-size-small: 0.875rem; + --sl-font-size-medium: 1rem; + --sl-font-size-large: 1.25rem; + --sl-font-size-x-large: 1.5rem; + --sl-font-size-2x-large: 2.25rem; + --sl-font-size-3x-large: 3rem; + --sl-font-size-4x-large: 4.5rem; + + --sl-font-weight-light: 300; + --sl-font-weight-normal: 400; + --sl-font-weight-semibold: 500; + --sl-font-weight-bold: 700; + + --sl-letter-spacing-denser: -0.03em; + --sl-letter-spacing-dense: -0.015em; + --sl-letter-spacing-normal: normal; + --sl-letter-spacing-loose: 0.075em; + --sl-letter-spacing-looser: 0.15em; + + --sl-line-height-denser: 1; + --sl-line-height-dense: 1.4; + --sl-line-height-normal: 1.8; + --sl-line-height-loose: 2.2; + --sl-line-height-looser: 2.6; + + --sl-focus-ring-color: var(--sl-color-primary-700); + --sl-focus-ring-style: solid; + --sl-focus-ring-width: 3px; + --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) + var(--sl-focus-ring-color); + --sl-focus-ring-offset: 1px; + + --sl-button-font-size-small: var(--sl-font-size-x-small); + --sl-button-font-size-medium: var(--sl-font-size-small); + --sl-button-font-size-large: var(--sl-font-size-medium); + + --sl-input-height-small: 1.875rem; + --sl-input-height-medium: 2.5rem; + --sl-input-height-large: 3.125rem; + + --sl-input-background-color: var(--sl-color-neutral-0); + --sl-input-background-color-hover: var(--sl-input-background-color); + --sl-input-background-color-focus: var(--sl-input-background-color); + --sl-input-background-color-disabled: var(--sl-color-neutral-100); + --sl-input-border-color: var(--sl-color-neutral-400); + --sl-input-border-color-hover: var(--sl-color-neutral-500); + --sl-input-border-color-focus: var(--sl-color-primary-600); + --sl-input-border-color-disabled: var(--sl-color-neutral-400); + --sl-input-border-width: 1px; + --sl-input-required-content: "*"; + --sl-input-required-content-offset: -2px; + --sl-input-required-content-color: var(--sl-input-label-color); + + --sl-input-border-radius-small: var(--sl-border-radius-medium); + --sl-input-border-radius-medium: var(--sl-border-radius-medium); + --sl-input-border-radius-large: var(--sl-border-radius-medium); + + --sl-input-font-family: var(--sl-font-sans); + --sl-input-font-weight: var(--sl-font-weight-normal); + --sl-input-font-size-small: var(--sl-font-size-small); + --sl-input-font-size-medium: var(--sl-font-size-medium); + --sl-input-font-size-large: var(--sl-font-size-large); + --sl-input-letter-spacing: var(--sl-letter-spacing-normal); + + --sl-input-color: var(--sl-color-neutral-700); + --sl-input-color-hover: var(--sl-color-neutral-700); + --sl-input-color-focus: var(--sl-color-neutral-700); + --sl-input-color-disabled: var(--sl-color-neutral-900); + --sl-input-icon-color: var(--sl-color-neutral-500); + --sl-input-icon-color-hover: var(--sl-color-neutral-600); + --sl-input-icon-color-focus: var(--sl-color-neutral-600); + --sl-input-placeholder-color: var(--sl-color-neutral-500); + --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600); + --sl-input-spacing-small: var(--sl-spacing-small); + --sl-input-spacing-medium: var(--sl-spacing-medium); + --sl-input-spacing-large: var(--sl-spacing-large); + + --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%); + --sl-input-focus-ring-offset: 0; + + --sl-input-filled-background-color: var(--sl-color-neutral-100); + --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); + --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); + --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); + --sl-input-filled-color: var(--sl-color-neutral-800); + --sl-input-filled-color-hover: var(--sl-color-neutral-800); + --sl-input-filled-color-focus: var(--sl-color-neutral-700); + --sl-input-filled-color-disabled: var(--sl-color-neutral-800); + + --sl-input-label-font-size-small: var(--sl-font-size-small); + --sl-input-label-font-size-medium: var(--sl-font-size-medium); + --sl-input-label-font-size-large: var(--sl-font-size-large); + --sl-input-label-color: inherit; + + --sl-input-help-text-font-size-small: var(--sl-font-size-x-small); + --sl-input-help-text-font-size-medium: var(--sl-font-size-small); + --sl-input-help-text-font-size-large: var(--sl-font-size-medium); + --sl-input-help-text-color: var(--sl-color-neutral-600); + + --sl-toggle-size-small: 0.875rem; + --sl-toggle-size-medium: 1.125rem; + --sl-toggle-size-large: 1.375rem; + + --sl-overlay-background-color: hsl(0 0% 0% / 43%); + + --sl-panel-background-color: var(--sl-color-neutral-50); + --sl-panel-border-color: var(--sl-color-neutral-200); + --sl-panel-border-width: 1px; + + --sl-tooltip-border-radius: var(--sl-border-radius-medium); + --sl-tooltip-background-color: var(--sl-color-neutral-800); + --sl-tooltip-color: var(--sl-color-neutral-0); + --sl-tooltip-font-family: var(--sl-font-sans); + --sl-tooltip-font-weight: var(--sl-font-weight-normal); + --sl-tooltip-font-size: var(--sl-font-size-small); + --sl-tooltip-line-height: var(--sl-line-height-dense); + --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small); + --sl-tooltip-arrow-size: 6px; + + --sl-z-index-drawer: 700; + --sl-z-index-dialog: 800; + --sl-z-index-dropdown: 900; + --sl-z-index-toast: 950; + --sl-z-index-tooltip: 1000; +} + +@supports (scrollbar-gutter: stable) { + .sl-scroll-lock { + scrollbar-gutter: var(--sl-scroll-lock-gutter) !important; + } + + .sl-scroll-lock body { + overflow: hidden !important; + } +} + +@supports not (scrollbar-gutter: stable) { + .sl-scroll-lock body { + padding-right: var(--sl-scroll-lock-size) !important; + overflow: hidden !important; + } +} + +.sl-toast-stack { + position: fixed; + top: 0; + inset-inline-end: 0; + z-index: var(--sl-z-index-toast); + width: 28rem; + max-width: 100%; + max-height: 100%; + overflow: auto; +} + +.sl-toast-stack sl-alert { + margin: var(--sl-spacing-medium); +} + +.sl-toast-stack sl-alert::part(base) { + box-shadow: var(--sl-shadow-large); +} diff --git a/src/webview/styles/light.css b/src/webview/styles/light.css new file mode 100644 index 00000000..9c6acc4a --- /dev/null +++ b/src/webview/styles/light.css @@ -0,0 +1,484 @@ +:root, +:host, +.sl-theme-light { + color-scheme: light; + + --sl-color-gray-50: hsl(0 0% 97.5%); + --sl-color-gray-100: hsl(240 4.8% 95.9%); + --sl-color-gray-200: hsl(240 5.9% 90%); + --sl-color-gray-300: hsl(240 4.9% 83.9%); + --sl-color-gray-400: hsl(240 5% 64.9%); + --sl-color-gray-500: hsl(240 3.8% 46.1%); + --sl-color-gray-600: hsl(240 5.2% 33.9%); + --sl-color-gray-700: hsl(240 5.3% 26.1%); + --sl-color-gray-800: hsl(240 3.7% 15.9%); + --sl-color-gray-900: hsl(240 5.9% 10%); + --sl-color-gray-950: hsl(240 7.3% 8%); + + --sl-color-red-50: hsl(0 85.7% 97.3%); + --sl-color-red-100: hsl(0 93.3% 94.1%); + --sl-color-red-200: hsl(0 96.3% 89.4%); + --sl-color-red-300: hsl(0 93.5% 81.8%); + --sl-color-red-400: hsl(0 90.6% 70.8%); + --sl-color-red-500: hsl(0 84.2% 60.2%); + --sl-color-red-600: hsl(0 72.2% 50.6%); + --sl-color-red-700: hsl(0 73.7% 41.8%); + --sl-color-red-800: hsl(0 70% 35.3%); + --sl-color-red-900: hsl(0 62.8% 30.6%); + --sl-color-red-950: hsl(0 60% 19.6%); + + --sl-color-orange-50: hsl(33.3 100% 96.5%); + --sl-color-orange-100: hsl(34.3 100% 91.8%); + --sl-color-orange-200: hsl(32.1 97.7% 83.1%); + --sl-color-orange-300: hsl(30.7 97.2% 72.4%); + --sl-color-orange-400: hsl(27 96% 61%); + --sl-color-orange-500: hsl(24.6 95% 53.1%); + --sl-color-orange-600: hsl(20.5 90.2% 48.2%); + --sl-color-orange-700: hsl(17.5 88.3% 40.4%); + --sl-color-orange-800: hsl(15 79.1% 33.7%); + --sl-color-orange-900: hsl(15.3 74.6% 27.8%); + --sl-color-orange-950: hsl(15.2 69.1% 19%); + + --sl-color-amber-50: hsl(48 100% 96.1%); + --sl-color-amber-100: hsl(48 96.5% 88.8%); + --sl-color-amber-200: hsl(48 96.6% 76.7%); + --sl-color-amber-300: hsl(45.9 96.7% 64.5%); + --sl-color-amber-400: hsl(43.3 96.4% 56.3%); + --sl-color-amber-500: hsl(37.7 92.1% 50.2%); + --sl-color-amber-600: hsl(32.1 94.6% 43.7%); + --sl-color-amber-700: hsl(26 90.5% 37.1%); + --sl-color-amber-800: hsl(22.7 82.5% 31.4%); + --sl-color-amber-900: hsl(21.7 77.8% 26.5%); + --sl-color-amber-950: hsl(22.9 74.1% 16.7%); + + --sl-color-yellow-50: hsl(54.5 91.7% 95.3%); + --sl-color-yellow-100: hsl(54.9 96.7% 88%); + --sl-color-yellow-200: hsl(52.8 98.3% 76.9%); + --sl-color-yellow-300: hsl(50.4 97.8% 63.5%); + --sl-color-yellow-400: hsl(47.9 95.8% 53.1%); + --sl-color-yellow-500: hsl(45.4 93.4% 47.5%); + --sl-color-yellow-600: hsl(40.6 96.1% 40.4%); + --sl-color-yellow-700: hsl(35.5 91.7% 32.9%); + --sl-color-yellow-800: hsl(31.8 81% 28.8%); + --sl-color-yellow-900: hsl(28.4 72.5% 25.7%); + --sl-color-yellow-950: hsl(33.1 69% 13.9%); + + --sl-color-lime-50: hsl(78.3 92% 95.1%); + --sl-color-lime-100: hsl(79.6 89.1% 89.2%); + --sl-color-lime-200: hsl(80.9 88.5% 79.6%); + --sl-color-lime-300: hsl(82 84.5% 67.1%); + --sl-color-lime-400: hsl(82.7 78% 55.5%); + --sl-color-lime-500: hsl(83.7 80.5% 44.3%); + --sl-color-lime-600: hsl(84.8 85.2% 34.5%); + --sl-color-lime-700: hsl(85.9 78.4% 27.3%); + --sl-color-lime-800: hsl(86.3 69% 22.7%); + --sl-color-lime-900: hsl(87.6 61.2% 20.2%); + --sl-color-lime-950: hsl(86.5 60.6% 13.9%); + + --sl-color-green-50: hsl(138.5 76.5% 96.7%); + --sl-color-green-100: hsl(140.6 84.2% 92.5%); + --sl-color-green-200: hsl(141 78.9% 85.1%); + --sl-color-green-300: hsl(141.7 76.6% 73.1%); + --sl-color-green-400: hsl(141.9 69.2% 58%); + --sl-color-green-500: hsl(142.1 70.6% 45.3%); + --sl-color-green-600: hsl(142.1 76.2% 36.3%); + --sl-color-green-700: hsl(142.4 71.8% 29.2%); + --sl-color-green-800: hsl(142.8 64.2% 24.1%); + --sl-color-green-900: hsl(143.8 61.2% 20.2%); + --sl-color-green-950: hsl(144.3 60.7% 12%); + + --sl-color-emerald-50: hsl(151.8 81% 95.9%); + --sl-color-emerald-100: hsl(149.3 80.4% 90%); + --sl-color-emerald-200: hsl(152.4 76% 80.4%); + --sl-color-emerald-300: hsl(156.2 71.6% 66.9%); + --sl-color-emerald-400: hsl(158.1 64.4% 51.6%); + --sl-color-emerald-500: hsl(160.1 84.1% 39.4%); + --sl-color-emerald-600: hsl(161.4 93.5% 30.4%); + --sl-color-emerald-700: hsl(162.9 93.5% 24.3%); + --sl-color-emerald-800: hsl(163.1 88.1% 19.8%); + --sl-color-emerald-900: hsl(164.2 85.7% 16.5%); + --sl-color-emerald-950: hsl(164.3 87.5% 9.4%); + + --sl-color-teal-50: hsl(166.2 76.5% 96.7%); + --sl-color-teal-100: hsl(167.2 85.5% 89.2%); + --sl-color-teal-200: hsl(168.4 83.8% 78.2%); + --sl-color-teal-300: hsl(170.6 76.9% 64.3%); + --sl-color-teal-400: hsl(172.5 66% 50.4%); + --sl-color-teal-500: hsl(173.4 80.4% 40%); + --sl-color-teal-600: hsl(174.7 83.9% 31.6%); + --sl-color-teal-700: hsl(175.3 77.4% 26.1%); + --sl-color-teal-800: hsl(176.1 69.4% 21.8%); + --sl-color-teal-900: hsl(175.9 60.8% 19%); + --sl-color-teal-950: hsl(176.5 58.6% 11.4%); + + --sl-color-cyan-50: hsl(183.2 100% 96.3%); + --sl-color-cyan-100: hsl(185.1 95.9% 90.4%); + --sl-color-cyan-200: hsl(186.2 93.5% 81.8%); + --sl-color-cyan-300: hsl(187 92.4% 69%); + --sl-color-cyan-400: hsl(187.9 85.7% 53.3%); + --sl-color-cyan-500: hsl(188.7 94.5% 42.7%); + --sl-color-cyan-600: hsl(191.6 91.4% 36.5%); + --sl-color-cyan-700: hsl(192.9 82.3% 31%); + --sl-color-cyan-800: hsl(194.4 69.6% 27.1%); + --sl-color-cyan-900: hsl(196.4 63.6% 23.7%); + --sl-color-cyan-950: hsl(196.8 61% 16.1%); + + --sl-color-sky-50: hsl(204 100% 97.1%); + --sl-color-sky-100: hsl(204 93.8% 93.7%); + --sl-color-sky-200: hsl(200.6 94.4% 86.1%); + --sl-color-sky-300: hsl(199.4 95.5% 73.9%); + --sl-color-sky-400: hsl(198.4 93.2% 59.6%); + --sl-color-sky-500: hsl(198.6 88.7% 48.4%); + --sl-color-sky-600: hsl(200.4 98% 39.4%); + --sl-color-sky-700: hsl(201.3 96.3% 32.2%); + --sl-color-sky-800: hsl(201 90% 27.5%); + --sl-color-sky-900: hsl(202 80.3% 23.9%); + --sl-color-sky-950: hsl(202.3 73.8% 16.5%); + + --sl-color-blue-50: hsl(213.8 100% 96.9%); + --sl-color-blue-100: hsl(214.3 94.6% 92.7%); + --sl-color-blue-200: hsl(213.3 96.9% 87.3%); + --sl-color-blue-300: hsl(211.7 96.4% 78.4%); + --sl-color-blue-400: hsl(213.1 93.9% 67.8%); + --sl-color-blue-500: hsl(217.2 91.2% 59.8%); + --sl-color-blue-600: hsl(221.2 83.2% 53.3%); + --sl-color-blue-700: hsl(224.3 76.3% 48%); + --sl-color-blue-800: hsl(225.9 70.7% 40.2%); + --sl-color-blue-900: hsl(224.4 64.3% 32.9%); + --sl-color-blue-950: hsl(226.2 55.3% 18.4%); + + --sl-color-indigo-50: hsl(225.9 100% 96.7%); + --sl-color-indigo-100: hsl(226.5 100% 93.9%); + --sl-color-indigo-200: hsl(228 96.5% 88.8%); + --sl-color-indigo-300: hsl(229.7 93.5% 81.8%); + --sl-color-indigo-400: hsl(234.5 89.5% 73.9%); + --sl-color-indigo-500: hsl(238.7 83.5% 66.7%); + --sl-color-indigo-600: hsl(243.4 75.4% 58.6%); + --sl-color-indigo-700: hsl(244.5 57.9% 50.6%); + --sl-color-indigo-800: hsl(243.7 54.5% 41.4%); + --sl-color-indigo-900: hsl(242.2 47.4% 34.3%); + --sl-color-indigo-950: hsl(243.5 43.6% 22.9%); + + --sl-color-violet-50: hsl(250 100% 97.6%); + --sl-color-violet-100: hsl(251.4 91.3% 95.5%); + --sl-color-violet-200: hsl(250.5 95.2% 91.8%); + --sl-color-violet-300: hsl(252.5 94.7% 85.1%); + --sl-color-violet-400: hsl(255.1 91.7% 76.3%); + --sl-color-violet-500: hsl(258.3 89.5% 66.3%); + --sl-color-violet-600: hsl(262.1 83.3% 57.8%); + --sl-color-violet-700: hsl(263.4 70% 50.4%); + --sl-color-violet-800: hsl(263.4 69.3% 42.2%); + --sl-color-violet-900: hsl(263.5 67.4% 34.9%); + --sl-color-violet-950: hsl(265.1 61.5% 21.4%); + + --sl-color-purple-50: hsl(270 100% 98%); + --sl-color-purple-100: hsl(268.7 100% 95.5%); + --sl-color-purple-200: hsl(268.6 100% 91.8%); + --sl-color-purple-300: hsl(269.2 97.4% 85.1%); + --sl-color-purple-400: hsl(270 95.2% 75.3%); + --sl-color-purple-500: hsl(270.7 91% 65.1%); + --sl-color-purple-600: hsl(271.5 81.3% 55.9%); + --sl-color-purple-700: hsl(272.1 71.7% 47.1%); + --sl-color-purple-800: hsl(272.9 67.2% 39.4%); + --sl-color-purple-900: hsl(273.6 65.6% 32%); + --sl-color-purple-950: hsl(276 59.5% 16.5%); + + --sl-color-fuchsia-50: hsl(289.1 100% 97.8%); + --sl-color-fuchsia-100: hsl(287 100% 95.5%); + --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%); + --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%); + --sl-color-fuchsia-400: hsl(292 91.4% 72.5%); + --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%); + --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%); + --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%); + --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%); + --sl-color-fuchsia-900: hsl(296.7 63.6% 28%); + --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%); + + --sl-color-pink-50: hsl(327.3 73.3% 97.1%); + --sl-color-pink-100: hsl(325.7 77.8% 94.7%); + --sl-color-pink-200: hsl(325.9 84.6% 89.8%); + --sl-color-pink-300: hsl(327.4 87.1% 81.8%); + --sl-color-pink-400: hsl(328.6 85.5% 70.2%); + --sl-color-pink-500: hsl(330.4 81.2% 60.4%); + --sl-color-pink-600: hsl(333.3 71.4% 50.6%); + --sl-color-pink-700: hsl(335.1 77.6% 42%); + --sl-color-pink-800: hsl(335.8 74.4% 35.3%); + --sl-color-pink-900: hsl(335.9 69% 30.4%); + --sl-color-pink-950: hsl(336.2 65.4% 15.9%); + + --sl-color-rose-50: hsl(355.7 100% 97.3%); + --sl-color-rose-100: hsl(355.6 100% 94.7%); + --sl-color-rose-200: hsl(352.7 96.1% 90%); + --sl-color-rose-300: hsl(352.6 95.7% 81.8%); + --sl-color-rose-400: hsl(351.3 94.5% 71.4%); + --sl-color-rose-500: hsl(349.7 89.2% 60.2%); + --sl-color-rose-600: hsl(346.8 77.2% 49.8%); + --sl-color-rose-700: hsl(345.3 82.7% 40.8%); + --sl-color-rose-800: hsl(343.4 79.7% 34.7%); + --sl-color-rose-900: hsl(341.5 75.5% 30.4%); + --sl-color-rose-950: hsl(341.3 70.1% 17.1%); + + --sl-color-primary-50: var(--sl-color-sky-50); + --sl-color-primary-100: var(--sl-color-sky-100); + --sl-color-primary-200: var(--sl-color-sky-200); + --sl-color-primary-300: var(--sl-color-sky-300); + --sl-color-primary-400: var(--sl-color-sky-400); + --sl-color-primary-500: var(--sl-color-sky-500); + --sl-color-primary-600: var(--sl-color-sky-600); + --sl-color-primary-700: var(--sl-color-sky-700); + --sl-color-primary-800: var(--sl-color-sky-800); + --sl-color-primary-900: var(--sl-color-sky-900); + --sl-color-primary-950: var(--sl-color-sky-950); + + --sl-color-success-50: var(--sl-color-green-50); + --sl-color-success-100: var(--sl-color-green-100); + --sl-color-success-200: var(--sl-color-green-200); + --sl-color-success-300: var(--sl-color-green-300); + --sl-color-success-400: var(--sl-color-green-400); + --sl-color-success-500: var(--sl-color-green-500); + --sl-color-success-600: var(--sl-color-green-600); + --sl-color-success-700: var(--sl-color-green-700); + --sl-color-success-800: var(--sl-color-green-800); + --sl-color-success-900: var(--sl-color-green-900); + --sl-color-success-950: var(--sl-color-green-950); + + --sl-color-warning-50: var(--sl-color-amber-50); + --sl-color-warning-100: var(--sl-color-amber-100); + --sl-color-warning-200: var(--sl-color-amber-200); + --sl-color-warning-300: var(--sl-color-amber-300); + --sl-color-warning-400: var(--sl-color-amber-400); + --sl-color-warning-500: var(--sl-color-amber-500); + --sl-color-warning-600: var(--sl-color-amber-600); + --sl-color-warning-700: var(--sl-color-amber-700); + --sl-color-warning-800: var(--sl-color-amber-800); + --sl-color-warning-900: var(--sl-color-amber-900); + --sl-color-warning-950: var(--sl-color-amber-950); + + --sl-color-danger-50: var(--sl-color-red-50); + --sl-color-danger-100: var(--sl-color-red-100); + --sl-color-danger-200: var(--sl-color-red-200); + --sl-color-danger-300: var(--sl-color-red-300); + --sl-color-danger-400: var(--sl-color-red-400); + --sl-color-danger-500: var(--sl-color-red-500); + --sl-color-danger-600: var(--sl-color-red-600); + --sl-color-danger-700: var(--sl-color-red-700); + --sl-color-danger-800: var(--sl-color-red-800); + --sl-color-danger-900: var(--sl-color-red-900); + --sl-color-danger-950: var(--sl-color-red-950); + + --sl-color-neutral-50: var(--sl-color-gray-50); + --sl-color-neutral-100: var(--sl-color-gray-100); + --sl-color-neutral-200: var(--sl-color-gray-200); + --sl-color-neutral-300: var(--sl-color-gray-300); + --sl-color-neutral-400: var(--sl-color-gray-400); + --sl-color-neutral-500: var(--sl-color-gray-500); + --sl-color-neutral-600: var(--sl-color-gray-600); + --sl-color-neutral-700: var(--sl-color-gray-700); + --sl-color-neutral-800: var(--sl-color-gray-800); + --sl-color-neutral-900: var(--sl-color-gray-900); + --sl-color-neutral-950: var(--sl-color-gray-950); + + --sl-color-neutral-0: hsl(0, 0%, 100%); + --sl-color-neutral-1000: hsl(0, 0%, 0%); + + --sl-border-radius-small: 0.1875rem; + --sl-border-radius-medium: 0.25rem; + --sl-border-radius-large: 0.5rem; + --sl-border-radius-x-large: 1rem; + + --sl-border-radius-circle: 50%; + --sl-border-radius-pill: 9999px; + + --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%); + --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%); + --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%); + --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%); + --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%); + + --sl-spacing-3x-small: 0.125rem; + --sl-spacing-2x-small: 0.25rem; + --sl-spacing-x-small: 0.5rem; + --sl-spacing-small: 0.75rem; + --sl-spacing-medium: 1rem; + --sl-spacing-large: 1.25rem; + --sl-spacing-x-large: 1.75rem; + --sl-spacing-2x-large: 2.25rem; + --sl-spacing-3x-large: 3rem; + --sl-spacing-4x-large: 4.5rem; + + --sl-transition-x-slow: 1000ms; + --sl-transition-slow: 500ms; + --sl-transition-medium: 250ms; + --sl-transition-fast: 150ms; + --sl-transition-x-fast: 50ms; + + --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; + --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + --sl-font-serif: Georgia, "Times New Roman", serif; + + --sl-font-size-2x-small: 0.625rem; + --sl-font-size-x-small: 0.75rem; + --sl-font-size-small: 0.875rem; + --sl-font-size-medium: 1rem; + --sl-font-size-large: 1.25rem; + --sl-font-size-x-large: 1.5rem; + --sl-font-size-2x-large: 2.25rem; + --sl-font-size-3x-large: 3rem; + --sl-font-size-4x-large: 4.5rem; + + --sl-font-weight-light: 300; + --sl-font-weight-normal: 400; + --sl-font-weight-semibold: 500; + --sl-font-weight-bold: 700; + + --sl-letter-spacing-denser: -0.03em; + --sl-letter-spacing-dense: -0.015em; + --sl-letter-spacing-normal: normal; + --sl-letter-spacing-loose: 0.075em; + --sl-letter-spacing-looser: 0.15em; + + --sl-line-height-denser: 1; + --sl-line-height-dense: 1.4; + --sl-line-height-normal: 1.8; + --sl-line-height-loose: 2.2; + --sl-line-height-looser: 2.6; + + --sl-focus-ring-color: var(--sl-color-primary-600); + --sl-focus-ring-style: solid; + --sl-focus-ring-width: 3px; + --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) + var(--sl-focus-ring-color); + --sl-focus-ring-offset: 1px; + + --sl-button-font-size-small: var(--sl-font-size-x-small); + --sl-button-font-size-medium: var(--sl-font-size-small); + --sl-button-font-size-large: var(--sl-font-size-medium); + + --sl-input-height-small: 1.875rem; + --sl-input-height-medium: 2.5rem; + --sl-input-height-large: 3.125rem; + + --sl-input-background-color: var(--sl-color-neutral-0); + --sl-input-background-color-hover: var(--sl-input-background-color); + --sl-input-background-color-focus: var(--sl-input-background-color); + --sl-input-background-color-disabled: var(--sl-color-neutral-100); + --sl-input-border-color: var(--sl-color-neutral-300); + --sl-input-border-color-hover: var(--sl-color-neutral-400); + --sl-input-border-color-focus: var(--sl-color-primary-500); + --sl-input-border-color-disabled: var(--sl-color-neutral-300); + --sl-input-border-width: 1px; + --sl-input-required-content: "*"; + --sl-input-required-content-offset: -2px; + --sl-input-required-content-color: var(--sl-input-label-color); + + --sl-input-border-radius-small: var(--sl-border-radius-medium); + --sl-input-border-radius-medium: var(--sl-border-radius-medium); + --sl-input-border-radius-large: var(--sl-border-radius-medium); + + --sl-input-font-family: var(--sl-font-sans); + --sl-input-font-weight: var(--sl-font-weight-normal); + --sl-input-font-size-small: var(--sl-font-size-small); + --sl-input-font-size-medium: var(--sl-font-size-medium); + --sl-input-font-size-large: var(--sl-font-size-large); + --sl-input-letter-spacing: var(--sl-letter-spacing-normal); + + --sl-input-color: var(--sl-color-neutral-700); + --sl-input-color-hover: var(--sl-color-neutral-700); + --sl-input-color-focus: var(--sl-color-neutral-700); + --sl-input-color-disabled: var(--sl-color-neutral-900); + --sl-input-icon-color: var(--sl-color-neutral-500); + --sl-input-icon-color-hover: var(--sl-color-neutral-600); + --sl-input-icon-color-focus: var(--sl-color-neutral-600); + --sl-input-placeholder-color: var(--sl-color-neutral-500); + --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600); + --sl-input-spacing-small: var(--sl-spacing-small); + --sl-input-spacing-medium: var(--sl-spacing-medium); + --sl-input-spacing-large: var(--sl-spacing-large); + + --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%); + --sl-input-focus-ring-offset: 0; + + --sl-input-filled-background-color: var(--sl-color-neutral-100); + --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); + --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); + --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); + --sl-input-filled-color: var(--sl-color-neutral-800); + --sl-input-filled-color-hover: var(--sl-color-neutral-800); + --sl-input-filled-color-focus: var(--sl-color-neutral-700); + --sl-input-filled-color-disabled: var(--sl-color-neutral-800); + + --sl-input-label-font-size-small: var(--sl-font-size-small); + --sl-input-label-font-size-medium: var(--sl-font-size-medium); + --sl-input-label-font-size-large: var(--sl-font-size-large); + --sl-input-label-color: inherit; + + --sl-input-help-text-font-size-small: var(--sl-font-size-x-small); + --sl-input-help-text-font-size-medium: var(--sl-font-size-small); + --sl-input-help-text-font-size-large: var(--sl-font-size-medium); + --sl-input-help-text-color: var(--sl-color-neutral-500); + + --sl-toggle-size-small: 0.875rem; + --sl-toggle-size-medium: 1.125rem; + --sl-toggle-size-large: 1.375rem; + + --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%); + + --sl-panel-background-color: var(--sl-color-neutral-0); + --sl-panel-border-color: var(--sl-color-neutral-200); + --sl-panel-border-width: 1px; + + --sl-tooltip-border-radius: var(--sl-border-radius-medium); + --sl-tooltip-background-color: var(--sl-color-neutral-800); + --sl-tooltip-color: var(--sl-color-neutral-0); + --sl-tooltip-font-family: var(--sl-font-sans); + --sl-tooltip-font-weight: var(--sl-font-weight-normal); + --sl-tooltip-font-size: var(--sl-font-size-small); + --sl-tooltip-line-height: var(--sl-line-height-dense); + --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small); + --sl-tooltip-arrow-size: 6px; + + --sl-z-index-drawer: 700; + --sl-z-index-dialog: 800; + --sl-z-index-dropdown: 900; + --sl-z-index-toast: 950; + --sl-z-index-tooltip: 1000; +} + +@supports (scrollbar-gutter: stable) { + .sl-scroll-lock { + scrollbar-gutter: var(--sl-scroll-lock-gutter) !important; + } + + .sl-scroll-lock body { + overflow: hidden !important; + } +} + +@supports not (scrollbar-gutter: stable) { + .sl-scroll-lock body { + padding-right: var(--sl-scroll-lock-size) !important; + overflow: hidden !important; + } +} + +.sl-toast-stack { + position: fixed; + top: 0; + inset-inline-end: 0; + z-index: var(--sl-z-index-toast); + width: 28rem; + max-width: 100%; + max-height: 100%; + overflow: auto; +} + +.sl-toast-stack sl-alert { + margin: var(--sl-spacing-medium); +} + +.sl-toast-stack sl-alert::part(base) { + box-shadow: var(--sl-shadow-large); +} diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css new file mode 100644 index 00000000..6682dbbd --- /dev/null +++ b/src/webview/styles/style.css @@ -0,0 +1,22 @@ +html, +body { + margin: 0; + padding: 0; + height: 100%; + box-sizing: border-box; + line-height: var(--sl-line-height-dense); +} + +body { + font-size: var(--vscode-font-size); + font-family: var(--vscode-font-family); + font-weight: var(--vscode-font-weight); + line-height: var(--sl-line-height-normal); + color: var(--sl-color-neutral-900); + background-color: var(--sl-color-neutral-0); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + overflow: hidden; +} From fef742f212c1b6d3ddf3d14457680d7eda6fe111 Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 25 Sep 2024 18:00:03 +0300 Subject: [PATCH 02/19] fixed startup --- src/services/dataSourceEditorProvider.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index 14f44270..07134646 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -231,7 +231,7 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { return /* html */ ` - + From 04b752418499b41ec51b3f55a556e361971890ea Mon Sep 17 00:00:00 2001 From: ecmel Date: Thu, 26 Sep 2024 11:55:51 +0300 Subject: [PATCH 03/19] fixed scrolling --- src/webview/components/kdbDataSourceView.ts | 38 +++++++++++++-------- src/webview/styles/style.css | 15 ++++---- 2 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index dee3fcee..4891609b 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -50,14 +50,10 @@ export class KdbDataSourceView extends LitElement { margin: 0; } - :host { - overflow: hidden; - } - .container { display: flex; flex-flow: row nowrap; - overflow: hidden; + overflow-x: auto; } .tabs { @@ -67,40 +63,52 @@ export class KdbDataSourceView extends LitElement { .actions { display: flex; flex-flow: column nowrap; - gap: 0.5rem; - padding: 1rem; + flex-grow: 0; + gap: var(--sl-spacing-x-small); + padding: var(--sl-spacing-medium); } .actions sl-button-group > sl-button { flex-grow: 1; } + sl-tab::part(base) { + padding: var(--sl-spacing-medium); + } + + sl-select::part(listbox) { + min-width: max-content; + } + sl-tab-panel { - height: calc(100vh - 57.2px); - overflow: scroll; - padding: 0.5rem; + --padding: 0; + overflow-y: scroll; + padding: var(--sl-spacing-medium); + height: calc( + 100vh - 1rem - 2 * var(--sl-spacing-medium) - var(--track-width) + ); } sl-input, sl-select { - min-width: 12rem; - max-width: 12rem; + min-width: 11rem; + max-width: 11rem; } sl-checkbox { - padding-bottom: 0.275rem; + padding-bottom: var(--sl-spacing-2x-small); } .col { display: flex; flex-direction: column; - gap: 0.5em; + gap: var(--sl-spacing-x-small); } .row { display: flex; flex-direction: row; - gap: 0.5em; + gap: var(--sl-spacing-x-small); align-items: flex-end; } `, diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index 6682dbbd..69aa527f 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -3,20 +3,21 @@ body { margin: 0; padding: 0; height: 100%; - box-sizing: border-box; line-height: var(--sl-line-height-dense); } body { + overflow: hidden; font-size: var(--vscode-font-size); font-family: var(--vscode-font-family); font-weight: var(--vscode-font-weight); - line-height: var(--sl-line-height-normal); - color: var(--sl-color-neutral-900); - background-color: var(--sl-color-neutral-0); - -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - overflow: hidden; + color: var(--vscode-foreground); + background-color: var(--vscode-panel-background); +} + +html.sl-theme-dark .only-light, +html:not(.sl-theme-dark) .only-dark { + display: none !important; } From 815257773e6cf83f29c33b3bab7b29f2809a2718 Mon Sep 17 00:00:00 2001 From: ecmel Date: Thu, 26 Sep 2024 16:00:37 +0300 Subject: [PATCH 04/19] added focus ring --- src/webview/styles/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index 69aa527f..96c96ead 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -1,3 +1,8 @@ +:root { + --sl-focus-ring-color: var(--vscode-focusBorder); + --sl-focus-ring-width: 1px; +} + html, body { margin: 0; @@ -16,8 +21,3 @@ body { color: var(--vscode-foreground); background-color: var(--vscode-panel-background); } - -html.sl-theme-dark .only-light, -html:not(.sl-theme-dark) .only-dark { - display: none !important; -} From caca90c4d97940368840affb5c09f097f5e73ca4 Mon Sep 17 00:00:00 2001 From: ecmel Date: Sun, 29 Sep 2024 09:03:23 +0300 Subject: [PATCH 05/19] fixed border-box --- src/webview/components/kdbDataSourceView.ts | 11 +++-------- src/webview/styles/style.css | 1 + 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 4891609b..7d2c5d96 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -40,16 +40,10 @@ const MAX_RULES = 32; export class KdbDataSourceView extends LitElement { static styles = [ css` - *, - *::before, - *::after { + :host { box-sizing: border-box; } - * { - margin: 0; - } - .container { display: flex; flex-flow: row nowrap; @@ -85,7 +79,8 @@ export class KdbDataSourceView extends LitElement { overflow-y: scroll; padding: var(--sl-spacing-medium); height: calc( - 100vh - 1rem - 2 * var(--sl-spacing-medium) - var(--track-width) + 100vh - 1rem * var(--sl-line-height-dense) - 2 * + var(--sl-spacing-medium) ); } diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index 96c96ead..c25e1c10 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -18,6 +18,7 @@ body { font-weight: var(--vscode-font-weight); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; + box-sizing: border-box; color: var(--vscode-foreground); background-color: var(--vscode-panel-background); } From 23134163ecae613e88ff2f1db4a31eff1add1f42 Mon Sep 17 00:00:00 2001 From: ecmel Date: Sun, 6 Oct 2024 02:00:27 +0300 Subject: [PATCH 06/19] more tokens --- src/webview/components/kdbDataSourceView.ts | 72 +++++++-------------- src/webview/components/styles.ts | 21 ++++++ src/webview/styles/style.css | 38 +++++++++-- 3 files changed, 76 insertions(+), 55 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 7d2c5d96..60999757 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -33,17 +33,15 @@ import { } from "../../models/dataSource"; import { MetaObjectPayload } from "../../models/meta"; import { DataSourceCommand, DataSourceMessage2 } from "../../models/messages"; +import { shoelaceStyles } from "./styles"; const MAX_RULES = 32; @customElement("kdb-data-source-view") export class KdbDataSourceView extends LitElement { static styles = [ + shoelaceStyles, css` - :host { - box-sizing: border-box; - } - .container { display: flex; flex-flow: row nowrap; @@ -86,8 +84,8 @@ export class KdbDataSourceView extends LitElement { sl-input, sl-select { - min-width: 11rem; - max-width: 11rem; + min-width: 14rem; + max-width: 14rem; } sl-checkbox { @@ -263,15 +261,10 @@ export class KdbDataSourceView extends LitElement { requestChange() { this.requestUpdate(); - if (this.debounce) { - clearTimeout(this.debounce); - } - this.debounce = setTimeout(() => { - this.postMessage({ - command: DataSourceCommand.Change, - dataSourceFile: this.data, - }); - }, 200); + this.postMessage({ + command: DataSourceCommand.Change, + dataSourceFile: this.data, + }); } requestServerChange(event: Event) { @@ -353,7 +346,6 @@ export class KdbDataSourceView extends LitElement { this.requestChange(); }}">
@@ -978,17 +942,27 @@ export class KdbDataSourceView extends LitElement { )} - Save - Refresh - Run - Populate Scratchpad `; diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index f5b6f22e..89200fe4 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -13,6 +13,27 @@ import { css } from "lit"; +export const shoelaceStyles = css` + :host { + box-sizing: border-box; + } + + sl-button::part(base) { + color: var(--vscode-button-secondaryForeground); + background-color: var(--vscode-button-secondaryBackground); + border-color: var( + --vscode-button-border, + var(--vscode-button-secondaryBackground) + ); + } + + sl-button[variant="primary"]::part(base) { + color: var(--vscode-button-foreground); + background-color: var(--vscode-button-background); + border-color: var(--vscode-button-border, var(--vscode-button-background)); + } +`; + export const vscodeStyles = css` .dropdown-container { box-sizing: border-box; diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index c25e1c10..2e6b868a 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -1,24 +1,50 @@ :root { - --sl-focus-ring-color: var(--vscode-focusBorder); --sl-focus-ring-width: 1px; + --sl-focus-ring-offset: 1px; + --sl-focus-ring-style: solid; + --sl-focus-ring-color: var(--vscode-focusBorder); + --sl-input-focus-ring-offset: -1px; + --sl-input-focus-ring-color: var(--vscode-focusBorder); + + --sl-button-font-size-small: var(--vscode-font-size); + --sl-input-font-size-small: var(--vscode-font-size); + --sl-input-label-font-size-small: var(--vscode-font-size); + --sl-input-font-family: var(--vscode-font-family); + --sl-input-font-weight: var(--vscode-font-weight); + + --sl-input-border-width: 1px; + --sl-input-border-radius-small: 2px; + --sl-input-border-radius-medium: 2px; + --sl-input-border-radius-large: 2px; + --sl-input-border-color: var(--vscode-input-border, transparent); + --sl-input-border-color-hover: var(--vscode-input-border, transparent); + --sl-input-border-color-focus: var(--vscode-input-border, transparent); + + --sl-input-height-small: calc(2rem + 2 * var(--sl-input-border-width)); + --sl-input-spacing-small: var(--sl-spacing-x-small); + --sl-input-color: var(--vscode-input-foreground); + --sl-input-color-hover: var(--vscode-input-foreground); + --sl-input-color-focus: var(--vscode-input-foreground); + --sl-input-background-color: var(--vscode-input-background); + --sl-input-background-color-hover: var(--vscode-input-background); + --sl-input-background-color-focus: var(--vscode-input-background); + --sl-panel-background-color: var(--vscode-input-background); } html, body { margin: 0; - padding: 0; - height: 100%; - line-height: var(--sl-line-height-dense); + line-height: 1.6; + font-size: var(--vscode-font-size); } body { overflow: hidden; - font-size: var(--vscode-font-size); + box-sizing: border-box; font-family: var(--vscode-font-family); font-weight: var(--vscode-font-weight); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; - box-sizing: border-box; color: var(--vscode-foreground); background-color: var(--vscode-panel-background); } From 331bc53880646d5f2999796636274d018b57b32f Mon Sep 17 00:00:00 2001 From: ecmel Date: Sun, 6 Oct 2024 12:07:41 +0300 Subject: [PATCH 07/19] more tokens --- src/webview/components/kdbDataSourceView.ts | 48 ++------------------- src/webview/styles/style.css | 14 +++--- 2 files changed, 10 insertions(+), 52 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 60999757..fe466d4b 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -346,7 +346,6 @@ export class KdbDataSourceView extends LitElement { this.requestChange(); }}">
@@ -942,27 +912,17 @@ export class KdbDataSourceView extends LitElement { )} - Save - Refresh - Run - Populate Scratchpad `; diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index 2e6b868a..5dbf7197 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -6,22 +6,20 @@ --sl-input-focus-ring-offset: -1px; --sl-input-focus-ring-color: var(--vscode-focusBorder); - --sl-button-font-size-small: var(--vscode-font-size); - --sl-input-font-size-small: var(--vscode-font-size); - --sl-input-label-font-size-small: var(--vscode-font-size); + --sl-button-font-size-medium: var(--vscode-font-size); + --sl-input-font-size-medium: var(--vscode-font-size); + --sl-input-label-font-size-medium: var(--vscode-font-size); --sl-input-font-family: var(--vscode-font-family); --sl-input-font-weight: var(--vscode-font-weight); --sl-input-border-width: 1px; - --sl-input-border-radius-small: 2px; --sl-input-border-radius-medium: 2px; - --sl-input-border-radius-large: 2px; --sl-input-border-color: var(--vscode-input-border, transparent); --sl-input-border-color-hover: var(--vscode-input-border, transparent); --sl-input-border-color-focus: var(--vscode-input-border, transparent); - --sl-input-height-small: calc(2rem + 2 * var(--sl-input-border-width)); - --sl-input-spacing-small: var(--sl-spacing-x-small); + --sl-input-height-medium: calc(2rem + 2 * var(--sl-input-border-width)); + --sl-input-spacing-medium: var(--sl-spacing-x-small); --sl-input-color: var(--vscode-input-foreground); --sl-input-color-hover: var(--vscode-input-foreground); --sl-input-color-focus: var(--vscode-input-foreground); @@ -34,7 +32,7 @@ html, body { margin: 0; - line-height: 1.6; + line-height: 1.5; font-size: var(--vscode-font-size); } From 367d956a1241ad0b7ec80534be40d7bf6bd031cc Mon Sep 17 00:00:00 2001 From: ecmel Date: Sun, 6 Oct 2024 18:58:17 +0300 Subject: [PATCH 08/19] more tokens --- src/services/dataSourceEditorProvider.ts | 8 +- src/webview/components/kdbDataSourceView.ts | 35 +- src/webview/components/styles.ts | 40 +- src/webview/styles/dark.css | 483 -------------------- 4 files changed, 53 insertions(+), 513 deletions(-) delete mode 100644 src/webview/styles/dark.css diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index 07134646..cf53e74b 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -12,7 +12,6 @@ */ import { - ColorThemeKind, CustomTextEditorProvider, Disposable, ExtensionContext, @@ -131,10 +130,6 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { } }); - window.onDidChangeActiveColorTheme(() => { - updateWebview(); - }); - const changeDocumentSubscription = workspace.onDidChangeTextDocument( (event) => { if (event.document.uri.toString() === document.uri.toString()) { @@ -231,12 +226,11 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { return /* html */ ` - + - DataSource diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index fe466d4b..bfe60cd9 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -84,8 +84,8 @@ export class KdbDataSourceView extends LitElement { sl-input, sl-select { - min-width: 14rem; - max-width: 14rem; + min-width: 13rem; + max-width: 13rem; } sl-checkbox { @@ -174,12 +174,6 @@ export class KdbDataSourceView extends LitElement { this.aggs = optional.aggs; this.groups = optional.groups; } - if ("theme" in msg) { - document.documentElement.className = - msg.theme === 1 || msg.theme === 4 - ? "sl-theme-light" - : "sl-theme-dark"; - } this.requestUpdate(); } }; @@ -387,6 +381,7 @@ export class KdbDataSourceView extends LitElement { }}"> Save - Refresh - Run - Populate Scratchpad `; diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 89200fe4..2bfdc889 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -18,19 +18,35 @@ export const shoelaceStyles = css` box-sizing: border-box; } + sl-select::part(listbox) { + --sl-panel-border-color: var(--vscode-focusBorder); + } + + sl-option::part(base) { + --sl-color-primary-600: var(--vscode-button-background); + --sl-color-neutral-700: var(--vscode-input-foreground); + --sl-color-neutral-1000: var(--vscode-input-foreground); + --sl-color-neutral-100: var(--vscode-button-secondaryHoverBackground); + } + sl-button::part(base) { - color: var(--vscode-button-secondaryForeground); - background-color: var(--vscode-button-secondaryBackground); - border-color: var( - --vscode-button-border, - var(--vscode-button-secondaryBackground) - ); - } - - sl-button[variant="primary"]::part(base) { - color: var(--vscode-button-foreground); - background-color: var(--vscode-button-background); - border-color: var(--vscode-button-border, var(--vscode-button-background)); + --sl-color-primary-600: var(--vscode-button-background); + --sl-color-primary-500: var(--vscode-button-hoverBackground); + --sl-color-neutral-600: var(--vscode-button-secondaryBackground); + --sl-color-neutral-500: var(--vscode-button-secondaryHoverBackground); + } + + sl-button[variant="neutral"]::part(base) { + --sl-color-neutral-0: var(--vscode-input-foreground); + } + + sl-tab-group::part(tabs) { + --track-color: var(--vscode-button-secondaryHoverBackground); + --indicator-color: var(--vscode-button-background); + } + + sl-tab::part(base) { + --sl-color-primary-600: var(--vscode-button-background); } `; diff --git a/src/webview/styles/dark.css b/src/webview/styles/dark.css deleted file mode 100644 index dad0b514..00000000 --- a/src/webview/styles/dark.css +++ /dev/null @@ -1,483 +0,0 @@ -:host, -.sl-theme-dark { - color-scheme: dark; - - --sl-color-gray-50: hsl(240 5.1% 15%); - --sl-color-gray-100: hsl(240 5.7% 18.2%); - --sl-color-gray-200: hsl(240 4.6% 22%); - --sl-color-gray-300: hsl(240 5% 27.6%); - --sl-color-gray-400: hsl(240 5% 35.5%); - --sl-color-gray-500: hsl(240 3.7% 44%); - --sl-color-gray-600: hsl(240 5.3% 58%); - --sl-color-gray-700: hsl(240 5.6% 73%); - --sl-color-gray-800: hsl(240 7.3% 84%); - --sl-color-gray-900: hsl(240 9.1% 91.8%); - --sl-color-gray-950: hsl(0 0% 95%); - - --sl-color-red-50: hsl(0 56% 23.9%); - --sl-color-red-100: hsl(0.6 60% 33.9%); - --sl-color-red-200: hsl(0.9 67.2% 37.1%); - --sl-color-red-300: hsl(1.1 71.3% 43.7%); - --sl-color-red-400: hsl(1 76% 52.5%); - --sl-color-red-500: hsl(0.7 89.6% 57.2%); - --sl-color-red-600: hsl(0 98.6% 67.9%); - --sl-color-red-700: hsl(0 100% 72.3%); - --sl-color-red-800: hsl(0 100% 85.6%); - --sl-color-red-900: hsl(0 100% 90.3%); - --sl-color-red-950: hsl(0 100% 95.9%); - - --sl-color-orange-50: hsl(15 64.2% 23.3%); - --sl-color-orange-100: hsl(15.1 70.9% 31.1%); - --sl-color-orange-200: hsl(15.3 75.7% 35.5%); - --sl-color-orange-300: hsl(17.1 83.5% 42.7%); - --sl-color-orange-400: hsl(20.1 88% 50.8%); - --sl-color-orange-500: hsl(24.3 100% 50.5%); - --sl-color-orange-600: hsl(27.2 100% 57.7%); - --sl-color-orange-700: hsl(31.3 100% 68.7%); - --sl-color-orange-800: hsl(33.8 100% 79.3%); - --sl-color-orange-900: hsl(38.9 100% 87.7%); - --sl-color-orange-950: hsl(46.2 100% 95%); - - --sl-color-amber-50: hsl(21.9 66.3% 21.1%); - --sl-color-amber-100: hsl(21.5 73.6% 29.7%); - --sl-color-amber-200: hsl(22.3 77.6% 33.3%); - --sl-color-amber-300: hsl(25.4 84.2% 39.6%); - --sl-color-amber-400: hsl(31.4 87.4% 46.7%); - --sl-color-amber-500: hsl(37 96.6% 48.3%); - --sl-color-amber-600: hsl(43.3 100% 53.4%); - --sl-color-amber-700: hsl(46.5 100% 61.1%); - --sl-color-amber-800: hsl(49.3 100% 73%); - --sl-color-amber-900: hsl(51.8 100% 85%); - --sl-color-amber-950: hsl(60 100% 94.6%); - - --sl-color-yellow-50: hsl(32.5 60% 18.2%); - --sl-color-yellow-100: hsl(28.1 68.6% 29%); - --sl-color-yellow-200: hsl(31.3 75.8% 30.8%); - --sl-color-yellow-300: hsl(34.7 84.4% 35.3%); - --sl-color-yellow-400: hsl(40.1 87.3% 43.3%); - --sl-color-yellow-500: hsl(44.7 88% 46%); - --sl-color-yellow-600: hsl(47.7 100% 50.9%); - --sl-color-yellow-700: hsl(51.3 100% 59.9%); - --sl-color-yellow-800: hsl(54.6 100% 73%); - --sl-color-yellow-900: hsl(58.9 100% 84.2%); - --sl-color-yellow-950: hsl(60 100% 94%); - - --sl-color-lime-50: hsl(86.5 54.4% 18%); - --sl-color-lime-100: hsl(87.6 56.8% 23.3%); - --sl-color-lime-200: hsl(85.8 63.2% 24.5%); - --sl-color-lime-300: hsl(86.1 72% 29.4%); - --sl-color-lime-400: hsl(85.5 76.8% 37.3%); - --sl-color-lime-500: hsl(84.3 74.2% 42.1%); - --sl-color-lime-600: hsl(82.8 81.5% 52.6%); - --sl-color-lime-700: hsl(82 89.9% 64%); - --sl-color-lime-800: hsl(80.9 97.9% 76.6%); - --sl-color-lime-900: hsl(77.9 100% 85.8%); - --sl-color-lime-950: hsl(69.5 100% 93.8%); - - --sl-color-green-50: hsl(144.3 53.6% 16%); - --sl-color-green-100: hsl(143.2 55.4% 23.5%); - --sl-color-green-200: hsl(141.5 58.2% 26.3%); - --sl-color-green-300: hsl(140.8 64.2% 31.8%); - --sl-color-green-400: hsl(140.3 68% 39.2%); - --sl-color-green-500: hsl(141.1 64.9% 43%); - --sl-color-green-600: hsl(141.6 72.4% 55.2%); - --sl-color-green-700: hsl(141.7 82.7% 70.1%); - --sl-color-green-800: hsl(141 90.9% 82.1%); - --sl-color-green-900: hsl(142 100% 89.1%); - --sl-color-green-950: hsl(144 100% 95.5%); - - --sl-color-emerald-50: hsl(164.3 75% 13.5%); - --sl-color-emerald-100: hsl(163.5 72.6% 20.1%); - --sl-color-emerald-200: hsl(162.1 73.7% 22.4%); - --sl-color-emerald-300: hsl(161.3 77.3% 27.6%); - --sl-color-emerald-400: hsl(159.6 77.1% 34.3%); - --sl-color-emerald-500: hsl(159.1 73.5% 37.9%); - --sl-color-emerald-600: hsl(157.8 66.8% 48.9%); - --sl-color-emerald-700: hsl(156.2 76.1% 63.8%); - --sl-color-emerald-800: hsl(152.4 84.4% 77.4%); - --sl-color-emerald-900: hsl(149.3 100% 87%); - --sl-color-emerald-950: hsl(158.6 100% 94.8%); - - --sl-color-teal-50: hsl(176.5 51.5% 15.4%); - --sl-color-teal-100: hsl(175.9 54.7% 22.3%); - --sl-color-teal-200: hsl(175.9 60.7% 23.9%); - --sl-color-teal-300: hsl(174.5 67.3% 28.8%); - --sl-color-teal-400: hsl(174.4 71.9% 34.9%); - --sl-color-teal-500: hsl(173.1 71% 38.3%); - --sl-color-teal-600: hsl(172.3 68.2% 48.1%); - --sl-color-teal-700: hsl(170.5 81.3% 61.5%); - --sl-color-teal-800: hsl(168.4 92.1% 75.2%); - --sl-color-teal-900: hsl(168.3 100% 86%); - --sl-color-teal-950: hsl(180 100% 95.5%); - - --sl-color-cyan-50: hsl(197.1 53.8% 20.3%); - --sl-color-cyan-100: hsl(196.8 57.3% 27.2%); - --sl-color-cyan-200: hsl(195.3 62.7% 29.4%); - --sl-color-cyan-300: hsl(193.5 71.3% 34.1%); - --sl-color-cyan-400: hsl(192.5 76.8% 40.6%); - --sl-color-cyan-500: hsl(189.4 78.6% 42.6%); - --sl-color-cyan-600: hsl(188.2 89.1% 51.7%); - --sl-color-cyan-700: hsl(187 98.6% 66.2%); - --sl-color-cyan-800: hsl(184.9 100% 78.3%); - --sl-color-cyan-900: hsl(180 100% 86.6%); - --sl-color-cyan-950: hsl(180 100% 94.8%); - - --sl-color-sky-50: hsl(203 63.8% 20.9%); - --sl-color-sky-100: hsl(203.4 70.4% 28%); - --sl-color-sky-200: hsl(202.7 75.8% 30.8%); - --sl-color-sky-300: hsl(203.1 80.4% 36.1%); - --sl-color-sky-400: hsl(202.1 80.5% 44.3%); - --sl-color-sky-500: hsl(199.7 85.9% 47.7%); - --sl-color-sky-600: hsl(198.7 97.9% 57.2%); - --sl-color-sky-700: hsl(198.7 100% 70.5%); - --sl-color-sky-800: hsl(198.8 100% 82.5%); - --sl-color-sky-900: hsl(198.5 100% 89.9%); - --sl-color-sky-950: hsl(186 100% 95.5%); - - --sl-color-blue-50: hsl(227.1 49.5% 22.7%); - --sl-color-blue-100: hsl(225.8 58.9% 36.8%); - --sl-color-blue-200: hsl(227.7 64.4% 42.9%); - --sl-color-blue-300: hsl(226.1 72.7% 51.2%); - --sl-color-blue-400: hsl(222.6 86.5% 56.3%); - --sl-color-blue-500: hsl(217.8 95.8% 57.4%); - --sl-color-blue-600: hsl(213.3 100% 65%); - --sl-color-blue-700: hsl(210.9 100% 74.8%); - --sl-color-blue-800: hsl(211.5 100% 83.4%); - --sl-color-blue-900: hsl(211 100% 88.9%); - --sl-color-blue-950: hsl(201.8 100% 95.3%); - - --sl-color-indigo-50: hsl(243.5 40.8% 27%); - --sl-color-indigo-100: hsl(242.9 45.7% 37.6%); - --sl-color-indigo-200: hsl(244.7 52.7% 43.1%); - --sl-color-indigo-300: hsl(245.3 60.5% 52.4%); - --sl-color-indigo-400: hsl(244.1 79.2% 60.4%); - --sl-color-indigo-500: hsl(239.6 88.7% 63.8%); - --sl-color-indigo-600: hsl(234.5 96.7% 70.9%); - --sl-color-indigo-700: hsl(229.4 100% 78.3%); - --sl-color-indigo-800: hsl(227.1 100% 85%); - --sl-color-indigo-900: hsl(223.8 100% 89.9%); - --sl-color-indigo-950: hsl(220 100% 95.1%); - - --sl-color-violet-50: hsl(265.1 57.3% 25.4%); - --sl-color-violet-100: hsl(263.5 63.8% 39.4%); - --sl-color-violet-200: hsl(263.4 66.2% 44.1%); - --sl-color-violet-300: hsl(263.7 72.8% 52.4%); - --sl-color-violet-400: hsl(262.5 87.3% 59.8%); - --sl-color-violet-500: hsl(258.3 95.1% 63.2%); - --sl-color-violet-600: hsl(255.1 100% 67.2%); - --sl-color-violet-700: hsl(253 100% 81.5%); - --sl-color-violet-800: hsl(251.7 100% 87.9%); - --sl-color-violet-900: hsl(254.1 100% 91.7%); - --sl-color-violet-950: hsl(257.1 100% 96.1%); - - --sl-color-purple-50: hsl(276 54.3% 20.5%); - --sl-color-purple-100: hsl(273.6 61.8% 35.4%); - --sl-color-purple-200: hsl(272.9 64% 41.4%); - --sl-color-purple-300: hsl(271.9 68.1% 49.2%); - --sl-color-purple-400: hsl(271.5 85.1% 57.8%); - --sl-color-purple-500: hsl(270.7 96.4% 62.1%); - --sl-color-purple-600: hsl(270.5 100% 71.9%); - --sl-color-purple-700: hsl(270.9 100% 81.3%); - --sl-color-purple-800: hsl(272.4 100% 87.7%); - --sl-color-purple-900: hsl(276.7 100% 91.5%); - --sl-color-purple-950: hsl(300 100% 96.5%); - - --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%); - --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%); - --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%); - --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%); - --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%); - --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%); - --sl-color-fuchsia-600: hsl(292 98.5% 59.5%); - --sl-color-fuchsia-700: hsl(292.4 100% 79.5%); - --sl-color-fuchsia-800: hsl(292.9 100% 86.8%); - --sl-color-fuchsia-900: hsl(300 100% 91.5%); - --sl-color-fuchsia-950: hsl(300 100% 96.3%); - - --sl-color-pink-50: hsl(336.2 59.6% 20%); - --sl-color-pink-100: hsl(336.8 63.9% 34%); - --sl-color-pink-200: hsl(336.8 68.7% 37.6%); - --sl-color-pink-300: hsl(336.1 71.8% 44.5%); - --sl-color-pink-400: hsl(333.9 74.9% 53.1%); - --sl-color-pink-500: hsl(330.7 86.3% 57.7%); - --sl-color-pink-600: hsl(328.6 91.5% 67.2%); - --sl-color-pink-700: hsl(327.4 97.6% 78.7%); - --sl-color-pink-800: hsl(325.1 100% 86.6%); - --sl-color-pink-900: hsl(322.1 100% 91.3%); - --sl-color-pink-950: hsl(315 100% 95.9%); - - --sl-color-rose-50: hsl(342.3 62.9% 21.5%); - --sl-color-rose-100: hsl(342.8 68.9% 34.2%); - --sl-color-rose-200: hsl(344.8 72.6% 37.3%); - --sl-color-rose-300: hsl(346.9 75.8% 43.7%); - --sl-color-rose-400: hsl(348.2 80.1% 52.7%); - --sl-color-rose-500: hsl(350.4 94.8% 57.5%); - --sl-color-rose-600: hsl(351.2 100% 58.1%); - --sl-color-rose-700: hsl(352.3 100% 78.1%); - --sl-color-rose-800: hsl(352 100% 86.2%); - --sl-color-rose-900: hsl(354.5 100% 90.7%); - --sl-color-rose-950: hsl(353.3 100% 95.7%); - - --sl-color-primary-50: var(--sl-color-sky-50); - --sl-color-primary-100: var(--sl-color-sky-100); - --sl-color-primary-200: var(--sl-color-sky-200); - --sl-color-primary-300: var(--sl-color-sky-300); - --sl-color-primary-400: var(--sl-color-sky-400); - --sl-color-primary-500: var(--sl-color-sky-500); - --sl-color-primary-600: var(--sl-color-sky-600); - --sl-color-primary-700: var(--sl-color-sky-700); - --sl-color-primary-800: var(--sl-color-sky-800); - --sl-color-primary-900: var(--sl-color-sky-900); - --sl-color-primary-950: var(--sl-color-sky-950); - - --sl-color-success-50: var(--sl-color-green-50); - --sl-color-success-100: var(--sl-color-green-100); - --sl-color-success-200: var(--sl-color-green-200); - --sl-color-success-300: var(--sl-color-green-300); - --sl-color-success-400: var(--sl-color-green-400); - --sl-color-success-500: var(--sl-color-green-500); - --sl-color-success-600: var(--sl-color-green-600); - --sl-color-success-700: var(--sl-color-green-700); - --sl-color-success-800: var(--sl-color-green-800); - --sl-color-success-900: var(--sl-color-green-900); - --sl-color-success-950: var(--sl-color-green-950); - - --sl-color-warning-50: var(--sl-color-amber-50); - --sl-color-warning-100: var(--sl-color-amber-100); - --sl-color-warning-200: var(--sl-color-amber-200); - --sl-color-warning-300: var(--sl-color-amber-300); - --sl-color-warning-400: var(--sl-color-amber-400); - --sl-color-warning-500: var(--sl-color-amber-500); - --sl-color-warning-600: var(--sl-color-amber-600); - --sl-color-warning-700: var(--sl-color-amber-700); - --sl-color-warning-800: var(--sl-color-amber-800); - --sl-color-warning-900: var(--sl-color-amber-900); - --sl-color-warning-950: var(--sl-color-amber-950); - - --sl-color-danger-50: var(--sl-color-red-50); - --sl-color-danger-100: var(--sl-color-red-100); - --sl-color-danger-200: var(--sl-color-red-200); - --sl-color-danger-300: var(--sl-color-red-300); - --sl-color-danger-400: var(--sl-color-red-400); - --sl-color-danger-500: var(--sl-color-red-500); - --sl-color-danger-600: var(--sl-color-red-600); - --sl-color-danger-700: var(--sl-color-red-700); - --sl-color-danger-800: var(--sl-color-red-800); - --sl-color-danger-900: var(--sl-color-red-900); - --sl-color-danger-950: var(--sl-color-red-950); - - --sl-color-neutral-50: var(--sl-color-gray-50); - --sl-color-neutral-100: var(--sl-color-gray-100); - --sl-color-neutral-200: var(--sl-color-gray-200); - --sl-color-neutral-300: var(--sl-color-gray-300); - --sl-color-neutral-400: var(--sl-color-gray-400); - --sl-color-neutral-500: var(--sl-color-gray-500); - --sl-color-neutral-600: var(--sl-color-gray-600); - --sl-color-neutral-700: var(--sl-color-gray-700); - --sl-color-neutral-800: var(--sl-color-gray-800); - --sl-color-neutral-900: var(--sl-color-gray-900); - --sl-color-neutral-950: var(--sl-color-gray-950); - - --sl-color-neutral-0: hsl(240, 5.9%, 11%); - --sl-color-neutral-1000: hsl(0, 0%, 100%); - - --sl-border-radius-small: 0.1875rem; - --sl-border-radius-medium: 0.25rem; - --sl-border-radius-large: 0.5rem; - --sl-border-radius-x-large: 1rem; - - --sl-border-radius-circle: 50%; - --sl-border-radius-pill: 9999px; - - --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%); - --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%); - --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%); - --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%); - --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%); - - --sl-spacing-3x-small: 0.125rem; - --sl-spacing-2x-small: 0.25rem; - --sl-spacing-x-small: 0.5rem; - --sl-spacing-small: 0.75rem; - --sl-spacing-medium: 1rem; - --sl-spacing-large: 1.25rem; - --sl-spacing-x-large: 1.75rem; - --sl-spacing-2x-large: 2.25rem; - --sl-spacing-3x-large: 3rem; - --sl-spacing-4x-large: 4.5rem; - - --sl-transition-x-slow: 1000ms; - --sl-transition-slow: 500ms; - --sl-transition-medium: 250ms; - --sl-transition-fast: 150ms; - --sl-transition-x-fast: 50ms; - - --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; - --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; - --sl-font-serif: Georgia, "Times New Roman", serif; - - --sl-font-size-2x-small: 0.625rem; - --sl-font-size-x-small: 0.75rem; - --sl-font-size-small: 0.875rem; - --sl-font-size-medium: 1rem; - --sl-font-size-large: 1.25rem; - --sl-font-size-x-large: 1.5rem; - --sl-font-size-2x-large: 2.25rem; - --sl-font-size-3x-large: 3rem; - --sl-font-size-4x-large: 4.5rem; - - --sl-font-weight-light: 300; - --sl-font-weight-normal: 400; - --sl-font-weight-semibold: 500; - --sl-font-weight-bold: 700; - - --sl-letter-spacing-denser: -0.03em; - --sl-letter-spacing-dense: -0.015em; - --sl-letter-spacing-normal: normal; - --sl-letter-spacing-loose: 0.075em; - --sl-letter-spacing-looser: 0.15em; - - --sl-line-height-denser: 1; - --sl-line-height-dense: 1.4; - --sl-line-height-normal: 1.8; - --sl-line-height-loose: 2.2; - --sl-line-height-looser: 2.6; - - --sl-focus-ring-color: var(--sl-color-primary-700); - --sl-focus-ring-style: solid; - --sl-focus-ring-width: 3px; - --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) - var(--sl-focus-ring-color); - --sl-focus-ring-offset: 1px; - - --sl-button-font-size-small: var(--sl-font-size-x-small); - --sl-button-font-size-medium: var(--sl-font-size-small); - --sl-button-font-size-large: var(--sl-font-size-medium); - - --sl-input-height-small: 1.875rem; - --sl-input-height-medium: 2.5rem; - --sl-input-height-large: 3.125rem; - - --sl-input-background-color: var(--sl-color-neutral-0); - --sl-input-background-color-hover: var(--sl-input-background-color); - --sl-input-background-color-focus: var(--sl-input-background-color); - --sl-input-background-color-disabled: var(--sl-color-neutral-100); - --sl-input-border-color: var(--sl-color-neutral-400); - --sl-input-border-color-hover: var(--sl-color-neutral-500); - --sl-input-border-color-focus: var(--sl-color-primary-600); - --sl-input-border-color-disabled: var(--sl-color-neutral-400); - --sl-input-border-width: 1px; - --sl-input-required-content: "*"; - --sl-input-required-content-offset: -2px; - --sl-input-required-content-color: var(--sl-input-label-color); - - --sl-input-border-radius-small: var(--sl-border-radius-medium); - --sl-input-border-radius-medium: var(--sl-border-radius-medium); - --sl-input-border-radius-large: var(--sl-border-radius-medium); - - --sl-input-font-family: var(--sl-font-sans); - --sl-input-font-weight: var(--sl-font-weight-normal); - --sl-input-font-size-small: var(--sl-font-size-small); - --sl-input-font-size-medium: var(--sl-font-size-medium); - --sl-input-font-size-large: var(--sl-font-size-large); - --sl-input-letter-spacing: var(--sl-letter-spacing-normal); - - --sl-input-color: var(--sl-color-neutral-700); - --sl-input-color-hover: var(--sl-color-neutral-700); - --sl-input-color-focus: var(--sl-color-neutral-700); - --sl-input-color-disabled: var(--sl-color-neutral-900); - --sl-input-icon-color: var(--sl-color-neutral-500); - --sl-input-icon-color-hover: var(--sl-color-neutral-600); - --sl-input-icon-color-focus: var(--sl-color-neutral-600); - --sl-input-placeholder-color: var(--sl-color-neutral-500); - --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600); - --sl-input-spacing-small: var(--sl-spacing-small); - --sl-input-spacing-medium: var(--sl-spacing-medium); - --sl-input-spacing-large: var(--sl-spacing-large); - - --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%); - --sl-input-focus-ring-offset: 0; - - --sl-input-filled-background-color: var(--sl-color-neutral-100); - --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); - --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); - --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); - --sl-input-filled-color: var(--sl-color-neutral-800); - --sl-input-filled-color-hover: var(--sl-color-neutral-800); - --sl-input-filled-color-focus: var(--sl-color-neutral-700); - --sl-input-filled-color-disabled: var(--sl-color-neutral-800); - - --sl-input-label-font-size-small: var(--sl-font-size-small); - --sl-input-label-font-size-medium: var(--sl-font-size-medium); - --sl-input-label-font-size-large: var(--sl-font-size-large); - --sl-input-label-color: inherit; - - --sl-input-help-text-font-size-small: var(--sl-font-size-x-small); - --sl-input-help-text-font-size-medium: var(--sl-font-size-small); - --sl-input-help-text-font-size-large: var(--sl-font-size-medium); - --sl-input-help-text-color: var(--sl-color-neutral-600); - - --sl-toggle-size-small: 0.875rem; - --sl-toggle-size-medium: 1.125rem; - --sl-toggle-size-large: 1.375rem; - - --sl-overlay-background-color: hsl(0 0% 0% / 43%); - - --sl-panel-background-color: var(--sl-color-neutral-50); - --sl-panel-border-color: var(--sl-color-neutral-200); - --sl-panel-border-width: 1px; - - --sl-tooltip-border-radius: var(--sl-border-radius-medium); - --sl-tooltip-background-color: var(--sl-color-neutral-800); - --sl-tooltip-color: var(--sl-color-neutral-0); - --sl-tooltip-font-family: var(--sl-font-sans); - --sl-tooltip-font-weight: var(--sl-font-weight-normal); - --sl-tooltip-font-size: var(--sl-font-size-small); - --sl-tooltip-line-height: var(--sl-line-height-dense); - --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small); - --sl-tooltip-arrow-size: 6px; - - --sl-z-index-drawer: 700; - --sl-z-index-dialog: 800; - --sl-z-index-dropdown: 900; - --sl-z-index-toast: 950; - --sl-z-index-tooltip: 1000; -} - -@supports (scrollbar-gutter: stable) { - .sl-scroll-lock { - scrollbar-gutter: var(--sl-scroll-lock-gutter) !important; - } - - .sl-scroll-lock body { - overflow: hidden !important; - } -} - -@supports not (scrollbar-gutter: stable) { - .sl-scroll-lock body { - padding-right: var(--sl-scroll-lock-size) !important; - overflow: hidden !important; - } -} - -.sl-toast-stack { - position: fixed; - top: 0; - inset-inline-end: 0; - z-index: var(--sl-z-index-toast); - width: 28rem; - max-width: 100%; - max-height: 100%; - overflow: auto; -} - -.sl-toast-stack sl-alert { - margin: var(--sl-spacing-medium); -} - -.sl-toast-stack sl-alert::part(base) { - box-shadow: var(--sl-shadow-large); -} From 8a73b0e6fd253c65bbf21daea9d08b1974a85fa6 Mon Sep 17 00:00:00 2001 From: ecmel Date: Mon, 7 Oct 2024 07:19:11 +0300 Subject: [PATCH 09/19] more tokens --- src/webview/components/kdbDataSourceView.ts | 3 +++ src/webview/components/styles.ts | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index bfe60cd9..239ecbd2 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -58,6 +58,9 @@ export class KdbDataSourceView extends LitElement { flex-grow: 0; gap: var(--sl-spacing-x-small); padding: var(--sl-spacing-medium); + margin-top: calc( + 1rem * var(--sl-line-height-dense) + 2 * var(--sl-spacing-medium) + ); } .actions sl-button-group > sl-button { diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 2bfdc889..bb2c3e43 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -48,6 +48,11 @@ export const shoelaceStyles = css` sl-tab::part(base) { --sl-color-primary-600: var(--vscode-button-background); } + + sl-checkbox::part(base) { + --sl-color-primary-600: var(--vscode-button-background); + --sl-input-background-color-hover: var(--vscode-button-hoverBackground); + } `; export const vscodeStyles = css` From b5c6260d4f0aff83d3e6a7d0cd5c6b120da7207a Mon Sep 17 00:00:00 2001 From: ecmel Date: Mon, 7 Oct 2024 10:29:04 +0300 Subject: [PATCH 10/19] more tokens --- src/webview/components/styles.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index bb2c3e43..41e2da44 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -23,21 +23,22 @@ export const shoelaceStyles = css` } sl-option::part(base) { - --sl-color-primary-600: var(--vscode-button-background); --sl-color-neutral-700: var(--vscode-input-foreground); + --sl-color-primary-600: var(--vscode-button-background); --sl-color-neutral-1000: var(--vscode-input-foreground); - --sl-color-neutral-100: var(--vscode-button-secondaryHoverBackground); + --sl-color-neutral-100: var(--vscode-inputOption-hoverBackground); } sl-button::part(base) { --sl-color-primary-600: var(--vscode-button-background); --sl-color-primary-500: var(--vscode-button-hoverBackground); - --sl-color-neutral-600: var(--vscode-button-secondaryBackground); - --sl-color-neutral-500: var(--vscode-button-secondaryHoverBackground); } sl-button[variant="neutral"]::part(base) { + --sl-color-neutral-600: var(--vscode-input-background); + --sl-color-neutral-500: var(--vscode-inputOption-hoverBackground); --sl-color-neutral-0: var(--vscode-input-foreground); + border-color: var(--vscode-input-border, transparent); } sl-tab-group::part(tabs) { @@ -46,7 +47,7 @@ export const shoelaceStyles = css` } sl-tab::part(base) { - --sl-color-primary-600: var(--vscode-button-background); + --sl-color-primary-600: var(--vscode-foreground); } sl-checkbox::part(base) { From 9c67366d28da920a8fa14d608325a386117ecb70 Mon Sep 17 00:00:00 2001 From: ecmel Date: Mon, 7 Oct 2024 10:51:08 +0300 Subject: [PATCH 11/19] added color-scheme --- src/services/dataSourceEditorProvider.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index cf53e74b..f4d4739e 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -12,6 +12,7 @@ */ import { + ColorThemeKind, CustomTextEditorProvider, Disposable, ExtensionContext, @@ -223,6 +224,11 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { private getWebviewContent(webview: Webview) { const getResource = (resource: string) => getUri(webview, this.context.extensionUri, ["out", resource]); + const scheme = + window.activeColorTheme.kind === ColorThemeKind.Light || + window.activeColorTheme.kind === ColorThemeKind.HighContrastLight + ? "light" + : "dark"; return /* html */ ` @@ -232,6 +238,7 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { + DataSource From b4ee1a07bd70b5b267934db5740d13a96723de9e Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 8 Oct 2024 00:59:42 +0300 Subject: [PATCH 12/19] more tokens --- src/services/dataSourceEditorProvider.ts | 13 +++-- src/webview/components/kdbDataSourceView.ts | 55 ++++++++++++--------- src/webview/components/styles.ts | 7 +-- src/webview/styles/style.css | 23 +++++++-- 4 files changed, 59 insertions(+), 39 deletions(-) diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index f4d4739e..e7fb2d7c 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -224,21 +224,20 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { private getWebviewContent(webview: Webview) { const getResource = (resource: string) => getUri(webview, this.context.extensionUri, ["out", resource]); - const scheme = - window.activeColorTheme.kind === ColorThemeKind.Light || - window.activeColorTheme.kind === ColorThemeKind.HighContrastLight - ? "light" - : "dark"; return /* html */ ` - + - DataSource diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 239ecbd2..6defce81 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -46,6 +46,9 @@ export class KdbDataSourceView extends LitElement { display: flex; flex-flow: row nowrap; overflow-x: auto; + gap: var(--sl-spacing-medium); + padding-left: var(--sl-spacing-medium); + padding-right: var(--sl-spacing-medium); } .tabs { @@ -57,9 +60,8 @@ export class KdbDataSourceView extends LitElement { flex-flow: column nowrap; flex-grow: 0; gap: var(--sl-spacing-x-small); - padding: var(--sl-spacing-medium); margin-top: calc( - 1rem * var(--sl-line-height-dense) + 2 * var(--sl-spacing-medium) + 1rem * var(--sl-line-height-dense) + 3 * var(--sl-spacing-medium) ); } @@ -78,7 +80,8 @@ export class KdbDataSourceView extends LitElement { sl-tab-panel { --padding: 0; overflow-y: scroll; - padding: var(--sl-spacing-medium); + padding-top: var(--sl-spacing-medium); + padding-bottom: var(--sl-spacing-medium); height: calc( 100vh - 1rem * var(--sl-line-height-dense) - 2 * var(--sl-spacing-medium) @@ -821,27 +824,31 @@ export class KdbDataSourceView extends LitElement { renderQSQL() { return html` - - ${this.qsqlTarget || "(none)"} - ${this.isMetaLoaded ? "Meta Targets" : "Meta Not Loaded"} - ${this.renderTargetOptions()} - - +
+ + ${this.qsqlTarget || "(none)"} + ${this.isMetaLoaded ? "Meta Targets" : "Meta Not Loaded"} + ${this.renderTargetOptions()} + + +
`; } diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 41e2da44..22c69453 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -23,8 +23,8 @@ export const shoelaceStyles = css` } sl-option::part(base) { - --sl-color-neutral-700: var(--vscode-input-foreground); --sl-color-primary-600: var(--vscode-button-background); + --sl-color-neutral-700: var(--vscode-input-foreground); --sl-color-neutral-1000: var(--vscode-input-foreground); --sl-color-neutral-100: var(--vscode-inputOption-hoverBackground); } @@ -38,11 +38,12 @@ export const shoelaceStyles = css` --sl-color-neutral-600: var(--vscode-input-background); --sl-color-neutral-500: var(--vscode-inputOption-hoverBackground); --sl-color-neutral-0: var(--vscode-input-foreground); - border-color: var(--vscode-input-border, transparent); + border-color: var(--sl-input-border-color); } sl-tab-group::part(tabs) { - --track-color: var(--vscode-button-secondaryHoverBackground); + --track-width: 1px; + --track-color: var(--vscode-inputOption-hoverBackground); --indicator-color: var(--vscode-button-background); } diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index 5dbf7197..d64642c4 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -1,4 +1,17 @@ -:root { +.sl-theme-dark { + color-scheme: dark; + --sl-input-border-color: var(--vscode-input-border, transparent); +} + +.sl-theme-light { + --sl-input-border-color: var( + --vscode-input-border, + var(--vscode-inputOption-hoverBackground) + ); +} + +.sl-theme-dark, +.sl-theme-light { --sl-focus-ring-width: 1px; --sl-focus-ring-offset: 1px; --sl-focus-ring-style: solid; @@ -14,9 +27,8 @@ --sl-input-border-width: 1px; --sl-input-border-radius-medium: 2px; - --sl-input-border-color: var(--vscode-input-border, transparent); - --sl-input-border-color-hover: var(--vscode-input-border, transparent); - --sl-input-border-color-focus: var(--vscode-input-border, transparent); + --sl-input-border-color-hover: var(--sl-input-border-color); + --sl-input-border-color-focus: var(--sl-input-border-color); --sl-input-height-medium: calc(2rem + 2 * var(--sl-input-border-width)); --sl-input-spacing-medium: var(--sl-spacing-x-small); @@ -32,6 +44,7 @@ html, body { margin: 0; + padding: 0; line-height: 1.5; font-size: var(--vscode-font-size); } @@ -44,5 +57,5 @@ body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; color: var(--vscode-foreground); - background-color: var(--vscode-panel-background); + background-color: var(--vscode-editor-background); } From ef8032c9eab7c1bfd78c70e7b9c97044d98c95e3 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 8 Oct 2024 01:34:15 +0300 Subject: [PATCH 13/19] fixed input focus ring --- src/webview/components/styles.ts | 7 ++++++- src/webview/styles/style.css | 4 +--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 22c69453..10c99503 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -18,6 +18,11 @@ export const shoelaceStyles = css` box-sizing: border-box; } + sl-input, + sl-select { + --sl-focus-ring-width: 0; + } + sl-select::part(listbox) { --sl-panel-border-color: var(--vscode-focusBorder); } @@ -44,7 +49,7 @@ export const shoelaceStyles = css` sl-tab-group::part(tabs) { --track-width: 1px; --track-color: var(--vscode-inputOption-hoverBackground); - --indicator-color: var(--vscode-button-background); + --indicator-color: var(--vscode-focusBorder); } sl-tab::part(base) { diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index d64642c4..d887b3e8 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -16,8 +16,6 @@ --sl-focus-ring-offset: 1px; --sl-focus-ring-style: solid; --sl-focus-ring-color: var(--vscode-focusBorder); - --sl-input-focus-ring-offset: -1px; - --sl-input-focus-ring-color: var(--vscode-focusBorder); --sl-button-font-size-medium: var(--vscode-font-size); --sl-input-font-size-medium: var(--vscode-font-size); @@ -28,7 +26,7 @@ --sl-input-border-width: 1px; --sl-input-border-radius-medium: 2px; --sl-input-border-color-hover: var(--sl-input-border-color); - --sl-input-border-color-focus: var(--sl-input-border-color); + --sl-input-border-color-focus: var(--vscode-focusBorder); --sl-input-height-medium: calc(2rem + 2 * var(--sl-input-border-width)); --sl-input-spacing-medium: var(--sl-spacing-x-small); From 7a0e3e8a48dc6760d0e43568220ccb69179b0706 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 8 Oct 2024 07:55:04 +0300 Subject: [PATCH 14/19] update merge --- src/webview/components/kdbDataSourceView.ts | 127 +++++++------------- src/webview/main.ts | 3 + 2 files changed, 48 insertions(+), 82 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 9019c0da..24bba165 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -176,9 +176,7 @@ export class KdbDataSourceView extends LitElement { this.rowLimitCount = ds.dataSource.api.rowCountLimit ? ds.dataSource.api.rowCountLimit : "100000"; - this.isRowLimitLast = ds.dataSource.api.isRowLimitLast - ? ds.dataSource.api.isRowLimitLast - : true; + this.isRowLimitLast = ds.dataSource.api.isRowLimitLast !== false; this.temporality = ds.dataSource.api.temporality; this.qsqlTarget = ds.dataSource.qsql.selectedTarget; this.qsql = ds.dataSource.qsql.query; @@ -303,59 +301,32 @@ export class KdbDataSourceView extends LitElement { if (compareVersions(this.selectedServerVersion.toString(), "1.11") >= 0) { return html`
- { this.rowLimit = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> -
- - - -
+ }}"> + + - -
- First -
-
- Last -
- + + First + Last +
`; } else { @@ -804,55 +775,47 @@ export class KdbDataSourceView extends LitElement {
- Start Time ${this.selectedServerVersion} + }}"> - End Time + }}">
${this.renderRowCountOptions()}
- { this.filled = (event.target as HTMLInputElement).checked; this.requestChange(); - }}"> -
- - - ${this.fill || "(none)"} - Options - zero - forward - -
+ }}"> + + ${this.fill || "(none)"} + Options + zero + forward +
diff --git a/src/webview/main.ts b/src/webview/main.ts index 5a770d39..f98d874e 100644 --- a/src/webview/main.ts +++ b/src/webview/main.ts @@ -13,6 +13,9 @@ import "@shoelace-style/shoelace/dist/components/button/button.js"; import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js"; +import "@shoelace-style/shoelace/dist/components/radio/radio.js"; +import "@shoelace-style/shoelace/dist/components/radio-button/radio-button.js"; +import "@shoelace-style/shoelace/dist/components/radio-group/radio-group.js"; import "@shoelace-style/shoelace/dist/components/button-group/button-group.js"; import "@shoelace-style/shoelace/dist/components/input/input.js"; import "@shoelace-style/shoelace/dist/components/textarea/textarea.js"; From da31daff958b9776478b72255a9e3ea29a064d33 Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 8 Oct 2024 08:01:50 +0300 Subject: [PATCH 15/19] more tokens --- src/webview/components/styles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 10c99503..4c0073f9 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -34,7 +34,8 @@ export const shoelaceStyles = css` --sl-color-neutral-100: var(--vscode-inputOption-hoverBackground); } - sl-button::part(base) { + sl-button::part(base), + sl-radio-button::part(base) { --sl-color-primary-600: var(--vscode-button-background); --sl-color-primary-500: var(--vscode-button-hoverBackground); } From 297ccdd6e199c086cecd55cdb1abc20d818a474a Mon Sep 17 00:00:00 2001 From: ecmel Date: Tue, 8 Oct 2024 09:04:09 +0300 Subject: [PATCH 16/19] fixed tab switch --- src/services/dataSourceEditorProvider.ts | 1 - src/webview/components/kdbDataSourceView.ts | 32 ++++++++++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/services/dataSourceEditorProvider.ts b/src/services/dataSourceEditorProvider.ts index 0d45f4e0..64863863 100644 --- a/src/services/dataSourceEditorProvider.ts +++ b/src/services/dataSourceEditorProvider.ts @@ -123,7 +123,6 @@ export class DataSourceEditorProvider implements CustomTextEditorProvider { dataSourceFile: this.getDocumentAsJson(document), insightsMeta: await this.getMeta(selectedServer), isInsights: true, - theme: window.activeColorTheme.kind, }); } }; diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 24bba165..94e86a6e 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -11,7 +11,7 @@ * specific language governing permissions and limitations under the License. */ -import { LitElement, html, css } from "lit"; +import { LitElement, html, css, PropertyValues } from "lit"; import { repeat } from "lit/directives/repeat.js"; import { live } from "lit/directives/live.js"; import { customElement } from "lit/decorators.js"; @@ -932,8 +932,8 @@ export class KdbDataSourceView extends LitElement { SQL - ${this.renderAPI()} - ${this.renderQSQL()} - ${this.renderSQL()} + ${this.renderAPI()} + ${this.renderQSQL()} + ${this.renderSQL()} `; } From ef6c387871d73e2fbecc10efbe60818841d56666 Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 16 Oct 2024 11:28:13 +0300 Subject: [PATCH 17/19] fixed incoming --- src/webview/components/kdbDataSourceView.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index d97cb963..50671e52 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -775,16 +775,15 @@ export class KdbDataSourceView extends LitElement {
- Start Time + }}"> + Date: Wed, 16 Oct 2024 11:42:49 +0300 Subject: [PATCH 18/19] removed floating import --- src/webview/components/kdbDataSourceView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index 50671e52..e3587231 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -11,7 +11,7 @@ * specific language governing permissions and limitations under the License. */ -import { LitElement, html, css, PropertyValues } from "lit"; +import { LitElement, html, css } from "lit"; import { repeat } from "lit/directives/repeat.js"; import { live } from "lit/directives/live.js"; import { customElement } from "lit/decorators.js"; From 6a1f20a61a012760f66b3d20b358d814942a048d Mon Sep 17 00:00:00 2001 From: ecmel Date: Wed, 16 Oct 2024 12:01:06 +0300 Subject: [PATCH 19/19] moved css to styles --- src/webview/components/kdbDataSourceView.ts | 78 +-------------------- src/webview/components/styles.ts | 70 ++++++++++++++++++ 2 files changed, 73 insertions(+), 75 deletions(-) diff --git a/src/webview/components/kdbDataSourceView.ts b/src/webview/components/kdbDataSourceView.ts index e3587231..ee55fadd 100644 --- a/src/webview/components/kdbDataSourceView.ts +++ b/src/webview/components/kdbDataSourceView.ts @@ -11,7 +11,7 @@ * specific language governing permissions and limitations under the License. */ -import { LitElement, html, css } from "lit"; +import { LitElement, html } from "lit"; import { repeat } from "lit/directives/repeat.js"; import { live } from "lit/directives/live.js"; import { customElement } from "lit/decorators.js"; @@ -33,85 +33,13 @@ import { } from "../../models/dataSource"; import { MetaObjectPayload } from "../../models/meta"; import { DataSourceCommand, DataSourceMessage2 } from "../../models/messages"; -import { shoelaceStyles } from "./styles"; +import { dataSourceStyles, shoelaceStyles } from "./styles"; const MAX_RULES = 32; @customElement("kdb-data-source-view") export class KdbDataSourceView extends LitElement { - static styles = [ - shoelaceStyles, - css` - .container { - display: flex; - flex-flow: row nowrap; - overflow-x: auto; - gap: var(--sl-spacing-medium); - padding-left: var(--sl-spacing-medium); - padding-right: var(--sl-spacing-medium); - } - - .tabs { - flex-grow: 1; - } - - .actions { - display: flex; - flex-flow: column nowrap; - flex-grow: 0; - gap: var(--sl-spacing-x-small); - margin-top: calc( - 1rem * var(--sl-line-height-dense) + 3 * var(--sl-spacing-medium) - ); - } - - .actions sl-button-group > sl-button { - flex-grow: 1; - } - - sl-tab::part(base) { - padding: var(--sl-spacing-medium); - } - - sl-select::part(listbox) { - min-width: max-content; - } - - sl-tab-panel { - --padding: 0; - overflow-y: scroll; - padding-top: var(--sl-spacing-medium); - padding-bottom: var(--sl-spacing-medium); - height: calc( - 100vh - 1rem * var(--sl-line-height-dense) - 2 * - var(--sl-spacing-medium) - ); - } - - sl-input, - sl-select { - min-width: 13rem; - max-width: 13rem; - } - - sl-checkbox { - padding-bottom: var(--sl-spacing-2x-small); - } - - .col { - display: flex; - flex-direction: column; - gap: var(--sl-spacing-x-small); - } - - .row { - display: flex; - flex-direction: row; - gap: var(--sl-spacing-x-small); - align-items: flex-end; - } - `, - ]; + static styles = [shoelaceStyles, dataSourceStyles]; readonly vscode = acquireVsCodeApi(); private declare debounce; diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index 4c0073f9..ed6f0ca5 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -63,6 +63,76 @@ export const shoelaceStyles = css` } `; +export const dataSourceStyles = css` + .container { + display: flex; + flex-flow: row nowrap; + overflow-x: auto; + gap: var(--sl-spacing-medium); + padding-left: var(--sl-spacing-medium); + padding-right: var(--sl-spacing-medium); + } + + .tabs { + flex-grow: 1; + } + + .actions { + display: flex; + flex-flow: column nowrap; + flex-grow: 0; + gap: var(--sl-spacing-x-small); + margin-top: calc( + 1rem * var(--sl-line-height-dense) + 3 * var(--sl-spacing-medium) + ); + } + + .actions sl-button-group > sl-button { + flex-grow: 1; + } + + sl-tab::part(base) { + padding: var(--sl-spacing-medium); + } + + sl-select::part(listbox) { + min-width: max-content; + } + + sl-tab-panel { + --padding: 0; + overflow-y: scroll; + padding-top: var(--sl-spacing-medium); + padding-bottom: var(--sl-spacing-medium); + height: calc( + 100vh - 1rem * var(--sl-line-height-dense) - 2 * var(--sl-spacing-medium) + ); + } + + sl-input, + sl-select { + min-width: 13rem; + max-width: 13rem; + } + + sl-checkbox { + padding-bottom: var(--sl-spacing-2x-small); + } + + .col { + display: flex; + flex-direction: column; + gap: var(--sl-spacing-x-small); + } + + .row { + display: flex; + flex-direction: row; + gap: var(--sl-spacing-x-small); + align-items: flex-end; + } +`; + export const vscodeStyles = css` .dropdown-container { box-sizing: border-box;