add theme palette and jambotron-ui/src/styles/angular_material_theme.scss
This commit is contained in:
liosha84
@@ -18,7 +18,7 @@ import {App} from './app';
|
||||
import {CustomHttpInterceptor} from './helpers/custom-http-interceptor';
|
||||
import {AngularMarkdownEditorModule} from 'angular-markdown-editor';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
|
||||
import {NgxColorsModule} from 'ngx-colors';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -35,7 +35,8 @@ import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
SettingsComponent,
|
||||
SystemComponent,
|
||||
AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' }),
|
||||
MatFormFieldModule
|
||||
MatFormFieldModule,
|
||||
NgxColorsModule
|
||||
],
|
||||
providers: [
|
||||
authInterceptorProviders,provideHttpClient(withInterceptorsFromDi()),{
|
||||
|
||||
+1
-5
@@ -5,11 +5,7 @@
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
<p>admin-welcome.component works!</p>
|
||||
|
||||
+3
-1
@@ -2,7 +2,9 @@ import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-welcome.component',
|
||||
imports: [],
|
||||
imports: [
|
||||
|
||||
],
|
||||
templateUrl: './admin-welcome.component.html',
|
||||
styleUrl: './admin-welcome.component.scss'
|
||||
})
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@use 'node_modules/@angular/material' as mat;
|
||||
|
||||
@import './styles/angular_material_theme.scss';
|
||||
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------------------
|
||||
//markdown styles
|
||||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
@import 'prismjs/themes/prism-okaidia.css';
|
||||
@@ -57,23 +60,3 @@ body {
|
||||
min-height: calc(100vh - 113px);
|
||||
background: #fafafbb3;
|
||||
}
|
||||
|
||||
//// Include the common styles for Angular Material
|
||||
//@include mat.core();
|
||||
//
|
||||
//// Define your custom palette
|
||||
//$my-primary: mat.define-palette(mat.$blue-palette, 700);
|
||||
//$my-accent: mat.define-palette(mat.$orange-palette, A200, A100, A400);
|
||||
//$my-warn: mat.define-palette(mat.$red-palette);
|
||||
//
|
||||
//// Create the theme
|
||||
//$my-theme: mat.define-light-theme((
|
||||
// color: (
|
||||
// primary: $my-primary,
|
||||
// accent: $my-accent,
|
||||
// warn: $my-warn,
|
||||
// )
|
||||
//));
|
||||
//
|
||||
//// Include theme styles for core and each component used in your app
|
||||
//@include mat.all-component-themes($my-theme);
|
||||
|
||||
@@ -0,0 +1,306 @@
|
||||
// File: src/styles/material-theme.scss
|
||||
// Complete Angular Material theme implementation for Material Design 3 palette
|
||||
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
// Include core styles
|
||||
@include mat.core();
|
||||
|
||||
// Convert RGB values to hex for Angular Material palette definition
|
||||
// Primary: rgb(68 94 145) = #445e91
|
||||
// Secondary: rgb(87 94 113) = #575e71
|
||||
// Error: rgb(186 26 26) = #ba1a1a
|
||||
|
||||
// Define custom primary palette
|
||||
$custom-primary: mat.m2-define-palette((
|
||||
50: #e8f0ff, // Lightest shade
|
||||
100: #d8e2ff, // Very light
|
||||
200: #adc6ff, // Light - close to primary-container
|
||||
300: #81a3ff, // Medium light
|
||||
400: #5b82ff, // Medium
|
||||
500: #445e91, // Your primary color
|
||||
600: #2b4578, // Medium dark
|
||||
700: #1a2f5f, // Dark
|
||||
800: #0d1c47, // Very dark
|
||||
900: #030d30, // Darkest
|
||||
A100: #d8e2ff,
|
||||
A200: #adc6ff,
|
||||
A400: #5b82ff,
|
||||
A700: #1a2f5f,
|
||||
contrast: (
|
||||
50: rgba(black, 0.87),
|
||||
100: rgba(black, 0.87),
|
||||
200: rgba(black, 0.87),
|
||||
300: rgba(black, 0.87),
|
||||
400: white,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: rgba(black, 0.87),
|
||||
A200: rgba(black, 0.87),
|
||||
A400: white,
|
||||
A700: white,
|
||||
)
|
||||
));
|
||||
|
||||
// Define custom accent/secondary palette
|
||||
$custom-accent: mat.m2-define-palette((
|
||||
50: #f0f2f8,
|
||||
100: #dbe2f9, // Close to secondary-container
|
||||
200: #bfc8f1,
|
||||
300: #a0ace8,
|
||||
400: #8396d1,
|
||||
500: #575e71, // Your secondary color
|
||||
600: #4a5264,
|
||||
700: #3d4456,
|
||||
800: #313749,
|
||||
900: #252b3c,
|
||||
A100: #dbe2f9,
|
||||
A200: #bfc8f1,
|
||||
A400: #8396d1,
|
||||
A700: #3d4456,
|
||||
contrast: (
|
||||
50: rgba(black, 0.87),
|
||||
100: rgba(black, 0.87),
|
||||
200: rgba(black, 0.87),
|
||||
300: rgba(black, 0.87),
|
||||
400: white,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: rgba(black, 0.87),
|
||||
A200: rgba(black, 0.87),
|
||||
A400: white,
|
||||
A700: white,
|
||||
)
|
||||
));
|
||||
|
||||
// Define custom warn/error palette
|
||||
$custom-warn: mat.m2-define-palette((
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #ba1a1a, // Your error color
|
||||
600: #a51a1a,
|
||||
700: #8f1616,
|
||||
800: #7a1313,
|
||||
900: #651010,
|
||||
A100: #ff8a80,
|
||||
A200: #ff5252,
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
contrast: (
|
||||
50: rgba(black, 0.87),
|
||||
100: rgba(black, 0.87),
|
||||
200: rgba(black, 0.87),
|
||||
300: rgba(black, 0.87),
|
||||
400: rgba(black, 0.87),
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: rgba(black, 0.87),
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
)
|
||||
));
|
||||
|
||||
// Create the light theme
|
||||
$light-theme: mat.m2-define-light-theme((
|
||||
color: (
|
||||
primary: $custom-primary,
|
||||
accent: $custom-accent,
|
||||
warn: $custom-warn,
|
||||
),
|
||||
typography: mat.m2-define-typography-config(
|
||||
$font-family: '"Roboto", sans-serif',
|
||||
),
|
||||
density: 0,
|
||||
));
|
||||
|
||||
// Apply the theme to all Angular Material components
|
||||
@include mat.all-component-themes($light-theme);
|
||||
|
||||
// Apply Material Design 3 color tokens as CSS custom properties
|
||||
:root,
|
||||
.light {
|
||||
// Primary colors
|
||||
--md-sys-color-primary: rgb(68 94 145);
|
||||
--md-sys-color-surface-tint: rgb(68 94 145);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(216 226 255);
|
||||
--md-sys-color-on-primary-container: rgb(43 70 120);
|
||||
|
||||
// Secondary colors
|
||||
--md-sys-color-secondary: rgb(87 94 113);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(219 226 249);
|
||||
--md-sys-color-on-secondary-container: rgb(63 71 89);
|
||||
|
||||
// Tertiary colors
|
||||
--md-sys-color-tertiary: rgb(113 85 115);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(251 215 252);
|
||||
--md-sys-color-on-tertiary-container: rgb(88 62 91);
|
||||
|
||||
// Error colors
|
||||
--md-sys-color-error: rgb(186 26 26);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(255 218 214);
|
||||
--md-sys-color-on-error-container: rgb(147 0 10);
|
||||
|
||||
// Surface colors
|
||||
--md-sys-color-background: rgb(249 249 255);
|
||||
--md-sys-color-on-background: rgb(26 27 32);
|
||||
--md-sys-color-surface: rgb(249 249 255);
|
||||
--md-sys-color-on-surface: rgb(26 27 32);
|
||||
--md-sys-color-surface-variant: rgb(225 226 236);
|
||||
--md-sys-color-on-surface-variant: rgb(68 71 79);
|
||||
|
||||
// Outline colors
|
||||
--md-sys-color-outline: rgb(117 119 127);
|
||||
--md-sys-color-outline-variant: rgb(196 198 208);
|
||||
|
||||
// Utility colors
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
|
||||
// Inverse colors
|
||||
--md-sys-color-inverse-surface: rgb(47 48 54);
|
||||
--md-sys-color-inverse-on-surface: rgb(240 240 247);
|
||||
--md-sys-color-inverse-primary: rgb(173 198 255);
|
||||
|
||||
// Fixed colors
|
||||
--md-sys-color-primary-fixed: rgb(216 226 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 26 65);
|
||||
--md-sys-color-primary-fixed-dim: rgb(173 198 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(43 70 120);
|
||||
--md-sys-color-secondary-fixed: rgb(219 226 249);
|
||||
--md-sys-color-on-secondary-fixed: rgb(20 27 44);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(191 198 220);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(63 71 89);
|
||||
--md-sys-color-tertiary-fixed: rgb(251 215 252);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(41 19 45);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(222 188 223);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(88 62 91);
|
||||
|
||||
// Surface container colors
|
||||
--md-sys-color-surface-dim: rgb(217 217 224);
|
||||
--md-sys-color-surface-bright: rgb(249 249 255);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(243 243 250);
|
||||
--md-sys-color-surface-container: rgb(238 237 244);
|
||||
--md-sys-color-surface-container-high: rgb(232 231 238);
|
||||
--md-sys-color-surface-container-highest: rgb(226 226 233);
|
||||
|
||||
// Override Angular Material CSS variables to use MD3 tokens
|
||||
--mdc-theme-primary: var(--md-sys-color-primary);
|
||||
--mdc-theme-on-primary: var(--md-sys-color-on-primary);
|
||||
--mdc-theme-secondary: var(--md-sys-color-secondary);
|
||||
--mdc-theme-on-secondary: var(--md-sys-color-on-secondary);
|
||||
--mdc-theme-error: var(--md-sys-color-error);
|
||||
--mdc-theme-on-error: var(--md-sys-color-on-error);
|
||||
--mdc-theme-surface: var(--md-sys-color-surface);
|
||||
--mdc-theme-on-surface: var(--md-sys-color-on-surface);
|
||||
--mdc-theme-background: var(--md-sys-color-background);
|
||||
--mdc-theme-on-background: var(--md-sys-color-on-background);
|
||||
|
||||
// Material Components Web variables
|
||||
--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline);
|
||||
--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-primary);
|
||||
--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
|
||||
--mdc-text-field-filled-container-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
|
||||
// Apply background color to body
|
||||
body {
|
||||
background-color: var(--md-sys-color-background);
|
||||
color: var(--md-sys-color-on-background);
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
// Custom component overrides using Material Design 3 tokens
|
||||
.mat-mdc-card {
|
||||
background-color: var(--md-sys-color-surface-container) !important;
|
||||
color: var(--md-sys-color-on-surface) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-elevated-button {
|
||||
&.mat-primary {
|
||||
background-color: var(--md-sys-color-primary) !important;
|
||||
color: var(--md-sys-color-on-primary) !important;
|
||||
}
|
||||
|
||||
&.mat-accent {
|
||||
background-color: var(--md-sys-color-secondary) !important;
|
||||
color: var(--md-sys-color-on-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button {
|
||||
&.mat-primary {
|
||||
border-color: var(--md-sys-color-outline) !important;
|
||||
color: var(--md-sys-color-primary) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--md-sys-color-primary-container) !important;
|
||||
color: var(--md-sys-color-on-primary-container) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field {
|
||||
&.mat-focused {
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar styling
|
||||
.mat-toolbar {
|
||||
&.mat-primary {
|
||||
background-color: var(--md-sys-color-primary-container) !important;
|
||||
color: var(--md-sys-color-on-primary-container) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility classes for direct use of Material Design 3 tokens
|
||||
.md3-surface { background-color: var(--md-sys-color-surface); }
|
||||
.md3-surface-container { background-color: var(--md-sys-color-surface-container); }
|
||||
.md3-surface-container-high { background-color: var(--md-sys-color-surface-container-high); }
|
||||
.md3-surface-container-highest { background-color: var(--md-sys-color-surface-container-highest); }
|
||||
|
||||
.md3-primary { color: var(--md-sys-color-primary); }
|
||||
.md3-on-primary { color: var(--md-sys-color-on-primary); }
|
||||
.md3-primary-container { background-color: var(--md-sys-color-primary-container); }
|
||||
.md3-on-primary-container { color: var(--md-sys-color-on-primary-container); }
|
||||
|
||||
.md3-secondary { color: var(--md-sys-color-secondary); }
|
||||
.md3-on-secondary { color: var(--md-sys-color-on-secondary); }
|
||||
.md3-secondary-container { background-color: var(--md-sys-color-secondary-container); }
|
||||
.md3-on-secondary-container { color: var(--md-sys-color-on-secondary-container); }
|
||||
|
||||
.md3-tertiary { color: var(--md-sys-color-tertiary); }
|
||||
.md3-on-tertiary { color: var(--md-sys-color-on-tertiary); }
|
||||
.md3-tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
|
||||
.md3-on-tertiary-container { color: var(--md-sys-color-on-tertiary-container); }
|
||||
|
||||
.md3-error { color: var(--md-sys-color-error); }
|
||||
.md3-on-error { color: var(--md-sys-color-on-error); }
|
||||
.md3-error-container { background-color: var(--md-sys-color-error-container); }
|
||||
.md3-on-error-container { color: var(--md-sys-color-on-error-container); }
|
||||
|
||||
.md3-outline { border-color: var(--md-sys-color-outline); }
|
||||
.md3-outline-variant { border-color: var(--md-sys-color-outline-variant); }
|
||||
Reference in New Issue
Block a user