💄 Add scss global variables
This commit is contained in:
GOMA
parent
ea8a7abef4
commit
28f6d16086
168
src/_variables.scss
Normal file
168
src/_variables.scss
Normal file
|
|
@ -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");
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user