Fix invalid regex value and update components based on changes in shared-ui project

packages/svelte-color-tools/src/lib/components/ComponentEditor/ComponentEditor.svelte

@@ -13,14 +13,7 @@
 	import { downloadUserThemeJson } from '$lib/theme';
 	import type { AppStore, ColorPickerStore, ThemeEditorStore, UserThemeImported } from '$lib/types';
 	import { getThemeEditorSlotExampleCode } from '$lib/util';
-	import {
-		ColorParser,
-		createEmptyColorPalette,
-		type ComponentColor,
-		type CssColor,
-		type ThemeColor,
-	} from '@a-luna/shared-ui';
-	import { getColorSchemesForAllColorFormats } from '@a-luna/shared-ui/color/schemes';
+	import { createEmptyColorPalette, type ComponentColor, type CssColor, type ThemeColor } from '@a-luna/shared-ui';
 	import { createEventDispatcher } from 'svelte';
 	import { HighlightSvelte } from 'svelte-highlight';
 	import type { Readable } from 'svelte/store';
@@ -151,13 +144,13 @@
 			app: $app,
 		});
 	}
-	$: {
-		const result = ColorParser.parse('oklch(87.78% 0.205 147.55 / 75%)');
-		if (result.success) {
-			const schemeSet = getColorSchemesForAllColorFormats(result.value);
-			console.log({ schemeSet });
-		}
-	}
+	// $: {
+	// 	const result = ColorParser.parse('oklch(87.78% 0.205 147.55 / 75%)');
+	// 	if (result.success) {
+	// 		const schemeSet = getColorSchemesForAllColorFormats(result.value);
+	// 		console.log({ schemeSet });
+	// 	}
+	// }
 
 	$: if (typeof window !== 'undefined' && !editorStateInitialized) {
 		themeEditor = createThemeEditorStore();
@@ -178,7 +171,7 @@
 		dispatch('uiColorChanged', { uiColor: userTheme.uiColor });
 	}
 
-	function handleUiColorChanged(e: CustomEvent<null>) {
+	function handleUiColorChanged(_: CustomEvent<null>) {
 		dispatch('uiColorChanged', { uiColor: $themeEditor.userTheme.uiColor });
 	}
 
@@ -297,7 +290,7 @@
 		--button-background-color-hover: var(--hover-bg-color);
 		--button-background-color-active: var(--active-bg-color);
 		--button-background-color-disabled: var(--disabled-bg-color);
-		--button-border: 1px solid var(--border-color);
+		--button-border: 2px solid var(--border-color);
 
 		display: flex;
 		flex-flow: column nowrap;

packages/svelte-color-tools/src/lib/components/ComponentEditor/ContentViewer/ComponentSection/ComponentSection.svelte

@@ -33,7 +33,7 @@
 <div class="bg-color-selector">
 	Background Color
 	<BgColorSelector bind:value={bgColorHex} disabled={useCustomColor} />
-	<UseCustomColorCheckbox {componentColor} bind:checked={useCustomColor} />
+	<UseCustomColorCheckbox bind:checked={useCustomColor} />
 	{#if useCustomColor}
 		<InputTextBox
 			bind:this={customColorTextBox}

packages/svelte-color-tools/src/lib/components/ComponentEditor/ContentViewer/ComponentSection/UseCustomColorCheckbox.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Checkbox, type ComponentColor } from '@a-luna/shared-ui';
+	import { Checkbox } from '@a-luna/shared-ui';
 
 	export let checked: boolean;
-	export let componentColor: ComponentColor;
 </script>
 
 <Checkbox id={'use-custom-color-checkbox'} bind:checked>

packages/svelte-color-tools/src/lib/components/ComponentEditor/PaletteControls/AddColorButton.svelte

@@ -7,7 +7,7 @@
 	$: tooltip = disabled ? 'Select a palette from the list above' : 'Add color to the selected palette';
 </script>
 
-<ThemeButton {tooltip} {disabled} gridStyle={style} on:click>
+<ThemeButton {tooltip} {disabled} gridStyle={style} iconWidth={'16px'} on:click>
 	<svelte:fragment slot="icon">
 		<BasicIconRenderer icon={'plus'} />
 	</svelte:fragment>

packages/svelte-color-tools/src/lib/components/ComponentEditor/PaletteControls/PaletteControls.svelte

@@ -42,7 +42,6 @@
 	<SelectedColor />
 	<div class="button-list">
 		<SetColorPickerButton
-			style={'grid-column: 2 / span 1; grid-row: 4 / span 1;'}
 			on:click={() => dispatch('setColorPickerValue', { color: $themeEditor.selectedColor.color })}
 			disabled={disableControls || !$themeEditor.colorSelected}
 		/>

packages/svelte-color-tools/src/lib/components/ComponentEditor/PaletteControls/SetColorPickerButton.svelte

@@ -9,7 +9,7 @@
 	gridStyle={style}
 	tooltip={'Set Color Picker Value to Selected Color'}
 	{disabled}
-	iconWidth={'13px'}
+	iconWidth={'16px'}
 	wrapperWidth={'32px'}
 	on:click
 >

packages/svelte-color-tools/src/lib/components/ComponentEditor/UserTheme/UserThemeControls/EditSettingsButton.svelte

@@ -4,8 +4,8 @@
 	export let disabled = false;
 </script>
 
-<ThemeButton tooltip={'Edit Theme Settings'} {disabled} iconWidth={'21px'} on:click>
+<ThemeButton tooltip={'Edit Theme Settings'} {disabled} iconWidth={'16px'} on:click>
 	<svelte:fragment slot="icon">
-		<BasicIconRenderer icon={'gear'} width={'21px'} />
+		<BasicIconRenderer icon={'gear'} width={'16px'} />
 	</svelte:fragment>
 </ThemeButton>

packages/svelte-color-tools/src/lib/components/ComponentEditor/UserTheme/UserThemeControls/ExportUserThemeButton.svelte

@@ -4,8 +4,8 @@
 	export let disabled = false;
 </script>
 
-<ThemeButton tooltip={'Export User Theme'} {disabled} iconWidth={'25px'} on:click>
+<ThemeButton tooltip={'Export User Theme'} {disabled} iconWidth={'18px'} on:click>
 	<svelte:fragment slot="icon">
-		<BasicIconRenderer icon={'export'} width={'25px'} />
+		<BasicIconRenderer icon={'export'} width={'18px'} />
 	</svelte:fragment>
 </ThemeButton>

packages/svelte-color-tools/src/lib/theme/util.ts

@@ -1,10 +1,8 @@
 import type { ThemeColorShallowCopy, UserThemeImported } from '$lib/types';
 import type { ColorFormat, CssColor, ThemeColor } from '@a-luna/shared-ui';
 
-// TODO: Investigate error raised when updating/adding new color to palette which sais that the PROP_NAME_REGEX is an invalid regular expression.
-
 export const CAMEL_CASE_REGEX = /^[a-z](?=.*[A-Z])[A-Za-z]*[^[-`]$/;
-export const PROP_NAME_REGEX = /^[a-z]+$|^[a-z](?=.*[A-Z])[A-Za-z]*[^\[-`]$/;
+export const PROP_NAME_REGEX = /^[a-z]+$|^[a-z](?=.*[A-Z])[A-Za-z]*[^[-`]$/;
 export const CSS_VAR_NAME_REGEX = /^--[A-Za-z][0-9A-Za-z-]*$/;
 
 export function getCssValueForThemeColor(color: ThemeColor, colorFormat: ColorFormat): string {