Skip to content

Commit

Permalink
feat(custom-properties): Adding custom props for font family, using t…
Browse files Browse the repository at this point in the history 
…hem in the components - FRONT-4490 (#3460)
  • Loading branch information
@planctus
planctus authored Jul 3, 2024
1 parent 37f478f commit 4bbb55a
Show file tree
Hide file tree
Showing 17 changed files with 26 additions and 18 deletions.
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/banner/banner-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ $banner-print: null !default;
.ecl-banner__title {
font: map.get($theme, 'font-print', '4xl');
font-weight: map.get($theme, 'font-weight', 'bold');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
margin-bottom: 0;
}

Expand Down
6 changes: 3 additions & 3 deletions src/implementations/vanilla/components/date-block/date-block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ $date-block: null !default;

.ecl-date-block__day {
color: map.get($date-block, 'text-color-inverted');
font-family: map.get($theme, 'font-family', 'default');
font-family: var(--ff-d);
font-size: map.get($date-block, 'day', 'font-size');
font-weight: map.get($theme, 'font-weight', 'bold');
line-height: map.get($date-block, 'day', 'line-height');
Expand All @@ -71,7 +71,7 @@ $date-block: null !default;

.ecl-date-block__month {
color: map.get($date-block, 'text-color-inverted');
font-family: map.get($theme, 'font-family', 'default');
font-family: var(--ff-d);
font-size: map.get($date-block, 'month', 'font-size');
line-height: map.get($date-block, 'month', 'line-height');
padding: map.get($date-block, 'month', 'padding');
Expand All @@ -83,7 +83,7 @@ $date-block: null !default;
.ecl-date-block__year {
background-color: map.get($date-block, 'year', 'background-color');
color: map.get($date-block, 'year', 'text-color');
font-family: map.get($theme, 'font-family', 'default');
font-family: var(--ff-d);
font-size: map.get($date-block, 'year', 'font-size');
font-weight: map.get($date-block, 'year', 'font-weight');
line-height: map.get($date-block, 'year', 'line-height');
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/expandable/expandable-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,5 @@ $theme: null !default;

.ecl-expandable__content {
display: block;
font-family: #{map.get($theme, 'font-family-print', 'default')};
font-family: var(--ecl-font-family-print-default);
}
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/expandable/expandable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $expandable: null !default;

.ecl-expandable__content {
color: map.get($expandable, 'content-color');
font-family: #{map.get($theme, 'font-family', 'default')};
font-family: var(--ff-d);
margin-top: map.get($expandable, 'content-margin');
padding-inline-start: map.get($expandable, 'content-padding');

Expand Down
4 changes: 2 additions & 2 deletions src/implementations/vanilla/components/fact-figures/fact-figures-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ $fact-figures: null !default;

.ecl-fact-figures__value {
font: map.get($theme, 'font-print', '4xl');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
font-weight: map.get($theme, 'font-weight', 'bold');
}

.ecl-fact-figures__title {
clear: left;
font: map.get($theme, 'font-prolonged-print', 'l');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
font-weight: map.get($theme, 'font-weight', 'bold');
margin-top: map.get($theme, 'spacing-print', 'xs');
}
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/file/file-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ $_image-width: 13.125rem;
.ecl-file__title {
color: map.get($theme, 'color', 'black');
font: map.get($theme, 'font-print', 'm');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
font-weight: map.get($theme, 'font-weight-print', 'bold');
margin-bottom: map.get($theme, 'spacing-print', 's');
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/link/link-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $link: null !default;
}

.ecl-link--standalone {
font-family: #{map.get($theme, 'font-family-print', 'default')};
font-family: var(--ecl-font-family-print-default);
display: inline-block;
line-height: map.get($link, 'standalone-line-height');
}
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/link/link.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $min-width: 44px; // According to COMM every interactive element should be at le
.ecl-link,
%ecl-link {
color: map.get($link, 'color');
font-family: #{map.get($theme, 'font-family', 'default')};
font-family: var(--ff-d);
margin: 0;
text-decoration: underline;

Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/menu/menu-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $theme: null !default;

.ecl-menu__site-name {
font: map.get($theme, 'font-print', '3xl');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
font-weight: map.get($theme, 'font-weight-print', 'bold');
margin-top: map.get($theme, 'spacing-print', 'xs');
}
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/ordered-list/ordered-list-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $list: null !default;
.ecl-ordered-list,
%ecl-ordered-list {
color: map.get($list, 'text-color');
font-family: map.get($theme, 'font-family-print', 'default');
font-family: var(--ecl-font-family-print-default);
list-style-position: inside;
margin: 0;
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/page-header/page-header-print-eu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ $page-header-print: null !default;
.ecl-page-header__title {
color: map.get($page-header, 'title-color');
font: map.get($page-header, 'title-font');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
margin-bottom: 0;
margin-top: map.get($theme, 'spacing-print', 'm');
}
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/site-header/site-header-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $theme: null !default;

.ecl-site-header__banner {
font: map.get($theme, 'font-print', '3xl');
font-family: #{map.get($theme, 'font-family-print', 'alt')};
font-family: var(--ecl-font-family-print-alt);
font-weight: map.get($theme, 'font-weight-print', 'bold');
margin-top: map.get($theme, 'spacing-print', 'xs');
}
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/unordered-list/unordered-list-print.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $list: null !default;
.ecl-unordered-list,
%ecl-unordered-list {
color: map.get($list, 'text-color');
font-family: map.get($theme, 'font-family-print', 'default');
font-family: var(--ecl-font-family-print-default);
list-style-position: inside;
margin: 0;
padding: 0;
Expand Down
4 changes: 4 additions & 0 deletions src/themes/ec/_custom-properties.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@
--ecl-color-accent-80: #{map.get($color, 'accent-80')};
--ecl-color-accent-60: #{map.get($color, 'accent-60')};
--ecl-color-accent-40: #{map.get($color, 'accent-40')};
--ecl-font-family-default: #{map.get($font-family, 'default')};
--ecl-font-family-print-default: #{map.get($font-family-print, 'default')};
--ecl-font-family-print-alt: #{map.get($font-family-print, 'alt')};
--ecl-font-xs: #{map.get($font, 'xs')};
--ecl-font-s: #{map.get($font, 's')};
--ecl-font-m: #{map.get($font, 'm')};
Expand Down Expand Up @@ -132,6 +135,7 @@
--c-a-80: var(--ecl-color-accent-80);
--c-a-60: var(--ecl-color-accent-60);
--c-a-40: var(--ecl-color-accent-40);
--ff-d: var(--ecl-font-family-default);
--f-xs: var(--ecl-font-xs);
--f-s: var(--ecl-font-s);
--f-m: var(--ecl-font-m);
Expand Down
2 changes: 1 addition & 1 deletion src/themes/ec/variables/_description-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $description-list: (
);
$description-list-print: (
definition-font: map.get($font-print, 'm'),
term-font-family: map.get($font-family-print, 'default'),
term-font-family: var(--ecl-font-family-print-default),
term-width: 32%,
definition-width: 68%,
);
4 changes: 4 additions & 0 deletions src/themes/eu/_custom-properties.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@
--ecl-color-accent-30: #{map.get($color, 'accent-30')};
--ecl-color-overlay-light: color-mix(in srgb, var(--c-d) 70%, transparent);
--ecl-color-overlay-dark: color-mix(in srgb, var(--c-d) 90%, transparent);
--ecl-font-family-default: #{map.get($font-family, 'default')};
--ecl-font-family-print-default: #{map.get($font-family-print, 'default')};
--ecl-font-family-print-alt: #{map.get($font-family-print, 'alt')};
--ecl-font-xs: #{map.get($font, 'xs')};
--ecl-font-s: #{map.get($font, 's')};
--ecl-font-m: #{map.get($font, 'm')};
Expand Down Expand Up @@ -131,6 +134,7 @@
--c-a-30: var(--ecl-color-accent-30);
--c-ov-l: var(--ecl-color-overlay-light);
--c-ov-d: var(--ecl-color-overlay-dark);
--ff-d: var(--ecl-font-family-default);
--f-xs: var(--ecl-font-xs);
--f-s: var(--ecl-font-s);
--f-m: var(--ecl-font-m);
Expand Down
2 changes: 1 addition & 1 deletion src/themes/eu/variables/_description-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $description-list: (
);
$description-list-print: (
definition-font: map.get($font-prolonged-print, 'm'),
term-font-family: map.get($font-family-print, 'default'),
term-font-family: var(--ecl-font-family-print-default),
term-width: 32%,
definition-width: 68%,
);

1 comment on commit 4bbb55a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.