cr-connect-bpmn/src/_material.scss

93 lines
2.9 KiB
SCSS

@import 'config';
@import '../node_modules/@angular/material/theming';
// Define a custom typography config that overrides the font-family
$custom-typography: mat-typography-config(
$font-family: $body-font-family,
$display-4: mat-typography-level(3.75rem, 1.0925, 700, $body-font-family),
$display-3: mat-typography-level(2.4917rem, 1.1037, 700, $body-font-family),
$display-2: mat-typography-level(2.2148rem, 1.1287, 700, $body-font-family),
$display-1: mat-typography-level(1.9688rem, 1.1429, 700, $body-font-family),
$headline: mat-typography-level(1.7500rem, 1.1429, 700, $body-font-family), // h1
$title: mat-typography-level(1.5625rem, 1.1200, 500, $body-font-family), // h2
$subheading-2: mat-typography-level(1.3750rem, 1.0000, 700, $heading-font-family), // h3
$subheading-1: mat-typography-level(1.2500rem, 1.1000, 700, $body-font-family), // h4
$body-2: mat-typography-level(1.1250rem, 1.1111, 500, $body-font-family), // h5
$body-1: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family), // p
$caption: mat-typography-level(0.8750rem, 0.7143, 500, $body-font-family), // small
$button: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family),
$input: mat-typography-level(1.0000rem, 1.1250, 500, $body-font-family)
);
$mat-blue: (
50: #f1f5f7,
100: #b3c1d3,
200: $brand-primary-tint-3,
300: $brand-primary-tint-2,
400: $brand-primary-tint-1,
500: $brand-primary,
600: $brand-primary-shade-1,
700: $brand-primary-shade-2,
800: $brand-primary-shade-3,
900: $brand-primary-shade-4,
A100: #b3c1d3,
A200: $brand-primary-tint-3,
A400: $brand-primary-tint-2,
A700: $brand-primary-tint-1,
contrast: (
50: $body-color,
100: $body-color,
200: $body-color,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: $body-color,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
)
);
$mat-orange: (
50: #fceee0,
100: $brand-accent-tint-3,
200: $brand-accent-tint-2,
300: $brand-accent-tint-1,
400: $brand-accent,
500: $brand-accent-shade-1,
600: $brand-accent-shade-2,
700: $brand-accent-shade-3,
800: $brand-accent-shade-4,
900: $brand-accent-shade-5,
A100: #fceee0,
A200: $brand-accent-tint-3,
A400: $brand-accent-tint-2,
A700: $brand-accent-tint-1,
contrast: (
50: $body-color,
100: $body-color,
200: $body-color,
300: $body-color,
400: $body-color,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: $body-color,
A200: $body-color,
A400: $body-color,
A700: $body-color,
)
);
$cr-connect-primary: mat-palette($mat-blue);
$cr-connect-accent: mat-palette($mat-orange);
$cr-connect-warn: mat-palette($mat-red);
$cr-connect-theme: mat-light-theme($cr-connect-primary, $cr-connect-accent, $cr-connect-warn);