Merge pull request #90 from liosha84/89-web-face-theme-functionality
add theme palette and jambotron-ui/src/styles/angular_material_theme.…
This commit is contained in:
liosha84
@@ -51,3 +51,4 @@ out/
|
||||
/.idea/
|
||||
|
||||
/uploads/
|
||||
/META-INF/
|
||||
|
||||
Generated
+74
-10
@@ -9,20 +9,23 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@angular/animations": "^20.0.4",
|
||||
"@angular/cdk": "^20.0.3",
|
||||
"@angular/cdk": "^20.1.6",
|
||||
"@angular/common": "^20.0.0",
|
||||
"@angular/compiler": "^20.0.0",
|
||||
"@angular/core": "^20.0.0",
|
||||
"@angular/forms": "^20.0.0",
|
||||
"@angular/material": "^20.0.3",
|
||||
"@angular/material": "^20.1.6",
|
||||
"@angular/platform-browser": "^20.0.0",
|
||||
"@angular/platform-server": "^20.0.0",
|
||||
"@angular/router": "^20.0.0",
|
||||
"@angular/ssr": "^20.0.2",
|
||||
"@material/material-color-utilities": "^0.3.0",
|
||||
"@ng-bootstrap/ng-bootstrap": "19.0.0",
|
||||
"@popperjs/core": "2.11.8",
|
||||
"angular-markdown-editor": "^3.1.1",
|
||||
"bootstrap": "5.3.6",
|
||||
"ngx-color-picker": "^20.1.0",
|
||||
"ngx-colors": "^3.6.0",
|
||||
"ngx-image-cropper": "^9.1.5",
|
||||
"ngx-markdown": "^20.0.0",
|
||||
"prismjs": "^1.30.0",
|
||||
@@ -582,12 +585,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk": {
|
||||
"version": "20.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.0.3.tgz",
|
||||
"integrity": "sha512-70KG8GpK4aV9j5hUkpDZJQ6oMgCuaCRY6JX1axPxkNtQaiK6PAmTfQLiGqF2cYhbQneeq3uGvTorAjRfvp8NPQ==",
|
||||
"version": "20.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.1.6.tgz",
|
||||
"integrity": "sha512-GKxCS/GOAOQCNTnrvYia9wR4Z9rRWjzNRE0989LXwWLYcmiG7+ku30PolGV7zhmlgUu/qx8P6BbxZgUvK34X/A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"parse5": "^7.1.2",
|
||||
"parse5": "^8.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@@ -596,6 +599,30 @@
|
||||
"rxjs": "^6.5.3 || ^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk/node_modules/entities": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cdk/node_modules/parse5": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
|
||||
"integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"entities": "^6.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/inikulin/parse5?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/cli": {
|
||||
"version": "20.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.0.3.tgz",
|
||||
@@ -843,15 +870,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/material": {
|
||||
"version": "20.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-20.0.3.tgz",
|
||||
"integrity": "sha512-kd5Mi6gVxcjDs1nfm8GG2rId59SXWQjkiBMqrYuhy2Trpb+zG0vrLClrpoe3JdWqoX4GJagxGwl3VRDBIoP/cw==",
|
||||
"version": "20.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-20.1.6.tgz",
|
||||
"integrity": "sha512-k2rjN6ABd5ahE4LWAJ5rv7Z3WAO6tgmjOrFZG7ED0xavhcGWyHroALFqdmlIkb2QFAAF186ifLIH+xgln9edqw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/cdk": "20.0.3",
|
||||
"@angular/cdk": "20.1.6",
|
||||
"@angular/common": "^20.0.0 || ^21.0.0",
|
||||
"@angular/core": "^20.0.0 || ^21.0.0",
|
||||
"@angular/forms": "^20.0.0 || ^21.0.0",
|
||||
@@ -3746,6 +3773,12 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@material/material-color-utilities": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.3.0.tgz",
|
||||
"integrity": "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@mermaid-js/parser": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.6.0.tgz",
|
||||
@@ -11781,6 +11814,35 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ngx-color-picker": {
|
||||
"version": "20.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-20.1.0.tgz",
|
||||
"integrity": "sha512-669JqpvSroMt9AZjcyks0zzV0Indqjch0lAGTOvo6AR8RiSH9GPGeFT5Lk0sNFvNIa1cywS1emL4S3Jj+hMLZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=18.0.0",
|
||||
"@angular/core": ">=18.0.0",
|
||||
"@angular/forms": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ngx-colors": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-colors/-/ngx-colors-3.6.0.tgz",
|
||||
"integrity": "sha512-jPFzosd7t7YHKqKTBbOxdAF67aevBTiv0UdS0i7umWQMdMfi0lwcNTrL8XLhW2YbIpy98r54zWgc0iZH5FpiZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/animations": ">=15.0.0",
|
||||
"@angular/common": ">=15.0.0",
|
||||
"@angular/core": ">=15.0.0",
|
||||
"@angular/forms": ">=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ngx-image-cropper": {
|
||||
"version": "9.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-9.1.5.tgz",
|
||||
@@ -12426,6 +12488,7 @@
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
|
||||
"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"entities": "^6.0.0"
|
||||
@@ -12479,6 +12542,7 @@
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
|
||||
@@ -14,20 +14,23 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^20.0.4",
|
||||
"@angular/cdk": "^20.0.3",
|
||||
"@angular/cdk": "^20.1.6",
|
||||
"@angular/common": "^20.0.0",
|
||||
"@angular/compiler": "^20.0.0",
|
||||
"@angular/core": "^20.0.0",
|
||||
"@angular/forms": "^20.0.0",
|
||||
"@angular/material": "^20.0.3",
|
||||
"@angular/material": "^20.1.6",
|
||||
"@angular/platform-browser": "^20.0.0",
|
||||
"@angular/platform-server": "^20.0.0",
|
||||
"@angular/router": "^20.0.0",
|
||||
"@angular/ssr": "^20.0.2",
|
||||
"@material/material-color-utilities": "^0.3.0",
|
||||
"@ng-bootstrap/ng-bootstrap": "19.0.0",
|
||||
"@popperjs/core": "2.11.8",
|
||||
"angular-markdown-editor": "^3.1.1",
|
||||
"bootstrap": "5.3.6",
|
||||
"ngx-color-picker": "^20.1.0",
|
||||
"ngx-colors": "^3.6.0",
|
||||
"ngx-image-cropper": "^9.1.5",
|
||||
"ngx-markdown": "^20.0.0",
|
||||
"prismjs": "^1.30.0",
|
||||
|
||||
@@ -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