studiocms 0.1.0-beta.24 → 0.1.0-beta.26

package/src/components/dashboard/sidebar-modals/VersionModal.astro

@@ -1,11 +1,13 @@
 ---
+import 'studiocms:ui/prose';
 import changelog from 'studiocms:changelog';
 import type { VersionCacheObject } from 'studiocms:sdk/types';
-import { Modal } from 'studiocms:ui/components';
+import { Modal } from 'studiocms:ui/components/modal';
 import currentVersion from 'studiocms:version';
-import { parseMarkdown } from '../../../utils/tinyMDParser';
-import { dateWithTimeAndZone } from '../component-scripts/dateWithTimeAndZone';
-import { timeAgo } from '../component-scripts/timeAgo';
+import { studioCMSSocials } from '../../../consts.js';
+import { parseMarkdown } from '../../../utils/tinyMDParser.js';
+import { dateWithTimeAndZone } from '../component-scripts/dateWithTimeAndZone.js';
+import { timeAgo } from '../component-scripts/timeAgo.js';
 import VersionCheckChangelog from '../sidebar/VersionCheckChangelog.astro';
 
 interface Props {
@@ -14,14 +16,14 @@ interface Props {
 
 const { latestVersion } = Astro.props as Props;
 
-const lastChecked = latestVersion.lastCacheUpdate;
+const lastChecked = new Date(latestVersion.lastCacheUpdate);
 ---
 <!-- The modals in this file are needed inside of the sidebar but cannot be positioned there due to issues with positioning. -->
 <Modal id="version-modal" size="lg">
 
     <h2 slot="header" class="inline-title">
         <span>Version Information</span>
-        <button data-link={Astro.locals.routeMap.sdk.updateLatestVersionCache} 
+        <button data-link={Astro.locals.StudioCMS.routeMap.sdk.updateLatestVersionCache} 
             id="version-modal-reload"
             class="reload-button" 
             title="Check for updates" 
@@ -52,23 +54,25 @@ const lastChecked = latestVersion.lastCacheUpdate;
         </div>
 
         <div class="version-modal-release-notes">
-            <div><Fragment set:html={parseMarkdown(changelog)} /></div>
+            <div class="prose"><Fragment set:html={parseMarkdown(changelog)} /></div>
             <span class="release-notes-read-more">
-                <VersionCheckChangelog link="/studiocms_api/sdk/full-changelog.json"><span class="read-more-text">Full Changelog</span></VersionCheckChangelog>
+                <VersionCheckChangelog changelog={studioCMSSocials.changelog} link={Astro.locals.StudioCMS.routeMap.sdk.changelog}><span class="read-more-text">Full Changelog</span></VersionCheckChangelog>
             </span>
         </div>
 
         <div class="version-modal-links">
             <span class="version-modal-row-title">View on</span>
-            <a href="https://github.com/withstudiocms/studiocms/releases" 
+            <a href={studioCMSSocials.releases} 
                 target="_blank" 
+                rel="noopener noreferrer"
                 class="version-link"
                 title="View Releases on GitHub"
                 aria-label="View Releases on GitHub"
                 ><span class="brand--github"></span>
             </a>
-            <a href="https://npm.im/studiocms" 
+            <a href={studioCMSSocials.npm} 
                 target="_blank" 
+                rel="noopener noreferrer"
                 class="version-link"
                 title="View on NPM"
                 aria-label="View on NPM"
@@ -77,10 +81,25 @@ const lastChecked = latestVersion.lastCacheUpdate;
         </div>
     </div>
 </Modal>
+
+<style is:global>
+
+/* Fix for modal positioning/size issues 
+
+This overrides the @studiocms/ui modal max size 
+to allow for more information on a slightly bigger modal.
+
+*/
+#version-modal.sui-modal.lg {
+  max-width: 800px !important;
+  width: min(90vw, 800px) !important;
+}
+</style>
+
 <style>
 	.version-modal-top-row {
         display: grid;
-        grid-template-columns: 1fr 1fr 2fr;
+        grid-template-columns: 1fr 1fr minmax(0, 3fr);
         gap: 1rem;
     }
 
@@ -98,25 +117,25 @@ const lastChecked = latestVersion.lastCacheUpdate;
         font-size: 1rem;
 
         .read-more-text {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
             text-align: end;
             font-weight: 400;
             cursor: pointer;
         }
 
         .read-more-text:hover {
-            color: hsl(var(--primary-base));
+            color: var(--primary-base);
             text-decoration: underline;
         }
 
         a {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
             text-decoration: none;
             font-weight: 700;
         }
 
         a:hover {
-            color: hsl(var(--primary-base));
+            color: var(--primary-base);
         }
     }
 
@@ -132,7 +151,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
 
     .version-modal-row-title {
         font-weight: 500;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
     }
 
     .version-modal-col-value {
@@ -151,7 +170,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
     }
 
     .version-modal-release-notes {
-        border: 1px solid hsl(var(--border));
+        border: 1px solid var(--border);
         border-radius: 0.5rem;
         padding: 1rem;
         overflow: auto;
@@ -164,7 +183,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
     }
 
     .latest-update-check {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-size: .7em;
         font-weight: 700;
         text-align: center;
@@ -180,11 +199,11 @@ const lastChecked = latestVersion.lastCacheUpdate;
 
     a:-webkit-any-link:hover {
         text-decoration: underline;
-        color: hsl(var(--primary-base));
+        color: var(--primary-base);
     }
 
     a:-webkit-any-link {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         text-decoration: none;
     }
 
@@ -199,7 +218,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
     .reload-button {
         display: flex;
         padding: 0.125rem;
-        border: 2px solid hsl(var(--border));
+        border: 2px solid var(--border);
         border-radius: 0.5rem;
         width: 1.5rem;
         height: 1.5rem;
@@ -210,10 +229,10 @@ const lastChecked = latestVersion.lastCacheUpdate;
         transition: all 0.15s ease;
         margin-left: 0.25rem;
         &:hover {
-            background-color: hsl(var(--border));
+            background-color: var(--border);
 
             .reload {
-                background-color: hsl(var(--primary-base));
+                background-color: var(--primary-base);
             }
         }
     }
@@ -223,7 +242,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
         width: 16px;
         height: 16px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
-        background-color: hsl(var(--text-muted));
+        background-color: var(--text-muted);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;

package/src/components/dashboard/sidebarConfig.ts

@@ -2,8 +2,8 @@ import type { UiLanguageKeys } from 'studiocms:i18n';
 import { makeDashboardRoute, StudioCMSRoutes } from 'studiocms:lib';
 import logger from 'studiocms:logger';
 import { type FinalDashboardPage, getPluginDashboardPages } from 'studiocms:plugin-helpers';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
-import { defaultLang } from '../../lib/i18n/config.js';
+import type { AvailableIcons } from 'studiocms:ui/icons';
+import { defaultLang } from '../../virtuals/i18n/config.js';
 
 /**
  * Represents a link in the sidebar of the dashboard.
@@ -11,7 +11,7 @@ import { defaultLang } from '../../lib/i18n/config.js';
 interface SidebarLink {
 	title?: string;
 	key?: string;
-	icon: HeroIconName;
+	icon: AvailableIcons;
 	href: string;
 }
 
@@ -56,7 +56,7 @@ function filterAndProcessPages(
 
 	for (const { title: t, icon: ico, slug, requiredPermissions } of pages) {
 		const href = makeDashboardRoute(slug);
-		const icon = ico || 'cube-transparent';
+		const icon = (ico || 'heroicons:cube-transparent') as AvailableIcons;
 		const title = t[lang] || t[defaultLang];
 
 		if (admin) {
@@ -113,7 +113,7 @@ export function getSidebarLinks(lang: UiLanguageKeys): GetSidebarLinksReturn {
 	const baseLinks: SidebarLink[] = [
 		{
 			key: 'dashboard-link-label',
-			icon: 'home',
+			icon: 'heroicons:home',
 			href: StudioCMSRoutes.mainLinks.dashboardIndex,
 		},
 		...filterAndProcessPages(userPages, false, ['none', 'visitor'], lang),
@@ -123,7 +123,7 @@ export function getSidebarLinks(lang: UiLanguageKeys): GetSidebarLinksReturn {
 	const editorLinks: SidebarLink[] = [
 		{
 			key: 'content-management-label',
-			icon: 'pencil-square',
+			icon: 'heroicons:pencil-square',
 			href: StudioCMSRoutes.mainLinks.contentManagement,
 		},
 		...filterAndProcessPages(userPages, false, ['editor'], lang),
@@ -133,7 +133,7 @@ export function getSidebarLinks(lang: UiLanguageKeys): GetSidebarLinksReturn {
 	const adminLinks: SidebarLink[] = [
 		{
 			key: 'user-management-label',
-			icon: 'user-group',
+			icon: 'heroicons:user-group',
 			href: StudioCMSRoutes.mainLinks.userManagement,
 		},
 		...filterAndProcessPages(adminPages, true, ['admin'], lang),
@@ -143,12 +143,12 @@ export function getSidebarLinks(lang: UiLanguageKeys): GetSidebarLinksReturn {
 	const ownerLinks: SidebarLink[] = [
 		{
 			key: 'site-configuration-label',
-			icon: 'cog-6-tooth',
+			icon: 'heroicons:cog-6-tooth',
 			href: StudioCMSRoutes.mainLinks.siteConfiguration,
 		},
 		{
 			key: 'mailer-configuration-label',
-			icon: 'inbox',
+			icon: 'heroicons:inbox',
 			href: StudioCMSRoutes.mainLinks.smtpConfiguration,
 		},
 		...filterAndProcessPages(adminPages, true, ['owner'], lang),

package/src/components/dashboard/user-mgmt/InnerSidebarElement.astro

@@ -1,7 +1,12 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Divider, Dropdown, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Dropdown } from 'studiocms:ui/components/dropdown';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 import UserListItem from './UserListItem.astro';
 
 interface Props {
@@ -21,7 +26,7 @@ const safeUsers: {
 	permissionsData:
 		| {
 				user: string;
-				rank: string;
+				rank: AvailablePermissionRanks;
 		  }
 		| undefined;
 }[] = Users.map(({ avatar, email, id, name, username, permissionsData }) => {
@@ -32,7 +37,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 ---
 <div class="inner-user-sidebar-header">
   <Button variant="solid" color="primary" size='md' id="back-to-outer" class="mobile-btn mid-size-btn">
-    <Icon name="arrow-left" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:arrow-left" width={24} height={24} slot="start-content" />
   </Button>
   <form id="search-form">
     <Input name='search' placeholder={t('input-placeholder-search')} type='search' required />
@@ -40,18 +45,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
   <Dropdown
     id='create-user-dropdown'
     options={[
-      { label: t('dropdown-create-user'), icon: 'user-plus', value: 'new-user' },
-      { label: t('dropdown-create-invite'), icon: 'inbox-arrow-down', value: 'new-invite' },
+      { label: t('dropdown-create-user'), icon: 'heroicons:user-plus', value: 'new-user' },
+      { label: t('dropdown-create-invite'), icon: 'heroicons:inbox-arrow-down', value: 'new-invite' },
     ]}
     align={'end'}
     offset={8}
   >
     <Button variant="solid" color="primary" size='md' class="add-button">
-      <Icon name="plus" width={24} height={24} />
+      <Icon name="heroicons:plus" width={24} height={24} />
     </Button>
   </Dropdown>
   <Button variant="solid" color="primary" size='md' class="mobile-btn" id="show-page">
-    <Icon name="x-mark" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:x-mark" width={24} height={24} slot="start-content" />
   </Button>
 </div>
 
@@ -59,7 +64,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 
 <div id="user-list"
     class="inner-sidebar-users scrollbar" 
-    data-userpartial={Astro.locals.routeMap.endpointLinks.partials.userListItems}
+    data-userpartial={Astro.locals.StudioCMS.routeMap.endpointLinks.partials.userListItems}
     data-users={JSON.stringify(safeUsers)}
     >
     { Users.map((user) => <UserListItem user={user} />) }
@@ -68,15 +73,15 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 <div id="search-list"
     class="inner-sidebar-users scrollbar" 
     style="display: none;"
-    data-userpartial={Astro.locals.routeMap.endpointLinks.partials.userListItems}
+    data-userpartial={Astro.locals.StudioCMS.routeMap.endpointLinks.partials.userListItems}
     data-users={JSON.stringify(safeUsers)}
     >
 </div>
 
 <div id="new-users-links"
   style="display: none;"
-  data-create_user={Astro.locals.routeMap.endpointLinks.newUsers.create}
-  data-create_invite={Astro.locals.routeMap.endpointLinks.newUsers.invite}
+  data-create_user={Astro.locals.StudioCMS.routeMap.endpointLinks.newUsers.create}
+  data-create_invite={Astro.locals.StudioCMS.routeMap.endpointLinks.newUsers.invite}
   ></div>
 
 <script>
@@ -130,8 +135,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 </script>
 
 <script>
-    import { DropdownHelper, ModalHelper, toast } from 'studiocms:ui/components';
-  
+    import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster';
+
     const createNewDropdown = new DropdownHelper('create-user-dropdown');
     const createNewUserModal = new ModalHelper('create-new-user-modal');
     const createUserInviteModal = new ModalHelper('create-user-invite-modal');

package/src/components/dashboard/user-mgmt/RankCheck.astro

@@ -1,27 +1,27 @@
 ---
 import { User } from 'studiocms:auth/lib';
-import { Effect } from 'effect';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
+import { Effect } from '../../../effect.js';
 
 interface Props {
-	requiredPermission?: string;
+	requiredPermission?: AvailablePermissionRanks;
 }
 
-const { requiredPermission } = Astro.props;
+const { requiredPermission = 'unknown' } = Astro.props;
 
-const { userSessionData: user } = Astro.locals;
+const { userSessionData: user } = Astro.locals.StudioCMS?.security ?? {
+	userSessionData: null,
+};
 
 const isAuthorized = await Effect.runPromise(
 	Effect.gen(function* () {
 		const { isUserAllowed } = yield* User;
-		return yield* isUserAllowed(
-			user,
-			(requiredPermission as 'owner' | 'admin' | 'editor' | 'visitor' | 'unknown') ?? 'unknown'
-		);
-	}).pipe(User.Provide)
+		return yield* isUserAllowed(user, requiredPermission);
+	})
 );
 
 if (!isAuthorized) {
-	return Astro.redirect(Astro.locals.routeMap.mainLinks.userManagement);
+	return Astro.redirect(Astro.locals.StudioCMS.routeMap.mainLinks.userManagement);
 }
 ---
 

package/src/components/dashboard/user-mgmt/SocialSignin.astro

@@ -1,15 +1,14 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
-import { Button, Card, Center } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import type { OAuthData } from '@withstudiocms/auth-kit/types';
 import { providerData } from '../profile/oAuthButtonProviders.js';
 
 interface Props {
 	lang: UiLanguageKeys;
-	oAuthData?: {
-		provider: string;
-		providerUserId: string;
-		userId: string;
-	}[];
+	oAuthData?: OAuthData[];
 }
 
 const { oAuthData, lang } = Astro.props;
@@ -19,8 +18,8 @@ const hasOAuthData = oAuthData && oAuthData.length > 0;
 const connectedAccounts: { provider: string }[] = [];
 
 if (hasOAuthData) {
-	for (const provider in oAuthData) {
-		connectedAccounts.push({ provider });
+	for (const { provider } of oAuthData ?? []) {
+		connectedAccounts.push({ provider: provider.toLowerCase() });
 	}
 }
 
@@ -81,7 +80,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
 
 <style>
     .social-signin-bg {
-        background-color: hsl(var(--background-step-1));
+        background-color: var(--background-step-1);
         height: auto;
         width: auto;
 
@@ -96,7 +95,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-edit');
             align-items: stretch;
             justify-content: space-between !important;
             width: 100%;
-            margin-button: 1rem;
+            margin-bottom: 1rem;
             cursor: default;
 
             & .icon-and-label {

package/src/components/dashboard/user-mgmt/UserListItem.astro

@@ -1,6 +1,9 @@
 ---
 import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
-import { Divider, Icon, User } from 'studiocms:ui/components';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
+import User from '../../shared/SSRUser.astro';
 
 interface Props {
 	user: {
@@ -12,7 +15,7 @@ interface Props {
 		permissionsData:
 			| {
 					user: string;
-					rank: string;
+					rank: AvailablePermissionRanks;
 			  }
 			| undefined;
 	};
@@ -20,40 +23,93 @@ interface Props {
 }
 
 const { user, searchQuery } = Astro.props;
+
+const userListItemHref = new URL(
+	Astro.locals.StudioCMS.routeMap.mainLinks.userManagementEdit,
+	Astro.url.origin
+);
+userListItemHref.searchParams.set('user', user.id);
+if (searchQuery) {
+	userListItemHref.searchParams.set('search', searchQuery);
+}
+const userListItemHrefString = userListItemHref.toString();
 ---
-<a class="sidebar-user" href={`${Astro.locals.routeMap.mainLinks.userManagementEdit}/?user=${user.id}${searchQuery ? `&search=${searchQuery}` : ''}`} data-astro-reload>
-    <User 
+
+<user-list-item class="sidebar-user" href={userListItemHrefString}>
+    <User
         name={user.name}
-        avatar={user.avatar ?? undefined} 
-        description={getLabelForPermissionLevel(user.permissionsData?.rank!)} 
-        loading='eager',
-        />
-    <Icon name="chevron-right" width={24} height={24} />
-</a>
-<Divider background={'background-step-1'}></Divider>
-
-<script is:inline data-astro-rerun>
-    function setUserLinks() {
-        const userLinks = document.querySelectorAll('.sidebar-user');
-        
-        const setActive = (link) => {
-            userLinks.forEach((link) => {
-                link.classList.remove('active');
-            });
-            link.classList.add('active');
-        };
-        const CurrentQueryParams = new URL(window.location.href).searchParams.get('user');
+        avatar={user.avatar ?? undefined}
+        description={getLabelForPermissionLevel(user.permissionsData?.rank ?? 'unknown')}
+    />
+    <Icon name="heroicons:chevron-right" width={24} height={24} />
+</user-list-item>
+<Divider background={"background-step-1"} />
+
+<script>
+    class UserListItem extends HTMLElement {
+        href: string;
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: "open" });
+            this.href = this.getAttribute("href") || "#";
+        }
+
+        connectedCallback() {
+            this.render();
+            this.setSidebarActiveState();
+            this.setupEventListeners();
+        }
+
+        private render() {
+            if (!this.shadowRoot) return;
 
-        userLinks.forEach((link) => {
-            const LinkQueryParams = new URL(link.href).searchParams.get('user');
+            const slot = document.createElement("slot");
+            this.shadowRoot.appendChild(slot);
+        }
 
-            if (LinkQueryParams === CurrentQueryParams) {
-                setActive(link);
+        private setSidebarActiveState() {
+            const userLinks = document.querySelectorAll(".sidebar-user");
+            const currentQueryParams = new URL(
+                window.location.href,
+            ).searchParams.get("user");
+
+            userLinks.forEach((el) => {
+                el.classList.remove("active");
+            });
+
+            if (this.href.includes(`user=${currentQueryParams}`)) {
+                this.classList.add("active");
             }
+        }
+
+        private setupEventListeners() {
+            this.addEventListener('click', (event) => {
+                const e = event as MouseEvent;
+                const url = new URL(this.href, window.location.origin);
+                const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
+                const target = this.getAttribute('target');
+                const openInNewTab = target === '_blank' || e.ctrlKey || e.metaKey || e.button === 1;
 
-        })
+                if (!isHttp) return;
+
+                if (openInNewTab) {
+                    // Preserve default middle-click behavior if this were a native link
+                    e.preventDefault();
+                    window.open(url.href, '_blank', 'noopener,noreferrer');
+                    return;
+                }
+
+                // Primary (left) click same-tab navigation
+                if (e.button === 0) {
+                    e.preventDefault();
+                    window.location.href = url.href;
+                }
+            });
+        }
     }
 
-    document.addEventListener('astro:page-load', setUserLinks);
-    setUserLinks();
+    if (!customElements.get("user-list-item")) {
+        customElements.define("user-list-item", UserListItem);
+    }
 </script>

package/src/components/default-grid-items/Recently-created-pages.astro

@@ -1,7 +1,9 @@
 ---
 import { FormattedDate } from 'studiocms:components';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Badge, Card, Center } from 'studiocms:ui/components';
+import { Badge } from 'studiocms:ui/components/badge';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
 import { allowedIdentifiers, sortByDate, withinLast30Days } from './utils.js';
 
 // Get all pages and users from the database
@@ -21,7 +23,7 @@ const recentlyUpdatedPages = totalPages
   {
     recentlyUpdatedPages.length > 0 ? (
       recentlyUpdatedPages.map(page => (
-        <Card fullWidth class={'recently-created-page-card'} as='a' href={Astro.locals.routeMap.mainLinks.contentManagementEdit + `?edit=${page.id}`}>
+        <Card fullWidth class={'recently-created-page-card'} as='a' href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementEdit + `?edit=${page.id}`}>
             <div class="card-row">
               <span class="card-title">{page.title} {page.draft && <Badge label="Draft" size="sm" variant="flat" rounding="semi" />}</span>
               <span class="card-date">Created: <FormattedDate date={page.publishedAt} /></span>
@@ -33,8 +35,8 @@ const recentlyUpdatedPages = totalPages
         </Card>
       ))
   ) : (
-      <Card fullWidth style="background-color: hsl(var(--background-step-2));">
-        <Center><span style="color: hsl(var(--text-muted));">No recently created pages found.</span></Center>
+      <Card fullWidth style="background-color: var(--background-step-2);">
+        <Center><span style="color: var(--text-muted);">No recently created pages found.</span></Center>
       </Card>
     )
   }
@@ -51,7 +53,7 @@ const recentlyUpdatedPages = totalPages
   .recently-created-page-card {
     display: flex;
     flex-direction: column;
-    background-color: hsl(var(--background-step-2));
+    background-color: var(--background-step-2);
     text-decoration: none;
     color: initial;
     transition: all .15s ease;
@@ -70,27 +72,27 @@ const recentlyUpdatedPages = totalPages
       }
 
       & .card-date {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-size: .8rem;
       }
 
       & .card-description {
         font-size: 1rem;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         line-clamp: 1;
       }
 
       & .card-icon {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
       }
     }
   }
 
   .recently-created-page-card .card-title {
-    color: hsl(var(--text-normal));
+    color: var(--text-normal);
   }
 
   .recently-created-page-card:hover {
-    background-color: hsl(var(--background-step-3)) !important;
+    background-color: var(--background-step-3) !important;
   }
 </style>