@compas-oscd/open-scd 0.34.16 → 0.34.18

package/dist/openscd/src/themes.js

@@ -0,0 +1,122 @@
+import { html } from 'lit-element';
+export function getTheme(theme) {
+    document.body.style.cssText = bodyStyles[theme];
+    return html `
+    ${themes[theme]}
+    <style>
+      * {
+        --primary: var(--cyan);
+        --secondary: var(--violet);
+        --mdc-theme-primary: var(--primary);
+        --mdc-theme-secondary: var(--secondary);
+        --mdc-theme-background: var(--base3);
+        --mdc-theme-surface: var(--base3);
+        --mdc-theme-on-primary: var(--base2);
+        --mdc-theme-on-secondary: var(--base2);
+        --mdc-theme-on-background: var(--base00);
+        --mdc-theme-on-surface: var(--base00);
+        --mdc-theme-text-primary-on-background: var(--base01);
+        --mdc-theme-text-secondary-on-background: var(--base00);
+        --mdc-theme-text-icon-on-background: var(--base00);
+        --mdc-theme-error: var(--red);
+
+        --mdc-button-disabled-ink-color: var(--base1);
+
+        --mdc-drawer-heading-ink-color: var(--base00);
+
+        --mdc-text-field-fill-color: var(--base2);
+        --mdc-text-field-disabled-fill-color: var(--base3);
+        --mdc-text-field-ink-color: var(--base00);
+        --mdc-text-field-label-ink-color: var(--base00);
+
+        --mdc-select-fill-color: var(--base2);
+        --mdc-select-disabled-fill-color: var(--base3);
+        --mdc-select-ink-color: var(--base00);
+
+        --mdc-dialog-heading-ink-color: var(--base00);
+
+        --mdc-icon-font: 'Material Icons Outlined';
+
+        --oscd-primary: var(--oscd-theme-primary, var(--cyan));
+        --oscd-secondary: var(--oscd-theme-secondary, var(--violet));
+        --oscd-error: var(--oscd-theme-error, var(--red));
+
+        --oscd-base03: var(--oscd-theme-base03, var(--base03));
+        --oscd-base02: var(--oscd-theme-base02, var(--base02));
+        --oscd-base01: var(--oscd-theme-base01, var(--base01));
+        --oscd-base00: var(--oscd-theme-base00, var(--base00));
+        --oscd-base0: var(--oscd-theme-base0, var(--base0));
+        --oscd-base1: var(--oscd-theme-base1, var(--base1));
+        --oscd-base2: var(--oscd-theme-base2, var(--base2));
+        --oscd-base3: var(--oscd-theme-base3, var(--base3));
+
+        --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');
+        --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Icons');
+      }
+
+      .mdc-drawer span.mdc-drawer__title {
+        color: var(--mdc-theme-text-primary-on-background) !important;
+      }
+
+      abbr {
+        text-decoration: none;
+        border-bottom: none;
+      }
+
+      mwc-textfield[iconTrailing='search'] {
+        --mdc-shape-small: 28px;
+      }
+    </style>
+  `;
+}
+const bodyStyles = {
+    dark: 'background: #073642',
+    light: 'background: #eee8d5',
+};
+const themes = {
+    light: html `
+    <style>
+      * {
+        --base03: #002b36;
+        --base02: #073642;
+        --base01: #586e75;
+        --base00: #657b83;
+        --base0: #839496;
+        --base1: #93a1a1;
+        --base2: #eee8d5;
+        --base3: #fdf6e3;
+        --yellow: #b58900;
+        --orange: #cb4b16;
+        --red: #dc322f;
+        --magenta: #d33682;
+        --violet: #6c71c4;
+        --blue: #268bd2;
+        --cyan: #2aa198;
+        --green: #859900;
+      }
+    </style>
+  `,
+    dark: html `
+    <style>
+      * {
+        --base03: #fdf6e3;
+        --base02: #eee8d5;
+        --base01: #93a1a1;
+        --base00: #839496;
+        --base0: #657b83;
+        --base1: #586e75;
+        --base2: #073642;
+        --base3: #002b36;
+        --yellow: #b58900;
+        --orange: #cb4b16;
+        --red: #dc322f;
+        --magenta: #d33682;
+        --violet: #6c71c4;
+        --blue: #268bd2;
+        --cyan: #2aa198;
+        --green: #859900;
+      }
+    </style>
+  `,
+};
+//# sourceMappingURL=themes.js.map

package/dist/openscd/src/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../src/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAGnD,MAAM,UAAU,QAAQ,CAAC,KAAwB;IAC/C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,IAAI,CAAA;MACP,MAAM,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEhB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAsC;IACpD,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,MAAM,GAA8C;IACxD,KAAK,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBV;IACD,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBT;CACF,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit-element';\nimport { Settings } from '@openscd/core/foundation/deprecated/settings.js';\n\nexport function getTheme(theme: Settings['theme']): TemplateResult {\n  document.body.style.cssText = bodyStyles[theme];\n  return html`\n    ${themes[theme]}\n    <style>\n      * {\n        --primary: var(--cyan);\n        --secondary: var(--violet);\n        --mdc-theme-primary: var(--primary);\n        --mdc-theme-secondary: var(--secondary);\n        --mdc-theme-background: var(--base3);\n        --mdc-theme-surface: var(--base3);\n        --mdc-theme-on-primary: var(--base2);\n        --mdc-theme-on-secondary: var(--base2);\n        --mdc-theme-on-background: var(--base00);\n        --mdc-theme-on-surface: var(--base00);\n        --mdc-theme-text-primary-on-background: var(--base01);\n        --mdc-theme-text-secondary-on-background: var(--base00);\n        --mdc-theme-text-icon-on-background: var(--base00);\n        --mdc-theme-error: var(--red);\n\n        --mdc-button-disabled-ink-color: var(--base1);\n\n        --mdc-drawer-heading-ink-color: var(--base00);\n\n        --mdc-text-field-fill-color: var(--base2);\n        --mdc-text-field-disabled-fill-color: var(--base3);\n        --mdc-text-field-ink-color: var(--base00);\n        --mdc-text-field-label-ink-color: var(--base00);\n\n        --mdc-select-fill-color: var(--base2);\n        --mdc-select-disabled-fill-color: var(--base3);\n        --mdc-select-ink-color: var(--base00);\n\n        --mdc-dialog-heading-ink-color: var(--base00);\n\n        --mdc-icon-font: 'Material Icons Outlined';\n\n        --oscd-primary: var(--oscd-theme-primary, var(--cyan));\n        --oscd-secondary: var(--oscd-theme-secondary, var(--violet));\n        --oscd-error: var(--oscd-theme-error, var(--red));\n\n        --oscd-base03: var(--oscd-theme-base03, var(--base03));\n        --oscd-base02: var(--oscd-theme-base02, var(--base02));\n        --oscd-base01: var(--oscd-theme-base01, var(--base01));\n        --oscd-base00: var(--oscd-theme-base00, var(--base00));\n        --oscd-base0: var(--oscd-theme-base0, var(--base0));\n        --oscd-base1: var(--oscd-theme-base1, var(--base1));\n        --oscd-base2: var(--oscd-theme-base2, var(--base2));\n        --oscd-base3: var(--oscd-theme-base3, var(--base3));\n\n        --oscd-text-font: var(--oscd-theme-text-font, 'Roboto');\n        --oscd-icon-font: var(--oscd-theme-icon-font, 'Material Icons');\n      }\n\n      .mdc-drawer span.mdc-drawer__title {\n        color: var(--mdc-theme-text-primary-on-background) !important;\n      }\n\n      abbr {\n        text-decoration: none;\n        border-bottom: none;\n      }\n\n      mwc-textfield[iconTrailing='search'] {\n        --mdc-shape-small: 28px;\n      }\n    </style>\n  `;\n}\n\nconst bodyStyles: Record<Settings['theme'], string> = {\n  dark: 'background: #073642',\n  light: 'background: #eee8d5',\n};\n\nconst themes: Record<Settings['theme'], TemplateResult> = {\n  light: html`\n    <style>\n      * {\n        --base03: #002b36;\n        --base02: #073642;\n        --base01: #586e75;\n        --base00: #657b83;\n        --base0: #839496;\n        --base1: #93a1a1;\n        --base2: #eee8d5;\n        --base3: #fdf6e3;\n        --yellow: #b58900;\n        --orange: #cb4b16;\n        --red: #dc322f;\n        --magenta: #d33682;\n        --violet: #6c71c4;\n        --blue: #268bd2;\n        --cyan: #2aa198;\n        --green: #859900;\n      }\n    </style>\n  `,\n  dark: html`\n    <style>\n      * {\n        --base03: #fdf6e3;\n        --base02: #eee8d5;\n        --base01: #93a1a1;\n        --base00: #839496;\n        --base0: #657b83;\n        --base1: #586e75;\n        --base2: #073642;\n        --base3: #002b36;\n        --yellow: #b58900;\n        --orange: #cb4b16;\n        --red: #dc322f;\n        --magenta: #d33682;\n        --violet: #6c71c4;\n        --blue: #268bd2;\n        --cyan: #2aa198;\n        --green: #859900;\n      }\n    </style>\n  `,\n};\n"]}