Skip to content

Commit

Permalink
feat: add custom Material 3 theme for application
Browse files Browse the repository at this point in the history 
feat: add theme files for footerbar, swimlane and swimlane-settings-dialog
feat: check, whether topic color is too light for dark mode
feat: add additional colors file
fix: adjust theme files accordingly
chore: replace several mat-icons by icons of edu-sharing-ui + replace several selectors
chore: reorder CSS attributes + format code
chore: delete unused theme files
chore: add TODOs for necessary typography adjustments
  • Loading branch information
@tkubica-edu
tkubica-edu committed Dec 21, 2024
1 parent 7c279e6 commit 617ad15
Show file tree
Hide file tree
Showing 76 changed files with 1,551 additions and 998 deletions.
16 changes: 16 additions & 0 deletions src/colors.scss → src/_additional-colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ $white: #fff;
$gray-light: #f4f4f4;
$gray-medium: #cacaca;
$gray-dark: #545454;
$gray-light-alt: #e0e0e0;

$primary-dark: #032850;
$primary-default: #003b7c;
Expand All @@ -28,3 +29,18 @@ $accent-alert: #ec4a70;

$red: #e73445;
$lila: #7f6fee;
$green-dark: #43a047;
$green-light: #e8f5e9;

$chip-group-oer: #d6a6d6;
$chip-group-type: #a6c0d6;
$chip-group-discipline: #a6d6ae;
$chip-group-educationalContext: #d6a6a6;
$chip-group-intendedEndUserRole: #d3d6a6;
$chip-group-learningResourceType: #d6c1a6;
$chip-group-source: #d0a6d6;

$icon-green: #11612d;
$icon-orange: #fab835;
$icon-red: #e73446;
$icon-gray: #383838;
239 changes: 239 additions & 0 deletions src/_custom-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
// This file was generated by running 'ng generate @angular/material:theme-color'.
// Proceed with caution if making changes to this file.
// Note: Color palettes are generated from primary: #003B7C, tertiary: #003B7C, neutral: #CACACA

@use 'sass:color';
@use 'sass:map';
@use '@angular/material' as mat;

$primary: #003b7c;
$primary-dark: #032850; // alternative for: color.scale($primary, $lightness: -(100% / 40) * 15),

// Adjustments:
// * entire primary + primary: 25, 40
// * neutral: 35 (#515353), 80 (#c6c6c6), 95 (#eef0fd), 98 (#f9f9ff), 99 (#fdfbff)
$_palettes: (
primary: (
0: #000000,
10: color.scale($primary, $lightness: - (100% / 40) * 30),
20: color.scale($primary, $lightness: - (100% / 40) * 20),
25: $primary-dark,
30: color.scale($primary, $lightness: - (100% / 40) * 10),
35: color.scale($primary, $lightness: - (100% / 40) * 5),
40: $primary,
50: color.scale($primary, $lightness: (100% / 60) * 10),
60: color.scale($primary, $lightness: (100% / 60) * 20),
70: color.scale($primary, $lightness: (100% / 60) * 30),
80: color.scale($primary, $lightness: (100% / 60) * 40),
90: color.scale($primary, $lightness: (100% / 60) * 50),
95: color.scale($primary, $lightness: (100% / 60) * 55),
98: color.scale($primary, $lightness: (100% / 60) * 58),
99: color.scale($primary, $lightness: (100% / 60) * 59),
100: #ffffff,
),
secondary: (
0: #000000,
10: #0c1b34,
20: #22304a,
25: #2e3c55,
30: #394761,
35: #45536e,
40: #515f7a,
50: #697794,
60: #8391af,
70: #9dabca,
80: #b9c7e7,
90: #d7e3ff,
95: #ecf0ff,
98: #f9f9ff,
99: #fdfbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #001b3f,
20: #002f65,
25: #003a7a,
30: #154687,
35: #255293,
40: #345ea0,
50: #4f77bb,
60: #6991d7,
70: #84acf3,
80: #abc7ff,
90: #d7e3ff,
95: #ecf0ff,
98: #f9f9ff,
99: #fdfbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #1a1c1c,
20: #2f3131,
25: #3a3c3c,
30: #464747,
35: #545454,
40: #5d5e5f,
50: #767777,
60: #909191,
70: #ababab,
80: #cacaca,
90: #e3e2e2,
95: #f1f0f0,
98: #faf9f9,
99: #f4f4f4,
100: #ffffff,
4: #0d0e0f,
6: #121414,
12: #1e2020,
17: #292a2a,
22: #333535,
24: #38393a,
87: #dadada,
92: #e8e8e8,
94: #eeeeee,
96: #f4f3f3,
),
neutral-variant: (
0: #000000,
10: #181c24,
20: #2c3039,
25: #373b45,
30: #434750,
35: #4e525c,
40: #5a5e68,
50: #737781,
60: #8d909b,
70: #a8abb6,
80: #c3c6d2,
90: #dfe2ee,
95: #ececec,
98: #f9f9ff,
99: #fefefe,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);

$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

@function _high-contrast-value($light, $dark, $theme-type) {
@if ($theme-type == light) {
@return $light;
}
@if ($theme-type == dark) {
@return $dark;
}
@if ($theme-type == color-scheme) {
@return light-dark(#{$light}, #{$dark});
}

@error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
}

@mixin high-contrast-overrides($theme-type) {
@include mat.theme-overrides(
(
primary: _high-contrast-value(#002654, #ebf0ff, $theme-type),
on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
primary-container: _high-contrast-value(#003b7c, #a4c3ff, $theme-type),
on-primary-container: _high-contrast-value(#ffffff, #000b21, $theme-type),
inverse-primary: _high-contrast-value(#abc7ff, #174788, $theme-type),
primary-fixed: _high-contrast-value(#194889, #d7e3ff, $theme-type),
primary-fixed-dim: _high-contrast-value(#00316a, #abc7ff, $theme-type),
on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-primary-fixed-variant: _high-contrast-value(#ffffff, #00102c, $theme-type),
secondary: _high-contrast-value(#1e2c45, #ebf0ff, $theme-type),
on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
secondary-container: _high-contrast-value(#3c4964, #b5c3e3, $theme-type),
on-secondary-container: _high-contrast-value(#ffffff, #000b21, $theme-type),
secondary-fixed: _high-contrast-value(#3c4964, #d7e3ff, $theme-type),
secondary-fixed-dim: _high-contrast-value(#25334c, #b9c7e7, $theme-type),
on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-secondary-fixed-variant: _high-contrast-value(#ffffff, #021129, $theme-type),
tertiary: _high-contrast-value(#002654, #ebf0ff, $theme-type),
on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
tertiary-container: _high-contrast-value(#003b7c, #a4c3ff, $theme-type),
on-tertiary-container: _high-contrast-value(#ffffff, #000b21, $theme-type),
tertiary-fixed: _high-contrast-value(#194889, #d7e3ff, $theme-type),
tertiary-fixed-dim: _high-contrast-value(#00316a, #abc7ff, $theme-type),
on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #00102c, $theme-type),
background: _high-contrast-value(#faf9f9, #121414, $theme-type),
on-background: _high-contrast-value(#1a1c1c, #e3e2e2, $theme-type),
surface: _high-contrast-value(#faf9f9, #121414, $theme-type),
surface-dim: _high-contrast-value(#b8b9b9, #121414, $theme-type),
surface-bright: _high-contrast-value(#faf9f9, #4f5050, $theme-type),
surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
surface-container: _high-contrast-value(#e3e2e2, #2f3131, $theme-type),
surface-container-high: _high-contrast-value(#d4d4d4, #3a3c3c, $theme-type),
surface-container-highest: _high-contrast-value(#c6c6c6, #464747, $theme-type),
on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
shadow: _high-contrast-value(#000000, #000000, $theme-type),
scrim: _high-contrast-value(#000000, #000000, $theme-type),
surface-tint: _high-contrast-value(#345ea0, #abc7ff, $theme-type),
inverse-surface: _high-contrast-value(#2f3131, #e3e2e2, $theme-type),
inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
outline: _high-contrast-value(#282c35, #edeffc, $theme-type),
outline-variant: _high-contrast-value(#454953, #bfc2ce, $theme-type),
error: _high-contrast-value(#600004, #ffece9, $theme-type),
on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type),
on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type),
surface-variant: _high-contrast-value(#dfe2ee, #434750, $theme-type),
on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
)
);
}

$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: $primary-palette,
tertiary: $tertiary-palette,
),
density: (
scale: -1,
),
)
);

$dark-theme: mat.define-theme(
(
color: (
theme-type: dark,
primary: $primary-palette,
tertiary: $tertiary-palette,
),
density: (
scale: -1,
),
)
);
112 changes: 98 additions & 14 deletions src/angular-material-overrides.theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,111 @@
@use '@angular/material' as mat;
@import 'additional-colors';

// global overrides
@mixin angular-material-theme-overrides($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
// overwrite variables
// badge background-color
--mat-badge-background-color: #{$pink-default};

.mat-mdc-tooltip {
background: mat.m2-get-color-from-palette($background, tooltip);
border-radius: 3px;
// overwrite border radius for template page
app-template {
--mdc-fab-small-container-shape: 4px;
}

.slick-prev::before,
.slick-next::before {
color: mat.m2-get-color-from-palette($foreground, text);
// overwrite chips default color, background-color + radius for search-field component + suggestion-card dropdown
app-search-field,
.suggestion-card {
// neutral-variant, 30 is equal to on-surface-variant that is used as the chip text color
// the color should not change in dark mode
--mdc-chip-label-text-color: #{mat.get-theme-color($theme, neutral-variant, 30)};
--mdc-chip-with-trailing-icon-trailing-icon-color: #{mat.get-theme-color(
$theme,
neutral-variant,
30
)};
--mdc-chip-elevated-container-color: #{$gray-light-alt};
--mdc-chip-container-shape-radius: 16px;

// TODO: Replace static colors
.mat-mdc-chip.chip-group-oer {
background-color: #{$chip-group-oer};
}
.mat-mdc-chip.chip-group-type {
background-color: #{$chip-group-type};
}
.mat-mdc-chip.chip-group-discipline {
background-color: #{$chip-group-discipline};
}
.mat-mdc-chip.chip-group-educationalContext {
background-color: #{$chip-group-educationalContext};
}
.mat-mdc-chip.chip-group-intendedEndUserRole {
background-color: #{$chip-group-intendedEndUserRole};
}
.mat-mdc-chip.chip-group-learningResourceType {
background-color: #{$chip-group-learningResourceType};
}
.mat-mdc-chip.chip-group-source {
background-color: #{$chip-group-source};
}
}

.app-backdrop {
background: mat.m2-get-color-from-palette($background, background, 0.9);
// overwrite suggestion dropdown background-color
.suggestion-card {
@if mat.get-theme-type($theme) == light {
background-color: mat.get-theme-color($theme, surface);
} @else {
background-color: mat.get-theme-color($theme, surface-container);
}
}

// the padding of the mat-mdc-dialog-actions is not set properly
.mat-mdc-dialog-actions {
--mat-dialog-actions-padding: var(--mat-dialog-content-padding);
//--mdc-switch-unselected-icon-color: #EC4A70;

// use roles to retrieve colors, i.e., primary or on-primary
// reference for roles: https://material-foundation.github.io/material-theme-builder/

// set color depending on the theme: https://v18.material.angular.io/guide/theming#theme-your-own-components-using-a-material-3-theme
//.mat-mdc-button-base {
// //@if mat.get-theme-type($theme) == dark {
// // color: mat.get-theme-color($theme, secondary, 0) !important;
// // background: mat.get-theme-color($theme, secondary, 80) !important;
// //} @else {
// // color: mat.get-theme-color($theme, secondary, 100) !important;
// // background: mat.get-theme-color($theme, secondary, 40) !important;
// //}
//
// // Try out system variables
// //color: var(--mat-sys-on-primary-container) !important;
// //background: var(--mat-sys-on-primary-container) !important;
//
//
// color: mat.get-theme-color($theme, on-secondary) !important;
// background: mat.get-theme-color($theme, secondary) !important;
//}

//$background: map-get($theme, background);
//$foreground: map-get($theme, foreground);
//$primary: map-get($theme, primary);
//
//.mat-mdc-tooltip {
// background: mat.m2-get-color-from-palette($background, tooltip);
// border-radius: 3px;
//}
//
.slick-prev::before,
.slick-next::before {
//color: mat.m2-get-color-from-palette($foreground, text);
color: mat.get-theme-color($theme, inverse-surface);
}
//
//.app-backdrop {
// background: mat.m2-get-color-from-palette($background, background, 0.9);
//}
//
//// the padding of the mat-mdc-dialog-actions is not set properly
//.mat-mdc-dialog-actions {
// --mat-dialog-actions-padding: var(--mat-dialog-content-padding);
//}
}

@mixin angular-material-typography-overrides($typography) {
Expand Down
Loading

0 comments on commit 617ad15

Please sign in to comment.