feat(theming-material): add StandardTypescaleBuilder

Author: Char2sGu

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

@@ -0,0 +1,136 @@
+import { inject } from '@angular/core';
+import {
+  ThemeBuilder,
+  ThemeBuilderContext,
+  ThemeTokens,
+} from '@angularity/theming';
+
+import { TypescaleBuilder, TypescaleConfig } from './typescale';
+
+export interface StandardTypescaleBuilderConfig {
+  font: string;
+}
+
+export class StandardTypescaleBuilder
+  implements ThemeBuilder<StandardTypescaleBuilderConfig>
+{
+  protected core = inject(TypescaleBuilder);
+  build(
+    context: ThemeBuilderContext<StandardTypescaleBuilderConfig>,
+  ): ThemeTokens {
+    const { name, config } = context;
+    const typescales = STANDARD_TYPESCALES.map((typescale) => ({
+      ...typescale,
+      font: config.font,
+    }));
+    return this.core.build({ name, config: typescales });
+  }
+}
+
+export const STANDARD_TYPESCALES: Omit<TypescaleConfig, 'font'>[] = [
+  {
+    name: 'display-large',
+    weight: '400',
+    size: '57px',
+    lineHeight: '112.28%',
+    tracking: '-0.2px',
+  },
+  {
+    name: 'display-medium',
+    weight: '400',
+    size: '45px',
+    lineHeight: '115.56%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'display-small',
+    weight: '400',
+    size: '36px',
+    lineHeight: '122.22%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'headline-large',
+    weight: '400',
+    size: '32px',
+    lineHeight: '125%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'headline-medium',
+    weight: '400',
+    size: '28px',
+    lineHeight: '128.57%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'headline-small',
+    weight: '400',
+    size: '24px',
+    lineHeight: '133.33%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'title-large',
+    weight: '400',
+    size: '22px',
+    lineHeight: '127.27%',
+    tracking: '0.0px',
+  },
+  {
+    name: 'title-medium',
+    weight: '500',
+    size: '16px',
+    lineHeight: '150%',
+    tracking: '0.2px',
+  },
+  {
+    name: 'title-small',
+    weight: '500',
+    size: '14px',
+    lineHeight: '142.86%',
+    tracking: '0.1px',
+  },
+  {
+    name: 'body-large',
+    weight: '400',
+    size: '16px',
+    lineHeight: '150%',
+    tracking: '0.5px',
+  },
+  {
+    name: 'body-medium',
+    weight: '400',
+    size: '14px',
+    lineHeight: '142.86%',
+    tracking: '0.2px',
+  },
+  {
+    name: 'body-small',
+    weight: '400',
+    size: '12px',
+    lineHeight: '133.33%',
+    tracking: '0.4px',
+  },
+  {
+    name: 'label-large',
+    weight: '500',
+    size: '14px',
+    lineHeight: '142.86%',
+    tracking: '0.1px',
+  },
+  {
+    name: 'label-medium',
+    weight: '500',
+    size: '12px',
+    lineHeight: '133.33%',
+    tracking: '0.5px',
+  },
+  {
+    name: 'label-small',
+    weight: '500',
+    size: '11px',
+    lineHeight: '145.45%',
+    tracking: '0.5px',
+  },
+];