From 488dc469a4a690ac190d8a0dea416c18cc1939b6 Mon Sep 17 00:00:00 2001 From: bre 97 Date: Wed, 20 Dec 2023 14:14:56 +0800 Subject: [PATCH 1/2] feat: component material-theme-provider --- .../internal/material-theme-provider.ts | 104 ++++++++++++++++++ .../material-theme-provider.ts | 7 ++ 2 files changed, 111 insertions(+) create mode 100644 labs/material-theme-provider/internal/material-theme-provider.ts create mode 100644 labs/material-theme-provider/material-theme-provider.ts diff --git a/labs/material-theme-provider/internal/material-theme-provider.ts b/labs/material-theme-provider/internal/material-theme-provider.ts new file mode 100644 index 0000000000..1ff3e69d65 --- /dev/null +++ b/labs/material-theme-provider/internal/material-theme-provider.ts @@ -0,0 +1,104 @@ +import { html, LitElement } from "lit"; +import { + argbFromHex, + Hct, + hexFromArgb, + MaterialDynamicColors, + SchemeContent, + Theme, +} from '@material/material-color-utilities'; +import { property } from "lit/decorators"; + +/** + * A Mapping of color token name to MCU HCT color function generator. + */ +const materialColors = { + background: MaterialDynamicColors.background, + 'on-background': MaterialDynamicColors.onBackground, + surface: MaterialDynamicColors.surface, + 'surface-dim': MaterialDynamicColors.surfaceDim, + 'surface-bright': MaterialDynamicColors.surfaceBright, + 'surface-container-lowest': MaterialDynamicColors.surfaceContainerLowest, + 'surface-container-low': MaterialDynamicColors.surfaceContainerLow, + 'surface-container': MaterialDynamicColors.surfaceContainer, + 'surface-container-high': MaterialDynamicColors.surfaceContainerHigh, + 'surface-container-highest': MaterialDynamicColors.surfaceContainerHighest, + 'on-surface': MaterialDynamicColors.onSurface, + 'surface-variant': MaterialDynamicColors.surfaceVariant, + 'on-surface-variant': MaterialDynamicColors.onSurfaceVariant, + 'inverse-surface': MaterialDynamicColors.inverseSurface, + 'inverse-on-surface': MaterialDynamicColors.inverseOnSurface, + outline: MaterialDynamicColors.outline, + 'outline-variant': MaterialDynamicColors.outlineVariant, + shadow: MaterialDynamicColors.shadow, + scrim: MaterialDynamicColors.scrim, + 'surface-tint': MaterialDynamicColors.surfaceTint, + primary: MaterialDynamicColors.primary, + 'on-primary': MaterialDynamicColors.onPrimary, + 'primary-container': MaterialDynamicColors.primaryContainer, + 'on-primary-container': MaterialDynamicColors.onPrimaryContainer, + 'inverse-primary': MaterialDynamicColors.inversePrimary, + secondary: MaterialDynamicColors.secondary, + 'on-secondary': MaterialDynamicColors.onSecondary, + 'secondary-container': MaterialDynamicColors.secondaryContainer, + 'on-secondary-container': MaterialDynamicColors.onSecondaryContainer, + tertiary: MaterialDynamicColors.tertiary, + 'on-tertiary': MaterialDynamicColors.onTertiary, + 'tertiary-container': MaterialDynamicColors.tertiaryContainer, + 'on-tertiary-container': MaterialDynamicColors.onTertiaryContainer, + error: MaterialDynamicColors.error, + 'on-error': MaterialDynamicColors.onError, + 'error-container': MaterialDynamicColors.errorContainer, + 'on-error-container': MaterialDynamicColors.onErrorContainer, +}; + +export class MDMaterialThemeProvider extends LitElement { + + @property({ attribute: 'source-color', type: String }) public sourceColor = '#E8DEF8'; + + @property({ attribute: 'dark', type: Boolean }) public isDark = false; + + private createStyleText(theme: Theme): string { + let styleString = ''; + for (const [k, v] of Object.entries(theme)) { + styleString += `--md-sys-color-${k}: ${v};`; + } + return styleString; + } + private createThemeFromSourceColor(color: string, isDark: boolean): Theme { + const scheme = new SchemeContent(Hct.fromInt(argbFromHex(color)), isDark, 0); + const theme: Record = {}; + + for (const [key, value] of Object.entries(materialColors)) { + theme[key] = hexFromArgb(value.getArgb(scheme)); + } + return theme as Theme; + } + + /** + * Generate material tokens + */ + public applyTheme(): void { + // Generate Styles + const theme = this.createThemeFromSourceColor(this.sourceColor, this.isDark); + + // Generate StyleText + const styleText = this.createStyleText(theme); + + // Set styles to DOM's style + this.setAttribute('style', styleText); + } + + override connectedCallback(): void { + super.connectedCallback(); + this.applyTheme(); + } + + protected override render() { + return html` +
+ +
+ ` + } +} \ No newline at end of file diff --git a/labs/material-theme-provider/material-theme-provider.ts b/labs/material-theme-provider/material-theme-provider.ts new file mode 100644 index 0000000000..55c6127f84 --- /dev/null +++ b/labs/material-theme-provider/material-theme-provider.ts @@ -0,0 +1,7 @@ +import { customElement } from "lit/decorators.js"; +import { MDMaterialThemeProvider } from "./internal/material-theme-provider"; + +@customElement('material-theme-provider') +export class MaterialThemeProvider extends MDMaterialThemeProvider { + +} \ No newline at end of file From bb9408796c5371ffd20f2148700e859def4d0da4 Mon Sep 17 00:00:00 2001 From: bre 97 Date: Wed, 20 Dec 2023 14:28:09 +0800 Subject: [PATCH 2/2] fix: rename class name, rename files' name --- .../material-theme-provider.ts | 7 ------- .../internal/theme-provider.ts} | 12 +++++------ labs/theme-provider/theme-provider.ts | 21 +++++++++++++++++++ 3 files changed, 27 insertions(+), 13 deletions(-) delete mode 100644 labs/material-theme-provider/material-theme-provider.ts rename labs/{material-theme-provider/internal/material-theme-provider.ts => theme-provider/internal/theme-provider.ts} (93%) create mode 100644 labs/theme-provider/theme-provider.ts diff --git a/labs/material-theme-provider/material-theme-provider.ts b/labs/material-theme-provider/material-theme-provider.ts deleted file mode 100644 index 55c6127f84..0000000000 --- a/labs/material-theme-provider/material-theme-provider.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { customElement } from "lit/decorators.js"; -import { MDMaterialThemeProvider } from "./internal/material-theme-provider"; - -@customElement('material-theme-provider') -export class MaterialThemeProvider extends MDMaterialThemeProvider { - -} \ No newline at end of file diff --git a/labs/material-theme-provider/internal/material-theme-provider.ts b/labs/theme-provider/internal/theme-provider.ts similarity index 93% rename from labs/material-theme-provider/internal/material-theme-provider.ts rename to labs/theme-provider/internal/theme-provider.ts index 1ff3e69d65..968c8bf14d 100644 --- a/labs/material-theme-provider/internal/material-theme-provider.ts +++ b/labs/theme-provider/internal/theme-provider.ts @@ -52,13 +52,13 @@ const materialColors = { 'on-error-container': MaterialDynamicColors.onErrorContainer, }; -export class MDMaterialThemeProvider extends LitElement { +export class MaterialThemeProvider extends LitElement { @property({ attribute: 'source-color', type: String }) public sourceColor = '#E8DEF8'; @property({ attribute: 'dark', type: Boolean }) public isDark = false; - private createStyleText(theme: Theme): string { + private createStyleTextFromTheme(theme: Theme): string { let styleString = ''; for (const [k, v] of Object.entries(theme)) { styleString += `--md-sys-color-${k}: ${v};`; @@ -68,12 +68,12 @@ export class MDMaterialThemeProvider extends LitElement { private createThemeFromSourceColor(color: string, isDark: boolean): Theme { const scheme = new SchemeContent(Hct.fromInt(argbFromHex(color)), isDark, 0); const theme: Record = {}; - + for (const [key, value] of Object.entries(materialColors)) { - theme[key] = hexFromArgb(value.getArgb(scheme)); + theme[key] = hexFromArgb(value.getArgb(scheme)); } return theme as Theme; - } + } /** * Generate material tokens @@ -83,7 +83,7 @@ export class MDMaterialThemeProvider extends LitElement { const theme = this.createThemeFromSourceColor(this.sourceColor, this.isDark); // Generate StyleText - const styleText = this.createStyleText(theme); + const styleText = this.createStyleTextFromTheme(theme); // Set styles to DOM's style this.setAttribute('style', styleText); diff --git a/labs/theme-provider/theme-provider.ts b/labs/theme-provider/theme-provider.ts new file mode 100644 index 0000000000..11d63f533a --- /dev/null +++ b/labs/theme-provider/theme-provider.ts @@ -0,0 +1,21 @@ +import { customElement } from "lit/decorators.js"; +import { MaterialThemeProvider } from "./internal/theme-provider"; + +declare global { + interface HTMLElementTagNameMap { + 'md-theme-provider': MDMaterialThemeProvider; + } + } + +/** + * generates a set of style sheets to the component. + * + * @example + * + * // ... + * + */ +@customElement('md-theme-provider') +export class MDMaterialThemeProvider extends MaterialThemeProvider { + +} \ No newline at end of file