Some typos and some specific CSS

louismaximepiton · louismaximepiton · commit 88f7c94834c2 · 2026-02-11T14:07:17.000+01:00
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -30,7 +30,7 @@
     @include border-top-end-radius(var(--#{$prefix}alert-border-radius));
   }
 
-  &:not(:has(p:not(.alert-label), .bullet-list, .alert-container .link)) .btn {
+  &:not(:has(.alert-text-container p:not(.alert-label), .bullet-list, .alert-container .link)) .btn {
     @include border-bottom-end-radius(var(--#{$prefix}alert-border-radius));
   }
 }
diff --git a/site/src/components/head/ScssProd.astro b/site/src/components/head/ScssProd.astro
@@ -19,7 +19,6 @@
     @import '../../../../packages/orange-compact/scss/tokens';
     @import '../../scss/docs_prod';
     @import '../../../static/orange-compact/docs/[version]/assets/fonts/solaris-icons';
-    @import '../../scss/docs_search';
   }
   [data-bs-brand='sosh'] {
     $brand: 'sosh';
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
@@ -286,9 +286,9 @@ You can set the image via `--bs-alert-icon` wherever inside the `.alert`.
     </div>
   </div>
 
-  <div class="alert alert-message alert-accent" style="--bs-alert-icon: ${getConfig().brand === 'orange' || getConfig().brand === 'orange-business-tools'
+  <div class="alert alert-message alert-accent" style="--bs-alert-icon: ${getConfig().brand === 'orange' || getConfig().brand === 'orange-compact'
         ? `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>&#34;)`
-        : `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/><path d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/></svg>&#34;s)`
+        : `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/><path d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/></svg>&#34;)`
       }">
     <div class="alert-icon"><p class="visually-hidden">Emphasized content</p></div>
     <div class="alert-container">
@@ -747,7 +747,7 @@ Here, only `.alert-negative`, `.alert-positive`, `.alert-info` and `.alert-warni
 
 ##### Non-functional
 
-Non-functional alerts are informative or decorative. They provide context or highlight content without implying a specific state, system event, or user action. These alerts are not tied to UX patterns such as positive, negativepositive, info, or warning, and may use contextual or brand-related icons to enhance recognition or storytelling.
+Non-functional alerts are informative or decorative. They provide context or highlight content without implying a specific state, system event, or user action. These alerts are not tied to UX patterns such as positive, negative, info, or warning, and may use contextual or brand-related icons to enhance recognition or storytelling.
 
 Here, only `.alert-neutral` and `.alert-accent` are considered as non-functional.
 
@@ -791,9 +791,9 @@ You can set the image via `--bs-alert-icon` wherever inside the `.alert`.
     <p class="alert-label">Your data plan includes free calls on weekends.</p>
   </div>
 
-  <div class="alert alert-accent" style="--bs-alert-icon: ${getConfig().brand === 'orange' || getConfig().brand === 'orange-business-tools'
+  <div class="alert alert-accent" style="--bs-alert-icon: ${getConfig().brand === 'orange' || getConfig().brand === 'orange-compact'
         ? `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>&#34;)`
-        : `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/><path d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/></svg>&#34;s)`
+        : `url(&#34;data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/><path d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/></svg>&#34;)`
       }">
     <div class="alert-icon"><p class="visually-hidden">Emphasized content</p></div>
     <p class="alert-label">Upgrade your plan and get a free device.</p>
diff --git a/site/src/content/docs/components/bullet-list.mdx b/site/src/content/docs/components/bullet-list.mdx
@@ -154,7 +154,7 @@ To have a different marker icon for each item on the same level, add the class o
 
 The tick marker is not shipped by default in the OUDS Web CSS, set the [`$enable-bullet-list-tick` variable]([[docsref:/foundation/options]]) to `true` to enable the `.bullet-list-tick` class. Do not forget the `.bullet-list-tick` if you have nested lists.
 
-<Example code={`<!--
+<Example class="bd-bullet-list" code={`<!--
     // in your style.scss file before importing OUDS Web source code
     $enable-bullet-list-tick: true;
   -->
diff --git a/site/src/content/docs/dual-mode.mdx b/site/src/content/docs/dual-mode.mdx
@@ -4,6 +4,7 @@ description: This is a tutorial for the dual-mode using Boosted and OUDS Web.
 aliases:
   - "/docs/[[config:docs_version]]/bi-mode/"
   - "/dual-mode/"
+  - "/bi-mode/"
 toc: true
 ---
 
diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
@@ -32,7 +32,11 @@ $enable-cssgrid: true;
 $enable-bullet-list-tick: true;
 // fusv-enable
 @import "../../../scss/grid";
-@import "../../../scss/bullet-list";
+
+// Here to avoid any edge behavior in the docs
+.bd-bullet-list {
+  @import "../../../scss/bullet-list";
+}
 
 // Load docs components
 @import "variables";
diff --git a/site/src/scss/docs_prod.scss b/site/src/scss/docs_prod.scss
@@ -37,7 +37,11 @@ $enable-cssgrid: true;
 $enable-bullet-list-tick: true;
 // fusv-enable
 @import "../../../scss/grid";
-@import "../../../scss/bullet-list";
+
+// Here to avoid any edge behavior in the docs
+.bd-bullet-list {
+  @import "../../../scss/bullet-list";
+}
 
 // Load docs components
 @import "variables";

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`@include border-top-end-radius(var(--#{$prefix}alert-border-radius));`
`31`	`31`	`}`
`32`	`32`
`33`		`- &:not(:has(p:not(.alert-label), .bullet-list, .alert-container .link)) .btn {`
	`33`	`+ &:not(:has(.alert-text-container p:not(.alert-label), .bullet-list, .alert-container .link)) .btn {`
`34`	`34`	`@include border-bottom-end-radius(var(--#{$prefix}alert-border-radius));`
`35`	`35`	`}`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,6 @@`
`19`	`19`	`@import '../../../../packages/orange-compact/scss/tokens';`
`20`	`20`	`@import '../../scss/docs_prod';`
`21`	`21`	`@import '../../../static/orange-compact/docs/[version]/assets/fonts/solaris-icons';`
`22`		`- @import '../../scss/docs_search';`
`23`	`22`	`}`
`24`	`23`	`[data-bs-brand='sosh'] {`
`25`	`24`	`$brand: 'sosh';`