mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-08 03:25: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 { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||
|
|
@ -15,6 +16,15 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
|||
FuseUtilsModule
|
||||
],
|
||||
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
|
||||
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 */
|
||||
$palettes: ();
|
||||
@each $name in (primary, accent, warn) {
|
||||
|
|
@ -145,8 +70,41 @@ body .light {
|
|||
accent: map.get(map.get($base-light-theme, color), accent),
|
||||
warn: map.get(map.get($base-light-theme, color), warn),
|
||||
is-dark: map.get(map.get($base-light-theme, color), is-dark),
|
||||
foreground: $foreground-light,
|
||||
background: $background-light
|
||||
foreground: (
|
||||
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),
|
||||
warn: map.get(map.get($base-dark-theme, color), warn),
|
||||
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
|
||||
foreground: $foreground-dark,
|
||||
background: $background-dark
|
||||
foreground: (
|
||||
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