@onemrvapublic/design-system-demos 21.0.0-develop.8 → 21.0.0-develop.9
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/assets/json/typography.json +1 -1
- package/main.js +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-typography.component.html":"<div class=\"typography-container\">\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles | filter: 'category' : category.value;\n track style\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div\n class=\"typography-sample\"\n [style.font]=\"\n style.weight +\n ' ' +\n style.size +\n '/' +\n style.lineHeight +\n ' ' +\n style.font\n \"\n >\n {{ style.name }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette
|
|
1
|
+
{"demo-typography.component.html":"<div class=\"typography-container\">\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles | filter: 'category' : category.value;\n track style\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div\n class=\"typography-sample\"\n [style.font]=\"\n style.weight +\n ' ' +\n style.size +\n '/' +\n style.lineHeight +\n ' ' +\n style.font\n \"\n >\n {{ style.name }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette';\n\ninterface TypographyStyle {\n name: string;\n size: string;\n sizePx: number;\n lineHeight: string;\n lineHeightPx: number;\n weight: number;\n font: string;\n category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n selector: 'app-demo-typography',\n templateUrl: './demo-typography.component.html',\n styleUrls: ['./demo-typography.component.scss'],\n standalone: true,\n imports: [FilterPipe],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n typographyStyles: TypographyStyle[] = [\n // Display Styles\n {\n name: 'Display Large',\n size: '9.25rem',\n sizePx: 148,\n lineHeight: '11.25rem',\n lineHeightPx: 180,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Medium',\n size: '4.5rem',\n sizePx: 72,\n lineHeight: '6.25rem',\n lineHeightPx: 100,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Small',\n size: '1.75rem',\n sizePx: 28,\n lineHeight: '3.25rem',\n lineHeightPx: 52,\n weight: 600,\n font: 'Poppins',\n category: 'display',\n },\n // Headline Styles\n {\n name: 'Headline Large',\n size: '1.375rem',\n sizePx: 22,\n lineHeight: '2.75rem',\n lineHeightPx: 44,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Medium',\n size: '1.25rem',\n sizePx: 20,\n lineHeight: '2.5rem',\n lineHeightPx: 40,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Small',\n size: '1.125rem',\n sizePx: 18,\n lineHeight: '2.25rem',\n lineHeightPx: 36,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n // Title Styles\n {\n name: 'Title Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '2rem',\n lineHeightPx: 32,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.75rem',\n lineHeightPx: 28,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Small',\n size: '0.938rem',\n sizePx: 15,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n // Body Styles\n {\n name: 'Body Large',\n size: '1rem',\n sizePx: 18,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 600,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Small',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n // Label Styles\n {\n name: 'Label Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 500,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Medium',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Small',\n size: '0.75rem',\n sizePx: 12,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'label',\n },\n ];\n\n typographyCategories = [\n { value: 'body', label: 'Body Styles' },\n { value: 'display', label: 'Display Styles' },\n { value: 'headline', label: 'Headline Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'title', label: 'Title Styles' },\n ];\n}\n"}
|