1/*
2 * Copyright (C) 2022 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16@use 'sass:map';
17@use '@angular/material' as mat;
18
19@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
20@import '//fonts.googleapis.com/css2?family=Google+Sans';
21@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
22
23$typography: mat.define-typography-config(
24    $font-family: 'Roboto, sans-serif'
25);
26
27$light-primary: mat.define-palette(mat.$blue-palette, 700);
28$dark-primary: mat.define-palette(mat.$blue-palette, 400);
29$light-accent: mat.define-palette(mat.$grey-palette, 700);
30$dark-accent: mat.define-palette(mat.$grey-palette, 500);
31$warn: mat.define-palette(mat.$red-palette);
32
33$light-theme: mat.define-light-theme((
34 color: (
35   primary: $light-primary,
36   accent: $light-accent,
37   warn: $warn,
38 ),
39 density: 0,
40 typography: null, // Set typography on mat.core() only, to avoid duplicates.
41));
42
43$dark-theme: mat.define-dark-theme((
44  color: (
45    primary: $dark-primary,
46    accent: $dark-accent,
47    warn: $warn,
48  )
49));
50
51@mixin background-color($theme) {
52  $config: mat.get-color-config($theme);
53  $background: map.get($config, background);
54
55  & {
56    --background-color: #{mat.get-color-from-palette($background, background)};
57  }
58}
59
60@mixin border-color($theme) {
61  $config: mat.get-color-config($theme);
62  $foreground: map.get($config, foreground);
63
64  & {
65    --border-color: #{mat.get-color-from-palette($foreground, divider)};
66  }
67}
68
69@mixin drawer-color($theme) {
70  $config: mat.get-color-config($theme);
71  $background: map.get($config, background);
72  & {
73    --drawer-color: #{mat.get-color-from-palette($background, dialog)};
74  }
75}
76
77@include mat.core($typography);
78@include mat.all-component-themes($light-theme);
79
80body:not(.dark-mode) {
81  @include background-color($light-theme);
82  --blue-text-color: #{map.get(mat.$indigo-palette, A200)};
83  @include border-color($light-theme);
84  --card-title-background-color: #f1f1f1;
85  --contrast-text-color: white;
86  --current-element-color: #7b9ccc;
87  --disabled-color: rgba(0, 0, 0, 0.12);
88  --drawer-block-primary: #EEEFF0;
89  --drawer-block-secondary: #DDDDDD;
90  --drawer-color: var(--background-color);
91  --green-text-color: #1f912c;
92  --hover-element-color: #E8F0FE;
93  --purple-text-color: #a357e9;
94  --red-text-color: #d3251b;
95  --selected-element-color: #d2e3fc;
96  --side-bar-color: #6E6E6E;
97  --slider-background-color: #E8F0FE;
98  --slider-border-color: #8AB4F8;
99  --trace-view-background-color: #E4E4E4;
100  --warning-background-color: #{mat.get-color-from-palette(mat.$amber-palette, 50)};
101  --icon-accent-color: #d9d9d9;
102}
103
104body.dark-mode {
105  @include mat.all-component-colors($dark-theme);
106  @include background-color($dark-theme);
107  --blue-text-color: #b8e3fd;
108  @include border-color($dark-theme);
109  --card-title-background-color: #343434;
110  --contrast-text-color: rgba(0, 0, 0, 0.87);
111  --current-element-color: #365179;
112  --disabled-color: rgba(255, 255, 255, 0.12);
113  --drawer-block-primary: #696563;
114  --drawer-block-secondary: #5e5b5a;
115  @include drawer-color($dark-theme);
116  --green-text-color: #89e593;
117  --hover-element-color: #4e5767;
118  --purple-text-color: #dbb4ff;
119  --red-text-color: #f19993;
120  --selected-element-color: #5f718a;
121  --side-bar-color: #dedcdc;
122  --slider-background-color: #8AB4F8;
123  --slider-border-color: #E8F0FE;
124  --trace-view-background-color: #383838;
125  --warning-background-color: #{mat.get-color-from-palette(mat.$brown-palette, 700)};
126  --icon-accent-color: #969696;
127}
128