diff --git a/demo/colors.css b/demo/colors.css new file mode 100644 index 0000000..d4ff359 --- /dev/null +++ b/demo/colors.css @@ -0,0 +1,56 @@ +* { + --french-blue-15: #0b335b; + --french-blue-55: #2485e5; + + --omicron-yellow: #f5e214; + + --slate-0: #121417; /* L* ≈ 7% */ + --slate-5: #1a1e23; /* L* ≈ 10% */ + --slate-10: #23282f; /* L* ≈ 14% */ + --slate-15: #2c323a; /* L* ≈ 18% */ + --slate-20: #363d47; /* L* ≈ 22% */ + --slate-25: #3d4651; /* L* ≈ 26% */ + --slate-30: #46505d; /* L* ≈ 30% */ + --slate-35: #4f5a69; /* L* ≈ 34% */ + --slate-40: #586474; /* L* ≈ 38% */ + --slate-45: #606e80; /* L* ≈ 42% */ + --slate-50: #69788c; /* L* ≈ 46% */ + --slate-55: #738296; /* L* ≈ 50% */ + --slate-60: #7f8c9f; /* L* ≈ 54% */ + --slate-65: #8b97a7; /* L* ≈ 58% */ + --slate-70: #96a1b0; /* L* ≈ 62% */ + --slate-75: #a2abb9; /* L* ≈ 66% */ + --slate-80: #aeb6c2; /* L* ≈ 70% */ + --slate-85: #b9c0ca; /* L* ≈ 74% */ + --slate-90: #c5cbd3; /* L* ≈ 78% */ + --slate-95: #d0d5dc; /* L* ≈ 82% */ + --slate-100: #dce0e5; /* L* ≈ 86% */ + --slate-105: #e8eaed; /* L* ≈ 90% */ + --slate-110: #f3f5f6; /* L* ≈ 94% */ + /* --slate-white: #FFF; L* ≈ 100% */ + + --coal-0: #0a0a0a; /* L* ≈ 4% */ + --coal-5: #141414; /* L* ≈ 8% */ + --coal-10: #1f1f1f; /* L* ≈ 12% */ + --coal-15: #292929; /* L* ≈ 16% */ + --coal-20: #333333; /* L* ≈ 20% */ + --coal-25: #3d3d3d; /* L* ≈ 24% */ + --coal-30: #474747; /* L* ≈ 28% */ + --coal-35: #525252; /* L* ≈ 32% */ + --coal-40: #5c5c5c; /* L* ≈ 36% */ + --coal-45: #666666; /* L* ≈ 40% */ + --coal-50: #707070; /* L* ≈ 44% */ + --coal-55: #7a7a7a; /* L* ≈ 48% */ + --coal-60: #858585; /* L* ≈ 52% */ + --coal-65: #8f8f8f; /* L* ≈ 56% */ + --coal-70: #999999; /* L* ≈ 60% */ + --coal-75: #a3a3a3; /* L* ≈ 64% */ + --coal-80: #adadad; /* L* ≈ 68% */ + --coal-85: #b8b8b8; /* L* ≈ 72% */ + --coal-90: #c2c2c2; /* L* ≈ 76% */ + --coal-95: #cccccc; /* L* ≈ 80% */ + --coal-100: #d6d6d6; /* L* ≈ 84% */ + --coal-105: #e0e0e0; /* L* ≈ 88% */ + --coal-110: #ebebeb; /* L* ≈ 92% */ + /* --coal-white: #FFF; L* ≈ 100% */ +} diff --git a/demo/index.html b/demo/index.html index e3e6018..d7b2af7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,6 +10,8 @@ rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Symbols+Outlined&display=block" /> + + @@ -20,32 +22,5 @@ await import('../dist/oscd-shell.js'); await import('./index.js'); - - diff --git a/demo/index.js b/demo/index.js index ea302f8..e2636d9 100644 --- a/demo/index.js +++ b/demo/index.js @@ -8,6 +8,7 @@ import { OscdMenuNew, } from '@omicronenergy/oscd-menu-commons'; import OscdBackgroundEditV1 from '@omicronenergy/oscd-background-editv1'; +import OscdEditorSource from '@omicronenergy/oscd-editor-source'; const plugins = { menu: [ @@ -63,14 +64,11 @@ const plugins = { }, { - name: 'Engineering Workflows', - translations: { - de: 'Engineering-Workflows', - }, - icon: 'automation', - active: true, + name: 'Source Editor', + translations: { de: 'Source Editor' }, + icon: 'code', requireDoc: true, - src: 'https://ase-compas.github.io/compas-transnetbw-plugins/bearingpoint/compas/plugins/engineering-wizard/index.js', + tagName: 'oscd-editor-source', }, ], background: [ @@ -97,6 +95,7 @@ registry.define('oscd-menu-new', OscdMenuNew); registry.define('oscd-menu-file-rename', OscdMenuFileRename); registry.define('oscd-menu-file-close', OscdMenuFileClose); registry.define('oscd-background-editv1', OscdBackgroundEditV1); +registry.define('oscd-editor-source', OscdEditorSource); oscdShell.plugins = plugins; diff --git a/demo/theming.css b/demo/theming.css new file mode 100644 index 0000000..3434f75 --- /dev/null +++ b/demo/theming.css @@ -0,0 +1,37 @@ +* { + --oscd-theme-primary: var(--french-blue-15); + --oscd-theme-secondary: var(--french-blue-55); + --oscd-theme-base03: var(--slate-0); + --oscd-theme-base02: var(--slate-5); + --oscd-theme-base01: var(--slate-25); + --oscd-theme-base00: var(--slate-30); + --oscd-theme-base0: var(--slate-65); + --oscd-theme-base1: var(--slate-70); + --oscd-theme-base2: var(--slate-110); + --oscd-theme-base3: white; + --oscd-theme-error: #dc322f; + --oscd-theme-text-font: 'Roboto'; + --oscd-theme-icon-font: 'Material Symbols Outlined'; + --oscd-theme-text-font-mono: 'Roboto Mono'; + --oscd-theme-warning: #b58900; + + margin: 0px; + padding: 0px; +} + +abbr { + text-decoration: none; + border-bottom: none; +} + +html, +body { + height: 100%; + width: 100%; + margin: 0; +} + +body { + background: url('./background.svg') no-repeat center center fixed; + background-size: cover; +} diff --git a/package-lock.json b/package-lock.json index dc27b4e..e68b78b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@lit/localize": "^0.12.2", "@omicronenergy/oscd-background-editv1": "^0.0.6", "@omicronenergy/oscd-editor": "^1.7.1", + "@omicronenergy/oscd-editor-source": "^0.0.1", "@omicronenergy/oscd-menu-commons": "^0.0.1", "@omicronenergy/oscd-menu-open": "^0.0.6", "@omicronenergy/oscd-menu-save": "^0.0.2", @@ -1312,6 +1313,47 @@ "@openscd/oscd-api": "^0.1.6" } }, + "node_modules/@omicronenergy/oscd-editor-source": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@omicronenergy/oscd-editor-source/-/oscd-editor-source-0.0.1.tgz", + "integrity": "sha512-z1hDJhCjbcqTAll4VWNQlbmcYEQP1OPjma2aopi1tKy8Er38SR1OjqYLZyOtgq9Q6zrOXlkpTkiRxswrK+SJJA==", + "license": "Apache-2.0", + "dependencies": { + "@omicronenergy/oscd-api": "^0.1.3", + "@omicronenergy/oscd-background-editv1": "^0.0.6", + "@omicronenergy/oscd-menu-open": "^0.0.6", + "@omicronenergy/oscd-menu-save": "^0.0.2", + "@omicronenergy/oscd-shell": "^0.0.10", + "@omicronenergy/oscd-ui": "^0.0.9", + "@open-wc/scoped-elements": "^3.0.6", + "@webcomponents/scoped-custom-element-registry": "^0.0.10", + "ace-builds": "^1.43.5", + "ace-custom-element": "^1.6.5", + "lit": "^3.3.2", + "tslib": "^2.8.1" + } + }, + "node_modules/@omicronenergy/oscd-editor-source/node_modules/@omicronenergy/oscd-shell": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/@omicronenergy/oscd-shell/-/oscd-shell-0.0.10.tgz", + "integrity": "sha512-DZb6iWd9OPC7qXutl3zJHhOl8nYzuaoVD/v515uDtfQTttUKQV82xb94Ma9zhWo/RIOulvZSdU2Wwq4j7iCs9A==", + "license": "Apache-2.0", + "dependencies": { + "@lit/localize": "^0.12.2", + "@omicronenergy/oscd-background-editv1": "^0.0.6", + "@omicronenergy/oscd-editor": "^1.7.1", + "@omicronenergy/oscd-menu-commons": "^0.0.1", + "@omicronenergy/oscd-menu-open": "^0.0.6", + "@omicronenergy/oscd-menu-save": "^0.0.2", + "@omicronenergy/oscd-test-utils": "^0.0.8", + "@omicronenergy/oscd-ui": "^0.0.9", + "@open-wc/scoped-elements": "^3.0.6", + "@openscd/oscd-api": "^0.1.6", + "@webcomponents/scoped-custom-element-registry": "^0.0.10", + "lit": "^3.3.1", + "tslib": "^2.8.1" + } + }, "node_modules/@omicronenergy/oscd-material-web-base": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@omicronenergy/oscd-material-web-base/-/oscd-material-web-base-2.4.0.tgz", @@ -4073,6 +4115,18 @@ "node": ">= 0.6" } }, + "node_modules/ace-builds": { + "version": "1.43.5", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.43.5.tgz", + "integrity": "sha512-iH5FLBKdB7SVn9GR37UgA/tpQS8OTWIxWAuq3Ofaw+Qbc69FfPXsXd9jeW7KRG2xKpKMqBDnu0tHBrCWY5QI7A==", + "license": "BSD-3-Clause" + }, + "node_modules/ace-custom-element": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/ace-custom-element/-/ace-custom-element-1.6.5.tgz", + "integrity": "sha512-xU/9r94WKwjwEOjdfs6oVk2Dqc6X63eF2ECvKIMm/JCK1PDbXXdBYi5sQx110tR2sY4f96iXxyvscfT9qeI1RQ==", + "license": "Apache-2.0" + }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -8732,9 +8786,9 @@ } }, "node_modules/lit": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz", - "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz", + "integrity": "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==", "license": "BSD-3-Clause", "dependencies": { "@lit/reactive-element": "^2.1.0", diff --git a/package.json b/package.json index 8ab2e94..824d8dd 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@lit/localize": "^0.12.2", "@omicronenergy/oscd-background-editv1": "^0.0.6", "@omicronenergy/oscd-editor": "^1.7.1", + "@omicronenergy/oscd-editor-source": "^0.0.1", "@omicronenergy/oscd-menu-commons": "^0.0.1", "@omicronenergy/oscd-menu-open": "^0.0.6", "@omicronenergy/oscd-menu-save": "^0.0.2", diff --git a/screenshots/Chromium/baseline/app-bar-de.png b/screenshots/Chromium/baseline/app-bar-de.png index 846e896..b9e26f1 100644 Binary files a/screenshots/Chromium/baseline/app-bar-de.png and b/screenshots/Chromium/baseline/app-bar-de.png differ diff --git a/screenshots/Chromium/baseline/app-bar-en.png b/screenshots/Chromium/baseline/app-bar-en.png index 846e896..b9e26f1 100644 Binary files a/screenshots/Chromium/baseline/app-bar-en.png and b/screenshots/Chromium/baseline/app-bar-en.png differ diff --git a/screenshots/Chromium/baseline/document-name-de.png b/screenshots/Chromium/baseline/document-name-de.png index 846e896..b9e26f1 100644 Binary files a/screenshots/Chromium/baseline/document-name-de.png and b/screenshots/Chromium/baseline/document-name-de.png differ diff --git a/screenshots/Chromium/baseline/document-name-en.png b/screenshots/Chromium/baseline/document-name-en.png index 846e896..b9e26f1 100644 Binary files a/screenshots/Chromium/baseline/document-name-en.png and b/screenshots/Chromium/baseline/document-name-en.png differ diff --git a/screenshots/Chromium/baseline/editor-plugins-de.png b/screenshots/Chromium/baseline/editor-plugins-de.png index 7c052b9..63f24f3 100644 Binary files a/screenshots/Chromium/baseline/editor-plugins-de.png and b/screenshots/Chromium/baseline/editor-plugins-de.png differ diff --git a/screenshots/Chromium/baseline/editor-plugins-en.png b/screenshots/Chromium/baseline/editor-plugins-en.png index 9ecc2c6..85fea74 100644 Binary files a/screenshots/Chromium/baseline/editor-plugins-en.png and b/screenshots/Chromium/baseline/editor-plugins-en.png differ diff --git a/screenshots/Chromium/baseline/editor-plugins-selected-de.png b/screenshots/Chromium/baseline/editor-plugins-selected-de.png index 86e2d63..f748869 100644 Binary files a/screenshots/Chromium/baseline/editor-plugins-selected-de.png and b/screenshots/Chromium/baseline/editor-plugins-selected-de.png differ diff --git a/screenshots/Chromium/baseline/editor-plugins-selected-en.png b/screenshots/Chromium/baseline/editor-plugins-selected-en.png index 844a092..63dfd03 100644 Binary files a/screenshots/Chromium/baseline/editor-plugins-selected-en.png and b/screenshots/Chromium/baseline/editor-plugins-selected-en.png differ diff --git a/screenshots/Chromium/baseline/landing-page-de.png b/screenshots/Chromium/baseline/landing-page-de.png index 0582d32..d1fd5c3 100644 Binary files a/screenshots/Chromium/baseline/landing-page-de.png and b/screenshots/Chromium/baseline/landing-page-de.png differ diff --git a/screenshots/Chromium/baseline/landing-page-en.png b/screenshots/Chromium/baseline/landing-page-en.png index 0582d32..d1fd5c3 100644 Binary files a/screenshots/Chromium/baseline/landing-page-en.png and b/screenshots/Chromium/baseline/landing-page-en.png differ diff --git a/screenshots/Chromium/baseline/menu-drawer-de.png b/screenshots/Chromium/baseline/menu-drawer-de.png index de929a5..9491a3d 100644 Binary files a/screenshots/Chromium/baseline/menu-drawer-de.png and b/screenshots/Chromium/baseline/menu-drawer-de.png differ diff --git a/screenshots/Chromium/baseline/menu-drawer-en.png b/screenshots/Chromium/baseline/menu-drawer-en.png index de929a5..9491a3d 100644 Binary files a/screenshots/Chromium/baseline/menu-drawer-en.png and b/screenshots/Chromium/baseline/menu-drawer-en.png differ diff --git a/screenshots/Chromium/baseline/menu-plugins-de.png b/screenshots/Chromium/baseline/menu-plugins-de.png index 2ced8ba..477e761 100644 Binary files a/screenshots/Chromium/baseline/menu-plugins-de.png and b/screenshots/Chromium/baseline/menu-plugins-de.png differ diff --git a/screenshots/Chromium/baseline/menu-plugins-en.png b/screenshots/Chromium/baseline/menu-plugins-en.png index 17fc8cd..5bfc3fe 100644 Binary files a/screenshots/Chromium/baseline/menu-plugins-en.png and b/screenshots/Chromium/baseline/menu-plugins-en.png differ diff --git a/screenshots/Chromium/baseline/menu-plugins-triggered-de.png b/screenshots/Chromium/baseline/menu-plugins-triggered-de.png index 2ced8ba..477e761 100644 Binary files a/screenshots/Chromium/baseline/menu-plugins-triggered-de.png and b/screenshots/Chromium/baseline/menu-plugins-triggered-de.png differ diff --git a/screenshots/Chromium/baseline/menu-plugins-triggered-en.png b/screenshots/Chromium/baseline/menu-plugins-triggered-en.png index 17fc8cd..5bfc3fe 100644 Binary files a/screenshots/Chromium/baseline/menu-plugins-triggered-en.png and b/screenshots/Chromium/baseline/menu-plugins-triggered-en.png differ diff --git a/src/colors.ts b/src/colors.ts deleted file mode 100644 index f3185ec..0000000 --- a/src/colors.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { css } from 'lit'; - -export const colors = css` - * { - --french-blue-15: #0b335b; - --french-blue-55: #2485e5; - - --omicron-yellow: #f5e214; - - --slate-0: #121417; /* L* ≈ 7% */ - --slate-5: #1a1e23; /* L* ≈ 10% */ - --slate-10: #23282f; /* L* ≈ 14% */ - --slate-15: #2c323a; /* L* ≈ 18% */ - --slate-20: #363d47; /* L* ≈ 22% */ - --slate-25: #3d4651; /* L* ≈ 26% */ - --slate-30: #46505d; /* L* ≈ 30% */ - --slate-35: #4f5a69; /* L* ≈ 34% */ - --slate-40: #586474; /* L* ≈ 38% */ - --slate-45: #606e80; /* L* ≈ 42% */ - --slate-50: #69788c; /* L* ≈ 46% */ - --slate-55: #738296; /* L* ≈ 50% */ - --slate-60: #7f8c9f; /* L* ≈ 54% */ - --slate-65: #8b97a7; /* L* ≈ 58% */ - --slate-70: #96a1b0; /* L* ≈ 62% */ - --slate-75: #a2abb9; /* L* ≈ 66% */ - --slate-80: #aeb6c2; /* L* ≈ 70% */ - --slate-85: #b9c0ca; /* L* ≈ 74% */ - --slate-90: #c5cbd3; /* L* ≈ 78% */ - --slate-95: #d0d5dc; /* L* ≈ 82% */ - --slate-100: #dce0e5; /* L* ≈ 86% */ - --slate-105: #e8eaed; /* L* ≈ 90% */ - --slate-110: #f3f5f6; /* L* ≈ 94% */ - /* --slate-white: #FFF; L* ≈ 100% */ - - --coal-0: #0a0a0a; /* L* ≈ 4% */ - --coal-5: #141414; /* L* ≈ 8% */ - --coal-10: #1f1f1f; /* L* ≈ 12% */ - --coal-15: #292929; /* L* ≈ 16% */ - --coal-20: #333333; /* L* ≈ 20% */ - --coal-25: #3d3d3d; /* L* ≈ 24% */ - --coal-30: #474747; /* L* ≈ 28% */ - --coal-35: #525252; /* L* ≈ 32% */ - --coal-40: #5c5c5c; /* L* ≈ 36% */ - --coal-45: #666666; /* L* ≈ 40% */ - --coal-50: #707070; /* L* ≈ 44% */ - --coal-55: #7a7a7a; /* L* ≈ 48% */ - --coal-60: #858585; /* L* ≈ 52% */ - --coal-65: #8f8f8f; /* L* ≈ 56% */ - --coal-70: #999999; /* L* ≈ 60% */ - --coal-75: #a3a3a3; /* L* ≈ 64% */ - --coal-80: #adadad; /* L* ≈ 68% */ - --coal-85: #b8b8b8; /* L* ≈ 72% */ - --coal-90: #c2c2c2; /* L* ≈ 76% */ - --coal-95: #cccccc; /* L* ≈ 80% */ - --coal-100: #d6d6d6; /* L* ≈ 84% */ - --coal-105: #e0e0e0; /* L* ≈ 88% */ - --coal-110: #ebebeb; /* L* ≈ 92% */ - /* --coal-white: #FFF; L* ≈ 100% */ - } -`; diff --git a/src/oscd-shell.ts b/src/oscd-shell.ts index b1380e2..8154123 100644 --- a/src/oscd-shell.ts +++ b/src/oscd-shell.ts @@ -21,7 +21,6 @@ import { setLocale, Translations, } from './localization.js'; -import { theming } from './theming.js'; import { EditorPluginsPanel } from './side-panel/editor-plugins-panel.js'; import { PluginsMenu } from './menus/plugins-menu.js'; import { LandingPage } from './landing-page/landing-page.js'; @@ -484,11 +483,94 @@ export class OscdShell extends ScopedElementsMixin(LitElement) { } static styles = css` - ${theming} + /* Theme variables with default values */ + * { + --oscd-primary: var(--oscd-theme-primary, #0b335b); + --oscd-secondary: var(--oscd-theme-secondary, #2485e5); + --oscd-base03: var(--oscd-theme-base03, #121417); + --oscd-base02: var(--oscd-theme-base02, #1a1e23); + --oscd-base01: var(--oscd-theme-base01, #3d4651); + --oscd-base00: var(--oscd-theme-base00, #46505d); + --oscd-base0: var(--oscd-theme-base0, #8b97a7); + --oscd-base1: var(--oscd-theme-base1, #96a1b0); + --oscd-base2: var(--oscd-theme-base2, #f3f5f6); + --oscd-base3: var(--oscd-theme-base3, white); + --oscd-error: var(--oscd-theme-error, #dc322f); + --oscd-warning: var(--oscd-theme-warning, #b58900); + --oscd-text-font: var(--oscd-theme-text-font, 'Roboto'); + --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono'); + --oscd-icon-font: var( + --oscd-theme-icon-font, + 'Material Symbols Outlined' + ); + + /* Fallbacks for Material Design variables */ + --md-sys-color-primary: var(--oscd-primary); + --md-sys-color-on-primary: var(--oscd-base3); + --md-sys-color-secondary: var(--oscd-secondary); + --md-sys-color-on-secondary: var(--oscd-base3); + --md-sys-color-secondary-container: var(--oscd-base2); + --md-sys-color-surface: var(--oscd-base3); + --md-sys-color-on-surface: var(--oscd-base00); + --md-sys-color-surface-variant: var(--oscd-base3); + --md-sys-color-on-surface-variant: var(--oscd-base00); + --md-sys-color-surface-bright: var(--oscd-base2); + --md-sys-color-surface-container: var(--oscd-base3); + --md-sys-color-surface-container-high: var(--oscd-base3); + --md-sys-color-surface-container-highest: var(--oscd-base3); + --md-sys-color-outline-variant: var(--oscd-primary); + --md-sys-color-scrim: #000000; + --md-sys-color-error: var(--oscd-error); + --md-sys-color-on-error: var(--oscd-base3); + --md-icon-button-disabled-icon-color: var(--oscd-base3); + /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */ + --md-icon-button-disabled-icon-color: var(--oscd-base3); + + /* MDC Theme Colors + * Needed for supporting any pluggins still using the depricated MWC Components + */ + --mdc-theme-primary: var(--oscd-primary); + --mdc-theme-secondary: var(--oscd-secondary); + --mdc-theme-background: var(--oscd-base3); + --mdc-theme-surface: var(--oscd-base3); + --mdc-theme-on-primary: var(--oscd-base2); + --mdc-theme-on-secondary: var(--oscd-base3); + --mdc-theme-on-background: var(--oscd-base00); + --mdc-theme-on-surface: var(--oscd-base00); + --mdc-theme-text-primary-on-background: var(--oscd-base01); + --mdc-theme-text-secondary-on-background: var(--oscd-base3); + --mdc-theme-text-icon-on-background: var(--oscd-base3); + --mdc-theme-error: var(--oscd-error); + --mdc-button-disabled-ink-color: var(--oscd-base1); + --mdc-drawer-heading-ink-color: var(--oscd-base00); + --mdc-dialog-heading-ink-color: var(--oscd-base00); + --mdc-text-field-fill-color: var(--oscd-base2); + --mdc-text-field-ink-color: var(--oscd-base02); + --mdc-text-field-label-ink-color: var(--oscd-base01); + --mdc-text-field-idle-line-color: var(--oscd-base00); + --mdc-text-field-hover-line-color: var(--oscd-base02); + --mdc-select-fill-color: var(--oscd-base2); + --mdc-select-ink-color: var(--oscd-base02); + --mdc-select-label-ink-color: var(--oscd-base01); + --mdc-select-idle-line-color: var(--oscd-base00); + --mdc-select-hover-line-color: var(--oscd-base02); + --mdc-select-dropdown-icon-color: var(--oscd-base01); + --mdc-typography-font-family: var(--oscd-text-font); + --mdc-icon-font: var(--oscd-icon-font); + --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38); + } * { --app-bar-height: 54px; --side-panel-width: 280px; + + --md-sys-color-primary: var(--oscd-primary); + --md-sys-color-on-primary: var(--oscd-base3); + + --md-sys-color-secondary-container: var(--oscd-base2); + + --md-sys-color-surface: var(--oscd-base3); + --md-sys-color-on-surface: var(--oscd-base00); } :host { @@ -534,7 +616,7 @@ export class OscdShell extends ScopedElementsMixin(LitElement) { section.editor-container { grid-area: editor; - background-color: var(--slate-100); + background-color: var(--oscd-base3); padding: 8px; overflow: auto; position: relative; diff --git a/src/theming.ts b/src/theming.ts deleted file mode 100644 index f8b5c56..0000000 --- a/src/theming.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { css } from 'lit'; -import { colors } from './colors.js'; - -export const theming = css` - ${colors} - * { - --oscd-primary: var(--oscd-theme-primary, var(--french-blue-15)); - --oscd-secondary: var(--oscd-theme-secondary, var(--french-blue-55)); - --secondary: var(--oscd-secondary); - --oscd-theme-error: var(--oscd-theme-error, #dc322f); - --oscd-base03: var(--oscd-theme-base03, var(--slate-0)); - --oscd-base02: var(--oscd-theme-base02, var(--slate-5)); - --oscd-base01: var(--oscd-theme-base01, var(--slate-25)); - --oscd-base00: var(--oscd-theme-base00, var(--slate-30)); - --oscd-base0: var(--oscd-theme-base0, var(--slate-65)); - --oscd-base1: var(--oscd-theme-base1, var(--slate-70)); - --oscd-base2: var(--oscd-theme-base2, var(--slate-110)); - --oscd-base3: var(--oscd-theme-base3, white); - --oscd-error: var(--oscd-theme-error, #dc322f); - --oscd-text-font: var(--oscd-theme-text-font, 'Roboto'); - --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Icons'); - --oscd-text-font-mono: var(--oscd-theme-text-font-mono, 'Roboto Mono'); - --oscd-warning: var(--oscd-theme-warning, #b58900); - --md-sys-color-primary: var(--oscd-primary); - --md-sys-color-on-primary: var(--oscd-base3); - --md-sys-color-secondary: var(--oscd-secondary); - --md-sys-color-on-secondary: var(--oscd-base3); - --md-sys-color-secondary-container: var(--oscd-base2); - --md-sys-color-surface: var(--oscd-base3); - --md-sys-color-on-surface: var(--oscd-base00); - --md-sys-color-surface-variant: var(--oscd-base3); - --md-sys-color-on-surface-variant: var(--oscd-base00); - --md-sys-color-surface-bright: var(--oscd-base2); - --md-sys-color-surface-container: var(--oscd-base3); - --md-sys-color-surface-container-high: var(--oscd-base3); - --md-sys-color-surface-container-highest: var(--oscd-base3); - --md-sys-color-outline-variant: var(--oscd-primary); - --md-sys-color-scrim: #000000; - --md-sys-color-error: var(--oscd-error); - --md-sys-color-on-error: var(--oscd-base3); - /* --md-menu-item-selected-label-text-color: var(--oscd-base01); */ - --md-icon-button-disabled-icon-color: var(--oscd-base3); - /* MDC Theme Colors - * Needed for supporting any pluggins still using the depricated MWC Components - */ - --mdc-theme-primary: var(--oscd-primary); - --mdc-theme-secondary: var(--oscd-secondary); - --mdc-theme-background: var(--oscd-base3); - --mdc-theme-surface: var(--oscd-base3); - --mdc-theme-on-primary: var(--oscd-base2); - --mdc-theme-on-secondary: var(--oscd-base3); - --mdc-theme-on-background: var(--oscd-base00); - --mdc-theme-on-surface: var(--oscd-base00); - --mdc-theme-text-primary-on-background: var(--oscd-base01); - --mdc-theme-text-secondary-on-background: var(--oscd-base3); - --mdc-theme-text-icon-on-background: var(--oscd-base3); - --mdc-theme-error: var(--oscd-error); - --mdc-button-disabled-ink-color: var(--oscd-base1); - --mdc-drawer-heading-ink-color: var(--oscd-base00); - --mdc-dialog-heading-ink-color: var(--oscd-base00); - --mdc-text-field-fill-color: var(--oscd-base2); - --mdc-text-field-ink-color: var(--oscd-base02); - --mdc-text-field-label-ink-color: var(--oscd-base01); - --mdc-text-field-idle-line-color: var(--oscd-base00); - --mdc-text-field-hover-line-color: var(--oscd-base02); - --mdc-select-fill-color: var(--oscd-base2); - --mdc-select-ink-color: var(--oscd-base02); - --mdc-select-label-ink-color: var(--oscd-base01); - --mdc-select-idle-line-color: var(--oscd-base00); - --mdc-select-hover-line-color: var(--oscd-base02); - --mdc-select-dropdown-icon-color: var(--oscd-base01); - --mdc-typography-font-family: var(--oscd-text-font); - --mdc-icon-font: var(--oscd-icon-font); - --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38); - } -`;