feat: Added corner, font and icon customization support! by ebanDev · Pull Request #3 · Rareer/nuxt-ui-theme-builder

ebanDev · 2025-12-13T10:42:16Z

This pull request introduces a unified icon management system and adds fonts and corner configuration throughout the app. The most significant changes are the addition of a centralized icon mapping in the app config, updates to font variables and weights in CSS, and refactoring of all icon usage in components to use a new icon composable. This improves maintainability and consistency for icons and fonts across the codebase.

Icon customization:

Added a centralized icons mapping to app.config.ts for all icon names and their Lucide icon references.
Replaced all hardcoded icon strings in components (AppHeader.vue, AppNavigation.vue, AIGenerateThemeModal.vue, ColorListing.vue) with the new useAppIcons composable for consistent icon usage.
Synced the icons config with the icon store in app.vue using a new watch effect, ensuring dynamic icon updates.
Added support for lucide, mingcute, ph, ph-bold, hugeicons, carbon and mynaui icon packs

Font customization:

Defined CSS variables for --font-sans, --font-serif, and --font-mono, and added font-weight variables and utility classes for all font weights in main.css.
Set the default font family and weight for the root and code elements using the new CSS variables.

Corner Shape customization

Added a ui-corner-shape variable customizable through the panel that corresponds to the new CSS value (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/corner-shape-value)

vercel · 2025-12-13T10:42:21Z

@ebanDev is attempting to deploy a commit to the Toni's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copilot

Pull request overview

This pull request introduces comprehensive customization features for icons, fonts, and corner shapes throughout the theme builder. The implementation adds a centralized icon management system with support for multiple icon packs (lucide, mingcute, hugeicons, carbon, ph, ph-bold, mynaui), font family and weight customization, and CSS corner-shape configuration using the superellipse value.

Key Changes:

Centralized icon store with preset mappings and dynamic icon switching via useAppIcons composable
Font customization with CSS variables for sans, serif, mono families and all font weights (100-900), plus Google Fonts auto-loading
Corner shape customization using CSS corner-shape property with superellipse values and slider UI

Reviewed changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
scripts/check-icon-packs.mjs	New validation script to verify icon availability across all supported icon packs via Iconify API
app/store/icons.ts	Core icon store managing icon mappings, presets, and pack switching logic
app/config/appIcons.ts	App-specific icon key definitions and preset mappings for each icon pack
app/composables/useAppIcons.ts	Composable providing reactive access to current icon pack's icon mappings
server/api/export-theme.post.ts	Updated export logic to include icons and font/corner CSS in generated theme files
package.json	Added icon pack dependencies (@iconify-json packages) and new check:icons script
i18n/locales/en.json, de.json	Translation strings for font, icon, and corner shape configuration UI
app/store/theme.ts	Added font family, weight, and corner shape CSS variable defaults with reset functionality
app/store/savedThemes.ts	Extended theme snapshots to persist icon configurations
app/composables/useThemeImport.ts	Import logic updated to handle font variables and ensure defaults for older exports
app/composables/useThemeExport.ts	Export logic enhanced to include icon mappings in theme data
app/composables/useThemeCss.ts	Font loading logic with Google Fonts integration and dynamic link tag management
app/components/VariableConfigurator.vue	Major UI additions for font input fields, icon preset selector, corner shape controls, and randomize theme button
app/components/UiSlotDefaults.vue	Updated to use app icon composable instead of hardcoded icon strings
app/components/UiOptionSlots.vue	Migrated icon references to use app icon composable
app/components/Combobox.vue	Fixed incorrect import and updated icon usage
app/components/ColorListing.vue	Converted icon strings to use app icon composable
app/components/AppNavigation.vue	Navigation icons now use dynamic app icons
app/components/AppHeader.vue	Header action icons migrated to app icon system
app/components/AIGenerateThemeModal.vue	Modal icons updated to use app icon composable
app/pages/preview.vue	Preview page icons converted to dynamic references with stray text cleanup needed
app/pages/index.vue	Landing page icons updated to use app icon composable
app/assets/css/main.css	Added font CSS variables and utility classes for all weights
app/app.vue	Icon store synchronization with app config via watchEffect
app/app.config.ts	Default Nuxt UI icon mappings and font variable definitions

Comments suppressed due to low confidence (1)

app/store/theme.ts:37

Multiple German comments are present in this file. Consider translating to English for consistency with the rest of the codebase. Examples: "Name der CSS-Variable (ohne --)", "Typ der Zuweisung", "Wert oder Referenz", "Anzeigename für die UI", "Kategorie für die Gruppierung in der UI", "Ausgewählte Grundfarbe (ohne Shade) für die UI", and "Vordefinierte CSS-Variablen".

// Definiere die zusätzlichen CSS-Variablen
export type CssVariableType = 'color-reference' | 'direct-value';

export interface CssVariableMapping {
	name: string; // Name der CSS-Variable (ohne --)
	type: CssVariableType; // Typ der Zuweisung (Farbreferenz oder direkter Wert)
	value: string; // Wert oder Referenz
	label: string; // Anzeigename für die UI
	category: string; // Kategorie für die Gruppierung in der UI
	selectedColor?: string; // Ausgewählte Grundfarbe (ohne Shade) für die UI
}

export type ThemeMode = 'light' | 'dark';

// Vordefinierte CSS-Variablen
export const predefinedCssVariables: CssVariableMapping[] = [

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-13T10:49:34Z

+function normalizeCornerShapeValue(raw: string): string {
+	if (!raw) return 'superellipse(1)';
+	const trimmed = raw.trim().toLowerCase();
+	const match = trimmed.match(/^superellipse\(([^)]+)\)$/);
+	if (match) {
+		const arg = match[1].replace(/\s+/g, '');
+		if (/^-?inf(?:inity)?$/.test(arg)) return arg.startsWith('-') ? 'superellipse(-inf)' : 'superellipse(inf)';
+		const num = Number(arg);
+		if (Number.isFinite(num)) return `superellipse(${trimTrailingZeros(num)})`;
+		return `superellipse(${arg})`;
+	}
+	return trimmed;
+}
+
+function parseCornerShapeNumeric(raw: string): number {
+	const normalized = normalizeCornerShapeValue(raw);
+	const keywords: Record<string, number> = {
+		square: 4,
+		squircle: 2,
+		round: 1,
+		bevel: 0,
+		scoop: -1,
+		notch: -4,
+	};
+	if (normalized in keywords) return keywords[normalized];
+
+	const match = normalized.match(/^superellipse\(([^)]+)\)$/);
+	if (match) {
+		const arg = match[1];
+		if (/^-?inf/.test(arg)) return arg.startsWith('-') ? -4 : 4;
+		const num = Number(arg);
+		if (Number.isFinite(num)) return num;
+	}
+
+	const fallback = Number(normalized);
+	return Number.isFinite(fallback) ? fallback : 1;
+}


Inconsistent handling of infinity values: the normalization returns 'superellipse(-inf)' and 'superellipse(inf)' strings, but the parsing function expects regex patterns like '/^-?inf/' which would match 'infinity', 'inf', etc. The regex should be more explicit to match the exact format produced by normalization.

@copilot open a new pull request to apply changes based on this feedback

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ebanDev · 2025-12-13T11:07:30Z

Just implemented some of Copilot's suggestions, btw @Rareer maybe you should consider changing the license because it being (c) (according to readme) basically makes this PR illegal 😅

feat: Added corner, font and icon customization support!

10d11df

Copilot AI review requested due to automatic review settings December 13, 2025 10:42

Copilot started reviewing on behalf of ebanDev December 13, 2025 10:42 View session

Copilot AI reviewed Dec 13, 2025

View reviewed changes

ebanDev and others added 14 commits December 13, 2025 11:58

Update app/pages/preview.vue

23cf7be

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/components/VariableConfigurator.vue

8f89651

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/pages/preview.vue

7e10503

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/store/theme.ts

75e8dde

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/config/appIcons.ts

e61a626

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/config/appIcons.ts

7540010

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/components/VariableConfigurator.vue

e6dea56

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/store/theme.ts

f6e7c12

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update server/api/export-theme.post.ts

a6c19d2

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/config/appIcons.ts

5e674f6

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/assets/css/main.css

d3a9672

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/app.vue

cffa283

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/pages/preview.vue

192fb25

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update app/composables/useThemeCss.ts

86869a7

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added corner, font and icon customization support!#3

feat: Added corner, font and icon customization support!#3
ebanDev wants to merge 15 commits into
Rareer:masterfrom
ebanDev:master

ebanDev commented Dec 13, 2025

Uh oh!

vercel Bot commented Dec 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 13, 2025

Uh oh!

ebanDev Dec 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ebanDev commented Dec 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ebanDev commented Dec 13, 2025

Uh oh!

vercel Bot commented Dec 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

ebanDev Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ebanDev commented Dec 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants