@hug/hospitality 0.0.4-alpha.1 → 0.0.4-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -2
- package/src/components/dialog/dialog.scss +29 -0
- package/src/components/form-field/form-field.provider.d.ts +3 -0
- package/src/components/form-field/form-field.provider.mjs +6 -0
- package/src/components/form-field/form-field.scss +97 -0
- package/src/material/theme/theme.scss +65 -0
- package/src/tokens/tokens.css +792 -429
- package/src/tokens/tokens.json +4721 -2457
- package/src/tokens/colors.css +0 -431
- package/src/tokens/index.css +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/hospitality",
|
|
3
|
-
"version": "0.0.4-alpha.
|
|
3
|
+
"version": "0.0.4-alpha.10",
|
|
4
4
|
"description": "Hospitality Design System",
|
|
5
5
|
"homepage": "https://github.com/dsi-hug/hospitality",
|
|
6
6
|
"license": "GPL-3.0-only",
|
|
@@ -22,7 +22,14 @@
|
|
|
22
22
|
"types": "./src/tokens/index.d.ts",
|
|
23
23
|
"default": "./src/tokens/tokens.css"
|
|
24
24
|
},
|
|
25
|
-
"./
|
|
25
|
+
"./material/theme": "./src/material/theme/theme.scss",
|
|
26
|
+
"./package.json": "./package.json",
|
|
27
|
+
"./form-field": "./src/components/form-field/form-field.scss",
|
|
28
|
+
"./form-field/provider": {
|
|
29
|
+
"types": "./src/components/form-field/form-field.provider.d.ts",
|
|
30
|
+
"default": "./src/components/form-field/form-field.provider.mjs"
|
|
31
|
+
},
|
|
32
|
+
"./dialog": "./src/components/dialog/dialog.scss"
|
|
26
33
|
},
|
|
27
34
|
"files": [
|
|
28
35
|
"README.md",
|
|
@@ -46,6 +53,9 @@
|
|
|
46
53
|
"husky": "^9.1.7",
|
|
47
54
|
"lint-staged": "^15.5.0"
|
|
48
55
|
},
|
|
56
|
+
"peerDependencies": {
|
|
57
|
+
"@angular/material": "19.x.x"
|
|
58
|
+
},
|
|
49
59
|
"commitlint": {
|
|
50
60
|
"extends": [
|
|
51
61
|
"@commitlint/config-conventional"
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
|
|
3
|
+
mat-dialog-container {
|
|
4
|
+
@include mat.dialog-overrides(
|
|
5
|
+
(
|
|
6
|
+
actions-padding: 1.5rem,
|
|
7
|
+
headline-padding: 0.25rem 1.5rem 1rem,
|
|
8
|
+
)
|
|
9
|
+
);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.warning-dialog {
|
|
13
|
+
mat-dialog-container {
|
|
14
|
+
@include mat.dialog-overrides(
|
|
15
|
+
(
|
|
16
|
+
subhead-color: var(--mat-sys-warning),
|
|
17
|
+
headline-padding: 1.5rem 1.5rem 1rem,
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[mat-dialog-title]:before {
|
|
23
|
+
content: "warning";
|
|
24
|
+
font-family: "Material Symbols Outlined Variable";
|
|
25
|
+
display: inline;
|
|
26
|
+
padding-right: 10px;
|
|
27
|
+
vertical-align: bottom;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
|
|
3
|
+
mat-form-field {
|
|
4
|
+
@include mat.form-field-density(-2);
|
|
5
|
+
@include mat.form-field-overrides(
|
|
6
|
+
(
|
|
7
|
+
outlined-focus-label-text-color: var(--mat-sys-primary),
|
|
8
|
+
outlined-focus-outline-color: var(--mat-sys-primary),
|
|
9
|
+
outlined-focus-outline-width: 3px,
|
|
10
|
+
outlined-error-label-text-color: var(--mat-sys-error),
|
|
11
|
+
outlined-error-focus-label-text-color: var(--mat-sys-error),
|
|
12
|
+
outlined-error-outline-color: var(--mat-sys-error),
|
|
13
|
+
outlined-error-caret-color: var(--mat-sys-error),
|
|
14
|
+
outlined-input-text-placeholder-color:
|
|
15
|
+
var(--mat-sys-on-surface-variant),
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
.mat-mdc-floating-label {
|
|
20
|
+
top: 50%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:has(textarea) {
|
|
24
|
+
&[size="small"] {
|
|
25
|
+
.mat-mdc-form-field-icon-suffix {
|
|
26
|
+
padding: 0.5rem 0;
|
|
27
|
+
|
|
28
|
+
mat-icon {
|
|
29
|
+
padding-top: 0.125rem;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[size="large"] {
|
|
35
|
+
.mat-mdc-form-field-icon-suffix {
|
|
36
|
+
padding: 1rem 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.mat-mdc-form-field-icon-suffix {
|
|
41
|
+
height: -webkit-fill-available;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: flex-start;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
padding-bottom: 0.75rem;
|
|
46
|
+
padding-top: 0.75rem;
|
|
47
|
+
margin-left: 0.25rem;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&[size="small"] {
|
|
52
|
+
@include mat.form-field-density(-4);
|
|
53
|
+
|
|
54
|
+
.mat-mdc-form-field-icon-suffix,
|
|
55
|
+
.mat-mdc-form-field-icon-prefix {
|
|
56
|
+
button {
|
|
57
|
+
margin: 0 0.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
mat-icon {
|
|
61
|
+
font-size: 1.25rem;
|
|
62
|
+
width: 1.25rem;
|
|
63
|
+
height: 1.25rem;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&[size="large"] {
|
|
69
|
+
@include mat.form-field-density(0);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&.mat-form-field-disabled {
|
|
73
|
+
mat-hint {
|
|
74
|
+
color: color-mix(
|
|
75
|
+
in srgb,
|
|
76
|
+
var(--mat-sys-on-surface-variant) 38%,
|
|
77
|
+
transparent
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
> .mat-mdc-text-field-wrapper {
|
|
83
|
+
background-color: var(--mat-sys-surface-container-lowest);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mat-mdc-form-field-icon-suffix,
|
|
87
|
+
.mat-mdc-form-field-icon-prefix {
|
|
88
|
+
width: 3rem;
|
|
89
|
+
button {
|
|
90
|
+
margin: 0 0.25rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
mat-hint {
|
|
95
|
+
color: var(--mat-sys-on-surface-variant);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@include mat.core();
|
|
3
|
+
|
|
4
|
+
$hy-theme: mat.define-theme();
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
@include mat.theme-overrides((
|
|
8
|
+
/* Colors */
|
|
9
|
+
primary: var(--hy-color-primary),
|
|
10
|
+
on-primary: var(--hy-color-on-primary),
|
|
11
|
+
primary-container: var(hy-color-primary-container),
|
|
12
|
+
on-primary-conmtainer: var(hy-color-on-primary-container),
|
|
13
|
+
primary-fixed: var(hy-color-primary-fixed),
|
|
14
|
+
primary-fixed-dim: var(hy-color-primary-fixed-dim),
|
|
15
|
+
on-primary-fixed: var(hy-color-primary-fixed),
|
|
16
|
+
on-primary-fixed-variant: var(hy-color-primary-fixed-variant),
|
|
17
|
+
|
|
18
|
+
secondary: var(--hy-color-secondary),
|
|
19
|
+
on-secondary: var(--hy-color-on-secondary),
|
|
20
|
+
secondary-container: var(hy-color-secondary-container),
|
|
21
|
+
on-secondary-conmtainer: var(hy-color-on-secondary-container),
|
|
22
|
+
secondary-fixed: var(hy-color-secondary-fixed),
|
|
23
|
+
secondary-fixed-dim: var(hy-color-secondary-fixed-dim),
|
|
24
|
+
on-secondary-fixed: var(hy-color-secondary-fixed),
|
|
25
|
+
on-secondary-fixed-variant: var(hy-color-secondary-fixed-variant),
|
|
26
|
+
|
|
27
|
+
tertiary: var(--hy-color-tertiary),
|
|
28
|
+
on-tertiary: var(--hy-color-on-tertiary),
|
|
29
|
+
tertiary-container: var(hy-color-tertiary-container),
|
|
30
|
+
on-tertiary-conmtainer: var(hy-color-on-tertiary-container),
|
|
31
|
+
tertiary-fixed: var(hy-color-tertiary-fixed),
|
|
32
|
+
tertiary-fixed-dim: var(hy-color-tertiary-fixed-dim),
|
|
33
|
+
on-tertiary-fixed: var(hy-color-tertiary-fixed),
|
|
34
|
+
on-tertiary-fixed-variant: var(hy-color-tertiary-fixed-variant),
|
|
35
|
+
|
|
36
|
+
error: var(--hy-color-error),
|
|
37
|
+
on-error: var(--hy-color-on-error),
|
|
38
|
+
error-container: var(hy-color-error-container),
|
|
39
|
+
on-error-conmtainer: var(hy-color-on-error-container),
|
|
40
|
+
|
|
41
|
+
surface: var(--hy-color-surface),
|
|
42
|
+
surface-dim: var(--hy-color-surface-dim),
|
|
43
|
+
surface-bright: var(hy-color-surface-bright),
|
|
44
|
+
surface-container-lowest: var(--hy-color-surface-container-lowest),
|
|
45
|
+
surface-container-low: var(--hy-color-surface-container-low),
|
|
46
|
+
surface-container: var(--hy-color-surface-container),
|
|
47
|
+
surface-container-high: var(--hy-color-surface-container-high),
|
|
48
|
+
surface-container-highest: var(--hy-color-surface-container-highest),
|
|
49
|
+
on-surface: var(--hy-color-on-surface),
|
|
50
|
+
on-surface-variant: var(--hy-color-on-surface-variant),
|
|
51
|
+
ouline: var(--hy-color-outline),
|
|
52
|
+
ouline-variant: var(--hy-color-outline-variant),
|
|
53
|
+
inverse-surface: var(--hy-color-inverse-surface),
|
|
54
|
+
inverse-on-surface: var(--hy-color-inverse-on-surface),
|
|
55
|
+
inverse-primary: var(--hy-color-inverse-primary),
|
|
56
|
+
|
|
57
|
+
background: var(--hy-color-background),
|
|
58
|
+
on-background: var(--hy-color-on-background),
|
|
59
|
+
scrim: var(--hy-color-scrim),
|
|
60
|
+
shadow: var(--hy-color-shadow),
|
|
61
|
+
|
|
62
|
+
/* Typographies */
|
|
63
|
+
// TODO
|
|
64
|
+
))
|
|
65
|
+
}
|