theme-bases.scss

@use 'sass:map';
@use '@angular/material' as mat;
@use '@brightlayer-ui/colors/palette.scss' as blui;

@use './darkTheme';
@use './blueTheme';
@use './blui-component-theme';
@use './margins';
@use './fonts';
@use './typography';
@use './common';

mat.$theme-ignore-duplication-warnings: true;

@mixin sharedConfig() {
    @include margins.reasonable-margins();
    @include fonts.bodyfont();
    @include typography.typography();
    @include common.common();
}

$blui-blue-primary: mat.define-palette(blui.$blui-blue);
$blui-blue-accent: mat.define-palette(blui.$blui-lightBlue);
$blui-blue-warn: mat.define-palette(blui.$blui-red);

$typography-config: mat.define-legacy-typography-config(
    $font-family: '"Open Sans", Arial, Helvetica, sans-serif',
    $display-4: mat.define-typography-level(6rem, 1.167, 300),
    $display-2: mat.define-typography-level(3rem, 1.167, 400),
    $display-1: mat.define-typography-level(2.125rem, 1.235, 400),
    $headline: mat.define-typography-level(1.5rem, 1.334, 400),
    $title: mat.define-typography-level(1.25rem, 1.6, 600),
    $subheading-2: mat.define-typography-level(1rem, 1.75, 400),
    $subheading-1: mat.define-typography-level(0.875rem, 1.57, 600),
    $body-2: mat.define-typography-level(0.875rem, 1.43, 500),
    $body-1: mat.define-typography-level(1rem, 1.5, 400),
    $caption: mat.define-typography-level(0.75rem, 1.66, 400),
    $button: mat.define-typography-level(0.875rem, 1, 600),
    $input: mat.define-typography-level(inherit, 1.125, 400),
);

@function blui-light-theme($primary, $accent, $warn) {
    $theme: (
        color: (
            primary: $primary,
            accent: $accent,
            warn: $warn,
        ),
        typography: $typography-config,
        density: 0,
    );

    @return map.deep-merge(
        mat.define-light-theme($theme),
        (
            color: (
                foreground: (
                    text: map-get(blui.$blui-black, 500),
                    disabled: rgba(map-get(blui.$blui-black, 500), 0.3),
                ),
            ),
            foreground: (
                onPrimary: map-get(blui.$blui-white, 50),
                onAccent: map-get(blui.$blui-white, 50),
                onWarn: map-get(blui.$blui-white, 50),
                text: map-get(blui.$blui-black, 500),
                secondary-text: map-get(blui.$blui-gray, 500),
                hint-text: map-get(blui.$blui-gray, 500),
                base: map-get(blui.$blui-darkBlack, 900),
                divider: rgba(map-get(blui.$blui-black, 500), 0.12),
                disabled: rgba(map-get(blui.$blui-black, 500), 0.3),
                icon: rgba(black, 0.54),
                icons: rgba(black, 0.54),
            ),
            background: (
                card: map-get(blui.$blui-white, 50),
                dialog: map-get(blui.$blui-white, 50),
                disabled-button: rgba(114, 126, 132, 0.12),
                disabled-button-toggle: map-get(blui.$blui-gray, 200),
            ),
        )
    );
}

@mixin light-theme($primary, $accent, $warn) {
    $theme: blui-light-theme($primary, $accent, $warn);
    @include sharedConfig();

    @include mat.all-legacy-component-themes($theme);
    @include blui-component-theme.blui-components-theme($theme);
    @include blueTheme.bluetheme($theme);
}

@mixin blue() {
    @include shared();
    @include light-theme($blui-blue-primary, $blui-blue-accent, $blui-blue-warn);
}

$blui-blue-dark-primary: mat.define-palette(blui.$blui-blue);
$blui-blue-dark-accent: mat.define-palette(blui.$blui-lightBlue, 200);
$blui-blue-dark-warn: mat.define-palette(blui.$blui-red, 200);

@function blui-dark-theme($primary, $accent, $warn) {
    $theme: (
        color: (
            primary: $primary,
            accent: $accent,
            warn: $warn,
        ),
        typography: $typography-config,
        density: 0,
    );

    @return map.deep-merge(
        mat.define-dark-theme($theme),
        (
            color: (
                foreground: (
                    text: map-get(blui.$blui-black, 50),
                    disabled: rgba(map-get(blui.$blui-black, 300), 0.3),
                    divider: rgba(map-get(blui.$blui-black, 200), 0.36),
                ),
            ),
            foreground: (
                text: map-get(blui.$blui-black, 50),
                secondary-text: map-get(blui.$blui-black, 200),
                hint-text: map-get(blui.$blui-gray, 300),
                base: map-get(blui.$blui-white, 50),
                divider: rgba(map-get(blui.$blui-black, 200), 0.36),
                disabled: rgba(map-get(blui.$blui-black, 300), 0.36),
                icon: map-get(blui.$blui-black, 50),
                icons: map-get(blui.$blui-black, 50),
            ),
            background: (
                app-bar: map-get(blui.$blui-darkBlack, 100),
                card: map-get(blui.$blui-black, 900),
                dialog: map-get(blui.$blui-black, 900),
                disabled-button: rgba(white, 0.12),
                disabled-button-toggle: black,
            ),
        )
    );
}

@mixin dark-theme($primary, $accent, $warn) {
    $theme: blui-dark-theme($primary, $accent, $warn);
    @include sharedConfig();

    @include mat.all-legacy-component-themes($theme);

    @include blui-component-theme.blui-components-theme($theme);
    @include darkTheme.darktheme($theme);
}

@mixin blueDark() {
    @include shared();
    @include dark-theme($blui-blue-dark-primary, $blui-blue-dark-accent, $blui-blue-dark-warn);
}

@mixin shared() {
    @include mat.legacy-typography-hierarchy($typography-config);
    @include mat.legacy-core();
}