feat: update colors

Author: hoangdevnull

.prettierignore

@@ -3,3 +3,4 @@ node_modules
 coverage
 .next
 build
+/packages/ui/dist

.vscode/settings.json

@@ -22,5 +22,8 @@
     ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
   "html.format.wrapAttributes": "auto",
-  "cSpell.words": ["Hoverable", "sonner", "tailwindcss", "tsup"]
+  "cSpell.words": ["Hoverable", "sonner", "tailwindcss", "tsup"],
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

apps/web/src/components/View.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
 import type { ReactNode } from 'react';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

apps/web/src/stories/autocomplete.stories.tsx

@@ -5,7 +5,7 @@ import { Autocomplete, type AutocompleteProps } from '@var-ui/core';
 import { EnhancedView } from '@/components/View';
 
 const variants: AutocompleteProps['variant'][] = ['default', 'destructive'];
-const sizes: AutocompleteProps['size'][] = ['sm', 'md'];
+const sizes: AutocompleteProps['size'][] = ['xs', 'sm', 'md'];
 
 const meta: Meta = {
   title: 'Components/Autocomplete',

apps/web/src/stories/checkbox.stories.tsx

@@ -5,7 +5,7 @@ import { Star01Icon } from '@var-ui/icons';
 
 import { EnhancedView, View } from '@/components/View';
 
-const sizes: CheckboxProps['size'][] = ['sm', 'md'];
+const sizes: CheckboxProps['size'][] = ['sm', 'md', 'tag-sm', 'tag-md', 'tag-lg'];
 const checkboxOptions: CheckboxProps['checked'][] = ['indeterminate', true, false, undefined];
 const meta: Meta = {
   title: 'Components/Checkbox',

apps/web/src/stories/input.stories.tsx

@@ -6,7 +6,7 @@ import { HelpCircleIcon, Mail01Icon } from '@var-ui/icons';
 import { EnhancedView } from '@/components/View';
 
 const variants: InputProps['variant'][] = ['default', 'destructive'];
-const sizes: InputProps['size'][] = ['sm', 'md'];
+const sizes: InputProps['size'][] = ['xs', 'sm', 'md'];
 
 const meta: Meta = {
   title: 'Components/Input',

apps/web/src/stories/layout.stories.tsx

@@ -211,7 +211,7 @@ const links = [
 
 const DefaultTemplate: StoryFn<typeof Layout> = ({ ...args }) => {
   return (
-    <div className="bg-background-secondary border-border relative min-h-[50vh] border">
+    <div className="bg-background border-border relative min-h-[50vh] border">
       <Layout>
         <Sidebar {...args}>
           <Sidebar.Head>

apps/web/src/stories/modal.stories.tsx

@@ -148,7 +148,7 @@ const DefaultTemplate: StoryFn<ModalProps> = ({ align, ...args }: any) => {
           </ModalBody>
 
           <ModalAction>
-            <Button variant="outline" fullWidth>
+            <Button variant="outline" color="default" fullWidth>
               Discard
             </Button>
             <Button onClick={() => toast.error('error')} fullWidth>

apps/web/src/stories/select.stories.tsx

@@ -5,7 +5,7 @@ import { Select, type SelectProps } from '@var-ui/core';
 import { EnhancedView } from '@/components/View';
 
 const variants: SelectProps['variant'][] = ['default', 'destructive'];
-const sizes: SelectProps['size'][] = ['sm', 'md'];
+const sizes: SelectProps['size'][] = ['xs', 'sm', 'md'];
 
 const meta: Meta = {
   title: 'Components/Select',

apps/web/src/stories/sidebar.stories.tsx

@@ -211,7 +211,7 @@ const links = [
 
 const DefaultTemplate: StoryFn<SidebarProps> = ({ ...args }) => {
   return (
-    <div className="bg-background-secondary relative min-h-[50vh]">
+    <div className="bg-background relative min-h-[50vh]">
       <SidebarProvider {...args}>
         <Sidebar>
           <Sidebar.Head>