@hug/hospitality 0.0.4-alpha.15 → 0.0.4-alpha.17

package/dist/fesm2022/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.mjs","sources":["../../tokens/index.ts","../../tokens/tokens.ts"],"sourcesContent":["import rawTokens from './tokens.json';\n\nexport interface Token {\n    id: string;\n    name: string;\n    type: string;\n    value: string | number;\n}\n\nexport interface TokenSystem {\n    id?: string;\n    name: string;\n    type: string;\n    reference: Token[];\n    _referenceValue:\n        | string\n        | {\n            weight: number;\n            size: number;\n            lineHeight: number;\n            font: string;\n        };\n}\n\nexport interface Tokens {\n    references: Token[];\n    systems: {\n        light: TokenSystem[];\n        dark: TokenSystem[];\n    } | TokenSystem[];\n}\n\nconst tokens: {\n    colors: Tokens;\n    typographies: Tokens;\n} = rawTokens;\n\nexport { tokens };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,MAAM,GAGR;;ACnCJ;;AAEG;;;;"}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/material/button/button.scss

@@ -0,0 +1,237 @@
+@use "@angular/material" as mat;
+
+button {
+    gap: 0.5rem;
+
+    @include mat.button-overrides(
+        (
+            filled-horizontal-padding: 1rem,
+            outlined-horizontal-padding: 1rem,
+            protected-horizontal-padding: 1rem,
+            text-horizontal-padding: 1rem,
+            text-with-icon-horizontal-padding: 1rem,
+            outlined-label-text-color: var(--mat-sys-on-surface-variant),
+            outlined-outline-color: var(--mat-sys-outline-variant),
+            outlined-disabled-outline-color: var(--mat-sys-outline-variant),
+            outlined-state-layer-color:
+                color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent),
+            outlined-ripple-color:
+                color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent),
+        )
+    );
+
+    &[mat-button],
+    &[mat-stroked-button],
+    &[mat-flat-button] {
+        > mat-icon.mat-icon {
+            margin: 0;
+            font-size: 1.25rem;
+            height: 1.25rem;
+            width: 1.25rem;
+        }
+
+        &:disabled {
+            background-color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface) 12%,
+                transparent
+            );
+        }
+    }
+
+    &[hy-size="small"] {
+        gap: 0.5rem;
+
+        @include mat.button-density(-1);
+        @include mat.button-overrides(
+            (
+                filled-horizontal-padding: 0.75rem,
+                outlined-horizontal-padding: 0.75rem,
+                protected-horizontal-padding: 0.75rem,
+                text-horizontal-padding: 0.75rem,
+                text-with-icon-horizontal-padding: 0.75rem,
+            )
+        );
+        @include mat.icon-button-overrides(
+            (
+                state-layer-size: 2rem,
+            )
+        );
+
+        &[mat-icon-button] {
+            > mat-icon.mat-icon {
+                margin: 0;
+                font-size: 1.25rem;
+                height: 1.25rem;
+                width: 1.25rem;
+            }
+        }
+    }
+
+    &[hy-size="x-large"] {
+        @include mat.button-overrides(
+            (
+                filled-container-height: 3.5rem,
+                outlined-container-height: 3.5rem,
+                protected-container-height: 3.5rem,
+                text-container-height: 3.5rem,
+
+                filled-horizontal-padding: 1.5rem,
+                outlined-horizontal-padding: 1.5rem,
+                protected-horizontal-padding: 1.5rem,
+                text-horizontal-padding: 1.5rem,
+                text-with-icon-horizontal-padding: 1.5rem,
+
+                filled-label-text-font: var(--mat-sys-title-medium-font),
+                outlined-label-text-font: var(--mat-sys-title-medium-font),
+                protected-label-text-font: var(--mat-sys-title-medium-font),
+                text-label-text-font: var(--mat-sys-title-medium-font),
+                filled-label-text-size: var(--mat-sys-title-medium-size),
+                outlined-label-text-size: var(--mat-sys-title-medium-size),
+                protected-label-text-size: var(--mat-sys-title-medium-size),
+                text-label-text-size: var(--mat-sys-title-medium-size),
+                filled-label-text-tracking: var(--mat-sys-title-medium-tracking),
+                outlined-label-text-tracking:
+                    var(--mat-sys-title-medium-tracking),
+                protected-label-text-tracking:
+                    var(--mat-sys-title-medium-tracking),
+                text-label-text-tracking: var(--mat-sys-title-medium-tracking),
+                filled-label-text-weight: var(--mat-sys-title-medium-weight),
+                outlined-label-text-weight: var(--mat-sys-title-medium-weight),
+                protected-label-text-weight: var(--mat-sys-title-medium-weight),
+                text-label-text-weight: var(--mat-sys-title-medium-weight),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                state-layer-size: 3.5rem,
+            )
+        );
+
+        &[mat-button],
+        &[mat-stroked-button],
+        &[mat-flat-button] {
+            > mat-icon.mat-icon {
+                font-size: 1.5rem;
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
+    }
+
+    &[hy-appearance="tonal"],
+    &[hy-appearance="filled"],
+    &[hy-appearance="warning-filled"] {
+        &:disabled {
+            background-color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface) 10%,
+                transparent
+            );
+        }
+    }
+
+    &[hy-appearance="tonal"] {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-secondary-container),
+                filled-label-text-color: var(--mat-sys-on-secondary-container),
+                filled-state-layer-color: var(--mat-sys-on-secondary-container),
+                filled-ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-secondary-container) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-secondary-container),
+                state-layer-color: var(--mat-sys-on-secondary-container),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-secondary-container) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        &[mat-icon-button]:enabled {
+            background-color: var(--mat-sys-secondary-container);
+        }
+    }
+
+    &[hy-appearance="filled"] {
+        background-color: var(--mat-sys-primary);
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-primary),
+                state-layer-color: var(--mat-sys-on-primary),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-primary) 10%,
+                        transparent
+                    ),
+            )
+        );
+    }
+
+    &[hy-appearance="warning-filled"] {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-warning),
+                filled-label-text-color: var(--mat-sys-on-warning),
+                filled-state-layer-color: var(--mat-sys-on-warning),
+                filled-ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-warning) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-warning),
+                state-layer-color: var(--mat-sys-on-warning),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-warning) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        &[mat-icon-button]:enabled {
+            background-color: var(--mat-sys-warning);
+        }
+    }
+
+    &[hy-appearance="warning-text"] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-warning),
+                text-state-layer-color: var(--mat-sys-warning),
+                text-ripple-color:
+                    color-mix(in srgb, var(--mat-sys-warning) 10%, transparent),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-warning),
+                state-layer-color: var(--mat-sys-warning),
+                ripple-color:
+                    color-mix(in srgb, var(--mat-sys-warning) 10%, transparent),
+            )
+        );
+    }
+}

package/dist/material/core/directives/components-styling.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export type HySizeType = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+export declare class ComponentsStylingDirective {
+    hySize: import("@angular/core").InputSignal<HySizeType | null>;
+    hyAppearance: import("@angular/core").InputSignal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentsStylingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentsStylingDirective, "        [hy-size],        [hy-appearance]    ", never, { "hySize": { "alias": "hy-size"; "required": false; "isSignal": true; }; "hyAppearance": { "alias": "hy-appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/material/core/index.d.ts

@@ -0,0 +1 @@
+export { ComponentsStylingDirective } from './directives/components-styling.directive';

package/dist/material/dialog/dialog.scss

@@ -0,0 +1,29 @@
+@use "@angular/material" as mat;
+
+mat-dialog-container {
+    @include mat.dialog-overrides(
+        (
+            actions-padding: 1.5rem,
+            headline-padding: 0.25rem 1.5rem 1rem,
+        )
+    );
+}
+
+.warning-dialog {
+    mat-dialog-container {
+        @include mat.dialog-overrides(
+            (
+                subhead-color: var(--mat-sys-warning),
+                headline-padding: 1.5rem 1.5rem 1rem,
+            )
+        );
+    }
+
+    [mat-dialog-title]:before {
+        content: "warning";
+        font-family: "Material Symbols Outlined Variable";
+        display: inline;
+        padding-right: 10px;
+        vertical-align: bottom;
+    }
+}

package/dist/material/form-field/form-field.provider.d.ts

@@ -0,0 +1,2 @@
+import type { Provider } from '@angular/core';
+export declare const provideHyFormField: () => Provider;

package/dist/material/form-field/form-field.scss

@@ -0,0 +1,97 @@
+@use "@angular/material" as mat;
+
+mat-form-field {
+    @include mat.form-field-density(-2);
+    @include mat.form-field-overrides(
+        (
+            outlined-focus-label-text-color: var(--mat-sys-primary),
+            outlined-focus-outline-color: var(--mat-sys-primary),
+            outlined-focus-outline-width: 3px,
+            outlined-error-label-text-color: var(--mat-sys-error),
+            outlined-error-focus-label-text-color: var(--mat-sys-error),
+            outlined-error-outline-color: var(--mat-sys-error),
+            outlined-error-caret-color: var(--mat-sys-error),
+            outlined-input-text-placeholder-color:
+                var(--mat-sys-on-surface-variant),
+        )
+    );
+
+    .mat-mdc-floating-label {
+        top: 50%;
+    }
+
+    &:has(textarea) {
+        &[hy-size="small"] {
+            .mat-mdc-form-field-icon-suffix {
+                padding: 0.5rem 0;
+
+                mat-icon {
+                    padding-top: 0.125rem;
+                }
+            }
+        }
+
+        &[hy-size="large"] {
+            .mat-mdc-form-field-icon-suffix {
+                padding: 1rem 0;
+            }
+        }
+
+        .mat-mdc-form-field-icon-suffix {
+            height: -webkit-fill-available;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            padding-bottom: 0.75rem;
+            padding-top: 0.75rem;
+            margin-left: 0.25rem;
+        }
+    }
+
+    &[hy-size="small"] {
+        @include mat.form-field-density(-4);
+
+        .mat-mdc-form-field-icon-suffix,
+        .mat-mdc-form-field-icon-prefix {
+            button {
+                margin: 0 0.5rem;
+            }
+
+            mat-icon {
+                font-size: 1.25rem;
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+    }
+
+    &[hy-size="large"] {
+        @include mat.form-field-density(0);
+    }
+
+    &.mat-form-field-disabled {
+        mat-hint {
+            color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface-variant) 38%,
+                transparent
+            );
+        }
+    }
+
+    > .mat-mdc-text-field-wrapper {
+        background-color: var(--mat-sys-surface-container-lowest);
+    }
+
+    .mat-mdc-form-field-icon-suffix,
+    .mat-mdc-form-field-icon-prefix {
+        width: 3rem;
+        button {
+            margin: 0 0.25rem;
+        }
+    }
+
+    mat-hint {
+        color: var(--mat-sys-on-surface-variant);
+    }
+}

package/dist/material/form-field/index.d.ts

@@ -0,0 +1 @@
+export { provideHyFormField } from './form-field.provider';

package/dist/material/theme/theme.scss

@@ -0,0 +1,69 @@
+@use "@angular/material" as mat;
+@use "./utils" as map;
+
+$override-colors: (
+    primary: var(--hy-color-primary),
+    on-primary: var(--hy-color-on-primary),
+    primary-container: var(--hy-color-primary-container),
+    on-primary-container: var(--hy-color-on-primary-container),
+    primary-fixed: var(--hy-color-primary-fixed),
+    primary-fixed-dim: var(--hy-color-primary-fixed-dim),
+    on-primary-fixed: var(--hy-color-primary-fixed),
+    on-primary-fixed-variant: var(--hy-color-primary-fixed-variant),
+    secondary: var(--hy-color-secondary),
+    on-secondary: var(--hy-color-on-secondary),
+    secondary-container: var(--hy-color-secondary-container),
+    on-secondary-conmtainer: var(--hy-color-on-secondary-container),
+    secondary-fixed: var(--hy-color-secondary-fixed),
+    secondary-fixed-dim: var(--hy-color-secondary-fixed-dim),
+    on-secondary-fixed: var(--hy-color-secondary-fixed),
+    on-secondary-fixed-variant: var(--hy-color-secondary-fixed-variant),
+    tertiary: var(--hy-color-tertiary),
+    on-tertiary: var(--hy-color-on-tertiary),
+    tertiary-container: var(--hy-color-tertiary-container),
+    on-tertiary-conmtainer: var(--hy-color-on-tertiary-container),
+    tertiary-fixed: var(--hy-color-tertiary-fixed),
+    tertiary-fixed-dim: var(--hy-color-tertiary-fixed-dim),
+    on-tertiary-fixed: var(--hy-color-tertiary-fixed),
+    on-tertiary-fixed-variant: var(--hy-color-tertiary-fixed-variant),
+    error: var(--hy-color-error),
+    on-error: var(--hy-color-on-error),
+    error-container: var(--hy-color-error-container),
+    on-error-conmtainer: var(--hy-color-on-error-container),
+    surface: var(--hy-color-surface),
+    surface-dim: var(--hy-color-surface-dim),
+    surface-bright: var(--hy-color-surface-bright),
+    surface-container-lowest: var(--hy-color-surface-container-lowest),
+    surface-container-low: var(--hy-color-surface-container-low),
+    surface-container: var(--hy-color-surface-container),
+    surface-container-high: var(--hy-color-surface-container-high),
+    surface-container-highest: var(--hy-color-surface-container-highest),
+    on-surface: var(--hy-color-on-surface),
+    on-surface-variant: var(--hy-color-on-surface-variant),
+    ouline: var(--hy-color-outline),
+    ouline-variant: var(--hy-color-outline-variant),
+    inverse-surface: var(--hy-color-inverse-surface),
+    inverse-on-surface: var(--hy-color-inverse-on-surface),
+    inverse-primary: var(--hy-color-inverse-primary),
+    background: var(--hy-color-background),
+    on-background: var(--hy-color-on-background),
+    scrim: var(--hy-color-scrim),
+    shadow: var(--hy-color-shadow),
+);
+
+$override-typography: ();
+
+$override-density: ();
+
+$overrides: map.merge-all($override-colors, $override-typography);
+
+@mixin theme {
+    @include mat.theme(
+        (
+            color: (),
+            typography: Roboto,
+            density: 0,
+        ),
+        $overrides
+    );
+}

package/dist/material/theme/utils.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+@function merge-all($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map-merge($collection, $map);
+  }
+  @return $collection;
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,30 @@
+export interface Token {
+    id: string;
+    name: string;
+    type: string;
+    value: string | number;
+}
+export interface TokenSystem {
+    id?: string;
+    name: string;
+    type: string;
+    reference: Token[];
+    _referenceValue: string | {
+        weight: number;
+        size: number;
+        lineHeight: number;
+        font: string;
+    };
+}
+export interface Tokens {
+    references: Token[];
+    systems: {
+        light: TokenSystem[];
+        dark: TokenSystem[];
+    } | TokenSystem[];
+}
+declare const tokens: {
+    colors: Tokens;
+    typographies: Tokens;
+};
+export { tokens };