fix: removed usage of some tailwind colors that shouldn't have been used

- added a recorder color since that doesn't need to be danger red

Author: AlansCodeLog

src/components/Focus.stories.ts

@@ -17,11 +17,11 @@ const meta: Meta = {
 const template = `
 			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
 			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
-			<div class="outline-none outlined-focus:border-red-500 border border-accent-600" tabindex="0">outlined-focus</div>
-			<div class="outline-none outlined-within:border-red-500 border border-accent-600" >
+			<div class="outline-none outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
+			<div class="outline-none outlined-within:border-danger-500 border border-accent-600" >
 				outlined-within<div tabindex="0">Inner</div>
 			</div>
-			<div class="outline-none focus:border-red-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
+			<div class="outline-none focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
 		`
 export default meta
 type Story = StoryObj<typeof NAME>

src/components/LibButton/LibButton.vue

@@ -126,13 +126,13 @@
 			bg-danger-400
 			border-danger-500
 			hover:border-danger-500
-			hover:shadow-red-900/50
+			hover:shadow-danger-900/50
 
 			dark:text-danger-100
 			dark:hover:text-danger-200
 			dark:bg-danger-900
 			dark:border-danger-950
-			dark:hover:shadow-red-500/10
+			dark:hover:shadow-ranger-500/10
 		`,
 		border && color === `secondary` && `
 			text-accent-800

src/components/LibDebug/LibDebug.vue

@@ -6,7 +6,7 @@
 		flex-col
 		rounded
 		border
-		border-red-500
+		border-danger-500
 		p-2
 	"
 >

src/components/LibFileInput/LibFileInput.vue

@@ -11,7 +11,7 @@
 		ease-out`,
 		compact && `rounded`,
 		!compact && `flex w-full flex-col items-center gap-2 rounded-xl  p-2 `,
-		errors.length > 0 && errorFlashing && `border-red-400`,
+		errors.length > 0 && errorFlashing && `border-danger-400`,
 		( $.wrapperAttrs as any ).class
 	)"
 	v-bind="{...$.wrapperAttrs, class:undefined}"

src/components/LibRecorder/LibRecorder.vue

@@ -41,16 +41,16 @@
 	<div
 		:class="twMerge(`recorder-indicator
 				inline-block
-				bg-red-700
+				bg-recorder-700
 				rounded-full
 				w-[1em]
 				h-[1em]
 				shrink-0
-				hover:bg-red-500
+				hover:bg-recorder-500
 			`,
 			recording && `
 				animate-[blink_1s_infinite]
-				bg-red-500
+				bg-recorder-500
 			`,
 			(disabled || readonly) && `
 				bg-neutral-500

src/components/LibSimpleInput/LibSimpleInput.stories.ts

@@ -44,7 +44,7 @@ export const InsideAFlexbox: Story = {
 				Inside a flexbox:
 				<div class="flex flex-wrap">
 					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
-					<div class="border-1 border-red-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
+					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
 				</div>
 		`,
 	}),

src/theme.ts

@@ -1,5 +1,7 @@
-import { type Theme } from "metamorphosis"
+import { ControlVar, type Theme,Units } from "metamorphosis"
 import { baseTheme } from "metamorphosis/BaseTheme"
 
 
 export const theme = baseTheme as Theme
+const recorderColor = new ControlVar(Units.str, "99% 99% 99%")
+theme.add({ "color-recorder": recorderColor })