feat(tools/tokens): add tokens for font-family & font-weight (#1339)

Resolves #1221
adeo · Mar 21, 2023 · dc90551 · dc90551
1 parent 0639167
commit dc90551
Show file tree

Hide file tree

Showing 12 changed files with 339 additions and 34 deletions.
diff --git a/packages/styles/settings-tools/_s.fonts-faces.scss b/packages/styles/settings-tools/_s.fonts-faces.scss
@@ -1,12 +1,5 @@
 // Default path
 $font-path: "/fonts";
-$preset-adeo: false;
-
-@if $preset == "adeo" {
-  $preset-adeo: true;
-}
-
-$font-family: if($preset-adeo, "Roboto", "LeroyMerlin");
 
 @if variable-exists(local-config) {
   @if type-of($local-config) == map and map-has-key($local-config, font-path) {
@@ -15,72 +8,66 @@ $font-family: if($preset-adeo, "Roboto", "LeroyMerlin");
 }
 
 $font-weights: (
-  "light": 300,
-  "regular": 400,
-  "semi-bold": if($preset-adeo, 700, 600),
+  "light": $font-weight-light,
+  "regular": $font-weight-regular,
+  "semi-bold": $font-weight-semi-bold,
 );
 
 @mixin import-font-families($italic: true) {
   @font-face {
-    font-family: LeroyMerlin;
-    src:
-      url("#{$font-path}/LeroyMerlinSans-Web-Light.woff2") format("woff2"),
+    font-family: $font-family;
+    src: url("#{$font-path}/LeroyMerlinSans-Web-Light.woff2") format("woff2"),
       url("#{$font-path}/LeroyMerlinSans-Web-Light.woff") format("woff");
-    font-weight: 300;
+    font-weight: $font-weight-light;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: LeroyMerlin;
-    src:
-      url("#{$font-path}/LeroyMerlinSans-Web-Regular.woff2") format("woff2"),
+    font-family: $font-family;
+    src: url("#{$font-path}/LeroyMerlinSans-Web-Regular.woff2") format("woff2"),
       url("#{$font-path}/LeroyMerlinSans-Web-Regular.woff") format("woff");
-    font-weight: 400;
+    font-weight: $font-weight-regular;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: LeroyMerlin;
-    src:
-      url("#{$font-path}/LeroyMerlinSans-Web-SemiBold.woff2") format("woff2"),
+    font-family: $font-family;
+    src: url("#{$font-path}/LeroyMerlinSans-Web-SemiBold.woff2") format("woff2"),
       url("#{$font-path}/LeroyMerlinSans-Web-SemiBold.woff") format("woff");
-    font-weight: 600;
+    font-weight: $font-weight-semi-bold;
     font-style: normal;
     font-display: swap;
   }
 
   @if $italic {
     @font-face {
       font-family: LeroyMerlin;
-      src:
-        url("#{$font-path}/LeroyMerlinSans-Web-LightItalic.woff2")
-        format("woff2"),
+      src: url("#{$font-path}/LeroyMerlinSans-Web-LightItalic.woff2")
+          format("woff2"),
         url("#{$font-path}/LeroyMerlinSans-Web-LightItalic.woff") format("woff");
-      font-weight: 300;
+      font-weight: $font-weight-light;
       font-style: italic;
       font-display: swap;
     }
 
     @font-face {
       font-family: LeroyMerlin;
-      src:
-        url("#{$font-path}/LeroyMerlinSans-Web-Italic.woff2") format("woff2"),
+      src: url("#{$font-path}/LeroyMerlinSans-Web-Italic.woff2") format("woff2"),
         url("#{$font-path}/LeroyMerlinSans-Web-Italic.woff") format("woff");
-      font-weight: 400;
+      font-weight: $font-weight-regular;
       font-style: italic;
       font-display: swap;
     }
 
     @font-face {
       font-family: LeroyMerlin;
-      src:
-        url("#{$font-path}/LeroyMerlinSans-Web-SemiBoldItalic.woff2")
-        format("woff2"),
+      src: url("#{$font-path}/LeroyMerlinSans-Web-SemiBoldItalic.woff2")
+          format("woff2"),
         url("#{$font-path}/LeroyMerlinSans-Web-SemiBoldItalic.woff")
-        format("woff");
-      font-weight: if($preset-adeo, 700, 600);
+          format("woff");
+      font-weight: $font-weight-semi-bold;
       font-style: italic;
       font-display: swap;
     }

diff --git a/packages/tokens/build/adeo/js/tokens.js b/packages/tokens/build/adeo/js/tokens.js
@@ -464,6 +464,10 @@ export const ColorSecondarySandgrey600 = "#71706b";
 export const ColorSecondarySandgrey700 = "#555550";
 export const ColorSecondarySandgrey800 = "#3a3936";
 export const ColorSecondarySandgrey900 = "#1e1e1c";
+export const FontFamily = "Roboto";
+export const FontWeightLight = 300;
+export const FontWeightRegular = 400;
+export const FontWeightSemiBold = 500;
 export const Preset = "adeo";
 export const RadiusS = 2;
 export const RadiusM = 4;

diff --git a/packages/tokens/build/adeo/js/tokensObject.js b/packages/tokens/build/adeo/js/tokensObject.js
@@ -10076,6 +10076,84 @@ module.exports = {
       }
     }
   },
+  "font": {
+    "family": {
+      "value": "Roboto",
+      "filePath": "packages/tokens/src/tokens/adeo/font.json",
+      "isSource": true,
+      "original": {
+        "value": "Roboto"
+      },
+      "name": "FontFamily",
+      "attributes": {
+        "category": "font",
+        "type": "family"
+      },
+      "path": [
+        "font",
+        "family"
+      ]
+    },
+    "weight": {
+      "light": {
+        "value": 300,
+        "filePath": "packages/tokens/src/tokens/adeo/font.json",
+        "isSource": true,
+        "original": {
+          "value": 300
+        },
+        "name": "FontWeightLight",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "light"
+        },
+        "path": [
+          "font",
+          "weight",
+          "light"
+        ]
+      },
+      "regular": {
+        "value": 400,
+        "filePath": "packages/tokens/src/tokens/adeo/font.json",
+        "isSource": true,
+        "original": {
+          "value": 400
+        },
+        "name": "FontWeightRegular",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "regular"
+        },
+        "path": [
+          "font",
+          "weight",
+          "regular"
+        ]
+      },
+      "semi-bold": {
+        "value": 500,
+        "filePath": "packages/tokens/src/tokens/adeo/font.json",
+        "isSource": true,
+        "original": {
+          "value": 500
+        },
+        "name": "FontWeightSemiBold",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "semi-bold"
+        },
+        "path": [
+          "font",
+          "weight",
+          "semi-bold"
+        ]
+      }
+    }
+  },
   "preset": {
     "value": "adeo",
     "filePath": "packages/tokens/src/tokens/adeo/preset.json",

diff --git a/packages/tokens/build/adeo/scss/_tokens.scss b/packages/tokens/build/adeo/scss/_tokens.scss
@@ -465,6 +465,10 @@ $color-secondary-sandgrey-600: #71706b !default;
 $color-secondary-sandgrey-700: #555550 !default;
 $color-secondary-sandgrey-800: #3a3936 !default;
 $color-secondary-sandgrey-900: #1e1e1c !default;
+$font-family: Roboto !default;
+$font-weight-light: 300 !default;
+$font-weight-regular: 400 !default;
+$font-weight-semi-bold: 500 !default;
 $preset: adeo !default;
 $radius-s: 2 !default;
 $radius-m: 4 !default;
@@ -1430,6 +1434,14 @@ $tokens: (
       '900': $color-secondary-sandgrey-900
     )
   ),
+  'font': (
+    'family': $font-family,
+    'weight': (
+      'light': $font-weight-light,
+      'regular': $font-weight-regular,
+      'semi-bold': $font-weight-semi-bold
+    )
+  ),
   'preset': $preset,
   'radius': (
     's': $radius-s,

diff --git a/packages/tokens/build/bricoman/js/tokens.js b/packages/tokens/build/bricoman/js/tokens.js
@@ -457,6 +457,10 @@ export const ColorToggleDisabledCheckedBackground = "#b8bef4";
 export const ColorToggleDisabledCheckedCircle = "#ffffff";
 export const ColorTooltipBackground = "#4d4d4d";
 export const ColorTooltipBorder = "#ffffff";
+export const FontFamily = "LeroyMerlin";
+export const FontWeightLight = 300;
+export const FontWeightRegular = 400;
+export const FontWeightSemiBold = 600;
 export const Preset = "bricoman";
 export const RadiusS = 2;
 export const RadiusM = 4;

diff --git a/packages/tokens/build/bricoman/js/tokensObject.js b/packages/tokens/build/bricoman/js/tokensObject.js
@@ -9947,6 +9947,84 @@ module.exports = {
       }
     }
   },
+  "font": {
+    "family": {
+      "value": "LeroyMerlin",
+      "filePath": "packages/tokens/src/tokens/leroymerlin/font.json",
+      "isSource": true,
+      "original": {
+        "value": "LeroyMerlin"
+      },
+      "name": "FontFamily",
+      "attributes": {
+        "category": "font",
+        "type": "family"
+      },
+      "path": [
+        "font",
+        "family"
+      ]
+    },
+    "weight": {
+      "light": {
+        "value": 300,
+        "filePath": "packages/tokens/src/tokens/leroymerlin/font.json",
+        "isSource": true,
+        "original": {
+          "value": 300
+        },
+        "name": "FontWeightLight",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "light"
+        },
+        "path": [
+          "font",
+          "weight",
+          "light"
+        ]
+      },
+      "regular": {
+        "value": 400,
+        "filePath": "packages/tokens/src/tokens/leroymerlin/font.json",
+        "isSource": true,
+        "original": {
+          "value": 400
+        },
+        "name": "FontWeightRegular",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "regular"
+        },
+        "path": [
+          "font",
+          "weight",
+          "regular"
+        ]
+      },
+      "semi-bold": {
+        "value": 600,
+        "filePath": "packages/tokens/src/tokens/leroymerlin/font.json",
+        "isSource": true,
+        "original": {
+          "value": 600
+        },
+        "name": "FontWeightSemiBold",
+        "attributes": {
+          "category": "font",
+          "type": "weight",
+          "item": "semi-bold"
+        },
+        "path": [
+          "font",
+          "weight",
+          "semi-bold"
+        ]
+      }
+    }
+  },
   "preset": {
     "value": "bricoman",
     "filePath": "packages/tokens/src/tokens/bricoman/preset.json",

diff --git a/packages/tokens/build/bricoman/scss/_tokens.scss b/packages/tokens/build/bricoman/scss/_tokens.scss
@@ -458,6 +458,10 @@ $color-toggle-disabled-checked-background: #b8bef4 !default;
 $color-toggle-disabled-checked-circle: #ffffff !default;
 $color-tooltip-background: #4d4d4d !default;
 $color-tooltip-border: #ffffff !default;
+$font-family: LeroyMerlin !default;
+$font-weight-light: 300 !default;
+$font-weight-regular: 400 !default;
+$font-weight-semi-bold: 600 !default;
 $preset: bricoman !default;
 $radius-s: 2 !default;
 $radius-m: 4 !default;
@@ -1416,6 +1420,14 @@ $tokens: (
       'border': $color-tooltip-border
     )
   ),
+  'font': (
+    'family': $font-family,
+    'weight': (
+      'light': $font-weight-light,
+      'regular': $font-weight-regular,
+      'semi-bold': $font-weight-semi-bold
+    )
+  ),
   'preset': $preset,
   'radius': (
     's': $radius-s,

diff --git a/packages/tokens/build/lm/js/tokens.js b/packages/tokens/build/lm/js/tokens.js
@@ -455,6 +455,10 @@ export const ColorToggleDisabledCheckedBackground = "#c5e39e";
 export const ColorToggleDisabledCheckedCircle = "#ffffff";
 export const ColorTooltipBackground = "#4d4d4d";
 export const ColorTooltipBorder = "#ffffff";
+export const FontFamily = "LeroyMerlin";
+export const FontWeightLight = 300;
+export const FontWeightRegular = 400;
+export const FontWeightSemiBold = 600;
 export const Preset = "lm";
 export const RadiusS = 2;
 export const RadiusM = 4;