@hug/hospitality 0.0.4-alpha.1 → 0.0.4-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hug/hospitality",
-    "version": "0.0.4-alpha.1",
+    "version": "0.0.4-alpha.13",
     "description": "Hospitality Design System",
     "homepage": "https://github.com/dsi-hug/hospitality",
     "license": "GPL-3.0-only",
@@ -22,7 +22,16 @@
             "types": "./src/tokens/index.d.ts",
             "default": "./src/tokens/tokens.css"
         },
-        "./package.json": "./package.json"
+        "./material/theme": "./src/material/theme/theme.scss",
+        "./package.json": "./package.json",
+        "./core/directives/components-styling": "./src/core/directives/components-styling.directive.ts",
+        "./components/form-field": "./src/components/form-field/form-field.scss",
+        "./components/form-field/provider": {
+            "types": "./src/components/form-field/form-field.provider.d.ts",
+            "default": "./src/components/form-field/form-field.provider.mjs"
+        },
+        "./components/dialog": "./src/components/dialog/dialog.scss",
+        "./components/button": "./src/components/button/button.scss"
     },
     "files": [
         "README.md",
@@ -44,7 +53,10 @@
         "@commitlint/config-conventional": "^19.8.0",
         "@hug/eslint-config": "^20.3.3",
         "husky": "^9.1.7",
-        "lint-staged": "^15.5.0"
+        "lint-staged": "^16.2.7"
+    },
+    "peerDependencies": {
+        "@angular/material": "19.x.x"
     },
     "commitlint": {
         "extends": [

package/src/components/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/src/components/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/src/components/form-field/form-field.provider.d.ts

@@ -0,0 +1,3 @@
+import { Provider } from '@angular/core';
+
+export declare function provideHyFormField(): Provider;

package/src/components/form-field/form-field.provider.mjs

@@ -0,0 +1,6 @@
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+
+export const provideHyFormField = () => ({
+    provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+    useValue: { appearance: 'outline' }
+});

package/src/components/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/src/core/directives/components-styling.directive.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Directive, input } from '@angular/core';
+
+export type HySizeType = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+
+@Directive({
+    selector: `
+        [hy-size],
+        [hy-appearance]
+    `,
+    standalone: true,
+    host: {
+        '[attr.hy-size]': 'hySize()',
+        '[attr.hy-appearance]': 'hyAppearance()'
+    }
+})
+export class ComponentsStylingDirective {
+    public hySize = input<HySizeType | null>(null, { alias: 'hy-size' });
+    public hyAppearance = input<string | null>(null, { alias: 'hy-appearance' });
+}

package/src/material/theme/theme.scss

@@ -0,0 +1,69 @@
+@use "@angular/material" as mat;
+@use "../../utils/map" 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
+    );
+}