inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34439 Cleanup Styles (#10815)

Browse Source 
* cleanup variables

* cleanup reference variables

* cleanup component variables

* cleanup color schemes

* cleanup color schemes

* mark todos with jira refs [ci:force]
This commit is contained in:
Denys Vuika 2025-04-23 08:41:02 -04:00 committed by GitHub
parent c6652f32b2
commit 9575fe633b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 93 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/README.md
View File

@ -61,7 +61,6 @@ A few other pages of information are also available:
- [Localization in ADF](user-guide/localization.md)
- [Theming](user-guide/theming.md)
- [Transclusion](user-guide/transclusion.md)
- [Typography](user-guide/typography.md)
- [Walkthrough - adding indicators to highlight information about a node](user-guide/metadata-indicators.md)
<!--guide end-->

1
docs/tutorials/README.md
View File

@ -10,7 +10,6 @@ Github only: true
| [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/services/nodes-api.service.md). |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). |

91
docs/tutorials/basic-theming.md
View File

@ -1,91 +0,0 @@
---
Title: Basic theming
Level: Beginner
---
# Basic theming
In this tutorial you will see how to theme an ADF app by modifying the CSS.
As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. The focus of this tutorial is ADF apps built using Yeoman, but you can use the same principles to customize the themes in any ADF application.
## About the `adf-core` theming
As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
- `$alfresco-ecm-cyan`
- `$alfresco-dev-teal`
- `$alfresco-ecm-blue`
- `$alfresco-bpm-green`
- `$alfresco-warn`
- `$alfresco-accent-purple`
- `$alfresco-accent-orange`
Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
## Changing the palette of your application
As an example, let's change the set of palettes for the primary colours. In the `src/custom-style.scss` file, change the `$primary` definition as follows.
$primary: mat-palette($alfresco-ecm-blue);
Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
## Developing your own palette
In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
$my-own-brown: (
50: #f9f2ec,
100: #ecd9c6,
200: #dfbf9f,
300: #d2a679,
400: #c68c53,
500: #ac7339,
600: #86592d,
700: #604020,
800: #392613,
900: #130d06,
A100: #e6ccb3,
A200: #cc9966,
A400: #996633,
A700: #4d3319,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
$primary: mat-palette($my-own-brown);
After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
![theming_palette](../docassets/images/theming_palette.png)

6
docs/tutorials/using-components.md
View File

@ -165,9 +165,3 @@ Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags, we can put anyth
Are you up for a challenge? Explore the [Login component](../core/components/login.component.md)
docs to find out how you can change the logo and background image!
# Next steps
We have some tutorials for you to explore. Here are a few suggested ones to try next:
- [Basic theming](basic-theming.md)

1
docs/user-guide/README.md
View File

@ -20,7 +20,6 @@ on an item below to see the corresponding guide page.
- [Theming](theming.md)
- [Right-to-left language support](rtl-support.md)
- [Transclusion](transclusion.md)
- [Typography](typography.md)
- [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md)
- [kerberos](kerberos.md)

90
docs/user-guide/typography.md
View File

@ -1,90 +0,0 @@
---
Title: Typography
Added: v2.0.0
---
# ADF Typography
Typography configuration lets you change the style of the text in your ADF app.
## Customization
To get started you need to include your custom font in the `/src/index.html` header:
```html
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
```
When adding custom typography, please be aware of angular material version
(there are two different versions of typography levels: 2014 and 2018). Current
version is 14.
After you need to change your `/src/custom-style.scss` to include the new font:
```scss
/*
* Include only packages that you are using (and core by default)
*/
@use '@angular/material' as mat;
@import '~@angular/material/theming';
@import '~ng2-alfresco-core/styles/theming';
@import '~ng2-alfresco-core/styles/index';
@import '~ng2-activiti-analytics/styles/index';
@import '~ng2-activiti-diagrams/styles/index';
@import '~ng2-activiti-form/styles/index';
@import '~ng2-activiti-processlist/styles/index';
@import '~ng2-activiti-tasklist/styles/index';
@import '~ng2-alfresco-datatable/styles/index';
@import '~ng2-alfresco-documentlist/styles/index';
@import '~ng2-alfresco-login/styles/index';
@import '~ng2-alfresco-upload/styles/index';
@import '~ng2-alfresco-userinfo/styles/index';
$custom-typography: mat.define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$display-4: mat.define-typography-level(112px, 112px, 300),
$display-3: mat.define-typography-level(56px, 56px, 400),
$display-2: mat.define-typography-level(45px, 48px, 400),
$display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat.define-typography-level(24px, 32px, 400),
$title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
$input: mat.define-typography-level(16px, 1.25, 400)
);
@include mat.core();
$primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple);
$warn: mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
warn: $warn,
),
typography: $custom-typography
)
);
@include angular-material-theme($theme);
@include alfresco-core-theme($theme);
@include adf-analytics-theme($theme);
@include adf-diagrams-theme($theme);
@include adf-form-theme($theme);
@include adf-processlist-theme($theme);
@include adf-tasklist-theme($theme);
@include alfresco-datatable-theme($theme);
@include alfresco-documentlist-theme($theme);
@include alfresco-login-theme($theme);
@include alfresco-upload-theme($theme);
@include alfresco-userinfo-theme($theme);
```
for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)

10
lib/core/src/lib/about/about-package/package-list.component.scss
View File

@ -1,19 +1,19 @@
.adf-package-list-table {
background: var(--adf-package-list-table-background);
background: var(--adf-theme-background-card-color);
&__header-row {
min-height: var(--adf-package-list-table-header-min-height);
min-height: 56px;
}
&__header-cell {
color: var(--adf-package-list-table-header-cell-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&__row {
min-height: var(--adf-package-list-table-row-min-height);
min-height: 48px;
&-cell {
color: var(--adf-package-list-table-row-cell-color);
color: var(--adf-theme-foreground-text-color);
}
}
}

10
lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss
View File

@ -1,15 +1,15 @@
.adf-about-server-settings {
&__card {
background: var(--adf-about-server-settings-background);
color: var(--adf-about-server-settings-color);
border-radius: var(--adf-about-server-settings-border-radius);
padding: var(--adf-about-server-settings-padding);
background: var(--adf-theme-background-card-color);
color: var(--adf-theme-foreground-text-color);
border-radius: 4px;
padding: 16px;
&:has(p) {
border: none;
p {
margin: 0 0 10px 0;
margin: 0 0 10px;
&:last-child {
margin: 0;

6
lib/core/src/lib/about/about.component.scss
View File

@ -1,9 +1,9 @@
.adf-about-panel {
&-header {
height: var(--adf-about-panel-header-height);
height: 48px;
&__title {
color: var(--adf-about-panel-header-title-color);
color: var(--adf-theme-foreground-text-color);
}
}
}
}

6
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

@ -41,9 +41,9 @@
display: flex;
place-content: center space-between;
align-items: center;
background: var(--adf-card-view-array-item-background);
border-color: var(--adf-card-view-array-item-border-color);
border-radius: var(--adf-card-view-array-item-border-radius);
background: var(--adf-theme-background-card-color);
border-color: var(--adf-theme-foreground-divider-color);
border-radius: 0;
#{$mat-chip}:hover {
cursor: pointer;

6
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@ -1,9 +1,9 @@
@import 'styles/mat-selectors';
.adf-property-list {
border: var(--adf-card-view-border);
border-color: var(--adf-card-view-border-color);
border-radius: var(--adf-card-view-border-radius);
border: unset;
border-color: var(--adf-theme-foreground-divider-color);
border-radius: 0;
.adf-property-label {
color: var(--adf-metadata-property-panel-text-color);

15
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

@ -13,23 +13,24 @@
&-userinfo-name {
padding: 0 5px;
@include layout-bp(lt-md) {
display: none;
}
}
&-userinfo-pic {
background: var(--adf-identity-user-info-background);
background: var(--adf-theme-primary-300);
display: inline-block;
width: var(--adf-identity-user-info-width);
height: var(--adf-identity-user-info-height);
width: 40px;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: var(--adf-identity-user-info-font-size);
font-size: var(--theme-adf-picture-1-font-size);
text-transform: uppercase;
vertical-align: middle;
line-height: var(--adf-identity-user-info-line-height);
line-height: 40px;
}
&-userinfo-profile-container {
@ -74,7 +75,7 @@
}
&-userinfo-profile-picture {
background: var(--adf-identity-user-info-background);
background: var(--adf-theme-primary-300);
background-size: cover;
border-radius: 50%;
height: 80px;
@ -90,7 +91,7 @@
}
}
@media only screen and (min-device-width: 480px) {
@media only screen and (device-width >= 480px) {
.adf-identity-userinfo-menu.adf-userinfo-menu {
max-height: 450px;
min-width: 450px;

22
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@ -70,9 +70,9 @@
}
div[role='tab'].adf-info-drawer-tab {
color: var(--adf-info-drawer-tab-default-color);
background-color: var(--adf-info-drawer-tab-default-background);
border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
color: var(--theme-accent-color);
background-color: var(--adf-theme-background-card-color);
border-bottom: unset;
opacity: 1;
&#{$mat-tab-label} {
@ -84,20 +84,20 @@
}
&--active {
color: var(--adf-info-drawer-tab-active-unfocused-color);
background-color: var(--adf-info-drawer-tab-active-unfocused-background);
border-bottom: 1px solid var(--adf-info-drawer-tab-active-unfocused-bottom-line);
color: var(--theme-primary-color);
background-color: var(--adf-theme-background-card-color);
border-bottom: 1px solid unset;
&:focus {
color: var(--adf-info-drawer-tab-active-focused-color);
border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
color: var(--adf-theme-foreground-text-color);
border-bottom: unset;
}
}
&:hover:not([class*='--disabled'], [class*='--active']) {
color: var(--adf-info-drawer-tab-hover-color);
background-color: var(--adf-info-drawer-tab-hover-background);
border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
color: var(--theme-accent-color);
background-color: var(--adf-theme-background-card-color);
border-bottom: unset;
}
&--disabled {

10
lib/core/src/lib/layout/components/header/header.component.scss
View File

@ -59,15 +59,15 @@ adf-layout-header .adf-toolbar-container-row {
}
.adf-header-icon-button {
color: var(--adf-header-icon-button-default-color);
border-radius: var(--adf-header-icon-button-default-border-radius);
color: inherit;
border-radius: 50%;
&:hover {
color: var(--adf-header-icon-button-hover-color);
color: inherit;
}
&:active {
color: var(--adf-header-icon-button-pressed-color);
color: inherit;
}
}
}
@ -116,7 +116,7 @@ adf-layout-header .adf-toolbar-container-row {
}
.adf-userinfo-container {
margin-right: var(--adf-user-info-container-margin-right);
margin-right: 8px;
}
.adf-userinfo-name {

175
lib/core/src/lib/styles/_colors.scss
View File

@ -2,143 +2,8 @@
// Accent color palette
$black-87-opacity: rgba(black, 0.87);
$white-87-opacity: rgba(white, 0.87);
$black-12-opacity: rgba(black, 0.12);
$white-12-opacity: rgba(white, 0.12);
$black-6-opacity: rgba(black, 0.06);
$white-6-opacity: rgba(white, 0.06);
$alfresco-ecm-cyan: (
50: #e0f7fa,
100: #b2ebf2,
200: #80deea,
300: #4dd0e1,
400: #26c6da,
500: #00bcd4,
600: #00acc1,
700: #0097a7,
800: #00838f,
900: #006064,
A100: #84ffff,
A200: #18ffff,
A400: #00e5ff,
A700: #00b8d4,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: $black-87-opacity,
)
);
$alfresco-dev-teal: (
50: #e0f2f1,
100: #b2dfdb,
200: #80cbc4,
300: #4db6ac,
400: #26a69a,
500: #009688,
600: #00897b,
700: #00796b,
800: #00695c,
900: #004d40,
A100: #a7ffeb,
A200: #64ffda,
A400: #1de9b6,
A700: #00bfa5,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: $black-87-opacity,
)
);
$alfresco-ecm-blue: (
50: #e3f2fd,
100: #bbdefb,
200: #90caf9,
300: #64b5f6,
400: #42a5f5,
500: #2196f3,
600: #1e88e5,
700: #1976d2,
800: #1565c0,
900: #0d47a1,
A100: #82b1ff,
A200: #448aff,
A400: #2979ff,
A700: #2962ff,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
$alfresco-bpm-green: (
50: #f1f8e9,
100: #dcedc8,
200: #c5e1a5,
300: #aed581,
400: #9ccc65,
500: #8bc34a,
600: #7cb342,
700: #689f38,
800: #558b2f,
900: #33691e,
A100: #ccff90,
A200: #b2ff59,
A400: #76ff03,
A700: #64dd17,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: $black-87-opacity,
600: $black-87-opacity,
700: $black-87-opacity,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: $black-87-opacity,
)
);
// [AAE-34457] TODO: move to the alfresco-applications: apps/admin-cc/src/custom-style.scss
$alfresco-warn: (
50: #ffebee,
100: #ffcdd2,
@ -168,43 +33,11 @@ $alfresco-warn: (
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
$alfresco-accent-purple: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
A100: #8c9eff,
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: white,
400: white,
500: $white-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: $white-87-opacity,
A700: white
)
);
// [AAE-34458] TODO: move to HxP: apps/admin-apa/src/custom-style.scss
$alfresco-accent-orange: (
50: #fff3e0,
100: #ffe0b2,
@ -234,7 +67,7 @@ $alfresco-accent-orange: (
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: black,
A700: black
)
);
/* stylelint-enable */

105
lib/core/src/lib/styles/_components-variables.scss
View File

@ -1,105 +0,0 @@
/* stylelint-disable value-list-max-empty-lines */
/* stylelint-disable scss/no-global-function-names */
@use './reference-variables' as *;
@use '@angular/material' as mat;
@mixin adf-components-variables($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$defaults: (
--adf-card-view-background: mat.get-color-from-palette($background, card),
--adf-card-view-border: $adf-ref-card-border,
--adf-card-view-border-color: mat.get-color-from-palette($foreground, divider),
--adf-card-view-border-radius: $adf-ref-card-border-radius-slim,
--adf-card-view-array-item-background: mat.get-color-from-palette($background, card),
--adf-card-view-array-item-border: $adf-ref-card-border,
--adf-card-view-array-item-border-color: mat.get-color-from-palette($foreground, divider),
--adf-card-view-array-item-border-radius: $adf-ref-card-border-radius-slim,
--adf-edit-task-and-service-filter-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-edit-task-and-service-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-task-and-service-filter-header-height: $adf-ref-height-48,
--adf-about-panel-header-height: $adf-ref-height-48,
--adf-about-panel-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-height: $adf-ref-height-48,
--adf-edit-process-filter-header-title-color: mat.get-color-from-palette($foreground, text),
--adf-edit-process-filter-header-description-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-text-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-edit-process-filter-content-select-label-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-about-server-settings-background: mat.get-color-from-palette($background, card),
--adf-about-server-settings-color: mat.get-color-from-palette($foreground, text),
--adf-about-server-settings-border-radius: $adf-ref-card-border-radius-normal,
--adf-about-server-settings-padding: $adf-ref-card-padding,
--adf-package-list-table-background: mat.get-color-from-palette($background, card),
--adf-package-list-table-header-min-height: $adf-ref-table-header-min-height,
--adf-package-list-table-header-cell-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-package-list-table-row-min-height: $adf-ref-table-row-min-height,
--adf-package-list-table-row-cell-color: mat.get-color-from-palette($foreground, text),
--adf-identity-user-info-background: var(--adf-theme-primary-300),
--adf-identity-user-info-height: $adf-ref-height,
--adf-identity-user-info-width: $adf-ref-width,
--adf-identity-user-info-line-height: $adf-ref-line-height,
--adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
--adf-user-info-container-margin-right: $adf-ref-margin-right,
--adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent),
--adf-info-drawer-tab-default-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-default-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-hover-color: mat.get-color-from-palette($accent),
--adf-info-drawer-tab-hover-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-hover-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-active-unfocused-color: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-unfocused-background: mat.get-color-from-palette($background, card),
--adf-info-drawer-tab-active-unfocused-bottom-line: $adf-ref-tab-bottom-line-default,
--adf-info-drawer-tab-active-focused-color: mat.get-color-from-palette($foreground, text),
--adf-info-drawer-tab-active-focused-background: mat.get-color-from-palette($primary),
--adf-info-drawer-tab-active-focused-bottom-line: $adf-ref-tab-bottom-line-active,
--adf-people-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
--adf-people-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
--adf-people-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
--adf-metadata-property-panel-border-color: $adf-ref-metadata-property-panel-border-color,
--adf-metadata-buttons-background-color: $adf-ref-metadata-buttons-background-color,
--adf-metadata-action-button-clear-color: $adf-ref-metadata-action-button-clear-color,
--adf-metadata-property-panel-text-color: $adf-ref-metadata-property-panel-text-color,
--adf-metadata-property-panel-label-color: $adf-ref-metadata-property-panel-label-color,
--adf-metadata-property-panel-title-color: $adf-ref-metadata-property-panel-title-color,
--adf-group-cloud-input-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-label-focus-color: mat.get-color-from-palette($primary),
--adf-group-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text),
--adf-group-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-group-cloud-input-caption-error-color: mat.get-color-from-palette($warn),
--adf-task-assignment-filter-option-default-color: mat.get-color-from-palette($foreground, text),
--adf-task-assignment-filter-option-selected-color: mat.get-color-from-palette($primary),
--adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
--adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card),
--adf-header-icon-button-default-color: $adf-ref-header-icon-color,
--adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius,
--adf-header-icon-button-hover-color: $adf-ref-header-icon-color,
--adf-header-icon-button-pressed-color: $adf-ref-header-icon-color,
--adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
--adf-error-color: $adf-error-color,
--adf-secondary-button-background: $adf-secondary-button-background,
--adf-secondary-modal-text-color: $adf-secondary-modal-text-color,
--adf-disabled-button-background: $adf-disabled-button-background,
--adf-chip-border-color: $adf-chip-border-color,
--adf-sidenav-active-text-color: $adf-sidenav-active-text-color,
--adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
);
// propagates SCSS variables into the CSS variables scope
:root {
@each $name, $value in $defaults {
#{$name}: #{$value};
}
}
}

17
lib/core/src/lib/styles/_index.scss
View File

@ -10,7 +10,6 @@
@import '../clipboard/clipboard.theme';
@import './snackbar.theme';
@import './material.theme';
@import './components-variables';
@import '../../../../../node_modules/@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
@mixin alfresco-material-theme($theme) {
@ -93,7 +92,20 @@
--adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
--adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
// spacing
--adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
--adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing'),
// components
--adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12),
--adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05),
--adf-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698),
--adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7),
--adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24),
--adf-metadata-property-panel-title-color: rgb(33, 33, 33),
--adf-error-color: #ba1b1b,
--adf-secondary-button-background: #2121210d,
--adf-secondary-modal-text-color: #212121,
--adf-disabled-button-background: rgba(0, 0, 0, 0.12),
--adf-chip-border-color: #757575,
--adf-sidenav-active-text-color: rgba(0, 48, 100, 1)
);
// propagates SCSS variables into the CSS variables scope
@ -106,7 +118,6 @@
@include mat-datetimepicker-theme($theme);
@include adf-snackbar-theme;
@include adf-material-theme;
@include adf-components-variables($theme);
}
$adf-custom-theme-sizes: (

33
lib/core/src/lib/styles/_reference-variables.scss
View File

@ -1,33 +0,0 @@
$adf-ref-card-border: unset;
$adf-ref-card-border-radius-slim: 0;
$adf-ref-height-48: 48px;
$adf-ref-card-padding: 16px;
$adf-ref-card-border-radius-normal: 4px;
$adf-ref-table-header-border-style: solid;
$adf-ref-table-header-border-bottom-width: 1px;
$adf-ref-table-header-border-width: 0;
$adf-ref-table-header-min-height: 56px;
$adf-ref-table-row-border-style: solid;
$adf-ref-table-row-border-bottom-width: 1px;
$adf-ref-table-row-border-width: 0;
$adf-ref-table-row-min-height: 48px;
$adf-ref-height: 40px;
$adf-ref-width: 40px;
$adf-ref-line-height: 40px;
$adf-ref-margin-right: 8px;
$adf-ref-tab-bottom-line-default: unset;
$adf-ref-tab-bottom-line-active: unset;
$adf-ref-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
$adf-ref-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
$adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698);
$adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
$adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
$adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33);
$adf-ref-header-icon-color: inherit;
$adf-ref-header-icon-border-radius: 50%;
$adf-error-color: #ba1b1b;
$adf-secondary-button-background: #2121210d;
$adf-secondary-modal-text-color: #212121;
$adf-disabled-button-background: rgba(0, 0, 0, 0.12);
$adf-chip-border-color: #757575;
$adf-sidenav-active-text-color: rgba(0, 48, 100, 1);

2
lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss
View File

@ -7,7 +7,7 @@
}
&-preview {
color: var(--adf-display-external-property-widget-preview-selection-color);
color: var(--adf-theme-foreground-secondary-text-color);
word-break: break-all;
}
}

10
lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
View File

@ -22,24 +22,24 @@
width: 100%;
&-title {
color: var(--adf-group-cloud-input-label-default-color);
color: var(--adf-theme-foreground-secondary-text-color);
&--focus {
color: var(--adf-group-cloud-input-label-focus-color);
color: var(--theme-primary-color);
}
}
&-option-active:not(&:disabled) {
color: var(--adf-group-cloud-autosuggest-result-active-color);
color: var(--adf-theme-foreground-text-color);
}
&-option-not-active:not(&:active) {
background: inherit;
color: var(--adf-group-cloud-autosuggest-result-disabled-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&-error {
color: var(--adf-group-cloud-input-caption-error-color);
color: var(--theme-warn-color);
margin-top: -10px;
position: absolute;
height: 20px;

12
lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss
View File

@ -4,14 +4,14 @@
&-option-not-active:not(&:active) {
background: inherit;
color: var(--adf-group-cloud-autosuggest-result-disabled-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&-title {
color: var(--adf-people-cloud-input-label-default-color);
color: var(--adf-theme-foreground-secondary-text-color);
&--focus {
color: var(--adf-people-cloud-input-label-focus-color);
color: var(--theme-primary-color);
}
}
}
@ -22,11 +22,11 @@
}
&-people-cloud-option-active:not(&:disabled) {
color: var(--adf-people-cloud-autosuggest-result-active-color);
color: var(--adf-theme-foreground-text-color);
}
&-people-cloud-option-not-active:not(&:active) {
color: var(--adf-people-cloud-autosuggest-result-disabled-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&-people-cloud-row {
@ -62,6 +62,6 @@
&-error,
&-error-text,
&-error-icon {
color: var(--adf-people-cloud-input-caption-error-color);
color: var(--theme-warn-color);
}
}

10
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss
View File

@ -62,25 +62,25 @@
&-edit-process-filter {
&-header {
height: var(--adf-edit-process-filter-header-height);
height: 48px;
&__title {
color: var(--adf-edit-process-filter-header-title-color);
color: var(--adf-theme-foreground-text-color);
}
&__description {
color: var(--adf-edit-process-filter-header-description-color);
color: var(--adf-theme-foreground-secondary-text-color);
place-content: center space-between;
}
}
&-content {
&__text-label {
color: var(--adf-edit-process-filter-content-text-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&__select-label {
color: var(--adf-edit-process-filter-content-select-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
}
}

2
lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss
View File

@ -1,3 +1,3 @@
.adf-process-header-cloud-card {
background-color: var(--adf-process-header-cloud-card-background);
background-color: var(--adf-theme-background-card-color);
}

10
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss
View File

@ -72,25 +72,25 @@
&-edit-task-filter {
&-header {
height: var(--adf-edit-task-and-service-filter-header-height);
height: 48px;
&__title {
color: var(--adf-edit-task-and-service-filter-header-title-color);
color: var(--adf-theme-foreground-text-color);
}
&__description {
color: var(--adf-edit-task-and-service-filter-header-description-color);
color: var(--adf-theme-foreground-secondary-text-color);
place-content: center space-between;
}
}
&-content {
&__text-label {
color: var(--adf-edit-task-and-service-filter-content-text-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&__select-label {
color: var(--adf-edit-task-and-service-filter-content-select-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
}
}

10
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss
View File

@ -72,25 +72,25 @@
&-edit-task-filter {
&-header {
height: var(--adf-edit-task-and-service-filter-header-height);
height: 48px;
&__title {
color: var(--adf-edit-task-and-service-filter-header-title-color);
color: var(--adf-theme-foreground-text-color);
}
&__description {
color: var(--adf-edit-task-and-service-filter-header-description-color);
color: var(--adf-theme-foreground-secondary-text-color);
place-content: center space-between;
}
}
&-content {
&__text-label {
color: var(--adf-edit-task-and-service-filter-content-text-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
&__select-label {
color: var(--adf-edit-task-and-service-filter-content-select-label-color);
color: var(--adf-theme-foreground-secondary-text-color);
}
}
}

8
lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss
View File

@ -11,18 +11,18 @@
}
&-label {
color: var(--adf-task-assignment-filter-label-default-color);
color: var(--adf-theme-foreground-secondary-text-color);
&.adf-task-assignment-filter-label--focus {
color: var(--adf-task-assignment-filter-label-focus-color);
color: var(--theme-primary-color);
}
}
&-option {
color: var(--adf-task-assignment-filter-option-default-color);
color: var(--adf-theme-foreground-text-color);
&.adf-task-assignment-filter-option--selected:not(&:disabled) {
color: var(--adf-task-assignment-filter-option-selected-color);
color: var(--theme-primary-color);
}
}
}