@m3e/theme 1.0.0-rc.1 → 1.0.0-rc.2

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 (29) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2549 -9
  3. package/dist/index.js +3 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +29 -29
  6. package/dist/index.min.js.map +1 -1
  7. package/package.json +3 -3
  8. package/cem.config.mjs +0 -16
  9. package/dist/src/ColorScheme.d.ts +0 -3
  10. package/dist/src/ColorScheme.d.ts.map +0 -1
  11. package/dist/src/ContrastLevel.d.ts +0 -3
  12. package/dist/src/ContrastLevel.d.ts.map +0 -1
  13. package/dist/src/MotionScheme.d.ts +0 -3
  14. package/dist/src/MotionScheme.d.ts.map +0 -1
  15. package/dist/src/ThemeElement.d.ts +0 -101
  16. package/dist/src/ThemeElement.d.ts.map +0 -1
  17. package/dist/src/ThemeVariant.d.ts +0 -3
  18. package/dist/src/ThemeVariant.d.ts.map +0 -1
  19. package/dist/src/index.d.ts +0 -6
  20. package/dist/src/index.d.ts.map +0 -1
  21. package/eslint.config.mjs +0 -13
  22. package/rollup.config.js +0 -32
  23. package/src/ColorScheme.ts +0 -2
  24. package/src/ContrastLevel.ts +0 -2
  25. package/src/MotionScheme.ts +0 -2
  26. package/src/ThemeElement.ts +0 -284
  27. package/src/ThemeVariant.ts +0 -11
  28. package/src/index.ts +0 -5
  29. package/tsconfig.json +0 -9
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@m3e/theme",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.2",
4
4
  "description": "Theme for M3E",
5
5
  "author": "matraic <matraic@yahoo.com>",
6
6
  "license": "MIT",
7
- "homepage": "https://matraic.github.io/m3e/",
7
+ "homepage": "https://matraic.github.io/m3e/#/components/theme.html",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/matraic/m3e.git"
@@ -31,7 +31,7 @@
31
31
  "@material/material-color-utilities": "^0.3.0"
32
32
  },
33
33
  "peerDependencies": {
34
- "@m3e/core": "1.0.0-rc.1",
34
+ "@m3e/core": "1.0.0-rc.2",
35
35
  "lit": "^3.3.0"
36
36
  },
37
37
  "devDependencies": {
package/cem.config.mjs DELETED
@@ -1,16 +0,0 @@
1
- import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
2
-
3
- export default {
4
- globs: ["src/**/*.ts"],
5
- exclude: ["src/**/*.spec.ts"],
6
- packagejson: true,
7
- outdir: "dist",
8
- litelement: true,
9
- plugins: [
10
- customElementVsCodePlugin({
11
- outdir: "dist",
12
- htmlFileName: "html-custom-data.json",
13
- cssFileName: "css-custom-data.json",
14
- }),
15
- ],
16
- };
package/dist/src/ColorScheme.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies schemes for which to generate a color palette. */
2
- export type ColorScheme = "light" | "dark" | "auto";
3
- //# sourceMappingURL=ColorScheme.d.ts.map
package/dist/src/ColorScheme.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColorScheme.d.ts","sourceRoot":"","sources":["../../src/ColorScheme.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC"}
package/dist/src/ContrastLevel.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the contrast level in which to generate a color palette. */
2
- export type ContrastLevel = "high" | "medium" | "standard";
3
- //# sourceMappingURL=ContrastLevel.d.ts.map
package/dist/src/ContrastLevel.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ContrastLevel.d.ts","sourceRoot":"","sources":["../../src/ContrastLevel.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC"}
package/dist/src/MotionScheme.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the possible motion schemes of a theme. */
2
- export type MotionScheme = "standard" | "expressive";
3
- //# sourceMappingURL=MotionScheme.d.ts.map
package/dist/src/MotionScheme.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"MotionScheme.d.ts","sourceRoot":"","sources":["../../src/MotionScheme.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,YAAY,CAAC"}
package/dist/src/ThemeElement.d.ts DELETED
@@ -1,101 +0,0 @@
1
- import { CSSResultGroup, LitElement, PropertyValues } from "lit";
2
- import { ColorScheme } from "./ColorScheme";
3
- import { ContrastLevel } from "./ContrastLevel";
4
- import { ThemeVariant } from "./ThemeVariant";
5
- import { MotionScheme } from "./MotionScheme";
6
- declare const M3eThemeElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
7
- /**
8
- * @summary
9
- * A non-visual element responsible for application-level theming.
10
- *
11
- * @description
12
- * The `m3e-theme` component is a non-visual element used to apply dynamic color, expressive motion, density, and strong focus indicators
13
- * to nested, theme-aware elements.
14
- *
15
- * When `m3e-theme` is nested directly beneath the `<body>` of a document, the `<body>`'s `background-color` is set to the computed
16
- * value of `--md-sys-color-background` and `color` is set to the computed value of `--md-sys-color-on-background`. In addition,
17
- * the document's `scrollbar-color` is set to the computed values of `--m3e-scrollbar-thumb-color` and `--m3e-scrollbar-track-color` which,
18
- * when supported, cascades to all viewport scrollbars.
19
- *
20
- * @example
21
- * The following example adds a top-level `m3e-theme` directly beneath a document's `<body>` element to
22
- * apply application-level theming. In this example, `color` and `scheme` are used to create a dynamic color
23
- * palette which automatically adjusts to a user's light or dark color preference. In addition, expressive motion
24
- * and strong focus indicators are enabled.
25
- *
26
- * ```html
27
- * <body>
28
- * <m3e-theme color="#7D67BE" scheme="auto" motion="expressive" strong-focus>
29
- * <!-- Normal body content here. -->
30
- * </m3e-theme>
31
- * <body/>
32
- * ```
33
- * @tag m3e-theme
34
- *
35
- * @attr color - The hex color from which to derive dynamic color palettes.
36
- * @attr contrast - The contrast level of the theme.
37
- * @attr density - The density scale (0, -1, -2).
38
- * @attr scheme - The color scheme of the theme.
39
- * @attr strong-focus - Whether to enable strong focus indicators.
40
- * @attr variant - The color variant of the theme.
41
- *
42
- * @fires change - Dispatched when the theme changes.
43
- */
44
- export declare class M3eThemeElement extends M3eThemeElement_base {
45
- #private;
46
- /** The styles of the element. */
47
- static styles: CSSResultGroup;
48
- /**
49
- * The hex color from which to derive dynamic color palettes.
50
- * @default "#7D67BE"
51
- */
52
- color: string;
53
- /**
54
- * The color variant of the theme.
55
- * @default "vibrant"
56
- */
57
- variant: ThemeVariant;
58
- /**
59
- * The color scheme of the theme.
60
- * @default "auto"
61
- */
62
- scheme: ColorScheme;
63
- /**
64
- * The contrast level of the theme.
65
- * @default "standard"
66
- */
67
- contrast: ContrastLevel;
68
- /**
69
- * Whether to enable strong focus indicators.
70
- * @default false
71
- */
72
- strongFocus: boolean;
73
- /**
74
- * The density scale (0, -1, -2).
75
- * @default 0
76
- */
77
- density: number;
78
- /** The motion scheme.
79
- * @default "standard"
80
- */
81
- motion: MotionScheme;
82
- /** Whether a dark theme is applied. */
83
- get isDark(): boolean;
84
- /** @inheritdoc */
85
- connectedCallback(): void;
86
- /** @inheritdoc */
87
- disconnectedCallback(): void;
88
- /** @inheritdoc */
89
- protected updated(_changedProperties: PropertyValues<this>): void;
90
- /** @inheritdoc */
91
- protected firstUpdated(_changedProperties: PropertyValues): void;
92
- /** @inheritdoc */
93
- protected render(): unknown;
94
- }
95
- declare global {
96
- interface HTMLElementTagNameMap {
97
- "m3e-theme": M3eThemeElement;
98
- }
99
- }
100
- export {};
101
- //# sourceMappingURL=ThemeElement.d.ts.map
package/dist/src/ThemeElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeElement.d.ts","sourceRoot":"","sources":["../../src/ThemeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAc5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,eAAgB,SAAQ,oBAAwB;;IAC3D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAUF;;;OAGG;IACS,KAAK,SAAa;IAC9B;;;OAGG;IACS,OAAO,EAAE,YAAY,CAAa;IAE9C;;;OAGG;IACS,MAAM,EAAE,WAAW,CAAU;IAEzC;;;OAGG;IACS,QAAQ,EAAE,aAAa,CAAc;IAEjD;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACyB,OAAO,SAAK;IAExC;;OAEG;IACS,MAAM,EAAE,YAAY,CAAc;IAE9C,uCAAuC;IACvC,IAAI,MAAM,IAAI,OAAO,CASpB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAgBlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA4GrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
package/dist/src/ThemeVariant.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the color variants of a theme. */
2
- export type ThemeVariant = "content" | "expressive" | "fidelity" | "fruit-salad" | "monochrome" | "neutral" | "rainbow" | "tonal-spot" | "vibrant";
3
- //# sourceMappingURL=ThemeVariant.d.ts.map
package/dist/src/ThemeVariant.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeVariant.d.ts","sourceRoot":"","sources":["../../src/ThemeVariant.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,YAAY,GACZ,UAAU,GACV,aAAa,GACb,YAAY,GACZ,SAAS,GACT,SAAS,GACT,YAAY,GACZ,SAAS,CAAC"}
package/dist/src/index.d.ts DELETED
@@ -1,6 +0,0 @@
1
- export * from "./ColorScheme";
2
- export * from "./ContrastLevel";
3
- export * from "./MotionScheme";
4
- export * from "./ThemeElement";
5
- export * from "./ThemeVariant";
6
- //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
package/eslint.config.mjs DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
package/src/ColorScheme.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Specifies schemes for which to generate a color palette. */
2
- export type ColorScheme = "light" | "dark" | "auto";
package/src/ContrastLevel.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Specifies the contrast level in which to generate a color palette. */
2
- export type ContrastLevel = "high" | "medium" | "standard";
package/src/MotionScheme.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Specifies the possible motion schemes of a theme. */
2
- export type MotionScheme = "standard" | "expressive";
package/src/ThemeElement.ts DELETED
@@ -1,284 +0,0 @@
1
- import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
2
- import { customElement, property } from "lit/decorators.js";
3
-
4
- import {
5
- argbFromHex,
6
- CorePalette,
7
- DynamicColor,
8
- DynamicScheme,
9
- hexFromArgb,
10
- MaterialDynamicColors,
11
- } from "@material/material-color-utilities";
12
-
13
- import { DesignToken, Role } from "@m3e/core";
14
-
15
- import { ColorScheme } from "./ColorScheme";
16
- import { ContrastLevel } from "./ContrastLevel";
17
- import { ThemeVariant } from "./ThemeVariant";
18
- import { MotionScheme } from "./MotionScheme";
19
-
20
- /**
21
- * @summary
22
- * A non-visual element responsible for application-level theming.
23
- *
24
- * @description
25
- * The `m3e-theme` component is a non-visual element used to apply dynamic color, expressive motion, density, and strong focus indicators
26
- * to nested, theme-aware elements.
27
- *
28
- * When `m3e-theme` is nested directly beneath the `<body>` of a document, the `<body>`'s `background-color` is set to the computed
29
- * value of `--md-sys-color-background` and `color` is set to the computed value of `--md-sys-color-on-background`. In addition,
30
- * the document's `scrollbar-color` is set to the computed values of `--m3e-scrollbar-thumb-color` and `--m3e-scrollbar-track-color` which,
31
- * when supported, cascades to all viewport scrollbars.
32
- *
33
- * @example
34
- * The following example adds a top-level `m3e-theme` directly beneath a document's `<body>` element to
35
- * apply application-level theming. In this example, `color` and `scheme` are used to create a dynamic color
36
- * palette which automatically adjusts to a user's light or dark color preference. In addition, expressive motion
37
- * and strong focus indicators are enabled.
38
- *
39
- * ```html
40
- * <body>
41
- * <m3e-theme color="#7D67BE" scheme="auto" motion="expressive" strong-focus>
42
- * <!-- Normal body content here. -->
43
- * </m3e-theme>
44
- * <body/>
45
- * ```
46
- * @tag m3e-theme
47
- *
48
- * @attr color - The hex color from which to derive dynamic color palettes.
49
- * @attr contrast - The contrast level of the theme.
50
- * @attr density - The density scale (0, -1, -2).
51
- * @attr scheme - The color scheme of the theme.
52
- * @attr strong-focus - Whether to enable strong focus indicators.
53
- * @attr variant - The color variant of the theme.
54
- *
55
- * @fires change - Dispatched when the theme changes.
56
- */
57
- @customElement("m3e-theme")
58
- export class M3eThemeElement extends Role(LitElement, "none") {
59
- /** The styles of the element. */
60
- static override styles: CSSResultGroup = css`
61
- :host {
62
- display: contents;
63
- font-size: ${DesignToken.typescale.standard.body.large.fontSize};
64
- font-weight: ${DesignToken.typescale.standard.body.large.fontWeight};
65
- line-height: ${DesignToken.typescale.standard.body.large.lineHeight};
66
- letter-spacing: ${DesignToken.typescale.standard.body.large.tracking};
67
- }
68
- `;
69
-
70
- /** @private */ #styleSheet = new CSSStyleSheet();
71
- /** @private */ #firstUpdated = false;
72
- /** @private */ #light?: MediaQueryList;
73
- /** @private */ #dark?: MediaQueryList;
74
- /** @private */ #forcedColor?: MediaQueryList;
75
-
76
- /** @private */ readonly #colorSchemeChangeHandler = () => this.#apply();
77
-
78
- /**
79
- * The hex color from which to derive dynamic color palettes.
80
- * @default "#7D67BE"
81
- */
82
- @property() color = "#7D67BE";
83
- /**
84
- * The color variant of the theme.
85
- * @default "vibrant"
86
- */
87
- @property() variant: ThemeVariant = "vibrant";
88
-
89
- /**
90
- * The color scheme of the theme.
91
- * @default "auto"
92
- */
93
- @property() scheme: ColorScheme = "auto";
94
-
95
- /**
96
- * The contrast level of the theme.
97
- * @default "standard"
98
- */
99
- @property() contrast: ContrastLevel = "standard";
100
-
101
- /**
102
- * Whether to enable strong focus indicators.
103
- * @default false
104
- */
105
- @property({ attribute: "strong-focus", type: Boolean }) strongFocus = false;
106
-
107
- /**
108
- * The density scale (0, -1, -2).
109
- * @default 0
110
- */
111
- @property({ type: Number }) density = 0;
112
-
113
- /** The motion scheme.
114
- * @default "standard"
115
- */
116
- @property() motion: MotionScheme = "standard";
117
-
118
- /** Whether a dark theme is applied. */
119
- get isDark(): boolean {
120
- switch (this.scheme) {
121
- case "light":
122
- return false;
123
- case "dark":
124
- return true;
125
- default: // auto
126
- return this.#dark?.matches ?? false;
127
- }
128
- }
129
-
130
- /** @inheritdoc */
131
- override connectedCallback(): void {
132
- super.connectedCallback();
133
-
134
- if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(this.#styleSheet)) {
135
- this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, this.#styleSheet];
136
- }
137
-
138
- this.#light = matchMedia("(prefers-color-scheme: light)");
139
- this.#dark = matchMedia("(prefers-color-scheme: dark)");
140
- this.#forcedColor = matchMedia("(forced-colors: active)");
141
-
142
- [this.#light, this.#dark, this.#forcedColor].forEach((x) =>
143
- x.addEventListener("change", this.#colorSchemeChangeHandler)
144
- );
145
- }
146
-
147
- /** @inheritdoc */
148
- override disconnectedCallback(): void {
149
- super.disconnectedCallback();
150
-
151
- [this.#light, this.#dark, this.#forcedColor].forEach((x) =>
152
- x?.removeEventListener("change", this.#colorSchemeChangeHandler)
153
- );
154
- this.#light = this.#dark = this.#forcedColor = undefined;
155
- }
156
-
157
- /** @inheritdoc */
158
- protected override updated(_changedProperties: PropertyValues<this>): void {
159
- super.updated(_changedProperties);
160
- this.#apply();
161
- }
162
-
163
- /** @inheritdoc */
164
- protected override firstUpdated(_changedProperties: PropertyValues): void {
165
- super.firstUpdated(_changedProperties);
166
- this.#firstUpdated = true;
167
- }
168
-
169
- /** @inheritdoc */
170
- protected override render(): unknown {
171
- return html`<slot></slot>`;
172
- }
173
-
174
- /** @private */
175
- #apply(): void {
176
- const color = argbFromHex(this.color);
177
- const palette = CorePalette.of(color);
178
- const scheme = new DynamicScheme({
179
- sourceColorArgb: color,
180
- variant: this.#getVariant(),
181
- contrastLevel: this.#getContrastLevel(),
182
- isDark: this.isDark,
183
- primaryPalette: palette.a1,
184
- secondaryPalette: palette.a2,
185
- tertiaryPalette: palette.a3,
186
- neutralPalette: palette.n1,
187
- neutralVariantPalette: palette.n2,
188
- });
189
-
190
- let css = "";
191
-
192
- for (const key in MaterialDynamicColors) {
193
- if (!key.endsWith("PaletteKeyColor")) {
194
- const dynamicColor: unknown = MaterialDynamicColors[key as keyof MaterialDynamicColors];
195
- if (dynamicColor instanceof DynamicColor) {
196
- css += `--md-sys-color-${key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}: ${hexFromArgb(
197
- dynamicColor.getArgb(scheme)
198
- )};`;
199
- }
200
- }
201
- }
202
-
203
- if (this.motion === "expressive") {
204
- css += "--md-sys-motion-spring-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.90);";
205
- css += "--md-sys-motion-spring-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1.00);";
206
- css += "--md-sys-motion-spring-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);";
207
- css += "--md-sys-motion-spring-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);";
208
- css += "--md-sys-motion-spring-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);";
209
- css += "--md-sys-motion-spring-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);";
210
- }
211
-
212
- css += `--md-sys-density-scale: ${this.density};`;
213
- css += `--m3e-scrollbar-thumb-color: ${hexFromArgb(palette.n1.tone(60))};`;
214
- css += `--m3e-focus-ring-visibility: ${this.strongFocus ? "visible" : "hidden"};`;
215
-
216
- this.#styleSheet.replaceSync(`:host { ${css} }`);
217
-
218
- if (this.parentElement instanceof HTMLBodyElement) {
219
- const computedStyle = getComputedStyle(this);
220
-
221
- if (this.#forcedColor?.matches) {
222
- this.parentElement.style.backgroundColor =
223
- this.parentElement.style.color =
224
- this.parentElement.ownerDocument.documentElement.style.scrollbarColor =
225
- this.parentElement.style.scrollbarColor =
226
- "";
227
- } else {
228
- this.parentElement.style.backgroundColor = computedStyle.getPropertyValue("--md-sys-color-background");
229
- this.parentElement.style.color = computedStyle.getPropertyValue("--md-sys-color-on-background");
230
-
231
- this.parentElement.ownerDocument.documentElement.style.scrollbarColor =
232
- this.parentElement.style.scrollbarColor = `${computedStyle.getPropertyValue(
233
- "--m3e-scrollbar-thumb-color"
234
- )} ${computedStyle.getPropertyValue("--m3e-scrollbar-track-color")}`;
235
- }
236
- }
237
-
238
- if (this.#firstUpdated) {
239
- this.dispatchEvent(new Event("change", { bubbles: true }));
240
- }
241
- }
242
-
243
- /** @private */
244
- #getVariant(): number {
245
- switch (this.variant) {
246
- case "monochrome":
247
- return 0;
248
- case "neutral":
249
- return 1;
250
- case "tonal-spot":
251
- return 2;
252
- case "vibrant":
253
- return 3;
254
- case "expressive":
255
- return 4;
256
- case "fidelity":
257
- return 5;
258
- case "rainbow":
259
- return 7;
260
- case "fruit-salad":
261
- return 8;
262
- default: // content
263
- return 6;
264
- }
265
- }
266
-
267
- /** @private */
268
- #getContrastLevel(): number {
269
- switch (this.contrast) {
270
- case "high":
271
- return 1;
272
- case "medium":
273
- return 0.5;
274
- default: // standard
275
- return 0;
276
- }
277
- }
278
- }
279
-
280
- declare global {
281
- interface HTMLElementTagNameMap {
282
- "m3e-theme": M3eThemeElement;
283
- }
284
- }
package/src/ThemeVariant.ts DELETED
@@ -1,11 +0,0 @@
1
- /** Specifies the color variants of a theme. */
2
- export type ThemeVariant =
3
- | "content"
4
- | "expressive"
5
- | "fidelity"
6
- | "fruit-salad"
7
- | "monochrome"
8
- | "neutral"
9
- | "rainbow"
10
- | "tonal-spot"
11
- | "vibrant";
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from "./ColorScheme";
2
- export * from "./ContrastLevel";
3
- export * from "./MotionScheme";
4
- export * from "./ThemeElement";
5
- export * from "./ThemeVariant";
package/tsconfig.json DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "rootDir": "./src",
5
- "outDir": "./dist/src"
6
- },
7
- "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
8
- "exclude": []
9
- }