mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-08 19:45:08 +00:00
(@fuse/theming) Better structuring on the themes.scss file
(@fuse) Disabled Angular Material 'theme' sanity check since we use 'all-component-themes' without a color map
This commit is contained in:
sercan
parent
4a9b8ee91e
commit
190395f14b
|
|
@ -1,4 +1,5 @@
|
||||||
import { NgModule, Optional, SkipSelf } from '@angular/core';
|
import { NgModule, Optional, SkipSelf } from '@angular/core';
|
||||||
|
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||||
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
||||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||||
|
|
@ -15,6 +16,15 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||||
FuseUtilsModule
|
FuseUtilsModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
|
{
|
||||||
|
// Disable 'theme' sanity check
|
||||||
|
provide : MATERIAL_SANITY_CHECKS,
|
||||||
|
useValue: {
|
||||||
|
doctype: true,
|
||||||
|
theme : false,
|
||||||
|
version: true
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
// Use the 'fill' appearance on Angular Material form fields by default
|
// Use the 'fill' appearance on Angular Material form fields by default
|
||||||
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||||
|
|
|
||||||
|
|
@ -18,81 +18,6 @@
|
||||||
)
|
)
|
||||||
));
|
));
|
||||||
|
|
||||||
/* Prepare the Background and Foreground maps */
|
|
||||||
$background-light: (
|
|
||||||
status-bar: #CBD5E1, /* blueGray.300 */
|
|
||||||
app-bar: #FFFFFF,
|
|
||||||
background: #F1F5F9, /* blueGray.100 */
|
|
||||||
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
|
|
||||||
card: #FFFFFF,
|
|
||||||
dialog: #FFFFFF,
|
|
||||||
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
|
|
||||||
raised-button: #FFFFFF,
|
|
||||||
focused-button: #64748B, /* blueGray.500 */
|
|
||||||
selected-button: #E2E8F0, /* blueGray.200 */
|
|
||||||
selected-disabled-button: #E2E8F0, /* blueGray.200 */
|
|
||||||
disabled-button-toggle: #CBD5E1, /* blueGray.300 */
|
|
||||||
unselected-chip: #E2E8F0, /* blueGray.200 */
|
|
||||||
disabled-list-option: #CBD5E1, /* blueGray.300 */
|
|
||||||
tooltip: #1E293B /* blueGray.800 */
|
|
||||||
);
|
|
||||||
|
|
||||||
$background-dark: (
|
|
||||||
status-bar: #0F172A, /* blueGray.900 */
|
|
||||||
app-bar: #0F172A, /* blueGray.900 */
|
|
||||||
background: #0F172A, /* blueGray.900 */
|
|
||||||
hover: rgba(255, 255, 255, 0.05),
|
|
||||||
card: #1E293B, /* blueGray.800 */
|
|
||||||
dialog: #1E293B, /* blueGray.800 */
|
|
||||||
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
|
|
||||||
raised-button: #0F172A, /* blueGray.900 */
|
|
||||||
focused-button: #E2E8F0, /* blueGray.200 */
|
|
||||||
selected-button: rgba(255, 255, 255, 0.05),
|
|
||||||
selected-disabled-button: #1E293B, /* blueGray.800 */
|
|
||||||
disabled-button-toggle: #0F172A, /* blueGray.900 */
|
|
||||||
unselected-chip: #475569, /* blueGray.600 */
|
|
||||||
disabled-list-option: #E2E8F0, /* blueGray.200 */
|
|
||||||
tooltip: #64748B /* blueGray.500 */
|
|
||||||
);
|
|
||||||
|
|
||||||
$foreground-light: (
|
|
||||||
base: #000000,
|
|
||||||
divider: #E2E8F0, /* blueGray.200 */
|
|
||||||
dividers: #E2E8F0, /* blueGray.200 */
|
|
||||||
disabled: #94A3B8, /* blueGray.400 */
|
|
||||||
disabled-button: #94A3B8, /* blueGray.400 */
|
|
||||||
disabled-text: #94A3B8, /* blueGray.400 */
|
|
||||||
elevation: #000000,
|
|
||||||
hint-text: #94A3B8, /* blueGray.400 */
|
|
||||||
secondary-text: #64748B, /* blueGray.500 */
|
|
||||||
icon: #64748B, /* blueGray.500 */
|
|
||||||
icons: #64748B, /* blueGray.500 */
|
|
||||||
mat-icon: #64748B, /* blueGray.500 */
|
|
||||||
text: #1E293B, /* blueGray.800 */
|
|
||||||
slider-min: #1E293B, /* blueGray.800 */
|
|
||||||
slider-off: #CBD5E1, /* blueGray.300 */
|
|
||||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
|
||||||
);
|
|
||||||
|
|
||||||
$foreground-dark: (
|
|
||||||
base: #FFFFFF,
|
|
||||||
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
|
||||||
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
|
||||||
disabled: #475569, /* blueGray.600 */
|
|
||||||
disabled-button: #1E293B, /* blueGray.800 */
|
|
||||||
disabled-text: #475569, /* blueGray.600 */
|
|
||||||
elevation: #000000,
|
|
||||||
hint-text: #64748B, /* blueGray.500 */
|
|
||||||
secondary-text: #94A3B8, /* blueGray.400 */
|
|
||||||
icon: #F1F5F9, /* blueGray.100 */
|
|
||||||
icons: #F1F5F9, /* blueGray.100 */
|
|
||||||
mat-icon: #94A3B8, /* blueGray.400 */
|
|
||||||
text: #FFFFFF,
|
|
||||||
slider-min: #FFFFFF,
|
|
||||||
slider-off: #64748B, /* blueGray.500 */
|
|
||||||
slider-off-active: #94A3B8 /* blueGray.400 */
|
|
||||||
);
|
|
||||||
|
|
||||||
/* Generate Primary, Accent and Warn palettes */
|
/* Generate Primary, Accent and Warn palettes */
|
||||||
$palettes: ();
|
$palettes: ();
|
||||||
@each $name in (primary, accent, warn) {
|
@each $name in (primary, accent, warn) {
|
||||||
|
|
@ -145,8 +70,41 @@ body .light {
|
||||||
accent: map.get(map.get($base-light-theme, color), accent),
|
accent: map.get(map.get($base-light-theme, color), accent),
|
||||||
warn: map.get(map.get($base-light-theme, color), warn),
|
warn: map.get(map.get($base-light-theme, color), warn),
|
||||||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
||||||
foreground: $foreground-light,
|
foreground: (
|
||||||
background: $background-light
|
base: #000000,
|
||||||
|
divider: #E2E8F0, /* blueGray.200 */
|
||||||
|
dividers: #E2E8F0, /* blueGray.200 */
|
||||||
|
disabled: #94A3B8, /* blueGray.400 */
|
||||||
|
disabled-button: #94A3B8, /* blueGray.400 */
|
||||||
|
disabled-text: #94A3B8, /* blueGray.400 */
|
||||||
|
elevation: #000000,
|
||||||
|
hint-text: #94A3B8, /* blueGray.400 */
|
||||||
|
secondary-text: #64748B, /* blueGray.500 */
|
||||||
|
icon: #64748B, /* blueGray.500 */
|
||||||
|
icons: #64748B, /* blueGray.500 */
|
||||||
|
mat-icon: #64748B, /* blueGray.500 */
|
||||||
|
text: #1E293B, /* blueGray.800 */
|
||||||
|
slider-min: #1E293B, /* blueGray.800 */
|
||||||
|
slider-off: #CBD5E1, /* blueGray.300 */
|
||||||
|
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||||
|
),
|
||||||
|
background: (
|
||||||
|
status-bar: #CBD5E1, /* blueGray.300 */
|
||||||
|
app-bar: #FFFFFF,
|
||||||
|
background: #F1F5F9, /* blueGray.100 */
|
||||||
|
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
|
||||||
|
card: #FFFFFF,
|
||||||
|
dialog: #FFFFFF,
|
||||||
|
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
|
||||||
|
raised-button: #FFFFFF,
|
||||||
|
focused-button: #64748B, /* blueGray.500 */
|
||||||
|
selected-button: #E2E8F0, /* blueGray.200 */
|
||||||
|
selected-disabled-button: #E2E8F0, /* blueGray.200 */
|
||||||
|
disabled-button-toggle: #CBD5E1, /* blueGray.300 */
|
||||||
|
unselected-chip: #E2E8F0, /* blueGray.200 */
|
||||||
|
disabled-list-option: #CBD5E1, /* blueGray.300 */
|
||||||
|
tooltip: #1E293B /* blueGray.800 */
|
||||||
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -166,8 +124,41 @@ body .dark {
|
||||||
accent: map.get(map.get($base-dark-theme, color), accent),
|
accent: map.get(map.get($base-dark-theme, color), accent),
|
||||||
warn: map.get(map.get($base-dark-theme, color), warn),
|
warn: map.get(map.get($base-dark-theme, color), warn),
|
||||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
||||||
foreground: $foreground-dark,
|
foreground: (
|
||||||
background: $background-dark
|
base: #FFFFFF,
|
||||||
|
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||||
|
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
|
||||||
|
disabled: #475569, /* blueGray.600 */
|
||||||
|
disabled-button: #1E293B, /* blueGray.800 */
|
||||||
|
disabled-text: #475569, /* blueGray.600 */
|
||||||
|
elevation: #000000,
|
||||||
|
hint-text: #64748B, /* blueGray.500 */
|
||||||
|
secondary-text: #94A3B8, /* blueGray.400 */
|
||||||
|
icon: #F1F5F9, /* blueGray.100 */
|
||||||
|
icons: #F1F5F9, /* blueGray.100 */
|
||||||
|
mat-icon: #94A3B8, /* blueGray.400 */
|
||||||
|
text: #FFFFFF,
|
||||||
|
slider-min: #FFFFFF,
|
||||||
|
slider-off: #64748B, /* blueGray.500 */
|
||||||
|
slider-off-active: #94A3B8 /* blueGray.400 */
|
||||||
|
),
|
||||||
|
background: (
|
||||||
|
status-bar: #0F172A, /* blueGray.900 */
|
||||||
|
app-bar: #0F172A, /* blueGray.900 */
|
||||||
|
background: #0F172A, /* blueGray.900 */
|
||||||
|
hover: rgba(255, 255, 255, 0.05),
|
||||||
|
card: #1E293B, /* blueGray.800 */
|
||||||
|
dialog: #1E293B, /* blueGray.800 */
|
||||||
|
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
|
||||||
|
raised-button: #0F172A, /* blueGray.900 */
|
||||||
|
focused-button: #E2E8F0, /* blueGray.200 */
|
||||||
|
selected-button: rgba(255, 255, 255, 0.05),
|
||||||
|
selected-disabled-button: #1E293B, /* blueGray.800 */
|
||||||
|
disabled-button-toggle: #0F172A, /* blueGray.900 */
|
||||||
|
unselected-chip: #475569, /* blueGray.600 */
|
||||||
|
disabled-list-option: #E2E8F0, /* blueGray.200 */
|
||||||
|
tooltip: #64748B /* blueGray.500 */
|
||||||
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user