feat(docs): add some docs CSS to examples

Author: louismaximepiton

site/src/assets/examples/loading-buttons/index.astro

@@ -112,7 +112,7 @@ export const aliases = [
         </button>
       </h2>
       <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#code-accordion">
-        <div class="accordion-body border border-subtle p-none">
+        <div class="accordion-body p-none mt-large mb-scaled-3xlarge">
           <JsDocs name="live-loading-buttons" file="site/src/assets/examples/loading-buttons/loading-buttons.js" />
         </div>
       </div>

site/src/assets/examples/loading-buttons/loading-buttons.css

@@ -1,15 +1,3 @@
 .accordion-item {
   max-width: 55rem;
 }
-
-.accordion-body {
-  margin-bottom: 5rem;
-}
-
-.accordion-body .highlight {
-  padding: 24px 24px 0;
-}
-
-.accordion-collapse {
-  background-color: var(--bs-color-bg-secondary);
-}

site/src/layouts/ExamplesLayout.astro

@@ -44,6 +44,19 @@ const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', di
     <Stylesheet direction={direction} layout="examples" />
     <Favicons />
 
+    <style is:global lang="scss">
+      @import '../../../scss/config';
+      @import '../../../scss/functions';
+      @import '../../../packages/orange/scss/tokens';
+      @import '../../../scss/variables';
+      @import '../../../scss/variables-dark';
+      @import '../../../scss/maps';
+      @import '../../../scss/mixins';
+      @import '../scss/variables';
+      @import '../scss/component-examples';
+      @import '../scss/syntax';
+    </style>
+
     <style is:global>
       .bd-placeholder-img {
         font-size: 1.125rem;