refactor(module)!: implement design system with CSS variables (#2298)

docs/app/components/content/examples/form/FormExampleBasic.vue

@@ -15,7 +15,7 @@ const validate = (state: any): FormError[] => {
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -45,7 +45,7 @@ const items = [
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>
@@ -103,11 +103,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </div>
 
     <div class="flex gap-2 mt-8">
-      <UButton color="gray" type="submit">
+      <UButton color="neutral" type="submit">
         Submit
       </UButton>
 
-      <UButton color="gray" variant="outline" @click="form?.clear()">
+      <UButton color="neutral" variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>

docs/app/components/content/examples/form/FormExampleJoi.vue

@@ -16,7 +16,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -19,7 +19,7 @@ const state = reactive<Partial<Schema & NestedSchema>>({ })
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -35,7 +35,7 @@ const formItemRef = ref()
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>
@@ -62,11 +62,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </UForm>
 
     <div class="flex gap-2">
-      <UButton color="gray" variant="subtle" size="sm" @click="addItem()">
+      <UButton color="neutral" variant="subtle" size="sm" @click="addItem()">
         Add Item
       </UButton>
 
-      <UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
+      <UButton color="neutral" variant="ghost" size="sm" @click="removeItem()">
         Remove Item
       </UButton>
     </div>

docs/app/components/content/examples/form/FormExampleOnError.vue

@@ -15,7 +15,7 @@ const validate = (state: any): FormError[] => {
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<any>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 

docs/app/components/content/examples/form/FormExampleValibot.vue

@@ -16,7 +16,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleYup.vue

@@ -18,7 +18,7 @@ const state = reactive({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>

docs/app/components/content/examples/form/FormExampleZod.vue

@@ -16,7 +16,7 @@ const state = reactive<Partial<Schema>>({
 
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
 </script>