refactor: consistent docs styles

Author: thejackshelton

apps/website/src/routes/docs/headless/carousel/examples/carousel.css

@@ -49,6 +49,10 @@
   padding: 0.5rem;
 }
 
+.carousel-buttons button:hover {
+  background-color: hsla(var(--primary) / 0.08);
+}
+
 .carousel-img {
   pointer-events: none;
 }
@@ -60,4 +64,9 @@
 
 .pagination-underline {
   outline: 2px dotted hsl(var(--primary));
+  background-color: hsla(var(--primary) / 0.08);
+}
+
+.carousel-pagination-bullet:hover {
+  background-color: hsla(var(--primary) / 0.08);
 }

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -7,7 +7,7 @@ import { AnatomyTable } from '~/components/anatomy-table/anatomy-table';
 
 # Collapsible
 
-An interactive component which expands/collapses a panel.
+An interactive section that shows or hides its connected information.
 
 <Showcase name="hero" />
 

apps/website/src/routes/docs/headless/collapsible/snippets/collapsible.css

@@ -16,6 +16,10 @@
   opacity: 0.3;
 }
 
+.collapsible-trigger:hover {
+  background-color: hsla(var(--primary) / 0.08);
+}
+
 .collapsible-trigger[data-open] svg {
   transform: rotate(180deg);
 }

apps/website/src/routes/docs/headless/label/examples/hero.tsx

@@ -1,21 +1,12 @@
-import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Label } from '@qwik-ui/headless';
 import styles from '../snippets/label.css?inline';
 
 export default component$(() => {
-  useStylesScoped$(styles);
+  useStyles$(styles);
 
   return (
-    <div
-      class="label-container"
-      style={{
-        display: 'flex',
-        padding: '0 20px',
-        flexWrap: 'wrap',
-        gap: 15,
-        alignItems: 'center',
-      }}
-    >
+    <div class="label-container">
       <Label class="label" for="firstName">
         First name
       </Label>

apps/website/src/routes/docs/headless/label/snippets/label.css

@@ -8,11 +8,12 @@ input {
   font-weight: 500;
   line-height: 35px;
   color: hsl(var(--foreground));
+  display: flex;
+  flex-direction: column;
 }
 
-input {
+.input {
   width: 200px;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
@@ -21,11 +22,12 @@ input {
   font-size: 15px;
   line-height: 1;
   background-color: hsl(var(--background));
-  box-shadow: 0 0 0 1px hsl(var(--foreground));
+  border: 2px dotted hsl(var(--foreground));
+  border-radius: 0;
 }
 
 input:focus {
-  box-shadow: 0 0 0 2px hsl(var(--foreground));
+  outline: 2px solid hsl(var(--foreground));
 }
 
 input::selection {

apps/website/src/routes/docs/headless/modal/examples/alert-dialog.tsx

@@ -11,10 +11,10 @@ export default component$(() => {
           Are you sure you want to deactivate your account?
         </Modal.Description>
         <footer>
-          <Modal.Close>Cancel</Modal.Close>
-          <Modal.Close>Delete</Modal.Close>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Delete</Modal.Close>
         </footer>
-        <Modal.Close class="modal-close">+</Modal.Close>
+        <Modal.Close class="modal-alert-close">+</Modal.Close>
       </Modal.Panel>
     </Modal.Root>
   );

apps/website/src/routes/docs/headless/modal/examples/animatable.tsx

@@ -22,8 +22,8 @@ export default component$(() => {
           <input type="text" placeholder="[email protected]" />
         </Label>
         <footer>
-          <Modal.Close>Cancel</Modal.Close>
-          <Modal.Close>Save Changes</Modal.Close>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Save Changes</Modal.Close>
         </footer>
       </Modal.Panel>
     </Modal.Root>

apps/website/src/routes/docs/headless/modal/examples/auto-focus.tsx

@@ -22,8 +22,8 @@ export default component$(() => {
           <input autofocus type="text" placeholder="[email protected]" />
         </Label>
         <footer>
-          <Modal.Close>Cancel</Modal.Close>
-          <Modal.Close>Save Changes</Modal.Close>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Save Changes</Modal.Close>
         </footer>
       </Modal.Panel>
     </Modal.Root>

apps/website/src/routes/docs/headless/modal/examples/backdrop-close.tsx

@@ -22,8 +22,8 @@ export default component$(() => {
           <input type="text" placeholder="[email protected]" />
         </Label>
         <footer>
-          <Modal.Close>Cancel</Modal.Close>
-          <Modal.Close>Save Changes</Modal.Close>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Save Changes</Modal.Close>
         </footer>
       </Modal.Panel>
     </Modal.Root>

apps/website/src/routes/docs/headless/modal/examples/backdrop.tsx

@@ -22,8 +22,8 @@ export default component$(() => {
           <input type="text" placeholder="[email protected]" />
         </Label>
         <footer>
-          <Modal.Close>Cancel</Modal.Close>
-          <Modal.Close>Save Changes</Modal.Close>
+          <Modal.Close class="modal-close">Cancel</Modal.Close>
+          <Modal.Close class="modal-close">Save Changes</Modal.Close>
         </footer>
       </Modal.Panel>
     </Modal.Root>