@prosefly/astro-components 0.3.0 → 0.4.0

package/README.md

@@ -104,25 +104,25 @@ import '@prosefly/astro-components/markdown/image-gallery.css';
 
 ## Styling
 
-Consumers can theme the components with `--pl-*` custom properties:
-
-- `--pl-text-strong`
-- `--pl-text`
-- `--pl-text-muted`
-- `--pl-background`
-- `--pl-surface`
-- `--pl-accent`
-- `--pl-accent-soft`
-- `--pl-accent-contrast`
-- `--pl-{info|success|warning|danger}`
-- `--pl-{info|success|warning|danger}-soft`
-- `--pl-{info|success|warning|danger}-ink`
-- `--pl-{info|success|warning|danger}-contrast`
-- `--pl-callout-{note|tip|warning|danger}-{color|ink|bg}`
-- `--pl-border-subtle`
-- `--pl-font-sans`
-- `--pl-font-mono`
-- `--pl-radius-sm`
-- `--pl-radius-md`
-- `--pl-radius-lg`
-- `--pl-radius-full`
+Consumers can theme the components with `--pf-*` custom properties:
+
+- `--pf-text-strong`
+- `--pf-text`
+- `--pf-text-muted`
+- `--pf-background`
+- `--pf-surface`
+- `--pf-accent`
+- `--pf-accent-soft`
+- `--pf-accent-contrast`
+- `--pf-{info|success|warning|danger}`
+- `--pf-{info|success|warning|danger}-soft`
+- `--pf-{info|success|warning|danger}-ink`
+- `--pf-{info|success|warning|danger}-contrast`
+- `--pf-callout-{note|tip|warning|danger}-{color|ink|bg}`
+- `--pf-border-subtle`
+- `--pf-font-sans`
+- `--pf-font-mono`
+- `--pf-radius-sm`
+- `--pf-radius-md`
+- `--pf-radius-lg`
+- `--pf-radius-full`

package/dist/client/accordions.js

@@ -1,6 +1,6 @@
 export {};
 function getItems(root) {
-    return [...root.querySelectorAll(':scope > [data-pl-accordion]')].filter((item) => item instanceof HTMLDetailsElement);
+    return [...root.querySelectorAll(':scope > [data-pf-accordion]')].filter((item) => item instanceof HTMLDetailsElement);
 }
 function closeSiblings(root, activeItem) {
     if (root.hasAttribute('data-multiple'))
@@ -11,7 +11,7 @@ function closeSiblings(root, activeItem) {
     }
 }
 function openItem(item) {
-    const root = item.closest('[data-pl-accordions]');
+    const root = item.closest('[data-pf-accordions]');
     item.open = true;
     if (root)
         closeSiblings(root, item);
@@ -21,17 +21,17 @@ function openHashTarget() {
         return;
     const id = decodeURIComponent(location.hash.slice(1));
     const item = document.getElementById(id);
-    if (item instanceof HTMLDetailsElement && item.matches('[data-pl-accordion]')) {
+    if (item instanceof HTMLDetailsElement && item.matches('[data-pf-accordion]')) {
         openItem(item);
     }
 }
 if (!window.__proseflyAccordionsInit) {
     window.__proseflyAccordionsInit = () => {
-        document.querySelectorAll('[data-pl-accordions]').forEach((root) => {
-            if (!(root instanceof HTMLElement) || root.dataset.plAccordionsReady === 'true') {
+        document.querySelectorAll('[data-pf-accordions]').forEach((root) => {
+            if (!(root instanceof HTMLElement) || root.dataset.pfAccordionsReady === 'true') {
                 return;
             }
-            root.dataset.plAccordionsReady = 'true';
+            root.dataset.pfAccordionsReady = 'true';
             let defaultValues = [];
             try {
                 defaultValues = JSON.parse(root.getAttribute('data-default-values') || '[]');
@@ -44,7 +44,7 @@ if (!window.__proseflyAccordionsInit) {
                     openItem(item);
                 }
                 item.addEventListener('click', (event) => {
-                    if (!(event.target instanceof Element) || !event.target.closest('[data-pl-accordion-trigger]')) {
+                    if (!(event.target instanceof Element) || !event.target.closest('[data-pf-accordion-trigger]')) {
                         return;
                     }
                     if (item.getAttribute('data-disabled') === 'true') {

package/dist/client/image-gallery.js

@@ -29,7 +29,7 @@ function getItemLeft(track, item) {
     return item.getBoundingClientRect().left - track.getBoundingClientRect().left + track.scrollLeft;
 }
 function scrollToAdjacentItem(track, direction) {
-    const items = [...track.querySelectorAll('.pl-image-gallery__item')].filter((item) => item instanceof HTMLElement);
+    const items = [...track.querySelectorAll('.pf-image-gallery__item')].filter((item) => item instanceof HTMLElement);
     const currentLeft = track.scrollLeft;
     const positions = items.map((item) => getItemLeft(track, item));
     const target = direction === 'previous'
@@ -41,7 +41,7 @@ function scrollToAdjacentItem(track, direction) {
     });
 }
 function measureGallery(gallery, track) {
-    const items = [...track.querySelectorAll('.pl-image-gallery__item')].filter((item) => item instanceof HTMLElement);
+    const items = [...track.querySelectorAll('.pf-image-gallery__item')].filter((item) => item instanceof HTMLElement);
     const images = items
         .map((item) => item.querySelector('img'))
         .filter((image) => image instanceof HTMLImageElement);
@@ -57,14 +57,14 @@ function measureGallery(gallery, track) {
     const resolvedRatios = ratios;
     const styles = getComputedStyle(track);
     const gap = Number.parseFloat(styles.columnGap || styles.gap || '0') || 0;
-    const previewWidth = resolveCssLength(getComputedStyle(gallery).getPropertyValue('--pl-image-gallery-preview-width'), gallery);
+    const previewWidth = resolveCssLength(getComputedStyle(gallery).getPropertyValue('--pf-image-gallery-preview-width'), gallery);
     const firstRatio = resolvedRatios[0];
     const targetHeight = Math.max((track.clientWidth - previewWidth - gap) / firstRatio, 1);
-    gallery.style.setProperty('--pl-image-gallery-height', `${targetHeight.toFixed(2)}px`);
-    gallery.dataset.plImageGalleryMeasured = 'true';
+    gallery.style.setProperty('--pf-image-gallery-height', `${targetHeight.toFixed(2)}px`);
+    gallery.dataset.pfImageGalleryMeasured = 'true';
     items.forEach((item, index) => {
         const ratio = resolvedRatios[index];
-        item.style.setProperty('--pl-image-gallery-ratio', ratio.toFixed(5));
+        item.style.setProperty('--pf-image-gallery-ratio', ratio.toFixed(5));
         item.style.height = `${targetHeight.toFixed(2)}px`;
         item.style.width = `${Math.max(targetHeight * ratio, 1).toFixed(2)}px`;
     });
@@ -72,25 +72,25 @@ function measureGallery(gallery, track) {
 if (typeof window !== 'undefined') {
     if (!window.__proseflyImageGalleryInit) {
         window.__proseflyImageGalleryInit = () => {
-            document.querySelectorAll('[data-pl-image-gallery]').forEach((gallery) => {
-                if (!(gallery instanceof HTMLElement) || gallery.dataset.plImageGalleryReady) {
+            document.querySelectorAll('[data-pf-image-gallery]').forEach((gallery) => {
+                if (!(gallery instanceof HTMLElement) || gallery.dataset.pfImageGalleryReady) {
                     return;
                 }
-                const track = gallery.querySelector('[data-pl-image-gallery-track]');
+                const track = gallery.querySelector('[data-pf-image-gallery-track]');
                 if (!(track instanceof HTMLElement)) {
                     return;
                 }
-                gallery.dataset.plImageGalleryReady = 'true';
+                gallery.dataset.pfImageGalleryReady = 'true';
                 const measure = () => measureGallery(gallery, track);
                 const images = [...track.querySelectorAll('img')].filter((image) => image instanceof HTMLImageElement);
                 Promise.all(images.map(imageReady)).then(measure);
                 new ResizeObserver(measure).observe(track);
-                gallery.querySelectorAll('[data-pl-image-gallery-button]').forEach((button) => {
+                gallery.querySelectorAll('[data-pf-image-gallery-button]').forEach((button) => {
                     if (!(button instanceof HTMLButtonElement)) {
                         return;
                     }
                     button.addEventListener('click', () => {
-                        const direction = button.getAttribute('data-pl-image-gallery-button');
+                        const direction = button.getAttribute('data-pf-image-gallery-button');
                         scrollToAdjacentItem(track, direction === 'previous' ? 'previous' : 'next');
                     });
                 });

package/dist/client/tabs.js

@@ -3,7 +3,7 @@ function getStoredLabel(syncKey) {
     if (!syncKey)
         return undefined;
     try {
-        return localStorage.getItem(`pl-tabs:${syncKey}`) ?? undefined;
+        return localStorage.getItem(`pf-tabs:${syncKey}`) ?? undefined;
     }
     catch {
         return undefined;
@@ -13,7 +13,7 @@ function storeLabel(syncKey, label) {
     if (!syncKey || !label)
         return;
     try {
-        localStorage.setItem(`pl-tabs:${syncKey}`, label);
+        localStorage.setItem(`pf-tabs:${syncKey}`, label);
     }
     catch {
         // Ignore storage failures in restricted browsing contexts.
@@ -27,26 +27,26 @@ async function writeClipboard(text) {
     throw new Error('Clipboard API is not available.');
 }
 function setCopyState(button, copied) {
-    const copyIcon = button.querySelector('[data-pl-tabs-copy-icon="copy"]');
-    const checkIcon = button.querySelector('[data-pl-tabs-copy-icon="check"]');
+    const copyIcon = button.querySelector('[data-pf-tabs-copy-icon="copy"]');
+    const checkIcon = button.querySelector('[data-pf-tabs-copy-icon="check"]');
     copyIcon?.toggleAttribute('hidden', copied);
     checkIcon?.toggleAttribute('hidden', !copied);
     button.setAttribute('aria-label', copied ? 'Copied' : 'Copy code');
     button.setAttribute('title', copied ? 'Copied' : 'Copy code');
 }
 function getActiveCode(root) {
-    const activePanel = root.querySelector('.pl-tabs__panel:not([hidden])');
+    const activePanel = root.querySelector('.pf-tabs__panel:not([hidden])');
     const code = activePanel?.querySelector('pre code');
     return code?.textContent ?? '';
 }
 function setActiveIcon(root, panelId) {
-    const iconContainer = root.querySelector('.pl-tabs__active-icons');
-    const icons = [...root.querySelectorAll('[data-pl-tabs-icon-for]')];
+    const iconContainer = root.querySelector('.pf-tabs__active-icons');
+    const icons = [...root.querySelectorAll('[data-pf-tabs-icon-for]')];
     if (!(iconContainer instanceof HTMLElement))
         return;
     let hasActiveIcon = false;
     icons.forEach((icon) => {
-        const isActive = icon.getAttribute('data-pl-tabs-icon-for') === panelId;
+        const isActive = icon.getAttribute('data-pf-tabs-icon-for') === panelId;
         icon.toggleAttribute('hidden', !isActive);
         hasActiveIcon ||= isActive;
     });
@@ -56,8 +56,8 @@ function activate(root, trigger, options = {}) {
     const panelId = trigger.getAttribute('data-tab-panel');
     const label = trigger.getAttribute('data-tab-label');
     const syncKey = root.getAttribute('data-sync-key');
-    const triggers = [...root.querySelectorAll('[data-pl-tabs-trigger]')];
-    const panels = [...root.querySelectorAll('.pl-tabs__panel')];
+    const triggers = [...root.querySelectorAll('[data-pf-tabs-trigger]')];
+    const panels = [...root.querySelectorAll('.pf-tabs__panel')];
     triggers.forEach((button) => {
         const isActive = button === trigger;
         button.setAttribute('aria-selected', isActive ? 'true' : 'false');
@@ -77,12 +77,12 @@ function activate(root, trigger, options = {}) {
     if (!syncKey || !label) {
         return;
     }
-    document.querySelectorAll('[data-pl-tabs]').forEach((otherRoot) => {
+    document.querySelectorAll('[data-pf-tabs]').forEach((otherRoot) => {
         if (otherRoot === root || otherRoot.getAttribute('data-sync-key') !== syncKey) {
             return;
         }
         const matchingTrigger = [
-            ...otherRoot.querySelectorAll('[data-pl-tabs-trigger]'),
+            ...otherRoot.querySelectorAll('[data-pf-tabs-trigger]'),
         ].find((button) => button.getAttribute('data-tab-label') === label);
         if (matchingTrigger) {
             activate(otherRoot, matchingTrigger, { persist: false });
@@ -91,11 +91,11 @@ function activate(root, trigger, options = {}) {
 }
 if (!window.__proseflyTabsInit) {
     window.__proseflyTabsInit = () => {
-        document.querySelectorAll('[data-pl-tabs]').forEach((root) => {
-            if (root instanceof HTMLElement && root.dataset.plTabsReady === 'true') {
+        document.querySelectorAll('[data-pf-tabs]').forEach((root) => {
+            if (root instanceof HTMLElement && root.dataset.pfTabsReady === 'true') {
                 return;
             }
-            const triggers = [...root.querySelectorAll('[data-pl-tabs-trigger]')];
+            const triggers = [...root.querySelectorAll('[data-pf-tabs-trigger]')];
             const syncKey = root.getAttribute('data-sync-key');
             const storedLabel = getStoredLabel(syncKey);
             const storedTrigger = storedLabel
@@ -105,7 +105,7 @@ if (!window.__proseflyTabsInit) {
                 triggers.find((button) => button.getAttribute('aria-selected') === 'true') ??
                 triggers[0];
             if (root instanceof HTMLElement) {
-                root.dataset.plTabsReady = 'true';
+                root.dataset.pfTabsReady = 'true';
             }
             if (selectedTrigger) {
                 activate(root, selectedTrigger, { persist: false });
@@ -133,7 +133,7 @@ if (!window.__proseflyTabsInit) {
                     activate(root, nextTrigger, { focus: true });
                 });
             });
-            root.querySelectorAll('[data-pl-tabs-copy]').forEach((button) => {
+            root.querySelectorAll('[data-pf-tabs-copy]').forEach((button) => {
                 if (!(button instanceof HTMLButtonElement)) {
                     return;
                 }

package/dist/markdown/image-gallery-plugin.js

@@ -41,7 +41,7 @@ function createImageGallery(images) {
             type: 'element',
             tagName: 'figure',
             properties: {
-                className: ['pl-image-gallery'],
+                className: ['pf-image-gallery'],
                 dataImageCount: String(imageCount),
             },
             children: images,
@@ -51,9 +51,9 @@ function createImageGallery(images) {
         type: 'element',
         tagName: 'figure',
         properties: {
-            className: ['pl-image-gallery'],
+            className: ['pf-image-gallery'],
             dataImageCount: String(imageCount),
-            dataPlImageGallery: '',
+            dataPfImageGallery: '',
         },
         children: [
             createGalleryButton('previous'),
@@ -61,8 +61,8 @@ function createImageGallery(images) {
                 type: 'element',
                 tagName: 'div',
                 properties: {
-                    className: ['pl-image-gallery__track'],
-                    dataPlImageGalleryTrack: '',
+                    className: ['pf-image-gallery__track'],
+                    dataPfImageGalleryTrack: '',
                 },
                 children: images.map(createGalleryItem),
             },
@@ -75,7 +75,7 @@ function createGalleryItem(image) {
         type: 'element',
         tagName: 'span',
         properties: {
-            className: ['pl-image-gallery__item'],
+            className: ['pf-image-gallery__item'],
         },
         children: [image],
     };
@@ -86,8 +86,8 @@ function createGalleryButton(direction) {
         tagName: 'button',
         properties: {
             ariaLabel: direction === 'previous' ? 'Previous image' : 'Next image',
-            className: ['pl-image-gallery__button'],
-            dataPlImageGalleryButton: direction,
+            className: ['pf-image-gallery__button'],
+            dataPfImageGalleryButton: direction,
             type: 'button',
         },
         children: [createChevronIcon(direction)],
@@ -99,7 +99,7 @@ function createChevronIcon(direction) {
         tagName: 'svg',
         properties: {
             ariaHidden: 'true',
-            className: ['pl-image-gallery__button-icon'],
+            className: ['pf-image-gallery__button-icon'],
             fill: 'none',
             height: '20',
             stroke: 'currentColor',

package/dist/markdown/image-gallery.css

@@ -1,19 +1,21 @@
-.pl-image-gallery {
+@import "../theme-tokens.css";
+
+.pf-image-gallery {
   margin-inline: 0;
 }
 
-.pl-image-gallery img {
+.pf-image-gallery img {
   display: block;
   margin: 0;
   width: 100%;
 }
 
-.pl-image-gallery:not([data-image-count="1"]) {
-  --pl-image-gallery-preview-width: 4rem;
+.pf-image-gallery:not([data-image-count="1"]) {
+  --pf-image-gallery-preview-width: 4rem;
   position: relative;
 }
 
-.pl-image-gallery__track {
+.pf-image-gallery__track {
   align-items: flex-start;
   display: flex;
   gap: 0.75rem;
@@ -26,23 +28,23 @@
   scrollbar-width: none;
 }
 
-.pl-image-gallery__track::-webkit-scrollbar {
+.pf-image-gallery__track::-webkit-scrollbar {
   display: none;
 }
 
-.pl-image-gallery__item {
+.pf-image-gallery__item {
   align-items: center;
-  aspect-ratio: var(--pl-image-gallery-ratio, 3 / 2);
-  border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
+  aspect-ratio: var(--pf-image-gallery-ratio, 3 / 2);
+  border-radius: min(var(--pf-radius-lg, 0.75rem), 1rem);
   display: flex;
   flex: 0 0 auto;
   justify-content: center;
   overflow: hidden;
   scroll-snap-align: start;
-  width: calc(100% - var(--pl-image-gallery-preview-width));
+  width: calc(100% - var(--pf-image-gallery-preview-width));
 }
 
-.pl-image-gallery__item img {
+.pf-image-gallery__item img {
   border-radius: inherit;
   height: 100%;
   object-fit: contain;
@@ -50,19 +52,19 @@
 }
 
 @media (max-width: 640px) {
-  .pl-image-gallery:not([data-image-count="1"]) {
-    --pl-image-gallery-preview-width: 2.75rem;
+  .pf-image-gallery:not([data-image-count="1"]) {
+    --pf-image-gallery-preview-width: 2.75rem;
   }
 }
 
-.pl-image-gallery__button {
+.pf-image-gallery__button {
   align-items: center;
   appearance: none;
   backdrop-filter: blur(8px);
-  background: color-mix(in oklab, var(--pl-background, #ffffff) 82%, transparent);
-  border: 1px solid color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
-  border-radius: var(--pl-radius-full, 999px);
-  color: var(--pl-text-strong, var(--pl-text, #182230));
+  background: color-mix(in oklab, var(--pf-background, #ffffff) 82%, transparent);
+  border: 1px solid color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
+  border-radius: var(--pf-radius-full, 999px);
+  color: var(--pf-text-strong, var(--pf-text, #182230));
   cursor: pointer;
   display: inline-flex;
   height: 2rem;
@@ -81,38 +83,38 @@
   z-index: 1;
 }
 
-.pl-image-gallery__button[data-pl-image-gallery-button="previous"] {
+.pf-image-gallery__button[data-pf-image-gallery-button="previous"] {
   inset-inline-start: 0.75rem;
 }
 
-.pl-image-gallery__button[data-pl-image-gallery-button="next"] {
+.pf-image-gallery__button[data-pf-image-gallery-button="next"] {
   inset-inline-end: 0.75rem;
 }
 
-.pl-image-gallery__button:hover {
-  background: color-mix(in oklab, var(--pl-background, #ffffff) 94%, transparent);
-  border-color: color-mix(in oklab, var(--pl-text-muted, #667085) 30%, transparent);
+.pf-image-gallery__button:hover {
+  background: color-mix(in oklab, var(--pf-background, #ffffff) 94%, transparent);
+  border-color: color-mix(in oklab, var(--pf-text-muted, #667085) 30%, transparent);
 }
 
-.pl-image-gallery__button:focus-visible {
-  outline: 2px solid var(--pl-accent, #4f46e5);
+.pf-image-gallery__button:focus-visible {
+  outline: 2px solid var(--pf-accent, #3e7e55);
   outline-offset: 2px;
 }
 
-.pl-image-gallery__button-icon {
+.pf-image-gallery__button-icon {
   display: block;
   height: 1.125rem;
   width: 1.125rem;
 }
 
 @media (hover: hover) {
-  .pl-image-gallery__button {
+  .pf-image-gallery__button {
     opacity: 0;
     pointer-events: none;
   }
 
-  .pl-image-gallery:hover .pl-image-gallery__button,
-  .pl-image-gallery:focus-within .pl-image-gallery__button {
+  .pf-image-gallery:hover .pf-image-gallery__button,
+  .pf-image-gallery:focus-within .pf-image-gallery__button {
     opacity: 1;
     pointer-events: auto;
   }

package/dist/markdown/package-manager-tabs.js

@@ -288,7 +288,7 @@ function createPackageManagerCodeElement(code, language) {
             {
                 type: 'mdxJsxAttribute',
                 name: 'className',
-                value: 'pl-package-manager-code',
+                value: 'pf-package-manager-code',
             },
             {
                 type: 'mdxJsxAttribute',

package/dist/mdx/AccordionItem.astro

@@ -23,8 +23,8 @@ if (!title) {
 ---
 
 <details
-  class="pl-accordion"
-  data-pl-accordion
+  class="pf-accordion"
+  data-pf-accordion
   data-value={value}
   data-disabled={disabled ? 'true' : undefined}
   id={id}
@@ -32,11 +32,11 @@ if (!title) {
 >
   <summary
     aria-disabled={disabled ? 'true' : undefined}
-    class="pl-accordion__trigger"
-    data-pl-accordion-trigger
+    class="pf-accordion__trigger"
+    data-pf-accordion-trigger
   >
-    <span class="pl-accordion__title">{title}</span>
-    <span aria-hidden="true" class="pl-accordion__chevron">
+    <span class="pf-accordion__title">{title}</span>
+    <span aria-hidden="true" class="pf-accordion__chevron">
       <svg fill="none" height="16" viewBox="0 0 24 24" width="16">
         <path
           d="m6 9 6 6 6-6"
@@ -48,7 +48,7 @@ if (!title) {
       </svg>
     </span>
   </summary>
-  <div class="pl-accordion__content">
+  <div class="pf-accordion__content">
     <slot />
   </div>
 </details>

package/dist/mdx/Accordions.astro

@@ -1,4 +1,6 @@
 ---
+import '../theme-tokens.css';
+
 interface Props {
   multiple?: boolean;
   defaultValue?: string | string[];
@@ -14,10 +16,10 @@ const defaultValues =
 ---
 
 <div
-  class="pl-accordions"
+  class="pf-accordions"
   data-default-values={JSON.stringify(defaultValues)}
   data-multiple={multiple ? 'true' : undefined}
-  data-pl-accordions
+  data-pf-accordions
 >
   <slot />
 </div>
@@ -27,26 +29,26 @@ const defaultValues =
 </script>
 
 <style is:global>
-  .pl-accordions {
+  .pf-accordions {
     border-bottom: 1px solid
-      color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
+      color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
     border-top: 1px solid
-      color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
+      color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
     margin-block: 1.5rem;
   }
 
-  .pl-accordion {
+  .pf-accordion {
     border-bottom: 1px solid
-      color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
+      color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
   }
 
-  .pl-accordion:last-child {
+  .pf-accordion:last-child {
     border-bottom: 0;
   }
 
-  .pl-accordion__trigger {
+  .pf-accordion__trigger {
     align-items: center;
-    color: var(--pl-text-strong, var(--pl-text, #182230));
+    color: var(--pf-text-strong, var(--pf-text, #182230));
     cursor: pointer;
     display: flex;
     gap: 1rem;
@@ -57,30 +59,30 @@ const defaultValues =
     transition: color 160ms ease;
   }
 
-  .pl-accordion__trigger::-webkit-details-marker {
+  .pf-accordion__trigger::-webkit-details-marker {
     display: none;
   }
 
-  .pl-accordion__trigger:hover {
-    color: var(--pl-accent, #4f46e5);
+  .pf-accordion__trigger:hover {
+    color: var(--pf-accent, #3e7e55);
     text-decoration: underline;
     text-underline-offset: 0.25rem;
   }
 
-  .pl-accordion__trigger:focus-visible {
-    border-radius: var(--pl-radius-md, 0.5rem);
-    outline: 2px solid var(--pl-accent, #4f46e5);
+  .pf-accordion__trigger:focus-visible {
+    border-radius: var(--pf-radius-md, 0.5rem);
+    outline: 2px solid var(--pf-accent, #3e7e55);
     outline-offset: 2px;
   }
 
-  .pl-accordion__title {
+  .pf-accordion__title {
     font-size: 0.9375rem;
     font-weight: 500;
     line-height: 1.5rem;
   }
 
-  .pl-accordion__chevron {
-    color: var(--pl-text-muted, #667085);
+  .pf-accordion__chevron {
+    color: var(--pf-text-muted, #667085);
     display: inline-flex;
     flex: 0 0 auto;
     transition:
@@ -88,38 +90,38 @@ const defaultValues =
       transform 160ms ease;
   }
 
-  .pl-accordion[open] > .pl-accordion__trigger .pl-accordion__chevron {
+  .pf-accordion[open] > .pf-accordion__trigger .pf-accordion__chevron {
     transform: rotate(180deg);
   }
 
-  .pl-accordion__trigger:hover .pl-accordion__chevron {
+  .pf-accordion__trigger:hover .pf-accordion__chevron {
     color: currentColor;
   }
 
-  .pl-accordion__content {
-    color: var(--pl-text, #344054);
+  .pf-accordion__content {
+    color: var(--pf-text, #344054);
     font-size: 0.9375rem;
     line-height: 1.75;
     padding-block: 0 1rem;
   }
 
-  .pl-accordion__content > :first-child {
+  .pf-accordion__content > :first-child {
     margin-block-start: 0;
   }
 
-  .pl-accordion__content > :last-child {
+  .pf-accordion__content > :last-child {
     margin-block-end: 0;
   }
 
-  .pl-accordion__content > * + * {
+  .pf-accordion__content > * + * {
     margin-block-start: 0.75rem;
   }
 
-  .pl-accordion[data-disabled='true'] {
+  .pf-accordion[data-disabled='true'] {
     opacity: 0.55;
   }
 
-  .pl-accordion[data-disabled='true'] > .pl-accordion__trigger {
+  .pf-accordion[data-disabled='true'] > .pf-accordion__trigger {
     cursor: not-allowed;
     text-decoration: none;
   }