update colors and remove theme provider and global themes

.storybook/preview.ts

@@ -1,5 +1,4 @@
-import { ProviderStrategyConfiguration, withThemeFromJSXProvider } from "@storybook/addon-themes"
-import { defaultTheme, ThemeProvider as Provider } from "../src/providers/ThemeProvider"
+import { withThemeByClassName } from "@storybook/addon-themes"
 import "~/styles/tailwind.css"
 
 const preview = {
@@ -9,29 +8,12 @@ const preview = {
   },
   decorators: [
     // Theme Light/Dark Switcher
-    // withThemeByClassName({
-    //   themes: {
-    //     light: "light",
-    //     dark: "dark",
-    //   },
-    //   defaultTheme: "light",
-    // }),
-
-    // Theme Color Switcher
-    withThemeFromJSXProvider({
+    withThemeByClassName({
       themes: {
-        blue: "blue",
-        orange: "orange",
-        yellow: "yellow",
-        red: "red",
-        green: "green",
-        purple: "purple",
-        pink: "pink",
-        teal: "teal",
-        gray: "gray",
-      } as any as ProviderStrategyConfiguration["themes"],
-      defaultTheme,
-      Provider,
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
     }),
   ],
 }

package.json

@@ -42,8 +42,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tabler/icons-react": "^2.46.0",
     "cva": "^1.0.0-beta.1",
-    "lucide-react": "^0.311.0",
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {

src/index.ts

@@ -1,5 +1,4 @@
 export * from "./shared"
-export * from "./providers"
 
 // UI
 export * from "./ui/Accordion"

src/layout/Container/Container.variants.ts

@@ -1,5 +1,5 @@
 import { cva } from "../../shared"
 
 export const containerVariants = cva({
-  base: "container mx-auto w-full px-5 md:px-6 lg:px-8",
+  base: "container mx-auto w-full px-5 md:px-6 lg:px-8 2xl:max-w-screen-xl",
 })

src/styles/tailwind.css

@@ -14,7 +14,7 @@ label[for],
 
 svg[stroke="currentColor"] {
   @apply stroke-[1.5];
-  @apply size-[1.428em];
+  @apply size-icon;
 }
 
 .dark {

src/typography/Prose/Prose.tsx

@@ -2,7 +2,6 @@ import { Slot } from "@radix-ui/react-slot"
 import type { HTMLAttributes } from "react"
 import { forwardRef, isValidElement } from "react"
 
-import { useTheme } from "../../providers"
 import { type VariantProps, cx } from "../../shared"
 
 import { proseVariants } from "./Prose.variants"
@@ -19,15 +18,12 @@ export type ProseProps = Omit<HTMLAttributes<ProseElement>, "size"> &
   }
 
 export const Prose = forwardRef<ProseElement, ProseProps>((props, ref) => {
-  const { className, asChild, theme: propTheme, size, ...rest } = props
-
-  const globalTheme = useTheme()
-  const theme = propTheme || globalTheme
+  const { className, asChild, size, ...rest } = props
 
   const useAsChild = asChild && isValidElement(rest.children)
   const Comp = useAsChild ? Slot : "div"
 
-  return <Comp className={cx(proseVariants({ theme, size, className }))} ref={ref} {...rest} />
+  return <Comp className={cx(proseVariants({ size, className }))} ref={ref} {...rest} />
 })
 
 Prose.defaultProps = {

src/typography/Prose/Prose.variants.ts

@@ -4,21 +4,10 @@ export const proseVariants = cva({
   base: [
     "text-pretty text-start prose",
     // Prose Headings
-    "prose-headings:font-medium prose-h1:-tracking-1 prose-h2:-tracking-1",
+    "prose-headings:font-medium prose-h1:-tracking-1 prose-h2:-tracking-1 prose-a:text-primary",
   ],
 
   variants: {
-    theme: {
-      blue: "prose-blue",
-      orange: "prose-orange",
-      yellow: "prose-yellow",
-      red: "prose-red",
-      green: "prose-green",
-      purple: "prose-purple",
-      pink: "prose-pink",
-      teal: "prose-teal",
-      gray: "prose-gray",
-    },
     size: {
       sm: "prose-sm",
       md: "prose-base",
@@ -27,7 +16,6 @@ export const proseVariants = cva({
   },
 
   defaultVariants: {
-    theme: "gray",
     size: "md",
   },
 })

src/ui/Avatar/Avatar.tsx

@@ -4,7 +4,6 @@ import { UserIcon } from "lucide-react"
 import { forwardRef, isValidElement } from "react"
 import type { ComponentPropsWithoutRef, ElementRef, ReactElement, RefObject } from "react"
 
-import { useTheme } from "../../providers"
 import { type VariantProps, cx, getInitials, isReactElement } from "../../shared"
 import { Loader } from "../Loader"
 
@@ -48,14 +47,11 @@ export type AvatarProps = ComponentPropsWithoutRef<typeof Primitive.Image> &
 const AvatarRoot = forwardRef<
   ElementRef<typeof Primitive.Root>,
   ComponentPropsWithoutRef<typeof Primitive.Root> & VariantProps<typeof avatarVariants>
->(({ className, theme: propTheme, variant, size, shape, ...props }, ref) => {
-  const globalTheme = useTheme()
-  const theme = propTheme || globalTheme
-
+>(({ className, variant, size, shape, ...props }, ref) => {
   return (
     <Primitive.Root
       ref={ref}
-      className={cx(avatarVariants({ theme, variant, size, shape, className }))}
+      className={cx(avatarVariants({ variant, size, shape, className }))}
       {...props}
     />
   )
@@ -89,22 +85,11 @@ const AvatarStatus = forwardRef<
 })
 
 const AvatarBase = forwardRef<AvatarElement, AvatarProps>((props, ref) => {
-  const {
-    children,
-    initials,
-    topStatus,
-    bottomStatus,
-    theme,
-    variant,
-    size,
-    shape,
-    src,
-    alt,
-    ...rest
-  } = props
+  const { children, initials, topStatus, bottomStatus, variant, size, shape, src, alt, ...rest } =
+    props
 
   return (
-    <AvatarRoot theme={theme} variant={variant} size={size} shape={shape} {...rest}>
+    <AvatarRoot variant={variant} size={size} shape={shape} {...rest}>
       {/* Show image if available */}
       {src && <AvatarImage ref={ref as RefObject<HTMLImageElement>} alt={alt} src={src} />}
 

src/ui/Avatar/Avatar.variants.ts

@@ -4,23 +4,12 @@ export const avatarVariants = cva({
   base: "relative flex items-center justify-center shrink-0 w-auto",
 
   variants: {
-    theme: {
-      blue: "from-blue-lighter to-blue-light text-blue-dark",
-      orange: "from-orange-lighter to-orange-light text-orange-dark",
-      yellow: "from-yellow-lighter to-yellow-light text-yellow-dark",
-      red: "from-red-lighter to-red-light text-red-dark",
-      green: "from-green-lighter to-green-light text-green-dark",
-      purple: "from-purple-lighter to-purple-light text-purple-dark",
-      pink: "from-pink-lighter to-pink-light text-pink-dark",
-      teal: "from-teal-lighter to-teal-light text-teal-dark",
-      gray: "from-gray-100 to-gray-200 text-gray-600",
-    },
     variant: {
-      soft: "bg-gradient-to-b",
+      soft: "bg-gradient-to-b from-primary-lighter to-primary-light text-primary-dark",
       outline: "border border-gray-200",
     },
     size: {
-      xs: "h-5 min-w-5 text-2xs",
+      xs: "h-5 min-w-5 text-3xs",
       sm: "h-6 min-w-6 text-2xs",
       md: "h-8 min-w-8 text-xs",
       lg: "h-10 min-w-10 text-sm",
@@ -33,7 +22,6 @@ export const avatarVariants = cva({
   },
 
   defaultVariants: {
-    theme: "gray",
     variant: "soft",
     size: "md",
     shape: "circle",

src/ui/Badge/Badge.tsx

@@ -2,7 +2,6 @@ import { Slot } from "@radix-ui/react-slot"
 import { forwardRef, isValidElement } from "react"
 import type { ReactElement, HTMLAttributes } from "react"
 
-import { useTheme } from "../../providers"
 import { type VariantProps, cx } from "../../shared"
 import { Slottable } from "../../utils/Slottable"
 
@@ -30,21 +29,8 @@ export type BadgeProps = Omit<HTMLAttributes<BadgeElement>, "size" | "prefix"> &
   }
 
 export const Badge = forwardRef<BadgeElement, BadgeProps>((props, ref) => {
-  const {
-    children,
-    className,
-    asChild,
-    prefix,
-    suffix,
-    theme: propTheme,
-    variant,
-    size,
-    shape,
-    ...rest
-  } = props
-
-  const globalTheme = useTheme()
-  const theme = propTheme || globalTheme
+  const { children, className, asChild, prefix, suffix, theme, variant, size, shape, ...rest } =
+    props
 
   const useAsChild = asChild && isValidElement(children)
   const Component = useAsChild ? Slot : "span"
@@ -79,6 +65,7 @@ export const Badge = forwardRef<BadgeElement, BadgeProps>((props, ref) => {
 Badge.displayName = "Badge"
 
 Badge.defaultProps = {
+  theme: "blue",
   variant: "solid",
   size: "sm",
   shape: "pill",

src/ui/Badge/Badge.variants.ts

@@ -24,9 +24,9 @@ export const badgeVariants = cva({
       outline: "",
     },
     size: {
-      sm: "text-2xs",
-      md: "text-xs",
-      lg: "text-sm",
+      sm: "text-3xs",
+      md: "text-2xs",
+      lg: "text-xs",
     },
     shape: {
       rounded: "rounded-md",

src/ui/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { AppleIcon } from "lucide-react"
+import { IconSquare } from "@tabler/icons-react"
 
 import { Button } from "./Button"
 
@@ -9,15 +9,16 @@ type Story = StoryObj<typeof Button>
 export default {
   title: "UI/Button",
   component: Button,
-} satisfies Meta
-
-// Stories
-export const Default = {
   args: {
     ...Button.defaultProps,
     children: "Button",
     disabled: false,
   },
+} satisfies Meta
+
+// Stories
+export const Default = {
+  args: {},
 } satisfies Story
 
 export const AsChild = {
@@ -29,12 +30,19 @@ export const AsChild = {
 
 export const WithPrefix = {
   args: {
-    prefix: <AppleIcon />,
+    prefix: <IconSquare />,
   },
 } satisfies Story
 
 export const WithSuffix = {
   args: {
-    suffix: <AppleIcon />,
+    suffix: <IconSquare />,
+  },
+} satisfies Story
+
+export const WithIconOnly = {
+  args: {
+    prefix: <IconSquare />,
+    children: null,
   },
 } satisfies Story