Merge branch 'main' into main-his-form-msg-vmargin

Orange-OpenSource · Jul 3, 2023 · bbcbce0 · bbcbce0
2 parents d50c195 + 94a9591
commit bbcbce0
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 66 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -155,7 +155,8 @@ h1 {
   letter-spacing: $h4-spacing;
 }
 
-h2 {
+h2,
+h3 {
   @extend %heading;
   @include font-size($h5-font-size);
   line-height: $h5-line-height;
@@ -164,7 +165,6 @@ h2 {
   letter-spacing: $h5-spacing;
 }
 
-h3,
 h4,
 h5,
 h6 {

diff --git a/scss/_type.scss b/scss/_type.scss
@@ -108,6 +108,7 @@ h2,
   }
 
   h2,
+  h3,
   .display-4 {
     @include font-size($h3-font-size);
     line-height: $h3-line-height;
@@ -116,8 +117,9 @@ h2,
     letter-spacing: $h3-spacing;
   }
 
-  h3,
   h4,
+  h5,
+  h6,
   .lead {
     @include font-size($h5-font-size);
     line-height: $h5-line-height;
@@ -181,22 +183,15 @@ h2,
     letter-spacing: $h4-spacing;
   }
 
-  h5 {
+  h5,
+  h6 {
     @include font-size($h5-font-size);
     line-height: $h5-line-height;
 
     /* rtl:remove */
     letter-spacing: $h5-spacing;
   }
 
-  h6 {
-    @include font-size($h6-font-size);
-    line-height: $h6-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h6-spacing;
-  }
-
   .lead {
     @include font-size($lead-font-size);
     line-height: $lead-line-height;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -401,6 +401,38 @@
 }
 
 // Boosted mod
+// scss-docs-start sticker-fs-4xl
+.sticker-fs-4xl {
+  font-size: 3.75rem;
+  line-height: 1;
+  letter-spacing: -.125rem;
+}
+// scss-docs-end sticker-fs-4xl
+
+// scss-docs-start sticker-fs-l-3xl
+// scss-docs-start sticker-fs-3xl
+.sticker-fs-3xl {
+  font-size: 2.5rem;
+  line-height: 1;
+  letter-spacing: -.0625rem;
+}
+// scss-docs-end sticker-fs-3xl
+
+.sticker-fs-l {
+  font-size: 1.5rem;
+  line-height: calc(26 / 24); // stylelint-disable-line function-disallowed-list
+  letter-spacing: -.03125rem;
+}
+// scss-docs-end sticker-fs-l-3xl
+
+// scss-docs-start sticker-fs-xl
+.sticker-fs-xl {
+  font-size: 1.875rem;
+  line-height: calc(32 / 30); // stylelint-disable-line function-disallowed-list
+  letter-spacing: -.05rem;
+}
+// scss-docs-end sticker-fs-xl
+
 .border-gray-400 {
   --bs-border-color: #{$gray-400};
 }

diff --git a/site/content/docs/5.3/components/sticker.md b/site/content/docs/5.3/components/sticker.md
@@ -14,12 +14,14 @@ added: "5.2"
 {{< example >}}
 <div class="sticker">
   <p class="mb-0">
-    <span class="display-3 mb-0 d-block">39.99 €</span>
+    <span class="sticker-fs-3xl mb-0 d-block">39.99 €</span>
     <span>Per month</span>
   </p>
 </div>
 {{< /example >}}
 
+{{< scss-docs name="sticker-fs-3xl" file="site/assets/scss/_component-examples.scss" >}}
+
 ## How it works
 
 A **sticker** is basically a rounded container. All its content is centered horizontally and vertically.
@@ -39,9 +41,9 @@ For a better rendering you can use our margin utilities or even CSS.
 {{< callout warning >}}
 **Font sizes and responsiveness**
 
-All the provided examples use our text utilities to facilitate the understanding and to match the examples from the Orange Design System in desktop mode.
+All the provided examples use some specific classes to have non-responsive stickers. You may adapt those classes to your needs.
 
-**Please be aware that those examples are not meant to be responsive** because they will always depend on the context. Indeed the font size will be resized in small screens due to the text utilities. If you do not want this behavior, you could for example set fixed font sizes and add some responsive rules by using `scale()` CSS function.
+**Please be aware that those examples are not meant to be responsive** because they will always depend on the context. If you do not want this behavior, you could add some responsive rules by using `scale()` CSS function.
 {{< /callout >}}
 
 ## Sizes
@@ -53,19 +55,23 @@ Fancy larger or smaller stickers? Add `.sticker-lg` or `.sticker-sm` for additio
 {{< example >}}
 <div class="sticker sticker-lg">
   <p class="mb-0">
-    <span class="display-1">New</span>
+    <span class="sticker-fs-4xl">New</span>
   </p>
 </div>
 {{< /example >}}
 
+{{< scss-docs name="sticker-fs-4xl" file="site/assets/scss/_component-examples.scss" >}}
+
 {{< example >}}
 <div class="sticker sticker-sm">
   <p class="mb-0">
-    <span class="h2">New</span>
+    <span class="sticker-fs-xl">New</span>
   </p>
 </div>
 {{< /example >}}
 
+{{< scss-docs name="sticker-fs-xl" file="site/assets/scss/_component-examples.scss" >}}
+
 ## Accessibility
 
 Since stickers only provide a container, accessibility becomes specific to the sticker content:
@@ -78,14 +84,16 @@ Since stickers only provide a container, accessibility becomes specific to the s
 {{< example >}}
 <div class="sticker">
   <p class="mb-1">
-    <span class="h3 mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
-    <span class="display-3 mb-0 d-block" aria-hidden="true">39.99 €</span>
+    <span class="sticker-fs-l mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+    <span class="sticker-fs-3xl mb-0 d-block" aria-hidden="true">39.99 €</span>
     <span aria-hidden="true">Per month</span>
     <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
   </p>
 </div>
 {{< /example >}}
 
+{{< scss-docs name="sticker-fs-l-3xl" file="site/assets/scss/_component-examples.scss" >}}
+
 ## CSS
 
 ### Variables

diff --git a/site/content/docs/5.3/content/typography.md b/site/content/docs/5.3/content/typography.md
@@ -31,9 +31,10 @@ All HTML headings, `<h1>` through `<h6>`, are available.
 | --- | --- | --- | --- | --- | --- |
 | `<h1></h1>` | Bold 2.125rem <small class="text-body-secondary">(34px)</small> | Bold 2.125rem <small class="text-body-secondary">(34px)</small> | Bold 1.5rem <small class="text-body-secondary">(24px)</small> | 1 <small class="text-body-secondary">(34px)</small> | -0.0625rem <small class="text-body-secondary">(-1px)</small> |
 | `<h2></h2>` | Bold 1.875rem <small class="text-body-secondary">(30px)</small> | Bold 1.5rem <small class="text-body-secondary">(24px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | 1.067 <small class="text-body-secondary">(32px)</small> | -0.05rem <small class="text-body-secondary">(-0.8px)</small> |
-| `<h3></h3>` | Bold 1.5rem <small class="text-body-secondary">(24px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1rem <small class="text-body-secondary">(16px)</small> | 1.083 <small class="text-body-secondary">(26px)</small> | -0.03125rem <small class="text-body-secondary">(-0.5px)</small> |
-| `<h4></h4>` | Bold 1.25rem <small class="text-body-secondary">(20px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | | 1.1 <small class="text-body-secondary">(22px)</small> | -0.025rem <small class="text-body-secondary">(-0.4px)</small> |
-| `<h5></h5>` | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1rem <small class="text-body-secondary">(16px)</small> | | 1.111 <small class="text-body-secondary">(20px)</small> | -0.0125rem <small class="text-body-secondary">(-0.2px)</small> |
+| `<h3></h3>` | Bold 1.5rem <small class="text-body-secondary">(24px)</small> | Bold 1.5rem <small class="text-body-secondary">(24px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | 1.083 <small class="text-body-secondary">(26px)</small> | -0.03125rem <small class="text-body-secondary">(-0.5px)</small> |
+| `<h4></h4>` | Bold 1.25rem <small class="text-body-secondary">(20px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1.125rem <small class="text-body-secondary">(16px)</small> | 1.1 <small class="text-body-secondary">(22px)</small> | -0.025rem <small class="text-body-secondary">(-0.4px)</small> |
+| `<h5></h5>` | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1rem <small class="text-body-secondary">(16px)</small> | 1.111 <small class="text-body-secondary">(20px)</small> | -0.0125rem <small class="text-body-secondary">(-0.2px)</small> |
+| `<h6></h6>` | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1.125rem <small class="text-body-secondary">(18px)</small> | Bold 1rem <small class="text-body-secondary">(16px)</small> | 1.111 <small class="text-body-secondary">(20px)</small> | -0.0125rem <small class="text-body-secondary">(-0.2px)</small> |
 {{< /bs-table >}}
 <!-- End mod -->