@onemrvapublic/design-system-demos 22.2.1-develop.2 → 22.3.0-develop.2
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/browser/assets/json/palette.json +1 -1
- package/browser/assets/json/sticker.json +1 -1
- package/browser/main.js +150 -150
- package/browser/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-palette.component.html":"<div [color]=\"color()\">\n <!-- Primary Colors -->\n <h2>Primary Colors</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'primary';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n @if (token.darkPalette) {\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n }\n @if (token.lightPalette) {\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n }\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{ token.onDarkPalette }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n\n @if (color() === 'primary') {\n <!-- Surface Colors -->\n <h2>Surface Colors</h2>\n <p>\n The following colors should be used for backgrounds and large,\n low-emphasis areas of the screen.\n </p>\n <p>\n Containers filled with a surface color should apply the\n <span class=\"demo-surface-variable\">--mat-sys-on-surface</span> color to\n text and icons placed within.\n </p>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'surface';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n <!-- Surface Colors -->\n <h2>Surface Containers</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'surface-container';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n <a href=\"http://localhost:4201/demos/palette\">test</a>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixed Colors -->\n <h2>Fixed Colors</h2>\n <p>\n These colors are the same for both light and dark themes. They are unused\n by any Angular Material components.\n </p>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'fixed';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n <h2>System Colors</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'system';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + (token.onVariable || token.variable) + ')'\"\n >\n <div class=\"demo-name\" style=\"color: var(--mat-sys-primary-fixed)\">\n {{ token.name }}\n </div>\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n style=\"color: var(--mat-sys-primary-fixed)\"\n >\n {{ token.variable }}\n </div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n </div>\n </div>\n }\n </div>\n <h2>Outlines</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'outline';\n track token.name\n ) {\n <div\n class=\"demo-color-container\"\n [style.border-color]=\"'var(' + token.variable + ')'\"\n [style.border-style]=\"'solid'\"\n [style.border-width]=\"'2px'\"\n >\n <div class=\"demo-heading outline\">\n <div class=\"demo-name\" style=\"color: var(--mat-sys-on-background)\">\n {{ token.name }}\n </div>\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n style=\"color: var(--mat-sys-on-background)\"\n >\n {{ token.variable }}\n </div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-palette.component.scss":".palette {\n display: flex;\n width: 400px;\n flex-flow: row wrap;\n\n .family {\n flex: 1 0 300px;\n padding: 40px 16px 8px;\n }\n\n .shade {\n flex: 1 0 150px;\n padding: 8px 16px;\n }\n\n .dark {\n color: white;\n }\n}\n\n.palettes-container {\n display: flex;\n flex-wrap: wrap;\n max-width: 1000px;\n gap: 20px;\n\n .palette-container {\n flex: 0.5 0 400px;\n }\n}\n\n.demo-compact-color-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1rem;\n padding: 1rem;\n}\n\n.demo-group {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 24px;\n margin-bottom: 32px;\n}\n\n.demo-color-container {\n min-height: 200px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.demo-heading {\n padding: 1rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.demo-name {\n font-size: 1.2rem;\n font-weight: 500;\n}\n\n.demo-variables {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.demo-variable {\n font-family: monospace;\n font-size: 0.9rem;\n}\n\n.demo-description {\n display: none;\n}\n\nh2 {\n margin: 2.5rem 0 1rem;\n color: var(--mat-sys-on-surface);\n font-size: 1.5rem;\n font-weight: 700;\n text-align: left;\n}\n\np {\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.6;\n margin-bottom: 1rem;\n}\n\n.palette-sticker,\n.palette-sticker-dark {\n display: inline-block;\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n}\n\n.palette-sticker {\n background: white;\n color: black;\n}\n\n.palette-sticker-dark {\n background: black;\n color: white;\n}\n\n@media (max-width: 768px) {\n .demo-compact-color-container,\n .demo-group {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n .demo-heading {\n min-height: 48px;\n font-size: 1rem;\n }\n}\n\n.color-selector {\n margin-bottom: 2rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 4px;\n\n label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--mat-sys-on-surface);\n font-weight: 500;\n }\n\n select {\n width: 100%;\n max-width: 300px;\n padding: 0.5rem;\n border: 1px solid var(--mat-sys-outline);\n border-radius: 4px;\n background-color: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n font-size: 1rem;\n\n &:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n }\n }\n}\n","demo-palette.component.ts":"import { Component, Pipe, PipeTransform, input } from '@angular/core';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ninterface ColorToken {\n name: string;\n variable: string;\n onVariable?: string;\n darkPalette?: string;\n lightPalette?: string;\n onDarkPalette?: string;\n onLightPalette?: string;\n category?:\n | 'primary'\n | 'surface'\n | 'fixed'\n | 'system'\n | 'surface-container'\n | 'outline';\n}\n\n@Pipe({\n name: 'filter',\n standalone: true,\n})\nexport class FilterPipe implements PipeTransform {\n transform(items: any[], field: string, value: any): any[] {\n if (!items) return [];\n return items.filter(item => item[field] === value);\n }\n}\n\n@Component({\n selector: 'app-demo-palette',\n standalone: true,\n imports: [FilterPipe, OnemRvaColorDirective],\n styleUrls: ['./demo-palette.component.scss'],\n templateUrl: 'demo-palette.component.html',\n})\nexport class DemoPaletteComponent extends DemoComponentBase {\n colorCategories = [\n { value: 'primary', label: 'Primary' },\n { value: 'neutral', label: 'Neutral' },\n { value: 'info', label: 'Info' },\n { value: 'warn', label: 'Warning' },\n { value: 'success', label: 'Success' },\n ];\n\n color = input<OnemrvaMatColor>('primary');\n\n onColorChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n // TODO: overrite error fix\n // @ts-expect-error overwrite error\n this.color = select.value as OnemrvaMatColor;\n }\n\n colorTokens: ColorToken[] = [\n // Primary Colors\n {\n name: 'Primary',\n variable: '--mat-sys-primary',\n onVariable: '--mat-sys-on-primary',\n darkPalette: 'primary-80',\n lightPalette: 'primary-40',\n onDarkPalette: 'primary-20',\n onLightPalette: 'primary-100',\n category: 'primary',\n },\n {\n name: 'Primary Container',\n variable: '--mat-sys-primary-container',\n onVariable: '--mat-sys-on-primary-container',\n darkPalette: 'primary-30',\n lightPalette: 'primary-90',\n onDarkPalette: 'primary-90',\n onLightPalette: 'primary-30',\n category: 'primary',\n },\n {\n name: 'Secondary',\n variable: '--mat-sys-secondary',\n onVariable: '--mat-sys-on-secondary',\n darkPalette: 'secondary-80',\n lightPalette: 'secondary-40',\n onDarkPalette: 'secondary-20',\n onLightPalette: 'secondary-100',\n category: 'primary',\n },\n {\n name: 'Secondary Container',\n variable: '--mat-sys-secondary-container',\n onVariable: '--mat-sys-on-secondary-container',\n darkPalette: 'secondary-30',\n lightPalette: 'secondary-90',\n onDarkPalette: 'secondary-90',\n onLightPalette: 'secondary-30',\n category: 'primary',\n },\n {\n name: 'Tertiary',\n variable: '--mat-sys-tertiary',\n onVariable: '--mat-sys-on-tertiary',\n darkPalette: 'tertiary-80',\n lightPalette: 'tertiary-40',\n onDarkPalette: 'tertiary-20',\n onLightPalette: 'tertiary-100',\n category: 'primary',\n },\n {\n name: 'Tertiary Container',\n variable: '--mat-sys-tertiary-container',\n onVariable: '--mat-sys-on-tertiary-container',\n darkPalette: 'tertiary-30',\n lightPalette: 'tertiary-90',\n onDarkPalette: 'tertiary-90',\n onLightPalette: 'tertiary-30',\n category: 'primary',\n },\n {\n name: 'Error',\n variable: '--mat-sys-error',\n onVariable: '--mat-sys-on-error',\n darkPalette: 'error-80',\n lightPalette: 'error-40',\n onDarkPalette: 'error-20',\n onLightPalette: 'error-100',\n category: 'primary',\n },\n {\n name: 'Error Container',\n variable: '--mat-sys-error-container',\n onVariable: '--mat-sys-on-error-container',\n darkPalette: 'error-30',\n lightPalette: 'error-90',\n onDarkPalette: 'error-90',\n onLightPalette: 'error-30',\n category: 'primary',\n },\n {\n name: 'Gradient',\n variable: '--background-gradient',\n onVariable: '--on-background-gradient',\n category: 'primary',\n },\n {\n name: 'Outline',\n variable: '--mat-sys-outline',\n darkPalette: 'neutral-variant-60',\n lightPalette: 'neutral-variant-50',\n category: 'outline',\n },\n {\n name: 'Outline Variant',\n variable: '--mat-sys-outline-variant',\n darkPalette: 'neutral-variant-30',\n lightPalette: 'neutral-variant-80',\n category: 'outline',\n },\n\n // Surface Colors\n {\n name: 'Background',\n variable: '--mat-sys-background',\n onVariable: '--mat-sys-on-background',\n darkPalette: 'neutral-6',\n lightPalette: 'neutral-98',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface',\n variable: '--mat-sys-surface',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-6',\n lightPalette: 'neutral-98',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Variant',\n variable: '--mat-sys-surface-variant',\n onVariable: '--mat-sys-on-surface-variant',\n darkPalette: 'neutral-variant-30',\n lightPalette: 'neutral-variant-90',\n onLightPalette: 'neutral-variant-30',\n onDarkPalette: 'neutral-variant-90',\n category: 'surface',\n },\n {\n name: 'Surface Dim',\n variable: '--mat-sys-surface-dim',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-6',\n lightPalette: 'neutral-87',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Bright',\n variable: '--mat-sys-surface-bright',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-24',\n lightPalette: 'neutral-98',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Container Lowest',\n variable: '--mat-sys-surface-container-lowest',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-4',\n lightPalette: 'neutral-100',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container Low',\n variable: '--mat-sys-surface-container-low',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-10',\n lightPalette: 'neutral-96',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container',\n variable: '--mat-sys-surface-container',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-12',\n lightPalette: 'neutral-94',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container High',\n variable: '--mat-sys-surface-container-high',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-17',\n lightPalette: 'neutral-92',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container Highest',\n variable: '--mat-sys-surface-container-highest',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-22',\n lightPalette: 'neutral-90',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Inverse Surface',\n variable: '--mat-sys-inverse-surface',\n onVariable: '--mat-sys-inverse-on-surface',\n darkPalette: 'neutral-90',\n lightPalette: 'neutral-20',\n onDarkPalette: 'neutral-20',\n onLightPalette: 'neutral-95',\n category: 'surface',\n },\n {\n name: 'Inverse Primary',\n variable: '--mat-sys-inverse-primary',\n darkPalette: 'primary-40',\n lightPalette: 'primary-80',\n onVariable: '--mat-sys-on-surface-variant',\n onDarkPalette: 'primary-90',\n onLightPalette: 'primary-30',\n category: 'surface',\n },\n\n // Fixed Colors\n {\n name: 'Primary Fixed',\n variable: '--mat-sys-primary-fixed',\n onVariable: '--mat-sys-on-primary-fixed',\n darkPalette: 'primary-90',\n lightPalette: 'primary-90',\n onDarkPalette: 'primary-10',\n onLightPalette: 'primary-10',\n category: 'fixed',\n },\n {\n name: 'Primary Fixed Dim',\n variable: '--mat-sys-primary-fixed-dim',\n onVariable: '--mat-sys-on-primary-fixed-variant',\n darkPalette: 'primary-80',\n lightPalette: 'primary-80',\n onDarkPalette: 'primary-30',\n onLightPalette: 'primary-30',\n category: 'fixed',\n },\n {\n name: 'Secondary Fixed',\n variable: '--mat-sys-secondary-fixed',\n onVariable: '--mat-sys-on-secondary-fixed',\n darkPalette: 'secondary-90',\n lightPalette: 'secondary-90',\n onDarkPalette: 'secondary-30',\n onLightPalette: 'secondary-30',\n category: 'fixed',\n },\n {\n name: 'Secondary Fixed Dim',\n variable: '--mat-sys-secondary-fixed-dim',\n onVariable: '--mat-sys-on-secondary-fixed',\n darkPalette: 'secondary-80',\n lightPalette: 'secondary-80',\n onDarkPalette: 'secondary-30',\n onLightPalette: 'secondary-30',\n category: 'fixed',\n },\n\n // System Colors\n {\n name: 'Scrim',\n variable: '--mat-sys-scrim',\n darkPalette: 'neutral-0',\n lightPalette: 'neutral-0',\n category: 'system',\n },\n {\n name: 'Shadow',\n variable: '--mat-sys-shadow',\n darkPalette: 'neutral-0',\n lightPalette: 'neutral-0',\n category: 'system',\n },\n ];\n}\n"}
|
|
1
|
+
{"demo-palette.component.html":"<div [color]=\"color()\">\n <!-- Primary Colors -->\n <h2>Primary Colors</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'primary';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n @if (token.darkPalette) {\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n }\n @if (token.lightPalette) {\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n }\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{ token.onDarkPalette }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n\n @if (color() === 'primary') {\n <!-- Surface Colors -->\n <h2>Surface Colors</h2>\n <p>\n The following colors should be used for backgrounds and large,\n low-emphasis areas of the screen.\n </p>\n <p>\n Containers filled with a surface color should apply the\n <span class=\"demo-surface-variable\">--mat-sys-on-surface</span> color to\n text and icons placed within.\n </p>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'surface';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n <!-- Surface Colors -->\n <h2>Surface Containers</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'surface-container';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n <a href=\"http://localhost:4201/demos/palette\">test</a>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixed Colors -->\n <h2>Fixed Colors</h2>\n <p>\n These colors are the same for both light and dark themes. They are unused\n by any Angular Material components.\n </p>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'fixed';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n <div class=\"demo-name\">{{ token.name }}</div>\n <div class=\"demo-variables\">\n <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n @if (token.onVariable) {\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n [style.color]=\"'var(' + token.onVariable + ')'\"\n >\n {{ token.onVariable }}\n </div>\n </div>\n }\n @if (token.onDarkPalette) {\n <span class=\"palette-sticker-dark\">{{\n token.onDarkPalette\n }}</span>\n }\n @if (token.onLightPalette) {\n <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n }\n </div>\n </div>\n }\n </div>\n <h2>System Colors</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'system';\n track token.name\n ) {\n <div class=\"demo-color-container\">\n <div\n class=\"demo-heading\"\n [style.background-color]=\"'var(' + token.variable + ')'\"\n [style.color]=\"'var(' + (token.onVariable || token.variable) + ')'\"\n >\n <div class=\"demo-name\" style=\"color: var(--mat-sys-primary-fixed)\">\n {{ token.name }}\n </div>\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n style=\"color: var(--mat-sys-primary-fixed)\"\n >\n {{ token.variable }}\n </div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n </div>\n </div>\n }\n </div>\n <h2>Outlines</h2>\n <div class=\"demo-compact-color-container\">\n @for (\n token of colorTokens | filter: 'category' : 'outline';\n track token.name\n ) {\n <div\n class=\"demo-color-container\"\n [style.border-color]=\"'var(' + token.variable + ')'\"\n [style.border-style]=\"'solid'\"\n [style.border-width]=\"'2px'\"\n >\n <div class=\"demo-heading outline\">\n <div class=\"demo-name\" style=\"color: var(--mat-sys-on-background)\">\n {{ token.name }}\n </div>\n <div class=\"demo-variables\">\n <div\n class=\"demo-variable demo-code\"\n style=\"color: var(--mat-sys-on-background)\"\n >\n {{ token.variable }}\n </div>\n </div>\n <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-palette.component.scss":".palette {\n display: flex;\n width: 400px;\n flex-flow: row wrap;\n\n .family {\n flex: 1 0 300px;\n padding: 40px 16px 8px;\n }\n\n .shade {\n flex: 1 0 150px;\n padding: 8px 16px;\n }\n\n .dark {\n color: white;\n }\n}\n\n.palettes-container {\n display: flex;\n flex-wrap: wrap;\n max-width: 1000px;\n gap: 20px;\n\n .palette-container {\n flex: 0.5 0 400px;\n }\n}\n\n.demo-compact-color-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1rem;\n padding: 1rem;\n}\n\n.demo-group {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 24px;\n margin-bottom: 32px;\n}\n\n.demo-color-container {\n min-height: 200px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.demo-heading {\n padding: 1rem;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.demo-name {\n font-size: 1.2rem;\n font-weight: 500;\n}\n\n.demo-variables {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.demo-variable {\n font-family: monospace;\n font-size: 0.9rem;\n}\n\n.demo-description {\n display: none;\n}\n\nh2 {\n margin: 2.5rem 0 1rem;\n color: var(--mat-sys-on-surface);\n font-size: 1.5rem;\n font-weight: 700;\n text-align: left;\n}\n\np {\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.6;\n margin-bottom: 1rem;\n}\n\n.palette-sticker,\n.palette-sticker-dark {\n display: inline-block;\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n font-size: 0.8rem;\n font-weight: 500;\n text-align: center;\n}\n\n.palette-sticker {\n background: white;\n color: black;\n}\n\n.palette-sticker-dark {\n background: black;\n color: white;\n}\n\n@media (max-width: 768px) {\n .demo-compact-color-container,\n .demo-group {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n .demo-heading {\n min-height: 48px;\n font-size: 1rem;\n }\n}\n\n.color-selector {\n margin-bottom: 2rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 4px;\n\n label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--mat-sys-on-surface);\n font-weight: 500;\n }\n\n select {\n width: 100%;\n max-width: 300px;\n padding: 0.5rem;\n border: 1px solid var(--mat-sys-outline);\n border-radius: 4px;\n background-color: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n font-size: 1rem;\n\n &:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n }\n }\n}\n","demo-palette.component.ts":"import { Component, Pipe, PipeTransform, input } from '@angular/core';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ninterface ColorToken {\n name: string;\n variable: string;\n onVariable?: string;\n darkPalette?: string;\n lightPalette?: string;\n onDarkPalette?: string;\n onLightPalette?: string;\n category?:\n | 'primary'\n | 'surface'\n | 'fixed'\n | 'system'\n | 'surface-container'\n | 'outline';\n}\n\n@Pipe({\n name: 'filter',\n standalone: true,\n})\nexport class FilterPipe implements PipeTransform {\n transform(items: any[], field: string, value: any): any[] {\n if (!items) return [];\n return items.filter(item => item[field] === value);\n }\n}\n\n@Component({\n selector: 'app-demo-palette',\n standalone: true,\n imports: [FilterPipe, OnemRvaColorDirective],\n styleUrls: ['./demo-palette.component.scss'],\n templateUrl: 'demo-palette.component.html',\n})\nexport class DemoPaletteComponent extends DemoComponentBase {\n colorCategories = [\n { value: 'primary', label: 'Primary' },\n { value: 'neutral', label: 'Neutral' },\n { value: 'info', label: 'Info' },\n { value: 'warn', label: 'Warning' },\n { value: 'success', label: 'Success' },\n ];\n\n color = input<OnemrvaMatColor>('primary');\n\n onColorChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n // TODO: overrite error fix\n // @ts-expect-error overwrite error\n this.color = select.value as OnemrvaMatColor;\n }\n\n colorTokens: ColorToken[] = [\n // Primary Colors\n {\n name: 'Primary',\n variable: '--mat-sys-primary',\n onVariable: '--mat-sys-on-primary',\n darkPalette: 'primary-80',\n lightPalette: 'primary-40',\n onDarkPalette: 'primary-20',\n onLightPalette: 'primary-100',\n category: 'primary',\n },\n {\n name: 'Primary Container',\n variable: '--mat-sys-primary-container',\n onVariable: '--mat-sys-on-primary-container',\n darkPalette: 'primary-30',\n lightPalette: 'primary-90',\n onDarkPalette: 'primary-90',\n onLightPalette: 'primary-30',\n category: 'primary',\n },\n {\n name: 'Secondary',\n variable: '--mat-sys-secondary',\n onVariable: '--mat-sys-on-secondary',\n darkPalette: 'secondary-80',\n lightPalette: 'secondary-40',\n onDarkPalette: 'secondary-20',\n onLightPalette: 'secondary-100',\n category: 'primary',\n },\n {\n name: 'Secondary Container',\n variable: '--mat-sys-secondary-container',\n onVariable: '--mat-sys-on-secondary-container',\n darkPalette: 'secondary-30',\n lightPalette: 'secondary-90',\n onDarkPalette: 'secondary-90',\n onLightPalette: 'secondary-30',\n category: 'primary',\n },\n {\n name: 'Tertiary',\n variable: '--mat-sys-tertiary',\n onVariable: '--mat-sys-on-tertiary',\n darkPalette: 'tertiary-80',\n lightPalette: 'tertiary-40',\n onDarkPalette: 'tertiary-20',\n onLightPalette: 'tertiary-100',\n category: 'primary',\n },\n {\n name: 'Tertiary Container',\n variable: '--mat-sys-tertiary-container',\n onVariable: '--mat-sys-on-tertiary-container',\n darkPalette: 'tertiary-30',\n lightPalette: 'tertiary-90',\n onDarkPalette: 'tertiary-90',\n onLightPalette: 'tertiary-30',\n category: 'primary',\n },\n {\n name: 'Error',\n variable: '--mat-sys-error',\n onVariable: '--mat-sys-on-error',\n darkPalette: 'error-80',\n lightPalette: 'error-40',\n onDarkPalette: 'error-20',\n onLightPalette: 'error-100',\n category: 'primary',\n },\n {\n name: 'Error Container',\n variable: '--mat-sys-error-container',\n onVariable: '--mat-sys-on-error-container',\n darkPalette: 'error-30',\n lightPalette: 'error-90',\n onDarkPalette: 'error-90',\n onLightPalette: 'error-30',\n category: 'primary',\n },\n {\n name: 'Gradient',\n variable: '--background-gradient',\n onVariable: '--on-background-gradient',\n category: 'primary',\n },\n {\n name: 'Outline',\n variable: '--mat-sys-outline',\n darkPalette: 'neutral-variant-60',\n lightPalette: 'neutral-variant-50',\n category: 'outline',\n },\n {\n name: 'Outline Variant',\n variable: '--mat-sys-outline-variant',\n darkPalette: 'neutral-variant-30',\n lightPalette: 'neutral-variant-80',\n category: 'outline',\n },\n\n // Surface Colors\n {\n name: 'Surface',\n variable: '--mat-sys-surface',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-6',\n lightPalette: 'neutral-98',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Variant',\n variable: '--mat-sys-surface-variant',\n onVariable: '--mat-sys-on-surface-variant',\n darkPalette: 'neutral-variant-30',\n lightPalette: 'neutral-variant-90',\n onLightPalette: 'neutral-variant-30',\n onDarkPalette: 'neutral-variant-90',\n category: 'surface',\n },\n {\n name: 'Surface Dim',\n variable: '--mat-sys-surface-dim',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-6',\n lightPalette: 'neutral-87',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Bright',\n variable: '--mat-sys-surface-bright',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-24',\n lightPalette: 'neutral-98',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface',\n },\n {\n name: 'Surface Container Lowest',\n variable: '--mat-sys-surface-container-lowest',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-4',\n lightPalette: 'neutral-100',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container Low',\n variable: '--mat-sys-surface-container-low',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-10',\n lightPalette: 'neutral-96',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container',\n variable: '--mat-sys-surface-container',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-12',\n lightPalette: 'neutral-94',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container High',\n variable: '--mat-sys-surface-container-high',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-17',\n lightPalette: 'neutral-92',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Surface Container Highest',\n variable: '--mat-sys-surface-container-highest',\n onVariable: '--mat-sys-on-surface',\n darkPalette: 'neutral-22',\n lightPalette: 'neutral-90',\n onDarkPalette: 'neutral-90',\n onLightPalette: 'neutral-10',\n category: 'surface-container',\n },\n {\n name: 'Inverse Surface',\n variable: '--mat-sys-inverse-surface',\n onVariable: '--mat-sys-inverse-on-surface',\n darkPalette: 'neutral-90',\n lightPalette: 'neutral-20',\n onDarkPalette: 'neutral-20',\n onLightPalette: 'neutral-95',\n category: 'surface',\n },\n {\n name: 'Inverse Primary',\n variable: '--mat-sys-inverse-primary',\n darkPalette: 'primary-40',\n lightPalette: 'primary-80',\n onVariable: '--mat-sys-on-surface-variant',\n onDarkPalette: 'primary-90',\n onLightPalette: 'primary-30',\n category: 'surface',\n },\n\n // Fixed Colors\n {\n name: 'Primary Fixed',\n variable: '--mat-sys-primary-fixed',\n onVariable: '--mat-sys-on-primary-fixed',\n darkPalette: 'primary-90',\n lightPalette: 'primary-90',\n onDarkPalette: 'primary-10',\n onLightPalette: 'primary-10',\n category: 'fixed',\n },\n {\n name: 'Primary Fixed Dim',\n variable: '--mat-sys-primary-fixed-dim',\n onVariable: '--mat-sys-on-primary-fixed-variant',\n darkPalette: 'primary-80',\n lightPalette: 'primary-80',\n onDarkPalette: 'primary-30',\n onLightPalette: 'primary-30',\n category: 'fixed',\n },\n {\n name: 'Secondary Fixed',\n variable: '--mat-sys-secondary-fixed',\n onVariable: '--mat-sys-on-secondary-fixed',\n darkPalette: 'secondary-90',\n lightPalette: 'secondary-90',\n onDarkPalette: 'secondary-30',\n onLightPalette: 'secondary-30',\n category: 'fixed',\n },\n {\n name: 'Secondary Fixed Dim',\n variable: '--mat-sys-secondary-fixed-dim',\n onVariable: '--mat-sys-on-secondary-fixed',\n darkPalette: 'secondary-80',\n lightPalette: 'secondary-80',\n onDarkPalette: 'secondary-30',\n onLightPalette: 'secondary-30',\n category: 'fixed',\n },\n\n // System Colors\n {\n name: 'Scrim',\n variable: '--mat-sys-scrim',\n darkPalette: 'neutral-0',\n lightPalette: 'neutral-0',\n category: 'system',\n },\n {\n name: 'Shadow',\n variable: '--mat-sys-shadow',\n darkPalette: 'neutral-0',\n lightPalette: 'neutral-0',\n category: 'system',\n },\n ];\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-sticker.component.html":"<onemrva-mat-sticker [color]=\"color()\"
|
|
1
|
+
{"demo-sticker.component.html":"@if (htmlTooltip()) {\n <onemrva-mat-sticker [color]=\"color()\" [htmlTooltip]=\"tooltipContent\">\n Default\n </onemrva-mat-sticker>\n} @else {\n <onemrva-mat-sticker [color]=\"color()\" [tooltip]=\"tooltip()\">\n Default\n </onemrva-mat-sticker>\n}\n\n<ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n</ng-template>\n","demo-sticker.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatIconModule } from '@angular/material/icon';\n\n@Component({\n selector: 'app-demo-sticker',\n templateUrl: './demo-sticker.component.html',\n\n standalone: true,\n imports: [\n OnemrvaMatStickerModule,\n FormsModule,\n OnemRvaColorDirective,\n MatIconModule,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoStickerComponent extends DemoComponentBase {\n readonly color = input<OnemrvaMatColor>(OnemrvaMatColor.ACCENT);\n readonly tooltip = input('');\n readonly htmlTooltip = input(false);\n}\n"}
|