-
Component Showcases
+
Components
All {componentFamilies.length} public @pathscale/ui component families,
with focused demonstrations and a complete coverage lab.
diff --git a/src/pages/Theming.tsx b/src/pages/Theming.tsx
index 7961768..2d51a93 100644
--- a/src/pages/Theming.tsx
+++ b/src/pages/Theming.tsx
@@ -72,6 +72,7 @@ import {
readThemeEditorState,
writeThemeEditorState,
} from "../lib/themeEditorPersistence";
+import { withThemeAliases } from "../lib/themeAliases";
import { createActionStatus } from "../components/showcase/ActionStatus";
import {
accentOptions,
@@ -81,6 +82,7 @@ import {
DEFAULT_STRENGTH,
DEFAULT_SURFACE,
DEFAULT_TEXT_BRIGHTNESS,
+ enforceThemeInkContrast,
SOFTNESS_STOPS,
STRENGTH_STOPS,
surfaceColors,
@@ -96,6 +98,11 @@ const withIdentity = (theme: Theme): Theme => ({
_id: theme._id || `${Date.now()}-${Math.random().toString(36).slice(2)}`,
});
+const normalizeTheme = (theme: Theme): Theme =>
+ withIdentity(
+ withThemeAliases(withGlassThemeDefaults(enforceThemeInkContrast(theme))),
+ );
+
const randomItem = (values: readonly T[]): T =>
values[Math.floor(Math.random() * values.length)];
@@ -150,15 +157,11 @@ const restoreThemeLibrary = (
persisted: ReturnType,
): { currentTheme: Theme; themes: Theme[] } => {
if (!persisted) {
- const currentTheme = withIdentity(
- withGlassThemeDefaults({ ...createComposedTheme(), name: "Theme 1" }),
- );
+ const currentTheme = normalizeTheme({ ...createComposedTheme(), name: "Theme 1" });
return { currentTheme, themes: [currentTheme] };
}
- const currentTheme = withIdentity(
- withGlassThemeDefaults(persisted.currentTheme),
- );
+ const currentTheme = normalizeTheme(persisted.currentTheme);
let linkedCurrentTheme = false;
const themes = persisted.themes.map((theme) => {
const isCurrentTheme =
@@ -169,7 +172,7 @@ const restoreThemeLibrary = (
linkedCurrentTheme = true;
return currentTheme;
}
- return withIdentity(withGlassThemeDefaults(theme));
+ return normalizeTheme(theme);
});
return { currentTheme, themes };
@@ -217,7 +220,7 @@ export default function Theming() {
};
const commitTheme = (theme: Theme) => {
- const next = withIdentity(withGlassThemeDefaults(theme));
+ const next = normalizeTheme(theme);
setCurrentTheme(next);
const themes = customThemes().map((saved) =>
identity(saved) === identity(next) ? next : saved,
@@ -292,12 +295,10 @@ export default function Theming() {
const usedNames = new Set(customThemes().map((theme) => theme.name));
let nextThemeNumber = 1;
while (usedNames.has(`Theme ${nextThemeNumber}`)) nextThemeNumber += 1;
- const theme = withIdentity(
- withGlassThemeDefaults({
- ...createComposedTheme(),
- name: `Theme ${nextThemeNumber}`,
- }),
- );
+ const theme = normalizeTheme({
+ ...createComposedTheme(),
+ name: `Theme ${nextThemeNumber}`,
+ });
const themes = [theme, ...customThemes()];
setCurrentTheme(theme);
setCustomThemes(themes);
@@ -322,7 +323,7 @@ export default function Theming() {
return;
}
- const next = remaining[0] || withIdentity(createComposedTheme());
+ const next = remaining[0] || normalizeTheme(createComposedTheme());
setCurrentTheme(next);
setCustomThemes(remaining);
if (applyToWholeSite()) applyThemeToDocument(next);
@@ -331,7 +332,7 @@ export default function Theming() {
};
const clearAllThemes = () => {
- const next = withIdentity(createComposedTheme());
+ const next = normalizeTheme(createComposedTheme());
setCurrentTheme(next);
setCustomThemes([]);
if (applyToWholeSite()) applyThemeToDocument(next);
diff --git a/src/pages/docs/Components.tsx b/src/pages/docs/Components.tsx
deleted file mode 100644
index e1285c7..0000000
--- a/src/pages/docs/Components.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Component, For } from "solid-js";
-import { ContentContainer } from "../../components/content/ContentContainer";
-import { Card, Flex, Grid } from "@pathscale/ui";
-import { routes } from "../../routes";
-import { ROUTES } from "../../config/routes";
-
-const Components: Component = () => {
- // Filter out non-component routes
- const componentRoutes = routes.filter(
- (route) =>
- route.path !== ROUTES.HOME &&
- route.path !== ROUTES.DOCS &&
- route.path !== ROUTES.THEMING &&
- !route.path.startsWith("/docs/")
- );
-
- // Group components by category
- const categories = {
- Layout: ["Grid", "Flex", "Stack", "Divider"],
- Navigation: [
- "Navbar",
- "Breadcrumb",
- "Sidenav",
- "Steps",
- "Tabs",
- "Menu",
- "Pagination",
- ],
- "Data Display": [
- "Card",
- "Table",
- "Stats",
- "Timeline",
- "Badge",
- "Avatar",
- "Indicator",
- ],
- Feedback: [
- "Alert",
- "Spinner",
- "Progress",
- "Radial Progress",
- "Toast",
- "Skeleton",
- ],
- "Forms & Inputs": [
- "Button",
- "Input",
- "Textarea",
- "Select",
- "Checkbox",
- "Radio",
- "Range",
- "Switch",
- "File Input",
- "Rating",
- ],
- "Overlays & Popups": ["Dialog", "Dropdown", "Tooltip", "Drawer"],
- "Media & Display": [
- "Carousel",
- "Artboard",
- "Browser Mockup",
- "Phone Mockup",
- "Window Mockup",
- "Code Mockup",
- "Mask",
- ],
- "Utilities & Helpers": [
- "Kbd",
- "Join",
- "Collapse",
- "Accordion",
- "Swap",
- "Countdown",
- "Diff",
- "Copy Button",
- ],
- };
-
- const categoryDescriptions = {
- Layout:
- "Core components for structuring your application's layout with flexible grids and spacing utilities.",
- Navigation:
- "Components for building intuitive navigation systems and user flows.",
- "Data Display":
- "Elements for presenting data and information in clear, organized formats.",
- Feedback:
- "Interactive components that provide visual feedback and status updates to users.",
- "Forms & Inputs":
- "Form components designed for optimal user input and data collection.",
- "Overlays & Popups":
- "Modal and overlay components for additional content and interactions.",
- "Media & Display":
- "Components for showcasing media content and creating visual mockups.",
- "Utilities & Helpers":
- "Utility components that enhance functionality and user experience.",
- };
-
- const getComponentsByCategory = (category: string) => {
- return componentRoutes.filter((route) =>
- categories[category as keyof typeof categories]?.some((comp) =>
- route.name.toLowerCase().includes(comp.toLowerCase())
- )
- );
- };
-
- return (
-
-
-
Component Library
-
- Explore our extensive collection of UI components, thoughtfully
- organized by category. Each component is designed with accessibility,
- performance, and developer experience in mind.
-
-
-
- {(category) => {
- const components = getComponentsByCategory(category);
- return (
-
- );
- }}
-
-