@hug/hospitality 1.0.0-alpha.2 → 1.0.0-alpha.22
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/fesm2022/buttons.mjs +69 -0
- package/fesm2022/buttons.mjs.map +1 -0
- package/fesm2022/form-field.mjs +20 -1
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/tokens.mjs +42 -13
- package/fesm2022/tokens.mjs.map +1 -1
- package/material/app-bar/app-bar.scss +0 -5
- package/material/button/button.scss +84 -95
- package/material/dialog/dialog.scss +12 -4
- package/material/form-field/form-field.scss +7 -6
- package/material/icon/icon.scss +25 -0
- package/material/scrollbar/scrollbar.scss +18 -0
- package/material/theme/theme.scss +141 -19
- package/package.json +10 -16
- package/tokens/tokens.css +13 -3
- package/types/buttons.d.ts +25 -0
- package/types/form-field.d.ts +9 -1
- package/types/tokens.d.ts +1 -0
- package/material/actions-group/actions-group.scss +0 -10
- package/material/layout/layout.scss +0 -6
- package/material/main-bar/main-bar.scss +0 -6
- package/material/panel/panel.scss +0 -8
- package/material/search-bar-container/search-bar-container.scss +0 -13
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, Directive } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
5
|
+
class HyButtonAppearanceDirective {
|
|
6
|
+
hyAppearance = input(null, ...(ngDevMode ? [{ debugName: "hyAppearance" }] : []));
|
|
7
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyButtonAppearanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: HyButtonAppearanceDirective, isStandalone: true, selector: "button[matButton]:not([matButton=\"outlined\"]):not([matButton=\"tonal\"]):not([matButton=\"elevated\"])", inputs: { hyAppearance: { classPropertyName: "hyAppearance", publicName: "hyAppearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hyAppearance": "hyAppearance()" } }, ngImport: i0 });
|
|
9
|
+
}
|
|
10
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyButtonAppearanceDirective, decorators: [{
|
|
11
|
+
type: Directive,
|
|
12
|
+
args: [{
|
|
13
|
+
selector: 'button[matButton]:not([matButton="outlined"]):not([matButton="tonal"]):not([matButton="elevated"])',
|
|
14
|
+
standalone: true,
|
|
15
|
+
host: {
|
|
16
|
+
'[attr.hyAppearance]': 'hyAppearance()'
|
|
17
|
+
}
|
|
18
|
+
}]
|
|
19
|
+
}], propDecorators: { hyAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyAppearance", required: false }] }] } });
|
|
20
|
+
|
|
21
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
22
|
+
class HyButtonSizeDirective {
|
|
23
|
+
hySize = input(null, ...(ngDevMode ? [{ debugName: "hySize" }] : []));
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyButtonSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
25
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: HyButtonSizeDirective, isStandalone: true, selector: "button[hySize]", inputs: { hySize: { classPropertyName: "hySize", publicName: "hySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hySize": "hySize()" } }, ngImport: i0 });
|
|
26
|
+
}
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyButtonSizeDirective, decorators: [{
|
|
28
|
+
type: Directive,
|
|
29
|
+
args: [{
|
|
30
|
+
selector: 'button[hySize]',
|
|
31
|
+
standalone: true,
|
|
32
|
+
host: {
|
|
33
|
+
'[attr.hySize]': 'hySize()'
|
|
34
|
+
}
|
|
35
|
+
}]
|
|
36
|
+
}], propDecorators: { hySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hySize", required: false }] }] } });
|
|
37
|
+
|
|
38
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
39
|
+
class HyIconButtonAppearanceDirective {
|
|
40
|
+
hyAppearance = input(null, ...(ngDevMode ? [{ debugName: "hyAppearance" }] : []));
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyIconButtonAppearanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
42
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: HyIconButtonAppearanceDirective, isStandalone: true, selector: "\n button[matIconButton][hyAppearance]\n ", inputs: { hyAppearance: { classPropertyName: "hyAppearance", publicName: "hyAppearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hyAppearance": "hyAppearance()" } }, ngImport: i0 });
|
|
43
|
+
}
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyIconButtonAppearanceDirective, decorators: [{
|
|
45
|
+
type: Directive,
|
|
46
|
+
args: [{
|
|
47
|
+
selector: `
|
|
48
|
+
button[matIconButton][hyAppearance]
|
|
49
|
+
`,
|
|
50
|
+
standalone: true,
|
|
51
|
+
host: {
|
|
52
|
+
'[attr.hyAppearance]': 'hyAppearance()'
|
|
53
|
+
}
|
|
54
|
+
}]
|
|
55
|
+
}], propDecorators: { hyAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyAppearance", required: false }] }] } });
|
|
56
|
+
|
|
57
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
58
|
+
const HyButtonStylingDirectives = [
|
|
59
|
+
HyButtonSizeDirective,
|
|
60
|
+
HyButtonAppearanceDirective,
|
|
61
|
+
HyIconButtonAppearanceDirective
|
|
62
|
+
];
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Generated bundle index. Do not edit.
|
|
66
|
+
*/
|
|
67
|
+
|
|
68
|
+
export { HyButtonAppearanceDirective, HyButtonSizeDirective, HyButtonStylingDirectives, HyIconButtonAppearanceDirective };
|
|
69
|
+
//# sourceMappingURL=buttons.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buttons.mjs","sources":["../../material/button/directives/button-appearance.directive.ts","../../material/button/directives/button-size.directive.ts","../../material/button/directives/icon-button-appearance.directive.ts","../../material/button/directives/button-styling.directives.ts","../../material/button/buttons.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { Directive, input } from '@angular/core';\n\nexport type HyAppearanceType = 'warning';\n\n@Directive({\n selector: 'button[matButton]:not([matButton=\"outlined\"]):not([matButton=\"tonal\"]):not([matButton=\"elevated\"])',\n standalone: true,\n host: {\n '[attr.hyAppearance]': 'hyAppearance()'\n }\n})\nexport class HyButtonAppearanceDirective {\n public hyAppearance = input<HyAppearanceType | null>(null);\n}\n","/* eslint-disable @typescript-eslint/naming-convention */\nimport { Directive, input } from '@angular/core';\n\nexport type HySizeType = 'small' | 'medium' | 'x-large';\n\n@Directive({\n selector: 'button[hySize]',\n standalone: true,\n host: {\n '[attr.hySize]': 'hySize()'\n }\n})\nexport class HyButtonSizeDirective {\n public hySize = input<HySizeType | null>(null);\n}\n","/* eslint-disable @typescript-eslint/naming-convention */\nimport { Directive, input } from '@angular/core';\n\nexport type HyAppearanceIconType = 'warning' | 'warning-filled' | 'tonal' | 'filled';\n\n@Directive({\n selector: `\n button[matIconButton][hyAppearance]\n `,\n standalone: true,\n host: {\n '[attr.hyAppearance]': 'hyAppearance()'\n }\n})\nexport class HyIconButtonAppearanceDirective {\n public hyAppearance = input<HyAppearanceIconType | null>(null);\n}\n","import { HyButtonAppearanceDirective } from './button-appearance.directive';\nimport { HyButtonSizeDirective } from './button-size.directive';\nimport { HyIconButtonAppearanceDirective } from './icon-button-appearance.directive';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const HyButtonStylingDirectives = [\n HyButtonSizeDirective,\n HyButtonAppearanceDirective,\n HyIconButtonAppearanceDirective\n] as const;\n\nexport {\n HyButtonAppearanceDirective, HyButtonSizeDirective, HyIconButtonAppearanceDirective\n};\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;MAYa,2BAA2B,CAAA;AAC7B,IAAA,YAAY,GAAG,KAAK,CAA0B,IAAI,wDAAC;uGADjD,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0GAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAPvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,oGAAoG;AAC9G,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,qBAAqB,EAAE;AAC1B;AACJ,iBAAA;;;ACXD;MAYa,qBAAqB,CAAA;AACvB,IAAA,MAAM,GAAG,KAAK,CAAoB,IAAI,kDAAC;uGADrC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,eAAe,EAAE;AACpB;AACJ,iBAAA;;;ACXD;MAca,+BAA+B,CAAA;AACjC,IAAA,YAAY,GAAG,KAAK,CAA8B,IAAI,wDAAC;uGADrD,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA/B,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAT3C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE;;AAET,IAAA,CAAA;AACD,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,qBAAqB,EAAE;AAC1B;AACJ,iBAAA;;;ACTD;AACO,MAAM,yBAAyB,GAAG;IACrC,qBAAqB;IACrB,2BAA2B;IAC3B;;;ACRJ;;AAEG;;;;"}
|
package/fesm2022/form-field.mjs
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, Directive } from '@angular/core';
|
|
1
3
|
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
|
2
4
|
|
|
5
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
6
|
+
class HyFormFieldSizeDirective {
|
|
7
|
+
hySize = input(null, ...(ngDevMode ? [{ debugName: "hySize" }] : []));
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyFormFieldSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: HyFormFieldSizeDirective, isStandalone: true, selector: "mat-form-field[hySize]", inputs: { hySize: { classPropertyName: "hySize", publicName: "hySize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hySize": "hySize()" } }, ngImport: i0 });
|
|
10
|
+
}
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HyFormFieldSizeDirective, decorators: [{
|
|
12
|
+
type: Directive,
|
|
13
|
+
args: [{
|
|
14
|
+
selector: 'mat-form-field[hySize]',
|
|
15
|
+
standalone: true,
|
|
16
|
+
host: {
|
|
17
|
+
'[attr.hySize]': 'hySize()'
|
|
18
|
+
}
|
|
19
|
+
}]
|
|
20
|
+
}], propDecorators: { hySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hySize", required: false }] }] } });
|
|
21
|
+
|
|
3
22
|
const provideHyFormField = () => ({
|
|
4
23
|
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
|
5
24
|
useValue: { appearance: 'outline' }
|
|
@@ -9,5 +28,5 @@ const provideHyFormField = () => ({
|
|
|
9
28
|
* Generated bundle index. Do not edit.
|
|
10
29
|
*/
|
|
11
30
|
|
|
12
|
-
export { provideHyFormField };
|
|
31
|
+
export { HyFormFieldSizeDirective, provideHyFormField };
|
|
13
32
|
//# sourceMappingURL=form-field.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field.mjs","sources":["../../material/form-field/form-field.provider.ts","../../material/form-field/form-field.ts"],"sourcesContent":["import type { Provider } from '@angular/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\nexport const provideHyFormField = (): Provider => ({\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: { appearance: 'outline' }\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"form-field.mjs","sources":["../../material/form-field/form-field-size.directive.ts","../../material/form-field/form-field.provider.ts","../../material/form-field/form-field.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { Directive, input } from '@angular/core';\n\nexport type HyFormFieldSizeType = 'small' | 'medium' | 'large';\n\n@Directive({\n selector: 'mat-form-field[hySize]',\n standalone: true,\n host: {\n '[attr.hySize]': 'hySize()'\n }\n})\nexport class HyFormFieldSizeDirective {\n public hySize = input<HyFormFieldSizeType | null>(null);\n}\n","import type { Provider } from '@angular/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\nexport const provideHyFormField = (): Provider => ({\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: { appearance: 'outline' }\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;MAYa,wBAAwB,CAAA;AAC1B,IAAA,MAAM,GAAG,KAAK,CAA6B,IAAI,kDAAC;uGAD9C,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,eAAe,EAAE;AACpB;AACJ,iBAAA;;;ACRM,MAAM,kBAAkB,GAAG,OAAiB;AAC/C,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS;AACpC,CAAA;;ACND;;AAEG;;;;"}
|
package/fesm2022/tokens.mjs
CHANGED
|
@@ -2952,13 +2952,13 @@ var colors = {
|
|
|
2952
2952
|
type: "COLOR",
|
|
2953
2953
|
reference: [
|
|
2954
2954
|
{
|
|
2955
|
-
id: "VariableID:59803:
|
|
2956
|
-
name: "hy-color-ref-neutral-variant-
|
|
2955
|
+
id: "VariableID:59803:257",
|
|
2956
|
+
name: "hy-color-ref-neutral-variant-5",
|
|
2957
2957
|
type: "COLOR",
|
|
2958
|
-
value: "#
|
|
2958
|
+
value: "#0c1117ff"
|
|
2959
2959
|
}
|
|
2960
2960
|
],
|
|
2961
|
-
_referenceValue: "#
|
|
2961
|
+
_referenceValue: "#0c1117ff",
|
|
2962
2962
|
id: "VariableID:59803:491"
|
|
2963
2963
|
},
|
|
2964
2964
|
{
|
|
@@ -2980,13 +2980,13 @@ var colors = {
|
|
|
2980
2980
|
type: "COLOR",
|
|
2981
2981
|
reference: [
|
|
2982
2982
|
{
|
|
2983
|
-
id: "VariableID:59803:
|
|
2984
|
-
name: "hy-color-ref-neutral-variant-
|
|
2983
|
+
id: "VariableID:59803:257",
|
|
2984
|
+
name: "hy-color-ref-neutral-variant-5",
|
|
2985
2985
|
type: "COLOR",
|
|
2986
|
-
value: "#
|
|
2986
|
+
value: "#0c1117ff"
|
|
2987
2987
|
}
|
|
2988
2988
|
],
|
|
2989
|
-
_referenceValue: "#
|
|
2989
|
+
_referenceValue: "#0c1117ff",
|
|
2990
2990
|
id: "VariableID:59803:493"
|
|
2991
2991
|
},
|
|
2992
2992
|
{
|
|
@@ -3316,13 +3316,13 @@ var colors = {
|
|
|
3316
3316
|
type: "COLOR",
|
|
3317
3317
|
reference: [
|
|
3318
3318
|
{
|
|
3319
|
-
id: "VariableID:59803:
|
|
3320
|
-
name: "hy-color-ref-neutral-variant-
|
|
3319
|
+
id: "VariableID:59803:257",
|
|
3320
|
+
name: "hy-color-ref-neutral-variant-5",
|
|
3321
3321
|
type: "COLOR",
|
|
3322
|
-
value: "#
|
|
3322
|
+
value: "#0c1117ff"
|
|
3323
3323
|
}
|
|
3324
3324
|
],
|
|
3325
|
-
_referenceValue: "#
|
|
3325
|
+
_referenceValue: "#0c1117ff",
|
|
3326
3326
|
id: "VariableID:59803:517"
|
|
3327
3327
|
},
|
|
3328
3328
|
{
|
|
@@ -5130,11 +5130,40 @@ var spacing = {
|
|
|
5130
5130
|
}
|
|
5131
5131
|
]
|
|
5132
5132
|
};
|
|
5133
|
+
var stateLayers = {
|
|
5134
|
+
references: [
|
|
5135
|
+
{
|
|
5136
|
+
id: "VariableID:62969:4636",
|
|
5137
|
+
name: "hy-state-layer-small",
|
|
5138
|
+
type: "FLOAT",
|
|
5139
|
+
value: "8%"
|
|
5140
|
+
},
|
|
5141
|
+
{
|
|
5142
|
+
id: "VariableID:62969:4637",
|
|
5143
|
+
name: "hy-state-layer-medium",
|
|
5144
|
+
type: "FLOAT",
|
|
5145
|
+
value: "10%"
|
|
5146
|
+
},
|
|
5147
|
+
{
|
|
5148
|
+
id: "VariableID:62969:4638",
|
|
5149
|
+
name: "hy-state-layer-large",
|
|
5150
|
+
type: "FLOAT",
|
|
5151
|
+
value: "16%"
|
|
5152
|
+
},
|
|
5153
|
+
{
|
|
5154
|
+
id: "VariableID:62969:4639",
|
|
5155
|
+
name: "hy-state-layer-x-large",
|
|
5156
|
+
type: "FLOAT",
|
|
5157
|
+
value: "38%"
|
|
5158
|
+
}
|
|
5159
|
+
]
|
|
5160
|
+
};
|
|
5133
5161
|
var rawTokens = {
|
|
5134
5162
|
colors: colors,
|
|
5135
5163
|
typographies: typographies,
|
|
5136
5164
|
radius: radius,
|
|
5137
|
-
spacing: spacing
|
|
5165
|
+
spacing: spacing,
|
|
5166
|
+
stateLayers: stateLayers
|
|
5138
5167
|
};
|
|
5139
5168
|
|
|
5140
5169
|
const tokens = rawTokens;
|
package/fesm2022/tokens.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 ReferencesTokens {\n references: Token[];\n}\n\nexport interface Tokens extends ReferencesTokens {\n systems: {\n light: TokenSystem[];\n dark: TokenSystem[];\n } | TokenSystem[];\n}\n\nconst tokens: {\n colors: Tokens;\n typographies: Tokens;\n radius: ReferencesTokens;\n spacing: ReferencesTokens;\n} = rawTokens;\n\nexport { tokens };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"
|
|
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 ReferencesTokens {\n references: Token[];\n}\n\nexport interface Tokens extends ReferencesTokens {\n systems: {\n light: TokenSystem[];\n dark: TokenSystem[];\n } | TokenSystem[];\n}\n\nconst tokens: {\n colors: Tokens;\n typographies: Tokens;\n radius: ReferencesTokens;\n spacing: ReferencesTokens;\n stateLayers: ReferencesTokens;\n} = rawTokens;\n\nexport { tokens };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,MAAM,GAMR;;ACzCJ;;AAEG;;;;"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
ngx-app-bar {
|
|
2
|
-
--ngx-app-bar-min-height: 56px;
|
|
3
|
-
--ngx-app-bar-gap: var(--hy-spacing-x-small);
|
|
4
|
-
--ngx-app-bar-condensed-gap: var(--hy-spacing-small);
|
|
5
|
-
--ngx-app-bar-actions-gap: var(--hy-spacing-small);
|
|
6
|
-
|
|
7
2
|
--ngx-app-bar-title-font: var(--hy-typo-headline-medium-emphasized);
|
|
8
3
|
--ngx-app-bar-title-letter-spacing: var(
|
|
9
4
|
--hy-typo-ref-headline-medium-tracking
|
|
@@ -7,22 +7,26 @@ button {
|
|
|
7
7
|
(
|
|
8
8
|
filled-horizontal-padding: 1rem,
|
|
9
9
|
outlined-horizontal-padding: 1rem,
|
|
10
|
-
|
|
10
|
+
tonal-horizontal-padding: 1rem,
|
|
11
11
|
text-horizontal-padding: 1rem,
|
|
12
12
|
text-with-icon-horizontal-padding: 1rem,
|
|
13
13
|
outlined-label-text-color: var(--mat-sys-on-surface-variant),
|
|
14
14
|
outlined-outline-color: var(--mat-sys-outline-variant),
|
|
15
15
|
outlined-disabled-outline-color: var(--mat-sys-outline-variant),
|
|
16
|
-
outlined-state-layer-color:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
outlined-state-layer-color: color-mix(
|
|
17
|
+
in srgb,
|
|
18
|
+
var(--mat-sys-on-surface) 38%,
|
|
19
|
+
transparent
|
|
20
|
+
),
|
|
21
|
+
outlined-ripple-color: color-mix(
|
|
22
|
+
in srgb,
|
|
23
|
+
var(--mat-sys-on-surface) 10%,
|
|
24
|
+
transparent
|
|
25
|
+
),
|
|
20
26
|
)
|
|
21
27
|
);
|
|
22
28
|
|
|
23
|
-
&[
|
|
24
|
-
&[mat-stroked-button],
|
|
25
|
-
&[mat-flat-button] {
|
|
29
|
+
&[matButton] {
|
|
26
30
|
> mat-icon.mat-icon {
|
|
27
31
|
margin: 0;
|
|
28
32
|
font-size: 1.25rem;
|
|
@@ -39,15 +43,17 @@ button {
|
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
/* Size variants, icon button and button */
|
|
47
|
+
|
|
48
|
+
&[hySize="small"] {
|
|
49
|
+
gap: 0.25rem;
|
|
44
50
|
|
|
45
51
|
@include mat.button-density(-1);
|
|
46
52
|
@include mat.button-overrides(
|
|
47
53
|
(
|
|
48
54
|
filled-horizontal-padding: 0.75rem,
|
|
49
55
|
outlined-horizontal-padding: 0.75rem,
|
|
50
|
-
|
|
56
|
+
tonal-horizontal-padding: 0.75rem,
|
|
51
57
|
text-horizontal-padding: 0.75rem,
|
|
52
58
|
text-with-icon-horizontal-padding: 0.75rem,
|
|
53
59
|
)
|
|
@@ -58,7 +64,7 @@ button {
|
|
|
58
64
|
)
|
|
59
65
|
);
|
|
60
66
|
|
|
61
|
-
&[
|
|
67
|
+
&[matIconButton] {
|
|
62
68
|
> mat-icon.mat-icon {
|
|
63
69
|
margin: 0;
|
|
64
70
|
font-size: 1.25rem;
|
|
@@ -68,37 +74,37 @@ button {
|
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
|
|
71
|
-
&[
|
|
77
|
+
&[hySize="x-large"] {
|
|
72
78
|
@include mat.button-overrides(
|
|
73
79
|
(
|
|
74
80
|
filled-container-height: 3.5rem,
|
|
75
81
|
outlined-container-height: 3.5rem,
|
|
76
|
-
|
|
82
|
+
tonal-container-height: 3.5rem,
|
|
77
83
|
text-container-height: 3.5rem,
|
|
78
84
|
|
|
79
85
|
filled-horizontal-padding: 1.5rem,
|
|
80
86
|
outlined-horizontal-padding: 1.5rem,
|
|
81
|
-
|
|
87
|
+
tonal-horizontal-padding: 1.5rem,
|
|
82
88
|
text-horizontal-padding: 1.5rem,
|
|
83
89
|
text-with-icon-horizontal-padding: 1.5rem,
|
|
84
90
|
|
|
85
91
|
filled-label-text-font: var(--mat-sys-title-medium-font),
|
|
86
92
|
outlined-label-text-font: var(--mat-sys-title-medium-font),
|
|
87
|
-
|
|
93
|
+
tonal-label-text-font: var(--mat-sys-title-medium-font),
|
|
88
94
|
text-label-text-font: var(--mat-sys-title-medium-font),
|
|
89
95
|
filled-label-text-size: var(--mat-sys-title-medium-size),
|
|
90
96
|
outlined-label-text-size: var(--mat-sys-title-medium-size),
|
|
91
|
-
|
|
97
|
+
tonal-label-text-size: var(--mat-sys-title-medium-size),
|
|
92
98
|
text-label-text-size: var(--mat-sys-title-medium-size),
|
|
93
99
|
filled-label-text-tracking: var(--mat-sys-title-medium-tracking),
|
|
94
|
-
outlined-label-text-tracking:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
100
|
+
outlined-label-text-tracking: var(
|
|
101
|
+
--mat-sys-title-medium-tracking
|
|
102
|
+
),
|
|
103
|
+
tonal-label-text-tracking: var(--mat-sys-title-medium-tracking),
|
|
98
104
|
text-label-text-tracking: var(--mat-sys-title-medium-tracking),
|
|
99
105
|
filled-label-text-weight: var(--mat-sys-title-medium-weight),
|
|
100
106
|
outlined-label-text-weight: var(--mat-sys-title-medium-weight),
|
|
101
|
-
|
|
107
|
+
tonal-label-text-weight: var(--mat-sys-title-medium-weight),
|
|
102
108
|
text-label-text-weight: var(--mat-sys-title-medium-weight),
|
|
103
109
|
)
|
|
104
110
|
);
|
|
@@ -109,9 +115,7 @@ button {
|
|
|
109
115
|
)
|
|
110
116
|
);
|
|
111
117
|
|
|
112
|
-
&[
|
|
113
|
-
&[mat-stroked-button],
|
|
114
|
-
&[mat-flat-button] {
|
|
118
|
+
&[matButton] {
|
|
115
119
|
> mat-icon.mat-icon {
|
|
116
120
|
font-size: 1.5rem;
|
|
117
121
|
height: 1.5rem;
|
|
@@ -120,118 +124,103 @@ button {
|
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
126
|
|
|
123
|
-
|
|
124
|
-
&[
|
|
125
|
-
&[hy-appearance="warning-filled"] {
|
|
126
|
-
&:disabled {
|
|
127
|
-
background-color: color-mix(
|
|
128
|
-
in srgb,
|
|
129
|
-
var(--mat-sys-on-surface) 10%,
|
|
130
|
-
transparent
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
&[hy-appearance="tonal"] {
|
|
127
|
+
/* Appearance variants, icon button and button */
|
|
128
|
+
&[hyAppearance="warning"] {
|
|
136
129
|
@include mat.button-overrides(
|
|
137
130
|
(
|
|
138
|
-
filled-container-color: var(--
|
|
139
|
-
filled-label-text-color: var(--
|
|
140
|
-
filled-state-layer-color: var(--
|
|
141
|
-
filled-ripple-color:
|
|
142
|
-
color-mix(
|
|
131
|
+
filled-container-color: var(--hy-color-warning),
|
|
132
|
+
filled-label-text-color: var(--hy-color-on-warning),
|
|
133
|
+
filled-state-layer-color: var(--hy-color-on-warning),
|
|
134
|
+
filled-ripple-color: color-mix(
|
|
143
135
|
in srgb,
|
|
144
|
-
var(--
|
|
136
|
+
var(--hy-color-on-warning) 10%,
|
|
145
137
|
transparent
|
|
146
138
|
),
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
@include mat.icon-button-overrides(
|
|
151
|
-
(
|
|
152
|
-
icon-color: var(--mat-sys-on-secondary-container),
|
|
153
|
-
state-layer-color: var(--mat-sys-on-secondary-container),
|
|
154
|
-
ripple-color:
|
|
155
|
-
color-mix(
|
|
139
|
+
text-label-text-color: var(--hy-color-warning),
|
|
140
|
+
text-state-layer-color: var(--hy-color-warning),
|
|
141
|
+
text-ripple-color: color-mix(
|
|
156
142
|
in srgb,
|
|
157
|
-
var(--
|
|
143
|
+
var(--hy-color-warning) 10%,
|
|
158
144
|
transparent
|
|
159
145
|
),
|
|
160
146
|
)
|
|
161
147
|
);
|
|
162
148
|
|
|
163
|
-
&[mat-icon-button]:enabled {
|
|
164
|
-
background-color: var(--mat-sys-secondary-container);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&[hy-appearance="filled"] {
|
|
169
|
-
background-color: var(--mat-sys-primary);
|
|
170
|
-
|
|
171
149
|
@include mat.icon-button-overrides(
|
|
172
150
|
(
|
|
173
|
-
icon-color: var(--
|
|
174
|
-
state-layer-color: var(--
|
|
175
|
-
ripple-color:
|
|
176
|
-
color-mix(
|
|
151
|
+
icon-color: var(--hy-color-warning),
|
|
152
|
+
state-layer-color: var(--hy-color-warning),
|
|
153
|
+
ripple-color: color-mix(
|
|
177
154
|
in srgb,
|
|
178
|
-
var(--
|
|
155
|
+
var(--hy-color-warning) 10%,
|
|
179
156
|
transparent
|
|
180
157
|
),
|
|
181
158
|
)
|
|
182
159
|
);
|
|
183
160
|
}
|
|
184
161
|
|
|
185
|
-
|
|
186
|
-
|
|
162
|
+
/* Icon buttons appearance variants */
|
|
163
|
+
&[hyAppearance="warning-filled"] {
|
|
164
|
+
@include mat.icon-button-overrides(
|
|
187
165
|
(
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
filled-ripple-color:
|
|
192
|
-
color-mix(
|
|
166
|
+
icon-color: var(--hy-color-on-warning),
|
|
167
|
+
state-layer-color: var(--hy-color-on-warning),
|
|
168
|
+
ripple-color: color-mix(
|
|
193
169
|
in srgb,
|
|
194
|
-
var(--
|
|
170
|
+
var(--hy-color-on-warning) 10%,
|
|
195
171
|
transparent
|
|
196
172
|
),
|
|
197
173
|
)
|
|
198
174
|
);
|
|
199
175
|
|
|
176
|
+
&[matIconButton]:enabled {
|
|
177
|
+
background-color: var(--hy-color-warning);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&[hyAppearance="tonal"] {
|
|
200
182
|
@include mat.icon-button-overrides(
|
|
201
183
|
(
|
|
202
|
-
icon-color: var(--mat-sys-on-
|
|
203
|
-
state-layer-color: var(--mat-sys-on-
|
|
204
|
-
ripple-color:
|
|
205
|
-
color-mix(
|
|
184
|
+
icon-color: var(--mat-sys-on-secondary-container),
|
|
185
|
+
state-layer-color: var(--mat-sys-on-secondary-container),
|
|
186
|
+
ripple-color: color-mix(
|
|
206
187
|
in srgb,
|
|
207
|
-
var(--mat-sys-on-
|
|
188
|
+
var(--mat-sys-on-secondary-container) 10%,
|
|
208
189
|
transparent
|
|
209
190
|
),
|
|
210
191
|
)
|
|
211
192
|
);
|
|
212
193
|
|
|
213
|
-
&[
|
|
214
|
-
background-color: var(--mat-sys-
|
|
194
|
+
&[matIconButton]:enabled {
|
|
195
|
+
background-color: var(--mat-sys-secondary-container);
|
|
215
196
|
}
|
|
216
197
|
}
|
|
217
198
|
|
|
218
|
-
&[
|
|
219
|
-
|
|
220
|
-
(
|
|
221
|
-
text-label-text-color: var(--mat-sys-warning),
|
|
222
|
-
text-state-layer-color: var(--mat-sys-warning),
|
|
223
|
-
text-ripple-color:
|
|
224
|
-
color-mix(in srgb, var(--mat-sys-warning) 10%, transparent),
|
|
225
|
-
)
|
|
226
|
-
);
|
|
199
|
+
&[hyAppearance="filled"] {
|
|
200
|
+
background-color: var(--mat-sys-primary);
|
|
227
201
|
|
|
228
202
|
@include mat.icon-button-overrides(
|
|
229
203
|
(
|
|
230
|
-
icon-color: var(--mat-sys-
|
|
231
|
-
state-layer-color: var(--mat-sys-
|
|
232
|
-
ripple-color:
|
|
233
|
-
|
|
204
|
+
icon-color: var(--mat-sys-on-primary),
|
|
205
|
+
state-layer-color: var(--mat-sys-on-primary),
|
|
206
|
+
ripple-color: color-mix(
|
|
207
|
+
in srgb,
|
|
208
|
+
var(--mat-sys-on-primary) 10%,
|
|
209
|
+
transparent
|
|
210
|
+
),
|
|
234
211
|
)
|
|
235
212
|
);
|
|
236
213
|
}
|
|
214
|
+
|
|
215
|
+
&[hyAppearance="tonal"],
|
|
216
|
+
&[hyAppearance="filled"],
|
|
217
|
+
&[hyAppearance="warning-filled"] {
|
|
218
|
+
&:disabled {
|
|
219
|
+
background-color: color-mix(
|
|
220
|
+
in srgb,
|
|
221
|
+
var(--mat-sys-on-surface) 10%,
|
|
222
|
+
transparent
|
|
223
|
+
);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
237
226
|
}
|
|
@@ -3,18 +3,26 @@
|
|
|
3
3
|
mat-dialog-container {
|
|
4
4
|
@include mat.dialog-overrides(
|
|
5
5
|
(
|
|
6
|
-
actions-padding:
|
|
7
|
-
headline-padding:
|
|
6
|
+
actions-padding: var(--hy-spacing-x-large),
|
|
7
|
+
headline-padding: var(--hy-spacing-x-small)
|
|
8
|
+
var(--hy-spacing-x-large) var(--hy-spacing-medium),
|
|
8
9
|
)
|
|
9
10
|
);
|
|
10
11
|
}
|
|
11
12
|
|
|
13
|
+
.with-divider {
|
|
14
|
+
mat-dialog-actions {
|
|
15
|
+
border-top: 1px solid var(--mat-sys-outline-variant);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
12
19
|
.warning-dialog {
|
|
13
20
|
mat-dialog-container {
|
|
14
21
|
@include mat.dialog-overrides(
|
|
15
22
|
(
|
|
16
23
|
subhead-color: var(--mat-sys-warning),
|
|
17
|
-
headline-padding:
|
|
24
|
+
headline-padding: var(--hy-spacing-x-large)
|
|
25
|
+
var(--hy-spacing-x-large) var(--hy-spacing-medium),
|
|
18
26
|
)
|
|
19
27
|
);
|
|
20
28
|
}
|
|
@@ -23,7 +31,7 @@ mat-dialog-container {
|
|
|
23
31
|
content: "warning";
|
|
24
32
|
font-family: "Material Symbols Outlined Variable";
|
|
25
33
|
display: inline;
|
|
26
|
-
padding-
|
|
34
|
+
padding-inline-end: 10px;
|
|
27
35
|
vertical-align: bottom;
|
|
28
36
|
}
|
|
29
37
|
}
|
|
@@ -11,8 +11,9 @@ mat-form-field {
|
|
|
11
11
|
outlined-error-focus-label-text-color: var(--mat-sys-error),
|
|
12
12
|
outlined-error-outline-color: var(--mat-sys-error),
|
|
13
13
|
outlined-error-caret-color: var(--mat-sys-error),
|
|
14
|
-
outlined-input-text-placeholder-color:
|
|
15
|
-
|
|
14
|
+
outlined-input-text-placeholder-color: var(
|
|
15
|
+
--mat-sys-on-surface-variant
|
|
16
|
+
),
|
|
16
17
|
)
|
|
17
18
|
);
|
|
18
19
|
|
|
@@ -21,7 +22,7 @@ mat-form-field {
|
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
&:has(textarea) {
|
|
24
|
-
&[
|
|
25
|
+
&[hySize="small"] {
|
|
25
26
|
.mat-mdc-form-field-icon-suffix {
|
|
26
27
|
padding: 0.5rem 0;
|
|
27
28
|
|
|
@@ -31,7 +32,7 @@ mat-form-field {
|
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
&[
|
|
35
|
+
&[hySize="large"] {
|
|
35
36
|
.mat-mdc-form-field-icon-suffix {
|
|
36
37
|
padding: 1rem 0;
|
|
37
38
|
}
|
|
@@ -48,7 +49,7 @@ mat-form-field {
|
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
&[
|
|
52
|
+
&[hySize="small"] {
|
|
52
53
|
@include mat.form-field-density(-4);
|
|
53
54
|
|
|
54
55
|
.mat-mdc-form-field-icon-suffix,
|
|
@@ -65,7 +66,7 @@ mat-form-field {
|
|
|
65
66
|
}
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
&[
|
|
69
|
+
&[hySize="large"] {
|
|
69
70
|
@include mat.form-field-density(0);
|
|
70
71
|
}
|
|
71
72
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use "@fontsource-variable/material-symbols-outlined/fill" as *;
|
|
2
|
+
|
|
3
|
+
mat-icon,
|
|
4
|
+
.hy-icon {
|
|
5
|
+
font-family: "Material Symbols Outlined Variable" !important;
|
|
6
|
+
font-weight: normal;
|
|
7
|
+
font-style: normal;
|
|
8
|
+
font-size: 24px;
|
|
9
|
+
display: inline-block;
|
|
10
|
+
line-height: 1;
|
|
11
|
+
text-transform: none;
|
|
12
|
+
letter-spacing: normal;
|
|
13
|
+
word-wrap: normal;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
direction: ltr;
|
|
16
|
+
-webkit-font-smoothing: antialiased;
|
|
17
|
+
text-rendering: optimizeLegibility;
|
|
18
|
+
-moz-osx-font-smoothing: grayscale;
|
|
19
|
+
font-feature-settings: "liga";
|
|
20
|
+
font-variation-settings: "FILL" 1;
|
|
21
|
+
|
|
22
|
+
&.outlined {
|
|
23
|
+
font-variation-settings: "FILL" 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
::-webkit-scrollbar {
|
|
2
|
+
width: 10px;
|
|
3
|
+
height: 10px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
::-webkit-scrollbar-track {
|
|
7
|
+
margin-bottom: 12px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
::-webkit-scrollbar-thumb {
|
|
11
|
+
transition: 0.3s ease-in-out;
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
background-color: var(--hy-color-outline-variant);
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
background-color: var(--hy-color-outline);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -2,56 +2,178 @@
|
|
|
2
2
|
@use "./utils" as map;
|
|
3
3
|
|
|
4
4
|
$override-colors: (
|
|
5
|
+
//Primary
|
|
5
6
|
primary: var(--hy-color-primary),
|
|
6
7
|
on-primary: var(--hy-color-on-primary),
|
|
7
8
|
primary-container: var(--hy-color-primary-container),
|
|
8
9
|
on-primary-container: var(--hy-color-on-primary-container),
|
|
9
10
|
primary-fixed: var(--hy-color-primary-fixed),
|
|
10
|
-
primary-fixed-dim: var(--hy-color-primary-fixed-dim),
|
|
11
11
|
on-primary-fixed: var(--hy-color-primary-fixed),
|
|
12
|
-
on-primary-fixed-variant: var(--hy-color-primary-fixed-variant),
|
|
12
|
+
on-primary-fixed-variant: var(--hy-color-on-primary-fixed-variant),
|
|
13
|
+
primary-fixed-dim: var(--hy-color-primary-fixed-dim),
|
|
14
|
+
inverse-primary: var(--hy-color-inverse-primary),
|
|
15
|
+
//Secondary
|
|
13
16
|
secondary: var(--hy-color-secondary),
|
|
14
17
|
on-secondary: var(--hy-color-on-secondary),
|
|
15
18
|
secondary-container: var(--hy-color-secondary-container),
|
|
16
|
-
on-secondary-
|
|
19
|
+
on-secondary-container: var(--hy-color-on-secondary-container),
|
|
17
20
|
secondary-fixed: var(--hy-color-secondary-fixed),
|
|
18
|
-
secondary-fixed-dim: var(--hy-color-secondary-fixed-dim),
|
|
19
21
|
on-secondary-fixed: var(--hy-color-secondary-fixed),
|
|
20
|
-
on-secondary-fixed-variant: var(--hy-color-secondary-fixed-variant),
|
|
22
|
+
on-secondary-fixed-variant: var(--hy-color-on-secondary-fixed-variant),
|
|
23
|
+
secondary-fixed-dim: var(--hy-color-secondary-fixed-dim),
|
|
24
|
+
//Tertiary
|
|
21
25
|
tertiary: var(--hy-color-tertiary),
|
|
22
26
|
on-tertiary: var(--hy-color-on-tertiary),
|
|
23
27
|
tertiary-container: var(--hy-color-tertiary-container),
|
|
24
|
-
on-tertiary-
|
|
28
|
+
on-tertiary-container: var(--hy-color-on-tertiary-container),
|
|
25
29
|
tertiary-fixed: var(--hy-color-tertiary-fixed),
|
|
26
|
-
tertiary-fixed-dim: var(--hy-color-tertiary-fixed-dim),
|
|
27
30
|
on-tertiary-fixed: var(--hy-color-tertiary-fixed),
|
|
28
|
-
on-tertiary-fixed-variant: var(--hy-color-tertiary-fixed-variant),
|
|
31
|
+
on-tertiary-fixed-variant: var(--hy-color-on-tertiary-fixed-variant),
|
|
32
|
+
tertiary-fixed-dim: var(--hy-color-tertiary-fixed-dim),
|
|
33
|
+
//Error
|
|
29
34
|
error: var(--hy-color-error),
|
|
30
35
|
on-error: var(--hy-color-on-error),
|
|
31
36
|
error-container: var(--hy-color-error-container),
|
|
32
|
-
on-error-
|
|
37
|
+
on-error-container: var(--hy-color-on-error-container),
|
|
38
|
+
//Surface
|
|
33
39
|
surface: var(--hy-color-surface),
|
|
34
|
-
surface
|
|
40
|
+
on-surface: var(--hy-color-on-surface),
|
|
41
|
+
on-surface-variant: var(--hy-color-on-surface-variant),
|
|
35
42
|
surface-bright: var(--hy-color-surface-bright),
|
|
36
|
-
surface-container-lowest: var(--hy-color-surface-container-lowest),
|
|
37
|
-
surface-container-low: var(--hy-color-surface-container-low),
|
|
38
43
|
surface-container: var(--hy-color-surface-container),
|
|
39
44
|
surface-container-high: var(--hy-color-surface-container-high),
|
|
40
45
|
surface-container-highest: var(--hy-color-surface-container-highest),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
surface-container-low: var(--hy-color-surface-container-low),
|
|
47
|
+
surface-container-lowest: var(--hy-color-surface-container-lowest),
|
|
48
|
+
surface-dim: var(--hy-color-surface-dim),
|
|
49
|
+
surface-tint: var(--hy-color-surface-tint),
|
|
50
|
+
surface-variant: var(--hy-color-surface-variant),
|
|
45
51
|
inverse-surface: var(--hy-color-inverse-surface),
|
|
46
52
|
inverse-on-surface: var(--hy-color-inverse-on-surface),
|
|
47
|
-
|
|
53
|
+
//Miscellaneous
|
|
48
54
|
background: var(--hy-color-background),
|
|
49
55
|
on-background: var(--hy-color-on-background),
|
|
56
|
+
neutral-variant20: var(--hy-color-ref-neutral-variant-20),
|
|
57
|
+
neutral10: var(--hy-color-ref-neutral-10),
|
|
58
|
+
outline: var(--hy-color-outline),
|
|
59
|
+
outline-variant: var(--hy-color-outline-variant),
|
|
50
60
|
scrim: var(--hy-color-scrim),
|
|
51
|
-
shadow: var(--hy-color-shadow)
|
|
61
|
+
shadow: var(--hy-color-shadow)
|
|
52
62
|
);
|
|
53
63
|
|
|
54
|
-
$override-typography: (
|
|
64
|
+
$override-typography: (
|
|
65
|
+
//Body Large
|
|
66
|
+
body-large: var(--hy-typo-body-large),
|
|
67
|
+
body-large-font: var(--hy-typo-ref-body-large-font),
|
|
68
|
+
body-large-line-height: var(--hy-typo-ref-body-large-line-height),
|
|
69
|
+
body-large-size: var(--hy-typo-ref-body-large-size),
|
|
70
|
+
body-large-tracking: var(--hy-typo-ref-body-large-tracking),
|
|
71
|
+
body-large-weight: var(--hy-typo-ref-body-large-weight),
|
|
72
|
+
//Body Medium
|
|
73
|
+
body-medium: var(--hy-typo-body-medium),
|
|
74
|
+
body-medium-font: var(--hy-typo-ref-body-medium-font),
|
|
75
|
+
body-medium-line-height: var(--hy-typo-ref-body-medium-line-height),
|
|
76
|
+
body-medium-size: var(--hy-typo-ref-body-medium-size),
|
|
77
|
+
body-medium-tracking: var(--hy-typo-ref-body-medium-tracking),
|
|
78
|
+
body-medium-weight: var(--hy-typo-ref-body-medium-weight),
|
|
79
|
+
//Body Small
|
|
80
|
+
body-small: var(--hy-typo-body-small),
|
|
81
|
+
body-small-font: var(--hy-typo-ref-body-small-font),
|
|
82
|
+
body-small-line-height: var(--hy-typo-ref-body-small-line-height),
|
|
83
|
+
body-small-size: var(--hy-typo-ref-body-small-size),
|
|
84
|
+
body-small-tracking: var(--hy-typo-ref-body-small-tracking),
|
|
85
|
+
body-small-weight: var(--hy-typo-ref-body-small-weight),
|
|
86
|
+
//Display Large
|
|
87
|
+
display-large: var(--hy-typo-display-large),
|
|
88
|
+
display-large-font: var(--hy-typo-ref-display-large-font),
|
|
89
|
+
display-large-line-height: var(--hy-typo-ref-display-large-line-height),
|
|
90
|
+
display-large-size: var(--hy-typo-ref-display-large-size),
|
|
91
|
+
display-large-tracking: var(--hy-typo-ref-display-large-tracking),
|
|
92
|
+
display-large-weight: var(--hy-typo-ref-display-large-weight),
|
|
93
|
+
//Display Medium
|
|
94
|
+
display-medium: var(--hy-typo-display-medium),
|
|
95
|
+
display-medium-font: var(--hy-typo-ref-display-medium-font),
|
|
96
|
+
display-medium-line-height: var(--hy-typo-ref-display-medium-line-height),
|
|
97
|
+
display-medium-size: var(--hy-typo-ref-display-medium-size),
|
|
98
|
+
display-medium-tracking: var(--hy-typo-ref-display-medium-tracking),
|
|
99
|
+
display-medium-weight: var(--hy-typo-ref-display-medium-weight),
|
|
100
|
+
//Display Small
|
|
101
|
+
display-small: var(--hy-typo-display-small),
|
|
102
|
+
display-small-font: var(--hy-typo-ref-display-small-font),
|
|
103
|
+
display-small-line-height: var(--hy-typo-ref-display-small-line-height),
|
|
104
|
+
display-small-size: var(--hy-typo-ref-display-small-size),
|
|
105
|
+
display-small-tracking: var(--hy-typo-ref-display-small-tracking),
|
|
106
|
+
display-small-weight: var(--hy-typo-ref-display-small-weight),
|
|
107
|
+
//Headline Large
|
|
108
|
+
headline-large: var(--hy-typo-headline-large),
|
|
109
|
+
headline-large-font: var(--hy-typo-ref-headline-large-font),
|
|
110
|
+
headline-large-line-height: var(--hy-typo-ref-headline-large-line-height),
|
|
111
|
+
headline-large-size: var(--hy-typo-ref-headline-large-size),
|
|
112
|
+
headline-large-tracking: var(--hy-typo-ref-headline-large-tracking),
|
|
113
|
+
headline-large-weight: var(--hy-typo-ref-headline-large-weight),
|
|
114
|
+
//Headline Medium
|
|
115
|
+
headline-medium: var(--hy-typo-headline-medium),
|
|
116
|
+
headline-medium-font: var(--hy-typo-ref-headline-medium-font),
|
|
117
|
+
headline-medium-line-height: var(--hy-typo-ref-headline-medium-line-height),
|
|
118
|
+
headline-medium-size: var(--hy-typo-ref-headline-medium-size),
|
|
119
|
+
headline-medium-tracking: var(--hy-typo-ref-headline-medium-tracking),
|
|
120
|
+
headline-medium-weight: var(--hy-typo-ref-headline-medium-weight),
|
|
121
|
+
//Headline Small
|
|
122
|
+
headline-small: var(--hy-typo-headline-small),
|
|
123
|
+
headline-small-font: var(--hy-typo-ref-headline-small-font),
|
|
124
|
+
headline-small-line-height: var(--hy-typo-ref-headline-small-line-height),
|
|
125
|
+
headline-small-size: var(--hy-typo-ref-headline-small-size),
|
|
126
|
+
headline-small-tracking: var(--hy-typo-ref-headline-small-tracking),
|
|
127
|
+
headline-small-weight: var(--hy-typo-ref-headline-small-weight),
|
|
128
|
+
//Label Large
|
|
129
|
+
label-large: var(--hy-typo-label-large),
|
|
130
|
+
label-large-font: var(--hy-typo-ref-label-large-font),
|
|
131
|
+
label-large-line-height: var(--hy-typo-ref-label-large-line-height),
|
|
132
|
+
label-large-size: var(--hy-typo-ref-label-large-size),
|
|
133
|
+
label-large-tracking: var(--hy-typo-ref-label-large-tracking),
|
|
134
|
+
label-large-weight: var(--hy-typo-ref-label-large-weight),
|
|
135
|
+
label-large-weight-prominent: var(
|
|
136
|
+
--hy-typo-ref-label-large-weight-emphasized
|
|
137
|
+
),
|
|
138
|
+
//Label Medium
|
|
139
|
+
label-medium: var(--hy-typo-label-medium),
|
|
140
|
+
label-medium-font: var(--hy-typo-ref-label-medium-font),
|
|
141
|
+
label-medium-line-height: var(--hy-typo-ref-label-medium-line-height),
|
|
142
|
+
label-medium-size: var(--hy-typo-ref-label-medium-size),
|
|
143
|
+
label-medium-tracking: var(--hy-typo-ref-label-medium-tracking),
|
|
144
|
+
label-medium-weight: var(--hy-typo-ref-label-medium-weight),
|
|
145
|
+
label-medium-weight-prominent: var(
|
|
146
|
+
--hy-typo-ref-label-medium-weight-emphasized
|
|
147
|
+
),
|
|
148
|
+
//Label Small
|
|
149
|
+
label-small: var(--hy-typo-label-small),
|
|
150
|
+
label-small-font: var(--hy-typo-ref-label-small-font),
|
|
151
|
+
label-small-line-height: var(--hy-typo-ref-label-small-line-height),
|
|
152
|
+
label-small-size: var(--hy-typo-ref-label-small-size),
|
|
153
|
+
label-small-tracking: var(--hy-typo-ref-label-small-tracking),
|
|
154
|
+
label-small-weight: var(--hy-typo-ref-label-small-weight),
|
|
155
|
+
//Title Large
|
|
156
|
+
title-large: var(--hy-typo-title-large),
|
|
157
|
+
title-large-font: var(--hy-typo-ref-title-large-font),
|
|
158
|
+
title-large-line-height: var(--hy-typo-ref-title-large-line-height),
|
|
159
|
+
title-large-size: var(--hy-typo-ref-title-large-size),
|
|
160
|
+
title-large-tracking: var(--hy-typo-ref-title-large-tracking),
|
|
161
|
+
title-large-weight: var(--hy-typo-ref-title-large-weight),
|
|
162
|
+
//Title Medium
|
|
163
|
+
title-medium: var(--hy-typo-title-medium),
|
|
164
|
+
title-medium-font: var(--hy-typo-ref-title-medium-font),
|
|
165
|
+
title-medium-line-height: var(--hy-typo-ref-title-medium-line-height),
|
|
166
|
+
title-medium-size: var(--hy-typo-ref-title-medium-size),
|
|
167
|
+
title-medium-tracking: var(--hy-typo-ref-title-medium-tracking),
|
|
168
|
+
title-medium-weight: var(--hy-typo-ref-title-medium-weight),
|
|
169
|
+
//Title Small
|
|
170
|
+
title-small: var(--hy-typo-title-small),
|
|
171
|
+
title-small-font: var(--hy-typo-ref-title-small-font),
|
|
172
|
+
title-small-line-height: var(--hy-typo-ref-title-small-line-height),
|
|
173
|
+
title-small-size: var(--hy-typo-ref-title-small-size),
|
|
174
|
+
title-small-tracking: var(--hy-typo-ref-title-small-tracking),
|
|
175
|
+
title-small-weight: var(--hy-typo-ref-title-small-weight)
|
|
176
|
+
);
|
|
55
177
|
|
|
56
178
|
$override-density: ();
|
|
57
179
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/hospitality",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.22",
|
|
4
4
|
"description": "Hospitality Design System",
|
|
5
5
|
"homepage": "https://github.com/dsi-hug/hospitality",
|
|
6
6
|
"license": "GPL-3.0-only",
|
|
@@ -20,14 +20,13 @@
|
|
|
20
20
|
"TODO:"
|
|
21
21
|
],
|
|
22
22
|
"exports": {
|
|
23
|
-
"./material/actions-group": {
|
|
24
|
-
"sass": "./material/actions-group/actions-group.scss"
|
|
25
|
-
},
|
|
26
23
|
"./material/app-bar": {
|
|
27
24
|
"sass": "./material/app-bar/app-bar.scss"
|
|
28
25
|
},
|
|
29
26
|
"./material/button": {
|
|
30
|
-
"sass": "./material/button/button.scss"
|
|
27
|
+
"sass": "./material/button/button.scss",
|
|
28
|
+
"types": "./types/buttons.d.ts",
|
|
29
|
+
"default": "./fesm2022/buttons.mjs"
|
|
31
30
|
},
|
|
32
31
|
"./material/dialog": {
|
|
33
32
|
"sass": "./material/dialog/dialog.scss"
|
|
@@ -37,17 +36,11 @@
|
|
|
37
36
|
"types": "./types/form-field.d.ts",
|
|
38
37
|
"default": "./fesm2022/form-field.mjs"
|
|
39
38
|
},
|
|
40
|
-
"./material/
|
|
41
|
-
"sass": "./material/
|
|
42
|
-
},
|
|
43
|
-
"./material/main-bar": {
|
|
44
|
-
"sass": "./material/main-bar/main-bar.scss"
|
|
45
|
-
},
|
|
46
|
-
"./material/panel": {
|
|
47
|
-
"sass": "./material/panel/panel.scss"
|
|
39
|
+
"./material/icon": {
|
|
40
|
+
"sass": "./material/icon/icon.scss"
|
|
48
41
|
},
|
|
49
|
-
"./material/
|
|
50
|
-
"sass": "./material/
|
|
42
|
+
"./material/scrollbar": {
|
|
43
|
+
"sass": "./material/scrollbar/scrollbar.scss"
|
|
51
44
|
},
|
|
52
45
|
"./material/theme": {
|
|
53
46
|
"sass": "./material/theme/theme.scss"
|
|
@@ -70,7 +63,8 @@
|
|
|
70
63
|
}
|
|
71
64
|
},
|
|
72
65
|
"peerDependencies": {
|
|
73
|
-
"@angular/material": "^21.x"
|
|
66
|
+
"@angular/material": "^21.x",
|
|
67
|
+
"@fontsource-variable/material-symbols-outlined": "^5.2.0"
|
|
74
68
|
},
|
|
75
69
|
"peerDependenciesMeta": {
|
|
76
70
|
"@angular/material": {
|
package/tokens/tokens.css
CHANGED
|
@@ -438,7 +438,7 @@
|
|
|
438
438
|
);
|
|
439
439
|
--hy-color-background: light-dark(
|
|
440
440
|
var(--hy-color-ref-neutral-variant-99),
|
|
441
|
-
var(--hy-color-ref-neutral-variant-
|
|
441
|
+
var(--hy-color-ref-neutral-variant-5)
|
|
442
442
|
);
|
|
443
443
|
--hy-color-on-background: light-dark(
|
|
444
444
|
var(--hy-color-ref-neutral-variant-10),
|
|
@@ -446,7 +446,7 @@
|
|
|
446
446
|
);
|
|
447
447
|
--hy-color-surface: light-dark(
|
|
448
448
|
var(--hy-color-ref-neutral-variant-98),
|
|
449
|
-
var(--hy-color-ref-neutral-variant-
|
|
449
|
+
var(--hy-color-ref-neutral-variant-5)
|
|
450
450
|
);
|
|
451
451
|
--hy-color-on-surface: light-dark(
|
|
452
452
|
var(--hy-color-ref-neutral-variant-10),
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
);
|
|
543
543
|
--hy-color-surface-dim: light-dark(
|
|
544
544
|
var(--hy-color-ref-neutral-variant-90),
|
|
545
|
-
var(--hy-color-ref-neutral-variant-
|
|
545
|
+
var(--hy-color-ref-neutral-variant-5)
|
|
546
546
|
);
|
|
547
547
|
--hy-color-surface-bright: light-dark(
|
|
548
548
|
var(--hy-color-ref-neutral-variant-98),
|
|
@@ -876,4 +876,14 @@
|
|
|
876
876
|
--hy-spacing-small: 8px;
|
|
877
877
|
--hy-spacing-x-small: 4px;
|
|
878
878
|
--hy-spacing-xx-small: 2px;
|
|
879
|
+
|
|
880
|
+
/**
|
|
881
|
+
* ==========================================================================
|
|
882
|
+
* STATE LAYERS TOKENS
|
|
883
|
+
* ==========================================================================
|
|
884
|
+
*/
|
|
885
|
+
--hy-state-layer-small: 8%;
|
|
886
|
+
--hy-state-layer-medium: 10%;
|
|
887
|
+
--hy-state-layer-large: 16%;
|
|
888
|
+
--hy-state-layer-x-large: 38%;
|
|
879
889
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
declare class HyButtonAppearanceDirective {
|
|
4
|
+
hyAppearance: i0.InputSignal<"warning" | null>;
|
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HyButtonAppearanceDirective, never>;
|
|
6
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<HyButtonAppearanceDirective, "button[matButton]:not([matButton=\"outlined\"]):not([matButton=\"tonal\"]):not([matButton=\"elevated\"])", never, { "hyAppearance": { "alias": "hyAppearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
type HySizeType = 'small' | 'medium' | 'x-large';
|
|
10
|
+
declare class HyButtonSizeDirective {
|
|
11
|
+
hySize: i0.InputSignal<HySizeType | null>;
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HyButtonSizeDirective, never>;
|
|
13
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<HyButtonSizeDirective, "button[hySize]", never, { "hySize": { "alias": "hySize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
type HyAppearanceIconType = 'warning' | 'warning-filled' | 'tonal' | 'filled';
|
|
17
|
+
declare class HyIconButtonAppearanceDirective {
|
|
18
|
+
hyAppearance: i0.InputSignal<HyAppearanceIconType | null>;
|
|
19
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HyIconButtonAppearanceDirective, never>;
|
|
20
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<HyIconButtonAppearanceDirective, " button[matIconButton][hyAppearance] ", never, { "hyAppearance": { "alias": "hyAppearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare const HyButtonStylingDirectives: readonly [typeof HyButtonSizeDirective, typeof HyButtonAppearanceDirective, typeof HyIconButtonAppearanceDirective];
|
|
24
|
+
|
|
25
|
+
export { HyButtonAppearanceDirective, HyButtonSizeDirective, HyButtonStylingDirectives, HyIconButtonAppearanceDirective };
|
package/types/form-field.d.ts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
1
2
|
import { Provider } from '@angular/core';
|
|
2
3
|
|
|
4
|
+
type HyFormFieldSizeType = 'small' | 'medium' | 'large';
|
|
5
|
+
declare class HyFormFieldSizeDirective {
|
|
6
|
+
hySize: i0.InputSignal<HyFormFieldSizeType | null>;
|
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HyFormFieldSizeDirective, never>;
|
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<HyFormFieldSizeDirective, "mat-form-field[hySize]", never, { "hySize": { "alias": "hySize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
9
|
+
}
|
|
10
|
+
|
|
3
11
|
declare const provideHyFormField: () => Provider;
|
|
4
12
|
|
|
5
|
-
export { provideHyFormField };
|
|
13
|
+
export { HyFormFieldSizeDirective, provideHyFormField };
|
package/types/tokens.d.ts
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
html {
|
|
2
|
-
--ngx-actions-group-menu-padding: 0 var(--hy-spacing-medium-small);
|
|
3
|
-
|
|
4
|
-
ngx-actions-group {
|
|
5
|
-
--ngx-actions-group-gap: var(--hy-spacing-medium-small);
|
|
6
|
-
--ngx-actions-group-padding: var(--hy-spacing-small);
|
|
7
|
-
|
|
8
|
-
--ngx-actions-group-radius: var(--hy-radius-x-large);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
ngx-panel {
|
|
2
|
-
--ngx-panel-radius: var(--hy-radius-x-large);
|
|
3
|
-
|
|
4
|
-
--ngx-panel-padding-block: var(--hy-spacing-x-small);
|
|
5
|
-
--ngx-panel-content-gap: var(--hy-spacing-small);
|
|
6
|
-
--ngx-panel-content-padding-inline: var(--hy-spacing-small);
|
|
7
|
-
--ngx-panel-content-padding-block-end: var(--hy-spacing-medium-small);
|
|
8
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
ngx-search-bar-container {
|
|
2
|
-
--ngx-search-bar-container-radius: var(--hy-radius-x-large);
|
|
3
|
-
|
|
4
|
-
--ngx-search-bar-container-block-size: 48px;
|
|
5
|
-
--ngx-search-bar-container-padding-inline-start: var(
|
|
6
|
-
--hy-spacing-medium-large
|
|
7
|
-
);
|
|
8
|
-
--ngx-search-bar-container-padding-inline-end: var(--hy-spacing-x-small);
|
|
9
|
-
--ngx-search-bar-container-gap: var(--hy-spacing-xx-small);
|
|
10
|
-
|
|
11
|
-
--ngx-search-bar-folded-container-padding: 0 var(--hy-spacing-x-small);
|
|
12
|
-
--ngx-search-bar-icon-padding: var(--hy-spacing-small);
|
|
13
|
-
}
|