julien/adastra_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Angular update to v18

Browse Source
This commit is contained in:
Julien Gautier
2026-03-30 01:52:34 +02:00
parent 518168f225
commit bd8ed94b1d
6 changed files with 92 additions and 896 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/button/_variants.scss
+7 -7
View File
@@ -6,19 +6,19 @@ $_ripple-opacity: 0.1;
// Applies a focus style to an mat-button element for each of the supported palettes.
@mixin _focus-overlay-color($config-or-theme, $variants) {
$config: mat.get-color-config($config-or-theme);
$config: mat.m2-get-color-config($config-or-theme);
@each $variant, $variant-palette in $variants {
&.mat-#{"" + $variant} .mat-mdc-button-focus-overlay {
background-color: mat.get-color-from-palette($variant-palette);
background-color: mat.m2-get-color-from-palette($variant-palette);
}
&.mat-#{"" + $variant} .mat-mdc-button-persistent-ripple::before {
background-color: mat.get-color-from-palette($variant-palette);
background-color: mat.m2-get-color-from-palette($variant-palette);
}
}
}
@mixin _ripple-background($palette, $hue, $opacity) {
$background-color: mat.get-color-from-palette($palette, $hue, $opacity);
$background-color: mat.m2-get-color-from-palette($palette, $hue, $opacity);
background-color: $background-color;
@if (meta.type-of($background-color) != color) {
opacity: $opacity;
@@ -40,17 +40,17 @@ $_ripple-opacity: 0.1;
@each $variant, $variant-palette in $variants {
&.mat-#{"" + $variant} {
#{$property}: mat.get-color-from-palette($variant-palette, $hue);
#{$property}: mat.m2-get-color-from-palette($variant-palette, $hue);
&.mat-mdc-button-disabled {
$palette: if($property == 'color', $foreground, $background);
#{$property}: mat.get-color-from-palette($palette, disabled-button);
#{$property}: mat.m2-get-color-from-palette($palette, disabled-button);
}
}
}
}
@mixin color($config-or-theme, $variants) {
$config: mat.get-color-config($config-or-theme);
$config: mat.m2-get-color-config($config-or-theme);
$foreground: map.get($config, foreground);
$background: map.get($config, background);
src/styles/components/utils/_variants.scss
+4 -4
View File
@@ -2,17 +2,17 @@
@use '@angular/material' as mat;
@mixin _progress-bar-color($config-or-theme, $variants) {
$config: mat.get-color-config($config-or-theme);
$config: mat.m2-get-color-config($config-or-theme);
@each $variant, $variant-palette in $variants {
&.mat-#{"" + $variant} {
#{--mdc-linear-progress-active-indicator-color}: mat.get-color-from-palette($variant-palette);
#{--mdc-linear-progress-track-color}: mat.get-color-from-palette($variant-palette, 500, 0.25);
#{--mdc-linear-progress-active-indicator-color}: mat.m2-get-color-from-palette($variant-palette);
#{--mdc-linear-progress-track-color}: mat.m2-get-color-from-palette($variant-palette, 500, 0.25);
}
}
}
@mixin color($config-or-theme, $variants) {
$config: mat.get-color-config($config-or-theme);
$config: mat.m2-get-color-config($config-or-theme);
.mat-mdc-progress-bar {
@include _progress-bar-color($config, $variants);
}
src/styles/styles.scss
+31 -31
View File
@@ -52,45 +52,45 @@ File: scss
//$adastra_app-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
//$adastra_app-warn: mat.define-palette(mat.$blue-palette);
$adastra_app-primary: mat.define-palette($md-custom-primary, 500);
$adastra_app-secondary: mat.define-palette($md-custom-warn);
$adastra_app-accent: mat.define-palette($md-custom-accent, A200, A100, A400);
$adastra_app-primary: mat.m2-define-palette($md-custom-primary, 500);
$adastra_app-secondary: mat.m2-define-palette($md-custom-warn);
$adastra_app-accent: mat.m2-define-palette($md-custom-accent, A200, A100, A400);
//$adastra_app-warn: mat.define-palette($md-custom-warn);
$adastra_app-warn: mat.define-palette($md-custom-raspberry, 400);
$adastra_app-danger: mat.define-palette($md-custom-red, 700);
$adastra_app-success: mat.define-palette($md-custom-green);
$adastra_app-info: mat.define-palette($md-custom-blue);
$adastra_app-warning: mat.define-palette($md-custom-orange, 700);
$adastra_app-blue: mat.define-palette($md-custom-blue, 700);
$adastra_app-red: mat.define-palette($md-custom-red);
$adastra_app-green: mat.define-palette($md-custom-green, 400);
$adastra_app-warn: mat.m2-define-palette($md-custom-raspberry, 400);
$adastra_app-danger: mat.m2-define-palette($md-custom-red, 700);
$adastra_app-success: mat.m2-define-palette($md-custom-green);
$adastra_app-info: mat.m2-define-palette($md-custom-blue);
$adastra_app-warning: mat.m2-define-palette($md-custom-orange, 700);
$adastra_app-blue: mat.m2-define-palette($md-custom-blue, 700);
$adastra_app-red: mat.m2-define-palette($md-custom-red);
$adastra_app-green: mat.m2-define-palette($md-custom-green, 400);
$adastra_app-turquoise: mat.define-palette($md-custom-turquoise);
$adastra_app-cyan: mat.define-palette($md-custom-cyan);
$adastra_app-navy: mat.define-palette($md-custom-navy);
$adastra_app-purple: mat.define-palette($md-custom-purple);
$adastra_app-raspberry: mat.define-palette($md-custom-raspberry);
$adastra_app-orange: mat.define-palette($md-custom-orange);
$adastra_app-yellow: mat.define-palette($md-custom-yellow);
$adastra_app-teal: mat.define-palette($md-custom-teal);
$adastra_app-magenta: mat.define-palette($md-custom-magenta);
$adastra_app-pink: mat.define-palette($md-custom-pink);
$adastra_app-megna: mat.define-palette($md-custom-megna);
$adastra_app-purple-light: mat.define-palette($md-custom-purple-light);
$adastra_app-navy-light: mat.define-palette($md-custom-navy-light);
$adastra_app-grey: mat.define-palette(mat.$grey-palette, 400);
$adastra_app-muted: mat.define-palette(mat.$grey-palette, 300);
$adastra_app-turquoise: mat.m2-define-palette($md-custom-turquoise);
$adastra_app-cyan: mat.m2-define-palette($md-custom-cyan);
$adastra_app-navy: mat.m2-define-palette($md-custom-navy);
$adastra_app-purple: mat.m2-define-palette($md-custom-purple);
$adastra_app-raspberry: mat.m2-define-palette($md-custom-raspberry);
$adastra_app-orange: mat.m2-define-palette($md-custom-orange);
$adastra_app-yellow: mat.m2-define-palette($md-custom-yellow);
$adastra_app-teal: mat.m2-define-palette($md-custom-teal);
$adastra_app-magenta: mat.m2-define-palette($md-custom-magenta);
$adastra_app-pink: mat.m2-define-palette($md-custom-pink);
$adastra_app-megna: mat.m2-define-palette($md-custom-megna);
$adastra_app-purple-light: mat.m2-define-palette($md-custom-purple-light);
$adastra_app-navy-light: mat.m2-define-palette($md-custom-navy-light);
$adastra_app-grey: mat.m2-define-palette(mat.$m2-grey-palette, 400);
$adastra_app-muted: mat.m2-define-palette(mat.$m2-grey-palette, 300);
$custom-typography: mat.define-typography-config(
$custom-typography: mat.m2-define-typography-config(
$font-family: 'Barlow, sans-serif',
$body-1: mat.define-typography-level(
$body-1: mat.m2-define-typography-level(
$font-family: 'Barlow, sans-serif',
$font-weight: 400,
$font-size: 14px,
$line-height: 1.42857143,
$letter-spacing: normal,
),
$body-2: mat.define-typography-level(
$body-2: mat.m2-define-typography-level(
$font-family: 'Barlow, sans-serif',
$font-weight: 500,
$font-size: 14px,
@@ -102,7 +102,7 @@ $custom-typography: mat.define-typography-config(
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
//$adastra_app-theme: mat.define-dark-theme((
$adastra_app-theme: mat.define-light-theme((
$adastra_app-theme: mat.m2-define-light-theme((
color: (
primary: $adastra_app-primary,
accent: $adastra_app-accent,
@@ -183,7 +183,7 @@ $background: map.get($adastra_app-theme, background);
@each $variant, $variant-palette in $adastra_app-variants {
.text-bg-#{"" + $variant} {
color: mat.get-contrast-color-from-palette($variant-palette, 500) !important;
color: mat.m2-get-contrast-color-from-palette($variant-palette, 500) !important;
}
}
src/styles/variable.scss
+32 -32
View File
@@ -23,31 +23,31 @@ $sidenav-width: 237px;
$sidenav-height: 35px;
/* Theme Colors */
$primary: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
$accent: mat.get-color-from-palette(palettes.$md-custom-accent, 700); // #d9caae;
$warn: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f;
$primary: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
$accent: mat.m2-get-color-from-palette(palettes.$md-custom-accent, 700); // #d9caae;
$warn: mat.m2-get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f;
//$warn: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7;
$secondary: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7;
$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100); // #c0c7e3;
$secondary: mat.m2-get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7;
$headingtext: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$bodytext: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 100); // #c0c7e3;
//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 900); // #4f64af;
$sidebar: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 900); // #4f64af;
$sidebar-light: #d9d9d9;
$sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidebar-selected: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-footer: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-text: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidebar-icons: mat.m2-get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidenav-content: #1c1c1c;
$armygreen: #4b5320;
$odbgreen: #485b54;
$error: #b95252; //#b85c5c;
/* Bootstrap Colors */
$danger: mat.get-color-from-palette(palettes.$md-custom-red, 700); // #f15050
$success: mat.get-color-from-palette(palettes.$md-custom-green, 500); // #16d57c
$warning: mat.get-color-from-palette(palettes.$md-custom-orange, 700); // #ffb035
$info: mat.get-color-from-palette(palettes.$md-custom-blue, 500); // #0dcaf0
$inverse: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f
$danger: mat.m2-get-color-from-palette(palettes.$md-custom-red, 700); // #f15050
$success: mat.m2-get-color-from-palette(palettes.$md-custom-green, 500); // #16d57c
$warning: mat.m2-get-color-from-palette(palettes.$md-custom-orange, 700); // #ffb035
$info: mat.m2-get-color-from-palette(palettes.$md-custom-blue, 500); // #0dcaf0
$inverse: mat.m2-get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f
/* Dark Colors */
$danger-dark: shade-color($danger, 30%) !default; // #e6294b
@@ -106,22 +106,22 @@ $grays: (
// scss-docs-start color-variables
$blue-light: #20b6fc !default; // #20b6fc
$indigo: #6610f2 !default; // #6610f2
$blue: mat.get-color-from-palette(palettes.$md-custom-blue, 700) !default; // #1976d2
$purple: mat.get-color-from-palette(palettes.$md-custom-purple, 500) !default; // #7460ee
$purple-light: mat.get-color-from-palette(palettes.$md-custom-purple-light, 500) !default; // #8a65e0
$pink: mat.get-color-from-palette(palettes.$md-custom-pink, 500) !default; // #ed5094
$magenta: mat.get-color-from-palette(palettes.$md-custom-magenta, 500) !default; // #fd18f3
$raspberry: mat.get-color-from-palette(palettes.$md-custom-raspberry, 500) !default; // #b51156
$red: mat.get-color-from-palette(palettes.$md-custom-red, 500) !default; // #f15050
$orange: mat.get-color-from-palette(palettes.$md-custom-orange, 500) !default; // #ff9900
$yellow: mat.get-color-from-palette(palettes.$md-custom-yellow, 500) !default; // #ffe205
$megna: mat.get-color-from-palette(palettes.$md-custom-megna, 500) !default; // #00897b
$green: mat.get-color-from-palette(palettes.$md-custom-green, 400) !default; // #4cae4c
$teal: mat.get-color-from-palette(palettes.$md-custom-teal, 500) !default; // #5dcc89
$turquoise: mat.get-color-from-palette(palettes.$md-custom-turquoise, 500) !default; // #02bfab
$cyan: mat.get-color-from-palette(palettes.$md-custom-cyan, 500) !default; // #65dae0
$navy: mat.get-color-from-palette(palettes.$md-custom-navy, 500) !default; // #17466f
$navy-light: mat.get-color-from-palette(palettes.$md-custom-navy-light, 500) !default; // #337ab7
$blue: mat.m2-get-color-from-palette(palettes.$md-custom-blue, 700) !default; // #1976d2
$purple: mat.m2-get-color-from-palette(palettes.$md-custom-purple, 500) !default; // #7460ee
$purple-light: mat.m2-get-color-from-palette(palettes.$md-custom-purple-light, 500) !default; // #8a65e0
$pink: mat.m2-get-color-from-palette(palettes.$md-custom-pink, 500) !default; // #ed5094
$magenta: mat.m2-get-color-from-palette(palettes.$md-custom-magenta, 500) !default; // #fd18f3
$raspberry: mat.m2-get-color-from-palette(palettes.$md-custom-raspberry, 500) !default; // #b51156
$red: mat.m2-get-color-from-palette(palettes.$md-custom-red, 500) !default; // #f15050
$orange: mat.m2-get-color-from-palette(palettes.$md-custom-orange, 500) !default; // #ff9900
$yellow: mat.m2-get-color-from-palette(palettes.$md-custom-yellow, 500) !default; // #ffe205
$megna: mat.m2-get-color-from-palette(palettes.$md-custom-megna, 500) !default; // #00897b
$green: mat.m2-get-color-from-palette(palettes.$md-custom-green, 400) !default; // #4cae4c
$teal: mat.m2-get-color-from-palette(palettes.$md-custom-teal, 500) !default; // #5dcc89
$turquoise: mat.m2-get-color-from-palette(palettes.$md-custom-turquoise, 500) !default; // #02bfab
$cyan: mat.m2-get-color-from-palette(palettes.$md-custom-cyan, 500) !default; // #65dae0
$navy: mat.m2-get-color-from-palette(palettes.$md-custom-navy, 500) !default; // #17466f
$navy-light: mat.m2-get-color-from-palette(palettes.$md-custom-navy-light, 500) !default; // #337ab7
// scss-docs-end color-variables
// scss-docs-start colors-map