feat: add Typography tokens, utilities and documentation (#2774)

------------ Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Vincent Prothais <[email protected]>
Orange-OpenSource · Nov 28, 2024 · 30e7344 · 30e7344
1 parent 0f89228
commit 30e7344
Show file tree

Hide file tree

Showing 51 changed files with 10,488 additions and 7,610 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "61.0 kB"
+      "maxSize": "62.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "58.0 kB"
+      "maxSize": "59.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
     },
     {
       "path": "./dist/css/ouds-web-reboot.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "5.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.min.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "20.75 kB"
+      "maxSize": "22.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "19.75 kB"
+      "maxSize": "21.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "54.75 kB"
+      "maxSize": "56.25 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "51.5 kB"
+      "maxSize": "53.0 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -25,6 +25,7 @@
     "clic",
     "Codesniffer",
     "combinator",
+    "Consolas",
     "Contentful",
     "Cpath",
     "Crossfade",
@@ -70,6 +71,7 @@
     "Lowercased",
     "markdownify",
     "mediaqueries",
+    "Menlo",
     "minifiers",
     "misfunction",
     "mkdir",
@@ -155,6 +157,7 @@
     "WCAG",
     "whatsapp",
     "WICG's",
+    "xlarge",
     "zindex",
     "بالعالم",
     "مرحبًا"

diff --git a/NOTICE.txt b/NOTICE.txt
@@ -12,6 +12,7 @@ nuget/ouds-web.png
 site/layouts/partials/icons.html
 site/static/docs/**/assets/brand/orange-logo.svg
 site/static/docs/**/assets/brand/orange-social.png
+site/static/docs/**/assets/fonts/solaris-icons.woff2
 site/static/docs/**/assets/img/favicons/android-chrome-192x192.png
 site/static/docs/**/assets/img/favicons/android-chrome-512x512.png
 site/static/docs/**/assets/img/favicons/apple-touch-icon.png

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
@@ -2,6 +2,7 @@
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";
+@import "helpers/icon";
 @import "helpers/icon-link";
 @import "helpers/ratio";
 @import "helpers/position";

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -83,6 +83,30 @@ $ouds-elevations: (
 ) !default;
 // scss-docs-end ouds-maps-elevations
 
+// scss-docs-start ouds-maps-font
+$ouds-font-sizes: (
+  cs: "/code-small",
+  cm: "/code-medium",
+  bs: "/body-small",
+  bm: "/body-medium",
+  bl: "/body-large",
+  hs: "/heading-small",
+  hm: "/heading-medium",
+  hl: "/heading-large",
+  hxl: "/heading-xlarge",
+  ds: "/display-small",
+  dm: "/display-medium",
+  dl: "/display-large",
+) !default;
+
+$ouds-font-weights: (
+  normal: $ouds-font-weight-default,
+  bold: $ouds-font-weight-strong
+) !default;
+
+$ouds-icon-sizes: ("short", "medium", "tall") !default;
+// scss-docs-end ouds-maps-font
+
 // scss-docs-start ouds-maps-opacities
 $ouds-opacities: (
   "transparent": $ouds-opacity-transparent,

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -12,6 +12,7 @@
 @import "mixins/breakpoints";
 @import "mixins/color-mode";
 @import "mixins/color-scheme";
+@import "mixins/fonts"; // OUDS mod
 @import "mixins/image";
 @import "mixins/resize";
 @import "mixins/visually-hidden";

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -57,7 +57,7 @@
 // 2. As a best practice, apply a default `background-color`.
 // 3. Prevent adjustments of font size after orientation changes in iOS.
 // 4. Change the default tap highlight to be completely transparent in iOS.
-// 5. Prevent faux-bold/italic
+// 5. Prevent faux-bold/italic especially for some RTL fonts
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
@@ -69,11 +69,11 @@ body {
   @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
-  // OUDS mod: no color
+  color: var(--#{$prefix}body-color);
   text-align: var(--#{$prefix}body-text-align);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
+  letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
   background-color: var(--#{$prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
@@ -131,47 +131,52 @@ hr {
 //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 //    margin for easier control within type scales as it avoids margin collapsing.
 
+// scss-docs-start ouds-font-implementation
 %heading {
   margin-top: 0; // 1
   margin-bottom: $headings-margin-bottom;
-  @include font-size($font-size-base);  // OUDS mod
   font-family: $headings-font-family;
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
   color: var(--#{$prefix}heading-color);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
 }
 
 h1 {
   @extend %heading;
-  @include font-size($h4-font-size);
-  line-height: $h4-line-height;
+  @include get-font-size("heading-xlarge"); // OUDS mod: instead of `@include font-size($h1-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h4-spacing;
+h2 {
+  @extend %heading;
+  @include get-font-size("heading-large"); // OUDS mod: instead of `@include font-size($h2-font-size)`
 }
 
-h2,
 h3 {
   @extend %heading;
-  @include font-size($h5-font-size);
-  line-height: $h5-line-height;
+  @include get-font-size("heading-medium"); // OUDS mod: instead of `@include font-size($h3-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
+h4 {
+  @extend %heading;
+  @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size($h4-font-size)`
+}
+
+h5 {
+  @extend %heading;
+  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($h5-font-size)`
 }
 
-h4,
-h5,
 h6 {
   @extend %heading;
+  @include get-font-size("body-medium"); // OUDS mod: instead of `@include font-size($h6-font-size)`
 }
+// scss-docs-end ouds-font-implementation
 
 
 // Reset margins on paragraphs
@@ -182,6 +187,7 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
+  @include get-font-size("body-medium"); // OUDS mod
 }
 
 
@@ -201,7 +207,7 @@ abbr[title] {
 // Address
 
 address {
-  margin-bottom: 1rem;
+  margin-bottom: $ouds-space-fixed-medium; // OUDS mod: instead of `1rem`
   font-style: normal;
   line-height: inherit;
 }
@@ -283,9 +289,17 @@ dd {
 // Blockquote
 
 blockquote {
-  margin: 0 0 1rem;
+  margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`
 }
 
+// OUDS mod: No italic
+i,
+em,
+cite {
+  font-style: normal; // OUDS mod: remove italic.
+}
+// End mod
+
 
 // Strong
 //
@@ -303,11 +317,7 @@ strong {
 // Add the correct font size in all browsers
 
 small {
-  @include font-size($small-font-size);
-  // OUDS mod
-  font-weight: $font-weight-normal;
-  line-height: $line-height-sm;
-  // End mod
+  @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($small-font-size)`
 }
 
 
@@ -381,10 +391,9 @@ samp {
 pre {
   display: block;
   margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
+  margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
-  @include font-size($code-font-size);
-  line-height: $pre-line-height; // OUDS mod
+  @include get-font-size("code-medium"); // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
@@ -399,7 +408,6 @@ var, // OUDS mod
 code {
   @include font-size($code-font-size);
   font-style: normal; // OUDS mod: <var> is italic in all browsers
-  line-height: $line-height-sm; // OUDS mod
   color: var(--#{$prefix}code-color);
   word-wrap: break-word;
 
@@ -414,7 +422,7 @@ kbd {
   @include font-size($kbd-font-size);
   color: $kbd-color;
   background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
+  @include border-radius($border-radius-sm, $border-radius-sm); // OUDS mod: instead of `@include border-radius($border-radius-sm)`
 
   kbd {
     padding: 0;
@@ -460,13 +468,10 @@ table {
 caption {
   padding-top: $table-caption-padding-y;
   padding-bottom: $table-caption-padding-y;
-  @include font-size($h1-font-size);    // OUDS mod
-  font-weight: $font-weight-bold;       // OUDS mod
+  @include get-font-size("heading-xlarge"); // OUDS mod
+  font-weight: $font-weight-bold; // OUDS mod
   color: $table-caption-color;
   text-align: left;
-
-  /* rtl:remove */
-  letter-spacing: $h1-spacing;          // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
@@ -500,7 +505,6 @@ th {
 
 label {
   display: inline-block; // 1
-  font-weight: $form-label-font-weight; // OUDS mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
@@ -626,9 +630,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
-  line-height: inherit;
+  // OUDS mod: no line-height
+  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($legend-font-size)`
 
   + * {
     clear: left; // 2
@@ -736,3 +740,11 @@ progress {
 [hidden] {
   display: none !important;
 }
+
+// OUDS mod
+// Selection
+::selection {
+  color: var(--#{$prefix}highlight-color);
+  background-color: var(--#{$prefix}highlight-bg);
+}
+// End mod