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-12668] refactored typography for themes (#8268)

Browse Source 
* AAE-12668 refactored typography for themes

* AAE-12668 added missing spaces

* AAE-12668 removed parenthesis causing lint error
This commit is contained in:
tomasz hanaj
2023-02-16 01:46:41 +01:00
committed by GitHub
parent 41f135df0f
commit f18fd94085
11 changed files with 53 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo-shell/src/custom-style-dev.scss
View File

@@ -1,6 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../../lib/core/src/lib/styles/index'; @import '../../lib/core/src/lib/styles/index';
@include mat.core($alfresco-typography); @import '../../lib/core/src/lib/styles/typography';
@include mat.core;
$primary: mat.define-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -10,21 +11,24 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );
@include mat.all-component-themes($theme); @include mat.all-component-themes($theme);
@include alfresco-material-theme($theme); @include alfresco-material-theme($theme);
$typography: map-get($theme, typography);
body, body,
html { html {
margin: 0; margin: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: mat.font-size($alfresco-typography, body-1); font-size: mat.font-size($typography, body-1);
font-family: mat.font-family($alfresco-typography); font-family: mat.font-family($typography);
line-height: mat.line-height($alfresco-typography, body-1); line-height: mat.line-height($typography, body-1);
} }
body { body {

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

@@ -4,7 +4,8 @@
/* stylelint-disable scss/no-global-function-names */ /* stylelint-disable scss/no-global-function-names */
/* stylelint-disable scss/at-import-partial-extension */ /* stylelint-disable scss/at-import-partial-extension */
@import './default-class'; @import './default-class';
@import './theming'; @import '../styles/colors';
@import '../styles/mixins';
@import '../form/components/widgets/form.theme'; @import '../form/components/widgets/form.theme';
@import '../clipboard/clipboard.theme'; @import '../clipboard/clipboard.theme';
@import './snackbar.theme'; @import './snackbar.theme';
@@ -21,6 +22,7 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$typography: map-get($theme, typography);
// map SCSS variables to expose as CSS variables // map SCSS variables to expose as CSS variables
$defaults: ( $defaults: (
@@ -81,20 +83,20 @@
--theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip), --theme-unselected-chip-bg-color: mat.get-color-from-palette($background, unselected-chip),
--theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar), --theme-status-bar-bg-color: mat.get-color-from-palette($background, status-bar),
// fonts // fonts
--theme-font-family: mat.font-family($alfresco-typography), --theme-font-family: mat.font-family($typography),
--theme-body-1-font-size: mat.font-size($alfresco-typography, body-1), --theme-body-1-font-size: mat.font-size($typography, body-1),
--theme-body-2-font-size: mat.font-size($alfresco-typography, body-2), --theme-body-2-font-size: mat.font-size($typography, body-2),
--theme-body-1-line-height: mat.line-height($alfresco-typography, body-1), --theme-body-1-line-height: mat.line-height($typography, body-1),
--theme-display-1-font-size: mat.font-size($alfresco-typography, display-1), --theme-display-1-font-size: mat.font-size($typography, display-1),
--theme-display-3-font-size: mat.font-size($alfresco-typography, display-3), --theme-display-3-font-size: mat.font-size($typography, display-3),
--theme-display-4-font-size: mat.font-size($alfresco-typography, display-4), --theme-display-4-font-size: mat.font-size($typography, display-4),
--theme-caption-font-size: mat.font-size($alfresco-typography, caption), --theme-caption-font-size: mat.font-size($typography, caption),
--theme-title-font-size: mat.font-size($alfresco-typography, title), --theme-title-font-size: mat.font-size($typography, title),
--theme-subheading-1-font-size: mat.font-size($alfresco-typography, subheading-1), --theme-subheading-1-font-size: mat.font-size($typography, subheading-1),
--theme-subheading-2-font-size: mat.font-size($alfresco-typography, subheading-2), --theme-subheading-2-font-size: mat.font-size($typography, subheading-2),
--theme-button-font-size: mat.font-size($alfresco-typography, button), --theme-button-font-size: mat.font-size($typography, button),
--theme-headline-font-size: mat.font-size($alfresco-typography, headline), --theme-headline-font-size: mat.font-size($typography, headline),
--theme-headline-line-height: mat.line-height($alfresco-typography, headline), --theme-headline-line-height: mat.line-height($typography, headline),
--theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'), --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-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),

5
lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette($alfresco-ecm-blue); $primary: mat.define-palette($alfresco-ecm-blue);
$accent: mat.define-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900); $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette($alfresco-ecm-cyan); $primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat.define-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette($alfresco-ecm-cyan); $primary: mat.define-palette($alfresco-ecm-cyan);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-green-orange.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette($alfresco-bpm-green); $primary: mat.define-palette($alfresco-bpm-green);
$accent: mat.define-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-orange);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-green-purple.scss
View File

@@ -1,7 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette($alfresco-bpm-green); $primary: mat.define-palette($alfresco-bpm-green);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -11,7 +11,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss
View File

@@ -2,7 +2,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette(mat.$indigo-palette); $primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-light-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss
View File

@@ -2,7 +2,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900); $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400); $accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-dark-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );

5
lib/core/src/lib/styles/prebuilt/adf-purple-green.scss
View File

@@ -2,7 +2,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../theming'; @import '../theming';
@import './all-theme'; @import './all-theme';
@include mat.core($alfresco-typography); @include mat.core;
$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800); $primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
$accent: mat.define-palette(mat.$green-palette, A200, A100, A400); $accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
@@ -12,7 +12,8 @@ $theme: mat.define-dark-theme(
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) ),
typography: $alfresco-typography
) )
); );