Merge branch 'typography' into 'main'
Typography See merge request cellule-financiere-pmo/design-system/visua!1
This commit is contained in:
Paul Valerie GOMA
commit
f992b8f953
0
CHANGELOG.md
Normal file
0
CHANGELOG.md
Normal file
241
output/typography.css
Normal file
241
output/typography.css
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
.alternative-body-text-LG-article-text-Regular {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-LG-article-text-Bold {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-MD-article-text-Regular {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-MD-article-text-Bold {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-SM-article-text-Regular {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-SM-article-text-Bold {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.alternative-body-text-XS-article-text-Regular {
|
||||
font-family: georgia, sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.alternative-titles-XL {
|
||||
font-size: 5rem;
|
||||
font-weight: 600;
|
||||
line-height: 5.5rem;
|
||||
}
|
||||
|
||||
.alternative-titles-LG {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
.alternative-titles-MD {
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
|
||||
.alternative-titles-SM {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.alternative-titles-XS {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
line-height: 3.5rem;
|
||||
}
|
||||
|
||||
.text-body-XL-chapo-Regular {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-body-XL-chapo-Bold {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-body-LG-article-text-Regular {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-body-LG-article-text-Medium {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-body-LG-article-text-Bold {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-body-MD-standard-text-Regular {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-MD-standard-text-Medium {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-MD-standard-text-Bold {
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-MD-standard-text-Italic {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-SM-detail-text-Regular {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-SM-detail-text-Medium {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-SM-detail-text-Bold {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-SM-detail-text-Italic {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.text-body-SM-detail-text-Maj {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Regular {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Medium {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Bold {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Italic {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Maj {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-body-XS-mention-text-Underlined {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.titles-H1-XL {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.titles-H2-LG {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.titles-H3-MD {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.titles-H4-SM {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.titles-H5-XS {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.titles-H6-XXS {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=typography.css.map */
|
||||
1
output/typography.css.map
Normal file
1
output/typography.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../src/functions/_mixins.scss","../src/tokens/typography/_alternative-body-text.scss","../src/tokens/typography/_alternative-titles.scss","../src/tokens/typography/_text-body.scss","../src/tokens/typography/_titles.scss"],"names":[],"mappings":"AAgBI;EAGY,aCdU;EDgBV,WChBU;EDkBV,aClBU;EDoBV,aCpBU;;;ADWtB;EAGY,aCPO;EDSP,WCTO;EDWP,aCXO;EDaP,aCbO;;;ADInB;EAGY;EAEA,WCFU;EDIV,aCJU;EDMV,aCNU;;;ADHtB;EAGY,aCOO;EDLP,WCKO;EDHP,aCGO;EDDP,aCCO;;;ADVnB;EAGY,aCcU;EDZV,WCYU;EDVV,aCUU;EDRV,aCQU;;;ADjBtB;EAGY,aCqBO;EDnBP,WCmBO;EDjBP,aCiBO;EDfP,aCeO;;;ADxBnB;EAGY,aC4BU;ED1BV,WC0BU;EDxBV,aCwBU;EDtBV,aCsBU;;;AD/BtB;EAKY,WEjBX;EFmBW,aEnBX;EFqBW,aErBX;;;AFYD;EAKY,WEXX;EFaW,aEbX;EFeW,aEfX;;;AFMD;EAKY,WELX;EFOW,aEPX;EFSW,aETX;;;AFAD;EAKY,WECX;EFCW,aEDX;EFGW,aEHX;;;AFND;EAKY,WEOX;EFLW,aEKX;EFHW,aEGX;;;AFZD;EAKY,WGjBE;EHmBF,aGnBE;EHqBF,aGrBE;;;AHYd;EAKY,WGXD;EHaC,aGbD;EHeC,aGfD;;;AHMX;EAKY,WGLU;EHOV,aGPU;EHSV,aGTU;;;AHAtB;EAKY,WGCS;EHCT,aGDS;EHGT,aGHS;;;AHNrB;EAKY,WGOO;EHLP,aGKO;EHHP,aGGO;;;AHZnB;EAKY,WGaW;EHXX,aGWW;EHTX,aGSW;;;AHlBvB;EAKY,WGmBU;EHjBV,aGiBU;EHfV,aGeU;;;AHxBtB;EAKY,WGyBQ;EHvBR,aGuBQ;EHrBR,aGqBQ;;;AH9BpB;EAKY,WG+BU;EH7BV,aG6BU;EHzBV,YGyBU;EH3BV,aG2BU;;;AHpCtB;EAKY,WGsCS;EHpCT,aGoCS;EHlCT,aGkCS;;;AH3CrB;EAKY,WG4CQ;EH1CR,aG0CQ;EHxCR,aGwCQ;;;AHjDpB;EAKY,WGkDM;EHhDN,aGgDM;EH9CN,aG8CM;;;AHvDlB;EAKY,WGwDQ;EHtDR,aGsDQ;EHlDR,YGkDQ;EHpDR,aGoDQ;;;AH7DpB;EAKY,WG+DK;EH7DL,aG6DK;EH3DL,aG2DK;EHvDL,gBGuDK;;;AHpEjB;EAKY,WGsEU;EHpEV,aGoEU;EHlEV,aGkEU;;;AH3EtB;EAKY,WG4ES;EH1ET,aG0ES;EHxET,aGwES;;;AHjFrB;EAKY,WGkFO;EHhFP,aGgFO;EH9EP,aG8EO;;;AHvFnB;EAKY,WGwFS;EHtFT,aGsFS;EHlFT,YGkFS;EHpFT,aGoFS;;;AH7FrB;EAKY,WG+FM;EH7FN,aG6FM;EH3FN,aG2FM;;;AHpGlB;EAKY,WGqGa;EHnGb,aGmGa;EHjGb,aGiGa;EH3Fb,iBG2Fa;;;AH1GzB;EAKY,WIjBR;EJmBQ,aInBR;EJqBQ,aIrBR;;;AJYJ;EAKY,WIXR;EJaQ,aIbR;EJeQ,aIfR;;;AJMJ;EAKY,WILR;EJOQ,aIPR;EJSQ,aITR;;;AJAJ;EAKY,WICR;EJCQ,aIDR;EJGQ,aIHR;;;AJNJ;EAKY,WIOR;EJLQ,aIKR;EJHQ,aIGR;;;AJZJ;EAKY,WIaP;EJXO,aIWP;EJTO,aISP","file":"typography.css"}
|
||||
44
src/_typography.scss
Normal file
44
src/_typography.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@use '../src/functions/mixins';
|
||||
@use '../src/tokens/typography/alternative-body-text';
|
||||
@use '../src/tokens/typography/alternative-titles';
|
||||
@use '../src/tokens/typography/text-body';
|
||||
@use '../src/tokens/typography/titles';
|
||||
|
||||
@include mixins.generate-typo-class(alternative-body-text.$LG-article-text-Regular, "alternative-body-text-LG-article-text-Regular");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$LG-article-text-Bold, "alternative-body-text-LG-article-text-Bold");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$MD-article-text-Regular, "alternative-body-text-MD-article-text-Regular");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$MD-article-text-Bold, "alternative-body-text-MD-article-text-Bold");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$SM-article-text-Regular, "alternative-body-text-SM-article-text-Regular");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$SM-article-text-Bold, "alternative-body-text-SM-article-text-Bold");
|
||||
@include mixins.generate-typo-class(alternative-body-text.$XS-article-text-Regular, "alternative-body-text-XS-article-text-Regular");
|
||||
@include mixins.generate-typo-class(alternative-titles.$XL, "alternative-titles-XL");
|
||||
@include mixins.generate-typo-class(alternative-titles.$LG, "alternative-titles-LG");
|
||||
@include mixins.generate-typo-class(alternative-titles.$MD, "alternative-titles-MD");
|
||||
@include mixins.generate-typo-class(alternative-titles.$SM, "alternative-titles-SM");
|
||||
@include mixins.generate-typo-class(alternative-titles.$XS, "alternative-titles-XS");
|
||||
@include mixins.generate-typo-class(text-body.$XL-chapo-Regular, "text-body-XL-chapo-Regular");
|
||||
@include mixins.generate-typo-class(text-body.$XL-chapo-Bold, "text-body-XL-chapo-Bold");
|
||||
@include mixins.generate-typo-class(text-body.$LG-article-text-Regular, "text-body-LG-article-text-Regular");
|
||||
@include mixins.generate-typo-class(text-body.$LG-article-text-Medium, "text-body-LG-article-text-Medium");
|
||||
@include mixins.generate-typo-class(text-body.$LG-article-text-Bold, "text-body-LG-article-text-Bold");
|
||||
@include mixins.generate-typo-class(text-body.$MD-standard-text-Regular, "text-body-MD-standard-text-Regular");
|
||||
@include mixins.generate-typo-class(text-body.$MD-standard-text-Medium, "text-body-MD-standard-text-Medium");
|
||||
@include mixins.generate-typo-class(text-body.$MD-standard-text-Bold, "text-body-MD-standard-text-Bold");
|
||||
@include mixins.generate-typo-class(text-body.$MD-standard-text-Italic, "text-body-MD-standard-text-Italic");
|
||||
@include mixins.generate-typo-class(text-body.$SM-detail-text-Regular, "text-body-SM-detail-text-Regular");
|
||||
@include mixins.generate-typo-class(text-body.$SM-detail-text-Medium, "text-body-SM-detail-text-Medium");
|
||||
@include mixins.generate-typo-class(text-body.$SM-detail-text-Bold, "text-body-SM-detail-text-Bold");
|
||||
@include mixins.generate-typo-class(text-body.$SM-detail-text-Italic, "text-body-SM-detail-text-Italic");
|
||||
@include mixins.generate-typo-class(text-body.$SM-detail-text-Maj, "text-body-SM-detail-text-Maj");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Regular, "text-body-XS-mention-text-Regular");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Medium, "text-body-XS-mention-text-Medium");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Bold, "text-body-XS-mention-text-Bold");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Italic, "text-body-XS-mention-text-Italic");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Maj, "text-body-XS-mention-text-Maj");
|
||||
@include mixins.generate-typo-class(text-body.$XS-mention-text-Underlined, "text-body-XS-mention-text-Underlined");
|
||||
@include mixins.generate-typo-class(titles.$H1-XL, "titles-H1-XL");
|
||||
@include mixins.generate-typo-class(titles.$H2-LG, "titles-H2-LG");
|
||||
@include mixins.generate-typo-class(titles.$H3-MD, "titles-H3-MD");
|
||||
@include mixins.generate-typo-class(titles.$H4-SM, "titles-H4-SM");
|
||||
@include mixins.generate-typo-class(titles.$H5-XS, "titles-H5-XS");
|
||||
@include mixins.generate-typo-class(titles.$H6-XXS, "titles-H6-XXS");
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// Mixin that generates css variables
|
||||
// Mixin to generate css variables
|
||||
// If the variable has no prefix, don't assign anything to the $prefix attribute, leave its default value: “”
|
||||
@mixin generate-css-variables($map, $prefix: "") {
|
||||
@if $prefix == "" {
|
||||
|
|
@ -11,3 +11,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin to generate typography css classes
|
||||
@mixin generate-typo-class($map, $name) {
|
||||
.#{$name} {
|
||||
@each $key, $value in $map {
|
||||
@if $key == "family" {
|
||||
font-family: $value;
|
||||
} @else if $key == "size" {
|
||||
font-size: $value;
|
||||
} @else if $key == "weight" {
|
||||
font-weight: $value;
|
||||
} @else if $key == "line-height" {
|
||||
line-height: $value;
|
||||
} @else if $key == "style" {
|
||||
font-style: $value;
|
||||
} @else if $key == "text-transform" {
|
||||
text-transform: $value;
|
||||
} @else if $key == "text-decoration" {
|
||||
text-decoration: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user