mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-05-19 17:14:45 +00:00
0c8b872cd0
* [AAE-18779] Custom theme - cannot update colours according to dynamically generated theme due to hardcoded values * Fix colours part1 * Fix chip colours * Fix column chip colour * Fix sidenav text * Fix sidenav selected text color * Fix colours
97 lines
4.9 KiB
SCSS
97 lines
4.9 KiB
SCSS
/* stylelint-disable scss/no-global-function-names */
|
|
@use '@angular/material' as mat;
|
|
@use 'sass:color';
|
|
|
|
$foreground: map-get($custom-theme, foreground);
|
|
$background: map-get($custom-theme, background);
|
|
$background-color: mat.get-color-from-palette($background, background);
|
|
$background-card-color: mat.get-color-from-palette($background, card);
|
|
$text-color: mat.get-color-from-palette($foreground, text);
|
|
$secondary-text: mat.get-color-from-palette($foreground, secondary-text);
|
|
|
|
// Custom variables - ACA specific styling:
|
|
$data-table-thumbnail-width: 35px;
|
|
$data-table-cell-min-width: 150px;
|
|
$data-table-cell-min-width-no-grow: 120px;
|
|
$data-table-cell-min-width-file-size: 110px;
|
|
|
|
// Upload drag
|
|
$adf-upload-dragging-color: unset;
|
|
$adf-upload-dragging-border: 1px solid #00bcd4;
|
|
$adf-upload-dragging-background: #e0f7fa;
|
|
$adf-upload-dragging-level1-color: unset;
|
|
$adf-upload-dragging-level1-border: none;
|
|
$grey-background: rgba(33, 33, 33, 0.12);
|
|
$grey-text-background: rgba(33, 33, 33, 0.05);
|
|
$grey-hover-background: rgba(33, 33, 33, 0.24);
|
|
$blue-save-button-background: #1f74db;
|
|
$black-heading: #4e4c4c;
|
|
$theme-dropdown-background: darken($background-color, 5%);
|
|
$theme-dropdown-background-hover: darken($background-color, 10%);
|
|
$grey-divider: rgba(0, 0, 0, 0.22);
|
|
$datetimepicker-font-color: rgba(black, 0.87);
|
|
$datetimepicker-selected-date-background: #2254b2;
|
|
$datetimepicker-cell-background-color: #fff;
|
|
$datetimepicker-cell-focus-border-color: #1f74db;
|
|
$sidenav-background-color: $background-color;
|
|
$selected-text-color: #212121;
|
|
$selected-background-color: rgba(31, 116, 219, 0.24);
|
|
$action-button-text-color: lighten($text-color, 35%);
|
|
$page-layout-header-background-color: $background-card-color;
|
|
$search-chip-icon-color: #757575;
|
|
$disabled-chip-background-color: #f5f5f5;
|
|
$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex');
|
|
|
|
// CSS Variables
|
|
$defaults: (
|
|
--theme-background-color: $background-color,
|
|
--theme-search-background-color: darken($background-color, 1),
|
|
--theme-text-color: mat.get-color-from-palette($foreground, text, 0.54),
|
|
--theme-sidenav-text-color: mat.get-color-from-palette($foreground, text),
|
|
--theme-sidenav-user-menu-color: mat.get-color-from-palette($foreground, text),
|
|
--theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--theme-title-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38),
|
|
--theme-border-color: mat.get-color-from-palette($foreground, text, 0.07),
|
|
--theme-card-background-color: mat.get-color-from-palette($background, card),
|
|
--theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72),
|
|
--theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text),
|
|
--theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07),
|
|
--theme-dialog-background-color: mat.get-color-from-palette($background, dialog),
|
|
--theme-header-text-color: mat.get-color-from-palette($foreground, text, 0.87),
|
|
--new-button-font-size: 0.9rem,
|
|
--theme-grey-text-background-color: $grey-text-background,
|
|
--theme-grey-background-color: $grey-background,
|
|
--theme-grey-hover-background-color: $grey-hover-background,
|
|
--theme-blue-button-color: $blue-save-button-background,
|
|
--theme-heading-color: $black-heading,
|
|
--theme-dropdown-color: $theme-dropdown-background,
|
|
--theme-dropdown-background-hover: $theme-dropdown-background-hover,
|
|
--theme-grey-divider-color: $grey-divider,
|
|
--theme-pagination-background-color: mat.get-color-from-palette($background, background),
|
|
--theme-about-panel-border-color: $grey-background,
|
|
--theme-about-panel-background-color: mat.get-color-from-palette($background, card),
|
|
--theme-about-panel-title-color: mat.get-color-from-palette($foreground, text),
|
|
--theme-datetimepicker-font-color: $datetimepicker-font-color,
|
|
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
|
|
--theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
|
|
--theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
|
|
--theme-sidenav-background-color: $sidenav-background-color,
|
|
--theme-selected-text-color: $selected-text-color,
|
|
--theme-selected-background-color: $selected-background-color,
|
|
--theme-hover-background-color: $grey-text-background,
|
|
--theme-action-button-text-color: $action-button-text-color,
|
|
--theme-page-layout-header-background-color: $page-layout-header-background-color,
|
|
--theme-search-chip-icon-color: $search-chip-icon-color,
|
|
--theme-disabled-chip-background-color: $disabled-chip-background-color,
|
|
--theme-secondary-text: $secondary-text
|
|
);
|
|
|
|
// propagates SCSS variables into the CSS variables scope
|
|
:root {
|
|
@each $name, $value in $defaults {
|
|
#{$name}: #{$value};
|
|
}
|
|
}
|