tmp

Orange-OpenSource · Oct 23, 2024 · 14eff8e · 14eff8e
1 parent 2f78431
commit 14eff8e
Show file tree

Hide file tree

Showing 25 changed files with 707 additions and 345 deletions.
diff --git a/hugo.yml b/hugo.yml
@@ -1,4 +1,5 @@
 languageCode:                       "en"
+timeout:                            600000
 title:                              "OUDS Web"
 baseURL:                            "https://web.unified-design-system.orange.com"
 

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -83,6 +83,144 @@ $ouds-elevations: (
 ) !default;
 // scss-docs-end ouds-maps-elevations
 
+// scss-docs-start ouds-maps-fonts
+%display-large {
+  font-size: var(--#{$prefix}font-size-display-large);
+  line-height: var(--#{$prefix}font-line-height-display-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-large);
+}
+
+%display-medium {
+  font-size: var(--#{$prefix}font-size-display-medium);
+  line-height: var(--#{$prefix}font-line-height-display-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium);
+}
+
+%display-small {
+  font-size: var(--#{$prefix}font-size-display-small);
+  line-height: var(--#{$prefix}font-line-height-display-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-small);
+}
+
+%heading-xlarge {
+  font-size: var(--#{$prefix}font-size-heading-xlarge);
+  line-height: var(--#{$prefix}font-line-height-heading-xlarge);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge);
+}
+
+%heading-large {
+  font-size: var(--#{$prefix}font-size-heading-large);
+  line-height: var(--#{$prefix}font-line-height-heading-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large);
+}
+
+%heading-medium {
+  font-size: var(--#{$prefix}font-size-heading-medium);
+  line-height: var(--#{$prefix}font-line-height-heading-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium);
+}
+
+%heading-small {
+  font-size: var(--#{$prefix}font-size-heading-small);
+  line-height: var(--#{$prefix}font-line-height-heading-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small);
+}
+
+%heading-xsmall {
+  font-size: var(--#{$prefix}font-size-heading-xsmall);
+  line-height: var(--#{$prefix}font-line-height-heading-xsmall);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall);
+}
+
+%body-large {
+  font-size: var(--#{$prefix}font-size-body-large);
+  line-height: var(--#{$prefix}font-line-height-body-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-large);
+}
+
+%body-medium {
+  font-size: var(--#{$prefix}font-size-body-medium);
+  line-height: var(--#{$prefix}font-line-height-body-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium);
+}
+
+%body-small {
+  font-size: var(--#{$prefix}font-size-body-small);
+  line-height: var(--#{$prefix}font-line-height-body-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-small);
+}
+
+%label-xlarge {
+  font-size: $ouds-font-size-label-xlarge;
+  line-height: $ouds-font-line-height-label-xlarge;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-xlarge;
+}
+
+%label-large {
+  font-size: $ouds-font-size-label-large;
+  line-height: $ouds-font-line-height-label-large;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-large;
+}
+
+%label-medium {
+  font-size: $ouds-font-size-label-medium;
+  line-height: $ouds-font-line-height-label-medium;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-medium;
+}
+
+%label-small {
+  font-size: $ouds-font-size-label-small;
+  line-height: $ouds-font-line-height-label-small;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-small;
+}
+
+%code-medium {
+  font-size: $ouds-font-size-code-medium;
+  line-height: $ouds-font-line-height-code-medium;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-code-medium;
+}
+
+%code-small {
+  font-size: $ouds-font-size-code-small;
+  line-height: $ouds-font-line-height-code-small;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-code-small;
+}
+// scss-docs-end ouds-maps-fonts
+
 // scss-docs-start ouds-maps-opacities
 $ouds-opacities: (
   "transparent": $ouds-opacity-transparent,

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 maybe 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
@@ -134,43 +134,46 @@ hr {
 %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;
+  @extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h4-spacing;
+h2 {
+  @extend %heading;
+  @extend %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;
+  @extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
+h4 {
+  @extend %heading;
+  @extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)`
+}
+
+h5 {
+  @extend %heading;
+  @extend %heading-xsmall; // OUDS mod: instead of `@include font-size($h5-font-size)`
 }
 
-h4,
-h5,
 h6 {
   @extend %heading;
+  @extend %body-large; // OUDS mod: instead of `@include font-size($h6-font-size)` // Makes sense for me to have the smallest title the same font-size as the largest body since it's Bold and spaced correctly
 }
 
 
@@ -303,11 +306,8 @@ 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
+  @extend %body-small; // OUDS mod: instead of `@include font-size($small-font-size)`
+  font-weight: $small-font-weight; // OUDS mod
 }
 
 
@@ -383,8 +383,7 @@ pre {
   margin-top: 0; // 1
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
-  @include font-size($code-font-size);
-  line-height: $pre-line-height; // OUDS mod
+  @extend %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
@@ -397,9 +396,8 @@ pre {
 
 var, // OUDS mod
 code {
-  @include font-size($code-font-size);
+  @extend %code-medium; // OUDS mod: instead of `@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;
 
@@ -409,9 +407,9 @@ code {
   }
 }
 
-kbd {
+kbd { // TODO LM: Check the rendering
   padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
+  @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
@@ -460,13 +458,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
+  @extend %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 +495,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 +620,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
+  @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
   font-weight: $legend-font-weight;
-  line-height: inherit;
 
   + * {
     clear: left; // 2