@yuuvis/material 2.10.3 → 2.11.0

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.
Files changed (12) hide show
  1. package/badge/badge.component.d.ts +2 -1
  2. package/fesm2022/yuuvis-material-badge.mjs +5 -3
  3. package/fesm2022/yuuvis-material-badge.mjs.map +1 -1
  4. package/fesm2022/yuuvis-material-panes.mjs +17 -0
  5. package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/panes/lib/pane/pane-header/pane-header.component.d.ts +17 -0
  8. package/scss/index.scss +4 -5
  9. package/scss/themes/yuuvis-high-contrast/high-contrast.theme.colors.scss +177 -0
  10. package/scss/themes/yuuvis-high-contrast/theme.high-contrast.scss +12 -0
  11. package/scss/themes/yuuvis-standard/theme-color.scss +58 -59
  12. package/scss/token/_token.scss +5 -5
package/badge/badge.component.d.ts CHANGED
@@ -10,6 +10,7 @@ import * as i0 from "@angular/core";
10
10
  export declare class YmtBadge {
11
11
  severity: import("@angular/core").InputSignal<"success" | "danger" | "warning" | "primary" | "neutral">;
12
12
  outline: import("@angular/core").InputSignal<boolean>;
13
+ aura: import("@angular/core").InputSignal<boolean>;
13
14
  static ɵfac: i0.ɵɵFactoryDeclaration<YmtBadge, never>;
14
- static ɵcmp: i0.ɵɵComponentDeclaration<YmtBadge, "ymt-badge", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
15
+ static ɵcmp: i0.ɵɵComponentDeclaration<YmtBadge, "ymt-badge", never, { "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "aura": { "alias": "aura"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
15
16
  }
package/fesm2022/yuuvis-material-badge.mjs CHANGED
@@ -13,15 +13,17 @@ import { CommonModule } from '@angular/common';
13
13
  class YmtBadge {
14
14
  severity = input('neutral');
15
15
  outline = input(false);
16
+ aura = input(false);
16
17
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YmtBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
17
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: YmtBadge, isStandalone: true, selector: "ymt-badge", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "severity()", "class.outline": "outline()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--ymt-badge-background: var(--ymt-surface-container-highest);--ymt-on-badge-background: var(--ymt-on-surface);--ymt-outline: var(--ymt-text-color-subtle);--ymt-outline-text: var(--ymt-text-color-subtle);display:inline-flex;background-color:var(--ymt-badge-background);color:var(--ymt-on-badge-background);font:var(--ymt-font-body-subtle);padding:0 var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host.outline{background-color:transparent;border:1px solid var(--ymt-outline);color:var(--ymt-outline-text)}:host.success{--ymt-badge-background: var(--ymt-success-container);--ymt-on-badge-background: var(--ymt-on-success-container);--ymt-outline: var(--ymt-success);--ymt-outline-text: var(--ymt-success)}:host.warning{--ymt-badge-background: var(--ymt-warning-container);--ymt-on-badge-background: var(--ymt-on-warning-container);--ymt-outline: var(--ymt-warning);--ymt-outline-text: var(--ymt-warning)}:host.danger{--ymt-badge-background: var(--ymt-danger-container);--ymt-on-badge-background: var(--ymt-on-danger-container);--ymt-outline: var(--ymt-danger);--ymt-outline-text: var(--ymt-danger)}:host.primary{--ymt-badge-background: var(--ymt-primary-container);--ymt-on-badge-background: var(--ymt-on-primary-container);--ymt-outline: var(--ymt-primary);--ymt-outline-text: var(--ymt-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
18
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: YmtBadge, isStandalone: true, selector: "ymt-badge", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, aura: { classPropertyName: "aura", publicName: "aura", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "severity()", "class.outline": "outline()", "class.aura": "aura()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--ymt-badge-corner: var(--ymt-corner-full);--ymt-badge-background: var(--ymt-surface-container-highest);--ymt-badge-on-background: var(--ymt-on-surface);--ymt-badge-outline-color: var(--ymt-text-color-subtle);--ymt-badge-outline-text-color: var(--ymt-text-color-subtle);--ymt-badge-aura-size: 3px;display:inline-flex;background-color:var(--ymt-badge-background);color:var(--ymt-badge-on-background);font:var(--ymt-font-body-subtle);padding:0 var(--ymt-spacing-xs);border-radius:var(--ymt-badge-corner)}:host.aura{--ymt-aura-color: rgb(from var(--ymt-badge-background) r g b / .5);box-shadow:0 0 0 var(--ymt-badge-aura-size) var(--ymt-aura-color)}:host.aura.success{--ymt-badge-background: var(--ymt-success);--ymt-badge-on-background: var(--ymt-on-success)}:host.aura.warning{--ymt-badge-background: var(--ymt-warning);--ymt-badge-on-background: var(--ymt-on-warning)}:host.aura.danger{--ymt-badge-background: var(--ymt-danger);--ymt-badge-on-background: var(--ymt-on-danger)}:host.aura.primary{--ymt-badge-background: var(--ymt-primary);--ymt-badge-on-background: var(--ymt-on-primary)}:host.outline{background-color:transparent;border:1px solid var(--ymt-badge-outline-color);color:var(--ymt-badge-outline-text-color)}:host.aura{--ymt-aura-color: rgb(from var(--ymt-badge-outline-color) r g b / .2)}:host.success{--ymt-badge-background: var(--ymt-success-container);--ymt-badge-on-background: var(--ymt-on-success-container);--ymt-badge-outline-color: var(--ymt-success);--ymt-badge-outline-text-color: var(--ymt-success)}:host.warning{--ymt-badge-background: var(--ymt-warning-container);--ymt-badge-on-background: var(--ymt-on-warning-container);--ymt-badge-outline-color: var(--ymt-warning);--ymt-badge-outline-text-color: var(--ymt-warning)}:host.danger{--ymt-badge-background: var(--ymt-danger-container);--ymt-badge-on-background: var(--ymt-on-danger-container);--ymt-badge-outline-color: var(--ymt-danger);--ymt-badge-outline-text-color: var(--ymt-danger)}:host.primary{--ymt-badge-background: var(--ymt-primary-container);--ymt-badge-on-background: var(--ymt-on-primary-container);--ymt-badge-outline-color: var(--ymt-primary);--ymt-badge-outline-text-color: var(--ymt-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
18
19
  }
19
20
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YmtBadge, decorators: [{
20
21
  type: Component,
21
22
  args: [{ selector: 'ymt-badge', imports: [CommonModule], template: '<ng-content></ng-content>', host: {
22
23
  '[attr.class]': 'severity()',
23
- '[class.outline]': 'outline()'
24
- }, styles: [":host{--ymt-badge-background: var(--ymt-surface-container-highest);--ymt-on-badge-background: var(--ymt-on-surface);--ymt-outline: var(--ymt-text-color-subtle);--ymt-outline-text: var(--ymt-text-color-subtle);display:inline-flex;background-color:var(--ymt-badge-background);color:var(--ymt-on-badge-background);font:var(--ymt-font-body-subtle);padding:0 var(--ymt-spacing-xs);border-radius:var(--ymt-corner-full)}:host.outline{background-color:transparent;border:1px solid var(--ymt-outline);color:var(--ymt-outline-text)}:host.success{--ymt-badge-background: var(--ymt-success-container);--ymt-on-badge-background: var(--ymt-on-success-container);--ymt-outline: var(--ymt-success);--ymt-outline-text: var(--ymt-success)}:host.warning{--ymt-badge-background: var(--ymt-warning-container);--ymt-on-badge-background: var(--ymt-on-warning-container);--ymt-outline: var(--ymt-warning);--ymt-outline-text: var(--ymt-warning)}:host.danger{--ymt-badge-background: var(--ymt-danger-container);--ymt-on-badge-background: var(--ymt-on-danger-container);--ymt-outline: var(--ymt-danger);--ymt-outline-text: var(--ymt-danger)}:host.primary{--ymt-badge-background: var(--ymt-primary-container);--ymt-on-badge-background: var(--ymt-on-primary-container);--ymt-outline: var(--ymt-primary);--ymt-outline-text: var(--ymt-primary)}\n"] }]
24
+ '[class.outline]': 'outline()',
25
+ '[class.aura]': 'aura()'
26
+ }, styles: [":host{--ymt-badge-corner: var(--ymt-corner-full);--ymt-badge-background: var(--ymt-surface-container-highest);--ymt-badge-on-background: var(--ymt-on-surface);--ymt-badge-outline-color: var(--ymt-text-color-subtle);--ymt-badge-outline-text-color: var(--ymt-text-color-subtle);--ymt-badge-aura-size: 3px;display:inline-flex;background-color:var(--ymt-badge-background);color:var(--ymt-badge-on-background);font:var(--ymt-font-body-subtle);padding:0 var(--ymt-spacing-xs);border-radius:var(--ymt-badge-corner)}:host.aura{--ymt-aura-color: rgb(from var(--ymt-badge-background) r g b / .5);box-shadow:0 0 0 var(--ymt-badge-aura-size) var(--ymt-aura-color)}:host.aura.success{--ymt-badge-background: var(--ymt-success);--ymt-badge-on-background: var(--ymt-on-success)}:host.aura.warning{--ymt-badge-background: var(--ymt-warning);--ymt-badge-on-background: var(--ymt-on-warning)}:host.aura.danger{--ymt-badge-background: var(--ymt-danger);--ymt-badge-on-background: var(--ymt-on-danger)}:host.aura.primary{--ymt-badge-background: var(--ymt-primary);--ymt-badge-on-background: var(--ymt-on-primary)}:host.outline{background-color:transparent;border:1px solid var(--ymt-badge-outline-color);color:var(--ymt-badge-outline-text-color)}:host.aura{--ymt-aura-color: rgb(from var(--ymt-badge-outline-color) r g b / .2)}:host.success{--ymt-badge-background: var(--ymt-success-container);--ymt-badge-on-background: var(--ymt-on-success-container);--ymt-badge-outline-color: var(--ymt-success);--ymt-badge-outline-text-color: var(--ymt-success)}:host.warning{--ymt-badge-background: var(--ymt-warning-container);--ymt-badge-on-background: var(--ymt-on-warning-container);--ymt-badge-outline-color: var(--ymt-warning);--ymt-badge-outline-text-color: var(--ymt-warning)}:host.danger{--ymt-badge-background: var(--ymt-danger-container);--ymt-badge-on-background: var(--ymt-on-danger-container);--ymt-badge-outline-color: var(--ymt-danger);--ymt-badge-outline-text-color: var(--ymt-danger)}:host.primary{--ymt-badge-background: var(--ymt-primary-container);--ymt-badge-on-background: var(--ymt-on-primary-container);--ymt-badge-outline-color: var(--ymt-primary);--ymt-badge-outline-text-color: var(--ymt-primary)}\n"] }]
25
27
  }] });
26
28
 
27
29
  const greeting = 'Hello World!';
package/fesm2022/yuuvis-material-badge.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"yuuvis-material-badge.mjs","sources":["../../../../../libs/yuuvis/material/badge/src/badge.component.ts","../../../../../libs/yuuvis/material/badge/src/index.ts","../../../../../libs/yuuvis/material/badge/src/yuuvis-material-badge.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Badge component to display a label with different severity levels.\n * From an accessibility perspective badges take care of sufficient color contrast. You may add\n * additional aria attributes depending on how you use the badge in your application.\n * \n * Badges come in two variants: filled (default) and outline. Use the `outline` input to \n * switch to outline variant.\n */\n@Component({\n selector: 'ymt-badge',\n imports: [CommonModule],\n template: '<ng-content></ng-content>',\n styleUrl: './badge.component.scss',\n host: { \n '[attr.class]': 'severity()',\n '[class.outline]': 'outline()'\n }\n})\nexport class YmtBadge {\n severity = input<'success' | 'danger' | 'warning' | 'primary' | 'neutral'>('neutral');\n outline = input<boolean>(false);\n}\n","export const greeting = 'Hello World!';\n\nexport * from './badge.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;AAOG;MAWU,QAAQ,CAAA;AACnB,IAAA,QAAQ,GAAG,KAAK,CAA2D,SAAS,CAAC;AACrF,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC;wGAFpB,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAPT,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qyCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAD3B,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAQX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAVpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,2BAA2B,EAE/B,IAAA,EAAA;AACJ,wBAAA,cAAc,EAAE,YAAY;AAC5B,wBAAA,iBAAiB,EAAE;AACpB,qBAAA,EAAA,MAAA,EAAA,CAAA,qyCAAA,CAAA,EAAA;;;ACnBI,MAAM,QAAQ,GAAG;;ACAxB;;AAEG;;;;"}
1
+ {"version":3,"file":"yuuvis-material-badge.mjs","sources":["../../../../../libs/yuuvis/material/badge/src/badge.component.ts","../../../../../libs/yuuvis/material/badge/src/index.ts","../../../../../libs/yuuvis/material/badge/src/yuuvis-material-badge.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Badge component to display a label with different severity levels.\n * From an accessibility perspective badges take care of sufficient color contrast. You may add\n * additional aria attributes depending on how you use the badge in your application.\n * \n * Badges come in two variants: filled (default) and outline. Use the `outline` input to \n * switch to outline variant.\n */\n@Component({\n selector: 'ymt-badge',\n imports: [CommonModule],\n template: '<ng-content></ng-content>',\n styleUrl: './badge.component.scss',\n host: { \n '[attr.class]': 'severity()',\n '[class.outline]': 'outline()',\n '[class.aura]': 'aura()'\n }\n})\nexport class YmtBadge {\n severity = input<'success' | 'danger' | 'warning' | 'primary' | 'neutral'>('neutral');\n outline = input<boolean>(false);\n aura = input<boolean>(false);\n}\n","export const greeting = 'Hello World!';\n\nexport * from './badge.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;AAOG;MAYU,QAAQ,CAAA;AACnB,IAAA,QAAQ,GAAG,KAAK,CAA2D,SAAS,CAAC;AACrF,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,CAAC;AAC/B,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,CAAC;wGAHjB,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,YAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EART,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,spEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAD3B,YAAY,EAAA,CAAA,EAAA,CAAA;;4FASX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAXpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,2BAA2B,EAE/B,IAAA,EAAA;AACJ,wBAAA,cAAc,EAAE,YAAY;AAC5B,wBAAA,iBAAiB,EAAE,WAAW;AAC9B,wBAAA,cAAc,EAAE;AACjB,qBAAA,EAAA,MAAA,EAAA,CAAA,spEAAA,CAAA,EAAA;;;ACpBI,MAAM,QAAQ,GAAG;;ACAxB;;AAEG;;;;"}
package/fesm2022/yuuvis-material-panes.mjs CHANGED
@@ -24,6 +24,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
24
24
  args: [{ selector: 'ymt-pane-body', imports: [CommonModule], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
25
25
  }] });
26
26
 
27
+ /**
28
+ * Component for the pane header. It can be used to display a title,
29
+ * subtitle and actions in the pane header.
30
+ *
31
+ * The title and subtitle can be set via the `title` and `subtitle` inputs
32
+ * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:
33
+ *
34
+ * ```html
35
+ * <!-- Using inputs -->
36
+ * <ymt-pane-header [title]="'Pane Title'" [subtitle]="'Pane Subtitle'"></ymt-pane-header>
37
+ * <!-- Using template refs -->
38
+ * <ymt-pane-header>
39
+ * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>
40
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
41
+ * </ymt-pane-header>
42
+ * ```
43
+ */
27
44
  class YmtPaneHeaderComponent {
28
45
  /**
29
46
  * Title of the pane
package/fesm2022/yuuvis-material-panes.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-aside',\n imports: [CommonModule],\n templateUrl: './pane-aside.component.html',\n styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-body',\n imports: [CommonModule],\n templateUrl: './pane-body.component.html',\n styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n@Component({\n selector: 'ymt-pane-header',\n imports: [CommonModule, MatIconModule],\n templateUrl: './pane-header.component.html',\n styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n /**\n * Title of the pane\n */\n title = input<string>();\n /**\n * Icon of the pane\n */\n icon = input<string>();\n /**\n * Subtitle of the pane\n */\n subtitle = input<string>();\n /**\n * TemplateRef for actions area in the pane header.\n */\n actions = input<TemplateRef<any>>();\n\n titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n @if (icon()) {\n <div class=\"icon\">\n <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n </div>\n }\n <h2>\n @let ts = titleSlot();\n @if (ts) {\n <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n } @else {\n {{ title() }}\n }\n </h2>\n <small>\n @let ss = subtitleSlot();\n @if (ss) {\n <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n } @else {\n {{ subtitle() }}\n }\n </small>\n @let a = actions();\n @if (a) {\n <div class=\"actions\">\n <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n </div>\n }\n</header>\n","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n selector: 'ymt-pane-top-bar',\n imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n templateUrl: './pane-top-bar.component.html',\n styleUrl: './pane-top-bar.component.scss',\n host: {\n '[class.inverse]': 'modeAlign() === \"end\"',\n '[class.has-mode]': 'mode() !== undefined'\n }\n})\nexport class YmtPaneTopBarComponent {\n /**\n * TemplateRef for actions area in the top bar.\n */\n actions = input<TemplateRef<any>>();\n modeAlign = input<'start' | 'end'>('start');\n\n mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n /**\n * Event emitted when the pane toggle button is clicked.\n */\n paneToggled = output<boolean>();\n navigationClicked = output<boolean>();\n\n paneCollapsed = signal<boolean>(false);\n #paneCollapsedEffect = effect(() => {\n this.paneToggled.emit(this.paneCollapsed());\n });\n\n togglePane() {\n this.paneCollapsed.set(!this.paneCollapsed());\n }\n\n navClick() {\n this.navigationClicked.emit(true);\n }\n}\n"," @let ta = actions();\n <div class=\"top-bar\">\n @let m = mode();\n @if (m === 'toggle') {\n <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n </button>\n } @else if (m === 'navigation') {\n <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n @if (ta) {\n <div class=\"actions\">\n <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n </div>\n }\n </div>","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n * Pane content goes here.\n * </ymt-pane>\n * ```\n * \n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n * --header-area-background: var(--ymt-surface-container-low);\n * --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n * --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n * <ng-template #yuvPaneActions>\n * <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n * <button ymt-icon-button><mat-icon>more</mat-icon></button>\n * </ng-template>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n selector: 'ymt-pane',\n imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n templateUrl: './pane.component.html',\n styleUrl: './pane.component.scss',\n host: {\n '[class.collapsed]': 'collapsed()',\n '[class.plain]': 'plain()'\n }\n})\nexport class YmtPaneComponent {\n /**\n * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n * the top bar.\n * \n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n * <ng-template #topBarActions>\n * <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n * </ng-template>\n * ```\n * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n */\n topBarActions = input<TemplateRef<any>>();\n\n /**\n * Setting this to true will remove the default styles for the pane. So it will\n * render without border-radius, border and background color, but keep the inner\n * structure. This is useful when you want to use the pane inside another container\n * and want to apply custom styles to the pane.\n */\n plain = input<boolean>(false);\n\n /**\n * A pane may have different modes to control the behavior of the top bar.\n * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.\n * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.\n */\n mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n modeAlign = input<'start' | 'end'>('start');\n /**\n * Event emitted when the pane toggle button is clicked. This toggle button is shown\n * when mode is set to 'toggle'.\n */\n paneToggled = output<boolean>();\n\n /**\n * Event emitted when the navigation button is clicked. Navigation button is shown when\n * mode is set to 'navigation'.\n */\n navigationClicked = output<boolean>();\n\n /**\n * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.\n */\n collapsed = signal<boolean>(false);\n\n togglePane(collapsed: boolean) {\n this.collapsed.set(collapsed);\n this.paneToggled.emit(collapsed);\n }\n}\n","@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n <ymt-pane-top-bar\n [actions]=\"topBarActions()\"\n [modeAlign]=\"modeAlign()\"\n [mode]=\"mode()\"\n (navigationClicked)=\"navigationClicked.emit(true)\"\n (paneToggled)=\"togglePane($event)\"\n ></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-footer',\n imports: [CommonModule],\n templateUrl: './pane-footer.component.html',\n styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n imports: cmp,\n exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}
1
+ {"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-aside',\n imports: [CommonModule],\n templateUrl: './pane-aside.component.html',\n styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-body',\n imports: [CommonModule],\n templateUrl: './pane-body.component.html',\n styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n selector: 'ymt-pane-header',\n imports: [CommonModule, MatIconModule],\n templateUrl: './pane-header.component.html',\n styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n /**\n * Title of the pane\n */\n title = input<string>();\n /**\n * Icon of the pane\n */\n icon = input<string>();\n /**\n * Subtitle of the pane\n */\n subtitle = input<string>();\n /**\n * TemplateRef for actions area in the pane header.\n */\n actions = input<TemplateRef<any>>();\n\n titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n @if (icon()) {\n <div class=\"icon\">\n <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n </div>\n }\n <h2>\n @let ts = titleSlot();\n @if (ts) {\n <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n } @else {\n {{ title() }}\n }\n </h2>\n <small>\n @let ss = subtitleSlot();\n @if (ss) {\n <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n } @else {\n {{ subtitle() }}\n }\n </small>\n @let a = actions();\n @if (a) {\n <div class=\"actions\">\n <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n </div>\n }\n</header>\n","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n selector: 'ymt-pane-top-bar',\n imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n templateUrl: './pane-top-bar.component.html',\n styleUrl: './pane-top-bar.component.scss',\n host: {\n '[class.inverse]': 'modeAlign() === \"end\"',\n '[class.has-mode]': 'mode() !== undefined'\n }\n})\nexport class YmtPaneTopBarComponent {\n /**\n * TemplateRef for actions area in the top bar.\n */\n actions = input<TemplateRef<any>>();\n modeAlign = input<'start' | 'end'>('start');\n\n mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n /**\n * Event emitted when the pane toggle button is clicked.\n */\n paneToggled = output<boolean>();\n navigationClicked = output<boolean>();\n\n paneCollapsed = signal<boolean>(false);\n #paneCollapsedEffect = effect(() => {\n this.paneToggled.emit(this.paneCollapsed());\n });\n\n togglePane() {\n this.paneCollapsed.set(!this.paneCollapsed());\n }\n\n navClick() {\n this.navigationClicked.emit(true);\n }\n}\n"," @let ta = actions();\n <div class=\"top-bar\">\n @let m = mode();\n @if (m === 'toggle') {\n <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n </button>\n } @else if (m === 'navigation') {\n <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n @if (ta) {\n <div class=\"actions\">\n <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n </div>\n }\n </div>","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n * Pane content goes here.\n * </ymt-pane>\n * ```\n * \n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n * --header-area-background: var(--ymt-surface-container-low);\n * --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n * --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n * <ng-template #yuvPaneActions>\n * <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n * <button ymt-icon-button><mat-icon>more</mat-icon></button>\n * </ng-template>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n selector: 'ymt-pane',\n imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n templateUrl: './pane.component.html',\n styleUrl: './pane.component.scss',\n host: {\n '[class.collapsed]': 'collapsed()',\n '[class.plain]': 'plain()'\n }\n})\nexport class YmtPaneComponent {\n /**\n * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n * the top bar.\n * \n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n * <ng-template #topBarActions>\n * <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n * </ng-template>\n * ```\n * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n */\n topBarActions = input<TemplateRef<any>>();\n\n /**\n * Setting this to true will remove the default styles for the pane. So it will\n * render without border-radius, border and background color, but keep the inner\n * structure. This is useful when you want to use the pane inside another container\n * and want to apply custom styles to the pane.\n */\n plain = input<boolean>(false);\n\n /**\n * A pane may have different modes to control the behavior of the top bar.\n * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.\n * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.\n */\n mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n modeAlign = input<'start' | 'end'>('start');\n /**\n * Event emitted when the pane toggle button is clicked. This toggle button is shown\n * when mode is set to 'toggle'.\n */\n paneToggled = output<boolean>();\n\n /**\n * Event emitted when the navigation button is clicked. Navigation button is shown when\n * mode is set to 'navigation'.\n */\n navigationClicked = output<boolean>();\n\n /**\n * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.\n */\n collapsed = signal<boolean>(false);\n\n togglePane(collapsed: boolean) {\n this.collapsed.set(collapsed);\n this.paneToggled.emit(collapsed);\n }\n}\n","@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n <ymt-pane-top-bar\n [actions]=\"topBarActions()\"\n [modeAlign]=\"modeAlign()\"\n [mode]=\"mode()\"\n (navigationClicked)=\"navigationClicked.emit(true)\"\n (paneToggled)=\"togglePane($event)\"\n ></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ymt-pane-footer',\n imports: [CommonModule],\n templateUrl: './pane-footer.component.html',\n styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n imports: cmp,\n exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuuvis/material",
3
- "version": "2.10.3",
3
+ "version": "2.11.0",
4
4
  "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/panes/lib/pane/pane-header/pane-header.component.d.ts CHANGED
@@ -1,5 +1,22 @@
1
1
  import { TemplateRef } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
+ /**
4
+ * Component for the pane header. It can be used to display a title,
5
+ * subtitle and actions in the pane header.
6
+ *
7
+ * The title and subtitle can be set via the `title` and `subtitle` inputs
8
+ * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:
9
+ *
10
+ * ```html
11
+ * <!-- Using inputs -->
12
+ * <ymt-pane-header [title]="'Pane Title'" [subtitle]="'Pane Subtitle'"></ymt-pane-header>
13
+ * <!-- Using template refs -->
14
+ * <ymt-pane-header>
15
+ * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>
16
+ * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
17
+ * </ymt-pane-header>
18
+ * ```
19
+ */
3
20
  export declare class YmtPaneHeaderComponent {
4
21
  /**
5
22
  * Title of the pane
package/scss/index.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @use 'sass:meta';
2
2
  @use 'themes/yuuvis-standard/mat-theme-config' as theme-cfg;
3
+ @use 'themes/yuuvis-high-contrast/theme.high-contrast';
3
4
  @use 'token/token.tools' as token-tools;
4
5
  @forward 'material-components/tools';
5
6
 
6
-
7
- @mixin theme($theme: (), $theme-overrides: ()){
7
+ @mixin theme($theme: (), $theme-overrides: ()) {
8
8
  @include theme-cfg.modify($theme, $theme-overrides);
9
9
  }
10
10
 
11
- @mixin token-overrides($overrides: ()){
11
+ @mixin token-overrides($overrides: ()) {
12
12
  @include token-tools.token-overrides($overrides);
13
13
  }
14
14
 
@@ -57,8 +57,7 @@
57
57
  }
58
58
  }
59
59
  //Custom CSS for Material Components (on top of Token Overrides)
60
- @if($material-components){
60
+ @if ($material-components) {
61
61
  @include meta.load-css('./material-components');
62
62
  }
63
-
64
63
  }
package/scss/themes/yuuvis-high-contrast/high-contrast.theme.colors.scss ADDED
@@ -0,0 +1,177 @@
1
+ @use '../../token/token.tools' as token-tools;
2
+ // =============================================================================
3
+ // HIGH-CONTRAST THEME
4
+ // src/styles/_theme-high-contrast.scss
5
+ //
6
+ // WCAG 2 AA compliant — minimum 4.5:1 for normal text, 3:1 for UI components.
7
+ // Contrast ratios annotated as [light-value ratio / dark-value ratio].
8
+ //
9
+ // CASCADE STRATEGY
10
+ // @yuuvis/material emits --ymt-* tokens inside @layer yuuvis > @layer token.
11
+ // This file is intentionally UNLAYERED so every declaration here wins over
12
+ // any layered token, regardless of specificity or source order.
13
+ // Never wrap content in @layer here.
14
+ //
15
+ // MODERN CSS: light-dark()
16
+ // A single mixin holds both variants. The CSS light-dark(light, dark)
17
+ // function picks the first value when color-scheme resolves to light,
18
+ // and the second when it resolves to dark.
19
+ //
20
+ // Activation sets color-scheme on html/:root — that alone is sufficient
21
+ // for light-dark() to pick the correct variant:
22
+ // html.theme-hc-dark → color-scheme: dark → second value
23
+ // html.theme-hc-light → color-scheme: light → first value
24
+ // @media (prefers-contrast: more) → color-scheme: light dark → follows OS
25
+ //
26
+ // Browser support: Chrome 123+, Firefox 120+, Safari 17.5+ (2023–2024).
27
+ //
28
+ // ACTIVATION
29
+ // 1. CSS class (manual toggle):
30
+ // html.theme-hc-dark — light-on-dark
31
+ // html.theme-hc-light — dark-on-light
32
+ // 2. OS preference (automatic):
33
+ // @media (prefers-contrast: more)
34
+ // 3. Windows High Contrast Mode:
35
+ // @media (forced-colors: active)
36
+ // =============================================================================
37
+
38
+ // =============================================================================
39
+ // MIXIN: apply-hc
40
+ //
41
+ // Single mixin for both variants. light-dark(light-value, dark-value) resolves
42
+ // based on the color-scheme set by the calling selector.
43
+ //
44
+ // light-value = HC Light (dark-on-light) dark-value = HC Dark (light-on-dark)
45
+ // =============================================================================
46
+ @mixin apply-hc() {
47
+ // ── SURFACES ───────────────────────────────────────────────────────────────
48
+ @include token-tools.token-overrides(
49
+ (
50
+ surface-app: light-dark(#ffffff, #000000),
51
+ surface: light-dark(#f5f5f5, #0a0a0a),
52
+ surface-container-lowest: light-dark(#ffffff, #000000),
53
+ surface-container-low: light-dark(#f0f0f0, #0d0d0d),
54
+ surface-container: light-dark(#e8e8e8, #141414),
55
+ surface-container-high: light-dark(#e0e0e0, #1a1a1a),
56
+ surface-container-highest: light-dark(#d6d6d6, #212121),
57
+ surface-panel: light-dark(#ffffff, #0d0d0d),
58
+ pane-surface: light-dark(#ffffff, #000000),
59
+ pane-surface-floating: light-dark(#ffffff, #141414),
60
+ pane-surface-blank: transparent,
61
+ pane-surface-floating-inverse: light-dark(#000000, #ffffff),
62
+ bar-surface: light-dark(#ffffff, #000000),
63
+ bar-surface-blank: transparent,
64
+
65
+ // ── ON-SURFACE (text / icons) ───────────────────────────────────────────────
66
+ on-surface: light-dark(#000000, #ffffff),
67
+ // 21:1 / 21:1
68
+ on-surface-type-subtle: light-dark(#595959, #a0a0a0),
69
+ // 7.0:1 / 10.7:1
70
+ text-color: light-dark(#000000, #ffffff),
71
+ // alias → on-surface
72
+ text-color-subtle: light-dark(#595959, #a0a0a0),
73
+ // alias → on-surface-type-subtle
74
+ on-bar-surface: light-dark(#000000, #ffffff),
75
+ // 21:1 / 21:1
76
+ on-pane-surface: light-dark(#000000, #ffffff),
77
+ // 21:1 / 21:1
78
+ on-pane-surface-floating-inverse: light-dark(#ffffff, #000000),
79
+ // 21:1 / 21:1
80
+ pane-drag-handle: light-dark(#8c8c8c, #606060),
81
+ // 3.3:1 / 5.7:1 (UI ≥ 3:1)
82
+ // ── PRIMARY / INTERACTIVE ──────────────────────────────────────────────────
83
+ primary: light-dark(#0047cc, #6ba4ff),
84
+ // 7.1:1 / 8.5:1
85
+ on-primary: light-dark(#ffffff, #000000),
86
+ // 7.1:1 / 8.5:1
87
+ primary-container: light-dark(#d6e4ff, #002766),
88
+ on-primary-container: light-dark(#001a52, #c8dcff),
89
+ // 10.8:1 / 9.6:1
90
+ text-color-primary: light-dark(#0047cc, #6ba4ff),
91
+ // 7.1:1 / 8.5:1
92
+ // ── BRAND ──────────────────────────────────────────────────────────────────
93
+ brand: light-dark(#ffffff, #000000),
94
+ on-brand: light-dark(#000000, #ffffff),
95
+ // 21:1 / 21:1
96
+ // ── OUTLINES ───────────────────────────────────────────────────────────────
97
+ outline-width: 1px,
98
+ outline: light-dark(#767676, #737373),
99
+ // 4.5:1 / 5.9:1 (UI ≥ 3:1)
100
+ outline-variant: light-dark(#949494, #525252),
101
+ // 3.0:1 / 4.6:1 (UI ≥ 3:1)
102
+ outline-variant-emphasized: light-dark(#595959, #8a8a8a),
103
+ // 7.0:1 / 7.6:1
104
+ // ── STATUS: SUCCESS ─────────────────────────────────────────────────────────
105
+ success: light-dark(#166534, #4ade80),
106
+ // 7.2:1 / 8.3:1
107
+ on-success: light-dark(#ffffff, #000000),
108
+ // 7.2:1 / 8.3:1
109
+ success-container: light-dark(#dcfce7, #003314),
110
+ on-success-container: light-dark(#14532d, #86efac),
111
+ // 8.0:1 / 7.2:1
112
+ // ── STATUS: DANGER ──────────────────────────────────────────────────────────
113
+ danger: light-dark(#b91c1c, #ff6b6b),
114
+ // 6.3:1 / 5.3:1
115
+ on-danger: light-dark(#ffffff, #000000),
116
+ // 6.3:1 / 5.3:1
117
+ danger-container: light-dark(#fee2e2, #4a0000),
118
+ on-danger-container: light-dark(#7f1d1d, #ffbebe),
119
+ // 8.0:1 / 7.1:1
120
+ // ── STATUS: WARNING ─────────────────────────────────────────────────────────
121
+ warning: light-dark(#92400e, #facc15),
122
+ // 6.1:1 / 12.7:1
123
+ on-warning: light-dark(#ffffff, #000000),
124
+ // 6.1:1 / 12.7:1
125
+ warning-container: light-dark(#fef3c7, #3d2800),
126
+ on-warning-container: light-dark(#78350f, #ffe082),
127
+ // 7.6:1 / 7.4:1
128
+ // ── INVERSE SURFACE (tooltips / snack bars) ────────────────────────────────
129
+ inverse-surface: light-dark(#000000, #ffffff),
130
+ inverse-surface-90: light-dark(rgb(0 0 0 / 90%), rgb(255 255 255 / 90%)),
131
+ on-inverse-surface: light-dark(#ffffff, #000000),
132
+ // 21:1 / 21:1
133
+ // ── SCRIM ──────────────────────────────────────────────────────────────────
134
+ scrim: #000000,
135
+ scrim-opacity: 65,
136
+
137
+ // midpoint: light=60, dark=70
138
+ // ── TEXT SELECTION ─────────────────────────────────────────────────────────
139
+ text-selection-container: light-dark(#d6e4ff, #002766),
140
+ on-text-selection-container: light-dark(#001a52, #c8dcff),
141
+ // 10.8:1 / 9.6:1
142
+ // ── INTERACTIVE STATES ─────────────────────────────────────────────────────
143
+ focus-background: light-dark(#e8e8e8, #1a1a1a),
144
+ on-focus-background: light-dark(#000000, #ffffff),
145
+ // 16.1:1 / 17.1:1
146
+ hover-background: light-dark(#f0f0f0, #141414),
147
+ on-hover-background: light-dark(#000000, #ffffff),
148
+ // 18.1:1 / 18.4:1
149
+ selection-background: light-dark(#d6d6d6, #212121),
150
+ on-selection-background: light-dark(#000000, #ffffff),
151
+ // 13.8:1 / 15.5:1
152
+ current-background: light-dark(#d6e4ff, #002766),
153
+ on-current-background: light-dark(#001a52, #c8dcff),
154
+ // 10.8:1 / 9.6:1
155
+ // ── FOCUS INDICATOR ────────────────────────────────────────────────────────
156
+ // Dual-color ring works on any background: inner contrasts with outer.
157
+ focus-indicator-size: 3px,
158
+ // widened from 2px for HC
159
+ focus-indicator-inner: light-dark(#ffffff, #000000),
160
+ focus-indicator-outer: light-dark(#000000, #ffffff),
161
+ // 21:1 against surroundings
162
+ // ── SCROLLBAR ──────────────────────────────────────────────────────────────
163
+ scrollbar-thumb-color: light-dark(#949494, #525252),
164
+ // 3.0:1 / 4.6:1 (UI ≥ 3:1)
165
+ scrollbar-thumb-color-hover: light-dark(#595959, #737373),
166
+ // 7.0:1 / 5.9:1
167
+ scrollbar-track-color: light-dark(#f0f0f0, #141414),
168
+ // ── STATE LAYER OPACITIES ──────────────────────────────────────────────────
169
+ // Material defaults (hover 0.08, focus 0.12) are imperceptible in HC.
170
+ // Raised values ensure state changes meet the 3:1 non-text contrast threshold.
171
+ hover-state-layer-opacity: 0.16,
172
+ focus-state-layer-opacity: 0.24,
173
+ pressed-state-layer-opacity: 0.32,
174
+ disabled-opacity: 0.5
175
+ )
176
+ ); // raised from 0.35
177
+ }
package/scss/themes/yuuvis-high-contrast/theme.high-contrast.scss ADDED
@@ -0,0 +1,12 @@
1
+ @use 'high-contrast.theme.colors' as high-contrast-theme-colors;
2
+
3
+ body.yuv-high-contrast {
4
+ @include high-contrast-theme-colors.apply-hc();
5
+ }
6
+
7
+ @media (prefers-contrast: more) {
8
+ :root:not(.yuuvis-high-contrast-theme) {
9
+ color-scheme: light dark;
10
+ @include high-contrast-theme-colors.apply-hc();
11
+ }
12
+ }
package/scss/themes/yuuvis-standard/theme-color.scss CHANGED
@@ -18,7 +18,7 @@ $_palettes: (
18
18
  95: #e9f1ff,
19
19
  98: #f8f9ff,
20
20
  99: #fdfcff,
21
- 100: #ffffff,
21
+ 100: #ffffff
22
22
  ),
23
23
  secondary: (
24
24
  0: #000000,
@@ -36,7 +36,7 @@ $_palettes: (
36
36
  95: #eef0f8,
37
37
  98: #f8f9ff,
38
38
  99: #fdfcff,
39
- 100: #ffffff,
39
+ 100: #ffffff
40
40
  ),
41
41
  tertiary: (
42
42
  0: #000000,
@@ -54,7 +54,7 @@ $_palettes: (
54
54
  95: #eef0f8,
55
55
  98: #f8f9ff,
56
56
  99: #fdfcff,
57
- 100: #ffffff,
57
+ 100: #ffffff
58
58
  ),
59
59
  neutral: (
60
60
  0: #000000,
@@ -82,7 +82,7 @@ $_palettes: (
82
82
  87: #d7dae1,
83
83
  92: #e6e8f0,
84
84
  94: #ebeef5,
85
- 96: #f1f3fb,
85
+ 96: #f1f3fb
86
86
  ),
87
87
  neutral-variant: (
88
88
  0: #000000,
@@ -100,87 +100,86 @@ $_palettes: (
100
100
  95: #eef0f8,
101
101
  98: #f8f9ff,
102
102
  99: #fdfcff,
103
- 100: #ffffff,
103
+ 100: #ffffff
104
104
  ),
105
105
  error: (
106
106
  0: #000000,
107
- 10: #400011,
108
- 20: #670021,
109
- 25: #7c0029,
110
- 30: #8f0732,
111
- 35: #a0193d,
112
- 40: #b12848,
113
- 50: #d2425f,
114
- 60: #f45b78,
115
- 70: #ff8798,
116
- 80: #ffb2ba,
117
- 90: #ffd9dc,
118
- 95: #ffeced,
119
- 98: #fff8f7,
107
+ 10: #3f0300,
108
+ 20: #650900,
109
+ 25: #7a0d00,
110
+ 30: #8f1100,
111
+ 35: #a51500,
112
+ 40: #bb1a00,
113
+ 50: #e32f13,
114
+ 60: #ff5538,
115
+ 70: #ff8a74,
116
+ 80: #ffb4a5,
117
+ 90: #ffdad3,
118
+ 95: #ffede9,
119
+ 98: #fff8f6,
120
120
  99: #fffbff,
121
- 100: #ffffff,
121
+ 100: #ffffff
122
122
  ),
123
123
  success: (
124
124
  0: #000000,
125
- 10: #002019,
126
- 20: #00382d,
127
- 25: #004437,
128
- 30: #005142,
129
- 35: #005e4d,
130
- 40: #006b58,
131
- 50: #108670,
132
- 60: #3aa189,
133
- 70: #58bca3,
134
- 80: #75d8be,
135
- 90: #92f5da,
136
- 95: #b8ffea,
137
- 98: #e6fff5,
138
- 99: #f3fff9,
139
- 100: #ffffff,
125
+ 10: #00210d,
126
+ 20: #00391b,
127
+ 25: #004522,
128
+ 30: #005229,
129
+ 35: #006031,
130
+ 40: #006d39,
131
+ 50: #17884b,
132
+ 60: #3ba363,
133
+ 70: #59bf7b,
134
+ 80: #75db94,
135
+ 90: #91f8ae,
136
+ 95: #c3ffcf,
137
+ 98: #eaffea,
138
+ 99: #f5fff3,
139
+ 100: #ffffff
140
140
  ),
141
141
  warning: (
142
142
  0: #000000,
143
- 10: #221b00,
144
- 20: #3a3000,
145
- 25: #473b00,
146
- 30: #544600,
147
- 35: #615100,
148
- 40: #6f5d00,
149
- 50: #8c7600,
150
- 60: #a98f00,
151
- 70: #c8a900,
152
- 80: #e8c400,
153
- 90: #ffe169,
154
- 95: #fff0c1,
155
- 98: #fff9ee,
143
+ 10: #2d1600,
144
+ 20: #4b2800,
145
+ 25: #5b3100,
146
+ 30: #6b3b00,
147
+ 35: #7c4500,
148
+ 40: #8d4f00,
149
+ 50: #b06505,
150
+ 60: #cf7d25,
151
+ 70: #ee973e,
152
+ 80: #ffb876,
153
+ 90: #ffdcc0,
154
+ 95: #ffeee1,
155
+ 98: #fff8f5,
156
156
  99: #fffbff,
157
- 100: #ffffff,
158
- ),
157
+ 100: #ffffff
158
+ )
159
159
  );
160
160
 
161
161
  $_rest: (
162
162
  secondary: map.get($_palettes, secondary),
163
163
  neutral: map.get($_palettes, neutral),
164
- neutral-variant: map.get($_palettes, neutral-variant),
165
- error: map.get($_palettes, error),
164
+ neutral-variant: map.get($_palettes, neutral-variant),
165
+ error: map.get($_palettes, error)
166
166
  );
167
167
 
168
-
169
- @function primary-palette(){
170
- @return map.merge(map.get($_palettes, primary), $_rest)
168
+ @function primary-palette() {
169
+ @return map.merge(map.get($_palettes, primary), $_rest);
171
170
  }
172
171
 
173
- @function tertiary-palette(){
174
- @return map.merge(map.get($_palettes, tertiary), $_rest);
172
+ @function tertiary-palette() {
173
+ @return map.merge(map.get($_palettes, tertiary), $_rest);
175
174
  }
176
175
 
177
- @function success-palette(){
176
+ @function success-palette() {
178
177
  @return map.get($_palettes, success);
179
178
  }
180
- @function warning-palette(){
179
+ @function warning-palette() {
181
180
  @return map.get($_palettes, warning);
182
181
  }
183
182
 
184
183
  @mixin modify($palettes) {
185
- $_palettes: map.deep-merge($_palettes, $palettes)!global;
184
+ $_palettes: map.deep-merge($_palettes, $palettes) !global;
186
185
  }
package/scss/token/_token.scss CHANGED
@@ -188,12 +188,12 @@ $_spacing-base: t.rem(16px);
188
188
 
189
189
  //Status
190
190
  // Color for status success, could be used for text-color, surfaces, outlines
191
- success: light-dark(#{map.get(theme-color.success-palette(), 30)}, #{map.get(theme-color.success-palette(), 95)}),
191
+ success: light-dark(#{map.get(theme-color.success-palette(), 50)}, #{map.get(theme-color.success-palette(), 95)}),
192
192
  on-success: light-dark(#{map.get(theme-color.success-palette(), 100)}, #{map.get(theme-color.success-palette(), 30)}),
193
193
  // Surface color for status success containers
194
- success-container: light-dark(#{map.get(theme-color.success-palette(), 95)}, #{map.get(theme-color.success-palette(), 30)}),
194
+ success-container: light-dark(#{map.get(theme-color.success-palette(), 80)}, #{map.get(theme-color.success-palette(), 30)}),
195
195
  // Color of the text put on a success color container background
196
- on-success-container: light-dark(#{map.get(theme-color.success-palette(), 30)}, #{map.get(theme-color.success-palette(), 90)}),
196
+ on-success-container: light-dark(#{map.get(theme-color.success-palette(), 20)}, #{map.get(theme-color.success-palette(), 90)}),
197
197
 
198
198
  // Color for status danger, could be used for text-color, surfaces, outlines
199
199
  danger: var(--mat-sys-error), //(Could be used for text-color, outlines, surfaces)
@@ -204,10 +204,10 @@ $_spacing-base: t.rem(16px);
204
204
  on-danger-container: var(--mat-sys-on-error-container),
205
205
 
206
206
  // Color for status warning, could be used for text-color, surfaces, outlines
207
- warning: light-dark(#{map.get(theme-color.warning-palette(), 30)}, #{map.get(theme-color.warning-palette(), 95)}), //(Could be used for text-color, outlines, surfaces)
207
+ warning: light-dark(#{map.get(theme-color.warning-palette(), 50)}, #{map.get(theme-color.warning-palette(), 95)}), //(Could be used for text-color, outlines, surfaces)
208
208
  on-warning: light-dark(#{map.get(theme-color.warning-palette(), 100)}, #{map.get(theme-color.warning-palette(), 30)}),
209
209
  // Surface color for status warning containers
210
- warning-container: light-dark(#{map.get(theme-color.warning-palette(), 95)}, #{map.get(theme-color.warning-palette(), 30)}),
210
+ warning-container: light-dark(#{map.get(theme-color.warning-palette(), 90)}, #{map.get(theme-color.warning-palette(), 30)}),
211
211
  // Color of the text put on a warning color container background
212
212
  on-warning-container: light-dark(#{map.get(theme-color.warning-palette(), 30)}, #{map.get(theme-color.warning-palette(), 90)}),
213
213