mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
128 lines
7.6 KiB
SCSS
128 lines
7.6 KiB
SCSS
/* stylelint-disable value-keyword-case */
|
|
@use '@angular/material' as mat;
|
|
/* stylelint-disable value-list-max-empty-lines */
|
|
/* stylelint-disable scss/no-global-function-names */
|
|
/* stylelint-disable scss/at-import-partial-extension */
|
|
@import './default-class';
|
|
@import './theming';
|
|
@import '../form/components/widgets/form.theme';
|
|
@import '../clipboard/clipboard.theme';
|
|
@import './snackbar.theme';
|
|
@import './material.theme';
|
|
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
|
|
|
|
@mixin alfresco-material-theme($theme) {
|
|
@include adf-core-theme($theme);
|
|
}
|
|
|
|
@mixin adf-core-theme($theme, $custom-css-variables: $adf-custom-theme-sizes) {
|
|
$foreground: map-get($theme, foreground);
|
|
$background: map-get($theme, background);
|
|
$warn: map-get($theme, warn);
|
|
$accent: map-get($theme, accent);
|
|
$primary: map-get($theme, primary);
|
|
|
|
// map SCSS variables to expose as CSS variables
|
|
$defaults: (
|
|
// material colors
|
|
--theme-primary-color: mat.get-color-from-palette($primary),
|
|
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
|
|
--theme-warn-color: mat.get-color-from-palette($warn),
|
|
--theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
|
|
--theme-accent-color: mat.get-color-from-palette($accent),
|
|
--theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
|
|
--theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
|
|
|
|
// component themes
|
|
--adf-snackbar-error-bg-color: mat.get-color-from-palette($warn),
|
|
--adf-snackbar-error-action-color: white,
|
|
--adf-snackbar-warning-bg-color: mat.get-color-from-palette($accent),
|
|
--adf-snackbar-warning-action-color: white,
|
|
--adf-snackbar-info-bg-color: mat.get-color-from-palette($primary),
|
|
--adf-snackbar-info-action-color: white,
|
|
--adf-breadcrumb-item-active-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--adf-breadcrumb-item-active-hover-color: mat.get-color-from-palette($foreground, text, 0.64),
|
|
--adf-node-selector-icon-color: mat.get-color-from-palette($foreground, icon, 0.54),
|
|
--adf-node-selector-base-color: mat.get-color-from-palette($foreground, base, 0.45),
|
|
--adf-node-selector-base-bold-color: mat.get-color-from-palette($foreground, base, 0.65),
|
|
--adf-datatable-cell-link-hover-color: mat.get-color-from-palette($accent, 500),
|
|
--adf-datatable-selected-color: mat.get-color-from-palette($primary, 100),
|
|
--adf-user-info-color: mat.get-color-from-palette($primary, 300),
|
|
--adf-comment-list-primary-color: mat.get-color-from-palette($primary, 100),
|
|
--adf-comment-list-ripple-color: mat.get-color-from-palette($primary, 300),
|
|
--adf-search-input-bg-color: mat.get-color-from-palette($primary, 50),
|
|
--adf-search-input-highlight-color: mat.get-color-from-palette($primary, 900),
|
|
--adf-tooltip-card-color: mat.get-color-from-palette($foreground, text, 0.75),
|
|
--adf-card-view-text-color: mat.get-color-from-palette($foreground, text, 0.25),
|
|
--adf-card-view-label-color: mat.get-color-from-palette($foreground, text, 0.4),
|
|
--adf-card-view-datetime-border-color: mat.get-color-from-palette($foreground, text, 0.42),
|
|
--adf-upload-border-color: mat.get-color-from-palette($foreground, text, 0.14),
|
|
--adf-header-background-color: mat.get-color-from-palette($primary),
|
|
--adf-header-text-color: mat.get-color-from-palette($primary, default-contrast),
|
|
|
|
--theme-hover-bg-color: mat.get-color-from-palette($background, hover),
|
|
--theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
|
|
--theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--theme-background-color: mat.get-color-from-palette($background, background),
|
|
--theme-text-fg-color: mat.get-color-from-palette($foreground, text),
|
|
--theme-text-fg-shadow-color: mat.get-color-from-palette($foreground, text, 0.27),
|
|
--theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
|
|
--theme-card-bg-color: mat.get-color-from-palette($background, card),
|
|
--theme-card-bg-bold-color: mat.get-color-from-palette($background, card, 0.87),
|
|
--theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
|
|
--theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
|
|
--theme-dialog-bg-color: mat.get-color-from-palette($background, dialog),
|
|
--theme-bg-hover-color: mat.get-color-from-palette($background, hover),
|
|
--theme-fg-base-color: mat.get-color-from-palette($foreground, base),
|
|
--theme-fg-divider: mat.get-color-from-palette($foreground, divider),
|
|
--theme-disabled-text-color: mat.get-color-from-palette($foreground, disabled-text),
|
|
--theme-selected-button-bg-color: mat.get-color-from-palette($background, selected-button),
|
|
--theme-icon-fg-color: mat.get-color-from-palette($foreground, icon),
|
|
--theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
|
|
--theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
|
|
// fonts
|
|
--theme-font-family: mat.font-family($alfresco-typography),
|
|
--theme-body-1-font-size: mat.font-size($alfresco-typography, body-1),
|
|
--theme-body-2-font-size: mat.font-size($alfresco-typography, body-2),
|
|
--theme-body-1-line-height: mat.line-height($alfresco-typography, body-1),
|
|
--theme-display-1-font-size: mat.font-size($alfresco-typography, display-1),
|
|
--theme-display-3-font-size: mat.font-size($alfresco-typography, display-3),
|
|
--theme-display-4-font-size: mat.font-size($alfresco-typography, display-4),
|
|
--theme-caption-font-size: mat.font-size($alfresco-typography, caption),
|
|
--theme-title-font-size: mat.font-size($alfresco-typography, title),
|
|
--theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1),
|
|
--theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2),
|
|
--theme-button-font-size: mat.font-size($alfresco-typography, button),
|
|
--theme-headline-font-size: mat.font-size($alfresco-typography, headline),
|
|
--theme-headline-line-height: mat.line-height($alfresco-typography, headline),
|
|
|
|
--theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
|
|
--theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
|
|
--theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
|
|
--theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
|
|
|
|
// specific colors
|
|
--theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
|
|
--theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
|
|
--theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50),
|
|
);
|
|
|
|
// propagates SCSS variables into the CSS variables scope
|
|
:root {
|
|
@each $name, $value in $defaults {
|
|
#{$name}: #{$value};
|
|
}
|
|
}
|
|
|
|
@include mat-datetimepicker-theme($theme);
|
|
@include adf-snackbar-theme;
|
|
@include adf-material-theme;
|
|
}
|
|
|
|
$adf-custom-theme-sizes: (
|
|
'theme-adf-icon-1-font-size': 17px,
|
|
'theme-adf-picture-1-font-size': 18px,
|
|
'theme-adf-task-footer-font-size': 18px,
|
|
'theme-adf-task-title-font-size': 18px
|
|
);
|