Dark Mode: add placeholders to /dark-mode page (#2391)

Orange-OpenSource · Nov 29, 2023 · 254cf42 · 254cf42
1 parent c595f0a
commit 254cf42
Showing 1 changed file with 187 additions and 0 deletions.
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -9360,3 +9360,190 @@ sitemap_exclude: true
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <a class="link-chevron" href="#" data-bs-theme="light">This is a sample link with chevron</a>
 </div>
+
+### Placeholders
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border p-3">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="dark">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border p-3 bg-body" data-bs-theme="light">
+  <span class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #282d55;">
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="dark" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border p-3" style="background-color: #b5e8f7">
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-primary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-secondary placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-dark placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-success placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-info placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-warning placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-bg-danger placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-green placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-purple placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-yellow placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-blue placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-pink placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-supporting-orange placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-light placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-black bg-white placeholder-glow">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-wave">Text</span>
+  <span data-bs-theme="light" class="placeholder col-12 text-body bg-body placeholder-glow">Text</span>
+</div>