mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
AAE-38524 remove adf-core-theme (#11235)
* AAE-38524 Remove theming and unused stylesheets * AAE-38524 Update the documentation * AAE-38524 Change import forwarding * AAE-38524 Rename globals mixin * AAE-38524 Apply docs suggestions
This commit is contained in:
Wojciech Duda
@@ -1,6 +1,6 @@
|
||||
@use './mat-selectors' as ms;
|
||||
|
||||
@mixin adf-material-theme() {
|
||||
@mixin globals() {
|
||||
#{ms.$mat-expansion-panel} {
|
||||
& #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused,
|
||||
& #{ms.$mat-expansion-panel-header}.cdk-program-focused,
|
||||
@@ -1,126 +1,4 @@
|
||||
/* stylelint-disable value-keyword-case */
|
||||
@use '@angular/material' as mat;
|
||||
@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
|
||||
/* stylelint-disable value-list-max-empty-lines */
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
/* stylelint-disable scss/at-import-partial-extension */
|
||||
@import './mixins';
|
||||
@import './mat-selectors';
|
||||
@import '../form/components/widgets/form.theme';
|
||||
@import '../clipboard/clipboard.theme';
|
||||
@import './material.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);
|
||||
$typography: map-get($theme, typography);
|
||||
|
||||
// map SCSS variables to expose as CSS variables
|
||||
$defaults: (
|
||||
// theme colors
|
||||
--theme-primary-color: mat.m2-get-color-from-palette($primary),
|
||||
--theme-primary-color-default-contrast: mat.m2-get-color-from-palette($primary, default-contrast),
|
||||
--theme-header-text-color: mat.m2-get-color-from-palette($primary, default-contrast),
|
||||
--adf-theme-primary-50: mat.m2-get-color-from-palette($primary, 50),
|
||||
--adf-theme-primary-100: mat.m2-get-color-from-palette($primary, 100),
|
||||
--adf-theme-primary-300: mat.m2-get-color-from-palette($primary, 300),
|
||||
--adf-theme-primary-900: mat.m2-get-color-from-palette($primary, 900),
|
||||
--theme-warn-color: mat.m2-get-color-from-palette($warn),
|
||||
--theme-warn-color-a700: mat.m2-get-color-from-palette($warn, A700),
|
||||
--theme-warn-color-default-contrast: mat.m2-get-color-from-palette($warn, default-contrast),
|
||||
--theme-accent-color: mat.m2-get-color-from-palette($accent),
|
||||
--theme-accent-color-a200: mat.m2-get-color-from-palette($accent, A200),
|
||||
--theme-accent-color-default-contrast: mat.m2-get-color-from-palette($accent, default-contrast),
|
||||
--theme-accent-500: mat.m2-get-color-from-palette($accent, 500),
|
||||
--adf-theme-foreground-base-color: mat.m2-get-color-from-palette($foreground, base),
|
||||
--adf-theme-foreground-base-color-065: mat.m2-get-color-from-palette($foreground, base, 0.65),
|
||||
--adf-theme-foreground-base-color-045: mat.m2-get-color-from-palette($foreground, base, 0.45),
|
||||
--adf-theme-foreground-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-text),
|
||||
--adf-theme-foreground-divider-color: mat.m2-get-color-from-palette($foreground, divider),
|
||||
--adf-theme-foreground-icon-color: mat.m2-get-color-from-palette($foreground, icon),
|
||||
--adf-theme-foreground-icon-color-054: mat.m2-get-color-from-palette($foreground, icon, 0.54),
|
||||
--adf-theme-foreground-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
|
||||
--adf-theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text),
|
||||
--adf-theme-foreground-text-color-087: mat.m2-get-color-from-palette($foreground, text, 0.87),
|
||||
--adf-theme-foreground-text-color-075: mat.m2-get-color-from-palette($foreground, text, 0.75),
|
||||
--adf-theme-foreground-text-color-064: mat.m2-get-color-from-palette($foreground, text, 0.64),
|
||||
--adf-theme-foreground-text-color-054: mat.m2-get-color-from-palette($foreground, text, 0.54),
|
||||
--adf-theme-foreground-text-color-040: mat.m2-get-color-from-palette($foreground, text, 0.4),
|
||||
--adf-theme-foreground-text-color-027: mat.m2-get-color-from-palette($foreground, text, 0.27),
|
||||
--adf-theme-foreground-text-color-025: mat.m2-get-color-from-palette($foreground, text, 0.25),
|
||||
--adf-theme-foreground-text-color-014: mat.m2-get-color-from-palette($foreground, text, 0.14),
|
||||
--adf-theme-foreground-text-color-007: mat.m2-get-color-from-palette($foreground, text, 0.07),
|
||||
--adf-theme-background-card-color: mat.m2-get-color-from-palette($background, card),
|
||||
--adf-theme-background-card-color-087: mat.m2-get-color-from-palette($background, card, 0.87),
|
||||
--theme-background-color: mat.m2-get-color-from-palette($background, background),
|
||||
--adf-theme-background-dialog-color: mat.m2-get-color-from-palette($background, dialog),
|
||||
--adf-theme-background-hover-color: mat.m2-get-color-from-palette($background, hover),
|
||||
--adf-theme-background-selected-button-color: mat.m2-get-color-from-palette($background, selected-button),
|
||||
--adf-theme-background-status-bar-color: mat.m2-get-color-from-palette($background, status-bar),
|
||||
--adf-theme-background-unselected-chip-color: mat.m2-get-color-from-palette($background, unselected-chip),
|
||||
// typography
|
||||
--theme-font-family: mat.m2-font-family($typography),
|
||||
--theme-font-weight: normal,
|
||||
--theme-body-1-font-size: mat.m2-font-size($typography, body-2),
|
||||
--theme-body-2-font-size: mat.m2-font-size($typography, subtitle-2),
|
||||
--theme-body-1-line-height: mat.m2-line-height($typography, body-2),
|
||||
--theme-display-1-font-size: mat.m2-font-size($typography, headline-4),
|
||||
--theme-display-3-font-size: mat.m2-font-size($typography, headline-2),
|
||||
--theme-display-4-font-size: mat.m2-font-size($typography, headline-1),
|
||||
--theme-caption-font-size: mat.m2-font-size($typography, caption),
|
||||
--theme-title-font-size: mat.m2-font-size($typography, headline-6),
|
||||
--theme-subheading-1-font-size: mat.m2-font-size($typography, body-1),
|
||||
--theme-subheading-2-font-size: mat.m2-font-size($typography, subtitle-1),
|
||||
--theme-button-font-size: mat.m2-font-size($typography, button),
|
||||
--theme-headline-font-size: mat.m2-font-size($typography, headline-5),
|
||||
--theme-headline-line-height: mat.m2-line-height($typography, headline-5),
|
||||
--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
|
||||
--adf-theme-mat-grey-color-a200: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A200'),
|
||||
--adf-theme-mat-grey-color-a400: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 'A400'),
|
||||
--adf-theme-mat-grey-color-50: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 50),
|
||||
// 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
|
||||
:root {
|
||||
@each $name, $value in $defaults {
|
||||
#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@include datetimepicker-theme.mat-datetimepicker-theme($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,
|
||||
'theme-adf-spacing': 16px
|
||||
);
|
||||
@forward './globals';
|
||||
@forward './flex';
|
||||
@forward './mixins';
|
||||
@forward './mat-selectors';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@import './mixins';
|
||||
@import './typography';
|
||||
@import './mat-selectors';
|
||||
@@ -1,18 +0,0 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
$alfresco-typography: mat.m2-define-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$headline-1: mat.m2-define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.m2-define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.m2-define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.m2-define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.m2-define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.m2-define-typography-level(20px, 32px, 500),
|
||||
$subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.m2-define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.m2-define-typography-level(12px, 20px, 400),
|
||||
$button: mat.m2-define-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
);
|
||||
Reference in New Issue
Block a user