Angular Material Theme for Smart InsurTech AG

This repository contains themes for Angular Material components with the styling and colors of Smart InsurTech.

Requirements

• Angular >= 20
• Angular material >= 20

Installation

• Install Angular Material and it's peer dependencies as described on material.angular.io
• Skip including a prebuild theme
• Install theme via npm npm install @smitag/angular-shared-ui
• Add following code to your global style.scss

  @use '@smitag/angular-shared-ui/src/lib/styles/components';
  @use '@smitag/angular-shared-ui/src/lib/styles/tokens';
  @use '@smitag/angular-shared-ui/src/lib/styles/layout'; //Skip if you use Tailwind
  @use '@smitag/angular-shared-ui/src/lib/styles/themes/default';

Applying the theme color

The system-level-colors generates a set of CSS classes based on color role that can be used across an app.

• Primary, Secondary, Tertiary – Accent color roles used to emphasize or de-emphasize foreground elements.
• Container – Roles used as a fill color for foreground elements like buttons.
• On – Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.
• Variant – Roles ending with this term offer a lower emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.
• Surface – A role used for backgrounds and large, low-emphasis areas of the screen.

| Name | background-color | color | | ------------------------- | -------------------------- | ----------------------- | | Primary | .primary | .on-primary | | Primary fixed | - | .on-primary-fixed | | Primary container | .primary-container | .on-primary-container | | Secondary | .secondary | .on-secondary | | Secondary fixed | - | .on-secondary-fixed | | Secondary container | .secondary-container | .on-secondary-container | | Tertiary | .tertiary | .on-tertiary | | Tertiary fixed | - | .on-tertiary-fixed | | Tertiary container | .tertiary-container | .on-tertiary-container | | Error | .error | .on-error | | Error container | .error-container | .on-error-container | | Error fixed | - | .on-error-fixed | | Outline | - | .outline | | Outline variant | - | .outline-variant | | Surface | .surface | - | | Surface container lowest | .surface-container-lowest | - | | Surface container low | .surface-container-low | - | | Surface container | .surface-container | - | | Surface container high | .surface-container-high | - | | Surface container highest | .surface-container-highest | - |

Example:

<mat-card class="primary">
  <!-- background-color -->
  <mat-card-content class="on-primary">primary</mat-card-content>
  <!-- color -->
</mat-card>

Applying typography

The typography-hierarchy generates a set of CSS classes based on type scale levels. A type scale is a selection of font styles that can be used across an app.

There are large, medium, and small variations for Display, Headline, Title, Body and Label. You can read more about it here.

The table below lists the CSS classes emitted and the native elements styled:

| CSS class | Typescale level | Native Element | | -------------------- | --------------- | -------------- | | .mat-display-large | display-large | <h1> | | .mat-display-medium | display-medium | <h2> | | .mat-display-small | display_small | <h3> | | .mat-headline-large | headline-large | <h4> | | .mat-headline-medium | headline-medium | <h5> | | .mat-headline-small | headline-small | <h6> | | .mat-title-large | title-large | none | | .mat-title-medium | title-medium | none | | .mat-title-small | title-small | none | | .mat-body-large | body-large | none | | .mat-body-medium | body-medium | none | | .mat-body-small | body-small | none | | .mat-label-large | label-large | none | | .mat-label-medium | label-medium | none | | .mat-label-small | label-small | none |

Applying elevation

Material Design provides six levels of elevation that can be used to provide a sense of depth and organization to an application's UI. Learn more at Material Design's Elevation guide.

These levels are defined as CSS box-shadow values that can be styled to an element.

| CSS class | Native Element | | --------- | ------------------------------- | | .level0 | none | | .level1 | .second-toolbar, .mat-mdc-card | | .level2 | none | | .level3 | .mat-mdc-mini-fab, .mat-mdc-fab | | .level4 | none | | .level5 | none |