File indexing completed on 2025-04-18 08:05:34
0001 <app-shell>
0002
0003 <div header>
0004
0005 <button mat-button (click)="toggleLeftPane()">Toggle Left Pane</button>
0006 <button mat-button (click)="toggleRightPane()">Toggle Right Pane</button>
0007 </div>
0008
0009
0010 <div leftPane>
0011
0012 <mat-card>
0013 <mat-card-title>Left Pane</mat-card-title>
0014 <mat-card-content>
0015 <p>Extra left pane content goes here.</p>
0016 </mat-card-content>
0017 </mat-card>
0018 </div>
0019
0020
0021 <div centralPane style="padding: 20px">
0022 <p>
0023 Angular Material components depend on system variables defined as CSS variables through the
0024 <span class="demo-surface-variable">material.theme</span>
0025 Sass mixin. This page provides guidance and documentation for using these variables to
0026 customize components.
0027 </p>
0028
0029 <h2 id="colors">Colors</h2>
0030
0031 <p>
0032 Material Design uses color to create accessible, personal color schemes
0033 that communicate your product's hierarchy, state, and brand. See Material
0034 Design's <a href="https://m3.material.io/styles/color/system/overview">Color System</a>
0035 page to learn more about its use and purpose.
0036 </p>
0037 <p>
0038 The following colors are the most often used in Angular Material components. Use these
0039 colors and follow their uses to add theme colors to your application's custom components.
0040 </p>
0041
0042 <div class="demo-group">
0043 <div class="demo-color-container">
0044 <div class="demo-heading"
0045 style="background-color: var(--mat-sys-primary);
0046 color: var(--mat-sys-on-primary)">
0047 <div class="demo-name">Primary</div>
0048 <div class="demo-variable demo-code">--mat-sys-primary</div>
0049 </div>
0050 <div class="demo-description">
0051 <p>
0052 The most common color used by Angular Material components to
0053 participate in the application theme.
0054 </p>
0055 <p>
0056 Examples include the background color
0057 of filled buttons, the icon color of selected radio buttons, and the
0058 outline color of form fields.
0059 </p>
0060 <p>
0061 Use the color <span class="demo-surface-variable">--mat-sys-on-primary</span> for
0062 icons, text, and other visual elements placed on a primary background. This
0063 color is calculated to be optimal for accessibility and legibility.
0064 </p>
0065 </div>
0066 </div>
0067
0068 <div class="demo-color-container">
0069 <div class="demo-heading"
0070 style="background-color: var(--mat-sys-surface);
0071 color: var(--mat-sys-on-surface)">
0072 <div class="demo-name">Surface</div>
0073 <div class="demo-variable code">--mat-sys-surface</div>
0074 </div>
0075 <div class="demo-description">
0076 <p>
0077 A low-emphasis background color that provides a clear contrast for
0078 both light and dark themes and their varied theme colors.
0079 </p>
0080 <p>
0081 Examples include the background color of the application and most
0082 components such as the dialog, card, table, and more.
0083 </p>
0084 <p>
0085 Use the color <span class="demo-surface-variable">--mat-sys-on-surface</span> for
0086 icons, text, and other visual elements placed on a surface background. This
0087 color is calculated to be optimal for accessibility and legibility.
0088 </p>
0089 </div>
0090 </div>
0091
0092 <div class="demo-color-container">
0093 <div class="demo-heading"
0094 style="background-color: var(--mat-sys-error);
0095 color: var(--mat-sys-on-error)">
0096 <div class="demo-name">Error</div>
0097 <div class="demo-variable demo-code">--mat-sys-error</div>
0098 </div>
0099 <div class="demo-description">
0100 <p>
0101 High-contrast color meant to alert the user to attract immediate attention.
0102 </p>
0103 <p>
0104 Examples include the background color of the badge and the text color of invalid
0105 form fields inputs.
0106 </p>
0107 <p>
0108 Use the color <span class="demo-surface-variable">--mat-sys-on-error</span> for
0109 icons, text, and other visual elements placed on an error background. This
0110 color is calculated to be optimal for accessibility and legibility.
0111 </p>
0112 </div>
0113 </div>
0114
0115 <div class="demo-color-container">
0116 <div class="demo-heading"
0117 style="background-color: var(--mat-sys-outline);
0118 color: var(--mat-sys-surface)">
0119 <div class="demo-name">Outline</div>
0120 <div class="demo-variable demo-code">--mat-sys-outline </div>
0121 </div>
0122 <div class="demo-description">
0123 <p>
0124 Used for borders and dividers to help provide visual separation between
0125 and around elements.
0126 </p>
0127 <p>
0128 Examples include the color of the divider and border color of an outlined
0129 form field.
0130 </p>
0131 <p>
0132 Use the color <span class="demo-surface-variable">--mat-sys-outline-variant</span> for a less
0133 prominent outline.
0134 </p>
0135 </div>
0136 </div>
0137 </div>
0138
0139 <div>
0140 <h2>Other available colors</h2>
0141
0142 <p>
0143 These colors are less commonly used in Angular Material components but
0144 are available for adding color variety and creating additional emphasis
0145 to components.
0146 </p>
0147 <p>
0148 Colors may be paired with a <span class="demo-surface-variable">--mat-sys-on-</span> variable
0149 that should be used for text and icons placed within a filled container.
0150 </p>
0151
0152 <h2>Alternative Theme Colors</h2>
0153
0154 <theme-demo-colors [colors]="alternativeThemeColors"></theme-demo-colors>
0155
0156 <h2>Surface Colors</h2>
0157
0158 <p>
0159 The following colors should be used for backgrounds and large,
0160 low-emphasis areas of the screen.
0161 </p>
0162
0163 <p>
0164 Containers filled with a surface color should apply the
0165 <span class="demo-surface-variable">--mat-sys-on-surface</span> color to text
0166 and icons placed within.
0167 </p>
0168
0169 <theme-demo-colors [colors]="surfaceColors"></theme-demo-colors>
0170
0171 <h2>Fixed Colors</h2>
0172
0173 <p>
0174 These colors are the same for both light and dark themes. They are unused
0175 by any Angular Material components.
0176 </p>
0177
0178 <theme-demo-colors [colors]="fixedColors"></theme-demo-colors>
0179
0180 </div>
0181
0182 <h2 id="typography">Typography</h2>
0183
0184 <p>
0185 There are five categories of font types defined by Material Design: body, display, headline,
0186 label, and title. Each category has three sizes: small, medium, and large.
0187 </p>
0188 <p>
0189 Learn more about how these categories and their sizes should be used in your application by
0190 visiting Material Design's
0191 <a href="https://m3.material.io/styles/typography/overview">Typography</a> documentation.
0192 </p>
0193
0194
0195 @for (category of ['body', 'display', 'headline', 'label', 'title']; track $index) {
0196 <div class="demo-typography-group">
0197 <div class="demo-typography-title">{{category}}</div>
0198 @for (size of ['small', 'medium', 'large']; track $index) {
0199 <div class="demo-typography-example">
0200 <div class="demo-typography-variable">
0201 <div class="demo-surface-variable">--mat-sys-{{category}}-{{size}}</div>
0202 </div>
0203 <div class="demo-typography-text" [style.font]="'var(--mat-sys-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
0204 </div>
0205 }
0206 </div>
0207 }
0208
0209 <p>
0210 Each system variable can be applied to the "font" CSS style. Additionally, the parts of the variable definition
0211 can be accessed individually by appending the keywords "font", "line-height", "size", "tracking", and "weight".
0212 </p>
0213 <p>
0214 For example, the values for medium body text may be defined as follows:
0215 </p>
0216 <pre class="demo-code-block">
0217 --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
0218 --mat-sys-body-medium-font: Roboto, sans-serif;
0219 --mat-sys-body-medium-line-height: 1.25rem;
0220 --mat-sys-body-medium-size: 0.875rem;
0221 --mat-sys-body-medium-tracking: 0.016rem;
0222 --mat-sys-body-medium-weight: 400;
0223 </pre>
0224
0225 <h2 id="elevation">Elevation</h2>
0226
0227 <p>
0228 Material Design provides six levels of elevation that can be used to provide
0229 a sense of depth and organization to an application's UI. Learn more at Material Design's
0230 <a href="https://m3.material.io/styles/elevation/overview">Elevation</a> guide.
0231 </p>
0232
0233 <p>
0234 These levels are defined as CSS box-shadow values that can be styled to an element.
0235 </p>
0236
0237 @for (level of [0, 1, 2, 3, 4, 5]; track $index) {
0238 <div class="demo-elevation code" [style.box-shadow]="'var(--mat-sys-level' + level + ')'">
0239 box-shadow: var(--mat-sys-level{{level}})
0240 </div>
0241 }
0242
0243 <h2 id="overrides">Overrides</h2>
0244
0245 <p>
0246 The <span class="demo-surface-variable">mat.theme-overrides</span> mixin
0247 can be included to emit different definitions for the system variables and
0248 override the definitions emitted from <span class="demo-surface-variable">mat.theme</span>.
0249 </p>
0250
0251 <div class="demo-overrides">
0252 This example container has several system variables overridden by including the
0253 following Sass code:
0254
0255 <pre>
0256 @include mat.theme-overrides((
0257 primary: #ebdcff,
0258 on-primary: #230f46,
0259 body-medium: 500 1.15rem/1.3rem Arial,
0260 corner-large: 32px,
0261 level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
0262 ));</pre>
0263 </div>
0264
0265
0266
0267 <section class="form-section" style="margin: 24px;">
0268 <mat-card>
0269 <mat-card-title>Form Demo</mat-card-title>
0270 <mat-card-content>
0271 <form>
0272 <mat-form-field appearance="fill" style="width: 100%;">
0273 <mat-label>First Name</mat-label>
0274 <input matInput type="text" placeholder="Enter your first name" />
0275 </mat-form-field>
0276 <mat-form-field appearance="fill" style="width: 100%;">
0277 <mat-label>Email</mat-label>
0278 <input matInput type="email" placeholder="Enter your email" />
0279 </mat-form-field>
0280 <button mat-raised-button color="primary" type="submit">
0281 Submit
0282 </button>
0283 </form>
0284 </mat-card-content>
0285 </mat-card>
0286 </section>
0287 </div>
0288
0289
0290 <div rightPane>
0291
0292 <mat-card>
0293 <mat-card-title>Right Pane</mat-card-title>
0294 <mat-card-content>
0295 <p>Right pane extra content.</p>
0296 </mat-card-content>
0297 </mat-card>
0298 </div>
0299
0300
0301 <div footer>
0302 <mat-card>
0303 <mat-card-content>
0304 <p style="margin: 0; padding: 8px; text-align: center;">
0305 Application Footer
0306 </p>
0307 </mat-card-content>
0308 </mat-card>
0309 </div>
0310 </app-shell>
