From 28f6d160866cb45ae0922eebc4e59c767162e6a6 Mon Sep 17 00:00:00 2001 From: GOMA Date: Tue, 15 Jul 2025 12:59:38 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20scss=20global=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_variables.scss | 168 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 src/_variables.scss diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 0000000..72cc20c --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,168 @@ +@use '../src/tokens/themes/decisions/artwork'; +@use '../src/tokens/themes/decisions/background'; +@use '../src/tokens/themes/decisions/border'; +@use '../src/tokens/themes/decisions/text'; +@use '../src/tokens/themes/options/illustration/color-850' as illustration-850; +@use '../src/tokens/themes/options/illustration/color-950' as illustration-950; +@use '../src/tokens/themes/options/illustration/color-sun' as illustration-sun; +@use '../src/tokens/themes/options/primary/color-sun-113.scss' as primary-sun-113; +@use '../src/tokens/themes/options/primary/color-113' as primary-113; +@use '../src/tokens/themes/options/primary/color-425' as primary-425; +@use '../src/tokens/themes/options/primary/color-850' as primary-850; +@use '../src/tokens/themes/options/primary/color-950' as primary-950; +@use '../src/tokens/themes/options/primary/color-975' as primary-975; +@use '../src/tokens/themes/options/primary/color-main' as primary-main; +@use '../src/tokens/themes/options/system/color-425' as system-425; +@use '../src/tokens/themes/options/system/color-950' as system-950; +@use '../src/tokens/themes/options/system/color-focus' as system-focus; +@use '../src/tokens/typography/alternative-body-text'; +@use '../src/tokens/typography/alternative-titles'; +@use '../src/tokens/typography/text-body'; +@use '../src/tokens/typography/titles'; +@use '../src/functions/mixins'; +@use '../src/base/fonts/font-family'; + + +:root { + @include mixins.generate-css-variables(artwork.$artwork-light); + @include mixins.generate-css-variables(background.$background-light); + @include mixins.generate-css-variables(border.$border-light); + @include mixins.generate-css-variables(text.$text-light); + @include mixins.generate-css-variables(illustration-850.$purple-glycine-light, "illustration-color-850-glycine"); + @include mixins.generate-css-variables(illustration-850.$yellow-tournesol-light, "illustration-color-850-tournesol"); + @include mixins.generate-css-variables(illustration-950.$purple-glycine-light, "illustration-color-950-glycine"); + @include mixins.generate-css-variables(illustration-950.$yellow-tournesol-light, "illustration-color-950-tournesol"); + @include mixins.generate-css-variables(illustration-sun.$purple-glycine-sun, "illustration-color-sun-glycine"); + @include mixins.generate-css-variables(illustration-sun.$yellow-tournesol-sun, "illustration-color-sun-tournesol"); + @include mixins.generate-css-variables(primary-sun-113.$blue-france, "primary-color-sun-blue-france"); + @include mixins.generate-css-variables(primary-113.$blue-france, "primary-color-113-blue-france"); + @include mixins.generate-css-variables(primary-425.$red-marianne-light, "primary-color-425-red-marianne"); + @include mixins.generate-css-variables(primary-850.$blue-france-light, "primary-color-850-blue-france"); + @include mixins.generate-css-variables(primary-850.$red-marianne-light, "primary-color-850-red-marianne"); + @include mixins.generate-css-variables(primary-950.$blue-france-light, "primary-color-950-blue-france"); + @include mixins.generate-css-variables(primary-950.$red-marianne-light, "primary-color-950-red-marianne"); + @include mixins.generate-css-variables(primary-975.$blue-france-light, "primary-color-975-blue-france"); + @include mixins.generate-css-variables(primary-975.$red-marianne-light, "primary-color-975-red-marianne"); + @include mixins.generate-css-variables(primary-main.$blue-france, "primary-color-main-blue-france"); + @include mixins.generate-css-variables(primary-main.$red-marianne, "primary-color-main-red-marianne"); + @include mixins.generate-css-variables(system-425.$success-light, "system-color-425-success"); + @include mixins.generate-css-variables(system-425.$warning-light, "system-color-425-warning"); + @include mixins.generate-css-variables(system-425.$info-light, "system-color-425-info"); + @include mixins.generate-css-variables(system-425.$error-light, "system-color-425-error"); + @include mixins.generate-css-variables(system-950.$success-light, "system-color-950-success"); + @include mixins.generate-css-variables(system-950.$warning-light, "system-color-950-warning"); + @include mixins.generate-css-variables(system-950.$info-light, "system-color-950-info"); + @include mixins.generate-css-variables(system-950.$error-light, "system-color-950-error"); + @include mixins.generate-css-variables(system-focus.$focus, "system-focus"); + @include mixins.generate-css-variables(alternative-body-text.$LG-article-text-Regular, "alternative-body-text-LG-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$LG-article-text-Bold, "alternative-body-text-LG-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$MD-article-text-Regular, "alternative-body-text-MD-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$MD-article-text-Bold, "alternative-body-text-MD-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$SM-article-text-Regular, "alternative-body-text-SM-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$SM-article-text-Bold, "alternative-body-text-SM-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$XS-article-text-Regular, "alternative-body-text-XS-article-text-Regular"); + @include mixins.generate-css-variables(alternative-titles.$XL, "alternative-titles-XL"); + @include mixins.generate-css-variables(alternative-titles.$LG, "alternative-titles-LG"); + @include mixins.generate-css-variables(alternative-titles.$MD, "alternative-titles-MD"); + @include mixins.generate-css-variables(alternative-titles.$SM, "alternative-titles-SM"); + @include mixins.generate-css-variables(alternative-titles.$XS, "alternative-titles-XS"); + @include mixins.generate-css-variables(text-body.$XL-chapo-Regular, "text-body-XL-chapo-Regular"); + @include mixins.generate-css-variables(text-body.$XL-chapo-Bold, "text-body-XL-chapo-Bold"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Regular, "text-body-LG-article-text-Regular"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Medium, "text-body-LG-article-text-Medium"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Bold, "text-body-LG-article-text-Bold"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Regular, "text-body-MD-standard-text-Regular"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Medium, "text-body-MD-standard-text-Medium"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Bold, "text-body-MD-standard-text-Bold"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Italic, "text-body-MD-standard-text-Italic"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Regular, "text-body-SM-detail-text-Regular"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Medium, "text-body-SM-detail-text-Medium"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Bold, "text-body-SM-detail-text-Bold"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Italic, "text-body-SM-detail-text-Italic"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Maj, "text-body-SM-detail-text-Maj"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Regular, "text-body-XS-mention-text-Regular"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Medium, "text-body-XS-mention-text-Medium"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Bold, "text-body-XS-mention-text-Bold"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Italic, "text-body-XS-mention-text-Italic"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Maj, "text-body-XS-mention-text-Maj"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Underlined, "text-body-XS-mention-text-Underlined"); + @include mixins.generate-css-variables(titles.$H1-XL, "titles-H1-XL"); + @include mixins.generate-css-variables(titles.$H2-LG, "titles-H2-LG"); + @include mixins.generate-css-variables(titles.$H3-MD, "titles-H3-MD"); + @include mixins.generate-css-variables(titles.$H4-SM, "titles-H4-SM"); + @include mixins.generate-css-variables(titles.$H5-XS, "titles-H5-XS"); + @include mixins.generate-css-variables(titles.$H6-XXS, "titles-H6-XXS"); + @include mixins.generate-css-variables(font-family.$font-family, "font-family"); +} + +:root[data-theme='dark'] { + @include mixins.generate-css-variables(artwork.$artwork-dark); + @include mixins.generate-css-variables(background.$background-dark); + @include mixins.generate-css-variables(border.$border-dark); + @include mixins.generate-css-variables(text.$text-dark); + @include mixins.generate-css-variables(illustration-850.$purple-glycine-dark, "illustration-color-850-glycine"); + @include mixins.generate-css-variables(illustration-850.$yellow-tournesol-dark, "illustration-color-850-tournesol"); + @include mixins.generate-css-variables(illustration-950.$purple-glycine-dark, "illustration-color-950-glycine"); + @include mixins.generate-css-variables(illustration-950.$yellow-tournesol-dark, "illustration-color-950-tournesol"); + @include mixins.generate-css-variables(illustration-sun.$purple-glycine-moon, "illustration-color-sun-glycine"); + @include mixins.generate-css-variables(illustration-sun.$yellow-tournesol-moon, "illustration-color-sun-tournesol"); + @include mixins.generate-css-variables(primary-sun-113.$blue-france, "primary-color-sun-blue-france"); + @include mixins.generate-css-variables(primary-113.$blue-france, "primary-color-113-blue-france"); + @include mixins.generate-css-variables(primary-425.$red-marianne-dark, "primary-color-425-red-marianne"); + @include mixins.generate-css-variables(primary-850.$blue-france-dark, "primary-color-850-blue-france"); + @include mixins.generate-css-variables(primary-850.$red-marianne-dark, "primary-color-850-red-marianne"); + @include mixins.generate-css-variables(primary-950.$blue-france-dark, "primary-color-950-blue-france"); + @include mixins.generate-css-variables(primary-950.$red-marianne-dark, "primary-color-950-red-marianne"); + @include mixins.generate-css-variables(primary-975.$blue-france-dark, "primary-color-975-blue-france"); + @include mixins.generate-css-variables(primary-975.$red-marianne-dark, "primary-color-975-red-marianne"); + @include mixins.generate-css-variables(primary-main.$blue-france, "primary-color-main-blue-france"); + @include mixins.generate-css-variables(primary-main.$red-marianne, "primary-color-main-red-marianne"); + @include mixins.generate-css-variables(system-425.$success-dark, "system-color-425-success"); + @include mixins.generate-css-variables(system-425.$warning-dark, "system-color-425-warning"); + @include mixins.generate-css-variables(system-425.$info-dark, "system-color-425-info"); + @include mixins.generate-css-variables(system-425.$error-dark, "system-color-425-error"); + @include mixins.generate-css-variables(system-950.$success-dark, "system-color-950-success"); + @include mixins.generate-css-variables(system-950.$warning-dark, "system-color-950-warning"); + @include mixins.generate-css-variables(system-950.$info-dark, "system-color-950-info"); + @include mixins.generate-css-variables(system-950.$error-dark, "system-color-950-error"); + @include mixins.generate-css-variables(system-focus.$focus, "system-focus"); + @include mixins.generate-css-variables(alternative-body-text.$LG-article-text-Regular, "alternative-body-text-LG-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$LG-article-text-Bold, "alternative-body-text-LG-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$MD-article-text-Regular, "alternative-body-text-MD-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$MD-article-text-Bold, "alternative-body-text-MD-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$SM-article-text-Regular, "alternative-body-text-SM-article-text-Regular"); + @include mixins.generate-css-variables(alternative-body-text.$SM-article-text-Bold, "alternative-body-text-SM-article-text-Bold"); + @include mixins.generate-css-variables(alternative-body-text.$XS-article-text-Regular, "alternative-body-text-XS-article-text-Regular"); + @include mixins.generate-css-variables(alternative-titles.$XL, "alternative-titles-XL"); + @include mixins.generate-css-variables(alternative-titles.$LG, "alternative-titles-LG"); + @include mixins.generate-css-variables(alternative-titles.$MD, "alternative-titles-MD"); + @include mixins.generate-css-variables(alternative-titles.$SM, "alternative-titles-SM"); + @include mixins.generate-css-variables(alternative-titles.$XS, "alternative-titles-XS"); + @include mixins.generate-css-variables(text-body.$XL-chapo-Regular, "text-body-XL-chapo-Regular"); + @include mixins.generate-css-variables(text-body.$XL-chapo-Bold, "text-body-XL-chapo-Bold"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Regular, "text-body-LG-article-text-Regular"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Medium, "text-body-LG-article-text-Medium"); + @include mixins.generate-css-variables(text-body.$LG-article-text-Bold, "text-body-LG-article-text-Bold"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Regular, "text-body-MD-standard-text-Regular"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Medium, "text-body-MD-standard-text-Medium"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Bold, "text-body-MD-standard-text-Bold"); + @include mixins.generate-css-variables(text-body.$MD-standard-text-Italic, "text-body-MD-standard-text-Italic"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Regular, "text-body-SM-detail-text-Regular"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Medium, "text-body-SM-detail-text-Medium"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Bold, "text-body-SM-detail-text-Bold"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Italic, "text-body-SM-detail-text-Italic"); + @include mixins.generate-css-variables(text-body.$SM-detail-text-Maj, "text-body-SM-detail-text-Maj"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Regular, "text-body-XS-mention-text-Regular"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Medium, "text-body-XS-mention-text-Medium"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Bold, "text-body-XS-mention-text-Bold"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Italic, "text-body-XS-mention-text-Italic"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Maj, "text-body-XS-mention-text-Maj"); + @include mixins.generate-css-variables(text-body.$XS-mention-text-Underlined, "text-body-XS-mention-text-Underlined"); + @include mixins.generate-css-variables(titles.$H1-XL, "titles-H1-XL"); + @include mixins.generate-css-variables(titles.$H2-LG, "titles-H2-LG"); + @include mixins.generate-css-variables(titles.$H3-MD, "titles-H3-MD"); + @include mixins.generate-css-variables(titles.$H4-SM, "titles-H4-SM"); + @include mixins.generate-css-variables(titles.$H5-XS, "titles-H5-XS"); + @include mixins.generate-css-variables(titles.$H6-XXS, "titles-H6-XXS"); + @include mixins.generate-css-variables(font-family.$font-family, "font-family"); +} \ No newline at end of file