From 6274d4d81484325ccf5a8e0246fcbb63e82855f4 Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 13:34:49 +0200 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20feature:=20Add=20mixin=20to=20g?= =?UTF-8?q?enerate=20typography=20css=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/functions/_mixins.scss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/functions/_mixins.scss b/src/functions/_mixins.scss index 4ec02c3..31306de 100644 --- a/src/functions/_mixins.scss +++ b/src/functions/_mixins.scss @@ -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,24 @@ } } } + +// Mixin to generate typography css classes +@mixin generate-typo-class($map) { + @each $name, $value in $map { + @if $name == "family" { + font-family: $value; + } @else if $name == "size" { + font-size: $value; + } @else if $name == "weight" { + font-weight: $value; + } @else if $name == "line-height" { + line-height: $value; + } @else if $name == "style" { + font-style: $value; + } @else if $name == "text-transform" { + text-transform: $value; + } @else if $name == "text-decoration" { + text-decoration: $value; + } + } +} \ No newline at end of file From 03e117b77e2bcd99ef15beba7de55a201dc2a548 Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 14:04:26 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20generat?= =?UTF-8?q?e-typo-class=20updated?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/functions/_mixins.scss | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/functions/_mixins.scss b/src/functions/_mixins.scss index 31306de..c2f40c6 100644 --- a/src/functions/_mixins.scss +++ b/src/functions/_mixins.scss @@ -13,22 +13,24 @@ } // Mixin to generate typography css classes -@mixin generate-typo-class($map) { - @each $name, $value in $map { - @if $name == "family" { - font-family: $value; - } @else if $name == "size" { - font-size: $value; - } @else if $name == "weight" { - font-weight: $value; - } @else if $name == "line-height" { - line-height: $value; - } @else if $name == "style" { - font-style: $value; - } @else if $name == "text-transform" { - text-transform: $value; - } @else if $name == "text-decoration" { - text-decoration: $value; +@mixin generate-typo-class($prefix, $name, $map) { + .#{$prefix}-#{$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; + } } } } \ No newline at end of file From bbc03709d54342833313e01de28f68a5bcc7c4ba Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 14:25:00 +0200 Subject: [PATCH 3/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20generat?= =?UTF-8?q?e-typo-class=20updated?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/functions/_mixins.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/functions/_mixins.scss b/src/functions/_mixins.scss index c2f40c6..46a3573 100644 --- a/src/functions/_mixins.scss +++ b/src/functions/_mixins.scss @@ -13,8 +13,8 @@ } // Mixin to generate typography css classes -@mixin generate-typo-class($prefix, $name, $map) { - .#{$prefix}-#{$name} { +@mixin generate-typo-class($name, $map) { + .#{$name} { @each $key, $value in $map { @if $key == "family" { font-family: $value; From 77247fc22dbb550ac6c4eecf267f90791ec7b7f2 Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 14:26:46 +0200 Subject: [PATCH 4/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20generat?= =?UTF-8?q?e-typo-class=20updated?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/functions/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/functions/_mixins.scss b/src/functions/_mixins.scss index 46a3573..05a5a1a 100644 --- a/src/functions/_mixins.scss +++ b/src/functions/_mixins.scss @@ -13,7 +13,7 @@ } // Mixin to generate typography css classes -@mixin generate-typo-class($name, $map) { +@mixin generate-typo-class($map, $name) { .#{$name} { @each $key, $value in $map { @if $key == "family" { From 242016df9c2dcacb4c3edc46efb956bf70eb03e2 Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 14:35:28 +0200 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=92=84=20Add=20typography=20css=20cla?= =?UTF-8?q?sses?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- output/typography.css | 241 ++++++++++++++++++++++++++++++++++++++ output/typography.css.map | 1 + src/_typography.scss | 44 +++++++ 3 files changed, 286 insertions(+) create mode 100644 output/typography.css create mode 100644 output/typography.css.map create mode 100644 src/_typography.scss diff --git a/output/typography.css b/output/typography.css new file mode 100644 index 0000000..aaa03c5 --- /dev/null +++ b/output/typography.css @@ -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 */ diff --git a/output/typography.css.map b/output/typography.css.map new file mode 100644 index 0000000..7756005 --- /dev/null +++ b/output/typography.css.map @@ -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"} \ No newline at end of file diff --git a/src/_typography.scss b/src/_typography.scss new file mode 100644 index 0000000..6eed0dd --- /dev/null +++ b/src/_typography.scss @@ -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"); From 08d09cc630b1585da269af652246d0ffe9ba1211 Mon Sep 17 00:00:00 2001 From: GOMA Date: Wed, 16 Jul 2025 15:23:36 +0200 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=9D=20docs:=20CHANGELOG=20file=20a?= =?UTF-8?q?dded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e69de29