sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update to Angular v19 and fixing (#3)

Browse Source 
Reviewed-on: #3
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>
This commit was merged in pull request #3.
This commit is contained in:
sandre
2026-01-20 10:56:31 +00:00
committed by sandre
parent af44e50f54
commit 137b2ab1fc
117 changed files with 3496 additions and 2471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
Front/skydivelogs-app/src/assets/css/new-theme.scss
View File

@@ -1,6 +1,18 @@
/* These tokens are generated using https://themes.angular-material.dev/ */
/* Preview: https://themes.angular-material.dev/?seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Preview: https://themes.angular-material.dev/?bold-font-weight=700&brand-font-family=Roboto&medium-font-weight=500&plain-font-family=Roboto&regular-font-weight=400&seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
/* Seed Typography: plain-font-family: Roboto, brand-font-family: Roboto, bold-font-weight: 700, medium-font-weight: 500, regular-font-weight: 400 */
/* Make sure to import fonts in `<head>` of html */
/*
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap');
</style>
OR
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap">
*/
@use "@angular/material" as mat;
@@ -127,122 +139,67 @@
));
}
/* Typography */
:root, :host {
/* core typography tokens are not generating css variables, hence below */
--mat-sys-brand-font-family: Roboto;
--mat-sys-plain-font-family: Roboto;
--mat-sys-bold-font-weight: 700;
--mat-sys-medium-font-weight: 500;
--mat-sys-regular-font-weight: 400;
// https://theme-builder-1623190217839.web.app/
// @use '@angular/material' as mat;
// @import "Material-Icons";
// @import "Roboto";
/*
// Be sure that you only ever include this mixin once!
@include mat.core();
// Define your theme with color palettes, typography and density
$mat-theme-primary-palette: map-merge(mat.$cyan-palette, ( contrast: (100: #150c4a,)));
$mat-theme-primary: mat.define-palette(
$mat-theme-primary-palette,
$default: 100,
$lighter: 100,
$darker: 700,
$text: 500
);
$mat-theme-accent-palette: map-merge(mat.$teal-palette, ( 501: #4d77b6,contrast: (501: white,A100: white,A200: white,)));
$mat-theme-accent: mat.define-palette(
$mat-theme-accent-palette,
$default: 501,
$lighter: A100,
$darker: A200,
$text: 600
);
$mat-theme-warn-palette: map-merge(mat.$pink-palette, ( ));
$mat-theme-warn: mat.define-palette(
$mat-theme-warn-palette,
$default: A200,
$lighter: 500,
$darker: 500,
$text: A700
);
$mat-dark-theme-primary-palette: map-merge(mat.$lime-palette, ( contrast: (200: #030844,A100: rgba(0,0,0, 0.87),A700: rgba(0,0,0, 0.87),)));
$mat-dark-theme-primary: mat.define-palette(
$mat-dark-theme-primary-palette,
$default: 200,
$lighter: A100,
$darker: A700,
$text: 700
);
$mat-dark-theme-accent-palette: map-merge(mat.$green-palette, ( contrast: (A200: black,50: black,A400: black,)));
$mat-dark-theme-accent: mat.define-palette(
$mat-dark-theme-accent-palette,
$default: A200,
$lighter: 50,
$darker: A400,
$text: A100
);
$mat-dark-theme-warn-palette: map-merge(mat.$pink-palette, ( contrast: (A100: black,100: white,)));
$mat-dark-theme-warn: mat.define-palette(
$mat-dark-theme-warn-palette,
$default: A100,
$lighter: 100,
$darker: A700,
$text: 100
);
// @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
$mat-typography: mat.define-typography-config(
$font-family: 'Rubik',
$display-4: mat.define-typography-level($font-size: 96px, $font-weight: 300, $font-family: Rubik),
$display-3: mat.define-typography-level($font-size: 60px, $font-weight: 500, $font-family: Rubik),
$display-2: mat.define-typography-level($font-size: 48px, $font-weight: 500, $font-family: Rubik),
$display-1: mat.define-typography-level($font-size: 34px, $font-weight: 500, $font-family: Rubik),
$headline: mat.define-typography-level($font-size: 24px, $font-weight: 500, $font-family: Rubik),
$title: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik),
$subheading-2: mat.define-typography-level($font-size: 18px, $font-weight: 500, $font-family: Rubik),
$subheading-1: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik),
$body-2: mat.define-typography-level($font-size: 16px, $font-weight: 400, $font-family: Rubik),
$body-1: mat.define-typography-level($font-size: 18px, $font-weight: 400, $font-family: Rubik),
$caption: mat.define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: Rubik),
$button: mat.define-typography-level($font-size: 16px, $font-weight: 500, $font-family: Rubik),
// Line-height must be unit-less fraction of the font-size.
$input: mat.define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: Rubik),
);
$mat-density: 0;
// @include mat.elevation(
// $zValue: 12,
// $color: #000,
// $opacity: 0.5
// );
$mat-core-theme: mat.define-light-theme((
color: (
primary: $mat-theme-primary,
accent: $mat-theme-accent,
warn: $mat-theme-warn
),
typography: $mat-typography,
density: $mat-density
@include mat.theme-overrides((
brand-family: Roboto,
plain-family: Roboto,
bold-weight: 700,
medium-weight: 500,
regular-weight: 400,
headline-large-font: var(--mat-sys-brand-font-family),
headline-medium-font: var(--mat-sys-brand-font-family),
headline-small-font: var(--mat-sys-brand-font-family),
display-large-font: var(--mat-sys-brand-font-family),
display-medium-font: var(--mat-sys-brand-font-family),
display-small-font: var(--mat-sys-brand-font-family),
title-large-font: var(--mat-sys-brand-font-family),
body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font),
label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font),
title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font),
headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font),
headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font),
display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font),
display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font),
display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font),
body-large-font: var(--mat-sys-plain-font-family),
body-medium-font: var(--mat-sys-plain-font-family),
body-small-font: var(--mat-sys-plain-font-family),
label-large-font: var(--mat-sys-plain-font-family),
label-medium-font: var(--mat-sys-plain-font-family),
label-small-font: var(--mat-sys-plain-font-family),
title-medium-font: var(--mat-sys-plain-font-family),
title-small-font: var(--mat-sys-plain-font-family),
label-large-weight-prominent: var(--mat-sys-bold-font-weight),
label-medium-weight-prominent: var(--mat-sys-bold-font-weight),
label-large-weight: var(--mat-sys-medium-font-weight),
label-medium-weight: var(--mat-sys-medium-font-weight),
label-small-weight: var(--mat-sys-medium-font-weight),
title-medium-weight: var(--mat-sys-medium-font-weight),
title-small-weight: var(--mat-sys-medium-font-weight),
body-large-weight: var(--mat-sys-regular-font-weight),
body-medium-weight: var(--mat-sys-regular-font-weight),
body-small-weight: var(--mat-sys-regular-font-weight),
display-large-weight: var(--mat-sys-regular-font-weight),
display-medium-weight: var(--mat-sys-regular-font-weight),
display-small-weight: var(--mat-sys-regular-font-weight),
headline-large-weight: var(--mat-sys-regular-font-weight),
headline-medium-weight: var(--mat-sys-regular-font-weight),
headline-small-weight: var(--mat-sys-regular-font-weight),
title-large-weight: var(--mat-sys-regular-font-weight),
));
$mat-dark-theme: mat.define-dark-theme((
color: (
primary: $mat-dark-theme-primary,
accent: $mat-dark-theme-accent,
warn: $mat-dark-theme-warn,
)
));
@include mat.all-component-themes($mat-core-theme);
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
}
*/
}