@api-client/ui 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/demo/elements/authorization/oauth-authorize.html +2 -2
  2. package/demo/pages/api-client/authenticate.html +1 -0
  3. package/demo/pages/api-client/config.html +1 -0
  4. package/demo/pages/api-client/main.html +1 -0
  5. package/demo/pages/api-client/telemetry.html +1 -0
  6. package/demo/pages/http-project/main.html +1 -0
  7. package/demo/pages/schema-design/main.html +1 -0
  8. package/dist/pages/ApplicationScreen.d.ts +0 -4
  9. package/dist/pages/ApplicationScreen.d.ts.map +1 -1
  10. package/dist/pages/ApplicationScreen.js +12 -18
  11. package/dist/pages/ApplicationScreen.js.map +1 -1
  12. package/package.json +1 -1
  13. package/src/pages/ApplicationScreen.ts +12 -19
  14. package/src/styles/m3/theme.css +81 -0
  15. package/web-test-runner.config.mjs +3 -5
  16. package/src/styles/m3/theme.dark.css +0 -40
  17. package/src/styles/m3/theme.light.css +0 -40
package/demo/elements/authorization/oauth-authorize.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en-GB">
2
+ <html lang="en-GB" class="theme-light">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
@@ -41,7 +41,7 @@
41
41
  </style>
42
42
  <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
43
43
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
44
- <link href="../../../src/styles/m3/theme.light.css" rel="stylesheet" type="text/css" />
44
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
45
45
  </head>
46
46
  <body>
47
47
  <section class="login">
package/demo/pages/api-client/authenticate.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app"></div>
package/demo/pages/api-client/config.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app">Loading store configuration...</div>
package/demo/pages/api-client/main.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app"></div>
package/demo/pages/api-client/telemetry.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app"></div>
package/demo/pages/http-project/main.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app"></div>
package/demo/pages/schema-design/main.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
11
11
 
12
12
  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
13
+ <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
13
14
  </head>
14
15
  <body>
15
16
  <div id="app"></div>
package/dist/pages/ApplicationScreen.d.ts CHANGED
@@ -89,10 +89,6 @@ export declare abstract class ApplicationScreen extends ApplicationScreen_base {
89
89
  * Detected system theme.
90
90
  */
91
91
  systemTheme: 'light' | 'dark';
92
- /**
93
- * The root location where theme files are located.
94
- */
95
- themesRoot: string;
96
92
  /**
97
93
  * The theme to use as selected by the user.
98
94
  * Default to system default.
package/dist/pages/ApplicationScreen.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ApplicationScreen.d.ts","sourceRoot":"","sources":["../../src/pages/ApplicationScreen.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ApplicationScreen.d.ts","sourceRoot":"","sources":["../../src/pages/ApplicationScreen.ts"],"names":[],"mappings":"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"}
package/dist/pages/ApplicationScreen.js CHANGED
@@ -78,10 +78,6 @@ export class ApplicationScreen extends RouteMixin(RenderableMixin(EventTarget))
78
78
  * Detected system theme.
79
79
  */
80
80
  systemTheme = 'light';
81
- /**
82
- * The root location where theme files are located.
83
- */
84
- themesRoot = '/src/styles/m3';
85
81
  /**
86
82
  * The theme to use as selected by the user.
87
83
  * Default to system default.
@@ -149,21 +145,19 @@ export class ApplicationScreen extends RouteMixin(RenderableMixin(EventTarget))
149
145
  this.activateTheme(theme);
150
146
  }
151
147
  activateTheme(type) {
152
- const file = `theme.${type}.css`;
153
- const existing = document.head.querySelector('[data-theme]');
154
- if (existing) {
155
- if (existing.href.includes(file)) {
156
- return;
157
- }
158
- existing.parentElement?.removeChild(existing);
148
+ const root = document.querySelector('html');
149
+ if (!root) {
150
+ return;
159
151
  }
160
- const link = document.createElement('link');
161
- const url = new URL(`${this.themesRoot}/${file}`, window.location.href);
162
- link.rel = 'stylesheet';
163
- link.type = 'text/css';
164
- link.href = url.toString();
165
- link.dataset.theme = 'true';
166
- document.head.appendChild(link);
152
+ const { classList } = root;
153
+ // clear all themes
154
+ classList.forEach((value) => {
155
+ if (value.startsWith('theme-')) {
156
+ classList.remove(value);
157
+ }
158
+ });
159
+ const name = `theme-${type}`;
160
+ classList.add(name);
167
161
  }
168
162
  async isPlatformSupported() {
169
163
  const result = await supportedPlatform();
package/dist/pages/ApplicationScreen.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ApplicationScreen.js","sourceRoot":"","sources":["../../src/pages/ApplicationScreen.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-extraneous-dependencies */\n/* eslint-disable class-methods-use-this */\nimport { html, TemplateResult } from 'lit';\nimport { IUser, Events as CoreEvents, IBackendInfo } from '@api-client/core/build/browser.js';\nimport { RenderableMixin } from '../mixins/RenderableMixin.js';\nimport { RouteMixin } from '../mixins/RouteMixin.js';\nimport { reactive } from '../lib/decorators.js';\nimport { Events } from '../events/Events.js';\nimport { EventTypes } from '../events/EventTypes.js';\nimport { ConfigBroadcast, ConfigBroadcastChannel, IConfigEnvironment, ThemeType } from '../lib/config/Config.js';\nimport supportedPlatform from '../lib/SupportedPlatform.js';\nimport { ButtonType } from '../ui/button/UiButton.js';\nimport '../define/ui/ui-button.js';\nimport { StoreBindings } from '../bindings/base/StoreBindings.js';\nimport type { AddConfigEnvironmentInit, ConfigurationBindings } from '../bindings/base/ConfigurationBindings.js';\nimport { PlatformBindings } from '../bindings/base/PlatformBindings.js';\nimport { SnackNotifications } from '../ui/notification/SnackNotifications.js';\n\nexport interface ApplicationInit {\n /**\n * A reference to the store bindings.\n */\n store: StoreBindings;\n /**\n * A reference to the config bindings.\n */\n config: ConfigurationBindings;\n}\n\ninterface ApplicationBindings {\n /**\n * A reference to the store bindings.\n */\n store: StoreBindings;\n /**\n * A reference to the config bindings.\n */\n config: ConfigurationBindings;\n [key: string]: PlatformBindings;\n}\n\n/**\n * A base class for pages build outside the LitElement. It uses `lit-html` \n * as the template renderer.\n * \n * The implementation (extending this class) should override the `pageTemplate()`\n * function that returns the `TemplateResult` from the `lit-html` library.\n * \n * To reflect the changed state call the `render()` function. The function schedules\n * a micro task (through `requestAnimationFrame`) to call the render function on the template.\n * \n * Use the `@reactive()` decorator from `src/lib/decorators.js` to mark a property as reactive,\n * meaning, when the property change it calls the `render()` function.\n */\nexport abstract class ApplicationScreen extends RouteMixin(RenderableMixin(EventTarget)) {\n @reactive() eventTarget: EventTarget = window;\n\n /** \n * True when the app should render mobile friendly view.\n */\n @reactive() isMobile = false;\n\n /** \n * The loading state information.\n */\n @reactive() loadingStatus = 'Initializing the application...';\n\n /**\n * A flag telling the application screen that the logic is initialized.\n * \n * The page can request different initialization logics. When the logic is\n * loaded the flag is set to true.\n */\n @reactive() initialized = false;\n\n /**\n * The page on the screen currently being rendered.\n */\n @reactive() page?: string;\n\n /**\n * The current user.\n * Call the `loadUser()` to populate this.\n */\n @reactive() user?: IUser;\n\n /**\n * True when the user meta is being loaded.\n */\n @reactive() protected loadingUser = false;\n \n @reactive() protected authenticated = false;\n\n /**\n * This is automatically set when initializing the store.\n * Basic information about the store.\n */\n protected storeInfo?: IBackendInfo;\n\n /**\n * Checks whether the store is in the single user mode.\n * It also returns true when the store info is not set (before the backend was initialized).\n */\n get isSingleUser(): boolean {\n const { storeInfo } = this;\n if (!storeInfo) {\n return true;\n }\n return storeInfo.mode === 'single-user';\n }\n\n protected pendingResolver?: (value: void | PromiseLike<void>) => void;\n\n /**\n * Detected system theme.\n */\n systemTheme: 'light' | 'dark' = 'light';\n\n /**\n * The root location where theme files are located.\n */\n themesRoot = '/src/styles/m3';\n\n /**\n * The theme to use as selected by the user.\n * Default to system default.\n */\n userTheme: ThemeType = 'default';\n\n /**\n * Application configuration broadcast channel.\n */\n configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);\n\n bindings: ApplicationBindings;\n\n /**\n * The store environment in use.\n * This is set after the `initializeStore()` was called.\n */\n env?: IConfigEnvironment;\n\n constructor(init: ApplicationInit) {\n super();\n this.bindings = {\n config: init.config,\n store: init.store,\n };\n window.onunhandledrejection = this.unhandledRejectionHandler.bind(this);\n this.initMediaQueries();\n this.initStoreChange();\n this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this))\n }\n\n /**\n * Called once when the page is being initialized.\n */\n abstract initialize(): Promise<void>;\n\n /**\n * Initializes configuration that is relevant to all application windows.\n */\n async initializeConfig(): Promise<void> {\n const { config } = this.bindings;\n const theme = await config.local.get('theme') as ThemeType | undefined;\n if (theme) {\n this.userTheme = theme;\n }\n this.themeActiveCallback();\n }\n\n /**\n * Initializes media queries and observers.\n */\n initMediaQueries(): void {\n const mql = window.matchMedia('(max-width: 600px)');\n this.isMobile = mql.matches;\n mql.addEventListener('change', (e) => {\n this.isMobile = e.matches;\n });\n\n const dark = window.matchMedia('(prefers-color-scheme: dark)');\n if (dark.matches) {\n this.systemTheme = 'dark';\n }\n dark.addEventListener('change', (e) => {\n this.systemTheme = e.matches ? 'dark' : 'light';\n this.themeActiveCallback();\n });\n }\n\n protected themeActiveCallback(): void {\n const { systemTheme, userTheme } = this;\n let theme: 'light' | 'dark';\n if (userTheme === 'default') {\n theme = systemTheme;\n } else {\n theme = userTheme;\n }\n this.activateTheme(theme);\n }\n\n protected activateTheme(type: 'light' | 'dark'): void {\n const file = `theme.${type}.css`;\n const existing = document.head.querySelector('[data-theme]') as HTMLLinkElement | null;\n if (existing) {\n if (existing.href.includes(file)) {\n return;\n }\n existing.parentElement?.removeChild(existing);\n }\n const link = document.createElement('link');\n const url = new URL(`${this.themesRoot}/${file}`, window.location.href);\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = url.toString();\n link.dataset.theme = 'true';\n document.head.appendChild(link);\n }\n\n async isPlatformSupported(): Promise<boolean> {\n const result = await supportedPlatform();\n if (!result) {\n this.page = 'unsupported-platform';\n }\n return result;\n }\n\n initStoreChange(): void {\n window.addEventListener(EventTypes.Config.Environment.State.defaultChange, (e: Event) => {\n const event = e as CustomEvent;\n const id = event.detail.id as string;\n this.storeChanged(id);\n });\n }\n\n /**\n * Override in a child class to implement a logic that runs when the default \n * store change in the configuration.\n * \n * @param id The id of the activated environment. When missing it means there's no default environment.\n */\n abstract storeChanged(id?: string): Promise<void>;\n\n /**\n * Creates a modal dialog with the error details.\n * @param message The message to render\n */\n reportCriticalError(message: string): void {\n try {\n const dialog = document.createElement('dialog');\n const form = document.createElement('form');\n const title = document.createElement('h2');\n const content = document.createElement('div');\n const messageContainer = document.createElement('p');\n const buttons = document.createElement('div');\n const button = document.createElement('ui-button');\n dialog.classList.add('error-dialog');\n form.method = 'method';\n title.innerText = `An error ocurred`;\n messageContainer.classList.add('body-medium');\n messageContainer.textContent = message;\n content.appendChild(messageContainer);\n button.textContent = 'Dismiss';\n button.type = ButtonType.filled;\n button.value = 'submit';\n button.submit = true;\n buttons.classList.add('dialog-buttons');\n buttons.appendChild(button);\n form.appendChild(title);\n form.appendChild(content);\n form.appendChild(buttons);\n dialog.appendChild(form);\n document.body.appendChild(dialog);\n dialog.showModal();\n form.addEventListener('submit', (e: SubmitEvent) => {\n e.preventDefault();\n dialog.close();\n });\n dialog.addEventListener('close', () => {\n dialog.parentElement?.removeChild(dialog);\n });\n } catch (e) {\n /* eslint-disable-next-line no-console */ \n console.error(e);\n }\n }\n\n unhandledRejectionHandler(e: PromiseRejectionEvent): void {\n /* eslint-disable-next-line no-console */\n console.error(e);\n this.reportCriticalError(e.reason);\n }\n\n protected handleConfigBroadcast(e: MessageEvent): void {\n const event = e.data as ConfigBroadcast;\n const { path } = event;\n if (path === 'local.set') {\n this.handleLocalConfigUpdated(event.key as string, event.value as unknown);\n } else if (path === 'environment.setDefault') {\n this.handleDefaultEnvironmentSet(event.env as IConfigEnvironment);\n } else if (path === 'environment.add') {\n this.handleEnvironmentAdd(event.env as IConfigEnvironment, event.init as AddConfigEnvironmentInit);\n }\n }\n\n protected handleLocalConfigUpdated(key: string, value: unknown): void {\n if (key === 'theme') {\n this.userTheme = value as ThemeType;\n this.themeActiveCallback();\n }\n }\n\n protected handleDefaultEnvironmentSet(env: IConfigEnvironment): void {\n const { initialized, bindings } = this;\n this.env = env;\n bindings.store.global.set(env);\n this.resolvePending();\n if (initialized) {\n this.storeChanged(env.key);\n }\n }\n\n protected handleEnvironmentAdd(env: IConfigEnvironment, init: AddConfigEnvironmentInit = {}): void {\n if (!init.asDefault) {\n return;\n }\n this.handleDefaultEnvironmentSet(env);\n }\n\n /**\n * Called from the initialize store init flow when the user is not authenticated\n * and the auth screen is rendered.\n */\n protected async _authHandler(): Promise<void> {\n const { store } = this.bindings;\n await store.auth.authenticate({ updateEnvironment: true });\n this.authenticated = true;\n this.resolvePending();\n }\n\n protected handleOpenStoreConfig(): void {\n Events.Navigation.Store.config();\n }\n\n /**\n * Initializes the flow where an environment is required.\n * This checks for the default environment.\n * When it doesn't exists it asks the user to pick existing environment \n * or to create one.\n * When a default environment exists, it performs authentication\n * when necessary. \n * \n * Eventually it returns the HTTP store with an authenticated environment.\n * \n * @param defaultFlows When set to `true` is renders default pages for env selector \n * or when to authenticate. When false it throws errors instead. Default to `true`.\n */\n protected async initializeStore(defaultFlows = true): Promise<void> {\n const { store, config } = this.bindings;\n let env: IConfigEnvironment | undefined;\n try {\n env = await config.environment.read();\n } catch (e) { \n if (!defaultFlows) {\n throw e;\n }\n }\n if (!env || !env.location) {\n await this.enterEnvironmentMissingFlow();\n }\n if (!env || !env.location) {\n return;\n }\n this.env = env;\n await store.global.set(env);\n try {\n this.storeInfo = await store.environment.readStoreInfo(env.location);\n } catch (e) {\n if (!defaultFlows) {\n throw e;\n }\n await this.enterStoreUnavailableFlow();\n }\n const authStatus = await store.auth.isAuthenticated();\n if (!authStatus) {\n if (!defaultFlows) {\n throw new Error(`Not authenticated.`);\n }\n await this.enterAuthenticationRequiredFlow();\n }\n this.authenticated = true;\n }\n\n async loadUser(): Promise<void> {\n this.loadingUser = true;\n try {\n this.user = await this.bindings.store.users.me();\n } catch (e) {\n CoreEvents.Telemetry.exception(`Loading user: ${(e as Error).message}`, undefined, this.eventTarget || window);\n } finally {\n this.loadingUser = false;\n }\n }\n\n private enterEnvironmentMissingFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'env-required';\n });\n }\n\n private enterAuthenticationRequiredFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'auth-required';\n });\n }\n \n\n /**\n * Enters into the flow where the application is unable to connect to the data store.\n * It asks user to retry or re-configure.\n * \n * Note, this is called from withing the `initializeStore()` method and this is expected to\n * eventually finish.\n */\n private enterStoreUnavailableFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'store-unavailable';\n });\n }\n\n protected async handleRetryStoreInfo(): Promise<void> {\n const { bindings, env } = this;\n const { store } = bindings;\n if (!env) {\n // this should not happen as we enter this flow after the env is set.\n return;\n }\n try {\n this.storeInfo = await store.environment.readStoreInfo(env.location);\n this.resolvePending();\n } catch (_) {\n SnackNotifications.notify(`Unable to connect.`);\n }\n }\n\n private resolvePending(): void {\n const { pendingResolver } = this;\n if (pendingResolver) {\n this.pendingResolver = undefined;\n pendingResolver();\n }\n }\n\n /**\n * @returns A template for the page loader\n */\n loaderTemplate(): TemplateResult {\n return html`\n <div class=\"app-loader body-large\">\n <p class=\"message\">Preparing something spectacular</p>\n <p class=\"sub-message\">${this.loadingStatus}</p>\n </div>\n `;\n }\n\n override pageTemplate(): TemplateResult {\n const { initialized } = this;\n if (!initialized) {\n if (this.page) {\n return html`\n ${this.renderInitFlowPage()}\n `;\n }\n return this.loaderTemplate();\n }\n return html``;\n }\n\n protected headerTemplate(): TemplateResult {\n return html`\n <header>Welcome</header>\n `;\n }\n\n protected mainTemplate(): TemplateResult {\n return html`<main></main>`;\n }\n\n protected footerTemplate(): TemplateResult {\n return html`<footer>Credits: Pawel Uchida-Psztyc</footer>`;\n }\n\n protected navigationTemplate(): TemplateResult {\n return html`<nav></nav>`;\n }\n\n protected renderInitFlowPage(): TemplateResult {\n switch (this.page) {\n case 'auth-required': return this.renderAuthRequired();\n case 'env-required': return this.renderEnvRequired();\n case 'unsupported-platform': return this.renderPlatformNotSupported();\n case 'store-unavailable': return this.renderStoreUnavailable();\n default: return html`<p class=\"general-error\">Unknown state. Did you set the <i>initialized</i> flag?</p>`;\n }\n }\n\n /**\n * Renders a full page overlay with the authentication required message.\n */\n protected renderAuthRequired(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Authentication required</h1>\n <p class=\"body-large\">You are not authenticated. To continue, please, authenticate your account.</p>\n <ui-button type=\"tonal\" @click=\"${this._authHandler}\">Authenticate</ui-button>\n </div>\n `;\n }\n\n protected renderEnvRequired(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Environment configuration missing</h1>\n <p class=\"body-large\">\n The application is unable to determine which environment to use.\n Open the <b>store configuration</b> screen to configure the connection.\n </p>\n <ui-button type=\"tonal\" @click=\"${this.handleOpenStoreConfig}\">Configure store</ui-button>\n </div>\n `;\n }\n\n protected renderPlatformNotSupported(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Unsupported platform</h1>\n <p class=\"body-large\">\n It looks like your browser does not support one of the crucial features needed to run\n this application. Accept our apologies, we work hard to support as many browsers as possible. \n </p>\n </div>\n `;\n }\n\n protected renderStoreUnavailable(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Unable to connect</h1>\n <p class=\"body-large\">\n It looks like you or the data store are offline. The application is unable to continue\n without a connection to the backend.\n </p>\n <div class=\"actions\">\n <ui-button type=\"tonal\" @click=\"${this.handleRetryStoreInfo}\">Retry</ui-button>\n <ui-button type=\"outlined\" @click=\"${this.handleOpenStoreConfig}\">Configure store</ui-button>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"ApplicationScreen.js","sourceRoot":"","sources":["../../src/pages/ApplicationScreen.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-extraneous-dependencies */\n/* eslint-disable class-methods-use-this */\nimport { html, TemplateResult } from 'lit';\nimport { IUser, Events as CoreEvents, IBackendInfo } from '@api-client/core/build/browser.js';\nimport { RenderableMixin } from '../mixins/RenderableMixin.js';\nimport { RouteMixin } from '../mixins/RouteMixin.js';\nimport { reactive } from '../lib/decorators.js';\nimport { Events } from '../events/Events.js';\nimport { EventTypes } from '../events/EventTypes.js';\nimport { ConfigBroadcast, ConfigBroadcastChannel, IConfigEnvironment, ThemeType } from '../lib/config/Config.js';\nimport supportedPlatform from '../lib/SupportedPlatform.js';\nimport { ButtonType } from '../ui/button/UiButton.js';\nimport '../define/ui/ui-button.js';\nimport { StoreBindings } from '../bindings/base/StoreBindings.js';\nimport type { AddConfigEnvironmentInit, ConfigurationBindings } from '../bindings/base/ConfigurationBindings.js';\nimport { PlatformBindings } from '../bindings/base/PlatformBindings.js';\nimport { SnackNotifications } from '../ui/notification/SnackNotifications.js';\n\nexport interface ApplicationInit {\n /**\n * A reference to the store bindings.\n */\n store: StoreBindings;\n /**\n * A reference to the config bindings.\n */\n config: ConfigurationBindings;\n}\n\ninterface ApplicationBindings {\n /**\n * A reference to the store bindings.\n */\n store: StoreBindings;\n /**\n * A reference to the config bindings.\n */\n config: ConfigurationBindings;\n [key: string]: PlatformBindings;\n}\n\n/**\n * A base class for pages build outside the LitElement. It uses `lit-html` \n * as the template renderer.\n * \n * The implementation (extending this class) should override the `pageTemplate()`\n * function that returns the `TemplateResult` from the `lit-html` library.\n * \n * To reflect the changed state call the `render()` function. The function schedules\n * a micro task (through `requestAnimationFrame`) to call the render function on the template.\n * \n * Use the `@reactive()` decorator from `src/lib/decorators.js` to mark a property as reactive,\n * meaning, when the property change it calls the `render()` function.\n */\nexport abstract class ApplicationScreen extends RouteMixin(RenderableMixin(EventTarget)) {\n @reactive() eventTarget: EventTarget = window;\n\n /** \n * True when the app should render mobile friendly view.\n */\n @reactive() isMobile = false;\n\n /** \n * The loading state information.\n */\n @reactive() loadingStatus = 'Initializing the application...';\n\n /**\n * A flag telling the application screen that the logic is initialized.\n * \n * The page can request different initialization logics. When the logic is\n * loaded the flag is set to true.\n */\n @reactive() initialized = false;\n\n /**\n * The page on the screen currently being rendered.\n */\n @reactive() page?: string;\n\n /**\n * The current user.\n * Call the `loadUser()` to populate this.\n */\n @reactive() user?: IUser;\n\n /**\n * True when the user meta is being loaded.\n */\n @reactive() protected loadingUser = false;\n \n @reactive() protected authenticated = false;\n\n /**\n * This is automatically set when initializing the store.\n * Basic information about the store.\n */\n protected storeInfo?: IBackendInfo;\n\n /**\n * Checks whether the store is in the single user mode.\n * It also returns true when the store info is not set (before the backend was initialized).\n */\n get isSingleUser(): boolean {\n const { storeInfo } = this;\n if (!storeInfo) {\n return true;\n }\n return storeInfo.mode === 'single-user';\n }\n\n protected pendingResolver?: (value: void | PromiseLike<void>) => void;\n\n /**\n * Detected system theme.\n */\n systemTheme: 'light' | 'dark' = 'light';\n\n /**\n * The theme to use as selected by the user.\n * Default to system default.\n */\n userTheme: ThemeType = 'default';\n\n /**\n * Application configuration broadcast channel.\n */\n configBroadcast = new BroadcastChannel(ConfigBroadcastChannel);\n\n bindings: ApplicationBindings;\n\n /**\n * The store environment in use.\n * This is set after the `initializeStore()` was called.\n */\n env?: IConfigEnvironment;\n\n constructor(init: ApplicationInit) {\n super();\n this.bindings = {\n config: init.config,\n store: init.store,\n };\n window.onunhandledrejection = this.unhandledRejectionHandler.bind(this);\n this.initMediaQueries();\n this.initStoreChange();\n this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this))\n }\n\n /**\n * Called once when the page is being initialized.\n */\n abstract initialize(): Promise<void>;\n\n /**\n * Initializes configuration that is relevant to all application windows.\n */\n async initializeConfig(): Promise<void> {\n const { config } = this.bindings;\n const theme = await config.local.get('theme') as ThemeType | undefined;\n if (theme) {\n this.userTheme = theme;\n }\n this.themeActiveCallback();\n }\n\n /**\n * Initializes media queries and observers.\n */\n initMediaQueries(): void {\n const mql = window.matchMedia('(max-width: 600px)');\n this.isMobile = mql.matches;\n mql.addEventListener('change', (e) => {\n this.isMobile = e.matches;\n });\n\n const dark = window.matchMedia('(prefers-color-scheme: dark)');\n if (dark.matches) {\n this.systemTheme = 'dark';\n }\n dark.addEventListener('change', (e) => {\n this.systemTheme = e.matches ? 'dark' : 'light';\n this.themeActiveCallback();\n });\n }\n\n protected themeActiveCallback(): void {\n const { systemTheme, userTheme } = this;\n let theme: 'light' | 'dark';\n if (userTheme === 'default') {\n theme = systemTheme;\n } else {\n theme = userTheme;\n }\n this.activateTheme(theme);\n }\n\n protected activateTheme(type: 'light' | 'dark'): void {\n const root = document.querySelector('html');\n if (!root) {\n return;\n }\n const { classList } = root;\n // clear all themes\n classList.forEach((value) => {\n if (value.startsWith('theme-')) {\n classList.remove(value);\n }\n });\n const name = `theme-${type}`;\n classList.add(name);\n }\n\n async isPlatformSupported(): Promise<boolean> {\n const result = await supportedPlatform();\n if (!result) {\n this.page = 'unsupported-platform';\n }\n return result;\n }\n\n initStoreChange(): void {\n window.addEventListener(EventTypes.Config.Environment.State.defaultChange, (e: Event) => {\n const event = e as CustomEvent;\n const id = event.detail.id as string;\n this.storeChanged(id);\n });\n }\n\n /**\n * Override in a child class to implement a logic that runs when the default \n * store change in the configuration.\n * \n * @param id The id of the activated environment. When missing it means there's no default environment.\n */\n abstract storeChanged(id?: string): Promise<void>;\n\n /**\n * Creates a modal dialog with the error details.\n * @param message The message to render\n */\n reportCriticalError(message: string): void {\n try {\n const dialog = document.createElement('dialog');\n const form = document.createElement('form');\n const title = document.createElement('h2');\n const content = document.createElement('div');\n const messageContainer = document.createElement('p');\n const buttons = document.createElement('div');\n const button = document.createElement('ui-button');\n dialog.classList.add('error-dialog');\n form.method = 'method';\n title.innerText = `An error ocurred`;\n messageContainer.classList.add('body-medium');\n messageContainer.textContent = message;\n content.appendChild(messageContainer);\n button.textContent = 'Dismiss';\n button.type = ButtonType.filled;\n button.value = 'submit';\n button.submit = true;\n buttons.classList.add('dialog-buttons');\n buttons.appendChild(button);\n form.appendChild(title);\n form.appendChild(content);\n form.appendChild(buttons);\n dialog.appendChild(form);\n document.body.appendChild(dialog);\n dialog.showModal();\n form.addEventListener('submit', (e: SubmitEvent) => {\n e.preventDefault();\n dialog.close();\n });\n dialog.addEventListener('close', () => {\n dialog.parentElement?.removeChild(dialog);\n });\n } catch (e) {\n /* eslint-disable-next-line no-console */ \n console.error(e);\n }\n }\n\n unhandledRejectionHandler(e: PromiseRejectionEvent): void {\n /* eslint-disable-next-line no-console */\n console.error(e);\n this.reportCriticalError(e.reason);\n }\n\n protected handleConfigBroadcast(e: MessageEvent): void {\n const event = e.data as ConfigBroadcast;\n const { path } = event;\n if (path === 'local.set') {\n this.handleLocalConfigUpdated(event.key as string, event.value as unknown);\n } else if (path === 'environment.setDefault') {\n this.handleDefaultEnvironmentSet(event.env as IConfigEnvironment);\n } else if (path === 'environment.add') {\n this.handleEnvironmentAdd(event.env as IConfigEnvironment, event.init as AddConfigEnvironmentInit);\n }\n }\n\n protected handleLocalConfigUpdated(key: string, value: unknown): void {\n if (key === 'theme') {\n this.userTheme = value as ThemeType;\n this.themeActiveCallback();\n }\n }\n\n protected handleDefaultEnvironmentSet(env: IConfigEnvironment): void {\n const { initialized, bindings } = this;\n this.env = env;\n bindings.store.global.set(env);\n this.resolvePending();\n if (initialized) {\n this.storeChanged(env.key);\n }\n }\n\n protected handleEnvironmentAdd(env: IConfigEnvironment, init: AddConfigEnvironmentInit = {}): void {\n if (!init.asDefault) {\n return;\n }\n this.handleDefaultEnvironmentSet(env);\n }\n\n /**\n * Called from the initialize store init flow when the user is not authenticated\n * and the auth screen is rendered.\n */\n protected async _authHandler(): Promise<void> {\n const { store } = this.bindings;\n await store.auth.authenticate({ updateEnvironment: true });\n this.authenticated = true;\n this.resolvePending();\n }\n\n protected handleOpenStoreConfig(): void {\n Events.Navigation.Store.config();\n }\n\n /**\n * Initializes the flow where an environment is required.\n * This checks for the default environment.\n * When it doesn't exists it asks the user to pick existing environment \n * or to create one.\n * When a default environment exists, it performs authentication\n * when necessary. \n * \n * Eventually it returns the HTTP store with an authenticated environment.\n * \n * @param defaultFlows When set to `true` is renders default pages for env selector \n * or when to authenticate. When false it throws errors instead. Default to `true`.\n */\n protected async initializeStore(defaultFlows = true): Promise<void> {\n const { store, config } = this.bindings;\n let env: IConfigEnvironment | undefined;\n try {\n env = await config.environment.read();\n } catch (e) { \n if (!defaultFlows) {\n throw e;\n }\n }\n if (!env || !env.location) {\n await this.enterEnvironmentMissingFlow();\n }\n if (!env || !env.location) {\n return;\n }\n this.env = env;\n await store.global.set(env);\n try {\n this.storeInfo = await store.environment.readStoreInfo(env.location);\n } catch (e) {\n if (!defaultFlows) {\n throw e;\n }\n await this.enterStoreUnavailableFlow();\n }\n const authStatus = await store.auth.isAuthenticated();\n if (!authStatus) {\n if (!defaultFlows) {\n throw new Error(`Not authenticated.`);\n }\n await this.enterAuthenticationRequiredFlow();\n }\n this.authenticated = true;\n }\n\n async loadUser(): Promise<void> {\n this.loadingUser = true;\n try {\n this.user = await this.bindings.store.users.me();\n } catch (e) {\n CoreEvents.Telemetry.exception(`Loading user: ${(e as Error).message}`, undefined, this.eventTarget || window);\n } finally {\n this.loadingUser = false;\n }\n }\n\n private enterEnvironmentMissingFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'env-required';\n });\n }\n\n private enterAuthenticationRequiredFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'auth-required';\n });\n }\n \n\n /**\n * Enters into the flow where the application is unable to connect to the data store.\n * It asks user to retry or re-configure.\n * \n * Note, this is called from withing the `initializeStore()` method and this is expected to\n * eventually finish.\n */\n private enterStoreUnavailableFlow(): Promise<void> {\n return new Promise((resolve) => {\n this.pendingResolver = resolve;\n this.page = 'store-unavailable';\n });\n }\n\n protected async handleRetryStoreInfo(): Promise<void> {\n const { bindings, env } = this;\n const { store } = bindings;\n if (!env) {\n // this should not happen as we enter this flow after the env is set.\n return;\n }\n try {\n this.storeInfo = await store.environment.readStoreInfo(env.location);\n this.resolvePending();\n } catch (_) {\n SnackNotifications.notify(`Unable to connect.`);\n }\n }\n\n private resolvePending(): void {\n const { pendingResolver } = this;\n if (pendingResolver) {\n this.pendingResolver = undefined;\n pendingResolver();\n }\n }\n\n /**\n * @returns A template for the page loader\n */\n loaderTemplate(): TemplateResult {\n return html`\n <div class=\"app-loader body-large\">\n <p class=\"message\">Preparing something spectacular</p>\n <p class=\"sub-message\">${this.loadingStatus}</p>\n </div>\n `;\n }\n\n override pageTemplate(): TemplateResult {\n const { initialized } = this;\n if (!initialized) {\n if (this.page) {\n return html`\n ${this.renderInitFlowPage()}\n `;\n }\n return this.loaderTemplate();\n }\n return html``;\n }\n\n protected headerTemplate(): TemplateResult {\n return html`\n <header>Welcome</header>\n `;\n }\n\n protected mainTemplate(): TemplateResult {\n return html`<main></main>`;\n }\n\n protected footerTemplate(): TemplateResult {\n return html`<footer>Credits: Pawel Uchida-Psztyc</footer>`;\n }\n\n protected navigationTemplate(): TemplateResult {\n return html`<nav></nav>`;\n }\n\n protected renderInitFlowPage(): TemplateResult {\n switch (this.page) {\n case 'auth-required': return this.renderAuthRequired();\n case 'env-required': return this.renderEnvRequired();\n case 'unsupported-platform': return this.renderPlatformNotSupported();\n case 'store-unavailable': return this.renderStoreUnavailable();\n default: return html`<p class=\"general-error\">Unknown state. Did you set the <i>initialized</i> flag?</p>`;\n }\n }\n\n /**\n * Renders a full page overlay with the authentication required message.\n */\n protected renderAuthRequired(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Authentication required</h1>\n <p class=\"body-large\">You are not authenticated. To continue, please, authenticate your account.</p>\n <ui-button type=\"tonal\" @click=\"${this._authHandler}\">Authenticate</ui-button>\n </div>\n `;\n }\n\n protected renderEnvRequired(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Environment configuration missing</h1>\n <p class=\"body-large\">\n The application is unable to determine which environment to use.\n Open the <b>store configuration</b> screen to configure the connection.\n </p>\n <ui-button type=\"tonal\" @click=\"${this.handleOpenStoreConfig}\">Configure store</ui-button>\n </div>\n `;\n }\n\n protected renderPlatformNotSupported(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Unsupported platform</h1>\n <p class=\"body-large\">\n It looks like your browser does not support one of the crucial features needed to run\n this application. Accept our apologies, we work hard to support as many browsers as possible. \n </p>\n </div>\n `;\n }\n\n protected renderStoreUnavailable(): TemplateResult {\n return html`\n <div class=\"auth-required-screen\">\n <h1 class=\"display-large\">Unable to connect</h1>\n <p class=\"body-large\">\n It looks like you or the data store are offline. The application is unable to continue\n without a connection to the backend.\n </p>\n <div class=\"actions\">\n <ui-button type=\"tonal\" @click=\"${this.handleRetryStoreInfo}\">Retry</ui-button>\n <ui-button type=\"outlined\" @click=\"${this.handleOpenStoreConfig}\">Configure store</ui-button>\n </div>\n </div>\n `;\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "UI for API Client.",
5
5
  "license": "CC-BY-2.0",
6
6
  "main": "dist/index.js",
package/src/pages/ApplicationScreen.ts CHANGED
@@ -116,11 +116,6 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
116
116
  */
117
117
  systemTheme: 'light' | 'dark' = 'light';
118
118
 
119
- /**
120
- * The root location where theme files are located.
121
- */
122
- themesRoot = '/src/styles/m3';
123
-
124
119
  /**
125
120
  * The theme to use as selected by the user.
126
121
  * Default to system default.
@@ -201,21 +196,19 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
201
196
  }
202
197
 
203
198
  protected activateTheme(type: 'light' | 'dark'): void {
204
- const file = `theme.${type}.css`;
205
- const existing = document.head.querySelector('[data-theme]') as HTMLLinkElement | null;
206
- if (existing) {
207
- if (existing.href.includes(file)) {
208
- return;
209
- }
210
- existing.parentElement?.removeChild(existing);
199
+ const root = document.querySelector('html');
200
+ if (!root) {
201
+ return;
211
202
  }
212
- const link = document.createElement('link');
213
- const url = new URL(`${this.themesRoot}/${file}`, window.location.href);
214
- link.rel = 'stylesheet';
215
- link.type = 'text/css';
216
- link.href = url.toString();
217
- link.dataset.theme = 'true';
218
- document.head.appendChild(link);
203
+ const { classList } = root;
204
+ // clear all themes
205
+ classList.forEach((value) => {
206
+ if (value.startsWith('theme-')) {
207
+ classList.remove(value);
208
+ }
209
+ });
210
+ const name = `theme-${type}`;
211
+ classList.add(name);
219
212
  }
220
213
 
221
214
  async isPlatformSupported(): Promise<boolean> {
package/src/styles/m3/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ html.theme-light {
2
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
3
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
4
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
5
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
6
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
7
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
8
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
9
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
10
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
11
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
12
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
13
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
14
+ --md-sys-color-error: var(--md-sys-color-error-light);
15
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
16
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
17
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
18
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
19
+ --md-sys-color-background: var(--md-sys-color-background-light);
20
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
21
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
22
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
23
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
24
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
25
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
26
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
27
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
28
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
29
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
30
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
31
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
32
+
33
+ /* CUSTOM */
34
+ --md-sys-elevation-0: none;
35
+ --md-sys-elevation-1: var(--md-sys-elevation-1-light);
36
+ --md-sys-elevation-2: var(--md-sys-elevation-2-light);
37
+ --md-sys-elevation-3: var(--md-sys-elevation-3-light);
38
+ --md-sys-elevation-4: var(--md-sys-elevation-4-light);
39
+ --md-sys-elevation-5: var(--md-sys-elevation-5-light);
40
+ }
41
+
42
+ html.theme-dark {
43
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
44
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
45
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
46
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
47
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
48
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
49
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
50
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
51
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
52
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
53
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
54
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
55
+ --md-sys-color-error: var(--md-sys-color-error-dark);
56
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
57
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
58
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
59
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
60
+ --md-sys-color-background: var(--md-sys-color-background-dark);
61
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
62
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
63
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
64
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
65
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
66
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
67
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
68
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
69
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
70
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
71
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
72
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
73
+
74
+ /* CUSTOM */
75
+ --md-sys-elevation-0: none;
76
+ --md-sys-elevation-1: var(--md-sys-elevation-1-dark);
77
+ --md-sys-elevation-2: var(--md-sys-elevation-2-dark);
78
+ --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
79
+ --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
80
+ --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
81
+ }
package/web-test-runner.config.mjs CHANGED
@@ -11,9 +11,7 @@ const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
11
11
 
12
12
  export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
13
13
  /** Test files to run */
14
- files: [
15
- "test/**/**/*.test.ts",
16
- ],
14
+ files: ["test/**/**/*.test.ts"],
17
15
 
18
16
  /** Resolve bare module imports */
19
17
  nodeResolve: {
@@ -88,12 +86,12 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
88
86
  // See documentation for all available options
89
87
 
90
88
  testRunnerHtml: (testFramework) =>
91
- `<html>
89
+ `<html class="theme-light">
92
90
  <head>
93
91
  <link rel="stylesheet" href="/test/visualization/lib/test-styles.css" />
94
92
  <!-- m3 styles -->
95
93
  <link rel="stylesheet" href="/src/styles/m3/tokens.css" data-theme="tokens" />
96
- <link rel="stylesheet" href="/src/styles/m3/theme.light.css" data-theme="light" />
94
+ <link rel="stylesheet" href="/src/styles/m3/theme.css" data-theme="light" />
97
95
  </head>
98
96
  <body>
99
97
  <script type="module" src="${testFramework}"></script>
package/src/styles/m3/theme.dark.css DELETED
@@ -1,40 +0,0 @@
1
- html {
2
- --md-sys-color-primary: var(--md-sys-color-primary-dark);
3
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
4
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
5
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
6
- --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
7
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
8
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
9
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
10
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
11
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
12
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
13
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
14
- --md-sys-color-error: var(--md-sys-color-error-dark);
15
- --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
16
- --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
17
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
18
- --md-sys-color-outline: var(--md-sys-color-outline-dark);
19
- --md-sys-color-background: var(--md-sys-color-background-dark);
20
- --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
21
- --md-sys-color-surface: var(--md-sys-color-surface-dark);
22
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
23
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
24
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
25
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
26
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
27
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
28
- --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
29
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
30
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
31
- --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
32
-
33
- /* CUSTOM */
34
- --md-sys-elevation-0: none;
35
- --md-sys-elevation-1: var(--md-sys-elevation-1-dark);
36
- --md-sys-elevation-2: var(--md-sys-elevation-2-dark);
37
- --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
38
- --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
39
- --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
40
- }
package/src/styles/m3/theme.light.css DELETED
@@ -1,40 +0,0 @@
1
- html {
2
- --md-sys-color-primary: var(--md-sys-color-primary-light);
3
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
4
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
5
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
6
- --md-sys-color-secondary: var(--md-sys-color-secondary-light);
7
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
8
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
9
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
10
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
11
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
12
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
13
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
14
- --md-sys-color-error: var(--md-sys-color-error-light);
15
- --md-sys-color-on-error: var(--md-sys-color-on-error-light);
16
- --md-sys-color-error-container: var(--md-sys-color-error-container-light);
17
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
18
- --md-sys-color-outline: var(--md-sys-color-outline-light);
19
- --md-sys-color-background: var(--md-sys-color-background-light);
20
- --md-sys-color-on-background: var(--md-sys-color-on-background-light);
21
- --md-sys-color-surface: var(--md-sys-color-surface-light);
22
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
23
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
24
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
25
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
26
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
27
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
28
- --md-sys-color-shadow: var(--md-sys-color-shadow-light);
29
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
30
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
31
- --md-sys-color-scrim: var(--md-sys-color-scrim-light);
32
-
33
- /* CUSTOM */
34
- --md-sys-elevation-0: none;
35
- --md-sys-elevation-1: var(--md-sys-elevation-1-light);
36
- --md-sys-elevation-2: var(--md-sys-elevation-2-light);
37
- --md-sys-elevation-3: var(--md-sys-elevation-3-light);
38
- --md-sys-elevation-4: var(--md-sys-elevation-4-light);
39
- --md-sys-elevation-5: var(--md-sys-elevation-5-light);
40
- }