@universal-material/web 3.0.10 → 3.0.11

package/src/theme/theme-builder.ts

@@ -1,201 +0,0 @@
-import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';
-
-import { Color } from './color.js';
-import { CssVarBuilder } from './css-var-builder.js';
-import { neutralColors, neutralVariantColors } from './neutral-colors.js';
-import { ThemeColor } from './theme-color.js';
-
-function getCss(selector: string, content: string): string {
-  return `${selector} {
-${content}}`;
-}
-
-export class ThemeBuilder {
-  cssClass: string | null;
-  colors: ThemeColor[] = [];
-  commonColors: ThemeColor[] = [];
-  neutralColorPalette!: TonalPalette;
-  neutralVariantColorPalette!: TonalPalette;
-
-  private partial = false;
-
-  private constructor() {
-    this.cssClass = null;
-  }
-
-  static create(primaryColorHex: string): ThemeBuilder {
-    return new ThemeBuilder()
-      .addColorFromHex('primary', primaryColorHex);
-  }
-
-  static createPartial(): ThemeBuilder {
-    const themeBuilder = new ThemeBuilder();
-    themeBuilder.partial = true;
-
-    return themeBuilder;
-  }
-
-  addColorFromHex(name: string, hex: string): ThemeBuilder {
-    const palette = TonalPalette.fromInt(argbFromHex(hex));
-
-    this.addColorFromPalette(name, palette);
-    return this;
-  }
-
-  addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {
-    this.colors.push({name, lightTone: 40, darkTone: 80, tonalPalette: palette});
-    this.colors.push({name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette});
-    this.colors.push({name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette});
-    this.colors.push({name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette});
-
-    this.colors.push({name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette});
-    this.colors.push({name: `${name}-fixed-dim`, fixedTone: 800, tonalPalette: palette});
-    this.colors.push({name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette});
-    this.colors.push({name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette});
-    return this;
-  }
-
-  addCommonColor(name: string, hex: string): ThemeBuilder {
-    this.commonColors.push({name, tonalPalette: TonalPalette.fromInt(argbFromHex(hex))})
-    return this;
-  }
-
-  setCssClass(cssClass: string): ThemeBuilder {
-    this.cssClass = cssClass;
-    return this;
-  }
-
-  private ensureCssClassStartsWithDot(): void {
-    if (!this.cssClass || this.cssClass.startsWith('.')) {
-      return;
-    }
-
-    this.cssClass = `.${this.cssClass}`;
-  }
-
-  private ensureThemeColors(): void {
-
-    const primaryColor = this.colors.find(c => c.name === 'primary')!;
-
-    const palette = CorePalette.of(primaryColor.tonalPalette.tone(40));
-
-    if (!this.colors.find(c => c.name === 'secondary')) {
-      this.addColorFromPalette('secondary', palette.a2);
-    }
-
-    if (!this.colors.find(c => c.name === 'tertiary')) {
-      this.addColorFromPalette('tertiary', palette.a3);
-    }
-
-    if (!this.neutralColorPalette) {
-      this.neutralColorPalette = palette.n1;
-    }
-
-    if (!this.neutralVariantColorPalette) {
-      this.neutralVariantColorPalette = palette.n2;
-    }
-  }
-
-  private getNeutralVariables(dark: boolean): string {
-    const builder = CssVarBuilder.create();
-
-    this.addColors(builder, neutralColors, this.neutralColorPalette, dark);
-
-    builder
-      .add('--u-color-background', "var(--u-color-surface-container-highest)")
-      .add('--u-color-inverse-background', "var(--u-color-inverse-surface-container-highest)")
-      .add('--u-color-on-background', "var(--u-color-on-surface)")
-      .add('--u-color-on-inverse-background', "var(--u-color-inverse-on-surface)");
-
-    return builder.build();
-  }
-
-  private getNeutralVariantVariables(dark: boolean): string {
-    const builder = CssVarBuilder.create();
-
-    this.addColors(builder, neutralVariantColors, this.neutralColorPalette, dark);
-
-    return builder.build()
-  }
-
-  getColorVariables(color: ThemeColor, dark: boolean): string {
-
-    const builder = CssVarBuilder.create();
-
-    this.addToneColor(builder, color, color.tonalPalette, dark)
-
-    return builder.build();
-  }
-
-  private getColorsVariables(dark: boolean): string {
-    let variables = '';
-
-    for (const color of this.colors) {
-      variables += this.getColorVariables(color, dark);
-    }
-
-    if (this.neutralColorPalette) {
-      variables += this.getNeutralVariables(dark);
-    }
-
-    if (this.neutralVariantColorPalette) {
-      variables += this.getNeutralVariantVariables(dark);
-    }
-
-    return variables;
-  }
-
-  private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette, dark: boolean): void {
-    for (const color of colors) {
-      this.addToneColor(builder, color, palette, dark);
-    }
-  }
-
-  private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette, dark: boolean): void {
-    if (color.fixedTone !== undefined) {
-      builder.addFromArgb(color.name, palette.tone(color.fixedTone));
-      return;
-    }
-
-    const tone = dark
-      ? color.darkTone!
-      : color.lightTone!;
-
-    const inverseTone = dark
-      ? color.lightTone!
-      : color.darkTone!;
-
-    builder
-      .addFromArgb(color.name, palette.tone(tone))
-      .addFromArgb(`inverse-${color.name}`, palette.tone(inverseTone));
-
-    if (dark) {
-      return;
-    }
-
-    builder
-      .addFromArgb(`light-${color.name}`, palette.tone(color.lightTone!))
-      .addFromArgb(`dark-${color.name}`, palette.tone(color.darkTone!));
-  }
-
-  build(): string {
-
-    this.ensureCssClassStartsWithDot();
-
-    const lightCssClass = this.cssClass ?? ':root';
-    const darkCssClass = this.cssClass
-      ? `${this.cssClass}.u-dark-mode,
-${this.cssClass} .u-dark-mode`
-      : '.u-dark-mode';
-
-    if (!this.partial) {
-      this.ensureThemeColors();
-    }
-
-    const variables = `${getCss(lightCssClass, `${this.getColorsVariables(false)}`)}
-
-${getCss(darkCssClass, this.getColorsVariables(true))}
-`;
-    return variables;
-  }
-}

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2021",
-    "module": "es2020",
-    "lib": ["es2021", "DOM", "DOM.Iterable"],
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitOverride": true,
-    "plugins": [
-      {
-        "name": "ts-lit-plugin",
-        "strict": true
-      }
-    ],
-    "types": ["mocha"]
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": [
-    "./node_modules/lit/decorators.d.ts"
-  ]
-}

package/web-dev-server.config.js

@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {legacyPlugin} from '@web/dev-server-legacy';
-
-const mode = process.env.MODE || 'dev';
-if (!['dev', 'prod'].includes(mode)) {
-  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
-}
-
-export default {
-  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
-  preserveSymlinks: true,
-  plugins: [
-    legacyPlugin({
-      polyfills: {
-        // Manually imported in index.html file
-        webcomponents: false,
-      },
-    }),
-  ],
-};

package/web-test-runner.config.js

@@ -1,120 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import {legacyPlugin} from '@web/dev-server-legacy';
-import {playwrightLauncher} from '@web/test-runner-playwright';
-
-const mode = process.env.MODE || 'dev';
-if (!['dev', 'prod'].includes(mode)) {
-  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
-}
-
-// Uncomment for testing on Sauce Labs
-// Must run `npm i --save-dev @web/test-runner-saucelabs` and set
-// SAUCE_USERNAME and SAUCE_USERNAME environment variables
-// ===========
-// import {createSauceLabsLauncher} from '@web/test-runner-saucelabs';
-// const sauceLabsLauncher = createSauceLabsLauncher(
-//   {
-//     user: process.env.SAUCE_USERNAME,
-//     key: process.env.SAUCE_USERNAME,
-//   },
-//   {
-//     'sauce:options': {
-//       name: 'unit tests',
-//       build: `${process.env.GITHUB_REF ?? 'local'} build ${
-//         process.env.GITHUB_RUN_NUMBER ?? ''
-//       }`,
-//     },
-//   }
-// );
-
-// Uncomment for testing on BrowserStack
-// Must run `npm i --save-dev @web/test-runner-browserstack` and set
-// BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables
-// ===========
-// import {browserstackLauncher as createBrowserstackLauncher} from '@web/test-runner-browserstack';
-// const browserstackLauncher = (config) => createBrowserstackLauncher({
-//   capabilities: {
-//     'browserstack.user': process.env.BROWSER_STACK_USERNAME,
-//     'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
-//     project: 'my-element',
-//     name: 'unit tests',
-//     build: `${process.env.GITHUB_REF ?? 'local'} build ${
-//       process.env.GITHUB_RUN_NUMBER ?? ''
-//     }`,
-//     ...config,
-//   }
-// });
-
-const browsers = {
-  // Local browser testing via playwright
-  // ===========
-  chromium: playwrightLauncher({product: 'chromium'}),
-  firefox: playwrightLauncher({product: 'firefox'}),
-  webkit: playwrightLauncher({product: 'webkit'}),
-
-  // Uncomment example launchers for running on Sauce Labs
-  // ===========
-  // chromium: sauceLabsLauncher({browserName: 'chrome', browserVersion: 'latest', platformName: 'Windows 10'}),
-  // firefox: sauceLabsLauncher({browserName: 'firefox', browserVersion: 'latest', platformName: 'Windows 10'}),
-  // safari: sauceLabsLauncher({browserName: 'safari', browserVersion: 'latest', platformName: 'macOS 10.15'}),
-
-  // Uncomment example launchers for running on Sauce Labs
-  // ===========
-  // chromium: browserstackLauncher({browserName: 'Chrome', os: 'Windows', os_version: '10'}),
-  // firefox: browserstackLauncher({browserName: 'Firefox', os: 'Windows', os_version: '10'}),
-  // safari: browserstackLauncher({browserName: 'Safari', browser_version: '14.0', os: 'OS X', os_version: 'Big Sur'}),
-};
-
-// Prepend BROWSERS=x,y to `npm run test` to run a subset of browsers
-// e.g. `BROWSERS=chromium,firefox npm run test`
-const noBrowser = (b) => {
-  throw new Error(`No browser configured named '${b}'; using defaults`);
-};
-let commandLineBrowsers;
-try {
-  commandLineBrowsers = process.env.BROWSERS?.split(',').map(
-    (b) => browsers[b] ?? noBrowser(b)
-  );
-} catch (e) {
-  console.warn(e);
-}
-
-// https://modern-web.dev/docs/test-runner/cli-and-configuration/
-export default {
-  rootDir: '.',
-  files: ['./test/**/*_test.js'],
-  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
-  preserveSymlinks: true,
-  browsers: commandLineBrowsers ?? Object.values(browsers),
-  testFramework: {
-    // https://mochajs.org/api/mocha
-    config: {
-      ui: 'tdd',
-      timeout: '60000',
-    },
-  },
-  plugins: [
-    // Detect browsers without modules (e.g. IE11) and transform to SystemJS
-    // (https://modern-web.dev/docs/dev-server/plugins/legacy/).
-    legacyPlugin({
-      polyfills: {
-        webcomponents: true,
-        // Inject lit's polyfill-support module into test files, which is required
-        // for interfacing with the webcomponents polyfills
-        custom: [
-          {
-            name: 'lit-polyfill-support',
-            path: 'node_modules/lit/polyfill-support.js',
-            test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
-            module: false,
-          },
-        ],
-      },
-    }),
-  ],
-};