@almoamendev/ngx-md3 0.0.8

package/src/lib/styles/tokens/md-scheme.scss

@@ -0,0 +1,143 @@
+:root, .md-scheme-light {
+    /* Primary */
+    --md-scheme-primary: 92, 77, 212; /* P-40 */
+    --md-scheme-on-primary: 255, 255, 255; /* P-100 */
+    --md-scheme-primary-container: 224, 217, 255; /* P-90 */
+    --md-scheme-on-primary-container: 28, 14, 90; /* P-30 */
+
+    /* Secondary */
+    --md-scheme-secondary: 89, 84, 106; /* S-40 */
+    --md-scheme-on-secondary: 255, 255, 255; /* S-100 */
+    --md-scheme-secondary-container: 221, 216, 232; /* S-90 */
+    --md-scheme-on-secondary-container: 28, 24, 40; /* S-30 */
+
+    /* Tertiary */
+    --md-scheme-tertiary: 122, 85, 102; /* T-40 */
+    --md-scheme-on-tertiary: 255, 255, 255; /* T-100 */
+    --md-scheme-tertiary-container: 255, 217, 229; /* T-90 */
+    --md-scheme-on-tertiary-container: 44, 21, 33; /* T-30 */
+
+    /* Primary Fixed */
+    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 */
+    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary-fixed: 27, 13, 89; /* P-20 */
+    --md-scheme-on-primary-fixed-variant: 74, 62, 169; /* P-40 */
+
+    /* Secondary Fixed */
+    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
+    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
+    --md-scheme-on-secondary-fixed-variant: 69, 63, 82; /* S-40 */
+
+    /* Tertiary Fixed */
+    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
+    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
+    --md-scheme-on-tertiary-fixed-variant: 89, 59, 75; /* T-40 */
+
+    /* Error */
+    --md-scheme-error: 186, 26, 26; /* E-40 */
+    --md-scheme-on-error: 255, 255, 255; /* E-100 */
+    --md-scheme-error-container: 255, 218, 214; /* E-90 */
+    --md-scheme-on-error-container: 65, 0, 2; /* E-30 */
+
+    /* Surface */
+    --md-scheme-surface-dim: 226, 224, 235; /* N-87 */
+    --md-scheme-surface: 247, 246, 250; /* N-98 */
+    --md-scheme-surface-bright: 247, 246, 250; /* N-98 */
+
+    --md-scheme-surface-container-lowest: 255, 255, 255; /* N-100 */
+    --md-scheme-surface-container-low: 242, 239, 248; /* N-96 */
+    --md-scheme-surface-container: 236, 232, 241; /* N-94 */
+    --md-scheme-surface-container-high: 230, 226, 236; /* N-92 */
+    --md-scheme-surface-container-highest: 224, 221, 231; /* N-90 */
+
+    /* On-Surface */
+    --md-scheme-on-surface: 26, 26, 30; /* N-10 */
+    --md-scheme-on-surface-variant: 73, 69, 79; /* NV-30 */
+
+    /* Outline */
+    --md-scheme-outline: 121, 116, 126; /* NV-50 */
+    --md-scheme-outline-variant: 202, 196, 208; /* NV-80 */
+
+    /* Inverse */
+    --md-scheme-inverse-surface: 52, 48, 52; /* N-20 */
+    --md-scheme-inverse-on-surface: 250, 248, 253; /* N-95 */
+    --md-scheme-inverse-primary: 92, 77, 212; /* P-80 */
+
+    /* Other */
+    --md-scheme-scrim: 0, 0, 0;
+    --md-scheme-shadow: 0, 0, 0;
+}
+
+.md-scheme-dark {
+    /* Primary */
+    --md-scheme-primary: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary: 55, 30, 146; /* P-20 */
+    --md-scheme-primary-container: 74, 62, 169; /* P-30 */
+    --md-scheme-on-primary-container: 224, 217, 255; /* P-90 */
+
+    /* Secondary */
+    --md-scheme-secondary: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary: 48, 44, 63; /* S-20 */
+    --md-scheme-secondary-container: 69, 63, 82; /* S-30 */
+    --md-scheme-on-secondary-container: 221, 216, 232; /* S-90 */
+
+    /* Tertiary */
+    --md-scheme-tertiary: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary: 68, 37, 54; /* T-20 */
+    --md-scheme-tertiary-container: 89, 59, 75; /* T-30 */
+    --md-scheme-on-tertiary-container: 255, 217, 229; /* T-90 */
+
+    /* Primary Fixed */
+    --md-scheme-primary-fixed: 224, 217, 255; /* P-90 (same as light) */
+    --md-scheme-primary-fixed-dim: 199, 191, 255; /* P-80 */
+    --md-scheme-on-primary-fixed: 28, 14, 90; /* P-20 */
+    --md-scheme-on-primary-fixed-variant: 224, 217, 255; /* stays same */
+
+    /* Secondary Fixed */
+    --md-scheme-secondary-fixed: 221, 216, 232; /* S-90 */
+    --md-scheme-secondary-fixed-dim: 200, 194, 217; /* S-80 */
+    --md-scheme-on-secondary-fixed: 28, 24, 40; /* S-20 */
+    --md-scheme-on-secondary-fixed-variant: 221, 216, 232; 
+
+    /* Tertiary Fixed */
+    --md-scheme-tertiary-fixed: 255, 217, 229; /* T-90 */
+    --md-scheme-tertiary-fixed-dim: 224, 189, 209; /* T-80 */
+    --md-scheme-on-tertiary-fixed: 44, 21, 33; /* T-20 */
+    --md-scheme-on-tertiary-fixed-variant: 255, 217, 229; 
+
+    /* Error */
+    --md-scheme-error: 255, 180, 171; /* E-80 */
+    --md-scheme-on-error: 105, 0, 5; /* E-20 */
+    --md-scheme-error-container: 147, 0, 10; /* E-30 */
+    --md-scheme-on-error-container: 255, 218, 214; /* E-90 */
+
+    /* Surface */
+    --md-scheme-surface-dim: 20, 18, 24; /* N-6 */
+    --md-scheme-surface: 20, 18, 24; /* N-6 */
+    --md-scheme-surface-bright: 58, 56, 62; /* N-24 */
+
+    --md-scheme-surface-container-lowest: 15, 15, 17; /* N-4 */
+    --md-scheme-surface-container-low: 29, 26, 33; /* N-10 */
+    --md-scheme-surface-container: 35, 31, 39; /* N-12 */
+    --md-scheme-surface-container-high: 43, 39, 48; /* N-17 */
+    --md-scheme-surface-container-highest: 53, 49, 58; /* N-22 */
+
+    /* On-Surface */
+    --md-scheme-on-surface: 230, 225, 232; /* N-90 */
+    --md-scheme-on-surface-variant: 202, 196, 208; /* NV-80 */
+
+    /* Outline */
+    --md-scheme-outline: 147, 143, 153; /* NV-60 */
+    --md-scheme-outline-variant: 73, 69, 79; /* NV-30 */
+
+    /* Inverse */
+    --md-scheme-inverse-surface: 230, 225, 232; /* N-90 */
+    --md-scheme-inverse-on-surface: 29, 26, 33; /* N-20 */
+    --md-scheme-inverse-primary: 92, 77, 212; /* P-40 */
+
+    /* Other */
+    --md-scheme-scrim: 0, 0, 0;
+    --md-scheme-shadow: 0, 0, 0;
+}

package/src/lib/styles/typography/type-body.spec.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeBody } from './type-body';
+
+@Component({
+    imports: [TypeBody],
+    template: `<md3-type-body></md3-type-body>`,
+})
+class HostComponent { }
+
+describe('TypeBody', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeBody)).injector.get(TypeBody);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-body.ts

@@ -0,0 +1,42 @@
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-body, [md3-type-body]',
+    host: {
+        'class': 'md3-text-body',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeBody {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}

package/src/lib/styles/typography/type-display.spec.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeDisplay } from './type-display';
+
+@Component({
+    imports: [TypeDisplay],
+    template: `<md3-type-display></md3-type-display>`,
+})
+class HostComponent { }
+
+describe('TypeDisplay', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeDisplay)).injector.get(TypeDisplay);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-display.ts

@@ -0,0 +1,42 @@
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-display, [md3-type-display]',
+    host: {
+        'class': 'md3-text-display',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeDisplay {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}

package/src/lib/styles/typography/type-headline.spec.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeHeadline } from './type-headline';
+
+@Component({
+    imports: [TypeHeadline],
+    template: `<md3-type-headline></md3-type-headline>`,
+})
+class HostComponent { }
+
+describe('TypeHeadline', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeHeadline)).injector.get(TypeHeadline);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-headline.ts

@@ -0,0 +1,42 @@
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-headline, [md3-type-headline]',
+    host: {
+        'class': 'md3-text-headline',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeHeadline {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}

package/src/lib/styles/typography/type-label.spec.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeLabel } from './type-label';
+
+@Component({
+    imports: [TypeLabel],
+    template: `<md3-type-label></md3-type-label>`,
+})
+class HostComponent { }
+
+describe('TypeLabel', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeLabel)).injector.get(TypeLabel);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-label.ts

@@ -0,0 +1,42 @@
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-label, [md3-type-label]',
+    host: {
+        'class': 'md3-text-label',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeLabel {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}

package/src/lib/styles/typography/type-title.spec.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TypeTitle } from './type-title';
+
+@Component({
+    imports: [TypeTitle],
+    template: `<md3-type-title></md3-type-title>`,
+})
+class HostComponent { }
+
+describe('TypeTitle', () => {
+    let fixture: ComponentFixture<HostComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HostComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+    });
+
+    it('should create an instance', () => {
+        const directive = fixture.debugElement.query(By.directive(TypeTitle)).injector.get(TypeTitle);
+        expect(directive).toBeTruthy();
+    });
+});

package/src/lib/styles/typography/type-title.ts

@@ -0,0 +1,42 @@
+import { booleanAttribute, Directive, effect, ElementRef, input } from '@angular/core';
+import { TextColor } from '../../types/text-color.type';
+import { TextSize } from '../../types/text-size.type';
+
+@Directive({
+    selector: 'md3-type-title, [md3-type-title]',
+    host: {
+        'class': 'md3-text-title',
+        '[class.md3-emphasized]': 'emphasized()',
+    }
+})
+export class TypeTitle {
+    public size = input<TextSize | 'default'>('default');
+    public color = input<TextColor | 'default'>('default');
+    public emphasized = input<boolean, unknown>(false, {
+        transform: booleanAttribute,
+    });
+
+    constructor(public el: ElementRef) {
+        effect((onCleanup) => {
+            const size = 'md3-text-' + this.size();
+            this.element.classList.add(size);
+
+            onCleanup(() => {
+                this.element.classList.remove(size);
+            });
+        });
+
+        effect((onCleanup) => {
+            const color = 'md3-color-' + this.color();
+            this.element.classList.add(color);
+
+            onCleanup(() => {
+                this.element.classList.remove(color);
+            });
+        });
+    }
+
+    public get element(): HTMLElement {
+        return this.el.nativeElement as HTMLElement;
+    }
+}