Merge branch 'ouds/main-sc-navigation-links' into ouds/2867-his-redes…

…ign-home-page

# Conflicts:
#	scss/_links.scss
#	scss/_variables.scss
#	site/assets/scss/_masthead.scss
#	site/assets/scss/_sidebar.scss
#	site/assets/scss/_toc.scss
#	site/content/docs/0.1/components/buttons.md
#	site/content/docs/0.1/components/links.md
#	site/content/docs/0.1/examples/loading-buttons/index.html
#	site/content/docs/0.1/helpers/stacks.md
#	site/layouts/_default/single.html
#	site/layouts/partials/home/masthead.html
#	site/static/docs/0.1/assets/img/examples/loading-buttons.png
#	site/static/docs/0.1/assets/img/examples/loading-buttons@2x.png

scss/_links.scss

@@ -15,8 +15,10 @@
 }
 
 .link {
+  // scss-docs-start link-css-vars
   --#{$prefix}link-icon-size: #{$ouds-link-size-icon-medium};
   --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-medium};
+  // scss-docs-end link-css-vars
 
   @extend a;
   @include get-font-size("label-large");

scss/_reboot.scss

@@ -393,7 +393,7 @@ a {
 // causes specificity issues in many other styles that are too complex to fix.
 // See https://github.com/twbs/bootstrap/issues/19402
 
-a:not([href]):not([class]) {
+a:not([href]):not([class]):not([aria-disabled="true"]) {
   &,
   &:hover {
     color: inherit;

scss/_variables.scss

@@ -487,30 +487,18 @@ $body-emphasis-color:       $ouds-color-content-default-light !default; // OUDS
 //
 // Style anchor elements.
 
+// scss-docs-start link-variables
 $link-color:                              $black !default; // OUDS mod
 $link-decoration:                         underline !default;
 $link-font-weight:                        $ouds-font-weight-strong !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        $primary !default; // OUDS mod
-$link-hover-decoration:                   $link-decoration !default;
+$link-hover-decoration:                   null !default;
+// scss-docs-end link-variables
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
-// OUDS mod
-// $ouds-link-chevron-after-transform:       rotate(.5turn) translateY(1px) !default;
-// End mod
-
-// Icon links
-// $icon-link-gap:               .3125rem !default; // OUDS mod: instead of `.375rem`
-// $icon-link-underline-offset:  .25em !default;
-// $icon-link-icon-size:         1em !default;
-// scss-docs-start icon-link-variables
-// $icon-link-icon-transition:   .2s ease-in-out transform !default;
-// $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
-// scss-docs-end icon-link-variables
-
-
 // Paragraphs
 //
 // Style p element.
@@ -2154,7 +2142,7 @@ $back-to-top-title-color:        var(--#{$prefix}body-color) !default;
 $back-to-top-title-bg-color:     var(--#{$prefix}body-bg) !default;
 $back-to-top-bg:                 var(--#{$prefix}highlight-color) !default;
 $back-to-top-icon:               var(--#{$prefix}chevron-icon) !default;
-$back-to-top-icon-width:         add(3rem, 1px) !default;
+$back-to-top-icon-width:         add(.5rem, 1px) !default;
 $back-to-top-icon-height:        subtract(1rem, 1px) !default;
 // scss-docs-end back-to-top
 

site/assets/scss/_sidebar.scss

@@ -51,7 +51,7 @@
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: 1.375rem; // OUDS mod: changed value
-  font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem`
+  @include get-font-size("body-small");// OUDS mod: instead of `1rem`
   font-weight: 400; // OUDS mod: no 'bold' for the sidebar links
   // OUDS mod: no `color`
   text-decoration: if($link-decoration == none, null, none);

site/assets/scss/_toc.scss

@@ -27,7 +27,7 @@
     a {
       display: block;
       padding: $ouds-space-fixed-shortest 0 $ouds-space-fixed-shortest $ouds-space-fixed-medium; // OUDS mod
-      font-size: var(--#{$prefix}font-size-body-small); // OUDS mod: instead of `1rem`
+      @include get-font-size("body-small"); // OUDS mod: instead of `1rem`
       font-weight: 400; // OUDS mod: no 'bold' for the sidebar links
       color: inherit;
       text-decoration: none;

site/content/docs/0.1/components/buttons.md

@@ -58,7 +58,7 @@ OUDS Web offers a few variations to use on [colored backgrounds]({{< docsref "/u
 
 {{< callout warning >}}
 **Heads up!**
-- Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [backgrounds documentation]({{< docsref "/utilities/background/#data-bs-theme-attribute" >}})
+- Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [colored backgrounds documentation]({{< docsref "/utilities/background/#colored-backgrounds" >}})
 - Negative buttons should never be used on colored background.
 {{< /callout >}}
 
@@ -128,7 +128,8 @@ We strongly advise not using an `<img>`, in particular because the icon will not
   </button>
 
   <button type="button" class="btn btn-default">
-    <span class="icon si si-settings" aria-hidden="true"></span>Default
+    <span class="icon si si-settings" aria-hidden="true"></span>
+    Default
   </button>
 </div>
 
@@ -293,9 +294,9 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 
 Disabled buttons using the `<a>` element behave a bit different:
 
-- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons.
 - Disabled buttons using `<a>` must include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies and to make it visually appear disabled.
-- Disabled buttons using `<a>` *should not* include the `href` attribute.
+- Disabled buttons using `<a>` *should not* include the `href` attribute. In case you need to keep the `href`, please refer to [link functionality caveat](#link-functionality-caveat).
+- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons.
 
 {{< example class="p-none" >}}
 <div class="p-tall d-flex gap-shorter flex-wrap">

site/content/docs/0.1/components/links.md

@@ -22,6 +22,17 @@ Visited links don't have a specific style by default. The `:visited` status can
 </div>
 {{< /example >}}
 
+The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles.
+
+## Variants on colored background
+
+OUDS Web offers a few variations to use on [colored backgrounds]({{< docsref "/utilities/background#colored-background" >}}). Their accessibility (readability) is ensured by suitable semi-opaque backgrounds.
+
+{{< callout warning >}}
+**Heads up!**
+- Background utilities used to make colored backgrounds, should always be used with the appropriate color theme (see an example below). Please refer to [backgrounds documentation]({{< docsref "/utilities/background/#data-bs-theme-attribute" >}})
+{{< /callout >}}
+
 {{< example class="p-none">}}
 <div class="bg-brand-primary p-tall">
   <div data-bs-theme="light">
@@ -43,15 +54,13 @@ Visited links don't have a specific style by default. The `:visited` status can
 </div>
 {{< /example >}}
 
-The `.link` class is intended to be used in conjunction with our link variants used to display chevron or icon, or to serve as a basis for your own custom styles.
-
 ## Link chevron
 
 Add `.link-chevron` to enhance your link with a chevron on the right side. Use the additional `.back` class to display the chevron on the left side.
 
 {{< example >}}
 <div><a class="link link-chevron" href="#">This is an example of a link with chevron</a></div>
-<div><a class="link link-chevron back" href="#">This is an example of a link with chevron</a></div>
+<div><a class="link link-chevron back" href="#">This is an example of a link with a back chevron</a></div>
 {{< /example >}}
 
 ## Icon link
@@ -88,6 +97,20 @@ Add `.icon-link-hover` to move the icon to the right on hover.
 {{< /example >}}
 {{< /bootstrap-compatibility >}}
 
+## CSS
+
+### Variables
+
+As part of OUDS Web's evolving CSS variables approach, links use local CSS variables on `.link` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported too.
+
+{{< scss-docs name="link-css-vars" file="scss/_links.scss" >}}
+
+Each `.link-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules.
+
+### Sass variables
+
+{{< scss-docs name="link-variables" file="scss/_variables.scss" >}}
+
 ### Component tokens
 
 {{< scss-docs name="ouds-component-link" file="scss/tokens/_component.scss" >}}

site/content/docs/0.1/examples/loading-buttons/index.html

@@ -13,11 +13,11 @@
 ---
 
 <main class="container-fluid container-max-width">
-  <h1 class="py-medium">Loading buttons</h1>
+  <h1 class="py-medium">Button loading states</h1>
 
   <p>Find here some examples of how to implement a live loading button, for an indeterminate or determinate time. These examples are not part of the OUDS Web library and must be adapted to your project. You can find the code below.</p>
 
-  <h2 class="py-short">Loading button in an indeterminate time</h2>
+  <h2 class="py-short">Indeterminate loading</h2>
   <p>For this example, the time is set to 5 seconds by Javascript, but in a real project, you just need a callback when the action is finished. An update to the status is done every second to let the user know the download is still ongoing. This interval should be adapted to your context. Each time, a dot is added to the message to make sure it will change and then be vocalized by the screen readers.</p>
   <div class="row py-taller">
     <div class="col-8">
@@ -61,7 +61,7 @@ <h2 class="py-short">Loading button in an indeterminate time</h2>
     </div>
   </div>
 
-  <h2 class="py-short">Loading buttons in a determinate time</h2>
+  <h2 class="py-short">Determinate loading</h2>
   <p>If known, the loading time must be set directly on the button, through the CSS variable <code>--btn-loading-time</code>. In this example, it is set to 4s for the 1st button, 6s for the 2nd button, 8s for the 3rd button, and 10s for the 4th button. This value will be used for the icon's animation. An update to the status is done every second, giving the percentage of time that has elapsed. This interval should be adapted to your context.</p>
   <div class="row py-taller">
     <div class="col-8">

site/content/docs/0.1/helpers/stacks.md

@@ -73,13 +73,13 @@ Use `.vstack` to stack buttons and other elements:
 Create an inline form with `.hstack`:
 
 {{< example >}}
-<div class="hstack gap-3">
-  <!-- <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">-->
+<div class="hstack gap-tall">
   <button type="button" class="btn btn-strong">Submit</button>
   <div class="vr"></div>
   <button type="button" class="btn btn-negative">Reset</button>
 </div>
 {{< /example >}}
+<!-- <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">-->
 
 ## CSS
 

site/layouts/_default/single.html

@@ -16,7 +16,9 @@ <h1 class="display-large">{{ .Title | markdownify }}</h1>
             {{ if eq .Title "Examples" -}}
             <div class="d-flex flex-column flex-sm-row">
               <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-strong">
-                <svg width="1.25rem" height="1.25rem" fill="currentColor" class="me-shortest" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+                <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+                  <use xlink:href="../assets/img/ouds-web-sprite.svg#download"/>
+                </svg>
                 Download examples
               </a>
               <a href="{{ .Site.Params.download.source }}" class="btn btn-default mt-tall mt-sm-none ms-sm-tall">

site/layouts/partials/examples/main.html

@@ -31,7 +31,9 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       {{ if $entry.external -}}
         <div class="col-md-6 col-lg-4 mb-tall d-flex gap-tall">
-          <svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
+          <div class="bi fs-hm flex-shrink-0" style="margin-top: -5px;">
+            {{ partial "icons/github.svg" }}
+          </div>
           <div>
             <h3 class="h5 mb-shortest">
               <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener">