inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15295] added design tokens to PeopleCloudComponent (#9162)

Browse Source
This commit is contained in:
Wojciech Duda
2023-12-18 14:47:15 +01:00
committed by GitHub
parent 269dcf1cf1
commit 0191860950
4 changed files with 67 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,45 +4,48 @@
@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: $adf-ref-card-background,
--adf-card-view-background: mat.get-color-from-palette($background, card),
--adf-card-view-border: $adf-ref-card-border,
--adf-card-view-border-color: $adf-ref-card-border-color,
--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: $adf-ref-card-background,
--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: $adf-ref-card-border-color,
--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: $adf-ref-title-color,
--adf-edit-task-and-service-filter-header-description-color: $adf-ref-description-color,
--adf-edit-task-and-service-filter-content-text-label-color: $adf-ref-text-field-label-color,
--adf-edit-task-and-service-filter-content-select-label-color: $adf-ref-select-field-label-color,
--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: $adf-ref-title-color,
--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: $adf-ref-title-color,
--adf-edit-process-filter-header-description-color: $adf-ref-description-color,
--adf-edit-process-filter-content-text-label-color: $adf-ref-text-field-label-color,
--adf-edit-process-filter-content-select-label-color: $adf-ref-select-field-label-color,
--adf-about-server-settings-background: $adf-ref-card-background,
--adf-about-server-settings-color: $adf-ref-card-color,
--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: $adf-ref-table-background,
--adf-package-list-table-header-border-bottom-color: $adf-ref-table-header-border-bottom-color,
--adf-package-list-table-background: mat.get-color-from-palette($background, card),
--adf-package-list-table-header-border-bottom-color: mat.get-color-from-palette($foreground, divider),
--adf-package-list-table-header-border-style: $adf-ref-table-header-border-style,
--adf-package-list-table-header-border-bottom-width: $adf-ref-table-header-border-bottom-width,
--adf-package-list-table-header-border-width: $adf-ref-table-header-border-width,
--adf-package-list-table-header-min-height: $adf-ref-table-header-min-height,
--adf-package-list-table-header-cell-color: $adf-ref-table-header-cell-color,
--adf-package-list-table-row-border-bottom-color: $adf-ref-table-row-border-bottom-color,
--adf-package-list-table-header-cell-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-package-list-table-row-border-bottom-color: mat.get-color-from-palette($foreground, dividers),
--adf-package-list-table-row-border-style: $adf-ref-table-row-border-style,
--adf-package-list-table-row-border-bottom-width: $adf-ref-table-row-border-bottom-width,
--adf-package-list-table-row-border-width: $adf-ref-table-row-border-width,
--adf-package-list-table-row-min-height: $adf-ref-table-row-min-height,
--adf-package-list-table-row-cell-color: $adf-ref-table-row-cell-color,
--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,
@@ -51,17 +54,24 @@
--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:unset,
--adf-info-drawer-tab-default-bottom-line:unset,
--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:unset,
--adf-info-drawer-tab-hover-bottom-line:unset,
--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:unset,
--adf-info-drawer-tab-active-unfocused-bottom-line:unset,
--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-color:unset,
--adf-info-drawer-tab-active-focused-bottom-line:unset,
--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)
);
// propagates SCSS variables into the CSS variables scope

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

@@ -1,29 +1,19 @@
$adf-ref-card-background: white;
$adf-ref-card-border: unset;
$adf-ref-card-border-color: unset;
$adf-ref-card-border-radius-slim: 0;
$adf-ref-height-48: 48px;
$adf-ref-title-color: rgba(0, 0, 0, 0.87);
$adf-ref-description-color: rgba(0, 0, 0, 0.54);
$adf-ref-text-field-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-select-field-label-color: rgba(0, 0, 0, 0.54);
$adf-ref-card-color: rgba(0, 0, 0, 0.87);
$adf-ref-card-padding: 16px;
$adf-ref-card-border-radius-normal: 4px;
$adf-ref-table-background: white;
$adf-ref-table-header-border-bottom-color: rgba(0, 0, 0, 0.12);
$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-header-cell-color: rgba(0, 0, 0, 0.54);
$adf-ref-table-row-border-bottom-color: rgba(0, 0, 0, 0.12);
$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-table-row-cell-color: rgba(0, 0, 0, 0.87);
$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;