feat(theming): redesign with async theme support

Author: Char2sGu

packages/theming-material/src/scheme/scheme-static-color.builder.ts

@@ -1,8 +1,8 @@
 import { inject } from '@angular/core';
 import {
-  ThemeBuilder,
-  ThemeBuilderContext,
   ThemeTokens,
+  TokenBuilder,
+  TokenBuilderContext,
 } from '@angularity/theming';
 import { Hct, TonalPalette } from '@material/material-color-utilities';
 
@@ -41,7 +41,7 @@ export interface SchemeStaticColorBuilderConfig {
 }
 
 /**
- * Implementation of `ThemeBuilder` that generates hex color tokens for Material
+ * Implementation of `TokenBuilder` that generates hex color tokens for Material
  * Design static colors (aka. custom colors).
  *
  * @remarks
@@ -63,19 +63,19 @@ export interface SchemeStaticColorBuilderConfig {
  *
  * @example
  *  ```ts
- *  provideTheme(
- *    withThemeBuilder("scheme", SchemeBuilder, {
+ *  createTheme(
+ *    scheduleTokenBuild("scheme", SchemeBuilder, {
  *      type: SchemeTonalSpot,
  *      source: Hct.fromInt(0x33bdff),
  *      mode: SchemeMode.Light,
  *      contrast: SchemeContrastLevel.Standard,
  *    }),
- *    withThemeBuilder("scheme", SchemeStaticColorBuilder, {
+ *    scheduleTokenBuild("scheme", SchemeStaticColorBuilder, {
  *      name: "success",
  *      source: Hct.fromInt(0x8cb84a),
  *      mode: SchemeMode.Light,
  *    }),
- *    withThemeBuilder("scheme", SchemeStaticColorBuilder, {
+ *    scheduleTokenBuild("scheme", SchemeStaticColorBuilder, {
  *      name: "warning",
  *      source: Hct.fromInt(0xd6913e),
  *      mode: SchemeMode.Light,
@@ -84,12 +84,12 @@ export interface SchemeStaticColorBuilderConfig {
  *  ```
  */
 export class SchemeStaticColorBuilder
-  implements ThemeBuilder<SchemeStaticColorBuilderConfig>
+  implements TokenBuilder<SchemeStaticColorBuilderConfig>
 {
   protected hctFormatter = inject(HctFormatter);
 
   build(
-    context: ThemeBuilderContext<SchemeStaticColorBuilderConfig>,
+    context: TokenBuilderContext<SchemeStaticColorBuilderConfig>,
   ): ThemeTokens {
     const { name, config } = context;
     const palette = TonalPalette.fromHct(config.source);

packages/theming-material/src/scheme/scheme.builder.spec.ts

@@ -1,12 +1,15 @@
 /// <reference types="jasmine" />
 
 import { TestBed } from '@angular/core/testing';
-import { provideTheme, ThemeTokenRegistry } from '@angularity/theming';
+import {
+  createTheme,
+  InMemoryThemeTokenRegistry,
+  provideTheme,
+  scheduleTokenBuild,
+  ThemeTokenRegistry,
+} from '@angularity/theming';
 import { Hct, SchemeVibrant } from '@material/material-color-utilities';
-import { withThemeBuilder } from 'packages/theming/src/builder-composition';
 
-import { provide } from '../../../core/src/provide';
-import { InMemoryThemeTokenRegistry } from '../../../theming/src/token';
 import {
   SchemeBuilder,
   SchemeContrastLevel,
@@ -18,21 +21,23 @@ describe('SchemeBuilder', () => {
     TestBed.configureTestingModule({
       providers: [
         provideTheme(
-          withThemeBuilder('scheme', SchemeBuilder, {
-            type: SchemeVibrant,
-            source: Hct.fromInt(0x33bdff),
-            mode: SchemeMode.Light,
-            contrast: SchemeContrastLevel.Standard,
-          }),
+          createTheme(
+            scheduleTokenBuild('scheme', SchemeBuilder, {
+              type: SchemeVibrant,
+              source: Hct.fromInt(0x33bdff),
+              mode: SchemeMode.Light,
+              contrast: SchemeContrastLevel.Standard,
+            }),
+          ),
         ),
         InMemoryThemeTokenRegistry,
-        provide({
-          token: ThemeTokenRegistry,
+        {
+          provide: ThemeTokenRegistry,
           useExisting: InMemoryThemeTokenRegistry,
-        }),
+        },
       ],
     });
-    const tokens = TestBed.inject(InMemoryThemeTokenRegistry).tokens;
+    const tokens = TestBed.inject(InMemoryThemeTokenRegistry).getAll();
     expect(tokens['scheme-primary']).toBeDefined();
     expect(tokens['scheme-on-primary']).toBe('#ffffff');
   });

packages/theming-material/src/scheme/scheme.builder.ts

@@ -1,8 +1,8 @@
 import { inject, Injectable } from '@angular/core';
 import {
-  ThemeBuilder,
-  ThemeBuilderContext,
   ThemeTokens,
+  TokenBuilder,
+  TokenBuilderContext,
 } from '@angularity/theming';
 import {
   DynamicColor,
@@ -98,7 +98,7 @@ export interface SchemeBuilderConfig {
 }
 
 /**
- * Implementation of `ThemeBuilder` that generates hex color tokens for all
+ * Implementation of `TokenBuilder` that generates hex color tokens for all
  * Material Design color roles.
  *
  * @remarks
@@ -116,8 +116,8 @@ export interface SchemeBuilderConfig {
  *
  * @example
  *  ```ts
- *  provideTheme(
- *    withThemeBuilder("scheme", SchemeBuilder, {
+ *  createTheme(
+ *    scheduleTokenBuild("scheme", SchemeBuilder, {
  *      type: SchemeTonalSpot,
  *      source: Hct.fromInt(0x33bdff),
  *      mode: SchemeMode.Light,
@@ -127,10 +127,10 @@ export interface SchemeBuilderConfig {
  *  ```
  */
 @Injectable({ providedIn: 'root' })
-export class SchemeBuilder implements ThemeBuilder<SchemeBuilderConfig> {
+export class SchemeBuilder implements TokenBuilder<SchemeBuilderConfig> {
   protected hctFormatter = inject(HctFormatter);
 
-  build(context: ThemeBuilderContext<SchemeBuilderConfig>): ThemeTokens {
+  build(context: TokenBuilderContext<SchemeBuilderConfig>): ThemeTokens {
     const scheme = this.getScheme(context.config);
     const tokens: ThemeTokens = {};
     for (const [k, v] of Object.entries(MaterialDynamicColors)) {

packages/theming-material/src/typescale/standard-typescale.builder.ts

@@ -1,8 +1,8 @@
 import { inject, Injectable } from '@angular/core';
 import {
-  ThemeBuilder,
-  ThemeBuilderContext,
   ThemeTokens,
+  TokenBuilder,
+  TokenBuilderContext,
 } from '@angularity/theming';
 
 import { STANDARD_TYPESCALES } from './standard-typescales';
@@ -16,7 +16,7 @@ export interface StandardTypescaleBuilderConfig {
 }
 
 /**
- * Implementation of `ThemeBuilder` that generates theme tokens of typescale
+ * Implementation of `TokenBuilder` that generates theme tokens of typescale
  * levels strictly following the Material specifications.
  *
  * @remarks
@@ -34,20 +34,20 @@ export interface StandardTypescaleBuilderConfig {
  *
  * @example
  *  ```ts
- *  provideTheme(
- *    withThemeBuilder("typescale", StandardTypescaleBuilder, {
+ *  createTheme(
+ *    scheduleTokenBuild("typescale", StandardTypescaleBuilder, {
  *      font: 'Roboto, sans-serif',
  *    }),
  *  ),
  *  ```
  */
 @Injectable({ providedIn: 'root' })
 export class StandardTypescaleBuilder
-  implements ThemeBuilder<StandardTypescaleBuilderConfig>
+  implements TokenBuilder<StandardTypescaleBuilderConfig>
 {
   protected core = inject(TypescaleBuilder);
   build(
-    context: ThemeBuilderContext<StandardTypescaleBuilderConfig>,
+    context: TokenBuilderContext<StandardTypescaleBuilderConfig>,
   ): ThemeTokens {
     const { name, config } = context;
     const typescales = STANDARD_TYPESCALES.map((typescale) => ({

packages/theming-material/src/typescale/typescale.builder.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import {
-  ThemeBuilder,
-  ThemeBuilderContext,
   ThemeTokens,
+  TokenBuilder,
+  TokenBuilderContext,
 } from '@angularity/theming';
 
 /**
@@ -57,7 +57,7 @@ export interface TypescaleConfig {
 export interface TypescaleBuilderConfig extends Array<TypescaleConfig> {}
 
 /**
- * Implementation of `ThemeBuilder` for generating theme tokens relevant to
+ * Implementation of `TokenBuilder` for generating theme tokens relevant to
  * Material typescale levels.
  *
  * @remarks
@@ -77,7 +77,7 @@ export interface TypescaleBuilderConfig extends Array<TypescaleConfig> {}
  * @example
  *  ```ts
  *  const font = 'Roboto, sans-serif';
- *  export const APP_TYPESCALES: TypescaleConfig[] = [
+ *  export const appTypescales: TypescaleConfig[] = [
  *    {
  *      font,
  *      name: 'display-large',
@@ -98,15 +98,15 @@ export interface TypescaleBuilderConfig extends Array<TypescaleConfig> {}
  *  ];
  *  ```
  *  ```ts
- *  provideTheme(
- *    withThemeBuilder("typescale", TypescaleBuilder, APP_TYPESCALES),
+ *  createTheme(
+ *    scheduleTokenBuild("typescale", TypescaleBuilder, appTypescales),
  *  ),
  *  ```
  *
  */
 @Injectable({ providedIn: 'root' })
-export class TypescaleBuilder implements ThemeBuilder<TypescaleBuilderConfig> {
-  build(context: ThemeBuilderContext<TypescaleBuilderConfig>): ThemeTokens {
+export class TypescaleBuilder implements TokenBuilder<TypescaleBuilderConfig> {
+  build(context: TokenBuilderContext<TypescaleBuilderConfig>): ThemeTokens {
     const tokens: ThemeTokens = {};
     for (const typescale of context.config) {
       const result = this.buildTypescale(typescale);

packages/theming/src/builders/tokens.ts packages/theming/src/builders/vanilla.tspackages/theming/src/builders/tokens.ts renamed to packages/theming/src/builders/vanilla.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
 
-import { ThemeBuilder, ThemeBuilderContext } from '../builder';
 import { ThemeTokens } from '../token';
+import { TokenBuilder, TokenBuilderContext } from '../token-builder';
 
-export interface TokensBuilderConfig extends ThemeTokens {}
+export interface VanillaBuilderConfig extends ThemeTokens {}
 
 /**
- * An implementation of `ThemeBuilder` that simply accepts an object of
+ * An implementation of `TokenBuilder` that simply accepts an object of
  * pre-defined theme tokens as configuration and returns them as is when
  * requested to generate tokens.
  *
@@ -16,21 +16,21 @@ export interface TokensBuilderConfig extends ThemeTokens {}
  *
  * @example
  *  ```ts
- *  withThemeBuilder("tokens-", TokensBuilder, {
+ *  scheduleTokenBuild("tokens-", VanillaBuilder, {
  *    "primary-color": "#ff0000",
  *  }),
  *  ```
  *
  * @example
  *  ```ts
- *  withThemeBuilder("", TokensBuilder, {
+ *  scheduleTokenBuild("", VanillaBuilder, {
  *    "primary-color": "#ff0000",
  *  }),
  *  ```
  */
 @Injectable({ providedIn: 'root' })
-export class TokensBuilder implements ThemeBuilder<TokensBuilderConfig> {
-  build(context: ThemeBuilderContext<TokensBuilderConfig>): ThemeTokens {
+export class VanillaBuilder implements TokenBuilder<VanillaBuilderConfig> {
+  build(context: TokenBuilderContext<VanillaBuilderConfig>): ThemeTokens {
     const tokens: ThemeTokens = {};
     for (const [key, value] of Object.entries(context.config))
       tokens[`${context.name}${key}`] = value;