diff --git a/docs/README.md b/docs/README.md index 47f1556eca..3abe069214 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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) diff --git a/docs/tutorials/README.md b/docs/tutorials/README.md index 7fa9420239..6771112628 100644 --- a/docs/tutorials/README.md +++ b/docs/tutorials/README.md @@ -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). | diff --git a/docs/tutorials/basic-theming.md b/docs/tutorials/basic-theming.md deleted file mode 100644 index 2be8b6982a..0000000000 --- a/docs/tutorials/basic-theming.md +++ /dev/null @@ -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) diff --git a/docs/tutorials/using-components.md b/docs/tutorials/using-components.md index bd333ffa6d..1e3861c28b 100644 --- a/docs/tutorials/using-components.md +++ b/docs/tutorials/using-components.md @@ -165,9 +165,3 @@ Inside the `` or `` 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) diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md index 736405cbc6..7805093a52 100644 --- a/docs/user-guide/README.md +++ b/docs/user-guide/README.md @@ -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) diff --git a/docs/user-guide/typography.md b/docs/user-guide/typography.md deleted file mode 100644 index 0cac3e5daf..0000000000 --- a/docs/user-guide/typography.md +++ /dev/null @@ -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 - -``` -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) diff --git a/lib/core/src/lib/about/about-package/package-list.component.scss b/lib/core/src/lib/about/about-package/package-list.component.scss index 5e739f1428..abe972c35a 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.scss +++ b/lib/core/src/lib/about/about-package/package-list.component.scss @@ -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); } } } diff --git a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss index 8094fbd027..5325c92e53 100644 --- a/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss +++ b/lib/core/src/lib/about/about-server-settings/about-server-settings.component.scss @@ -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; diff --git a/lib/core/src/lib/about/about.component.scss b/lib/core/src/lib/about/about.component.scss index 6ca79cee1a..010ba03a80 100644 --- a/lib/core/src/lib/about/about.component.scss +++ b/lib/core/src/lib/about/about.component.scss @@ -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); } } -} \ No newline at end of file +} diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss index f4ba739161..897383ae5e 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss @@ -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; diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index cb5bac29f9..6ef101419b 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -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); diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss index c161ae8c31..374bf1d080 100644 --- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss +++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss @@ -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; diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss index 5baab4dea2..896259c018 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss @@ -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 { diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index 19a4aecdb1..52637ea1d9 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/lib/core/src/lib/layout/components/header/header.component.scss @@ -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 { diff --git a/lib/core/src/lib/styles/_colors.scss b/lib/core/src/lib/styles/_colors.scss index 6e754a765d..21d0a81d77 100644 --- a/lib/core/src/lib/styles/_colors.scss +++ b/lib/core/src/lib/styles/_colors.scss @@ -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 */ diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss deleted file mode 100644 index ad745d9463..0000000000 --- a/lib/core/src/lib/styles/_components-variables.scss +++ /dev/null @@ -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}; - } - } -} diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss index 6de24f16d6..3519ab8b38 100644 --- a/lib/core/src/lib/styles/_index.scss +++ b/lib/core/src/lib/styles/_index.scss @@ -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: ( diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss deleted file mode 100644 index 13f12f5b9b..0000000000 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ /dev/null @@ -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); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss index b44e29e68a..8b610f1403 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss @@ -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; } } diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss index 3d81eff948..4710c073cc 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss @@ -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; diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss index 412924eb00..7386c4d3d2 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss @@ -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); } } diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss index 4d10f5dc51..17c9d6df09 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss @@ -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); } } } diff --git a/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss index aa71b83309..8d19bed614 100644 --- a/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.scss @@ -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); } diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss index 012b777547..0e7ed4d1b1 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss @@ -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); } } } diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss index 012b777547..0e7ed4d1b1 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss @@ -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); } } } diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss index 9df37c187c..2739c9a91c 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss @@ -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); } } }