From a1242a51bad0f601fbae43d66a3605f9b282a64c Mon Sep 17 00:00:00 2001
From: Delusoire <deluso7re@outlook.com>
Date: Sun, 8 Sep 2024 08:31:09 +0100
Subject: [PATCH] wip

---
 .../marketplace/src/components/VersionList/index.tsx |  6 +++---
 modules/style-smith/src/webpack.ts                   | 12 +++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/modules/marketplace/src/components/VersionList/index.tsx b/modules/marketplace/src/components/VersionList/index.tsx
index 4615010..fda3ce7 100644
--- a/modules/marketplace/src/components/VersionList/index.tsx
+++ b/modules/marketplace/src/components/VersionList/index.tsx
@@ -18,7 +18,7 @@ import { classnames } from "/modules/stdlib/src/webpack/ClassNames.ts";
 import { UI } from "/modules/stdlib/src/webpack/ComponentLibrary.ts";
 import { usePanelAPI } from "/modules/stdlib/src/webpack/CustomHooks.ts";
 import { ScrollableText } from "/modules/stdlib/src/webpack/ReactComponents.js";
-import { PanelContent, PanelHeader, PanelSkeleton } from "/modules/stdlib/src/webpack/ReactComponents.ts";
+import { PanelContainer, PanelContent, PanelHeader } from "/modules/stdlib/src/webpack/ReactComponents.ts";
 import { useQuery } from "/modules/stdlib/src/webpack/ReactQuery.ts";
 import { useLocation } from "/modules/stdlib/src/webpack/ReactRouter.xpui.ts";
 
@@ -30,11 +30,11 @@ export default function () {
 	}
 
 	return (
-		<PanelSkeleton label="Marketplace">
+		<PanelContainer label="Marketplace">
 			<PanelContent>
 				<VersionListPanelContent />
 			</PanelContent>
-		</PanelSkeleton>
+		</PanelContainer>
 	);
 }
 
diff --git a/modules/style-smith/src/webpack.ts b/modules/style-smith/src/webpack.ts
index e14d90e..93e4a28 100644
--- a/modules/style-smith/src/webpack.ts
+++ b/modules/style-smith/src/webpack.ts
@@ -1,7 +1,10 @@
-import { webpackRequire } from "/modules/stdlib/src/wpunpk.mix.ts";
+import { toCamelCase, toKebabCase } from "/hooks/std/text.ts";
 
+import { webpackRequire } from "/modules/stdlib/src/wpunpk.mix.ts";
 import { modules } from "/modules/stdlib/src/webpack/index.ts";
 
+import type { DarkLightPair } from "./palette.ts";
+
 export type ColorScheme<T = string> = {
 	background: {
 		base: T;
@@ -112,9 +115,7 @@ export const colorSchemeToCssAttributes = PaletteExports.find((e: any) =>
 	scheme: ColorScheme,
 ) => string[];
 
-export const colorSetToCssClassName = PaletteExports.find((e: any) =>
-	e.toString().includes('"encore-"') && e.toString().includes('"-set"')
-) as (set: ColorSet) => string;
+export const colorSetToCssClassName = (set: ColorSet) => `encore-${toKebabCase(set)}-set`;
 
 const encoreThemeSelectors = {
 	dark: ".encore-dark-theme",
@@ -222,9 +223,6 @@ export const nestColorScheme = <T>(scheme: FlatColorScheme<T>): ColorScheme<T> =
 	};
 };
 
-import { toCamelCase } from "/hooks/std/text.ts";
-import type { DarkLightPair } from "./palette.ts";
-
 async function getDefaultColorThemes() {
 	const themes = {
 		dark: {},