feat(theme): build improved

packages/components/link/src/link.tsx

@@ -25,11 +25,12 @@ const Link = forwardRef<LinkProps, "a">((props, ref) => {
   } = useLink(props);
 
   const domRef = useDOMRef(ref);
+  const Component = as || "a";
 
   const {linkProps} = useAriaLink({...otherProps, elementType: `${as}`}, domRef);
 
   return (
-    <a
+    <Component
       ref={domRef}
       className={cx(
         link({
@@ -46,7 +47,7 @@ const Link = forwardRef<LinkProps, "a">((props, ref) => {
         {children}
         {isExternal && <LinkIcon />}
       </>
-    </a>
+    </Component>
   );
 });
 

packages/components/storybook/tailwind.config.js

@@ -1,5 +1,4 @@
 /** @type {import('tailwindcss').Config} */
-const plugin = require("@nextui-org/theme/plugin")
 
 module.exports = {
   content: ["../**/src/**/*.{js,jsx,ts,tsx}"],
@@ -8,5 +7,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [plugin],
+  plugins: [require("@nextui-org/theme/plugin")],
 };

packages/core/theme/src/colors/blue.ts

@@ -1,25 +0,0 @@
-export const blue = {
-  50: "#EDF5FF",
-  100: "#E1EFFF",
-  200: "#CEE4FE",
-  300: "#B7D5F8",
-  400: "#96C1F2",
-  500: "#5EA2EF",
-  600: "#0072F5",
-  700: "#005FCC",
-  800: "#004799",
-  900: "#00254D",
-};
-
-export const blueDark = {
-  50: "#10253E",
-  100: "#102C4C",
-  200: "#0F3158",
-  300: "#0D3868",
-  400: "#0A4281",
-  500: "#0952A5",
-  600: "#0072F5",
-  700: "#3694FF",
-  800: "#3694FF",
-  900: "#EAF4FF",
-};

packages/core/theme/src/colors/green.ts

@@ -1,25 +0,0 @@
-export const green = {
-  50: "#F1FDF7",
-  100: "#E8FCF1",
-  200: "#DAFBE8",
-  300: "#C8F9DD",
-  400: "#ADF5CC",
-  500: "#88F1B6",
-  600: "#17C964",
-  700: "#13A452",
-  800: "#108944",
-  900: "#06371B",
-};
-
-export const greenDark = {
-  50: "#042F14",
-  100: "#06381B",
-  200: "#074A24",
-  300: "#0A6130",
-  400: "#0B7439",
-  500: "#0F9549",
-  600: "#17C964",
-  700: "#41EC8B",
-  800: "#78F2AD",
-  900: "#ECFDF4",
-};

packages/core/theme/src/colors/index.ts

@@ -1,6 +0,0 @@
-export * from "./blue";
-export * from "./purple";
-export * from "./green";
-export * from "./yellow";
-export * from "./red";
-export * from "./pink";

packages/core/theme/src/colors/pink.ts

@@ -1,25 +0,0 @@
-export const pink = {
-  50: "#FFF0FB",
-  100: "#FFE5F8",
-  200: "#FFD6F3",
-  300: "#FFC2EE",
-  400: "#FFA3E5",
-  500: "#FF7AD9",
-  600: "#FF4ECD",
-  700: "#D6009A",
-  800: "#B80084",
-  900: "#4D0037",
-};
-
-export const pinkDark = {
-  50: "#330025",
-  100: "#470033",
-  200: "#5C0042",
-  300: "#750054",
-  400: "#8A0063",
-  500: "#AD007C",
-  600: "#FF4ECD",
-  700: "#FF2EC4",
-  800: "#FF6BD5",
-  900: "#FFEBF9",
-};

packages/core/theme/src/colors/purple.ts

@@ -1,25 +0,0 @@
-export const purple = {
-  50: "#F7F2FD",
-  100: "#F1E8FB",
-  200: "#EADCF8",
-  300: "#E0CBF5",
-  400: "#D1B1F0",
-  500: "#BC8EE9",
-  600: "#7828C8",
-  700: "#6622AA",
-  800: "#4D1980",
-  900: "#290E44",
-};
-
-export const purpleDark = {
-  50: "#1F0A33",
-  100: "#240C3C",
-  200: "#2E0F4D",
-  300: "#3B1362",
-  400: "#451773",
-  500: "#571D91",
-  600: "#7828C8",
-  700: "#9750DD",
-  800: "#B583E7",
-  900: "#F7ECFC",
-};

packages/core/theme/src/colors/red.ts

@@ -1,25 +0,0 @@
-export const red = {
-  50: "#FEF0F5",
-  100: "#FEE7EF",
-  200: "#FDD8E5",
-  300: "#FCC5D8",
-  400: "#FAA8C5",
-  500: "#F881AB",
-  600: "#F31260",
-  700: "#B80A47",
-  800: "#910838",
-  900: "#4E041E",
-};
-
-export const redDark = {
-  50: "#300313",
-  100: "#300313",
-  200: "#44041A",
-  300: "#5C0523",
-  400: "#6F062B",
-  500: "#910838",
-  600: "#F31260",
-  700: "#F4256D",
-  800: "#F75F94",
-  900: "#FDD8E5",
-};

packages/core/theme/src/colors/yellow.ts

@@ -1,25 +0,0 @@
-export const yellow = {
-  50: "#FEF9F0",
-  100: "#FEF5E7",
-  200: "#FDEFD8",
-  300: "#FCE7C5",
-  400: "#FBDBA7",
-  500: "#F9CB80",
-  600: "#F5A524",
-  700: "#B97509",
-  800: "#925D07",
-  900: "#4E3104",
-};
-
-export const yellowDark = {
-  50: "#3A2503",
-  100: "#442B03",
-  200: "#583804",
-  300: "#704705",
-  400: "#845306",
-  500: "#A66908",
-  600: "#F5A524",
-  700: "#F6AD37",
-  800: "#F8C572",
-  900: "#FEF7EC",
-};

packages/core/theme/src/index.ts

@@ -1,3 +1,2 @@
 export * from "./components";
 export * from "./utils";
-export * from "./colors";

packages/core/theme/src/utils/cva.ts

@@ -1,3 +1,5 @@
-export {cva, cx} from "class-variance-authority";
-export {cva as styled} from "class-variance-authority";
+import {cva} from "class-variance-authority";
+export {cx} from "class-variance-authority";
 export type {VariantProps} from "class-variance-authority";
+
+export {cva, cva as styled};