@universal-material/web 3.0.98 → 3.0.100

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.98",
3
+ "version": "3.0.100",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -15,7 +15,7 @@
15
15
  > thead > tr,
16
16
  > tfoot > tr,
17
17
  > tr {
18
- @at-root .u-table:has(thead) > tbody > tr,
18
+ @at-root .u-table:has(> thead) > tbody > tr,
19
19
  &:not(:first-child) {
20
20
  border-top: 1px solid rgba(var(--u-current-text-color-rgb), var(--u-table-divider-opacity, .2));
21
21
  }
@@ -6,6 +6,7 @@ export declare class ThemeBuilder {
6
6
  neutralColorPalette: TonalPalette;
7
7
  neutralVariantColorPalette: TonalPalette;
8
8
  private partial;
9
+ private scheme;
9
10
  private constructor();
10
11
  static create(primaryColorHex: string): ThemeBuilder;
11
12
  static createPartial(): ThemeBuilder;
@@ -1 +1 @@
1
- {"version":3,"file":"theme-builder.d.ts","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAK5F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO9C,qBAAa,YAAY;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,UAAU,EAAE,CAAM;IAC1B,mBAAmB,EAAG,YAAY,CAAC;IACnC,0BAA0B,EAAG,YAAY,CAAC;IAE1C,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO;IAIP,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAKpD,MAAM,CAAC,aAAa,IAAI,YAAY;IAOpC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAOxD,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;IAatE,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAStD,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY;IAK3C,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAuCzB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,0BAA0B;IAQlC,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM;IAS3D,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAsCpB,KAAK,IAAI,MAAM;CAoBhB"}
1
+ {"version":3,"file":"theme-builder.d.ts","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAKnG,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO9C,qBAAa,YAAY;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,UAAU,EAAE,CAAM;IAC1B,mBAAmB,EAAG,YAAY,CAAC;IACnC,0BAA0B,EAAG,YAAY,CAAC;IAE1C,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAA8B;IAE5C,OAAO;IAWP,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,GAAG,YAAY;IAIpD,MAAM,CAAC,aAAa,IAAI,YAAY;IAOpC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAOxD,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;IAatE,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,YAAY;IAStD,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY;IAK3C,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,0BAA0B;IAQlC,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM;IAQ3D,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IA6BpB,KAAK,IAAI,MAAM;CAmBhB"}
@@ -1,4 +1,4 @@
1
- import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';
1
+ import { argbFromHex, Hct, SchemeContent, TonalPalette } from '@material/material-color-utilities';
2
2
  import { CssVarBuilder } from './css-var-builder.js';
3
3
  import { neutralColors, neutralVariantColors } from './neutral-colors.js';
4
4
  function getCss(selector, content) {
@@ -6,14 +6,19 @@ function getCss(selector, content) {
6
6
  ${content}}`;
7
7
  }
8
8
  export class ThemeBuilder {
9
- constructor() {
9
+ constructor(primaryColorHex) {
10
10
  this.colors = [];
11
11
  this.partial = false;
12
+ this.scheme = null;
12
13
  this.cssClass = null;
14
+ if (!primaryColorHex) {
15
+ return;
16
+ }
17
+ this.scheme = new SchemeContent(Hct.fromInt(argbFromHex(primaryColorHex)), false, 0);
18
+ this.addColorFromPalette('primary', this.scheme.primaryPalette);
13
19
  }
14
20
  static create(primaryColorHex) {
15
- return new ThemeBuilder()
16
- .addColorFromHex('primary', primaryColorHex);
21
+ return new ThemeBuilder(primaryColorHex);
17
22
  }
18
23
  static createPartial() {
19
24
  const themeBuilder = new ThemeBuilder();
@@ -55,13 +60,11 @@ export class ThemeBuilder {
55
60
  this.cssClass = `.${this.cssClass}`;
56
61
  }
57
62
  ensureThemeColors() {
58
- const primaryColor = this.colors.find(c => c.name === 'primary');
59
- const palette = CorePalette.of(primaryColor.tonalPalette.tone(40));
60
63
  if (!this.colors.find(c => c.name === 'secondary')) {
61
- this.addColorFromPalette('secondary', palette.a2);
64
+ this.addColorFromPalette('secondary', this.scheme.secondaryPalette);
62
65
  }
63
66
  if (!this.colors.find(c => c.name === 'tertiary')) {
64
- this.addColorFromPalette('tertiary', palette.a3);
67
+ this.addColorFromPalette('tertiary', this.scheme.tertiaryPalette);
65
68
  }
66
69
  if (!this.colors.find(c => c.name === 'success')) {
67
70
  this.addFixedColor('success', '#007e33');
@@ -76,26 +79,26 @@ export class ThemeBuilder {
76
79
  this.addColorFromHex('error', '#b3261e');
77
80
  }
78
81
  if (!this.neutralColorPalette) {
79
- this.neutralColorPalette = palette.n1;
82
+ this.neutralColorPalette = this.scheme.neutralPalette;
80
83
  }
81
84
  if (!this.neutralVariantColorPalette) {
82
- this.neutralVariantColorPalette = palette.n2;
85
+ this.neutralVariantColorPalette = this.scheme.neutralVariantPalette;
83
86
  }
84
87
  }
85
88
  getNeutralVariables(dark) {
86
89
  const builder = CssVarBuilder.create();
87
90
  this.addColors(builder, neutralColors, this.neutralColorPalette, dark);
88
91
  builder
89
- .add('--u-color-body', "var(--u-color-surface)")
90
- .add('--u-color-body-rgb', "var(--u-color-surface-rgb)")
91
- .add('--u-color-inverse-body', "var(--u-color-inverse-surface)")
92
- .add('--u-color-inverse-body-rgb', "var(--u-color-inverse-surface-rgb)")
93
- .add('--u-color-on-body', "var(--u-color-on-surface)")
94
- .add('--u-color-on-body-rgb', "var(--u-color-on-surface-rgb)")
95
- .add('--u-color-on-inverse-body', "var(--u-color-on-inverse-surface)")
96
- .add('--u-color-on-inverse-body-rgb', "var(--u-color-on-inverse-surface-rgb)")
97
- .add('--u-current-text-color', "var(--u-color-on-body)")
98
- .add('--u-current-text-color-rgb', "var(--u-color-on-body-rgb)");
92
+ .add('--u-color-body', 'var(--u-color-surface)')
93
+ .add('--u-color-body-rgb', 'var(--u-color-surface-rgb)')
94
+ .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')
95
+ .add('--u-color-inverse-body-rgb', 'var(--u-color-inverse-surface-rgb)')
96
+ .add('--u-color-on-body', 'var(--u-color-on-surface)')
97
+ .add('--u-color-on-body-rgb', 'var(--u-color-on-surface-rgb)')
98
+ .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')
99
+ .add('--u-color-on-inverse-body-rgb', 'var(--u-color-on-inverse-surface-rgb)')
100
+ .add('--u-current-text-color', 'var(--u-color-on-body)')
101
+ .add('--u-current-text-color-rgb', 'var(--u-color-on-body-rgb)');
99
102
  return builder.build();
100
103
  }
101
104
  getNeutralVariantVariables(dark) {
@@ -133,20 +136,12 @@ export class ThemeBuilder {
133
136
  }
134
137
  return;
135
138
  }
136
- const tone = dark
137
- ? color.darkTone
138
- : color.lightTone;
139
- const inverseTone = dark
140
- ? color.lightTone
141
- : color.darkTone;
139
+ const tone = dark ? color.darkTone : color.lightTone;
140
+ const inverseTone = dark ? color.lightTone : color.darkTone;
142
141
  const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');
143
- builder
144
- .addFromArgb(color.name, palette.tone(tone))
145
- .addFromArgb(inverseName, palette.tone(inverseTone));
142
+ builder.addFromArgb(color.name, palette.tone(tone)).addFromArgb(inverseName, palette.tone(inverseTone));
146
143
  if (color.name === 'surface' || color.name === 'on-surface') {
147
- const prefix = color.name.startsWith('on-')
148
- ? 'on-'
149
- : '';
144
+ const prefix = color.name.startsWith('on-') ? 'on-' : '';
150
145
  builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone));
151
146
  builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone));
152
147
  }
@@ -1 +1 @@
1
- {"version":3,"file":"theme-builder.js","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\nimport { CssVarBuilder } from './css-var-builder.js';\nimport { neutralColors, neutralVariantColors } from './neutral-colors.js';\nimport { ThemeColor } from './theme-color.js';\n\nfunction getCss(selector: string, content: string): string {\n return `${selector} {\n${content}}`;\n}\n\nexport class ThemeBuilder {\n cssClass: string | null;\n colors: ThemeColor[] = [];\n neutralColorPalette!: TonalPalette;\n neutralVariantColorPalette!: TonalPalette;\n\n private partial = false;\n\n private constructor() {\n this.cssClass = null;\n }\n\n static create(primaryColorHex: string): ThemeBuilder {\n return new ThemeBuilder()\n .addColorFromHex('primary', primaryColorHex);\n }\n\n static createPartial(): ThemeBuilder {\n const themeBuilder = new ThemeBuilder();\n themeBuilder.partial = true;\n\n return themeBuilder;\n }\n\n addColorFromHex(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n\n this.addColorFromPalette(name, palette);\n return this;\n }\n\n addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {\n this.colors.push({name, lightTone: 40, darkTone: 80, tonalPalette: palette});\n this.colors.push({name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette});\n this.colors.push({name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette});\n this.colors.push({name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette});\n\n this.colors.push({name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette});\n this.colors.push({name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette});\n this.colors.push({name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette});\n this.colors.push({name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette});\n return this;\n }\n\n addFixedColor(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n this.colors.push({name, fixedTone: 80, tonalPalette: palette});\n this.colors.push({name: `on-${name}`, fixedTone: 15, tonalPalette: palette});\n this.colors.push({name: `${name}-container`, fixedTone: 90, tonalPalette: palette});\n this.colors.push({name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette});\n return this;\n }\n\n setCssClass(cssClass: string): ThemeBuilder {\n this.cssClass = cssClass;\n return this;\n }\n\n private ensureCssClassStartsWithDot(): void {\n if (!this.cssClass || this.cssClass.startsWith('.')) {\n return;\n }\n\n this.cssClass = `.${this.cssClass}`;\n }\n\n private ensureThemeColors(): void {\n\n const primaryColor = this.colors.find(c => c.name === 'primary')!;\n\n const palette = CorePalette.of(primaryColor.tonalPalette.tone(40));\n\n if (!this.colors.find(c => c.name === 'secondary')) {\n this.addColorFromPalette('secondary', palette.a2);\n }\n\n if (!this.colors.find(c => c.name === 'tertiary')) {\n this.addColorFromPalette('tertiary', palette.a3);\n }\n\n if (!this.colors.find(c => c.name === 'success')) {\n this.addFixedColor('success', '#007e33');\n }\n\n if (!this.colors.find(c => c.name === 'info')) {\n this.addFixedColor('info', '#33b5e5');\n }\n\n if (!this.colors.find(c => c.name === 'warning')) {\n this.addFixedColor('warning', '#ffbb33');\n }\n\n if (!this.colors.find(c => c.name === 'error')) {\n this.addColorFromHex('error', '#b3261e');\n }\n\n if (!this.neutralColorPalette) {\n this.neutralColorPalette = palette.n1;\n }\n\n if (!this.neutralVariantColorPalette) {\n this.neutralVariantColorPalette = palette.n2;\n }\n }\n\n private getNeutralVariables(dark: boolean): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralColors, this.neutralColorPalette, dark);\n\n builder\n .add('--u-color-body', \"var(--u-color-surface)\")\n .add('--u-color-body-rgb', \"var(--u-color-surface-rgb)\")\n .add('--u-color-inverse-body', \"var(--u-color-inverse-surface)\")\n .add('--u-color-inverse-body-rgb', \"var(--u-color-inverse-surface-rgb)\")\n .add('--u-color-on-body', \"var(--u-color-on-surface)\")\n .add('--u-color-on-body-rgb', \"var(--u-color-on-surface-rgb)\")\n .add('--u-color-on-inverse-body', \"var(--u-color-on-inverse-surface)\")\n .add('--u-color-on-inverse-body-rgb', \"var(--u-color-on-inverse-surface-rgb)\")\n .add('--u-current-text-color', \"var(--u-color-on-body)\")\n .add('--u-current-text-color-rgb', \"var(--u-color-on-body-rgb)\");\n\n return builder.build();\n }\n\n private getNeutralVariantVariables(dark: boolean): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralVariantColors, this.neutralColorPalette, dark);\n\n return builder.build()\n }\n\n getColorVariables(color: ThemeColor, dark: boolean): string {\n\n const builder = CssVarBuilder.create();\n\n this.addToneColor(builder, color, color.tonalPalette, dark)\n\n return builder.build();\n }\n\n private getColorsVariables(dark: boolean): string {\n let variables = '';\n\n for (const color of this.colors) {\n variables += this.getColorVariables(color, dark);\n }\n\n if (this.neutralColorPalette) {\n variables += this.getNeutralVariables(dark);\n }\n\n if (this.neutralVariantColorPalette) {\n variables += this.getNeutralVariantVariables(dark);\n }\n\n return variables;\n }\n\n private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette, dark: boolean): void {\n for (const color of colors) {\n this.addToneColor(builder, color, palette, dark);\n }\n }\n\n private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette, dark: boolean): void {\n if (color.fixedTone !== undefined) {\n\n if (!dark) {\n builder.addFromArgb(color.name, palette.tone(color.fixedTone));\n }\n\n return;\n }\n\n const tone = dark\n ? color.darkTone!\n : color.lightTone!;\n\n const inverseTone = dark\n ? color.lightTone!\n : color.darkTone!;\n\n const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');\n\n builder\n .addFromArgb(color.name, palette.tone(tone))\n .addFromArgb(inverseName, palette.tone(inverseTone));\n\n if (color.name === 'surface' || color.name === 'on-surface') {\n const prefix = color.name.startsWith('on-')\n ? 'on-'\n : '';\n\n builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!))\n builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!))\n }\n\n if (dark) {\n return;\n }\n }\n\n build(): string {\n\n this.ensureCssClassStartsWithDot();\n\n const lightCssClass = this.cssClass ?? ':root';\n const darkCssClass = this.cssClass\n ? `${this.cssClass}.u-dark-mode,\n${this.cssClass} .u-dark-mode`\n : '.u-dark-mode';\n\n if (!this.partial) {\n this.ensureThemeColors();\n }\n\n const variables = `${getCss(lightCssClass, `${this.getColorsVariables(false)}`)}\n\n${getCss(darkCssClass, this.getColorsVariables(true))}\n`;\n return variables;\n }\n}\n"]}
1
+ {"version":3,"file":"theme-builder.js","sourceRoot":"","sources":["../../src/theme/theme-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAGnG,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG1E,SAAS,MAAM,CAAC,QAAgB,EAAE,OAAe;IAC/C,OAAO,GAAG,QAAQ;EAClB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,OAAO,YAAY;IASvB,YAAoB,eAAwB;QAP5C,WAAM,GAAiB,EAAE,CAAC;QAIlB,YAAO,GAAG,KAAK,CAAC;QAChB,WAAM,GAAyB,IAAI,CAAC;QAG1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACrF,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,CAAC,MAAM,CAAC,eAAuB;QACnC,OAAO,IAAI,YAAY,CAAC,eAAe,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,aAAa;QAClB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QACxC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,eAAe,CAAC,IAAY,EAAE,GAAW;QACvC,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,mBAAmB,CAAC,IAAY,EAAE,OAAqB;QACrD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAC9F,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACpG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAEvG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAClF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACtF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAC7F,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa,CAAC,IAAY,EAAE,GAAW;QACrC,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACjE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACtF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;QACzF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAAC,QAAgB;QAC1B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACpD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;IACtC,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,MAAO,CAAC,gBAAgB,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,MAAO,CAAC,eAAe,CAAC,CAAC;QACrE,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,MAAO,CAAC,cAAc,CAAC;QACzD,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACrC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,MAAO,CAAC,qBAAqB,CAAC;QACvE,CAAC;IACH,CAAC;IAEO,mBAAmB,CAAC,IAAa;QACvC,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC;QAEvC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QAEvE,OAAO;aACJ,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,CAAC;aAC/C,GAAG,CAAC,oBAAoB,EAAE,4BAA4B,CAAC;aACvD,GAAG,CAAC,wBAAwB,EAAE,gCAAgC,CAAC;aAC/D,GAAG,CAAC,4BAA4B,EAAE,oCAAoC,CAAC;aACvE,GAAG,CAAC,mBAAmB,EAAE,2BAA2B,CAAC;aACrD,GAAG,CAAC,uBAAuB,EAAE,+BAA+B,CAAC;aAC7D,GAAG,CAAC,2BAA2B,EAAE,mCAAmC,CAAC;aACrE,GAAG,CAAC,+BAA+B,EAAE,uCAAuC,CAAC;aAC7E,GAAG,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;aACvD,GAAG,CAAC,4BAA4B,EAAE,4BAA4B,CAAC,CAAC;QAEnE,OAAO,OAAO,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAEO,0BAA0B,CAAC,IAAa;QAC9C,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC;QAEvC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,oBAAoB,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QAE9E,OAAO,OAAO,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,iBAAiB,CAAC,KAAiB,EAAE,IAAa;QAChD,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC;QAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAE5D,OAAO,OAAO,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAEO,kBAAkB,CAAC,IAAa;QACtC,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACpC,SAAS,IAAI,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC;QACrD,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAEO,SAAS,CAAC,OAAsB,EAAE,MAAe,EAAE,OAAqB,EAAE,IAAa;QAC7F,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,OAAsB,EAAE,KAAY,EAAE,OAAqB,EAAE,IAAa;QAC7F,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACjE,CAAC;YAED,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAU,CAAC;QAEvD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAU,CAAC,CAAC,CAAC,KAAK,CAAC,QAAS,CAAC;QAE9D,MAAM,WAAW,GAAG,WAAW,KAAK,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAEhF,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QAExG,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAEzD,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,CAAC,CAAC;YAC9E,OAAO,CAAC,WAAW,CAAC,GAAG,MAAM,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAS,CAAC,CAAC,CAAC;QAC9E,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO;QACT,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAEnC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC;QAC/C,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ;YAChC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ;EACtB,IAAI,CAAC,QAAQ,eAAe;YACxB,CAAC,CAAC,cAAc,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;QAED,MAAM,SAAS,GAAG,GAAG,MAAM,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;;EAEjF,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;QACE,OAAO,SAAS,CAAC;IACnB,CAAC;CACF","sourcesContent":["import { argbFromHex, Hct, SchemeContent, TonalPalette } from '@material/material-color-utilities';\n\nimport { Color } from './color.js';\nimport { CssVarBuilder } from './css-var-builder.js';\nimport { neutralColors, neutralVariantColors } from './neutral-colors.js';\nimport { ThemeColor } from './theme-color.js';\n\nfunction getCss(selector: string, content: string): string {\n return `${selector} {\n${content}}`;\n}\n\nexport class ThemeBuilder {\n cssClass: string | null;\n colors: ThemeColor[] = [];\n neutralColorPalette!: TonalPalette;\n neutralVariantColorPalette!: TonalPalette;\n\n private partial = false;\n private scheme: SchemeContent | null = null;\n\n private constructor(primaryColorHex?: string) {\n this.cssClass = null;\n\n if (!primaryColorHex) {\n return;\n }\n\n this.scheme = new SchemeContent(Hct.fromInt(argbFromHex(primaryColorHex)), false, 0);\n this.addColorFromPalette('primary', this.scheme.primaryPalette);\n }\n\n static create(primaryColorHex: string): ThemeBuilder {\n return new ThemeBuilder(primaryColorHex);\n }\n\n static createPartial(): ThemeBuilder {\n const themeBuilder = new ThemeBuilder();\n themeBuilder.partial = true;\n\n return themeBuilder;\n }\n\n addColorFromHex(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n\n this.addColorFromPalette(name, palette);\n return this;\n }\n\n addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {\n this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });\n\n this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });\n return this;\n }\n\n addFixedColor(name: string, hex: string): ThemeBuilder {\n const palette = TonalPalette.fromInt(argbFromHex(hex));\n this.colors.push({ name, fixedTone: 80, tonalPalette: palette });\n this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });\n this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });\n this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });\n return this;\n }\n\n setCssClass(cssClass: string): ThemeBuilder {\n this.cssClass = cssClass;\n return this;\n }\n\n private ensureCssClassStartsWithDot(): void {\n if (!this.cssClass || this.cssClass.startsWith('.')) {\n return;\n }\n\n this.cssClass = `.${this.cssClass}`;\n }\n\n private ensureThemeColors(): void {\n if (!this.colors.find(c => c.name === 'secondary')) {\n this.addColorFromPalette('secondary', this.scheme!.secondaryPalette);\n }\n\n if (!this.colors.find(c => c.name === 'tertiary')) {\n this.addColorFromPalette('tertiary', this.scheme!.tertiaryPalette);\n }\n\n if (!this.colors.find(c => c.name === 'success')) {\n this.addFixedColor('success', '#007e33');\n }\n\n if (!this.colors.find(c => c.name === 'info')) {\n this.addFixedColor('info', '#33b5e5');\n }\n\n if (!this.colors.find(c => c.name === 'warning')) {\n this.addFixedColor('warning', '#ffbb33');\n }\n\n if (!this.colors.find(c => c.name === 'error')) {\n this.addColorFromHex('error', '#b3261e');\n }\n\n if (!this.neutralColorPalette) {\n this.neutralColorPalette = this.scheme!.neutralPalette;\n }\n\n if (!this.neutralVariantColorPalette) {\n this.neutralVariantColorPalette = this.scheme!.neutralVariantPalette;\n }\n }\n\n private getNeutralVariables(dark: boolean): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralColors, this.neutralColorPalette, dark);\n\n builder\n .add('--u-color-body', 'var(--u-color-surface)')\n .add('--u-color-body-rgb', 'var(--u-color-surface-rgb)')\n .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')\n .add('--u-color-inverse-body-rgb', 'var(--u-color-inverse-surface-rgb)')\n .add('--u-color-on-body', 'var(--u-color-on-surface)')\n .add('--u-color-on-body-rgb', 'var(--u-color-on-surface-rgb)')\n .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')\n .add('--u-color-on-inverse-body-rgb', 'var(--u-color-on-inverse-surface-rgb)')\n .add('--u-current-text-color', 'var(--u-color-on-body)')\n .add('--u-current-text-color-rgb', 'var(--u-color-on-body-rgb)');\n\n return builder.build();\n }\n\n private getNeutralVariantVariables(dark: boolean): string {\n const builder = CssVarBuilder.create();\n\n this.addColors(builder, neutralVariantColors, this.neutralColorPalette, dark);\n\n return builder.build();\n }\n\n getColorVariables(color: ThemeColor, dark: boolean): string {\n const builder = CssVarBuilder.create();\n\n this.addToneColor(builder, color, color.tonalPalette, dark);\n\n return builder.build();\n }\n\n private getColorsVariables(dark: boolean): string {\n let variables = '';\n\n for (const color of this.colors) {\n variables += this.getColorVariables(color, dark);\n }\n\n if (this.neutralColorPalette) {\n variables += this.getNeutralVariables(dark);\n }\n\n if (this.neutralVariantColorPalette) {\n variables += this.getNeutralVariantVariables(dark);\n }\n\n return variables;\n }\n\n private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette, dark: boolean): void {\n for (const color of colors) {\n this.addToneColor(builder, color, palette, dark);\n }\n }\n\n private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette, dark: boolean): void {\n if (color.fixedTone !== undefined) {\n if (!dark) {\n builder.addFromArgb(color.name, palette.tone(color.fixedTone));\n }\n\n return;\n }\n\n const tone = dark ? color.darkTone! : color.lightTone!;\n\n const inverseTone = dark ? color.lightTone! : color.darkTone!;\n\n const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');\n\n builder.addFromArgb(color.name, palette.tone(tone)).addFromArgb(inverseName, palette.tone(inverseTone));\n\n if (color.name === 'surface' || color.name === 'on-surface') {\n const prefix = color.name.startsWith('on-') ? 'on-' : '';\n\n builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!));\n builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!));\n }\n\n if (dark) {\n return;\n }\n }\n\n build(): string {\n this.ensureCssClassStartsWithDot();\n\n const lightCssClass = this.cssClass ?? ':root';\n const darkCssClass = this.cssClass\n ? `${this.cssClass}.u-dark-mode,\n${this.cssClass} .u-dark-mode`\n : '.u-dark-mode';\n\n if (!this.partial) {\n this.ensureThemeColors();\n }\n\n const variables = `${getCss(lightCssClass, `${this.getColorsVariables(false)}`)}\n\n${getCss(darkCssClass, this.getColorsVariables(true))}\n`;\n return variables;\n }\n}\n"]}